|
|
|
@ -1,11 +1,10 @@ |
|
|
|
<template> |
|
|
|
<div class="hom-pro-list"> |
|
|
|
<div class="title"> |
|
|
|
<img src="../../../static/images/product/img-title.png" alt="商品推荐"/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="componentContent.arrangeType == '横向滑动'" class="product-list product-swiper"> |
|
|
|
<swiper ref="mySwiper" class="product-list-box" :options="swiperOption"> |
|
|
|
<swiper-slide class="product-list-item" v-for="(item,index) in productData.slice(0, 10)" :key="index" @click="jumpProductDetail(item)"> |
|
|
|
<swiper-slide class="item" v-for="(item, index) in productData" :key="index" @click="jumpProductDetail(item)"> |
|
|
|
<div class="product-list-item" v-if="componentContent.productStyleValue == '1'"> |
|
|
|
<div class="product-list-img"> |
|
|
|
<img v-show="item.image" class="img" :src="item.image"> |
|
|
|
</div> |
|
|
|
@ -29,13 +28,68 @@ |
|
|
|
</div> |
|
|
|
</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://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> |
|
|
|
<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"><el-image :src="item.image" fit="contain"></el-image></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"><el-image :src="item.image" fit="contain"></el-image></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> |
|
|
|
</swiper-slide> |
|
|
|
</swiper> |
|
|
|
<div class="pagination product-pagination" slot="pagination"></div> |
|
|
|
</div> |
|
|
|
<div v-if="componentContent.arrangeType == '多行多列'" class="product-list"> |
|
|
|
<div class="product-list-box"> |
|
|
|
<div class="product-list-item" v-for="(item,index) in productData" :key="index" @click="jumpProductDetail(item)"> |
|
|
|
<div class="item" v-for="(item, index) in productData" :key="index" @click="jumpProductDetail(item)"> |
|
|
|
<div class="product-list-item" v-if="componentContent.productStyleValue == '1'"> |
|
|
|
<div class="product-list-img"> |
|
|
|
<img v-show="item.image" class="img" :src="item.image"> |
|
|
|
</div> |
|
|
|
@ -60,9 +114,64 @@ |
|
|
|
</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://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> |
|
|
|
<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"><el-image :src="item.image" fit="contain"></el-image></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"><el-image :src="item.image" fit="contain"></el-image></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> |
|
|
|
</div> |
|
|
|
<button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">{{ $t('common.seeall') }} <span class="icon iconfont icon-arrow-right"></span></button> |
|
|
|
</div> |
|
|
|
<button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">{{ |
|
|
|
$t('common.seeall') }} <span class="icon iconfont icon-arrow-right"></span></button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -94,9 +203,11 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
.hom-pro-list { |
|
|
|
padding: 20px 0; |
|
|
|
|
|
|
|
.title { |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
label { |
|
|
|
background: url("../../../static/images/icon-title.png") no-repeat left center; |
|
|
|
font-size: 30px; |
|
|
|
@ -104,45 +215,61 @@ export default { |
|
|
|
padding-left: 48px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/**多行多列**/ |
|
|
|
.product-list { |
|
|
|
position: relative; |
|
|
|
&-box { |
|
|
|
|
|
|
|
.product-list-box { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
flex-direction: row; |
|
|
|
padding-left: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
|
|
|
|
::v-deep .swiper-pagination-bullet { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
&.product-swiper .product-list-box{ |
|
|
|
margin: 0 20px; |
|
|
|
|
|
|
|
.product-swiper .product-list-box { |
|
|
|
margin: 0 ; |
|
|
|
padding-left: 0; |
|
|
|
} |
|
|
|
&-item { |
|
|
|
|
|
|
|
.item { |
|
|
|
width:auto !important; |
|
|
|
margin-right: 0px !important; |
|
|
|
|
|
|
|
.product-list-item { |
|
|
|
margin: 0 14px 20px 0; |
|
|
|
width: 348px; |
|
|
|
} |
|
|
|
&-img { |
|
|
|
|
|
|
|
.product-list-img { |
|
|
|
width: 348px; |
|
|
|
height: 348px; |
|
|
|
background-color: #f5f5f5; |
|
|
|
border-radius: 10px 10px 0 0; |
|
|
|
|
|
|
|
.img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
&-info { |
|
|
|
|
|
|
|
.product-list-info { |
|
|
|
background-color: #FFFFFF; |
|
|
|
//box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15); |
|
|
|
border-radius: 0 0 10px 10px; |
|
|
|
padding: 20px; |
|
|
|
|
|
|
|
label { |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.product-name { |
|
|
|
font-size: 28px; |
|
|
|
color: #333; |
|
|
|
@ -153,6 +280,7 @@ export default { |
|
|
|
margin-bottom: 18px; |
|
|
|
line-height: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-box { |
|
|
|
background-color: #333333; |
|
|
|
border-radius: 0px 20px 20px 0px; |
|
|
|
@ -160,16 +288,19 @@ export default { |
|
|
|
display: inline-block; |
|
|
|
height: 40px; |
|
|
|
margin-right: 10px; |
|
|
|
|
|
|
|
.shop-name { |
|
|
|
font-size: 20px; |
|
|
|
color: #FFEBC4; |
|
|
|
padding: 0 8px 0 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-logo { |
|
|
|
border: 2px solid #707070; |
|
|
|
border-radius: 50%; |
|
|
|
overflow: hidden; |
|
|
|
float: right; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 34px; |
|
|
|
height: 34px; |
|
|
|
@ -177,6 +308,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.buy-count { |
|
|
|
color: #C5AA7B; |
|
|
|
font-size: 20px; |
|
|
|
@ -186,15 +318,18 @@ export default { |
|
|
|
padding: 0 5px; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
.price-warp { |
|
|
|
display: flex; |
|
|
|
align-items: baseline; |
|
|
|
line-height: 56px; |
|
|
|
|
|
|
|
.price { |
|
|
|
color: #C83732; |
|
|
|
font-size: 40px; |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.original-price { |
|
|
|
font-size: 24px; |
|
|
|
color: #ccc; |
|
|
|
@ -202,6 +337,294 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-swiper-item { |
|
|
|
height: 320px; |
|
|
|
width: 242px !important; |
|
|
|
position: relative; |
|
|
|
margin-left: 10px; |
|
|
|
margin-right: 10px; |
|
|
|
|
|
|
|
|
|
|
|
.product-swiper-img { |
|
|
|
width: 210px; |
|
|
|
height: 220px; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
background: #F6F6F8; |
|
|
|
border: 2px solid #FFFFFF; |
|
|
|
border-radius: 16px; |
|
|
|
position: relative; |
|
|
|
padding: 20px; |
|
|
|
z-index: 2; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-swiper-info { |
|
|
|
width: 242px; |
|
|
|
height: 210px; |
|
|
|
position: absolute; |
|
|
|
top: 110px; |
|
|
|
background: #FDFDFD; |
|
|
|
box-shadow: 0px 16px 24px 0px #F6F6F6; |
|
|
|
border-radius: 16px; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.product-info-content { |
|
|
|
margin-top: 125px; |
|
|
|
|
|
|
|
.product-name-row { |
|
|
|
width: 100%; |
|
|
|
height: 22px; |
|
|
|
line-height: 22px; |
|
|
|
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: 16px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #252744; |
|
|
|
display: block; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
line-height: 28px; |
|
|
|
margin-left: 24px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.product-star { |
|
|
|
width: 22px; |
|
|
|
height: 22px; |
|
|
|
} |
|
|
|
|
|
|
|
.product-star-text { |
|
|
|
width: auto; |
|
|
|
height: 28px; |
|
|
|
line-height: 28px; |
|
|
|
font-size: 14px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #A5A5AD; |
|
|
|
margin-right: 20px; |
|
|
|
margin-left: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-sku-row { |
|
|
|
width: 100%; |
|
|
|
height: 28px; |
|
|
|
line-height: 28px; |
|
|
|
margin-top: 15px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.product-sku-name { |
|
|
|
font-size: 24px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #90919C; |
|
|
|
margin-left: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-price-row { |
|
|
|
width: 100%; |
|
|
|
height: 50px; |
|
|
|
line-height: 50px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
.price-warp { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
line-height: 28px; |
|
|
|
margin-left: 24px; |
|
|
|
justify-content: flex-start; |
|
|
|
width: auto; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
font-size: 14px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: bold; |
|
|
|
color: #252744; |
|
|
|
} |
|
|
|
|
|
|
|
.product-add { |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
margin-right: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item3 { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background: #F6F6F8; |
|
|
|
box-shadow: 0px 12px 24px 0px #EDEDED; |
|
|
|
border-radius: 24px; |
|
|
|
border: 1px solid #FFFFFF; |
|
|
|
width: 280px; |
|
|
|
height: 400px; |
|
|
|
margin: 10px 10px; |
|
|
|
|
|
|
|
.item3_name { |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 14px; |
|
|
|
color: #252744; |
|
|
|
margin-top: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.item3_image { |
|
|
|
margin: 15px; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
el-image{ |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item3_btn_row { |
|
|
|
margin-bottom: 15px; |
|
|
|
|
|
|
|
.item3_btn { |
|
|
|
background: #252744; |
|
|
|
border-radius: 16px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 12px; |
|
|
|
color: #FFFFFF; |
|
|
|
padding-left: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
padding-top: 8px; |
|
|
|
padding-bottom: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item4 { |
|
|
|
width: 680px; |
|
|
|
height: 210px; |
|
|
|
margin: 10px 20px; |
|
|
|
background: #FDFDFD; |
|
|
|
box-shadow: 0px 24px 60px 0px #E5E5E5; |
|
|
|
border-radius: 16px; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.item4_index_image { |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
position: absolute; |
|
|
|
left: 26px; |
|
|
|
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: 164px; |
|
|
|
height: 164px; |
|
|
|
background: #F6F6F7; |
|
|
|
border-radius: 8rpx; |
|
|
|
margin: 24px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item4_info { |
|
|
|
height: 100%; |
|
|
|
padding-top: 46px; |
|
|
|
padding-bottom: 46px; |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-content: center; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
.item4_name { |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 20px; |
|
|
|
color: #252744; |
|
|
|
} |
|
|
|
|
|
|
|
.item4_price { |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 20px; |
|
|
|
color: #252744; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item4_arrow { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
margin: 24px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//::v-deep .swiper-pagination-bullet{ |
|
|
|
// display: none; |
|
|
|
//} |
|
|
|
@ -212,6 +635,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
padding: 20px 0; |
|
|
|
|
|
|
|
::v-deep .swiper-pagination-bullet { |
|
|
|
width: 10px; |
|
|
|
height: 10px; |
|
|
|
@ -220,12 +644,14 @@ export default { |
|
|
|
border-radius: 5px; |
|
|
|
margin: 0 5px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .swiper-pagination-bullet-active { |
|
|
|
width: 20px; |
|
|
|
height: 10px; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn-more { |
|
|
|
width: 170px; |
|
|
|
height: 54px; |
|
|
|
@ -236,5 +662,4 @@ export default { |
|
|
|
margin: 20px auto 0; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
xh-pan1
1 year ago
xxxxxxxxxx