137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<template>
|
||
<Card class="max" title="亮点展示">
|
||
<div class="container">
|
||
<div class="top">
|
||
<div
|
||
:class="['top-item', { active: activeIndex == index }]"
|
||
v-for="(item, index) in headerList"
|
||
:key="index"
|
||
@click="handelItemClick(index)"
|
||
>{{ item }}</div>
|
||
</div>
|
||
<div class="swiper">
|
||
<swiper class="swiper1" :options="swiperOption" ref="mySwiper">
|
||
<swiper-slide><p>中国建筑钢筋样板工程</p><img src='../assets/images/command-center/auto3.png' alt="" /></swiper-slide>
|
||
<swiper-slide><p>中国建筑深基坑挖掘沉降观测工程</p><img src="../assets/images/command-center/auto2.png" alt="" /></swiper-slide>
|
||
<swiper-slide><p>中国建筑混凝土强度检测工程</p><img src="../assets/images/command-center/auto1.png" alt="" /></swiper-slide>
|
||
<div class="swiper-pagination" slot="pagination"></div>
|
||
<div class="swiper-button-next" slot="button-next" @click="next"></div>
|
||
<div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
|
||
</swiper>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import Card from '../components/Card'
|
||
import 'swiper/css/swiper.css'
|
||
export default {
|
||
components: { Card },
|
||
data() {
|
||
return {
|
||
// 头部行
|
||
headerList: ['质量', '安全', '技术'],
|
||
// 激活的item
|
||
activeIndex: 0,
|
||
swiperOption:{
|
||
loop: true, // 设置图片循环
|
||
observer: true,
|
||
observeParents: true,
|
||
autoplay: true, //设置可自动播放
|
||
speed: 1000, //自动播放的速度，每隔1秒滑动一次
|
||
pagination: {
|
||
el: ".swiper-pagination",//分页器的类名
|
||
clickable: true, //设置分页小圆点可手动点击,
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
|
||
prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
|
||
hideOnClick: true, //点击slide时显示/隐藏按钮
|
||
},
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/** item单击事件 */
|
||
handelItemClick(index) {
|
||
this.activeIndex = index
|
||
},
|
||
prev () {
|
||
this.$refs.mySwiper.$swiper.slidePrev()
|
||
},
|
||
next () {
|
||
this.$refs.mySwiper.$swiper.slideNext()
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.max{
|
||
position: relative;
|
||
}
|
||
.max::after{
|
||
content: '更多 >';
|
||
color: #66D4D9;
|
||
position: absolute;
|
||
right: 4%;
|
||
top: 5%;
|
||
}
|
||
.container {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-top: 10px;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.top {
|
||
display: flex;
|
||
margin: 5px 0px 20px 15px;
|
||
width: 100%;
|
||
height: 27px;
|
||
|
||
.top-item {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 64px;
|
||
height: 100%;
|
||
margin-right: 5px;
|
||
background-image: url('../assets/images/command-center/block4.png');
|
||
cursor: pointer;
|
||
&.active {
|
||
background-image: url('../assets/images/command-center/block4-active.png');
|
||
}
|
||
}
|
||
}
|
||
.swiper{
|
||
.swiper1{
|
||
height: 80%;
|
||
width: 96%;
|
||
position: relative;
|
||
|
||
p{
|
||
width: 100%;
|
||
height: 25px;
|
||
line-height: 25px;
|
||
position: absolute;
|
||
background-color: rgba(0,0,0,0.55);
|
||
}
|
||
::v-deep .swiper-pagination-bullet-active{
|
||
background: #fff;
|
||
}
|
||
::v-deep .swiper-button-prev:after{
|
||
color:#fff;
|
||
font-size: 5px;
|
||
|
||
}
|
||
::v-deep .swiper-button-next:after{
|
||
color:#fff;
|
||
font-size: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|