update

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

@@ -9,18 +9,13 @@
 			</div>
 			<div class="cards-mask">
 				<div class="item-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
-					<div
-						class="header-item"
-						:class="{
-							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"
-					>
+					<div class="header-item" :class="{
+						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">
 						<div class="name">{{ item.elementName }}</div>
 						<div class="num">{{ item.num }}</div>
 					</div>
@@ -37,12 +32,8 @@
 						<div class="title">{{ "最新动态" }}</div>
 					</div>
 					<div class="box1-main">
-						<div
-							class="box1-item"
-							v-for="(item, index) in box1DataList"
-							:key="index"
-							@click="handleToDecreeDetail(item)"
-						>
+						<div class="box1-item" v-for="(item, index) in box1DataList" :key="index"
+							@click="handleToDecreeDetail(item)">
 							<div class="box1-item-left">{{ index + 1 }}</div>
 							<div class="box1-item-right">
 								<div class="title">{{ item.name }}</div>
@@ -53,18 +44,13 @@
 								<div class="box1-item-right-footer">
 									<div class="time">{{ item.postDate }}</div>
 									<div class="area-box">
-										<div
-											class="area"
-											:class="{
-												area1: vall.status === '1',
-												area2: vall.status === '2',
-												area3: vall.status === '3',
-												area4: vall.status === '4',
-												area5: vall.status === '5'
-											}"
-											v-for="(vall, idxx) in item.areaList"
-											:key="idxx"
-										>
+										<div class="area" :class="{
+											area1: vall.status === '1',
+											area2: vall.status === '2',
+											area3: vall.status === '3',
+											area4: vall.status === '4',
+											area5: vall.status === '5'
+										}" v-for="(vall, idxx) in item.areaList" :key="idxx">
 											{{ vall.industryName }}
 										</div>
 									</div>
@@ -85,57 +71,47 @@
 					<div class="box2-main">
 						<div class="inner-box1">
 							<div class="left">
+
 								<div class="left-main">
-									<div
-										class="left-item"
-										:class="{ leftItemActive: box2LeftActiveIndex === index }"
-										v-for="(item, index) in box2DataList"
-										:key="index"
-										@click="handleClickBox2Item(index)"
-									>
+									<el-empty v-if="box2DataList.length === 0" style="padding-top: 80px" description="暂无数据"
+										:image-size="100" />
+									<div class="left-item" :class="{ leftItemActive: box2LeftActiveIndex === index }"
+										v-for="(item, index) in box2DataList" :key="index" @click="handleClickBox2Item(index)">
 										<div class="id">{{ index + 1 }}</div>
 										<div class="text">{{ item.name }}</div>
 									</div>
 								</div>
-								<div class="left-footer">
-									<el-pagination
-										background
-										layout="prev, pager, next"
-										:total="box2Total"
-										:page-size="box2PageSize"
-										v-model:current-page="box2CurrentPage"
-										@current-change="handleGetBox2DataList"
-										size="small"
-										:pager-count="4"
-									/>
+								<div class="left-footer" v-if="box2DataList.length !== 0">
+									<el-pagination background layout="prev, pager, next" :total="box2Total" :page-size="box2PageSize"
+										v-model:current-page="box2CurrentPage" @current-change="handleGetBox2DataList" size="small"
+										:pager-count="4" />
 								</div>
 							</div>
 							<div class="right" @click="handleToDecreeDetail(box2DetailInfo)">
-								<div class="title">{{ box2DetailInfo.name }}</div>
-								<div class="tag-box">
-									<div class="tag" v-for="(item, index) in box2DetailInfo.elemetList" :key="index">
-										{{ item }}
+								<el-empty v-if="box2DataList.length === 0 || !isShowBox2Info" style="padding-top: 80px"
+									description="暂无数据" :image-size="100" />
+								<div v-else>
+									<div class="title">{{ box2DetailInfo?.name }}</div>
+									<div class="tag-box">
+										<div class="tag" v-for="(item, index) in box2DetailInfo.elemetList" :key="index">
+											{{ item }}
+										</div>
 									</div>
-								</div>
-								<div class="content">{{ box2DetailInfo.describe }}</div>
-								<div class="area-box">
-									<div
-										class="area"
-										:class="{
+									<div class="content">{{ box2DetailInfo?.describe }}</div>
+									<div class="area-box">
+										<div class="area" :class="{
 											area1: item.status === '1',
 											area2: item.status === '2',
 											area3: item.status === '3',
 											area4: item.status === '4',
 											area5: item.status === '5'
-										}"
-										v-for="(item, index) in box2DetailInfo.areaList"
-										:key="index"
-									>
-										{{ item.industryName }}
+										}" v-for="(item, index) in box2DetailInfo.areaList" :key="index">
+											{{ item.industryName }}
+										</div>
+									</div>
+									<div class="footer" v-show="box2DetailInfo?.postDate || box2DetailInfo?.orgNameList">
+										{{ `${box2DetailInfo?.postDate} · ${box2DetailInfo?.orgNameList?.toString()} · 行政令` }}
 									</div>
-								</div>
-								<div class="footer">
-									{{ `${box2DetailInfo?.postDate} · ${box2DetailInfo?.orgNameList?.toString()} · 行政令` }}
 								</div>
 							</div>
 						</div>
@@ -156,78 +132,51 @@
 						<div class="inner-box1">
 							<div class="left">
 								<div class="left-main">
-									<el-empty
-										v-if="box3DataList.length === 0"
-										style="padding-top: 80px"
-										description="暂无数据"
-										:image-size="100"
-									/>
-									<div
-										class="left-item"
-										:class="{ leftItemActive: box3LeftActiveIndex === index }"
-										v-for="(item, index) in box3DataList"
-										:key="index"
-										@click="handleClickBox3Item(index)"
-									>
+									<el-empty v-if="box3DataList.length === 0" style="padding-top: 80px" description="暂无数据"
+										:image-size="100" />
+									<div class="left-item" :class="{ leftItemActive: box3LeftActiveIndex === index }"
+										v-for="(item, index) in box3DataList" :key="index" @click="handleClickBox3Item(index)">
 										<div class="id">{{ index + 1 }}</div>
 										<div class="text">{{ item.name }}</div>
 									</div>
 								</div>
-								<div class="left-footer">
-									<el-pagination
-										background
-										layout="prev, pager, next"
-										:total="box3Total"
-										:page-size="box3PageSize"
-										v-model:current-page="box3CurrentPage"
-										@current-change="handleGetBox3DataList"
-										size="small"
-										:pager-count="4"
-									/>
+								<div class="left-footer" v-if="box3DataList.length">
+									<el-pagination background layout="prev, pager, next" :total="box3Total" :page-size="box3PageSize"
+										v-model:current-page="box3CurrentPage" @current-change="handleGetBox3DataList" size="small"
+										:pager-count="4" />
 								</div>
 							</div>
 							<div class="right" @click="handleToDecreeDetail(box3DetailInfo)">
-								<el-empty
-									v-if="box3DataList.length === 0"
-									style="padding-top: 80px"
-									description="暂无数据"
-									:image-size="100"
-								/>
-								<div class="title">{{ box3DetailInfo?.name }}</div>
-								<div class="tag-box">
-									<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
-										{{ item }}
+								<el-empty v-if="box3DataList.length === 0 || !isShowBox3Info" style="padding-top: 80px"
+									description="暂无数据" :image-size="100" />
+								<div v-else>
+									<div class="title">{{ box3DetailInfo?.name }}</div>
+									<div class="tag-box">
+										<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
+											{{ item }}
+										</div>
 									</div>
-								</div>
-								<div class="content">{{ box3DetailInfo?.describe }}</div>
-								<div class="area-box">
-									<div
-										class="area"
-										:class="{
+									<div class="content">{{ box3DetailInfo?.describe }}</div>
+									<div class="area-box">
+										<div class="area" :class="{
 											area1: item.status === '1',
 											area2: item.status === '2',
 											area3: item.status === '3',
 											area4: item.status === '4',
 											area5: item.status === '5'
-										}"
-										v-for="(item, index) in box3DetailInfo?.areaList"
-										:key="index"
-									>
-										{{ item.industryName }}
+										}" v-for="(item, index) in box3DetailInfo?.areaList" :key="index">
+											{{ item.industryName }}
+										</div>
+									</div>
+									<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
+										{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
 									</div>
-								</div>
-								<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
-									{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
 								</div>
 							</div>
 						</div>
 						<div class="inner-box2">
-							<el-empty
-								v-if="box3ChartData.length === 0"
-								style="padding-top: 80px"
-								description="暂无数据"
-								:image-size="100"
-							/>
+							<el-empty v-if="box3ChartData.length === 0" style="padding-top: 80px" description="暂无数据"
+								:image-size="100" />
 							<div class="chart-header">{{ "关键词云" }}</div>
 							<div class="box3Chart" id="box3Chart"></div>
 						</div>
@@ -255,6 +204,10 @@ import {
 
 const activeDate = inject("activeDate");
 
+const isShowBox2Info = ref(true)
+const isShowBox3Info = ref(true)
+
+
 const getCalculatedDate = type => {
 	const now = new Date();
 	const endDate = new Date();
@@ -303,7 +256,7 @@ const handleGetHeaderList = async () => {
 		if (res.code === 200 && res.data) {
 			headerList.value = res.data;
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 // 最新动态
@@ -330,7 +283,7 @@ const handleGetBox1Data = async () => {
 		if (res.code === 200 && res.data) {
 			box1DataList.value = res.data;
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const box2DataList = ref([]);
@@ -350,8 +303,12 @@ const handleGetOrderInfo = async id => {
 		console.log("根据id获取政令详细信息1", res);
 		if (res.code === 200 && res.data) {
 			box2DetailInfo.value = res.data;
+		} else {
+			isShowBox2Info.value = false
 		}
-	} catch (error) {}
+	} catch (error) {
+		isShowBox2Info.value = false
+	}
 };
 
 const handleGetBox2DataList = async () => {
@@ -369,7 +326,7 @@ const handleGetBox2DataList = async () => {
 			box2Total.value = res.data.totalElements;
 			handleGetOrderInfo(box2DataList.value[box2LeftActiveIndex.value].id);
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const handleClickBox2Item = index => {
@@ -394,7 +351,7 @@ const handleGetBox2ChartData = async () => {
 				};
 			});
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 const handleBox2Chart = async () => {
 	await handleGetBox2ChartData();
@@ -420,8 +377,12 @@ const handleGetOrderInfo1 = async id => {
 		console.log("根据id获取政令详细信息1", res);
 		if (res.code === 200 && res.data) {
 			box3DetailInfo.value = res.data;
+		} else {
+			isShowBox3Info.value = false
 		}
-	} catch (error) {}
+	} catch (error) {
+		isShowBox3Info.value = false
+	}
 };
 
 const handleGetBox3DataList = async () => {
@@ -446,7 +407,7 @@ const handleGetBox3DataList = async () => {
 		} else {
 			box3DetailInfo.value = {};
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const handleClickBox3Item = index => {
@@ -472,7 +433,7 @@ const handleGetBox3ChartData = async () => {
 				};
 			});
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 const handleBox3Chart = async () => {
 	await handleGetBox3ChartData();
@@ -559,6 +520,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .content-wrapper {
 	width: 1600px;
+
 	// height: 2132px;
 	.header {
 		width: 1600px;
@@ -569,6 +531,7 @@ onUnmounted(() => {
 		gap: 16px;
 		margin: 0 auto;
 		position: relative;
+
 		.header-arrow-left {
 			position: absolute;
 			left: -33px;
@@ -576,11 +539,13 @@ onUnmounted(() => {
 			width: 24px;
 			height: 48px;
 			cursor: pointer;
+
 			img {
 				width: 100%;
 				height: 100%;
 			}
 		}
+
 		.header-arrow-right {
 			position: absolute;
 			right: -33px;
@@ -588,6 +553,7 @@ onUnmounted(() => {
 			width: 24px;
 			height: 48px;
 			cursor: pointer;
+
 			img {
 				width: 100%;
 				height: 100%;
@@ -612,6 +578,7 @@ onUnmounted(() => {
 			gap: 16px;
 			padding: 0;
 			transition: transform 0.5s ease; // 平滑过渡动画
+
 			.header-item {
 				width: 307px;
 				height: 178px;
@@ -631,6 +598,7 @@ onUnmounted(() => {
 					letter-spacing: 0px;
 					text-align: left;
 				}
+
 				.num {
 					margin-top: -8px;
 					margin-left: 112px;
@@ -646,23 +614,29 @@ onUnmounted(() => {
 					text-align: left;
 				}
 			}
+
 			.headerItem1 {
 				background: url("./assets/images/bg1.png");
 			}
+
 			.headerItem2 {
 				background: url("./assets/images/bg2.png");
 			}
+
 			.headerItem3 {
 				background: url("./assets/images/bg3.png");
 			}
+
 			.headerItem4 {
 				background: url("./assets/images/bg4.png");
 			}
+
 			.headerItem5 {
 				background: url("./assets/images/bg5.png");
 			}
 		}
 	}
+
 	.main {
 		width: 1598px;
 		height: 884px;
@@ -670,6 +644,7 @@ onUnmounted(() => {
 		margin-top: 14px;
 		display: flex;
 		justify-content: space-between;
+
 		.box {
 			box-sizing: border-box;
 			border: 1px solid rgba(255, 255, 255, 1);
@@ -677,28 +652,34 @@ onUnmounted(() => {
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background: rgba(255, 255, 255, 0.65);
 		}
+
 		.left {
 			width: 472px;
+
 			.box1 {
 				width: 472px;
 				height: 884px;
 				overflow: hidden;
+
 				.box1-header {
 					height: 48px;
 					display: flex;
 					box-sizing: border-box;
 					border-bottom: 1px solid rgba(255, 255, 255, 1);
 					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
+
 					.icon {
 						width: 22px;
 						height: 18px;
 						margin-top: 15px;
 						margin-left: 16px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.title {
 						width: 89px;
 						height: 31px;
@@ -714,10 +695,12 @@ onUnmounted(() => {
 						text-align: left;
 					}
 				}
+
 				.box1-main {
 					height: 836px;
 					overflow: hidden;
 					background: rgba(255, 255, 255, 0.65);
+
 					.box1-item {
 						width: 430px;
 						height: 167px;
@@ -728,6 +711,7 @@ onUnmounted(() => {
 						margin: 0 auto;
 						display: flex;
 						cursor: pointer;
+
 						.box1-item-left {
 							width: 30px;
 							height: 30px;
@@ -743,9 +727,11 @@ onUnmounted(() => {
 							line-height: 30px;
 							letter-spacing: 0px;
 						}
+
 						.box1-item-right {
 							width: 388px;
 							margin-left: 12px;
+
 							.title {
 								height: 30px;
 								color: rgba(59, 65, 75, 1);
@@ -760,6 +746,7 @@ onUnmounted(() => {
 								text-overflow: ellipsis;
 								white-space: nowrap;
 							}
+
 							.content {
 								height: 48px;
 								color: rgba(95, 101, 108, 1);
@@ -776,12 +763,14 @@ onUnmounted(() => {
 								-webkit-box-orient: vertical;
 								-webkit-line-clamp: 2;
 							}
+
 							.tag-box {
 								margin-top: 4px;
 								height: 28px;
 								display: flex;
 								flex-wrap: wrap;
 								gap: 8px;
+
 								.tag {
 									width: 80px;
 									height: 28px;
@@ -797,12 +786,14 @@ onUnmounted(() => {
 									letter-spacing: 0px;
 								}
 							}
+
 							.box1-item-right-footer {
 								height: 30px;
 								margin-top: 4px;
 								display: flex;
 								justify-content: space-between;
 								align-items: center;
+
 								.time {
 									width: 124px;
 									height: 30px;
@@ -815,11 +806,13 @@ onUnmounted(() => {
 									letter-spacing: 0px;
 									text-align: left;
 								}
+
 								.area-box {
 									height: 24px;
 									display: flex;
 									gap: 8px;
 									justify-content: flex-end;
+
 									.area {
 										height: 24px;
 										padding: 0 8px;
@@ -847,27 +840,33 @@ onUnmounted(() => {
 				}
 			}
 		}
+
 		.right {
 			width: 1110px;
+
 			.box2 {
 				width: 1110px;
 				height: 434px;
+
 				.box2-header {
 					height: 48px;
 					box-sizing: border-box;
 					border-bottom: 1px solid rgba(255, 255, 255, 1);
 					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
 					display: flex;
+
 					.icon {
 						width: 17px;
 						height: 16.5px;
 						margin-left: 19px;
 						margin-top: 16px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.title {
 						margin-top: 8px;
 						margin-left: 13px;
@@ -883,12 +882,14 @@ onUnmounted(() => {
 						text-align: left;
 					}
 				}
+
 				.box2-main {
 					height: 386px;
 					background: rgba(255, 255, 255, 0.65);
 					display: flex;
 					justify-content: center;
 					gap: 16px;
+
 					.inner-box1 {
 						width: 640px;
 						height: 368px;
@@ -897,21 +898,27 @@ onUnmounted(() => {
 						border: 1px solid rgba(234, 236, 238, 1);
 						border-radius: 10px;
 						display: flex;
+
 						.left {
 							width: 320px;
 							border-right: 1px solid rgba(234, 236, 238, 1);
+
 							.left-main {
 								margin-top: 9px;
 								height: 270px;
+
 								.left-item {
 									height: 54px;
 									border: 1px solid transparent;
 									display: flex;
 									align-items: center;
+
 									&:hover {
 										background: rgba(246, 250, 255, 1);
 									}
+
 									cursor: pointer;
+
 									.id {
 										margin-left: 16px;
 										width: 24px;
@@ -927,6 +934,7 @@ onUnmounted(() => {
 										letter-spacing: 0px;
 										text-align: center;
 									}
+
 									.text {
 										width: 260px;
 										height: 30px;
@@ -944,6 +952,7 @@ onUnmounted(() => {
 										white-space: nowrap;
 									}
 								}
+
 								.leftItemActive {
 									box-sizing: border-box;
 									border: 1px solid rgba(231, 243, 255, 1);
@@ -951,6 +960,7 @@ onUnmounted(() => {
 									background: rgba(246, 250, 255, 1);
 								}
 							}
+
 							.left-footer {
 								margin-top: 30px;
 								height: 60px;
@@ -959,12 +969,14 @@ onUnmounted(() => {
 								align-items: center;
 							}
 						}
+
 						.right {
 							width: 320px;
 							height: 368px;
 							overflow: hidden;
 							overflow-y: auto;
 							cursor: pointer;
+
 							.title {
 								width: 283px;
 								min-height: 24px;
@@ -980,6 +992,7 @@ onUnmounted(() => {
 								letter-spacing: 0px;
 								text-align: justify;
 							}
+
 							.tag-box {
 								width: 283px;
 								margin: 0 auto;
@@ -987,6 +1000,7 @@ onUnmounted(() => {
 								display: flex;
 								flex-wrap: wrap;
 								gap: 8px;
+
 								.tag {
 									height: 28px;
 									padding: 0 8px;
@@ -1003,6 +1017,7 @@ onUnmounted(() => {
 									letter-spacing: 0px;
 								}
 							}
+
 							.content {
 								margin: 0 auto;
 								margin-top: 8px;
@@ -1022,6 +1037,7 @@ onUnmounted(() => {
 								-webkit-box-orient: vertical;
 								-webkit-line-clamp: 5;
 							}
+
 							.area-box {
 								width: 283px;
 								margin: 0 auto;
@@ -1031,6 +1047,7 @@ onUnmounted(() => {
 								flex-wrap: wrap;
 								justify-content: flex-start;
 								gap: 8px;
+
 								.area {
 									height: 24px;
 									padding: 0 8px;
@@ -1048,6 +1065,7 @@ onUnmounted(() => {
 									color: rgba(245, 34, 45, 1);
 								}
 							}
+
 							.footer {
 								width: 283px;
 								margin: 0 auto;
@@ -1064,6 +1082,7 @@ onUnmounted(() => {
 							}
 						}
 					}
+
 					.inner-box2 {
 						width: 412px;
 						height: 368px;
@@ -1072,6 +1091,7 @@ onUnmounted(() => {
 						border-radius: 10px;
 						overflow: hidden;
 						position: relative;
+
 						.chart-header {
 							position: absolute;
 							top: 14px;
@@ -1090,6 +1110,7 @@ onUnmounted(() => {
 							line-height: 26px;
 							letter-spacing: 0px;
 						}
+
 						.box2Chart {
 							width: 412px;
 							height: 368px;
@@ -1097,26 +1118,31 @@ onUnmounted(() => {
 					}
 				}
 			}
+
 			.box3 {
 				margin-top: 16px;
 				width: 1110px;
 				height: 434px;
+
 				.box3-header {
 					height: 48px;
 					box-sizing: border-box;
 					border-bottom: 1px solid rgba(255, 255, 255, 1);
 					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
 					display: flex;
+
 					.icon {
 						width: 17px;
 						height: 16.5px;
 						margin-left: 19px;
 						margin-top: 16px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.title {
 						margin-top: 8px;
 						margin-left: 13px;
@@ -1132,12 +1158,14 @@ onUnmounted(() => {
 						text-align: left;
 					}
 				}
+
 				.box3-main {
 					height: 386px;
 					background: rgba(255, 255, 255, 0.65);
 					display: flex;
 					justify-content: center;
 					gap: 16px;
+
 					.inner-box1 {
 						width: 640px;
 						height: 368px;
@@ -1146,21 +1174,27 @@ onUnmounted(() => {
 						border: 1px solid rgba(234, 236, 238, 1);
 						border-radius: 10px;
 						display: flex;
+
 						.left {
 							width: 320px;
 							border-right: 1px solid rgba(234, 236, 238, 1);
+
 							.left-main {
 								margin-top: 9px;
 								height: 270px;
+
 								.left-item {
 									height: 54px;
 									border: 1px solid transparent;
 									display: flex;
 									align-items: center;
+
 									&:hover {
 										background: rgba(246, 250, 255, 1);
 									}
+
 									cursor: pointer;
+
 									.id {
 										margin-left: 16px;
 										width: 24px;
@@ -1176,6 +1210,7 @@ onUnmounted(() => {
 										letter-spacing: 0px;
 										text-align: center;
 									}
+
 									.text {
 										width: 260px;
 										height: 30px;
@@ -1193,6 +1228,7 @@ onUnmounted(() => {
 										white-space: nowrap;
 									}
 								}
+
 								.leftItemActive {
 									box-sizing: border-box;
 									border: 1px solid rgba(231, 243, 255, 1);
@@ -1200,6 +1236,7 @@ onUnmounted(() => {
 									background: rgba(246, 250, 255, 1);
 								}
 							}
+
 							.left-footer {
 								margin-top: 30px;
 								height: 60px;
@@ -1208,12 +1245,14 @@ onUnmounted(() => {
 								align-items: center;
 							}
 						}
+
 						.right {
 							width: 320px;
 							height: 368px;
 							overflow: hidden;
 							overflow-y: auto;
 							cursor: pointer;
+
 							.title {
 								width: 283px;
 								min-height: 24px;
@@ -1229,6 +1268,7 @@ onUnmounted(() => {
 								letter-spacing: 0px;
 								text-align: justify;
 							}
+
 							.tag-box {
 								width: 283px;
 								margin: 0 auto;
@@ -1236,6 +1276,7 @@ onUnmounted(() => {
 								display: flex;
 								flex-wrap: wrap;
 								gap: 8px;
+
 								.tag {
 									height: 28px;
 									padding: 0 8px;
@@ -1252,6 +1293,7 @@ onUnmounted(() => {
 									letter-spacing: 0px;
 								}
 							}
+
 							.content {
 								margin: 0 auto;
 								margin-top: 8px;
@@ -1271,6 +1313,7 @@ onUnmounted(() => {
 								-webkit-box-orient: vertical;
 								-webkit-line-clamp: 5;
 							}
+
 							.area-box {
 								width: 283px;
 								margin: 0 auto;
@@ -1280,6 +1323,7 @@ onUnmounted(() => {
 								flex-wrap: wrap;
 								justify-content: flex-start;
 								gap: 8px;
+
 								.area {
 									height: 24px;
 									padding: 0 8px;
@@ -1297,6 +1341,7 @@ onUnmounted(() => {
 									color: rgba(245, 34, 45, 1);
 								}
 							}
+
 							.footer {
 								width: 283px;
 								margin: 0 auto;
@@ -1313,6 +1358,7 @@ onUnmounted(() => {
 							}
 						}
 					}
+
 					.inner-box2 {
 						width: 412px;
 						height: 368px;
@@ -1321,6 +1367,7 @@ onUnmounted(() => {
 						border-radius: 10px;
 						overflow: hidden;
 						position: relative;
+
 						.chart-header {
 							position: absolute;
 							top: 14px;
@@ -1339,6 +1386,7 @@ onUnmounted(() => {
 							line-height: 26px;
 							letter-spacing: 0px;
 						}
+
 						.box3Chart {
 							width: 412px;
 							height: 368px;
@@ -1349,26 +1397,31 @@ onUnmounted(() => {
 		}
 	}
 }
+
 .area1 {
 	border: 1px solid rgba(217, 247, 190, 1) !important;
 	background: rgba(246, 255, 237, 1) !important;
 	color: rgba(56, 158, 13, 1) !important;
 }
+
 .area2 {
 	border: 1px solid rgba(135, 232, 222, 1) !important;
 	background: rgba(230, 255, 251, 1) !important;
 	color: rgba(19, 168, 168, 1) !important;
 }
+
 .area3 {
 	border: 1px solid rgba(145, 202, 255, 1) !important;
 	background: rgba(230, 244, 255, 1) !important;
 	color: rgba(22, 119, 255, 1) !important;
 }
+
 .area4 {
 	border: 1px solid rgba(173, 198, 255, 1) !important;
 	background: rgba(240, 245, 255, 1) !important;
 	color: rgba(47, 84, 235, 1) !important;
 }
+
 .area5 {
 	border: 1px solid rgba(211, 173, 247, 1) !important;
 	background: rgba(249, 240, 255, 1) !important;