|
|
|
@ -1,364 +1,406 @@ |
|
|
|
<template> |
|
|
|
<view class="header"> |
|
|
|
<view class="tabs-nav-warp"> |
|
|
|
<scroll-view class="tabs-nav" scroll-x="true"> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" :class="{'on':activeTab===0}" @click="tabChange(0)" v-if="componentContent.firstClassify"> |
|
|
|
{{ componentContent.firstClassify }} |
|
|
|
</view> |
|
|
|
<view class="li" :class="{'on':activeTab===index+beginIndex}" v-for="(item,index) in classifyData" :key="index" @click="tabChange(index+beginIndex,item.id)"> |
|
|
|
{{item.categoryName}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
<div class="hom-pro-list" v-if="productData.length>0"> |
|
|
|
<div class="product-swiper"> |
|
|
|
<div class="product-swiper-box"> |
|
|
|
<div class="product-swiper-warp" v-for="(item,index) in productData" :key="index"> |
|
|
|
<div class=" product-swiper-item" @click="jumpProductDetail(item)"> |
|
|
|
<div class="product-swiper-img"> |
|
|
|
<img class="img pic-img default-img" :src="item.image" onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null"> |
|
|
|
</div> |
|
|
|
<div class="product-swiper-info"> |
|
|
|
<div class="product-info-content"> |
|
|
|
<div class="product-name-row"> |
|
|
|
<label class="product-name">{{item.productName}}</label> |
|
|
|
<image class="product-star" src="https://wechat.hnthee.com/ceres-local-file/image/icon_star.png"></image> |
|
|
|
<label class="product-star-text">3.5</label> |
|
|
|
</div> |
|
|
|
<div class="product-sku-row" v-if="false"> |
|
|
|
<label class="product-sku-name">规格</label> |
|
|
|
</div> |
|
|
|
<div class="product-price-row"> |
|
|
|
<div class="price-warp"> |
|
|
|
<!-- #ifdef MP-WEIXIN --> |
|
|
|
<img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"> |
|
|
|
<!-- #endif --> |
|
|
|
<!-- #ifdef H5 || APP-PLUS --> |
|
|
|
<image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"></image> |
|
|
|
<!-- #endif --> |
|
|
|
<div class="price"> |
|
|
|
¥ {{item.price}} |
|
|
|
<view class="header"> |
|
|
|
<view class="tabs-nav-warp"> |
|
|
|
<scroll-view class="tabs-nav" scroll-x="true"> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" :class="{'on':activeTab===0}" @click="tabChange(0)" |
|
|
|
v-if="componentContent.firstClassify"> |
|
|
|
{{ componentContent.firstClassify }} |
|
|
|
</view> |
|
|
|
<view class="li" :class="{'on':activeTab===index+beginIndex}" v-for="(item,index) in classifyData" |
|
|
|
:key="index" @click="tabChange(index+beginIndex,item.id)"> |
|
|
|
{{item.categoryName}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
<div class="hom-pro-list" v-if="productData.length>0"> |
|
|
|
<div class="product-swiper"> |
|
|
|
<div class="product-swiper-box"> |
|
|
|
<div class="product-swiper-warp" v-for="(item,index) in productData" :key="index"> |
|
|
|
<div class=" product-swiper-item" @click="jumpProductDetail(item)"> |
|
|
|
<div class="product-swiper-img"> |
|
|
|
<img class="img pic-img default-img" :src="item.image" |
|
|
|
onerror="this.src='url(https://wechat.hnthee.com/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null"> |
|
|
|
</div> |
|
|
|
<div class="product-swiper-info"> |
|
|
|
<div class="product-info-content"> |
|
|
|
<div class="product-name-row"> |
|
|
|
<label class="product-name">{{item.productName}}</label> |
|
|
|
<image class="product-star" |
|
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_star.png"> |
|
|
|
</image> |
|
|
|
<label class="product-star-text">3.5</label> |
|
|
|
</div> |
|
|
|
<div class="product-sku-row" v-if="false"> |
|
|
|
<label class="product-sku-name">规格</label> |
|
|
|
</div> |
|
|
|
<div class="product-price-row"> |
|
|
|
<div class="price-warp"> |
|
|
|
<!-- #ifdef MP-WEIXIN --> |
|
|
|
<img class="iconImg" v-if="item.activityType == 1" |
|
|
|
src="../../../static/images/groupBuyIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 2" |
|
|
|
src="../../../static/images/spikeIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 4" |
|
|
|
src="../../../static/images/spikeIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 3" |
|
|
|
src="../../../static/images/discountListIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 5" |
|
|
|
src="../../../static/images/discountListIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 9" |
|
|
|
src="../../../static/images/memberCenterIcon.png"> |
|
|
|
<img class="iconImg" v-if="item.activityType == 8" |
|
|
|
src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"> |
|
|
|
<!-- #endif --> |
|
|
|
<!-- #ifdef H5 || APP-PLUS --> |
|
|
|
<image class="iconImg" v-if="item.activityType == 1" |
|
|
|
src="../../../static/images/groupBuyIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 2" |
|
|
|
src="../../../static/images/spikeIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 4" |
|
|
|
src="../../../static/images/spikeIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 3" |
|
|
|
src="../../../static/images/discountListIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 5" |
|
|
|
src="../../../static/images/discountListIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 9" |
|
|
|
src="../../../static/images/memberCenterIcon.png"></image> |
|
|
|
<image class="iconImg" v-if="item.activityType == 8" |
|
|
|
src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"> |
|
|
|
</image> |
|
|
|
<!-- #endif --> |
|
|
|
<div class="price"> |
|
|
|
¥ {{item.price}} |
|
|
|
</div> |
|
|
|
<!-- <div class="original-price">--> |
|
|
|
<!-- ¥ {{item.originalPrice}}--> |
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<image class="product-add" |
|
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_add.png"></image> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="original-price">--> |
|
|
|
<!-- ¥ {{item.originalPrice}}--> |
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<image class="product-add" src="https://wechat.hnthee.com/ceres-local-file/image/icon_add.png"></image> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="pagination new-pagination"></div> |
|
|
|
</div> |
|
|
|
<button v-show="componentContent.showMore" class="btn-more" @click="jumpProList(componentContent.productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="pagination new-pagination"></div> |
|
|
|
</div> |
|
|
|
<button v-show="componentContent.showMore" class="btn-more" |
|
|
|
@click="jumpProList(componentContent.productData)">查看全部 <span |
|
|
|
class="icon iconfont icon-arrow-right"></span></button> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import {commonMixin} from '../mixin' |
|
|
|
export default { |
|
|
|
mixins: [commonMixin], |
|
|
|
data () { |
|
|
|
return { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
|
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
import { |
|
|
|
commonMixin |
|
|
|
} from '../mixin' |
|
|
|
export default { |
|
|
|
mixins: [commonMixin], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.header { |
|
|
|
.top-box { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding-left: 30upx; |
|
|
|
width: 100%; |
|
|
|
.logo { |
|
|
|
// width: 280upx; |
|
|
|
height: 70upx; |
|
|
|
margin-top: 0upx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
height: 66upx; |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
border-radius: 33upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
margin-right: 30upx; |
|
|
|
.search-icon { |
|
|
|
width: 60upx; |
|
|
|
height: 60upx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.tabs-nav-warp{ |
|
|
|
margin-top: 20upx; |
|
|
|
padding:0 30upx; |
|
|
|
overflow: hidden; |
|
|
|
.tabs-nav{ |
|
|
|
.ul{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: nowrap; |
|
|
|
justify-content: space-between; |
|
|
|
padding-left: 20upx; |
|
|
|
padding-right: 20upx; |
|
|
|
.li{ |
|
|
|
flex: 1 0 auto; |
|
|
|
margin-left: 5upx; |
|
|
|
margin-right: 5upx; |
|
|
|
font-size: 30upx; |
|
|
|
color: #252744; |
|
|
|
position: relative; |
|
|
|
padding-bottom: 15upx; |
|
|
|
padding-left: 27upx; |
|
|
|
padding-right: 27upx; |
|
|
|
padding-top: 15upx; |
|
|
|
text-align: center; |
|
|
|
&:first-child{ |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
&.on{ |
|
|
|
// &:after{ |
|
|
|
// content: ''; |
|
|
|
// width: 100%; |
|
|
|
// height: 4upx; |
|
|
|
// background: #252744; |
|
|
|
// position: absolute; |
|
|
|
// left: 0; |
|
|
|
// bottom: 0; |
|
|
|
// } |
|
|
|
background: #252744; |
|
|
|
box-shadow: 0upx 7upx 14upx 0upx #C5C8ED; |
|
|
|
border-radius: 40upx; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.hom-pro-list{ |
|
|
|
::v-deep .swiper-wrapper{ |
|
|
|
position: static; |
|
|
|
} |
|
|
|
/**横向滑动**/ |
|
|
|
.product-swiper{ |
|
|
|
height: auto; |
|
|
|
overflow: hidden; |
|
|
|
margin: 5upx 34upx; |
|
|
|
|
|
|
|
&+.btn-more{ |
|
|
|
margin-top: 20upx; |
|
|
|
} |
|
|
|
.title{ |
|
|
|
padding: 22upx 0upx 0 0; |
|
|
|
label{ |
|
|
|
background-image: none; |
|
|
|
color: #A56C4C; |
|
|
|
font-style: italic; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
&-box { |
|
|
|
margin-top: 18upx; |
|
|
|
margin-bottom: 18upx; |
|
|
|
margin-left: 18upx; |
|
|
|
margin-right: 18upx; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
overflow-x: auto; |
|
|
|
} |
|
|
|
&-warp{ |
|
|
|
height: 540upx; |
|
|
|
width: 386upx !important; |
|
|
|
margin-left: 18upx; |
|
|
|
margin-right: 18upx; |
|
|
|
} |
|
|
|
&-item { |
|
|
|
height: 540upx; |
|
|
|
width: 386upx !important; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
&-img { |
|
|
|
width: 286upx; |
|
|
|
height: 306upx; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
background: #F6F6F8; |
|
|
|
border: 2upx solid #FFFFFF; |
|
|
|
border-radius: 30upx; |
|
|
|
position: relative; |
|
|
|
padding: 20upx; |
|
|
|
z-index: 2; |
|
|
|
|
|
|
|
.img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
} |
|
|
|
&-info { |
|
|
|
width: 386upx; |
|
|
|
height: 430upx; |
|
|
|
position: absolute; |
|
|
|
top: 110upx; |
|
|
|
background: #FDFDFD; |
|
|
|
box-shadow: 0upx 15upx 30upx 0upx #F6F6F6; |
|
|
|
border-radius: 30upx; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.product-info-content { |
|
|
|
margin-top: 270upx; |
|
|
|
|
|
|
|
.product-name-row{ |
|
|
|
width: 100%; |
|
|
|
height: 33upx; |
|
|
|
line-height: 33upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.product-name{ |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
font-size: 28upx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #252744; |
|
|
|
|
|
|
|
display: block; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow:ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
line-height: 28upx; |
|
|
|
margin-left: 30upx; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.product-star{ |
|
|
|
width: 33upx; |
|
|
|
height: 33upx; |
|
|
|
} |
|
|
|
|
|
|
|
.product-star-text{ |
|
|
|
width: auto; |
|
|
|
height: 28upx; |
|
|
|
line-height: 28upx; |
|
|
|
font-size: 20rpx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #A5A5AD; |
|
|
|
margin-right: 30upx; |
|
|
|
margin-left: 5upx; |
|
|
|
} |
|
|
|
.header { |
|
|
|
.top-box { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding-left: 30upx; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.logo { |
|
|
|
// width: 280upx; |
|
|
|
height: 70upx; |
|
|
|
margin-top: 0upx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
height: 66upx; |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
border-radius: 33upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
margin-right: 30upx; |
|
|
|
|
|
|
|
.search-icon { |
|
|
|
width: 60upx; |
|
|
|
height: 60upx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tabs-nav-warp { |
|
|
|
margin-top: 20upx; |
|
|
|
padding: 0 30upx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.tabs-nav { |
|
|
|
.ul { |
|
|
|
display: flex; |
|
|
|
flex-wrap: nowrap; |
|
|
|
justify-content: space-between; |
|
|
|
padding-left: 20upx; |
|
|
|
padding-right: 20upx; |
|
|
|
|
|
|
|
.li { |
|
|
|
flex: 1 0 auto; |
|
|
|
margin-left: 5upx; |
|
|
|
margin-right: 5upx; |
|
|
|
font-size: 30upx; |
|
|
|
color: #252744; |
|
|
|
position: relative; |
|
|
|
padding-bottom: 15upx; |
|
|
|
padding-left: 27upx; |
|
|
|
padding-right: 27upx; |
|
|
|
padding-top: 15upx; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
&.on { |
|
|
|
// &:after{ |
|
|
|
// content: ''; |
|
|
|
// width: 100%; |
|
|
|
// height: 4upx; |
|
|
|
// background: #252744; |
|
|
|
// position: absolute; |
|
|
|
// left: 0; |
|
|
|
// bottom: 0; |
|
|
|
// } |
|
|
|
background: #252744; |
|
|
|
box-shadow: 0upx 7upx 14upx 0upx #C5C8ED; |
|
|
|
border-radius: 40upx; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.hom-pro-list { |
|
|
|
::v-deep .swiper-wrapper { |
|
|
|
position: static; |
|
|
|
} |
|
|
|
|
|
|
|
/**横向滑动**/ |
|
|
|
.product-swiper { |
|
|
|
height: auto; |
|
|
|
overflow: hidden; |
|
|
|
margin: 5upx 34upx; |
|
|
|
|
|
|
|
&+.btn-more { |
|
|
|
margin-top: 20upx; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
padding: 22upx 0upx 0 0; |
|
|
|
|
|
|
|
label { |
|
|
|
background-image: none; |
|
|
|
color: #A56C4C; |
|
|
|
font-style: italic; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-box { |
|
|
|
margin-top: 18upx; |
|
|
|
margin-bottom: 18upx; |
|
|
|
margin-left: 18upx; |
|
|
|
margin-right: 18upx; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
overflow-x: auto; |
|
|
|
} |
|
|
|
|
|
|
|
&-warp { |
|
|
|
height: 540upx; |
|
|
|
width: 386upx !important; |
|
|
|
margin-left: 18upx; |
|
|
|
margin-right: 18upx; |
|
|
|
} |
|
|
|
.product-sku-row{ |
|
|
|
width: 100%; |
|
|
|
height: 28upx; |
|
|
|
line-height: 28upx; |
|
|
|
margin-top: 15upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
.product-sku-name{ |
|
|
|
font-size: 24rpx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #90919C; |
|
|
|
margin-left: 30upx; |
|
|
|
} |
|
|
|
|
|
|
|
&-item { |
|
|
|
height: 540upx; |
|
|
|
width: 386upx !important; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.product-price-row{ |
|
|
|
width: 100%; |
|
|
|
height: 76upx; |
|
|
|
line-height: 76upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-top: 20upx; |
|
|
|
|
|
|
|
.price-warp{ |
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
line-height: 28upx; |
|
|
|
margin-left: 30upx; |
|
|
|
justify-content: flex-start; |
|
|
|
width: auto; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
|
|
|
|
.iconImg { |
|
|
|
width: 58rpx; |
|
|
|
height: 36rpx; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
.price{ |
|
|
|
font-size: 28rpx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #252744; |
|
|
|
margin-right: 10upx; |
|
|
|
} |
|
|
|
.original-price{ |
|
|
|
font-size: 16upx; |
|
|
|
color: #ccc; |
|
|
|
text-decoration: line-through; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&-img { |
|
|
|
width: 286upx; |
|
|
|
height: 306upx; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
background: #F6F6F8; |
|
|
|
border: 2upx solid #FFFFFF; |
|
|
|
border-radius: 30upx; |
|
|
|
position: relative; |
|
|
|
padding: 20upx; |
|
|
|
z-index: 2; |
|
|
|
|
|
|
|
.img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
.product-add{ |
|
|
|
width: 76upx; |
|
|
|
height: 76upx; |
|
|
|
margin-right: 30upx; |
|
|
|
} |
|
|
|
|
|
|
|
&-info { |
|
|
|
width: 386upx; |
|
|
|
height: 430upx; |
|
|
|
position: absolute; |
|
|
|
top: 110upx; |
|
|
|
background: #FDFDFD; |
|
|
|
box-shadow: 0upx 15upx 30upx 0upx #F6F6F6; |
|
|
|
border-radius: 30upx; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.product-info-content { |
|
|
|
margin-top: 270upx; |
|
|
|
|
|
|
|
.product-name-row { |
|
|
|
width: 100%; |
|
|
|
height: 33upx; |
|
|
|
line-height: 33upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.product-name { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
font-size: 28upx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #252744; |
|
|
|
display: block; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
line-height: 28upx; |
|
|
|
margin-left: 30upx; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.product-star { |
|
|
|
width: 33upx; |
|
|
|
height: 33upx; |
|
|
|
} |
|
|
|
|
|
|
|
.product-star-text { |
|
|
|
width: auto; |
|
|
|
height: 28upx; |
|
|
|
line-height: 28upx; |
|
|
|
font-size: 20upx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #A5A5AD; |
|
|
|
margin-right: 30upx; |
|
|
|
margin-left: 5upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-sku-row { |
|
|
|
width: 100%; |
|
|
|
height: 28upx; |
|
|
|
line-height: 28upx; |
|
|
|
margin-top: 15upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.product-sku-name { |
|
|
|
font-size: 24upx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #90919C; |
|
|
|
margin-left: 30upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-price-row { |
|
|
|
width: 100%; |
|
|
|
height: 76upx; |
|
|
|
line-height: 76upx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-top: 20upx; |
|
|
|
|
|
|
|
.price-warp { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
line-height: 28upx; |
|
|
|
margin-left: 30upx; |
|
|
|
justify-content: flex-start; |
|
|
|
width: auto; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
|
|
|
|
.iconImg { |
|
|
|
width: 58rpx; |
|
|
|
height: 36rpx; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: 28rpx; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #252744; |
|
|
|
margin-right: 10upx; |
|
|
|
} |
|
|
|
|
|
|
|
.original-price { |
|
|
|
font-size: 16upx; |
|
|
|
color: #ccc; |
|
|
|
text-decoration: line-through; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-add { |
|
|
|
width: 76upx; |
|
|
|
height: 76upx; |
|
|
|
margin-right: 30upx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
} |
|
|
|
</style> |
xh-pan1
7 months ago
