You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.6 KiB
91 lines
1.6 KiB
<template>
|
|
<a-carousel arrows dots-class="slick-dots slick-thumb">
|
|
<a slot="customPaging" slot-scope="props">
|
|
<img :src="getImgUrl(props.i)" />
|
|
</a>
|
|
<div v-for="item in num">
|
|
<div class="mask">
|
|
<div class="con">
|
|
<!-- 文字 -->
|
|
</div>
|
|
<img :src="`${baseUrl}/${type}/1-${item}.jpg`" />
|
|
</div>
|
|
</div>
|
|
</a-carousel>
|
|
</template>
|
|
|
|
<script>
|
|
const baseUrl = 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads';
|
|
export default {
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'stkj',
|
|
},
|
|
num: {
|
|
type: Number,
|
|
default: 3,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
baseUrl,
|
|
};
|
|
},
|
|
methods: {
|
|
getImgUrl(i) {
|
|
return `${this.baseUrl}/${this.type}/1-${i+1}.jpg`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* For demo */
|
|
.ant-carousel >>> .slick-dots {
|
|
height: auto;
|
|
}
|
|
.ant-carousel >>> .slick-dots li {
|
|
margin: 0 8px;
|
|
}
|
|
.ant-carousel >>> .slick-slide img {
|
|
position: absolute;
|
|
display: block;
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.ant-carousel >>> .slick-thumb {
|
|
bottom: 20px;
|
|
z-index: 99;
|
|
}
|
|
.ant-carousel >>> .slick-thumb li {
|
|
width: 160px;
|
|
height: 64px;
|
|
}
|
|
.ant-carousel >>> .slick-thumb li img {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: grayscale(100%);
|
|
}
|
|
.ant-carousel >>> .slick-thumb li.slick-active img {
|
|
filter: grayscale(0%);
|
|
}
|
|
|
|
.mask{
|
|
width: 1457px;
|
|
height: 517px;
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.mask .con{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* background: rgba(0,0,0,.5); */
|
|
z-index: 9;
|
|
}
|
|
</style>
|
|
|