update

src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue

@@ -1021,6 +1021,7 @@ const currentIndex = ref(0);
 let autoTimer = null;
 
 const startAutoPlay = () => {
+	currentIndex.value = 0;
 	stopAutoPlay();
 	if (buttonsData.value.length > 5) {
 		autoTimer = setInterval(() => {

src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue

 <template>
 	<div class="content-wrapper">
-		<div class="header">
-			<div class="header-arrow-left">
+		<div class="header" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
+			<div class="header-arrow-left" @click="prev">
 				<img src="../../assets/left-btn.png" alt="" />
 			</div>
-			<div class="header-arrow-right">
+			<div class="header-arrow-right" @click="next">
 				<img src="../../assets/right-btn.png" alt="" />
 			</div>
+			<div class="cards-mask">
+				<div class="item-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
 					<div
 						class="header-item"
 						:class="{
-					headerItem1: index === 0,
-					headerItem2: index === 1,
-					headerItem3: index === 2,
-					headerItem4: index === 3,
-					headerItem5: index === 4
+							headerItem1: index % 5 === 0,
+							headerItem2: index % 5 === 1,
+							headerItem3: index % 5 === 2,
+							headerItem4: index % 5 === 3,
+							headerItem5: index % 5 === 4
 						}"
 						v-for="(item, index) in headerList"
 						:key="index"
@@ -23,6 +25,8 @@
 						<div class="num">{{ item.num }}</div>
 					</div>
 				</div>
+			</div>
+		</div>
 		<div class="main">
 			<div class="left">
 				<div class="box box1">
@@ -158,7 +162,7 @@
 										<div class="text">{{ item.name }}</div>
 									</div>
 								</div>
-								<div class="left-footer">
+								<div class="left-footer" v-if="box3DataList.length">
 									<el-pagination
 										background
 										layout="prev, pager, next"
@@ -172,13 +176,13 @@
 								</div>
 							</div>
 							<div class="right">
-								<div class="title">{{ box3DetailInfo.name }}</div>
+								<div class="title">{{ box3DetailInfo?.name }}</div>
 								<div class="tag-box">
-									<div class="tag" v-for="(item, index) in box3DetailInfo.elemetList" :key="index">
+									<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
 										{{ item }}
 									</div>
 								</div>
-								<div class="content">{{ box3DetailInfo.describe }}</div>
+								<div class="content">{{ box3DetailInfo?.describe }}</div>
 								<div class="area-box">
 									<div
 										class="area"
@@ -189,14 +193,14 @@
 											area4: item.status === '4',
 											area5: item.status === '5'
 										}"
-										v-for="(item, index) in box3DetailInfo.areaList"
+										v-for="(item, index) in box3DetailInfo?.areaList"
 										:key="index"
 									>
 										{{ item.industryName }}
 									</div>
 								</div>
-								<div class="footer">
-									{{ `${box3DetailInfo.postDate} · ${box3DetailInfo.orgNameList?.toString()} · 行政令` }}
+								<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
+									{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
 								</div>
 							</div>
 						</div>
@@ -212,7 +216,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, computed, inject, watch } from "vue";
+import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
 import setChart from "@/utils/setChart";
 import getWordCloudChart from "./uitls/worldCloudChart";
 import {
@@ -410,7 +414,13 @@ const handleGetBox3DataList = async () => {
 		if (res.code === 200 && res.data) {
 			box3DataList.value = res.data.content;
 			box3Total.value = res.data.totalElements;
+			if (res.data.content.length) {
 				handleGetOrderInfo1(box3DataList.value[box3LeftActiveIndex.value].id);
+			} else {
+				box3DetailInfo.value = {};
+			}
+		} else {
+			box3DetailInfo.value = {};
 		}
 	} catch (error) {}
 };
@@ -446,21 +456,67 @@ const handleBox3Chart = async () => {
 	setChart(box3Chart, "box3Chart");
 };
 
-watch(activeDate, () => {
-	handleGetHeaderList(); // 全要素统计
+const currentIndex = ref(0);
+let autoTimer = null;
+
+const startAutoPlay = () => {
+	currentIndex.value = 0
+	stopAutoPlay();
+	if (headerList.value.length >= 5) {
+		autoTimer = setInterval(() => {
+			next();
+		}, 3000);
+	}
+};
+
+const stopAutoPlay = () => {
+	if (autoTimer) {
+		clearInterval(autoTimer);
+		autoTimer = null;
+	}
+};
+
+const next = () => {
+	let arr = [...headerList.value];
+	if (currentIndex.value < headerList.value.length - 5) {
+		currentIndex.value++;
+	} else {
+		// currentIndex.value = 0;
+		headerList.value = [...headerList.value, ...arr];
+		currentIndex.value++;
+	}
+};
+
+const prev = () => {
+	if (currentIndex.value > 0) {
+		currentIndex.value--;
+	} else {
+		currentIndex.value = Math.max(0, headerList.value.length - 5);
+	}
+};
+
+watch(activeDate, async () => {
+	// currentIndex.value = 0
 	handleGetBox2DataList(); // 美对我要素打压情况
 	handleGetBox3DataList(); // 美自身要素发展情况
 	handleBox2Chart(); // 关键词云-上
 	handleBox3Chart(); // 关键词云-下
+	await handleGetHeaderList(); // 全要素统计
+	startAutoPlay();
 });
 
-onMounted(() => {
-	handleGetHeaderList(); // 全要素统计
+onMounted(async () => {
 	handleGetBox1Data(); // 最新动态
 	handleGetBox2DataList(); // 美对我要素打压情况
 	handleGetBox3DataList(); // 美自身要素发展情况
 	handleBox2Chart(); // 关键词云-上
 	handleBox3Chart(); // 关键词云-下
+	await handleGetHeaderList(); // 全要素统计
+	startAutoPlay();
+});
+
+onUnmounted(() => {
+	stopAutoPlay();
 });
 </script>
 
@@ -502,6 +558,24 @@ onMounted(() => {
 			}
 		}
 
+		.cards-mask {
+			width: 100%;
+			overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
+		}
+
+		.item-box {
+			width: 100%;
+			width: max-content;
+			height: 178px;
+			overflow: hidden;
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			align-items: stretch;
+			gap: 16px;
+			padding: 0;
+			transition: transform 0.5s ease; // 平滑过渡动画
 			.header-item {
 				width: 307px;
 				height: 178px;
@@ -552,6 +626,7 @@ onMounted(() => {
 				background: url("./assets/images/bg5.png");
 			}
 		}
+	}
 	.main {
 		width: 1598px;
 		height: 884px;

src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue

@@ -628,6 +628,7 @@ const currentIndex = ref(0);
 let autoTimer = null;
 
 const startAutoPlay = () => {
+	currentIndex.value = 0;
 	stopAutoPlay();
 	if (cardList.value.length > 5) {
 		autoTimer = setInterval(() => {

src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue

@@ -114,7 +114,7 @@
 									<img
 										:src="ele.image || defaultImg"
 										:class="{ img1: index !== 0 }"
-										@error="e => e.target.src = defaultImg"
+										@error="e => (e.target.src = defaultImg)"
 										alt
 										v-for="(ele, index) in item.countryList"
 									/>
@@ -173,6 +173,7 @@ const activeDate = inject("activeDate", ref("week"));
 let autoTimer = null;
 
 const startAutoPlay = () => {
+	startIndex.value = 0;
 	stopAutoPlay();
 	if (carouselList.value.length > 5) {
 		autoTimer = setInterval(() => {
@@ -306,10 +307,13 @@ const countryNameMap = {
 };
 
 const next = () => {
+	let arr = [...carouselList.value];
 	if (startIndex.value < carouselList.value.length - 5) {
 		startIndex.value++;
 	} else {
-		startIndex.value = 0; // 循环播放
+		// startIndex.value = 0; // 循环播放
+		carouselList.value = [...carouselList.value, ...arr];
+		startIndex.value++;
 	}
 };
 
@@ -339,7 +343,7 @@ const prev = () => {
 // };
 
 //打压遏制手段分布
-const getColorName = (tag) => {
+const getColorName = tag => {
 	const tagColorMap = {
 		航空航天: "blue",
 		生物科技: "blue",

src/views/ZMOverView/components/gameProfile/index.vue

@@ -82,7 +82,7 @@
 			</div>
 		</div>
 		<div class="btn-box">
-			<div v-for="(value, index) in btnList" :key="index" class="btn-item disabled" :style="{
+			<div v-for="(value, index) in btnList" :key="index" class="btn-item" aria-disabled="true" :style="{
 				background: value.background
 			}">
 				<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
@@ -654,4 +654,11 @@ const btnList = ref([
 :deep(.el-table th) {
 	padding: 12px 0;
 }
+
+
+.btn-item[aria-disabled="true"] {
+	opacity: 0.3;
+	cursor: not-allowed;
+	pointer-events: none;
+}
 </style>