添加组件
yesg
2 months ago
parent
f5b47b6164
commit
f3b3c77330
@ -0,0 +1,110 @@
|
|||||||
|
<template>
|
||||||
|
<div style="height: calc(680vw / 19.2);">
|
||||||
|
<div class="swiper mySwiper" >
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide" v-for="(item,k) in data.list" :key="k">
|
||||||
|
<el-image
|
||||||
|
style="width: 100%;height:calc(680vw / 19.2);"
|
||||||
|
:src="item.img"
|
||||||
|
></el-image>
|
||||||
|
<div class="inner">
|
||||||
|
<div class="title" >
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
<div class="value" >
|
||||||
|
{{ item.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import Swiper from 'swiper';
|
||||||
|
import {Autoplay, Navigation} from "swiper/modules";
|
||||||
|
|
||||||
|
Swiper.use([
|
||||||
|
Navigation,
|
||||||
|
Autoplay
|
||||||
|
])
|
||||||
|
let swiper = null
|
||||||
|
export default {
|
||||||
|
name: 'Carousel1',
|
||||||
|
props: ['data'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initSwiper()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initSwiper() {
|
||||||
|
if (swiper) {
|
||||||
|
swiper.destroy(true, true);
|
||||||
|
swiper = null;
|
||||||
|
}
|
||||||
|
swiper = new Swiper(".mySwiper", {
|
||||||
|
slidesPerView: 1.5,
|
||||||
|
spaceBetween: '3.9%',
|
||||||
|
centeredSlides: true,
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "~@/style.less";
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
position: relative;
|
||||||
|
min-height: 200px;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(to right, #41B5EA, #0000);
|
||||||
|
height: 8vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4vw;
|
||||||
|
left: 1vw;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #3372ff;
|
||||||
|
font-size: 2.2vw;
|
||||||
|
letter-spacing: 6.1px;
|
||||||
|
min-width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
position: absolute;
|
||||||
|
top: 4vw;
|
||||||
|
left: 1vw;
|
||||||
|
color: #3372ff;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
letter-spacing: 2.3px;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue