@ -1,135 +1,65 @@
< template >
< div class = "hom-pro-list" >
< div class = "title" >
< div class = "title" v-if ="false" >
<!-- # ifdef MP - WEIXIN -- >
< img
class = "title-img"
src = "../../../static/images/product/img-title.png"
alt = "商品推荐"
mode = "widthFix"
/ >
< img class = "title-img" src = "../../../static/images/product/img-title.png" alt = "商品推荐" mode = "widthFix" / >
<!-- # endif -- >
<!-- # ifdef H5 || APP - PLUS -- >
< image
class = "title-img"
src = "../../../static/images/product/img-title.png"
alt = "商品推荐"
mode = "widthFix"
/ >
< image class = "title-img" src = "../../../static/images/product/img-title.png" alt = "商品推荐" mode = "widthFix" / >
<!-- # endif -- >
< / div >
< div
v - if = "componentContent.arrangeType == '横向滑动' && productData.length > 2"
class = "product-list"
>
< swiper
ref = "mySwiper"
class = "swiper product-list-box"
: circular = "true"
: indicator - dots = "false"
: autoplay = "true"
: display - multiple - items = "2"
@ change = "swiperChange"
>
< swiper -item
class = "product-list-item-warp"
v - for = "(item,index) in productData"
: key = "index"
>
< div class = "product-list-item" v-if ="JSON.stringify(item)!=='{}'" @click="jumpProductDetail(item)" >
< div v-if ="componentContent.arrangeType == '横向滑动' && productData.length > 2" class="product-list" >
< scroll -view ref = "mySwiper" class = "swiper product-list-box" scroll -x = " true " >
< div class = "swiper-wrap" >
< div class = "product-list-item-warp" v-for ="(item,index) in productData" :key ="index" >
< div class = "product-list-item"
v - if = "JSON.stringify(item)!=='{}' && componentContent.productStyleValue == '1'"
@ click = "jumpProductDetail(item)" >
< div class = "product-list-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"
>
< 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-list-info" >
< label class = "product-name" > { { item . productName } } < / label >
< div class = "flex" >
< div
class = "shop-box"
v - if = "typeId == 1"
@ click . stop = "jumpStore(item)"
>
< div class = "shop-box" v-if ="typeId == 1" @click.stop="jumpStore(item)" >
< label class = "shop-name" > { { item . shopName } } < / label >
< / div >
< label class = "buy-count" > 已售 { { item . number ? item . number : 0 } } 件 < / label >
< / div >
< 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"
>
< 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
class = "iconImg"
v - if = "item.activityType == 2"
src = "../../../static/images/spikeIcon.png"
>
< image
class = "iconImg"
v - if = "item.activityType == 4"
src = "../../../static/images/spikeIcon.png"
>
< image
class = "iconImg"
v - if = "item.activityType == 3"
src = "../../../static/images/discountListIcon.png"
>
< image
class = "iconImg"
v - if = "item.activityType == 5"
src = "../../../static/images/discountListIcon.png"
>
< image
class = "iconImg"
v - if = "item.activityType == 9"
src = "../../../static/images/memberCenterIcon.png"
>
< 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 class = "iconImg" v -if = " item.activityType = = 1 "
src = "../../../static/images/groupBuyIcon.png" >
< image class = "iconImg" v -if = " item.activityType = = 2 "
src = "../../../static/images/spikeIcon.png" >
< image class = "iconImg" v -if = " item.activityType = = 4 "
src = "../../../static/images/spikeIcon.png" >
< image class = "iconImg" v -if = " item.activityType = = 3 "
src = "../../../static/images/discountListIcon.png" >
< image class = "iconImg" v -if = " item.activityType = = 5 "
src = "../../../static/images/discountListIcon.png" >
< image class = "iconImg" v -if = " item.activityType = = 9 "
src = "../../../static/images/memberCenterIcon.png" >
< image class = "iconImg" v -if = " item.activityType = = 8 "
src = "https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" >
<!-- # endif -- >
< div class = "price" >
¥ { { item . price } }
@ -140,11 +70,65 @@
< / div >
< / div >
< / div >
< div class = "product-swiper-item" v-if ="componentContent.productStyleValue == '2'" >
< 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 >
< img class = "product-star" src = "../../../static/images/product/icon_star.png" >
< label class = "product-star-text" > { { item . qaNum || 3.5 } } < / label >
< / div >
< div class = "product-price-row" >
< div class = "price-warp" >
¥ { { item . price } }
< / div >
< img class = "product-add" src = "../../../static/images/product/icon_add.png" >
< / div >
< / div >
< / div >
< / div >
< div class = "item3" v-if ="componentContent.productStyleValue == '3'" >
< div class = "item3_name" > { { item . productName } } < / div >
< div class = "item3_image" >
< img :src ="item.image" fit = "contain" > < / img >
< / div >
< div class = "item3_btn_row" >
< div class = "item3_btn" > 点击 < / div >
< / div >
< / div >
< div class = "item4" v-if ="componentContent.productStyleValue == '4'" >
< div class = "item4_content" >
< div class = "item4_image" >
< img :src ="item.image" fit = "contain" > < / img >
< / div >
< div class = "item4_info" >
< div class = "item4_name" > { { item . productName } } < / div >
< div class = "item4_price" > ¥ { { item . price } } < / div >
< / div >
< div class = "item4_arrow" >
< img src = "../../../static/images/product/icon_right_arrow.png" >
< / div >
< / div >
< div class = "item4_index_image" v-if ="index < 3" >
< img src = "../../../static/images/product/icon_index_1.png" v-if ="index == 0" >
< img src = "../../../static/images/product/icon_index_2.png" v-if ="index == 1" >
< img src = "../../../static/images/product/icon_index_3.png" v-if ="index == 2" >
< / div >
< / div >
<!-- 自定义骨架屏 -- >
< div
class = "product-list-item ske-loading"
v - else
>
< div class = "product-list-item ske-loading" v-if ="JSON.stringify(item)==='{}'" >
< div class = "product-list-img child-loading" >
< / div >
@ -156,50 +140,28 @@
< / div >
< / div >
< / div >
< / s w i p e r - i t e m >
< / swiper >
< view
class = "swiper-dots"
v - if = "productData && productData.length > 2"
>
< text
class = "dot"
: class = "index - swiperCurrent <= 1 && index - swiperCurrent >=0 && 'dot-active'"
v - for = "(dot, index) in productData.length"
: key = "index"
> < / text >
< / view >
< / div >
< div
v - else
class = "product-list"
>
< / div >
< / div >
< / s c r o l l - v i e w >
<!-- < view class = "swiper-dots" v -if = " productData & & productData.length > 2 " >
< text class = "dot" : class = "index - swiperCurrent <= 1 && index - swiperCurrent >=0 && 'dot-active'"
v - for = "(dot, index) in productData.length" : key = "index" > < / text >
< / view > -- >
< / div >
< div v -else class = "product-list" >
< ProductSkeleton style = "" v -if = " isFirst " :loading ="loading" :isFirst ="isFirst" / >
< div class = "product-list-box" v-else >
< div
class = "product-list-item-warp"
v - for = "(item,index) in productData"
: key = "index"
>
< div
@ click = "jumpProductDetail(item)"
class = "product-list-item"
>
< div class = "product-list-item-warp" v-for ="(item,index) in productData" :key ="index" >
< div @click ="jumpProductDetail(item)" v -if = " componentContent.productStyleValue = = ' 1 ' "
class = "product-list-item" >
< div class = "product-list-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"
>
< 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-list-info" >
< label class = "product-name" > { { item . productName } } < / label >
< div class = "flex" >
< div
class = "shop-box"
v - if = "typeId == 1"
@ click . stop = "jumpStore(item)"
>
< div class = "shop-box" v-if ="typeId == 1" @click.stop="jumpStore(item)" >
< label class = "shop-name" > { { item . shopName } } < / label >
< div class = "shop-logo" >
< img :src ="item.shopLogo" >
@ -209,78 +171,36 @@
< / div >
< 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"
/ >
< 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
class = "iconImg"
v - if = "item.activityType == 2"
src = "../../../static/images/spikeIcon.png"
/ >
< image
class = "iconImg"
v - if = "item.activityType == 4"
src = "../../../static/images/spikeIcon.png"
/ >
< image
class = "iconImg"
v - if = "item.activityType == 3"
src = "../../../static/images/discountListIcon.png"
/ >
< image
class = "iconImg"
v - if = "item.activityType == 5"
src = "../../../static/images/discountListIcon.png"
/ >
< image
class = "iconImg"
v - if = "item.activityType == 9"
src = "../../../static/images/memberCenterIcon.png"
/ >
< 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 class = "iconImg" v -if = " item.activityType = = 1 "
src = "../../../static/images/groupBuyIcon.png" / >
< image class = "iconImg" v -if = " item.activityType = = 2 "
src = "../../../static/images/spikeIcon.png" / >
< image class = "iconImg" v -if = " item.activityType = = 4 "
src = "../../../static/images/spikeIcon.png" / >
< image class = "iconImg" v -if = " item.activityType = = 3 "
src = "../../../static/images/discountListIcon.png" / >
< image class = "iconImg" v -if = " item.activityType = = 5 "
src = "../../../static/images/discountListIcon.png" / >
< image class = "iconImg" v -if = " item.activityType = = 9 "
src = "../../../static/images/memberCenterIcon.png" / >
< image class = "iconImg" v -if = " item.activityType = = 8 "
src = "https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" / >
<!-- # endif -- >
< div class = "price" >
¥ { { item . price } }
@ -291,23 +211,84 @@
< / div >
< / div >
< / div >
< div class = "product-swiper-item" @click ="jumpProductDetail(item)"
v - if = "componentContent.productStyleValue == '2'" >
< 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 >
< img class = "product-star" src = "../../../static/images/product/icon_star.png" >
< label class = "product-star-text" > { { item . qaNum || 3.5 } } < / label >
< / div >
< div class = "product-price-row" >
< div class = "price-warp" >
¥ { { item . price } }
< / div >
< img class = "product-add" src = "../../../static/images/product/icon_add.png" >
< / div >
< / div >
< / div >
< / div >
< div class = "item3" @click ="jumpProductDetail(item)"
v - if = "componentContent.productStyleValue == '3'" >
< div class = "item3_name" > { { item . productName } } < / div >
< div class = "item3_image" >
< img :src ="item.image" fit = "contain" > < / img >
< / div >
< div class = "item3_btn_row" >
< div class = "item3_btn" > 点击 < / div >
< / div >
< / div >
< div class = "item4" @click ="jumpProductDetail(item)"
v - if = "componentContent.productStyleValue == '4'" >
< div class = "item4_content" >
< div class = "item4_image" >
< img :src ="item.image" fit = "contain" > < / img >
< / div >
< div class = "item4_info" >
< div class = "item4_name" > { { item . productName } } < / div >
< div class = "item4_price" > ¥ { { item . price } } < / div >
< / div >
< button
v - show = "componentContent.showMore"
class = "btn-more"
@ click = "jumpProList(componentContent.productData)"
> 查看全部 < span class = "icon iconfont icon-arrow-right" > < / span > < / button >
< div class = "item4_arrow" >
< img src = "../../../static/images/product/icon_right_arrow.png" >
< / div >
< / div >
< div class = "item4_index_image" v-if ="index < 3" >
< img src = "../../../static/images/product/icon_index_1.png" v-if ="index == 0" >
< img src = "../../../static/images/product/icon_index_2.png" v-if ="index == 1" >
< img src = "../../../static/images/product/icon_index_3.png" v-if ="index == 2" >
< / div >
< / div >
< / div >
< / div >
< / div >
< button v -show = " componentContent.showMore " class = "btn-more"
@ click = "jumpProList(componentContent.productData)" > 查看全部 < span
class = "icon iconfont icon-arrow-right" > < / span > < / button >
< / div >
< / template >
< script >
import { commonMixin } from '../mixin'
import ProductSkeleton from "@/components/basics/components/ProductSkeleton" ;
export default {
import {
commonMixin
} from '../mixin'
import ProductSkeleton from "@/components/basics/components/ProductSkeleton" ;
export default {
mixins : [ commonMixin ] ,
components : {
components : {
ProductSkeleton
} ,
data ( ) {
@ -320,14 +301,11 @@ export default {
this . swiperCurrent = e . detail . current ;
}
}
}
}
< / script >
< style
lang = "scss"
scoped
>
. hom - pro - list {
< style lang = "scss" scoped >
. hom - pro - list {
padding : 20 rpx 13 rpx ;
. title {
@ -343,31 +321,37 @@ export default {
. product - list {
position : relative ;
& - box {
. product - list - box {
display : flex ;
flex - wrap : wrap ;
flex - direction : row ;
& . swiper {
height : 620 rpx ;
height : 470 upx ;
}
}
. swiper - wrap {
display : flex ;
flex - wrap : nowrap ;
justify - content : space - between ;
padding - left : 20 upx ;
padding - right : 20 upx ;
}
& . product - swiper . product - list - box {
padding - left : 0 ;
}
& - item - warp {
margin : 0 0 20 rpx 0 ;
}
. product - list - item - warp {
margin : 0 0 0 upx 0 ;
& - item {
. product - list - item {
width : 348 rpx ;
padding : 0 7 rpx ;
box - sizing : content - box ;
}
& - img {
. product - list - img {
width : 348 rpx ;
height : 348 rpx ;
background - color : white ;
@ -380,7 +364,7 @@ export default {
}
}
& - info {
. product - list - info {
background - color : # FFFFFF ;
/ / b o x - s h a d o w : 0 p x 0 p x 1 5 p x 0 p x r g b a ( 5 2 , 5 2 , 5 2 , 0 . 1 5 ) ;
border - radius : 0 0 10 rpx 10 rpx ;
@ -468,31 +452,322 @@ export default {
}
}
}
. product - swiper - item {
height : 320 px ;
width : 242 px ! important ;
position : relative ;
margin - left : 10 px ;
margin - right : 10 px ;
. product - swiper - img {
width : 210 px ;
height : 220 px ;
margin - left : auto ;
margin - right : auto ;
background : # F6F6F8 ;
border : 2 px solid # FFFFFF ;
border - radius : 16 px ;
position : relative ;
padding : 20 px ;
z - index : 2 ;
box - sizing : border - box ;
. img {
width : 100 % ;
height : 100 % ;
object - fit : contain ;
}
}
. product - swiper - info {
width : 242 px ;
height : 210 px ;
position : absolute ;
top : 110 px ;
background : # FDFDFD ;
box - shadow : 0 px 16 px 24 px 0 px # F6F6F6 ;
border - radius : 16 px ;
text - align : center ;
. product - info - content {
margin - top : 125 px ;
. product - name - row {
width : 100 % ;
height : 22 px ;
line - height : 22 px ;
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 : 16 px ;
font - family : Source Han Sans CN ;
font - weight : bold ;
color : # 252744 ;
display : block ;
overflow : hidden ;
text - overflow : ellipsis ;
white - space : nowrap ;
line - height : 28 upx ;
margin - left : 24 upx ;
text - align : left ;
}
. product - star {
width : 22 px ;
height : 22 px ;
}
. product - star - text {
width : auto ;
height : 28 upx ;
line - height : 28 upx ;
font - size : 14 px ;
font - family : Source Han Sans CN ;
font - weight : bold ;
color : # A5A5AD ;
margin - right : 20 upx ;
margin - left : 5 upx ;
}
}
. product - sku - row {
width : 100 % ;
height : 28 upx ;
line - height : 28 upx ;
margin - top : 15 upx ;
display : flex ;
flex - direction : row ;
flex - wrap : nowrap ;
align - content : center ;
justify - content : flex - start ;
align - items : center ;
. product - sku - name {
font - size : 24 px ;
font - family : Source Han Sans CN ;
font - weight : 400 ;
color : # 90919 C ;
margin - left : 30 upx ;
}
}
. product - price - row {
width : 100 % ;
height : 50 upx ;
line - height : 50 upx ;
display : flex ;
flex - direction : row ;
flex - wrap : nowrap ;
align - content : center ;
justify - content : space - between ;
align - items : center ;
margin - top : 10 upx ;
. price - warp {
display : flex ;
align - items : center ;
line - height : 28 upx ;
margin - left : 24 upx ;
justify - content : flex - start ;
width : auto ;
flex - direction : row ;
flex - wrap : nowrap ;
font - size : 14 px ;
font - family : Source Han Sans CN ;
font - weight : bold ;
color : # 252744 ;
}
. product - add {
width : 50 px ;
height : 50 px ;
margin - right : 24 px ;
}
}
}
}
}
. item3 {
display : flex ;
flex - direction : column ;
flex - wrap : nowrap ;
align - content : center ;
justify - content : center ;
align - items : center ;
background : # F6F6F8 ;
box - shadow : 0 upx 12 upx 24 upx 0 upx # EDEDED ;
border - radius : 24 upx ;
border : 1 upx solid # FFFFFF ;
width : 280 upx ;
height : 430 upx ;
margin : 10 upx 20 upx ;
. item3_name {
font - family : Source Han Sans CN ;
font - weight : 400 ;
font - size : 24 upx ;
color : # 252744 ;
margin - top : 15 upx ;
}
. item3_image {
margin : 15 upx ;
width : 100 % ;
padding : 10 upx ;
box - sizing : border - box ;
img {
width : 100 % ;
}
}
. item3_btn_row {
margin - bottom : 15 upx ;
. item3_btn {
background : # 252744 ;
border - radius : 16 upx ;
font - family : Microsoft YaHei ;
font - weight : 400 ;
font - size : 18 upx ;
color : # FFFFFF ;
padding - left : 20 upx ;
padding - right : 20 upx ;
padding - top : 8 upx ;
padding - bottom : 8 upx ;
}
}
}
. item4 {
width : 680 upx ;
height : 210 upx ;
margin : 10 upx 20 upx ;
background : # FDFDFD ;
box - shadow : 0 upx 24 upx 60 upx 0 upx # E5E5E5 ;
border - radius : 16 upx ;
position : relative ;
. item4_index_image {
width : 50 upx ;
height : 50 upx ;
position : absolute ;
left : 26 upx ;
z - index : 100 ;
img {
width : 100 % ;
}
}
. item4_content {
width : 100 % ;
height : 100 % ;
position : absolute ;
display : flex ;
flex - direction : row ;
flex - wrap : nowrap ;
align - content : center ;
justify - content : space - between ;
align - items : center ;
. item4_image {
width : 164 upx ;
height : 164 upx ;
background : # F6F6F7 ;
border - radius : 8 upx ;
margin : 24 upx ;
img {
width : 100 % ;
}
}
. item4_info {
height : 100 % ;
padding - top : 46 upx ;
padding - bottom : 46 upx ;
flex : 1 ;
display : flex ;
flex - direction : column ;
flex - wrap : nowrap ;
align - content : center ;
justify - content : space - between ;
align - items : flex - start ;
box - sizing : border - box ;
. item4_name {
font - family : Microsoft YaHei ;
font - weight : bold ;
font - size : 28 upx ;
color : # 252744 ;
}
. item4_price {
font - family : Source Han Sans CN ;
font - weight : 400 ;
font - size : 28 upx ;
color : # 252744 ;
}
}
. item4_arrow {
width : 20 upx ;
height : 20 upx ;
margin : 24 upx ;
img {
width : 100 % ;
height : 100 % ;
}
}
}
}
}
/ / : : v - d e e p . s w i p e r - p a g i n a t i o n - b u l l e t {
/ / d i s p l a y : n o n e ;
/ / }
}
}
/ / : : v - d e e p . u n i - s w i p e r - d o t s {
/ / d i s p l a y : f l e x ;
/ / j u s t i f y - c o n t e n t : c e n t e r ;
/ / p a d d i n g : 1 0 r p x 0 ;
/ / . u n i - s w i p e r - d o t {
/ / w i d t h : 1 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / b a c k g r o u n d : # 3 3 3 3 3 3 ;
/ / o p a c i t y : 0 . 3 ;
/ / b o r d e r - r a d i u s : 5 r p x ;
/ / m a r g i n : 0 5 r p x ;
/ / & - a c t i v e {
/ / w i d t h : 2 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / o p a c i t y : 1 ;
/ / }
/ / }
/ / }
. swiper - dots {
}
/ / : : v - d e e p . u n i - s w i p e r - d o t s {
/ / d i s p l a y : f l e x ;
/ / j u s t i f y - c o n t e n t : c e n t e r ;
/ / p a d d i n g : 1 0 r p x 0 ;
/ / . u n i - s w i p e r - d o t {
/ / w i d t h : 1 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / b a c k g r o u n d : # 3 3 3 3 3 3 ;
/ / o p a c i t y : 0 . 3 ;
/ / b o r d e r - r a d i u s : 5 r p x ;
/ / m a r g i n : 0 5 r p x ;
/ / & - a c t i v e {
/ / w i d t h : 2 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / o p a c i t y : 1 ;
/ / }
/ / }
/ / }
. swiper - dots {
display : flex ;
position : absolute ;
left : 50 % ;
@ -513,28 +788,28 @@ export default {
width : 20 rpx ;
opacity : 1 ;
}
}
/ / . p a g i n a t i o n {
/ / d i s p l a y : f l e x ;
/ / j u s t i f y - c o n t e n t : c e n t e r ;
/ / p a d d i n g : 2 0 r p x 0 ;
/ / : : v - d e e p . s w i p e r - p a g i n a t i o n - b u l l e t {
/ / w i d t h : 1 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / b a c k g r o u n d : # 3 3 3 3 3 3 ;
/ / o p a c i t y : 0 . 3 ;
/ / b o r d e r - r a d i u s : 5 r p x ;
/ / m a r g i n : 0 5 r p x ;
/ / }
/ / : : v - d e e p . s w i p e r - p a g i n a t i o n - b u l l e t - a c t i v e {
/ / w i d t h : 2 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / o p a c i t y : 1 ;
/ / }
/ / }
. btn - more {
}
/ / . p a g i n a t i o n {
/ / d i s p l a y : f l e x ;
/ / j u s t i f y - c o n t e n t : c e n t e r ;
/ / p a d d i n g : 2 0 r p x 0 ;
/ / : : v - d e e p . s w i p e r - p a g i n a t i o n - b u l l e t {
/ / w i d t h : 1 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / b a c k g r o u n d : # 3 3 3 3 3 3 ;
/ / o p a c i t y : 0 . 3 ;
/ / b o r d e r - r a d i u s : 5 r p x ;
/ / m a r g i n : 0 5 r p x ;
/ / }
/ / : : v - d e e p . s w i p e r - p a g i n a t i o n - b u l l e t - a c t i v e {
/ / w i d t h : 2 0 r p x ;
/ / h e i g h t : 1 0 r p x ;
/ / o p a c i t y : 1 ;
/ / }
/ / }
. btn - more {
width : 170 rpx ;
height : 54 rpx ;
line - height : 54 rpx ;
@ -545,6 +820,5 @@ export default {
margin : 20 rpx auto 0 ;
display : flex ;
align - items : center ;
}
}
< / style >
xh-pan1
1 year ago
