diff --git a/src/views/commandScreen/commandCenter/leftTop.vue b/src/views/commandScreen/commandCenter/leftTop.vue
index 18da178..cf1d3e5 100644
--- a/src/views/commandScreen/commandCenter/leftTop.vue
+++ b/src/views/commandScreen/commandCenter/leftTop.vue
@@ -5,7 +5,7 @@
 				人员履职情况分析
 			</div>
 			<div class="hRight">
-				<el-date-picker style="width: 85%" v-model="value1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size"/>
+				<el-date-picker style="width: 85%" v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"/>
 			</div>
 		</div>
 		<div class="content">
@@ -47,6 +47,7 @@ import { getStageOption } from "@/api/modules/projectOverview";
 import type { TabsPaneContext } from 'element-plus'
 
 const activeName = ref('first')
+let dateRange = ref([] as any)
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
@@ -185,4 +186,23 @@ onMounted( async () => {
 
 	}
 }
+::v-deep .el-input__inner {
+	color: #fff;
+}
+::v-deep .el-select .el-input .el-select__caret {
+	color: #fff;
+}
+::v-deep .el-input__wrapper {
+	width: 85%;
+	height: 0%;
+	background: #0d2956;
+}
+::v-deep .el-range-separator {
+	color: #ccc;
+	font-size: 10px;
+}
+::v-deep .el-range-input {
+	color: #ccc;
+	font-size: 10px;
+}
 </style>
diff --git a/src/views/commandScreen/commandCenter/rightAll.vue b/src/views/commandScreen/commandCenter/rightAll.vue
index 5e1fbb1..5006269 100644
--- a/src/views/commandScreen/commandCenter/rightAll.vue
+++ b/src/views/commandScreen/commandCenter/rightAll.vue
@@ -5,7 +5,7 @@
 				隐患统计智能分析
 			</div>
 			<div class="hRight">
-				<el-date-picker style="width: 85%" v-model="value1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size"/>
+				<el-date-picker style="width: 85%" v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"/>
 			</div>
 		</div>
 		<div class="content">
@@ -59,12 +59,16 @@
 import Card from "@/components/card.vue";
 import { onMounted, ref } from "vue";
 import { GlobalStore } from "@/stores";
+import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue";
+import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
 const store = GlobalStore();
 import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
 import * as echarts from "echarts";
 const echartsTest = ref();
 let questionTotal = ref(0 as any);
 
+let dateRange = ref([] as any);
+
 let majorDangerCount = ref(20 as any);
 let majorDangerRate = ref(50 as any);
 let overdueMajorDangerCount = ref(20 as any);
@@ -460,11 +464,11 @@ onMounted(async () => {
 			margin-top: 10px;
 			width: 100%;
 			height: 25%;
-			background-color: darkblue;
 			.ctHead{
+				background-color: #002f69;
 				padding-bottom: 5px;
 				color: #fff;
-				height: 20%;
+				height: 15%;
 				font-size: 16px;
 				display: flex;
 				justify-content: center;
@@ -475,18 +479,18 @@ onMounted(async () => {
 				}
 			}
 			.ctContent{
-				height: 80%;
-				background-color: darkred;
+				height: 85%;
+				// background-color: darkred;
 			}
 		}
 		.contentMiddle{
 			width: 100%;
 			height: 25%;
-			background-color: darkblue;
 			.cmHead{
+				background-color: #002f69;
 				padding-bottom: 5px;
 				color: #fff;
-				height: 20%;
+				height: 15%;
 				font-size: 16px;
 				display: flex;
 				justify-content: center;
@@ -497,8 +501,8 @@ onMounted(async () => {
 				}
 			}
 			.cmContent{
-				height: 80%;
-				background-color: darkred;
+				height: 85%;
+				// background-color: darkred;
 			}
 		}
 		.contentBottom{
@@ -585,10 +589,24 @@ onMounted(async () => {
 		}
 	}
 }
-::v-deep .h-card .content {
-	height: 80%;
+
+::v-deep .el-input__inner {
+	color: #fff;
 }
-::v-deep .h-card {
-	position: relative;
+::v-deep .el-select .el-input .el-select__caret {
+	color: #fff;
+}
+::v-deep .el-input__wrapper {
+	width: 85%;
+	height: 0%;
+	background: #0d2956;
+}
+::v-deep .el-range-separator {
+	color: #ccc;
+	font-size: 10px;
+}
+::v-deep .el-range-input {
+	color: #ccc;
+	font-size: 10px;
 }
 </style>
diff --git a/src/views/commandScreen/commandCenter/rightPage/rightCenter.vue b/src/views/commandScreen/commandCenter/rightPage/rightCenter.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/commandScreen/commandCenter/rightPage/rightTop.vue b/src/views/commandScreen/commandCenter/rightPage/rightTop.vue
new file mode 100644
index 0000000..e44a9ef
--- /dev/null
+++ b/src/views/commandScreen/commandCenter/rightPage/rightTop.vue
@@ -0,0 +1,43 @@
+<template>
+	<div class="rightTop">
+		
+	</div>
+</template>
+
+<script setup lang="ts">
+import { GlobalStore } from "@/stores";
+import { ref, onMounted, watch } from "vue";
+import { getStageOption } from "@/api/modules/projectOverview";
+import type { TabsPaneContext } from 'element-plus'
+
+
+onMounted( async () => {
+	
+})
+</script>
+<style lang="scss" scoped>
+
+.rightTop {
+	margin-top: 10px;
+	width: 100%;
+	height: 25%;
+	.ctHead{
+		background-color: #002f69;
+		padding-bottom: 5px;
+		color: #fff;
+		height: 15%;
+		font-size: 16px;
+		display: flex;
+		justify-content: center;
+		align-items: flex-end;
+		text{
+			font-size: 24px;
+			color: #fc4c4c;
+		}
+	}
+	.ctContent{
+		height: 85%;
+		// background-color: darkred;
+	}
+}
+</style>