| | |
| | | <!-- #endif --> |
| | | <view class="banner"> |
| | | <swiper class="swiper" |
| | | autoplay="true" |
| | | interval="5000" |
| | | duration="1500" |
| | | @change="swiperChange" |
| | | > |
| | | <swiper-item v-for="(item,index) in bannerList" :key="index"> |
| | | <image class="banner-img" :src="item.img" mode="aspectFill"></image> |
| | | <view class="dots-container flex align-center justify-center"> |
| | | <text class="font-10 white">{{swiperIndex+1}}/{{bannerList.length}}</text> |
| | | </view> |
| | | </swiper-item> |
| | | autoplay="true" |
| | | interval="5000" |
| | | duration="1500" |
| | | @change="swiperChange" |
| | | > |
| | | <swiper-item v-for="(item,index) in bannerList" :key="index"> |
| | | <image class="banner-img" :src="item.img" mode="widthFix"></image> |
| | | <view class="dots-container flex align-center justify-center"> |
| | | <text class="font-10 white">{{swiperIndex+1}}/{{bannerList.length}}</text> |
| | | </view> |
| | | </swiper-item> |
| | | </swiper> |
| | | </view> |
| | | <view class="return-icon iconfont iconzuojiantou" @click="goBack"></view> |
| | | <navigator open-type="navigateBack"> |
| | | <view class="return-icon iconfont iconzuojiantou"></view> |
| | | </navigator> |
| | | <view class="product-price"> |
| | | <text class="font-20 red">¥128.00</text> |
| | | <view class="font-14 flex justify-between"> |
| | | <text class="font-24 red font-bold">¥128.00</text> |
| | | <view class="font-14 flex justify-between mt-5"> |
| | | <text>多肽沁妍水润面膜</text> |
| | | <text class="gray">月销:122</text> |
| | | </view> |
| | |
| | | color: '#abb1cc', |
| | | activeColor: '#518EFF', |
| | | underLineColor: '#518EFF', |
| | | underLineHeight: 6, |
| | | fontSize: '30', |
| | | underLineWidth: 110, |
| | | underLineHeight: 4, |
| | | fontSize: '28', |
| | | underLineWidth: 110 |
| | | }" |
| | | @tabClick="tabClick($event)" |
| | | /> |
| | | </view> |
| | | <view v-if="tabIndex==0"> |
| | | <image class="product-img" mode="aspectFit" src="../../../static/images/banner1.jpg"></image> |
| | | <image class="product-img" mode="widthFix" src="../../../static/images/banner1.jpg"></image> |
| | | </view> |
| | | <view v-else class="product-all"> |
| | | <view class="product-property"> |
| | |
| | | swiperChange(e){ |
| | | this.swiperIndex = e.detail.current; |
| | | }, |
| | | goBack(){ |
| | | uni.navigateBack() |
| | | }, |
| | | tabClick(index){ |
| | | this.tabIndex=index |
| | | } |
| | |
| | | } |
| | | .product-price{ |
| | | background: #FFFFFF; |
| | | padding: 10px; |
| | | padding: 15px 10px; |
| | | border-bottom-left-radius: 4px; |
| | | border-bottom-right-radius: 4px; |
| | | box-shadow:0 6px 6px rgba(237,234,244,0.5); |
| | |
| | | } |
| | | .product-info-row{ |
| | | background: #FFFFFF; |
| | | margin: 0 10px; |
| | | border-bottom: 1px solid #EDEAF4; |
| | | } |
| | | .product-img{ |
| | | width: 100%; |
| | | height: 640px; |
| | | } |
| | | .product-all{ |
| | | background: #F6F6F8; |
| | |
| | | } |
| | | .product-property-row{ |
| | | border-bottom: 1px solid #EDEAF4; |
| | | padding: 10px 0; |
| | | padding: 12px 0; |
| | | } |
| | | .product-property-row:nth-last-child(1){ |
| | | border: 0; |