update alert list

src/pages/AlertListPage.vue

@@ -2,6 +2,7 @@
 <script setup>
 import { ref } from "vue";
 import { useWsStore } from "../store";
+import Container from "../components/Base/Container.vue";
 const alarmList = ref([]);
 const store = useWsStore();
 
@@ -28,7 +29,7 @@ store.$subscribe((mutation, state) => {
 
 <template>
   <div class="alert-list-page">
-    <div class="alert-list">
+    <Container class="alert-list" title="报警列表" icon="cube">
       <div class="alert-list__table" style="">
         <el-table
           class="dark-table"
@@ -40,12 +41,12 @@ store.$subscribe((mutation, state) => {
           <el-table-column
             prop="eqName"
             label="设备名"
-            width="90"
+            width="78"
           ></el-table-column>
           <el-table-column
             prop="eqIndex"
             label="序号"
-            width="60"
+            width="56"
           ></el-table-column>
           <el-table-column
             prop="alarmGrade"
@@ -61,7 +62,7 @@ store.$subscribe((mutation, state) => {
         </el-table>
       </div>
       <button class="alert-btn">忽略</button>
-    </div>
+    </Container>
   </div>
 </template>
 
@@ -109,12 +110,12 @@ store.$subscribe((mutation, state) => {
 }
 
 .alert-list {
-  height: 100%;
-  width: 480px;
+  height: calc(100% - 56px);
+  width: 520px;
 
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 15px;
+  right: 32px;
 
   display: flex;
   flex-direction: column;
@@ -122,7 +123,7 @@ store.$subscribe((mutation, state) => {
 
 .alert-list__table {
   height: calc(100% - 72px);
-  background: linear-gradient(to right, transparent, #0ba6ff80);
+  /* background: linear-gradient(to right, transparent, #0ba6ff80); */
 }
 
 .alert-list__table >>> .el-table__inner-wrapper::before {
@@ -137,6 +138,7 @@ button {
 }
 
 .alert-btn {
+  width: 100%;
   height: 72px;
   background: #0f04;
   color: #fff;