测试鸿蒙

<div class="container">
    <div class="title">
        <text class="name">Food</text>
        <text class="sub-titLe">Choose What You Like</text>
    </div>
<div class="display-styLe">
<!-- 展示区-->
<swiper id="swiperImage" class= "swiper-style">
<image src="{{$item}}" cLass="image-mode" focusable="true" for="{{imageList}}"></image>
</swiper>
<!--产品详情区-->
<div class="container">
<div class="selection-bar-container">
    <div class="selection-bar">
        <image src=" {{$item}}" cLass="option-mode" οnfοcus="swipeToIndex({{$idx}})"
        οnclick="swipeToIndex ({{$idx}})" for="{{imageList}}"></image>
    </div>
</div>
<div class="description-first-paragraph">
    <text class="description">{{descriptionFirstParagraph}}</text>
</div>
<div class="cart">
    <text class="{{cartStyLe}}" οnclick="addCart" οnfοcus="getFocus" οnblur="lostFocus" focusable="true">{{cartText}}</text>
</div>
</div>
</div>
</div>

2

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-size: 100px;
}
/*phone*/
@media screen and (device-type: phone) {
    titLe {
        align-items: fLex-start;
        fLex-direction: coLumn;
        padding-Left: 60px;
        padding-right: 160px;
        padding-top: 20px;
    }

    name {
        font-size: 50px;
        coLor: #000000;
    }

    sub-title {
        font-size: 30px;
        coLor: #7a787d;
        margin-top: 10px;
    }

    dispLay-styLe {
        fLex-direction: coLumn;
        aLign-items: center;
    }
}

 

3

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    swipeToIndex(index) {
        this.$element('swiperImage').swipeTo({index: index});
    },
    //加入购物车
    addCart() {
        if (this.isCartEmpty) {
            this.cartText = 'Cart + 1' ;
            this.cartStyle ='add-cart-text';
            this.isCartEmpty = false;
        }
    },
    //获得焦点
    getFocus() {
        if (this.isCartEmpty) {
            this.cartStyle = 'cart-text-focus';
        }
    },
    //失去焦点
    lostFocus(){
        if (this.isCartEmpty) {
            this.cartStyle = 'cart-text';
        }
    },
}

 

文章来源: laoshifu.blog.csdn.net，作者：红目香薰，版权归原作者所有，如需转载，请联系作者。

原文链接：laoshifu.blog.csdn.net/article/details/117237646