diff --git a/src/assets/images/loadometerManage/first.png b/src/assets/images/loadometerManage/first.png
new file mode 100644
index 00000000..138421e1
Binary files /dev/null and b/src/assets/images/loadometerManage/first.png differ
diff --git a/src/assets/images/loadometerManage/fourth.png b/src/assets/images/loadometerManage/fourth.png
new file mode 100644
index 00000000..2569384b
Binary files /dev/null and b/src/assets/images/loadometerManage/fourth.png differ
diff --git a/src/assets/images/loadometerManage/second.png b/src/assets/images/loadometerManage/second.png
new file mode 100644
index 00000000..6ca5d00b
Binary files /dev/null and b/src/assets/images/loadometerManage/second.png differ
diff --git a/src/assets/images/loadometerManage/third.png b/src/assets/images/loadometerManage/third.png
new file mode 100644
index 00000000..7a24cd33
Binary files /dev/null and b/src/assets/images/loadometerManage/third.png differ
diff --git a/src/assets/images/smartPartyBuilding/nameBg.png b/src/assets/images/smartPartyBuilding/nameBg.png
new file mode 100644
index 00000000..3e36b57e
Binary files /dev/null and b/src/assets/images/smartPartyBuilding/nameBg.png differ
diff --git a/src/assets/images/smartPartyBuilding/testPic.png b/src/assets/images/smartPartyBuilding/testPic.png
new file mode 100644
index 00000000..092f91e3
Binary files /dev/null and b/src/assets/images/smartPartyBuilding/testPic.png differ
diff --git a/src/assets/images/smartPartyBuilding/textBg.png b/src/assets/images/smartPartyBuilding/textBg.png
new file mode 100644
index 00000000..134ec24d
Binary files /dev/null and b/src/assets/images/smartPartyBuilding/textBg.png differ
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomCenter.vue
new file mode 100644
index 00000000..155f0d24
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomCenter.vue
@@ -0,0 +1,100 @@
+<template>
+	<Card title="党员风采">
+		<div class="bottom-center">
+			<div class="party-member">
+				<div class="member-content" v-for="item in list" :key="item.id">
+					<div class="name">
+						<i>{{ item.name }}</i>
+					</div>
+					<div class="photo">
+						<img :src="driverPhoto" alt="" />
+					</div>
+					<div class="introduce">{{ item.introduce }}</div>
+				</div>
+			</div>
+		</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import driverPhoto from "@/assets/images/towerCraneMonitoring/driverPhoto.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+const list = reactive([
+	{
+		id: 1,
+		name: "宋小秋",
+		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
+	},
+	{
+		id: 2,
+		name: "黄磊",
+		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
+	},
+	{
+		id: 3,
+		name: "郭莎莎",
+		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
+	},
+	{
+		id: 4,
+		name: "方洪鑫",
+		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
+	},
+	{
+		id: 5,
+		name: "郑欣敏",
+		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
+	}
+]);
+</script>
+<style lang="scss" scoped>
+.bottom-center {
+	width: 100%;
+	height: 100%;
+	.party-member {
+		height: 100%;
+		padding: 0 4%;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		.member-content {
+			width: 17%;
+			height: 100%;
+			margin-top: 5%;
+			.name {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 70%;
+				height: 12%;
+				font-family: OPPOSans-Regular, OPPOSans;
+				margin: auto;
+				background: url("@/assets/images/smartPartyBuilding/nameBg.png") no-repeat;
+				background-size: 100% 100%;
+				font-size: calc(100vw * 14 / 1920);
+				color: #ffffff;
+			}
+			.photo {
+				width: 70%;
+				height: 50%;
+				margin: auto;
+				margin-top: 3%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.introduce {
+				width: 100%;
+				margin-top: 8%;
+				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+				background: url("@/assets/images/smartPartyBuilding/textBg.png") no-repeat;
+				background-size: 100% 100%;
+				font-size: calc(100vw * 1 / 1920);
+				color: #a0b8e5;
+				text-align: center;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue
new file mode 100644
index 00000000..16caf934
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue
@@ -0,0 +1,93 @@
+<template>
+	<Card title="员工关怀">
+		<div class="bottom-left">
+			<!-- <div class="list-content">
+				<div class="list-detail" v-for="item in list" :key="item.id">
+					<div class="detail-pic">
+						<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
+					</div>
+					<div class="detail-text">
+						<div class="title">{{ item.title }}</div>
+						<div class="time">{{ item.grossTime }}</div>
+					</div>
+				</div>
+			</div> -->
+		</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+const list = reactive([
+	{
+		id: 1,
+		title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 2,
+		title: "学习贯彻习近平新时代中国特色社会主义",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 3,
+		title: "新时代中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 4,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 5,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	}
+]);
+</script>
+<style lang="scss" scoped>
+.bottom-left {
+	width: 100%;
+	height: 100%;
+	.list-content {
+		width: 95%;
+		height: 100%;
+		margin: 0 2% 0 5%;
+		overflow: scroll;
+		.list-detail {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 20%;
+			padding-top: 4%;
+			.detail-pic {
+				width: 13%;
+				height: 100%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.detail-text {
+				width: 100%;
+				margin-left: 2%;
+				.title {
+					width: 94%;
+					white-space: nowrap; //单行
+					overflow: hidden;
+					text-overflow: ellipsis;
+					font-size: calc(100vw * 14 / 1920);
+					color: #ffffff;
+				}
+				.time {
+					margin-top: 2%;
+					font-size: calc(100vw * 12 / 1920);
+					color: #a1accb;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue
new file mode 100644
index 00000000..2edb29bc
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue
@@ -0,0 +1,93 @@
+<template>
+	<Card title="学习讲话">
+		<div class="bottom-left">
+			<!-- <div class="list-content">
+				<div class="list-detail" v-for="item in list" :key="item.id">
+					<div class="detail-pic">
+						<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
+					</div>
+					<div class="detail-text">
+						<div class="title">{{ item.title }}</div>
+						<div class="time">{{ item.grossTime }}</div>
+					</div>
+				</div>
+			</div> -->
+		</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+const list = reactive([
+	{
+		id: 1,
+		title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 2,
+		title: "学习贯彻习近平新时代中国特色社会主义",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 3,
+		title: "新时代中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 4,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 5,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	}
+]);
+</script>
+<style lang="scss" scoped>
+.bottom-left {
+	width: 100%;
+	height: 100%;
+	.list-content {
+		width: 95%;
+		height: 100%;
+		margin: 0 2% 0 5%;
+		overflow: scroll;
+		.list-detail {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 20%;
+			padding-top: 4%;
+			.detail-pic {
+				width: 13%;
+				height: 100%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.detail-text {
+				width: 100%;
+				margin-left: 2%;
+				.title {
+					width: 94%;
+					white-space: nowrap; //单行
+					overflow: hidden;
+					text-overflow: ellipsis;
+					font-size: calc(100vw * 14 / 1920);
+					color: #ffffff;
+				}
+				.time {
+					margin-top: 2%;
+					font-size: calc(100vw * 12 / 1920);
+					color: #a1accb;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/index.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/index.vue
index ee0841d2..987643fb 100644
--- a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/index.vue
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/index.vue
@@ -1,7 +1,150 @@
 <template>
-	<div>智慧党建</div>
+	<div class="distribution-box">
+		<div class="top">
+			<div class="topLeft">
+				<div class="left-top">
+					<leftTop></leftTop>
+				</div>
+				<div class="left-center">
+					<left-center></left-center>
+				</div>
+			</div>
+			<div class="topCenter">
+				<topCenter></topCenter>
+			</div>
+			<div class="topRight">
+				<div class="right-top">
+					<rightTop></rightTop>
+					<div class="show-more" @click="openPeopleCountDialog(2)">更多</div>
+				</div>
+				<div class="right-center">
+					<rightCenter></rightCenter>
+					<div class="show-more" @click="openPeopleCountDialog(3)">更多</div>
+				</div>
+			</div>
+		</div>
+		<div class="bottom">
+			<div class="bottomLeft">
+				<BottomLeft></BottomLeft>
+				<div class="show-more" @click="openPeopleCountDialog(1)">更多</div>
+			</div>
+			<div class="bottomCenter">
+				<BottomCenter></BottomCenter>
+				<div class="show-more" @click="openPeopleCountDialog(5)">更多</div>
+			</div>
+			<div class="bottomRight">
+				<BottomRight></BottomRight>
+				<div class="show-more" @click="openPeopleCountDialog(6)">更多</div>
+			</div>
+		</div>
+		<party-build-dialog ref="partyBuildRef"></party-build-dialog>
+	</div>
 </template>
 
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+import rightTop from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue";
+import topCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue";
+import BottomLeft from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue";
+import BottomCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomCenter.vue";
+import BottomRight from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue";
 
-<style scoped></style>
+import rightCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightCenter.vue";
+import leftTop from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue";
+import leftCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue";
+
+import partyBuildDialog from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-build-dialog.vue";
+import { ref, reactive, onMounted, watch } from "vue";
+
+// 人员情况弹窗
+const partyBuildRef = ref();
+const openPeopleCountDialog = (type: any) => {
+	partyBuildRef.value.openDialog(type);
+	console.log(partyBuildRef.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.distribution-box {
+	width: 100%;
+	height: 100%;
+	.top {
+		height: 65%;
+		display: flex;
+		margin-bottom: 1%;
+		.topLeft {
+			width: 26%;
+			// background-color: orchid;
+			.left-top {
+				height: 43%;
+			}
+			.left-center {
+				height: 43%;
+				margin-top: 10%;
+			}
+		}
+		.topCenter {
+			margin: 0% 1%;
+			width: 45%;
+			height: 100%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2%;
+					padding-bottom: 1%;
+				}
+			}
+		}
+		.topRight {
+			width: 26%;
+			.right-top {
+				height: 43%;
+				position: relative;
+			}
+			.right-center {
+				height: 43%;
+				margin-top: 10%;
+				position: relative;
+			}
+		}
+	}
+	.bottom {
+		height: 30%;
+		display: flex;
+		.bottomLeft {
+			width: 26%;
+			position: relative;
+		}
+		.bottomCenter {
+			margin: 0% 1%;
+			width: 45%;
+			position: relative;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
+			.show-more {
+				position: absolute;
+				right: 3%;
+				top: 5%;
+				cursor: pointer;
+				font-size: calc(100vw * 12 / 1920);
+				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+				color: #4ac0f3;
+			}
+		}
+		.bottomRight {
+			width: 26%;
+			position: relative;
+		}
+	}
+}
+.show-more {
+	position: absolute;
+	right: 5%;
+	top: 5%;
+	cursor: pointer;
+	font-size: calc(100vw * 12 / 1920);
+	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+	color: #4ac0f3;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue
new file mode 100644
index 00000000..7b1088fb
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue
@@ -0,0 +1,11 @@
+<template>
+	<Card title="政治面貌">
+		<div class="bottom-center">111</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue
new file mode 100644
index 00000000..309e967f
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue
@@ -0,0 +1,11 @@
+<template>
+	<Card title="学习强国">
+		<div class="bottom-center">111</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-build-dialog.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-build-dialog.vue
new file mode 100644
index 00000000..5ee25102
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-build-dialog.vue
@@ -0,0 +1,125 @@
+<template>
+	<div class="list-detail" v-if="showDialog" @click="handleClick">
+		<div class="dialog-content">
+			<div class="dialog-title">
+				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
+				<div class="title-text">
+					<i>{{ dialogTitle }}</i>
+				</div>
+			</div>
+			<div class="close-icon" @click="showDialog = false">
+				<el-icon><Close /></el-icon>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from "vue";
+import textIcon from "@/assets/images/vehicleManagement/car.png";
+import { GlobalStore } from "@/stores";
+let showDialog = ref(false as any);
+
+function handleClick(event: any) {
+	console.log("点击", event.target.className);
+	if (event.target.className == "list-detail") {
+		showDialog.value = false;
+	}
+}
+let dialogTitle = ref("" as any);
+function openDialog(type: any) {
+	console.log(type);
+	showDialog.value = true;
+	if (type === 1) {
+		dialogTitle.value = "员工关怀";
+	}
+	if (type === 2) {
+		dialogTitle.value = "党建新闻";
+	}
+	if (type === 3) {
+		dialogTitle.value = "党员行动";
+	}
+	if (type === 4) {
+		dialogTitle.value = "政治面貌";
+	}
+	if (type === 5) {
+		dialogTitle.value = "党员风采";
+	}
+	if (type === 6) {
+		dialogTitle.value = "学习讲话";
+	}
+}
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+	openDialog
+});
+
+onMounted(async () => {});
+</script>
+
+<style lang="scss" scoped>
+.list-detail {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0%;
+	left: 0%;
+	background: rgba(7, 28, 49, 0.5);
+	z-index: 20;
+	.dialog-content {
+		position: absolute;
+		box-sizing: border-box;
+		padding: 1%;
+		left: 17%;
+		top: 21%;
+		width: 70%;
+		height: 60%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: calc(100vw * 18 / 1920);
+		}
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			font-size: calc(100vw * 18 / 1920);
+			font-family: "OPPOSans-Bold";
+			display: flex;
+			align-items: center;
+			.title-img {
+				width: 3%;
+				height: 3%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.title-text {
+				margin-left: 1%;
+			}
+		}
+	}
+}
+.notoDta {
+	top: 73%;
+	width: 12%;
+	left: 44%;
+	position: absolute;
+	img {
+		width: 40%;
+		margin: 5% 30%;
+	}
+	p {
+		color: #fff;
+		font-size: calc(100vw * 14 / 1920);
+		margin: -6% 37%;
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightCenter.vue
new file mode 100644
index 00000000..721e64f4
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightCenter.vue
@@ -0,0 +1,95 @@
+<template>
+	<Card title="党员行动">
+		<div class="bottom-center">
+			<el-carousel indicator-position="none" pause-on-hover arrow="hover">
+				<el-carousel-item v-for="item in list" :key="item.id">
+					<div class="content-box">
+						<div class="float-window">
+							<div style="margin-left: 3%">{{ item.title }}</div>
+							<div style="margin-right: 3%">{{ item.grossTime }}</div>
+						</div>
+					</div>
+				</el-carousel-item>
+			</el-carousel>
+		</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+// import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+const list = reactive([
+	{
+		id: 1,
+		title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 2,
+		title: "学习贯彻习近平新时代中国特色社会主义",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 3,
+		title: "新时代中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 4,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 5,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	}
+]);
+</script>
+<style lang="scss" scoped>
+.bottom-center {
+	width: 100%;
+	height: 100%;
+	//调整走马灯箭头-左箭头
+	:deep(.el-carousel__arrow--left) {
+		width: 5%;
+		height: 20%;
+		background: rgba(5, 18, 32, 0.7);
+		top: 30%;
+		left: 0%;
+		font-size: calc(100vw * 16 / 1920);
+		border-radius: 0%;
+		color: #a8a8a8;
+	}
+	//右箭头
+	:deep(.el-carousel__arrow--right) {
+		width: 5%;
+		height: 20%;
+		background: rgba(5, 18, 32, 0.7);
+		border-radius: 0%;
+		top: 30%;
+		right: 0%;
+		font-size: calc(100vw * 16 / 1920);
+		color: #a8a8a8;
+	}
+}
+.content-box {
+	width: 100%;
+	height: 72%;
+	background: url("@/assets/images/smartPartyBuilding/testPic.png") no-repeat;
+	background-size: 100% 100%;
+	position: relative;
+	.float-window {
+		position: absolute;
+		bottom: 0%;
+		width: 100%;
+		padding: 2% 0%;
+		color: #ffffff;
+		font-size: calc(100vw * 12 / 1920);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: rgba(5, 18, 32, 0.7);
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue
new file mode 100644
index 00000000..8281178d
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue
@@ -0,0 +1,93 @@
+<template>
+	<Card title="党建新闻">
+		<div class="bottom-left">
+			<!-- <div class="list-content">
+				<div class="list-detail" v-for="item in list" :key="item.id">
+					<div class="detail-pic">
+						<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
+					</div>
+					<div class="detail-text">
+						<div class="title">{{ item.title }}</div>
+						<div class="time">{{ item.grossTime }}</div>
+					</div>
+				</div>
+			</div> -->
+		</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+const list = reactive([
+	{
+		id: 1,
+		title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 2,
+		title: "学习贯彻习近平新时代中国特色社会主义",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 3,
+		title: "新时代中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 4,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	},
+	{
+		id: 5,
+		title: "中国特色社会主义思想主题教育深入",
+		grossTime: "2023-01-01 12:00:00"
+	}
+]);
+</script>
+<style lang="scss" scoped>
+.bottom-left {
+	width: 100%;
+	height: 100%;
+	.list-content {
+		width: 95%;
+		height: 100%;
+		margin: 0 2% 0 5%;
+		overflow: scroll;
+		.list-detail {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 20%;
+			padding-top: 4%;
+			.detail-pic {
+				width: 13%;
+				height: 100%;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.detail-text {
+				width: 100%;
+				margin-left: 2%;
+				.title {
+					width: 94%;
+					white-space: nowrap; //单行
+					overflow: hidden;
+					text-overflow: ellipsis;
+					font-size: calc(100vw * 14 / 1920);
+					color: #ffffff;
+				}
+				.time {
+					margin-top: 2%;
+					font-size: calc(100vw * 12 / 1920);
+					color: #a1accb;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue
new file mode 100644
index 00000000..4d2fbe5e
--- /dev/null
+++ b/src/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue
@@ -0,0 +1,16 @@
+<template>
+	<Card title="宣传视频">
+		<div class="top-center">111</div>
+	</Card>
+</template>
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+</script>
+<style lang="scss" scoped>
+.top-center {
+	width: 100%;
+	height: 100%;
+}
+</style>
diff --git a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomLeft.vue b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomLeft.vue
index 202e76a8..b2c59539 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomLeft.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomLeft.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card title="历史告警趋势">
 		<div class="topLeftBox">
-			<div class="content">
+			<div class="history-content">
 				<div class="selectRight">
 					<div class="rightHeader">
 						<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
@@ -98,7 +98,7 @@ function initOption() {
 			top: "20%",
 			left: "6%",
 			right: "4%",
-			bottom: "7%"
+			bottom: "18%"
 			// containLabel: true
 		},
 		xAxis: [
@@ -266,8 +266,8 @@ onBeforeUnmount(async () => {
 			margin-left: 6%;
 		}
 	}
-	.content {
-		height: 85%;
+	.history-content {
+		height: 100%;
 		background: url("@/assets/images/cardImg.png") no-repeat;
 		background-size: 100% 100%;
 		position: relative;
diff --git a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
index 2ac81c4d..4276a10b 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
@@ -265,7 +265,7 @@ onMounted(async () => {});
 		}
 	}
 	.content {
-		height: 88%;
+		height: 95%;
 		width: 100%;
 		margin-top: 10px;
 		background: url("@/assets/images/cardImg.png") no-repeat;
diff --git a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/index.vue b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/index.vue
index 03e0638b..872796c9 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/index.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/index.vue
@@ -59,9 +59,19 @@ export default {
 		.bottomLeft {
 			width: 50%;
 			margin-right: 1%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
 		}
 		.bottomRight {
 			width: 50%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
 		}
 	}
 }
diff --git a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topLeft.vue b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topLeft.vue
index 250daac0..991d1417 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topLeft.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topLeft.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card title="今日告警趋势">
 		<div class="topLeftBox">
-			<div class="content">
+			<div class="today-content">
 				<!-- <div class="selectRight">
 				<el-select v-model="value" class="m-2" placeholder="Select" size="small" @change="selectChange">
 					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
@@ -264,9 +264,9 @@ onBeforeUnmount(async () => {
 			margin-left: 6%;
 		}
 	}
-	.content {
+	.today-content {
 		margin-top: 10px;
-		height: 90%;
+		height: 100%;
 		background: url("@/assets/images/cardImg.png") no-repeat;
 		background-size: 100% 100%;
 		.selectRight {
diff --git a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/bottomCenter.vue b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/bottomCenter.vue
index 13c36411..d278c996 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/bottomCenter.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/bottomCenter.vue
@@ -170,7 +170,7 @@ onMounted(async () => {});
 		}
 	}
 	.content {
-		height: 88%;
+		height: 100%;
 		width: 100%;
 		margin-top: 10px;
 		background: url("@/assets/images/cardImg.png") no-repeat;
diff --git a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue
index 1828a23c..47ab4b51 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/index.vue
@@ -2,24 +2,24 @@
 	<div class="distribution-box">
 		<div class="top">
 			<div class="topLeft">
-				<!-- <TopLeft></TopLeft> -->
+				<TopLeft></TopLeft>
 			</div>
 			<div class="topCenter">
-				<!-- <TopCenter></TopCenter> -->
+				<TopCenter></TopCenter>
 			</div>
 			<div class="topRight">
-				<!-- <TopRight></TopRight> -->
+				<TopRight></TopRight>
 			</div>
 		</div>
 		<div class="bottom">
 			<div class="bottomLeft">
-				<!-- <BottomLeft></BottomLeft> -->
+				<BottomLeft></BottomLeft>
 			</div>
 			<div class="bottomCenter">
-				<!-- <BottomCenter></BottomCenter> -->
+				<BottomCenter></BottomCenter>
 			</div>
 			<div class="bottomRight">
-				<!-- <BottomRight></BottomRight> -->
+				<BottomRight></BottomRight>
 			</div>
 		</div>
 	</div>
@@ -52,6 +52,11 @@ export default {
 		.topCenter {
 			margin: 0% 1%;
 			width: 45%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
 		}
 		.topRight {
 			width: 26%;
@@ -66,6 +71,11 @@ export default {
 		.bottomCenter {
 			margin: 0% 1%;
 			width: 45%;
+			:deep(.h-card) {
+				.content {
+					margin-top: 2% !important;
+				}
+			}
 		}
 		.bottomRight {
 			width: 26%;
diff --git a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topCenter.vue b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topCenter.vue
index 4994c7da..d30268cf 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topCenter.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topCenter.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card title="实时过磅">
 		<div class="center-bottom">
-			<!-- <div class="realtime-data">
+			<div class="realtime-data">
 				<div class="realtime-box" v-for="item in list" :key="item.id">
 					<div class="text">今日过磅</div>
 					<div class="num">23<span> kg</span></div>
@@ -16,7 +16,7 @@
 					<div class="num">23kg</div>
 					<div class="text">本次过磅数</div>
 				</div>
-			</div> -->
+			</div>
 		</div>
 	</Card>
 </template>
diff --git a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue
index 52c218db..ff5e81e4 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue
@@ -19,6 +19,11 @@ import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
 import * as echarts from "echarts";
 import { onMounted, reactive, ref } from "vue";
 import Card from "@/components/card.vue";
+import firstIcon from "@/assets/images/loadometerManage/first.png";
+import secondIcon from "@/assets/images/loadometerManage/second.png";
+import thirdIcon from "@/assets/images/loadometerManage/third.png";
+import fourthIcon from "@/assets/images/loadometerManage/fourth.png";
+
 const store = GlobalStore();
 const airType = ref(1);
 // 选中
@@ -49,11 +54,11 @@ const airTypeEchart = ref([
 	"某某某有限公司8",
 	"某某某有限公司9"
 ]);
-const airTypeData = ref([100, 99, 89, 69, 50, 39, 35, 25, 20]);
+const airTypeData = ref([100, 89, 79, 69, 50, 39, 35, 25, 20]);
 const option = reactive({
 	grid: {
 		left: "0%",
-		right: "5%",
+		right: "0%",
 		bottom: "0%",
 		top: "5%",
 		containLabel: true
@@ -72,19 +77,11 @@ const option = reactive({
 				show: true,
 				inside: true,
 				verticalAlign: "bottom",
-				padding: [0, 0, 10, 0],
+				padding: [0, 0, 8, 30],
 				lineHeight: "20",
 				textStyle: {
 					color: "#FFFFFF",
 					fontSize: "14"
-				},
-				formatter: function (val, index) {
-					console.log("val", val, index);
-					if (index === 0 || index === 1 || index === 2) {
-						return index + 1 + " " + val;
-					} else {
-						return val;
-					}
 				}
 			},
 			splitLine: {
@@ -104,17 +101,27 @@ const option = reactive({
 			axisLine: "none",
 			axisLabel: {
 				inside: true,
-				verticalAlign: "bottom",
-				padding: [0, 0, 10, 50],
+				padding: [0, 0, 20, 30],
 				lineHeight: "20",
 				textStyle: {
 					color: "#FFFFFF",
 					fontSize: "12"
+				},
+				formatter: function (val: any, index: any) {
+					if (index < 3) {
+						return `{color1|${val}}`;
+					} else {
+						return `{color2|${val}}`;
+					}
+				},
+				rich: {
+					color1: {
+						color: "#EEA959"
+					},
+					color2: {
+						color: "#A0B8E5"
+					}
 				}
-				// formatter: function (val, index) {
-				// 	// console.log("val", val, index);
-				// 	return val + " %";
-				// }
 			},
 			data: airTypeData.value
 		},
@@ -137,27 +144,94 @@ const option = reactive({
 			},
 			barGap: "-100%",
 			label: {
-				show: false,
-				// position:'right',
-				// formatter:'{@score}%',
-				textStyle: {
-					color: "#03fcfe",
-					fontSize: "12"
+				normal: {
+					color: "#FFFFFF",
+					show: true,
+					position: [0, "-24px"],
+					textStyle: {
+						fontSize: 16
+					},
+					formatter: function (a) {
+						let num = "";
+						let str = "";
+						if (a.dataIndex + 1 < 10) {
+							// num = "No." + (a.dataIndex + 1);
+						} else {
+							// num = a.dataIndex + 1;
+						}
+						if (a.dataIndex === 0) {
+							str = `{color1|${num}}`;
+						} else if (a.dataIndex === 1) {
+							str = `{color2|${num}}`;
+						} else if (a.dataIndex === 2) {
+							str = `{color3|${num}}`;
+						} else {
+							str = `{color4|${a.dataIndex + 1}}`;
+						}
+						return str;
+					},
+					rich: {
+						color1: {
+							width: 30,
+							height: 20,
+							backgroundColor: {
+								image: firstIcon
+							}
+						},
+						color2: {
+							width: 30,
+							height: 20,
+							backgroundColor: {
+								image: secondIcon
+							}
+						},
+						color3: {
+							width: 30,
+							height: 20,
+							backgroundColor: {
+								image: thirdIcon
+							}
+						},
+						color4: {
+							align: "center",
+							color: "#FFFFFF",
+							backgroundColor: {
+								image: fourthIcon
+							}
+						}
+					}
 				}
 			},
 			itemStyle: {
 				normal: {
 					barBorderRadius: 10,
-					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-						{
-							offset: 0,
-							color: "#194077"
-						},
-						{
-							offset: 1,
-							color: "#4CC4F8"
+					color: (val: any) => {
+						if (val.dataIndex < 3) {
+							let topColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0,
+									color: "rgba(238, 169, 89, 0)"
+								},
+								{
+									offset: 1,
+									color: "rgba(238, 169, 89, 1)"
+								}
+							]);
+							return topColor;
+						} else {
+							let nowColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+								{
+									offset: 0,
+									color: "#194077"
+								},
+								{
+									offset: 1,
+									color: "#4CC4F8"
+								}
+							]);
+							return nowColor;
 						}
-					])
+					}
 				}
 			},
 			barWidth: 2,
@@ -174,7 +248,7 @@ const option = reactive({
 			itemStyle: {
 				normal: {
 					borderColor: "#fff",
-					borderWidth: 4,
+					borderWidth: 3,
 					color: "#fff",
 					opacity: 1
 				}
@@ -188,13 +262,12 @@ const option = reactive({
 			yAxisIndex: 0,
 			data: [0, 0, 0, 0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
 			label: false,
-			symbolSize: 15,
+			symbolSize: 16,
 			itemStyle: {
 				normal: {
-					borderColor: "#4CC4F8",
-					borderWidth: 2,
-					color: "#14346c",
-					opacity: 1
+					borderColor: "#FFFFFF",
+					borderWidth: 1,
+					color: "#14346c"
 				}
 			},
 			z: 2