update css

frontend/src/App.vue

@@ -2,7 +2,7 @@
   <div class="common-layout">
     <el-container style="height: 100vh">
       <el-header>
-        <el-menu :default-active="activeIndex" class="el-menu-demo pl-20" mode="horizontal">
+        <el-menu :default-active="activeIndex" class="el-menu-demo pl-20 bg-blueGray-2 custom-menu" mode="horizontal">
           <el-menu-item index="index">
             <router-link to="/"> 首页 </router-link>
           </el-menu-item>
@@ -65,4 +65,13 @@ onMounted(async () => {
   align-items: stretch;
   background-color: #f4f4f4;
 }
+.custom-menu {
+  display: flex;
+  justify-content: center;
+  
+}
+.custom-menu .el-menu-item{
+  font-size: 18px;
+}
+
 </style>

frontend/src/components/home/Chat.vue

 <template>
-  <div class="w-48% float-left border-solid border-black border-1">
-    <el-scrollbar ref="scrollbarRef" style="height: 34rem;" class="mb-10" always>
+  <div class="w-48% float-left border-solid border-bluegray border-2">
+    <el-scrollbar ref="scrollbarRef" style="height: 34rem;" class="mb-10 " always>
       <div ref="innerRef">
         <p v-for="item in items" :key="item" class="scrollbar-demo-item text-sm">
         <div>{{ JSON.parse(item)?.ts }}</div>
@@ -10,11 +10,11 @@
     </el-scrollbar>
 
     <div>
-      <el-button class="ml-4" @click="showCmdDialog">发送指令</el-button>
+      <el-button  type="primary" round class="ml-4 mb-2" @click="showCmdDialog">发送指令</el-button>
     </div>
   </div>
 
-  <div class="w-50% float-right border-solid border-black border-1">
+  <div class="w-50% float-right border-solid border-bluegray border-2">
     <el-tabs v-model="activeName" class="px-5">
       <el-tab-pane label="设备" name="device">
         <el-scrollbar style="height: 30rem;" class="mb-10" always>
@@ -28,7 +28,7 @@
             :type="activeName==='device'?'1': '2'"
             @delete-table="deleteDeviceInfo(param)" />
         </el-scrollbar>
-        <el-button @click="dialogVisible = true">添加监控设备表</el-button>
+        <el-button class="mb-2"  type="primary" round @click="dialogVisible = true">添加监控设备表</el-button>
       </el-tab-pane>
       <el-tab-pane label="虚拟设备" name="simulateDevice">
         <el-scrollbar style="height: 30rem;" class="mb-10" always>
@@ -42,7 +42,7 @@
             :type="activeName==='device'?'1': '2'"
             @delete-table="deleteDeviceInfo(param)" />
         </el-scrollbar>
-        <el-button @click="dialogVisible = true">添加监控设备表</el-button>
+        <el-button class="mb-2"  type="primary" round @click="dialogVisible = true">添加监控设备表</el-button>
       </el-tab-pane>
     </el-tabs>
   </div>