From 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae Mon Sep 17 00:00:00 2001
From: huanghongfeng <huanghongfeng@hnkhzn.com>
Date: 星期二, 19 八月 2025 16:37:24 +0800
Subject: [PATCH] 更新
---
项目代码/DP/src/views/indexs/index.vue | 266 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 162 insertions(+), 104 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/index.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/index.vue"
index d7c334c..69cf486 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/index.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/index.vue"
@@ -1,109 +1,156 @@
-<!--
- * @Author: daidai
- * @Date: 2022-03-04 09:23:59
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-05-07 11:05:02
- * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
--->
<template>
- <div class="contents">
- <div class="contetn_center">
- <CenterMap class="contetn_center_top" />
-
-
- </div>
- <div class="contetn_left">
- <div class="pagetab">
- <!-- <div class="item">瀹炴椂鐩戞祴</div> -->
+ <div class="carousel-container">
+ <!-- 娣诲姞 transform 鏍峰紡缁戝畾 -->
+ <div class="carousel" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
+ <div class="carousel-item">
</div>
- <!-- <ItemWrap class="contetn_left-top contetn_lr-item" title="鏁呴殰--绉嶇被棰戠巼">
- <LeftCenter />
- </ItemWrap> -->
- <ItemWrap
- class="contetn_left-bottom contetn_lr-item"
- title="搴撲綅淇℃伅"
- >
- <stationone/>
- </ItemWrap>
- <ItemWrap
- class="contetn_left-bottom contetn_lr-item2"
- title="搴撳瓨淇℃伅"
- >
- <stationtwo/>
- </ItemWrap>
+ <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="鎬讳綋鍑哄叆搴撲俊鎭�"
- >
- <stationthree/>
-
- </ItemWrap> -->
+ <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 LeftTop from './left-top.vue'
-import LeftCenter from "./left-center.vue";
-import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
-import CenterBottom from "./center-bottom.vue";
-import RightTop from "./right-top.vue";
-import RightCenter from "./right-center.vue";
-import RightBottom from "./right-bottom.vue";
-import LeftCenterRight from "./left-center-right.vue";
import stationone from './station-one.vue'
import stationtwo from './station-two.vue'
import stationthree from './station-three.vue'
-import passtwo from './pass-two.vue'
-import plan from './plan.vue'
+import stationfour from './station-four.vue'
+import rightcenter from './right-center.vue'
export default {
components: {
- LeftTop,
- LeftCenter,
- LeftCenterRight,
- LeftBottom,
CenterMap,
- RightTop,
- RightCenter,
- RightBottom,
- CenterBottom,
stationone,
stationtwo,
stationthree,
- passtwo,
- plan
+ stationfour,
+ rightcenter
},
data() {
return {
-
- };
+ currentIndex: 0,
+ interval: null
+ }
},
- filters: {
- numsFilter(msg) {
- return msg || 0;
- },
- },
- created() {
- },
-
- mounted() {},
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;
@@ -117,11 +164,12 @@
//宸﹀彸涓や晶 涓変釜鍧�
.contetn_lr-item {
- height: 310px;
+ height: 450px;
}
.contetn_lr-item2 {
height: 620px;
+ width: 30%;
}
.contetn_center_top {
@@ -147,36 +195,46 @@
justify-content: space-around;
position: relative;
-
+
}
}
-.labels {
- flex-shrink: 0;
- font-size: 24px;
- color: rgba(255, 255, 255, 0.6);
- float: left;
- margin-right: 11.5%;
- }
- .labelsd {
- flex-shrink: 0;
- font-size: 24px;
- color: rgba(255, 255, 255, 0.6);
- float: left;
- margin-left: 6%;
- }
-@keyframes rotating {
- 0% {
- -webkit-transform: rotate(0) scale(1);
- transform: rotate(0) scale(1);
- }
- 50% {
- -webkit-transform: rotate(180deg) scale(1.1);
- transform: rotate(180deg) scale(1.1);
- }
- 100% {
- -webkit-transform: rotate(360deg) scale(1);
- transform: rotate(360deg) scale(1);
- }
+// 绗竴鍧楀唴瀹�
+.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%;
+ }
+
}
-</style>
+
+
+.station-container {
+ display: flex; /* 浣跨敤 Flex 甯冨眬 */
+ justify-content: space-between; /* 鍧囧寑鍒嗗竷瀛愬厓绱� */
+ gap: 16px; /* 璁剧疆瀛愬厓绱犱箣闂寸殑闂磋窛 */
+ width: 100%; /* 纭繚瀹瑰櫒瀹藉害濉弧鐖跺厓绱� */
+}
+
+
+
+
+
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3