|
|
|
@ -1,20 +1,203 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="clothDetails"> |
|
|
|
<div class="clothDetails"> |
|
|
|
<Header fontColor="#000"></Header> |
|
|
|
<Header fontColor="#000"></Header> |
|
|
|
<div class="detailDiv"> |
|
|
|
<div class="jz menu d-flex"> |
|
|
|
详情页衣服id{{ this.$route.query.id }} 详情页衣服title{{ |
|
|
|
<el-breadcrumb separator="/"> |
|
|
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">服装类型</el-breadcrumb-item> |
|
|
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">男装</el-breadcrumb-item> |
|
|
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">裤子</el-breadcrumb-item> |
|
|
|
|
|
|
|
<el-breadcrumb-item>{{ |
|
|
|
this.$route.query.title |
|
|
|
this.$route.query.title |
|
|
|
}} |
|
|
|
}}</el-breadcrumb-item> |
|
|
|
|
|
|
|
</el-breadcrumb> |
|
|
|
|
|
|
|
<div class="collect d-flex"> |
|
|
|
|
|
|
|
<span v-if="collectFlag" class="iconfont icon-weishoucang"></span> |
|
|
|
|
|
|
|
<span v-else class="iconfont icon-yishoucang"></span> |
|
|
|
|
|
|
|
<span>点击收藏（{{popularity}}人气）</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="detailDiv jz d-flex"> |
|
|
|
|
|
|
|
<!-- 详情页衣服id{{ this.$route.query.id }} 详情页衣服title{{--> |
|
|
|
|
|
|
|
<!-- this.$route.query.title--> |
|
|
|
|
|
|
|
<!-- }} --> |
|
|
|
|
|
|
|
<div class="l"> |
|
|
|
|
|
|
|
<a-carousel arrows dots-class="slick-dots slick-thumb"> |
|
|
|
|
|
|
|
<a slot="customPaging" slot-scope="props"> |
|
|
|
|
|
|
|
<img src="../assets/details02.png" /> |
|
|
|
|
|
|
|
</a> |
|
|
|
|
|
|
|
<div v-for="(item,index) in baseUrl" :key="index"> |
|
|
|
|
|
|
|
<img :src="item" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</a-carousel> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="r"> |
|
|
|
|
|
|
|
<div class="title f_20">{{title}}</div> |
|
|
|
|
|
|
|
<p class="sales f_12">销量：{{sales}}件</p> |
|
|
|
|
|
|
|
<p class="price f_14 c_333">价格：<span class="f_20">¥{{price}}</span></p> |
|
|
|
|
|
|
|
<p class="favour f_14 c_333">优惠：<span class="f_12">{{favour}}</span></p> |
|
|
|
|
|
|
|
<p class="sell f_14 c_333 d-flex">促销：<span class="f_14">{{sell}}</span><span class="button">详情>>></span></p> |
|
|
|
|
|
|
|
<div class="line"></div> |
|
|
|
|
|
|
|
<div class="color f_14">颜色:{{color}} </div> |
|
|
|
|
|
|
|
<a-radio-group v-model="radioValue" @change="onChange"> |
|
|
|
|
|
|
|
<a-radio :value="1"> |
|
|
|
|
|
|
|
黑 |
|
|
|
|
|
|
|
</a-radio> |
|
|
|
|
|
|
|
<a-radio :value="2"> |
|
|
|
|
|
|
|
灰 |
|
|
|
|
|
|
|
</a-radio> |
|
|
|
|
|
|
|
<a-radio :value="3"> |
|
|
|
|
|
|
|
橙 |
|
|
|
|
|
|
|
</a-radio> |
|
|
|
|
|
|
|
</a-radio-group> |
|
|
|
|
|
|
|
<div class="size f_14">尺码:<a>尺码参照表</a> | <i class="iconfont icon-ic_jia"></i> <span class="c_333 f_14">找到您的尺寸</span></div> |
|
|
|
|
|
|
|
<div class="sizeDiv d-flex"> |
|
|
|
|
|
|
|
<span class="item f_16" v-for="(item,index) in sizeList" :key="index">{{item.size}}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="line"></div> |
|
|
|
|
|
|
|
<div class="serve f_16 c_1B">免费配送与退货服务<span class="button">更多详情</span></div> |
|
|
|
|
|
|
|
<div class="line"></div> |
|
|
|
|
|
|
|
<div class="stages f_16 c_1B">使用花呗分期，最低每月¥1182.50。<span class="button c_1B">详细说明</span></div> |
|
|
|
|
|
|
|
<div class="d-flex btnDiv"> |
|
|
|
|
|
|
|
<div class="dialogButton primary f_14">加入购物袋</div> |
|
|
|
|
|
|
|
<div type="primary" class="dialogButton default f_14">立即购买</div></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="selected jz"> |
|
|
|
|
|
|
|
<div class="title f_16 c_333">已选</div> |
|
|
|
|
|
|
|
<div class="selectedCloth d-flex"> |
|
|
|
|
|
|
|
<div class="item" v-for="(item,index) in selectedClothList" :key="index"> |
|
|
|
|
|
|
|
<img :src="item.url"> |
|
|
|
|
|
|
|
<p class="c_333">{{item.text}}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="detail jz"> |
|
|
|
|
|
|
|
<div class="title d-flex"> |
|
|
|
|
|
|
|
<span class="c_fff">商品介绍</span> |
|
|
|
|
|
|
|
<span class="c_fff">加入购物车</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<table> |
|
|
|
|
|
|
|
<tr> |
|
|
|
|
|
|
|
<td class="textfield">商品名称：{{clothDetail.name}}</td> |
|
|
|
|
|
|
|
<td>商品编号：{{clothDetail.num}}</td> |
|
|
|
|
|
|
|
<td>风格：{{clothDetail.style}}</td> |
|
|
|
|
|
|
|
<td>商品毛重：{{clothDetail.weight}}</td> |
|
|
|
|
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
|
|
|
|
<td>货号：{{clothDetail.itemNo}}</td> |
|
|
|
|
|
|
|
<td>领型：{{clothDetail.collar}}</td> |
|
|
|
|
|
|
|
<td>材质：{{clothDetail.material}}</td> |
|
|
|
|
|
|
|
<td>适用场景：{{clothDetail.scene}}</td> |
|
|
|
|
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
|
|
|
|
<td>版型：{{clothDetail.type}}</td> |
|
|
|
|
|
|
|
<td>衣门襟：{{clothDetail.placket}}</td> |
|
|
|
|
|
|
|
<td>开衩设计：{{clothDetail.slit}}</td> |
|
|
|
|
|
|
|
<td>适用人群：{{clothDetail.people}}</td> |
|
|
|
|
|
|
|
</tr> |
|
|
|
|
|
|
|
</table> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<Footer></Footer> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import Header from "../components/Header/HeaderView"; |
|
|
|
import Header from "../components/Header/HeaderView"; |
|
|
|
|
|
|
|
import Footer from "../components/Footer/FooterView" |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "clothDetail", |
|
|
|
name: "clothDetail", |
|
|
|
components: { Header }, |
|
|
|
components: { Header,Footer }, |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
return { |
|
|
|
|
|
|
|
radioValue: 1, |
|
|
|
|
|
|
|
collectFlag:false,//是否收藏 |
|
|
|
|
|
|
|
popularity:0,//人气 |
|
|
|
|
|
|
|
title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题 |
|
|
|
|
|
|
|
sales:2342,//销量 |
|
|
|
|
|
|
|
price:13200.00,//价格 |
|
|
|
|
|
|
|
favour:'满1100减300',//优惠 |
|
|
|
|
|
|
|
sell:'每满300元，可减40元现金，每满600元，可减80元现金，最多可减40000元 | 距结束还剩',//促销 |
|
|
|
|
|
|
|
color:'黑色',//颜色 |
|
|
|
|
|
|
|
sizeList:[ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:1, |
|
|
|
|
|
|
|
size:"XXS" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:2, |
|
|
|
|
|
|
|
size:"XS" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:3, |
|
|
|
|
|
|
|
size:"S" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:4, |
|
|
|
|
|
|
|
size:"M" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:5, |
|
|
|
|
|
|
|
size:"L" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:6, |
|
|
|
|
|
|
|
size:"XL" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:7, |
|
|
|
|
|
|
|
size:"XXL" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
selectedClothList:[ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:1, |
|
|
|
|
|
|
|
text:'明门襟', |
|
|
|
|
|
|
|
url:require("../assets/selected04.png") |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:2, |
|
|
|
|
|
|
|
text:'大八字领', |
|
|
|
|
|
|
|
url:require("../assets/selected02.png") |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:3, |
|
|
|
|
|
|
|
text:'无口袋', |
|
|
|
|
|
|
|
url:require("../assets/selected05.png") |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:4, |
|
|
|
|
|
|
|
text:'边褶不收省', |
|
|
|
|
|
|
|
url:require("../assets/selected03.png") |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id:5, |
|
|
|
|
|
|
|
text:'礼服圆角', |
|
|
|
|
|
|
|
url:require("../assets/selected01.png") |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
],//已选的图片信息 |
|
|
|
|
|
|
|
clothDetail:{ |
|
|
|
|
|
|
|
name:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制', |
|
|
|
|
|
|
|
num:10053909681884, |
|
|
|
|
|
|
|
style:'通勤风', |
|
|
|
|
|
|
|
weight:'1.0Kg', |
|
|
|
|
|
|
|
itemNo:'3680婚庆西服', |
|
|
|
|
|
|
|
collar:'青果领', |
|
|
|
|
|
|
|
material:'羊毛100%', |
|
|
|
|
|
|
|
scene:'婚礼，宴会', |
|
|
|
|
|
|
|
type:'标准型', |
|
|
|
|
|
|
|
placket:'单排扣', |
|
|
|
|
|
|
|
slit:'后中开衩', |
|
|
|
|
|
|
|
people:'青年' |
|
|
|
|
|
|
|
},//商品信息 |
|
|
|
|
|
|
|
baseUrl:[require("../assets/details01.png"),require("../assets/details02.png"),require("../assets/details03.png"),require("../assets/details04.png"),] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
onChange(e) { |
|
|
|
|
|
|
|
console.log('radio checked', e.target.value); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
@ -24,9 +207,224 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
<style lang="less" scoped> |
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
@import '../assets/common.css'; |
|
|
|
.clothDetails { |
|
|
|
.clothDetails { |
|
|
|
.detailDiv { |
|
|
|
.menu{ |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
padding-top: 100px; |
|
|
|
padding-top: 100px; |
|
|
|
|
|
|
|
.collect{ |
|
|
|
|
|
|
|
&:hover .iconfont{ |
|
|
|
|
|
|
|
color: red; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
span{ |
|
|
|
|
|
|
|
margin-right: 5px; |
|
|
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.detailDiv { |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
min-width: 1200px; |
|
|
|
|
|
|
|
.l{ |
|
|
|
|
|
|
|
width: 610px; |
|
|
|
|
|
|
|
.cloth{ |
|
|
|
|
|
|
|
width: 610px; |
|
|
|
|
|
|
|
height: 641px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.r{ |
|
|
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
|
|
.title{ |
|
|
|
|
|
|
|
color: #1B1B1B; |
|
|
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.sales{ |
|
|
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
|
|
color: rgba(51,51,51,0.5); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.favour{ |
|
|
|
|
|
|
|
color: #746957; |
|
|
|
|
|
|
|
span{ |
|
|
|
|
|
|
|
border: 1px solid #746957; |
|
|
|
|
|
|
|
padding: 2px 5px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.sell{ |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.f_14{ |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
|
|
width: 50%; |
|
|
|
|
|
|
|
overflow: hidden;text-overflow: ellipsis;white-space: nowrap; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.line{ |
|
|
|
|
|
|
|
height: 0px; |
|
|
|
|
|
|
|
border-bottom: 1px solid #ccc; |
|
|
|
|
|
|
|
margin: 20px 0 20px 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.color{ |
|
|
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
|
|
color: #1B1B1B; |
|
|
|
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
& /deep/ .ant-radio-wrapper{ |
|
|
|
|
|
|
|
margin-right: 25px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.size{ |
|
|
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
a{ |
|
|
|
|
|
|
|
margin-left: 20px; |
|
|
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
|
|
color: #333333; |
|
|
|
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
i{ |
|
|
|
|
|
|
|
margin-left: 20px; |
|
|
|
|
|
|
|
margin-right: 6px; |
|
|
|
|
|
|
|
color: #1B1B1B; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.sizeDiv{ |
|
|
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
.item{ |
|
|
|
|
|
|
|
margin-right: 30px; |
|
|
|
|
|
|
|
color: #1B1B1B ; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.serve{ |
|
|
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
|
|
.button{ |
|
|
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.stages{ |
|
|
|
|
|
|
|
color: #B79674; |
|
|
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
|
|
.button{ |
|
|
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.btnDiv{ |
|
|
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
.dialogButton { |
|
|
|
|
|
|
|
width: 35%; |
|
|
|
|
|
|
|
min-width: 300px; |
|
|
|
|
|
|
|
height: 44px; |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
line-height: 44px; |
|
|
|
|
|
|
|
transition: all 0.2s; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.default { |
|
|
|
|
|
|
|
border: 1px solid #1b1b1b; |
|
|
|
|
|
|
|
color: #1b1b1b; |
|
|
|
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
|
|
|
border-color: #fff; |
|
|
|
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
background-color: #1b1b1b; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.primary { |
|
|
|
|
|
|
|
background: #1b1b1b; |
|
|
|
|
|
|
|
border: 2px solid #1b1b1b; |
|
|
|
|
|
|
|
color: #e5dfd9; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
|
|
|
// border-color: #1b1b1b; |
|
|
|
|
|
|
|
// color: #1b1b1b; |
|
|
|
|
|
|
|
// background-color: #fff; |
|
|
|
|
|
|
|
opacity: 0.8; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.selected{ |
|
|
|
|
|
|
|
.title{ |
|
|
|
|
|
|
|
border-left: 5px solid #746957; |
|
|
|
|
|
|
|
height: 40px; |
|
|
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
|
|
padding-left: 25px; |
|
|
|
|
|
|
|
margin-bottom: 50px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.selectedCloth{ |
|
|
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.item{ |
|
|
|
|
|
|
|
margin-right: 55px; |
|
|
|
|
|
|
|
width: 180px; |
|
|
|
|
|
|
|
height: 250px; |
|
|
|
|
|
|
|
img{ |
|
|
|
|
|
|
|
width: 180px; |
|
|
|
|
|
|
|
height: 180px; |
|
|
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
p{ |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.detail{ |
|
|
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
.title{ |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
background-color: #F7F7F7; |
|
|
|
|
|
|
|
border: 1px solid #EEEEEE; |
|
|
|
|
|
|
|
margin-bottom: 25px; |
|
|
|
|
|
|
|
span{ |
|
|
|
|
|
|
|
width: 146px; |
|
|
|
|
|
|
|
height: 38px; |
|
|
|
|
|
|
|
line-height: 38px; |
|
|
|
|
|
|
|
background-color: #746957; |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
table{ |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
td{ |
|
|
|
|
|
|
|
max-width: 500px; |
|
|
|
|
|
|
|
min-width: 300px; |
|
|
|
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
padding-right: 50px; |
|
|
|
|
|
|
|
padding-bottom: 10px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
|
|
/* For demo */ |
|
|
|
|
|
|
|
.ant-carousel >>> .slick-dots { |
|
|
|
|
|
|
|
height: auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel >>> .slick-slide img { |
|
|
|
|
|
|
|
border: 5px solid #fff; |
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
margin: auto; |
|
|
|
|
|
|
|
max-width: 80%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel >>> .slick-thumb { |
|
|
|
|
|
|
|
bottom: -45px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel >>> .slick-thumb li { |
|
|
|
|
|
|
|
width: 60px; |
|
|
|
|
|
|
|
height: 45px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel >>> .slick-thumb li img { |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
filter: grayscale(100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel >>> .slick-thumb li.slick-active img { |
|
|
|
|
|
|
|
filter: grayscale(0%); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
