diff --git a/src/assets/images/comprehensiveManage/project1.png b/src/assets/images/comprehensiveManage/project1.png
new file mode 100644
index 00000000..15e8131c
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project1.png differ
diff --git a/src/assets/images/comprehensiveManage/project10.png b/src/assets/images/comprehensiveManage/project10.png
new file mode 100644
index 00000000..5614ad4e
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project10.png differ
diff --git a/src/assets/images/comprehensiveManage/project11.png b/src/assets/images/comprehensiveManage/project11.png
new file mode 100644
index 00000000..d342a6c6
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project11.png differ
diff --git a/src/assets/images/comprehensiveManage/project12.png b/src/assets/images/comprehensiveManage/project12.png
new file mode 100644
index 00000000..ac3a6a79
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project12.png differ
diff --git a/src/assets/images/comprehensiveManage/project13.png b/src/assets/images/comprehensiveManage/project13.png
new file mode 100644
index 00000000..95f4f361
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project13.png differ
diff --git a/src/assets/images/comprehensiveManage/project2.png b/src/assets/images/comprehensiveManage/project2.png
new file mode 100644
index 00000000..e5174161
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project2.png differ
diff --git a/src/assets/images/comprehensiveManage/project3.png b/src/assets/images/comprehensiveManage/project3.png
new file mode 100644
index 00000000..1d3fe1e9
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project3.png differ
diff --git a/src/assets/images/comprehensiveManage/project4.png b/src/assets/images/comprehensiveManage/project4.png
new file mode 100644
index 00000000..97d852ca
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project4.png differ
diff --git a/src/assets/images/comprehensiveManage/project5.png b/src/assets/images/comprehensiveManage/project5.png
new file mode 100644
index 00000000..b299202d
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project5.png differ
diff --git a/src/assets/images/comprehensiveManage/project6.png b/src/assets/images/comprehensiveManage/project6.png
new file mode 100644
index 00000000..d7696761
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project6.png differ
diff --git a/src/assets/images/comprehensiveManage/project7.png b/src/assets/images/comprehensiveManage/project7.png
new file mode 100644
index 00000000..a80e99d8
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project7.png differ
diff --git a/src/assets/images/comprehensiveManage/project8.png b/src/assets/images/comprehensiveManage/project8.png
new file mode 100644
index 00000000..544ceb66
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project8.png differ
diff --git a/src/assets/images/comprehensiveManage/project9.png b/src/assets/images/comprehensiveManage/project9.png
new file mode 100644
index 00000000..f1afc9b2
Binary files /dev/null and b/src/assets/images/comprehensiveManage/project9.png differ
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue
index 54585c1d..a0032df7 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue
@@ -1,13 +1,164 @@
 <template>
-  <div>
-5
-  </div>
+	<div class="leftTop">
+		<Card title="进度概况">
+			<div class="progressContent">
+				<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
+					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
+					<div><i>倒计时</i></div>
+				</div>
+				<div class="totalDay">
+					<div style="line-height: 45px">
+						项目总天数
+						<span class="dayImg">1</span>
+						<span class="dayImg">0</span>
+						<span class="dayImg">4</span>
+						<span class="dayImg">7</span>
+						<span style="margin-left: 4%">天</span>
+					</div>
+				</div>
+				<div class="residueDay">
+					<div style="line-height: 45px">
+						项目剩余天数
+						<span class="dayImg">0</span>
+						<span class="dayImg">2</span>
+						<span class="dayImg">8</span>
+						<span class="dayImg">6</span>
+						<span style="margin-left: 4%">天</span>
+					</div>
+				</div>
+				<div style="display: flex; margin-top: 3%;margin-left: 0.5%; color: #fff; font-size: 16px; width: 30%; position: absolute">
+					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
+					<div><i>里程碑</i></div>
+				</div>
+				<div class="progressData">
+					<div class="data" v-for="item in progressList">
+						<div v-if="item.status==0" class="text" :title="item.name">{{ item.name }}</div>
+						<img v-if="item.status==0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
+						<div v-if="item.status==1" style="color: #fff;font-size:18px;margin-top: -8%;" :title="item.name" class="statusImg1">{{ item.name }}</div>
+						<img v-if="item.status==1" style="width: 40px;margin-top: 2%;" src="@/assets/images/comprehensiveManage/project11.png" alt="" />
+            <div v-if="item.status==1" class="statusImg"></div>
+					</div>
+				</div>
+			</div>
+		</Card>
+	</div>
 </template>
 
 <script setup lang="ts">
-
+import Card from "@/components/card.vue";
+import { ref } from "vue";
+const progressList = ref([
+	{
+		name: "施工证获取",
+		status: 0
+	},
+	{
+		name: "土方开挖",
+		status: 0
+	},
+	{
+		name: "桩基",
+		status: 0
+	},
+	{
+		name: "支护开始",
+		status: 1
+	},
+	{
+		name: "垫层完成",
+		status: 0
+	},
+	{
+		name: "正负零",
+		status: 0
+	},
+	{
+		name: "工程达到预售条件",
+		status: 0
+	},
+	{
+		name: "主体施工",
+		status: 0
+	}
+]);
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+}
+.progressContent {
+	width: 100%;
+	height: 100%;
+	.totalDay {
+		width: 40%;
+		float: left;
+		color: #ccc;
+		font-size: 16px;
+		margin-left: 10%;
+	}
+	.residueDay {
+		width: 40%;
+		float: right;
+		color: #ccc;
+		font-size: 16px;
+		margin-right: 5%;
+	}
+	.dayImg {
+		margin-left: 2%;
+		font-size: 26px;
+		display: inline-block;
+		width: 35px;
+		height: 45px;
+		font-family: sadigitalNumber;
+		background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
+		background-size: 100% 100%;
+		text-align: center;
+		color: #4ac0f3;
+	}
+	.progressData {
+		width: 96%;
+		height: 15%;
+		margin: 13.5% 2% 0 2%;
+		background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
+		background-size: 100% 100%;
+		display: flex;
+    cursor: pointer;
+		.data {
+			color: #ccc;
+			font-size: 15px;
+			margin-top: -1%;
+			margin-left: 5%;
+			.text {
+				width: 60px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			img {
+				width: 20px;
+				margin-top: 18%;
+        margin-left: 15%;
+			}
+		}
+    .statusImg{
+      position: absolute;
+      top: 97%;
+      left: 45%;
+      width: 120px;
+      height: 2px;
+      background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
+		background-size: 100% 100%;
+    }
+    .statusImg1{
+    background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
+		background-size: 100% 100%;
+    }
+	}
+}
+::v-deep .h-card .content {
+	height: 80%;
+	margin-top: 1.8%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue
index 1c7800ab..341d91cb 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue
@@ -1,13 +1,34 @@
 <template>
-  <div>
-4
-  </div>
+	<div class="leftTop">
+		<Card title="宣传视频">
+			<div class="videoBox">
+				<video src="" class="videos" autoplay controls loop></video>
+			</div>
+		</Card>
+	</div>
 </template>
 
 <script setup lang="ts">
-
+import Card from "@/components/card.vue";
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+	.videoBox {
+		width: 100%;
+		height: 100%;
+		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
+		background-size: 100% 100%;
+		.videos {
+			width: 78%;
+			height: 92%;
+			margin: 3% 11%;
+		}
+	}
+}
+::v-deep .h-card .content {
+	background: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/index.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/index.vue
index 1fa5ccbe..6537ef91 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/index.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/index.vue
@@ -1,13 +1,76 @@
 <template>
-  <div>
-   工程概况
-  </div>
+	<div class="projectContent">
+		<div class="left">
+			<leftTop class="leftTop"></leftTop>
+			<leftCenter class="leftCenter"></leftCenter>
+			<leftBottom class="leftBottom"></leftBottom>
+		</div>
+		<div class="center">
+			<centerTop class="centerTop"></centerTop>
+			<centerBottom class="centerBottom"></centerBottom>
+		</div>
+		<div class="right">
+			<rightTop class="rightTop"></rightTop>
+			<rightCenter class="rightCenter"></rightCenter>
+			<rightBottom class="rightBottom"></rightBottom>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-
+import leftTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue";
+import leftCenter from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue";
+import leftBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftBottom.vue";
+import centerTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue";
+import centerBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue";
+import rightTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightTop.vue";
+import rightCenter from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightCenter.vue";
+import rightBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue";
 </script>
+<style lang="scss" scoped>
+.projectContent {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	.left {
+		width: 26%;
+		.leftTop {
+			height: 32%;
+		}
+		.leftCenter {
+			height: 33%;
+			margin: 3% 0 3% 0;
+		}
+		.leftBottom {
+			height: 32%;
+		}
+	}
+	.center {
+		width: 46%;
+		margin: 0 1%;
 
-<style scoped>
+		.centerTop{
+		  height: 66%;
+      margin-bottom: 2.1%;
 
+		}
+		.centerBottom{
+		  height: 32%;
+		}
+	}
+	.right {
+		width: 26%;
+
+    .rightTop {
+			height: 32%;
+		}
+		.rightCenter {
+			height: 33%;
+			margin: 3% 0 3% 0;
+		}
+		.rightBottom {
+			height: 32%;
+		}
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftBottom.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftBottom.vue
index f76ac9df..1af12d96 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftBottom.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftBottom.vue
@@ -1,13 +1,66 @@
 <template>
-  <div>
-3
-  </div>
+	<div class="leftTop">
+		<Card title="智能设备">
+			<div class="deviceData">
+				<div class="deviceDataA">
+					<div class="num"><i>2</i></div>
+					<div class="text">实名制设备数</div>
+				</div>
+				<div class="deviceDataB">
+					<div class="num"><i>2</i></div>
+					<div class="text">环境设备数</div>
+				</div>
+			</div>
+		</Card>
+	</div>
 </template>
 
 <script setup lang="ts">
-
+import Card from "@/components/card.vue";
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+	display: flex;
 
+	.deviceData {
+		width: 100%;
+		height: 100%;
+		display: flex;
+
+		.deviceDataA {
+			width: 40%;
+			height: 85%;
+			background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
+			background-size: 100% 100%;
+			margin: 4% 5%;
+			color: #fff;
+			text-align: center;
+		}
+		.deviceDataB {
+			width: 40%;
+			height: 85%;
+			background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
+			background-size: 100% 100%;
+			margin: 4% 5%;
+			color: #fff;
+			text-align: center;
+		}
+		.num {
+			margin-top: 30%;
+			font-size: 32px;
+			font-weight: bold;
+		}
+		.text {
+			font-size: 14px;
+
+			color: #ccc;
+		}
+	}
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue
index 2ea72baa..5fcb1847 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue
@@ -1,13 +1,150 @@
 <template>
-  <div>
-2
-  </div>
+	<div class="leftTop">
+		<Card title="人员概况">
+			<div class="topPeopleNum">
+				<div class="dataTlo">
+					<div class="text"><i>实名制人数</i></div>
+					<div class="num"><i>1024</i></div>
+				</div>
+				<div class="dataTlt">
+					<div class="text"><i>在场人数</i></div>
+					<div class="num"><i>1024</i></div>
+				</div>
+			</div>
+			<div class="bottomPeopleNum">
+				<div style="display: flex; margin-left: 2%">
+					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 2%"></div>
+					<div><i>管理人员</i></div>
+				</div>
+				<div class="peopleData">
+					<div class="peoImg"><img src="@/assets/images/comprehensiveManage/project3.png" alt="" /></div>
+					<div class="peoNum">
+						<div class="penName"></div>
+						<div class="penN"></div>
+						<div class="numData1 numData">
+							<div class="text"><i>甲方人员</i></div>
+							<div class="num"><i style="color: #eea959">1/2</i></div>
+						</div>
+						<div class="numData2 numData">
+							<div class="text"><i>监理人员</i></div>
+							<div class="num"><i style="color: #82fbea">1/1</i></div>
+						</div>
+						<div class="numData3 numData">
+							<div class="text"><i>乙方人员</i></div>
+							<div class="num"><i style="color: #7aa0ea">0/1</i></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Card>
+	</div>
 </template>
 
 <script setup lang="ts">
-
+import Card from "@/components/card.vue";
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+	.topPeopleNum {
+		height: 40%;
+		display: flex;
+		.dataTlo {
+			width: 35%;
+			height: 100%;
+			background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
+			background-size: 100% 100%;
+			margin-left: 10%;
+		}
+		.dataTlt {
+			width: 35%;
+			height: 100%;
+			background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
+			background-size: 100% 100%;
+			margin-left: 10%;
+		}
+		.text {
+			color: #fff;
+			font-size: 14px;
+			margin-left: 50%;
+			margin-top: 15%;
+		}
+		.num {
+			font-size: 24px;
+			font-weight: bold;
+			background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+			margin-left: 47%;
+			margin-top: 5%;
+		}
+	}
+	.bottomPeopleNum {
+		height: 60%;
+		div {
+			height: 20%;
+			color: #fff;
+			font-size: 16px;
+		}
+		.peopleData {
+			height: 80%;
+			display: flex;
+			.peoImg {
+				width: 30%;
+				height: 100%;
+				img {
+					margin-left: 30%;
+					width: 50%;
+					margin-top: 7%;
+				}
+			}
+			.peoNum {
+				height: 100%;
+				width: 70%;
+				position: relative;
+				.penName {
+					background: rgba(39, 88, 192, 0.6);
+					margin: 5% 5%;
+				}
+				.penN {
+					height: 10px;
+					background: url("@/assets/images/comprehensiveManage/project8.png") no-repeat;
+					background-size: 100% 100%;
+					margin: 13% 5%;
+				}
+				.numData1 {
+					left: 8%;
+					top: -10%;
+				}
+				.numData2 {
+					left: 40%;
+					top: -10%;
+				}
+				.numData3 {
+					left: 70%;
+					top: -10%;
+				}
+				.numData {
+					position: absolute;
+					height: 60%;
+					width: 30%;
+					.text {
+						margin-top: 18%;
+						font-size: 16px;
+					}
+					.num {
+						font-size: 20px;
+						margin-top: 20%;
+						margin-left: 10%;
+					}
+				}
+			}
+		}
+	}
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue
index 116147c8..6e94738a 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue
@@ -1,13 +1,43 @@
 <template>
-  <div>
-1
-  </div>
+	<div class="leftTop">
+		<Card title="项目信息">
+			<div class="projectInfo">
+				<div><span>项目名称：</span> 福永意库项目</div>
+				<div><span>项目地址：</span> 广东省深圳市宝安区丰业路德轩阁东南侧约70米</div>
+				<div><span>项目经理：</span> 李翔</div>
+				<div><span>联系电话：</span> 13538606766</div>
+				<div><span>建筑面积：</span> 150000㎡</div>
+				<div><span>开工日期：</span> 项目编号</div>
+				<div><span>工程类别：</span> 房建</div>
+			</div>
+		</Card>
+	</div>
 </template>
 
 <script setup lang="ts">
-
+import Card from "@/components/card.vue";
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+	.projectInfo {
+		width: 100%;
+		height: 100%;
+		color: #fff;
+		padding: 3% 0 0 4%;
 
+		div {
+			height: 13%;
+			font-size: 14px;
+      span{
+        color: #ccc;
+      }
+		}
+	}
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue
index 388c536e..d44352cf 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue
@@ -1,13 +1,501 @@
 <template>
-  <div>
-8
-  </div>
+	<div class="leftTop">
+		<Card title="环境监测">
+			<div class="box">
+				<div id="echartsHjjc" ref="leftTopEcharts" style="width: 100%; height: 100%"></div>
+				<div class="footerData">{{ analysisData }}</div>
+				<div class="colour">
+					<div class="colour_content">
+						<div class="bg" style="background: #65d7f9; border-top-left-radius: 8px; border-bottom-left-radius: 8px"></div>
+						<div class="size">优</div>
+					</div>
+					<div class="colour_content">
+						<div class="bg" style="background: #ffbb38"></div>
+						<div class="size">良</div>
+					</div>
+					<div class="colour_content">
+						<div class="bg" style="background: #fe7a18"></div>
+						<div class="size">轻度污染</div>
+					</div>
+					<div class="colour_content">
+						<div class="bg" style="background: #7718fe"></div>
+						<div class="size">中度污染</div>
+					</div>
+					<div class="colour_content">
+						<div class="bg" style="background: #890ea1"></div>
+						<div class="size">重度污染</div>
+					</div>
+					<div class="colour_content">
+						<div class="bg" style="background: #970c0c; border-top-right-radius: 8px; border-bottom-right-radius: 8px"></div>
+						<div class="size">严重污染</div>
+					</div>
+				</div>
+			</div>
+		</Card>
+	</div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
+import { GlobalStore } from "@/stores";
+import { getCurrentDayAirQualityApi } from "@/api/modules/headNoise";
+import { ref, onMounted, reactive } from "vue";
+import * as echarts from "echarts";
+import Card from "@/components/card.vue";
+const store = GlobalStore();
+const analysisData = ref(10 as any);
+const posCenter = ref(["50%", "64%"]);
 
+function drawChart() {
+	let leftTopEcharts = echarts.init(document.getElementById("echartsHjjc"));
+	let option = {
+		series: [
+			{
+				// 外围刻度
+				type: "gauge",
+				radius: "100%",
+				center: posCenter.value,
+				splitNumber: 10,
+				min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 18,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "rgba(151, 12, 12, 1)"
+									},
+									{
+										offset: 0.2,
+										color: "rgba(137, 14, 161, 1)"
+									},
+									{
+										offset: 0.4,
+										color: "rgba(119, 24, 254, 1)"
+									},
+									{
+										offset: 0.5,
+										color: "rgba(254, 122, 24, 1)"
+									},
+									{
+										offset: 0.8,
+										color: "rgba(255, 187, 56, 1)"
+									},
+									{
+										offset: 1,
+										color: "rgba(101, 215, 249, 1)"
+									}
+								])
+							]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: true,
+					color: "#fff",
+					fontSize: 10,
+					distance: -40
+				},
+				pointer: {
+					show: 0
+				}
+			},
+			{
+				// 内侧指针、数值显示
+				name: "",
+				type: "gauge",
+				radius: "95%",
+				center: posCenter.value,
+				startAngle: 180,
+				endAngle: 0,
+				min: 0, //最小刻度
+				max: 100, //最大刻度
+				splitNumber: 20, //刻度数量
+				axisLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				}, //刻度标签。
+				axisTick: {
+					show: false
+				}, //刻度样式
+				splitLine: {
+					show: true,
+					length: 5,
+					lineStyle: {
+						color: "#87E0FB",
+						width: 1
+					}
+				},
+				detail: {
+					show: false
+				},
+				itemStyle: {
+					normal: {
+						color: "#fff"
+					}
+				},
+				data: [
+					{
+						value: analysisData.value
+					}
+				],
+				z: 9
+			},
+			// 第三个圆
+			{
+				type: "gauge",
+				radius: "70%",
+				center: posCenter.value,
+				splitNumber: 4,
+				min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "rgb(1,192,229)"
+									},
+									{
+										offset: 1,
+										color: "#87E0FB "
+									}
+								])
+							]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			// 第二个圆
+			{
+				type: "gauge",
+				radius: "45%",
+				center: posCenter.value,
+				splitNumber: 4,
+				min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "rgb(1,192,229)"
+									},
+									{
+										offset: 1,
+										color: "#87E0FB "
+									}
+								])
+							]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			// 第一个圆
+			{
+				type: "gauge",
+				radius: "25%",
+				center: posCenter.value,
+				splitNumber: 4,
+				min: 0,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 200,
+						shadowBlur: 0,
+						color: [
+							[
+								1,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 1,
+										color: "rgba(135, 224, 251, 0.2)"
+									},
+									{
+										offset: 0.2,
+										color: "rgba(135, 224, 251, 0.7)"
+									}
+								])
+							],
+							[1, "transparent"]
+						]
+					}
+				},
+				axisTick: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				type: "gauge",
+				radius: "70%",
+				center: posCenter.value,
+				splitNumber: 0, //刻度数量
+				startAngle: 180,
+				endAngle: 0,
+
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 26,
+						color: [
+							[
+								analysisData.value / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0.5,
+										color: "rgba(135, 224, 251, 1)"
+									},
+									{
+										offset: 1,
+										color: "#fff"
+									}
+								])
+							],
+							[1, "transparent"]
+						]
+					}
+				},
+				//分隔线样式。
+				splitLine: {
+					show: false
+				},
+				axisLabel: {
+					show: false
+				},
+				axisTick: {
+					show: false
+				},
+				pointer: {
+					show: false
+				},
+				title: {
+					show: false
+				},
+				//仪表盘详情，用于显示数据。
+				detail: {
+					show: false
+				},
+				data: [
+					{
+						value: analysisData.value,
+						itemStyle: {
+							color: "red"
+						}
+					}
+				]
+			},
+			{
+				//指针外环
+				type: "pie",
+				hoverAnimation: false,
+				legendHoverLink: false,
+				center: posCenter.value,
+				radius: ["8%", "6%"],
+				// width:5,
+				z: 10,
+				label: {
+					normal: {
+						show: false
+					}
+				},
+				labelLine: {
+					normal: {
+						show: false
+					}
+				},
+				data: [
+					{
+						value: analysisData.value,
+						itemStyle: {
+							normal: {
+								color: "#87E0FB"
+							}
+						}
+					}
+				]
+			},
+			{
+				//指针内环
+				type: "pie",
+				hoverAnimation: false,
+				legendHoverLink: false,
+				center: posCenter.value,
+				radius: ["-2%", "4%"],
+				z: 10,
+
+				axisLine: {
+					show: true
+				},
+				label: {
+					normal: {
+						show: false
+					}
+				},
+				labelLine: {
+					normal: {
+						show: false
+					}
+				},
+
+				data: [
+					{
+						value: analysisData.value,
+						itemStyle: {
+							normal: {
+								color: "rgba(7, 31, 60) "
+							}
+						}
+					}
+				]
+			}
+		]
+	};
+	leftTopEcharts.setOption(option);
+	// window.onresize = function () {
+	//   myEchart.resize();
+	// }
+}
+//获取环境监测数据
+const getList = async () => {
+	const res = await getCurrentDayAirQualityApi({ projectSn: store.sn });
+	console.log("获取环境监测数据", res);
+	if (res.result) {
+		analysisData.value = res.result.analysisData;
+	}
+	console.log("analysisData", analysisData.value);
+	drawChart();
+};
+onMounted(() => {
+	// getList();
+  drawChart();
+
+});
 </script>
 
-<style scoped>
+<style  lang="scss" scoped>
+.leftTop {
+	width: 100%;
+	height: 100%;
+}
+.box {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+.footerData {
+	position: absolute;
+	top: 69%;
+	left: 48%;
+	font-family: sadigitalNumber;
+	font-size: calc(100vw * 14 / 1920);
+	color: #fff;
+}
+.colour {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	font-size: calc(100vw * 10 / 1920);
+	left: 8%;
+	top: 80%;
+	color: #fff;
 
+	.colour_content {
+		width: 14%;
+		text-align: center;
+		float: left;
+
+		.bg {
+			width: 100%;
+			height: 8px;
+			margin-bottom: 10px;
+		}
+
+		.size {
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+::v-deep .h-card .content {
+	height: 80%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightCenter.vue
index 2dc709f7..38329238 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightCenter.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightCenter.vue
@@ -1,13 +1,291 @@
 <template>
-  <div>
-7
-  </div>
+  <div class="leftTop">
+  <Card title="质量管理">
+
+    <div id="echartsQuity" style="width: 100%; height: 100%"></div>
+
+</Card>
+</div>
+
 </template>
 
 <script setup lang="ts">
+import Card from "@/components/card.vue";
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+let dataList = ref([
+	{
+		value: 30,
+		show: true,
+		name: "未整改安全问题",
 
+		itemStyle: {
+			normal: {
+				color: "#4CC4F8",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 70,
+		show: true,
+		name: "已整改安全问题",
+		itemStyle: {
+			normal: {
+				color: "#82FBEA",
+				borderWidth: 20
+			}
+		}
+	},
+	
+]);
+function Pie() {
+	let dataArr = [];
+	for (var i = 0; i < 150; i++) {
+		if (i % 2 === 0) {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "#7cf4f1",
+						borderWidth: 0,
+						borderColor: "#7f6546"
+					}
+				}
+			});
+		} else {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "rgba(0,0,0,0)",
+						borderWidth: 0,
+						borderColor: "rgba(0,0,0,0)"
+					}
+				}
+			});
+		}
+	}
+	return dataArr;
+}
+
+onMounted(() => {
+	drawEchart();
+});
+
+function drawEchart() {
+	let echartsTest = echarts.init(document.getElementById("echartsQuity"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			text: 24,
+			subtext: "安全问题数",
+			x: "19%",
+			y: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 26,
+				fontWeight: "normal",
+				align: "center",
+				width: "200px",
+        fontFamily: "sadigitalNumber"
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 12,
+				fontWeight: "normal",
+				align: "center",
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			icon: "rect",
+			type: "plain",
+			orient: "vertical",
+			left: "50%",
+			top: "40%",
+			align: "left",
+			itemGap: 30,
+			itemWidth: 8, // 设置宽度
+			itemHeight: 7, // 设置高度
+			symbolKeepAspect: false,
+			textStyle: {
+				color: "#000",
+				rich: {
+					name: {
+						verticalAlign: "right",
+						align: "left",
+						fontSize: 14,
+						color: "#FFFFFF"
+					},
+					value: {
+						align: "left",
+						fontSize: 14,
+						color: "#FFFFFF"
+					}
+				}
+			},
+			data: dataList.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data) {
+				if (dataList.value && dataList.value.length) {
+					for (var i = 0; i < dataList.value.length; i++) {
+						if (data === dataList.value[i].name) {
+							var value = dataList.value[i].value;
+							var percentage = value + "%";
+							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " "+ "}";
+						}
+					}
+				}
+			}
+		},
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "90%",
+				startAngle: 235,
+				endAngle: -50,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								100 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "#52bef0"
+									},
+									{
+										offset: 1,
+										color: "rgba(54, 128, 174,0.4)"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "80%",
+				startAngle: 245,
+				endAngle: -115,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								200 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0.8,
+										color: "#52bef0"
+									},
+									{
+										offset: 0.5,
+										color: "#13356b"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "pie",
+				radius: [65, 75],
+				center: ["25%", "55%"],
+				hoverAnimation: true,
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				type: "pie",
+				radius: ["55", "60"],
+				center: ["25%", "55%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
 </script>
 
 <style scoped>
-
+.leftTop{
+width: 100%;
+height: 100%;
+}
+::v-deep .h-card .content{
+height: 80%; 
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightTop.vue
index 7c2bceb1..d0d6d154 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightTop.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightTop.vue
@@ -1,13 +1,291 @@
 <template>
-  <div>
-6
-  </div>
+  <div class="leftTop">
+  <Card title="安全管理">
+
+    <div id="echartsSafe" style="width: 100%; height: 100%"></div>
+
+</Card>
+</div>
+
 </template>
 
 <script setup lang="ts">
+import Card from "@/components/card.vue";
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+let dataList = ref([
+	{
+		value: 30,
+		show: true,
+		name: "未整改安全问题",
 
+		itemStyle: {
+			normal: {
+				color: "#EC6266",
+				borderWidth: 20
+			}
+		}
+	},
+	{
+		value: 70,
+		show: true,
+		name: "已整改安全问题",
+		itemStyle: {
+			normal: {
+				color: "#6375C7",
+				borderWidth: 20
+			}
+		}
+	},
+	
+]);
+function Pie() {
+	let dataArr = [];
+	for (var i = 0; i < 150; i++) {
+		if (i % 2 === 0) {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "#7cf4f1",
+						borderWidth: 0,
+						borderColor: "#7f6546"
+					}
+				}
+			});
+		} else {
+			dataArr.push({
+				name: (i + 1).toString(),
+				value: 10,
+				itemStyle: {
+					normal: {
+						color: "rgba(0,0,0,0)",
+						borderWidth: 0,
+						borderColor: "rgba(0,0,0,0)"
+					}
+				}
+			});
+		}
+	}
+	return dataArr;
+}
+
+onMounted(() => {
+	drawEchart();
+});
+
+function drawEchart() {
+	let echartsTest = echarts.init(document.getElementById("echartsSafe"));
+	let option = {
+		tooltip: {
+			trigger: "item"
+		},
+		title: {
+			text: 24,
+			subtext: "安全问题数",
+			x: "19%",
+			y: "center",
+			textStyle: {
+				color: "#fff",
+				fontSize: 26,
+				fontWeight: "normal",
+				align: "center",
+				width: "200px",
+        fontFamily: "sadigitalNumber"
+			},
+			subtextStyle: {
+				color: "#ccc",
+				fontSize: 12,
+				fontWeight: "normal",
+				align: "center",
+			}
+		},
+		legend: {
+			selectedMode: false, // 取消图例上的点击事件
+			icon: "rect",
+			type: "plain",
+			orient: "vertical",
+			left: "50%",
+			top: "40%",
+			align: "left",
+			itemGap: 30,
+			itemWidth: 8, // 设置宽度
+			itemHeight: 7, // 设置高度
+			symbolKeepAspect: false,
+			textStyle: {
+				color: "#000",
+				rich: {
+					name: {
+						verticalAlign: "right",
+						align: "left",
+						fontSize: 14,
+						color: "#FFFFFF"
+					},
+					value: {
+						align: "left",
+						fontSize: 14,
+						color: "#FFFFFF"
+					}
+				}
+			},
+			data: dataList.value.map(item => {
+				if (item.show) {
+					return item.name;
+				}
+			}),
+			formatter: function (data) {
+				if (dataList.value && dataList.value.length) {
+					for (var i = 0; i < dataList.value.length; i++) {
+						if (data === dataList.value[i].name) {
+							var value = dataList.value[i].value;
+							var percentage = value + "%";
+							return "{name| " + data + "}  {gap|       }" + "{value|" + value + " "+ "}";
+						}
+					}
+				}
+			}
+		},
+		series: [
+			// 外侧光线
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "90%",
+				startAngle: 235,
+				endAngle: -50,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								100 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0,
+										color: "#52bef0"
+									},
+									{
+										offset: 1,
+										color: "rgba(54, 128, 174,0.4)"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "gauge",
+				center: ["25%", "55%"],
+				radius: "80%",
+				startAngle: 245,
+				endAngle: -115,
+				min: 0,
+				max: 100,
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 2,
+						color: [
+							[
+								200 / 100,
+								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+									{
+										offset: 0.8,
+										color: "#52bef0"
+									},
+									{
+										offset: 0.5,
+										color: "#13356b"
+									}
+								])
+							],
+							[1, "rgba(255,255,255,0)"]
+						]
+					}
+				},
+
+				axisTick: {
+					show: 0
+				},
+				splitLine: {
+					show: 0
+				},
+				axisLabel: {
+					show: 0
+				},
+				pointer: {
+					show: 0
+				},
+				detail: {
+					show: 0
+				}
+			},
+			{
+				name: "",
+				type: "pie",
+				radius: [65, 75],
+				center: ["25%", "55%"],
+				hoverAnimation: true,
+				label: {
+					show: false,
+					position: "center"
+				},
+				emphasis: {
+					label: {
+						show: false
+					}
+				},
+				labelLine: {
+					show: false
+				},
+				data: dataList.value
+			},
+			{
+				type: "pie",
+				radius: ["55", "60"],
+				center: ["25%", "55%"],
+				label: {
+					show: false
+				},
+
+				data: Pie()
+			}
+		]
+	};
+	echartsTest.setOption(option, true);
+}
 </script>
 
 <style scoped>
-
+.leftTop{
+width: 100%;
+height: 100%;
+}
+::v-deep .h-card .content{
+height: 80%; 
+}
 </style>
\ No newline at end of file
diff --git a/src/views/sevenLargeScreen/indexL.vue b/src/views/sevenLargeScreen/indexL.vue
index 34a724f2..00ecf874 100644
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@@ -267,7 +267,7 @@ function jumpBgd() {
 	background-size: 100% 100%;
 
 	.header {
-		width: 100vw;
+		width: 100%;
 		height: 12%;
 		background: url("@/assets/images/headerImg.webp") no-repeat;
 		background-size: 100% 100%;
@@ -275,10 +275,9 @@ function jumpBgd() {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			font-size: calc(100vw * 42 / 1920);
+			font-size: 42px;
 			color: #fff;
 			font-family: YouSheBiaoTiHei;
-			line-height: 4vh;
 		}
 		.rightIcon {
 			position: absolute;
diff --git a/src/views/sevenLargeScreen/qualityControl/qualityManagement/centerTop.vue b/src/views/sevenLargeScreen/qualityControl/qualityManagement/centerTop.vue
index 0b6ada25..87202c60 100644
--- a/src/views/sevenLargeScreen/qualityControl/qualityManagement/centerTop.vue
+++ b/src/views/sevenLargeScreen/qualityControl/qualityManagement/centerTop.vue
@@ -44,7 +44,7 @@
 				</div>
 				<div class="num">
 					<div class="text"><i>已逾期数</i></div>
-					<div class="numStyle"><i>1024</i></div>
+					<div class="numStyle2"><i>1024</i></div>
 				</div>
 			</div>
 			<div class="lineDate6 data">
@@ -105,6 +105,19 @@ import Card from "@/components/card.vue";
 			margin-top: 15%;
 			background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
 			background-size: 100% 100%;
+			background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+		}
+		.numStyle2 {
+			font-size: 20px;
+			font-weight: bold;
+			margin-top: 15%;
+			background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
+			background-size: 100% 100%;
+			background-image: linear-gradient(to right, rgba(236, 98, 102, 1), rgba(255, 255, 255, 1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
 		}
 	}
   .lineDate1 {
diff --git a/src/views/sevenLargeScreen/safetyManagement/securityManagement/centerTop.vue b/src/views/sevenLargeScreen/safetyManagement/securityManagement/centerTop.vue
index 7f1d931c..bd191543 100644
--- a/src/views/sevenLargeScreen/safetyManagement/securityManagement/centerTop.vue
+++ b/src/views/sevenLargeScreen/safetyManagement/securityManagement/centerTop.vue
@@ -44,7 +44,7 @@
 				</div>
 				<div class="num">
 					<div class="text"><i>已逾期数</i></div>
-					<div class="numStyle"><i>1024</i></div>
+					<div class="numStyle2"><i>1024</i></div>
 				</div>
 			</div>
 			<div class="lineDate6 data">
@@ -105,6 +105,19 @@ import Card from "@/components/card.vue";
 			margin-top: 15%;
 			background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
 			background-size: 100% 100%;
+			background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+		}
+		.numStyle2 {
+			font-size: 20px;
+			font-weight: bold;
+			margin-top: 15%;
+			background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
+			background-size: 100% 100%;
+			background-image: linear-gradient(to right, rgba(236, 98, 102, 1), rgba(255, 255, 255, 1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
 		}
 	}
   .lineDate1 {