diff --git a/web/src/App.vue b/web/src/App.vue
index 66225b6fa089a1210b25747eeb2a209da3873f4a..5cb433a59705547f2df2d396d4ff6ace794d4182 100755
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,61 +1,62 @@
 <template>
-  <div class="top_area_div">
-    <div class="top_area_inner_div">
-      <el-dropdown>
-        <span class="dropdown">
-          <el-icon><Menu /></el-icon>业务<el-icon class="el-icon--right"><arrow-down /></el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="switch_multi_topo">全局网络拓扑</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-
-      <el-dropdown>
-        <span class="dropdown">
-          <el-icon><Monitor /></el-icon>机器<el-icon class="el-icon--right"><arrow-down /></el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="switch_single_topo(node)" v-for="node in node_list">{{ node.id }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-
-      <el-dropdown>
-        <span class="dropdown">
-          <el-icon><Setting /></el-icon>设置<el-icon class="el-icon--right"><arrow-down /></el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item>编辑业务</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-
-      <div :style="{ display: 'flex', 'align-items': 'center' }">
-        <span class="dropdown">
-            <el-icon><Setting /></el-icon>时间<el-icon class="el-icon--right"></el-icon>
-        </span>
-        <el-date-picker v-model="dateRange" type="datetimerange" :shortcuts="pickerOptions" range-separator="to"
-          start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate" size="small">
-        </el-date-picker>
-      </div>
-
-      <el-dropdown>
-        <span class="dropdown">
-          <el-icon><Aim /></el-icon>时间间隔<el-icon class="el-icon--right"><arrow-down /></el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item v-for="interval in interval_list">{{ interval }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </div>
-  <RouterView />
+  <header>
+    <el-dropdown>
+      <span class="dropdown">
+        <el-icon><Menu /></el-icon>业务<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="switch_multi_topo">全局网络拓扑</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <el-dropdown>
+      <span class="dropdown">
+        <el-icon><Monitor /></el-icon>机器<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="switch_single_topo(node)" v-for="node in node_list">{{ node.id }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <el-dropdown>
+      <span class="dropdown">
+        <el-icon><Setting /></el-icon>设置<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item>编辑业务</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <el-dropdown>
+      <span class="dropdown">
+        <el-icon><Aim /></el-icon>时间间隔<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="interval in interval_list">{{ interval }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <el-dropdown>
+      <span class="dropdown">
+        <el-icon><MagicStick /></el-icon>模式<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item >亮色</el-dropdown-item>
+          <el-dropdown-item >黑暗</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+</header>
+  <RouterView/>
 
 </template>
 
@@ -68,7 +69,6 @@ import { useLayoutStore } from '@/stores/charts';
 import { pickerOptions } from '@/utils/datePicker';
 
 const node_list = reactive<any>([])
-const time_list = reactive<any>(["1699595594", "1699595668", "1699595751"])
 const interval_list = reactive<any>(["关闭", "5s", "10s", "15s", "1m", "5m"])
 
 let dateRange = ref([new Date() as any - 2 * 60 * 60 * 1000, new Date() as any - 0])
@@ -95,14 +95,14 @@ onMounted(async () => {
 async function updateNodeList() {
   //ttcode
   // const data = {
-				// 	"code":  0,
-				// 	"error": null,
-				// 	"data": 
-							// 		{"agentlist": {"070cb0b4-c415-4b6a-843b-efc51cff6b76": "10.44.55.66:9992"}}
-        //   }
+					// 	"code":  0,
+					// 	"error": null,
+					// 	"data": 
+									// 		{"agentlist": {"070cb0b4-c415-4b6a-843b-efc51cff6b76": "10.44.55.66:9992"}}
+          //   }
 	
   const data = await topo.host_list()
-  // console.log(data);
+// console.log(data);
   for (let key in data.data.agentlist) {
     node_list.push({
       id: key,
@@ -124,57 +124,39 @@ function switch_single_topo(node: any) {
   })
 }
 
-// 选择展示时间范围
-const changeDate = (value: number[]) => {
-  if (value) {
-    startTime.value = (new Date(value[0]) as any) / 1000;
-    endTime.value = (new Date(value[1]) as any) / 1000;
-  } else {
-    startTime.value = (new Date() as any) / 1000 - 60 * 60 * 2;
-    endTime.value = (new Date() as any) / 1000;
-  }
-}
-
 </script>
 
 <style scoped>
 header {
-  line-height: 1.5;
+  /* line-height: 1.5;
   max-height: 100vh;
   place-items: center;
-  padding-right: calc(var(--section-gap) / 2);
-}
+  padding-right: calc(var(--section-gap) / 2); */
 
-.top_area_div {
   width: 100%;
   height: 5%;
   position: relative;
   display: flex;
-  justify-content:center;
+  justify-content: center;
   background-color: #cfcaca;
 }
 
-.top_area_inner_div {
-  display: flex;
-  justify-content: space-between;
-
-}
-
-.top_area_inner_div > div {
+header > div {
   margin-right: 20px;
 }
 
-.top_area_inner_div > div:last-child {
+header > div:last-child {
   margin-right: 0;
 }
 
 .dropdown {
-    font-size: medium;
-    cursor: pointer;
-    color:rgb(79, 104, 104);
-    display:flex;
-    outline-style: none;
+  font-size: medium;
+  cursor: pointer;
+  color:rgb(79, 104, 104);
+  display:flex;
+  outline-style: none;
 
-    align-items: center;
+  align-items: center;
   }
+
 </style>