热力图

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

@@ -6,7 +6,7 @@
 			<img src="./assets/leftbtn.png" alt class="left-btn" @click="prev" :class="{ disabled: startIndex === 0 }" />
 			<div class="content">
 				<div class="carousel-container" :style="{ transform: `translateX(-${startIndex * (307 + 16)}px)` }">
-					<div class="carousel-item" v-for="item,index in carouselList" :key="index">
+					<div class="carousel-item" v-for="item, index in carouselList" :key="index">
 						<div class="item-top">
 							<div class="top-img">
 								<img :src="ele" :class="{ img1: index !== 0 }" alt v-for="(ele, idx) in item.imageList" :key="idx" />
@@ -16,20 +16,16 @@
 						<div class="item-title">{{ item.name }}</div>
 
 						<div class="type">
-							<div class="type-item" :class="getTagClass(ele.industryName)" v-for="ele, idxx in item.industryList" :key="idxx">
+							<div class="type-item" :class="getTagClass(ele.industryName)" v-for="ele, idxx in item.industryList"
+								:key="idxx">
 								{{ ele.industryName }}
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-			<img
-				src="./assets/rightbtn.png"
-				alt
-				class="right-btn"
-				@click="next"
-				:class="{ disabled: startIndex >= carouselList.length - 5 }"
-			/>
+			<img src="./assets/rightbtn.png" alt class="right-btn" @click="next"
+				:class="{ disabled: startIndex >= carouselList.length - 5 }" />
 		</div>
 
 		<!-- 排华联盟分布 -->
@@ -51,13 +47,8 @@
 						<div class="item" v-for="(item, index) in countList" :key="index">
 							<div class="item-left">
 								<img :src="item.image" alt />
-								<el-tooltip
-									effect="dark"
-									:content="item.zhName"
-									popper-class="common-prompt-popper"
-									placement="top"
-									:show-after="500"
-								>
+								<el-tooltip effect="dark" :content="item.zhName" popper-class="common-prompt-popper" placement="top"
+									:show-after="500">
 									<span>{{ item.zhName }}</span>
 								</el-tooltip>
 							</div>
@@ -99,23 +90,19 @@
 					<span>排华联盟最新动态</span>
 				</div>
 				<div class="news-content">
-					<div class="item" v-for="item,index in newsList" :key="index">
+					<div class="item" v-for="item, index in newsList" :key="index">
 						<div class="item-title">
 							<img :src="item.image || defaultImg" alt />
 							<span @click="handleClick(item)">{{ item.title }}</span>
 						</div>
-						<el-tooltip
-							effect="dark"
-							:content="item.content"
-							popper-class="common-prompt-popper"
-							placement="top"
-							:show-after="500"
-						>
+						<el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper" placement="top"
+							:show-after="500">
 							<div class="item-content">{{ item.content }}</div>
 						</el-tooltip>
 						<div class="item-bottom">
 							<div class="bottom-left">
-								<div class="left-item" :class="getTagClass(ele.industryName)" v-for="ele,idx in item.industryList" :key="idx">
+								<div class="left-item" :class="getTagClass(ele.industryName)" v-for="ele, idx in item.industryList"
+									:key="idx">
 									<span>{{ ele.industryName }}</span>
 								</div>
 							</div>
@@ -134,26 +121,16 @@
 						<div class="item-title">
 							<div class="title-left">
 								<div class="img-list">
-									<img
-										:src="ele.image || defaultImg"
-										:class="{ img1: index !== 0 }"
-										@error="e => (e.target.src = defaultImg)"
-										alt
-										v-for="(ele, index) in item.countryList"
-										:key="index"
-									/>
+									<img :src="ele.image || defaultImg" :class="{ img1: index !== 0 }"
+										@error="e => (e.target.src = defaultImg)" alt v-for="(ele, index) in item.countryList"
+										:key="index" />
 								</div>
 								<div class="left-content">{{ getContent(item.countryList) }}</div>
 							</div>
 							<div class="title-right">{{ item.statementList?.length }}次合作</div>
 						</div>
 						<div class="item-content">
-							<div
-								class="content-list"
-								v-for="(ele, idx) in item.statementList"
-								:key="idx"
-								@click="handleClick(ele)"
-							>
+							<div class="content-list" v-for="(ele, idx) in item.statementList" :key="idx" @click="handleClick(ele)">
 								<div class="list-left" :class="getTagClass(getName(ele.industryList))">
 									<span>{{ getName(ele.industryList) }}</span>
 								</div>
@@ -715,7 +692,7 @@ function createChart() {
 			...item,
 			name: nameMap[item.name] || item.name, // 将英文名转换为中文名以匹配地图区域
 			itemStyle: {
-				color: color
+				// color: color
 			},
 			emphasis: {
 				itemStyle: {
@@ -1297,6 +1274,7 @@ watch(activeDate, async () => {
 		display: flex;
 		align-items: center;
 		position: relative;
+
 		.content {
 			width: 1601px;
 			overflow: hidden;
@@ -1336,6 +1314,7 @@ watch(activeDate, async () => {
 							height: 24px;
 							border-radius: 50%;
 						}
+
 						.img1 {
 							margin-left: -8px;
 						}
@@ -1373,6 +1352,7 @@ watch(activeDate, async () => {
 					overflow-y: hidden;
 					width: calc(100% - 22px);
 					height: 25px;
+
 					.type-item {
 						display: inline-block;
 						border-radius: 4px;
@@ -1387,6 +1367,7 @@ watch(activeDate, async () => {
 				}
 			}
 		}
+
 		.left-btn {
 			width: 24px;
 			height: 48px;
@@ -1400,6 +1381,7 @@ watch(activeDate, async () => {
 				cursor: not-allowed;
 			}
 		}
+
 		.right-btn {
 			width: 24px;
 			height: 48px;
@@ -1422,6 +1404,7 @@ watch(activeDate, async () => {
 		border-radius: 10px;
 		background-color: rgba(255, 255, 255, 0.65);
 		box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
+
 		.anti-title {
 			width: 100%;
 			height: 48px;
@@ -1432,9 +1415,11 @@ watch(activeDate, async () => {
 			justify-content: space-between;
 			box-sizing: border-box;
 			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
+
 			.title-left {
 				display: flex;
 				align-items: center;
+
 				img {
 					width: 17px;
 					height: 17px;
@@ -1492,6 +1477,7 @@ watch(activeDate, async () => {
 				margin-left: 38px;
 				margin-top: 31px;
 				margin-bottom: 55px;
+
 				.count-box {
 					height: 520px;
 					display: flex;
@@ -1516,6 +1502,7 @@ watch(activeDate, async () => {
 					/* 业务系统/模态背景模糊 */
 					backdrop-filter: blur(30px);
 					background: rgba(255, 255, 255, 0.65);
+
 					.item-left {
 						display: flex;
 						align-items: center;
@@ -1525,6 +1512,7 @@ watch(activeDate, async () => {
 							height: 12px;
 							margin-right: 12px;
 						}
+
 						span {
 							display: inline-block;
 							width: 100px;
@@ -1536,9 +1524,12 @@ watch(activeDate, async () => {
 							line-height: 30px;
 							letter-spacing: 0px;
 							text-align: left;
-							white-space: nowrap; /* 防止文本换行 */
-							overflow: hidden; /* 隐藏溢出的内容 */
-							text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
+							white-space: nowrap;
+							/* 防止文本换行 */
+							overflow: hidden;
+							/* 隐藏溢出的内容 */
+							text-overflow: ellipsis;
+							/* 显示省略符号来代表被修剪的文本 */
 						}
 					}
 
@@ -1560,17 +1551,20 @@ watch(activeDate, async () => {
 					display: flex;
 					justify-content: center;
 					gap: 8px;
+
 					.left {
 						width: 24px;
 						height: 24px;
 						border-radius: 4px;
 						overflow: hidden;
 						cursor: pointer;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.center {
 						height: 24px;
 						color: var(--color-main-active);
@@ -1582,12 +1576,14 @@ watch(activeDate, async () => {
 						letter-spacing: 0px;
 						text-align: center;
 					}
+
 					.right {
 						width: 24px;
 						height: 24px;
 						border-radius: 4px;
 						overflow: hidden;
 						cursor: pointer;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -1675,6 +1671,7 @@ watch(activeDate, async () => {
 						display: flex;
 						align-items: center;
 						cursor: pointer;
+
 						img {
 							width: 20px;
 							height: 20px;
@@ -1705,9 +1702,12 @@ watch(activeDate, async () => {
 						line-height: 30px;
 						letter-spacing: 0px;
 						text-align: justify;
-						white-space: nowrap; /* 防止文本换行 */
-						overflow: hidden; /* 隐藏溢出的内容 */
-						text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
+						white-space: nowrap;
+						/* 防止文本换行 */
+						overflow: hidden;
+						/* 隐藏溢出的内容 */
+						text-overflow: ellipsis;
+						/* 显示省略符号来代表被修剪的文本 */
 					}
 
 					.item-bottom {
@@ -1874,9 +1874,11 @@ watch(activeDate, async () => {
 							align-items: center;
 							justify-content: space-around;
 							cursor: pointer;
+
 							&:hover {
 								background: var(--color-bg-hover);
 							}
+
 							.list-left {
 								/* 数据展示/Tag标签/亮色/绿 */
 								min-width: 75px;
@@ -1911,9 +1913,12 @@ watch(activeDate, async () => {
 								line-height: 30px;
 								letter-spacing: 0px;
 								text-align: left;
-								white-space: nowrap; /* 防止文本换行 */
-								overflow: hidden; /* 隐藏溢出的内容 */
-								text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
+								white-space: nowrap;
+								/* 防止文本换行 */
+								overflow: hidden;
+								/* 隐藏溢出的内容 */
+								text-overflow: ellipsis;
+								/* 显示省略符号来代表被修剪的文本 */
 								// margin-left: 13px;
 								// margin-right: 13px;
 							}
@@ -1942,6 +1947,7 @@ watch(activeDate, async () => {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+
 		.area-left {
 			width: 792px;
 			height: 500px;