<template>
|
<div class="carousel-container">
|
<!-- 添加 transform 样式绑定 -->
|
<div class="carousel" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
<div class="carousel-item">
|
|
</div>
|
|
|
<div class="carousel-item">
|
<div class="contents">
|
<div class="contetn_center" >
|
<CenterMap class="contetn_center_top" />
|
</div>
|
<div class="contetn_left">
|
<div class="pagetab">
|
</div>
|
|
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="打磨状态">
|
<rightcenter />
|
</ItemWrap>
|
|
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="测量状态">
|
|
</ItemWrap>
|
</div>
|
</div>
|
|
</div>
|
|
|
<div class="carousel-item">
|
<div class="contents2">
|
<div class="contetn_left">
|
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="库位信息">
|
<stationone />
|
</ItemWrap>
|
<div class="station-container">
|
<ItemWrap class="contetn_left-bottom contetn_lr-item2" title="库存信息">
|
<stationtwo />
|
</ItemWrap>
|
<ItemWrap class="contetn_left-bottom contetn_lr-item2" title="库存信息">
|
<stationthree />
|
</ItemWrap>
|
<ItemWrap class="contetn_left-bottom contetn_lr-item2" title="库存信息">
|
<stationfour />
|
</ItemWrap>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<button class="carousel-button prev" @click="prev">←</button>
|
<button class="carousel-button next" @click="next">→</button>
|
</div>
|
</template>
|
|
<script>
|
import CenterMap from "./center-map.vue";
|
import stationone from './station-one.vue'
|
import stationtwo from './station-two.vue'
|
import stationthree from './station-three.vue'
|
import stationfour from './station-four.vue'
|
import rightcenter from './right-center.vue'
|
export default {
|
components: {
|
CenterMap,
|
stationone,
|
stationtwo,
|
stationthree,
|
stationfour,
|
rightcenter
|
},
|
data() {
|
return {
|
currentIndex: 0,
|
interval: null
|
}
|
},
|
methods: {
|
next() {
|
this.currentIndex = (this.currentIndex + 1) % 3;
|
},
|
prev() {
|
this.currentIndex = (this.currentIndex - 1 + 3) % 3;
|
},
|
startAutoPlay() {
|
this.interval = setInterval(() => {
|
this.next();
|
}, 300000);
|
},
|
stopAutoPlay() {
|
clearInterval(this.interval);
|
}
|
},
|
mounted() {
|
this.startAutoPlay();
|
},
|
beforeDestroy() {
|
this.stopAutoPlay();
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.carousel-container {
|
position: relative;
|
width: 100%;
|
margin: 0 auto;
|
overflow: hidden;
|
}
|
|
.carousel {
|
display: flex;
|
transition: transform 0.5s ease;
|
}
|
|
.carousel-item {
|
min-width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
}
|
|
.carousel-button {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
background: rgba(0, 0, 0, 0.5);
|
color: white;
|
border: none;
|
padding: 10px 15px;
|
cursor: pointer;
|
z-index: 10;
|
}
|
|
.carousel-button.prev {
|
left: 10px;
|
}
|
|
.carousel-button.next {
|
right: 10px;
|
}
|
|
|
|
|
// 内容
|
.contents {
|
|
.contetn_left,
|
.contetn_right {
|
width: 475px;
|
box-sizing: border-box;
|
// padding: 16px 0;
|
}
|
|
.contetn_center {
|
width: 1400px;
|
}
|
|
//左右两侧 三个块
|
.contetn_lr-item {
|
height: 450px;
|
}
|
|
.contetn_lr-item2 {
|
height: 620px;
|
width: 30%;
|
}
|
|
.contetn_center_top {
|
width: 100%;
|
}
|
|
// 中间
|
.contetn_center {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
|
.contetn_center-bottom {
|
height: 315px;
|
}
|
|
//左边 右边 结构一样
|
.contetn_left,
|
.contetn_right {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
position: relative;
|
|
|
}
|
}
|
|
// 第一块内容
|
.contents2 {
|
width: 100%;
|
|
.contetn_left {
|
width: 100%;
|
box-sizing: border-box;
|
// padding: 16px 0;
|
}
|
|
//左右两侧 三个块
|
.contetn_lr-item {
|
height: 210px;
|
}
|
|
.contetn_lr-item2 {
|
height: 700px;
|
}
|
|
.contetn_center_top {
|
width: 100%;
|
}
|
|
}
|
|
|
.station-container {
|
display: flex; /* 使用 Flex 布局 */
|
justify-content: space-between; /* 均匀分布子元素 */
|
gap: 16px; /* 设置子元素之间的间距 */
|
width: 100%; /* 确保容器宽度填满父元素 */
|
}
|
|
|
|
|
|
|
</style>
|
