From ca23283c6e32fa3ae220aed992a7a9d38effe7a1 Mon Sep 17 00:00:00 2001
From: kongduo <2214111382@qq.com>
Date: Thu, 11 Jun 2026 18:45:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |  18 +-
 src/App.vue                                   |   6 +-
 src/pinia/modules/app.js                      |   4 +-
 src/pinia/modules/user.js                     |   5 +-
 src/style/element/index.scss                  |   2 +-
 src/style/element_visiable.scss               | 360 +++++++++++-
 src/style/main.scss                           | 543 +++++++++++++++++-
 src/utils/format.js                           |  13 +
 src/utils/request.js                          |   6 +
 src/view/dashboard/components/card.vue        |  82 ++-
 .../detail/components/info/index.vue          |  24 +-
 .../detail/components/line/index.vue          |  53 +-
 .../detail/components/trend/index.vue         | 160 ++++--
 .../list/components/detail/index.vue          |  49 +-
 .../equipment/list/components/list/index.vue  | 120 ++--
 src/view/layout/aside/combinationMode.vue     |   6 +-
 src/view/layout/aside/headMode.vue            |   2 +-
 src/view/layout/aside/normalMode.vue          |   4 +-
 src/view/layout/aside/sidebarMode.vue         |   6 +-
 src/view/layout/header/index.vue              |   6 +-
 src/view/layout/index.vue                     |  56 +-
 src/view/layout/tabs/index.vue                |  85 ++-
 src/view/login/index.vue                      | 133 ++++-
 src/view/person/person.vue                    |  58 +-
 src/view/securityControl/alarmList/index.vue  |  79 ++-
 vite.config.js                                |   8 +
 26 files changed, 1656 insertions(+), 232 deletions(-)

diff --git a/index.html b/index.html
index b5e5c55..53a5ff6 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,8 @@
       }
       body {
         margin: 0;
-        --64f90c3645474bd5: #409eff;
+        background: #020617;
+        --64f90c3645474bd5: #00d4ff;
       }
       #gva-loading-box {
         position: relative;
@@ -28,6 +29,11 @@
         justify-content: center;
         height: 100vh;
         width: 100vw;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 12% 10%, rgba(0, 212, 255, 0.16), transparent 28%),
+          radial-gradient(circle at 86% 6%, rgba(245, 158, 11, 0.1), transparent 22%),
+          linear-gradient(135deg, #020617 0%, #07111f 52%, #0f172a 100%);
       }
       #loading-text {
         position: absolute;
@@ -35,8 +41,11 @@
         left: 0;
         width: 100%;
         text-align: center;
-        color: #666;
+        color: #67e8f9;
         font-size: 14px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-shadow: 0 0 12px rgba(0, 212, 255, 0.38);
       }
       #loading {
         position: absolute;
@@ -55,6 +64,7 @@
         width: 50px;
         height: 50px;
         background: var(--64f90c3645474bd5);
+        box-shadow: 0 0 22px rgba(0, 212, 255, 0.58);
         animation: animate 0.5s linear infinite;
         position: absolute;
         top: 0;
@@ -82,8 +92,8 @@
       #shadow {
         width: 50px;
         height: 5px;
-        background: #000;
-        opacity: 0.1;
+        background: #67e8f9;
+        opacity: 0.28;
         position: absolute;
         top: 59px;
         left: 0;
diff --git a/src/App.vue b/src/App.vue
index dd3e5ec..7124144 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="bg-gray-50 text-slate-700 !dark:text-slate-500 dark:bg-slate-800">
+  <div id="app" class="gva-tech-app">
     <el-config-provider :locale="zhCn">
       <router-view />
       <Application />
@@ -19,8 +19,12 @@
 </script>
 <style lang="scss">
   // 引入初始化样式
+  html,
+  body,
   #app {
+    min-height: 100%;
     height: 100vh;
+    height: 100svh;
     overflow: hidden;
     font-weight: 400 !important;
   }
diff --git a/src/pinia/modules/app.js b/src/pinia/modules/app.js
index f69af14..0f6c091 100644
--- a/src/pinia/modules/app.js
+++ b/src/pinia/modules/app.js
@@ -10,7 +10,7 @@ export const useAppStore = defineStore('app', () => {
   const config = reactive({
     weakness: false,
     grey: false,
-    primaryColor: '#3b82f6',
+    primaryColor: '#00d4ff',
     showTabs: true,
     darkMode: import.meta.env.MODE === 'production' ? 'dark' : 'auto',
     layout_side_width: 256,
@@ -102,7 +102,7 @@ export const useAppStore = defineStore('app', () => {
   const baseCoinfg = {
     weakness: false,
     grey: false,
-    primaryColor: '#3b82f6',
+    primaryColor: '#00d4ff',
     showTabs: true,
     darkMode: import.meta.env.MODE === 'production' ? 'dark' : 'auto',
     layout_side_width: 256,
diff --git a/src/pinia/modules/user.js b/src/pinia/modules/user.js
index e387865..a69feca 100644
--- a/src/pinia/modules/user.js
+++ b/src/pinia/modules/user.js
@@ -65,7 +65,10 @@ export const useUserStore = defineStore('user', () => {
     try {
       loadingInstance.value = ElLoading.service({
         fullscreen: true,
-        text: '登录中，请稍候...'
+        lock: true,
+        text: '登录中，请稍候...',
+        background: 'rgba(2, 8, 23, 0.82)',
+        customClass: 'gva-tech-loading'
       })
 
       const res = await login(loginInfo)
diff --git a/src/style/element/index.scss b/src/style/element/index.scss
index 0c2de8d..3657be5 100644
--- a/src/style/element/index.scss
+++ b/src/style/element/index.scss
@@ -3,7 +3,7 @@
     'white': #ffffff,
     'black': #000000,
     'primary': (
-      'base': #4d70ff
+      'base': #00d4ff
     ),
     'success': (
       'base': #67c23a
diff --git a/src/style/element_visiable.scss b/src/style/element_visiable.scss
index 6c9bbff..2252551 100644
--- a/src/style/element_visiable.scss
+++ b/src/style/element_visiable.scss
@@ -1,14 +1,14 @@
 @use '@/style/main.scss';
 @use '@/style/reset';
 
-
 .el-button {
-  font-weight: 400;
-  border-radius: 2px;
+  font-weight: 600;
+  border-radius: 999px;
 }
 
 .gva-pagination {
   @apply flex justify-end;
+
   .el-pagination__editor {
     .el-input__inner {
       @apply h-8;
@@ -45,12 +45,331 @@
   @apply overflow-hidden;
 }
 
+.el-loading-mask.is-fullscreen,
+.el-loading-mask.gva-tech-loading,
+.gva-tech-app .el-loading-mask {
+  color: var(--tech-text);
+  background:
+    radial-gradient(circle at 50% 36%, rgba(0, 212, 255, 0.16), transparent 28%),
+    rgba(2, 8, 23, 0.72) !important;
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+.el-loading-mask.is-fullscreen .el-loading-spinner,
+.el-loading-mask.gva-tech-loading .el-loading-spinner,
+.gva-tech-app .el-loading-mask .el-loading-spinner {
+  padding: 18px 24px;
+  border: 1px solid rgba(0, 212, 255, 0.22);
+  border-radius: 16px;
+  background: rgba(5, 16, 32, 0.78);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 0 22px rgba(0, 212, 255, 0.14);
+}
+
+.el-loading-mask.is-fullscreen .el-loading-spinner .path,
+.el-loading-mask.gva-tech-loading .el-loading-spinner .path,
+.gva-tech-app .el-loading-mask .el-loading-spinner .path {
+  stroke: var(--tech-cyan);
+}
+
+.el-loading-mask.is-fullscreen .el-loading-spinner .el-loading-text,
+.el-loading-mask.gva-tech-loading .el-loading-spinner .el-loading-text,
+.gva-tech-app .el-loading-mask .el-loading-spinner .el-loading-text {
+  margin-top: 10px;
+  font-weight: 700;
+  color: #67e8f9;
+  letter-spacing: 0.08em;
+  text-shadow: 0 0 12px rgba(0, 212, 255, 0.38);
+}
+
+body:not(.login-light-mode) {
+  .el-card,
+  .el-dialog,
+  .el-drawer,
+  .el-message-box,
+  .el-transfer-panel,
+  .el-picker-panel {
+    color: var(--tech-text);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    background: rgba(5, 16, 32, 0.96);
+    box-shadow: var(--tech-shadow);
+  }
+
+  .el-card__header,
+  .el-dialog__header,
+  .el-drawer__header,
+  .el-message-box__header,
+  .el-transfer-panel__header {
+    color: var(--tech-text-strong);
+    border-bottom-color: rgba(0, 212, 255, 0.18) !important;
+    background: rgba(2, 8, 23, 0.42) !important;
+  }
+
+  .el-card__body,
+  .el-dialog__body,
+  .el-drawer__body,
+  .el-message-box__content,
+  .el-transfer-panel__body,
+  .el-transfer-panel__list {
+    color: var(--tech-text);
+    background: transparent !important;
+  }
+}
+
+.gva-tech-app,
+.equipment-tech-page {
+  .el-form-item__label {
+    font-weight: 700;
+    color: var(--tech-text-muted);
+  }
+
+  .el-button {
+    min-height: 32px;
+    border-radius: 999px;
+    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
+
+    &:not(.is-disabled):hover {
+      transform: translateY(-1px);
+    }
+  }
+
+  .el-button--primary:not(.is-link) {
+    color: #031424;
+    border: 0;
+    background: linear-gradient(135deg, #67e8f9 0%, var(--tech-primary) 46%, #2563eb 100%);
+    box-shadow: 0 0 20px var(--tech-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.34);
+  }
+
+  .el-button:not(.el-button--primary):not(.is-link) {
+    color: var(--tech-text);
+    border-color: rgba(0, 212, 255, 0.2);
+    background: rgba(15, 23, 42, 0.74);
+
+    &:hover {
+      color: #ffffff;
+      border-color: rgba(0, 212, 255, 0.54);
+      background: rgba(14, 165, 233, 0.16);
+      box-shadow: 0 0 16px rgba(0, 212, 255, 0.16);
+    }
+  }
+
+  .el-button.is-link {
+    color: #67e8f9;
+  }
+
+  .el-input__wrapper,
+  .el-select__wrapper,
+  .el-textarea__inner,
+  .el-date-editor.el-input__wrapper {
+    color: var(--tech-text);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    border-radius: 10px;
+    background: rgba(2, 8, 23, 0.62);
+    box-shadow: inset 0 0 14px rgba(0, 212, 255, 0.06);
+    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
+  }
+
+  .el-input__wrapper.is-focus,
+  .el-select__wrapper.is-focused,
+  .el-textarea__inner:focus {
+    border-color: rgba(0, 212, 255, 0.72);
+    background: rgba(2, 8, 23, 0.78);
+    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.28), 0 0 18px rgba(0, 212, 255, 0.18);
+  }
+
+  .el-input__inner,
+  .el-select__placeholder,
+  .el-select__selected-item,
+  .el-textarea__inner {
+    color: var(--tech-text);
+  }
+
+  .el-input__inner::placeholder,
+  .el-textarea__inner::placeholder {
+    color: rgba(191, 226, 255, 0.44);
+  }
+
+  .el-card,
+  .el-dialog,
+  .el-drawer {
+    color: var(--tech-text);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    background: rgba(5, 16, 32, 0.96);
+    box-shadow: var(--tech-shadow);
+  }
+
+  .el-dialog__title,
+  .el-drawer__title {
+    color: var(--tech-text-strong);
+    font-weight: 800;
+    letter-spacing: 0.05em;
+  }
+
+  .el-dialog__header,
+  .el-drawer__header {
+    border-bottom-color: rgba(0, 212, 255, 0.18) !important;
+  }
+
+  .el-table {
+    overflow: hidden;
+    color: var(--tech-text);
+    border-color: rgba(0, 212, 255, 0.18) !important;
+    background: transparent;
+
+    &::before,
+    &::after,
+    .el-table__inner-wrapper::before {
+      background-color: rgba(0, 212, 255, 0.18);
+    }
+
+    th.el-table__cell {
+      color: #baf6ff !important;
+      border-bottom-color: rgba(0, 212, 255, 0.3);
+      background: linear-gradient(180deg, rgba(14, 116, 144, 0.5), rgba(15, 23, 42, 0.92)) !important;
+
+      .cell {
+        color: #baf6ff !important;
+        font-weight: 900;
+        letter-spacing: 0.05em;
+        text-shadow: 0 0 12px rgba(0, 212, 255, 0.36);
+      }
+    }
+
+    tr,
+    td.el-table__cell {
+      color: #eafcff !important;
+      border-bottom-color: rgba(0, 212, 255, 0.14);
+      background: rgba(2, 8, 23, 0.28) !important;
+    }
+
+    .el-table__row:hover > td.el-table__cell {
+      color: #ffffff !important;
+      background: rgba(14, 165, 233, 0.22) !important;
+    }
+
+    .cell {
+      color: inherit !important;
+      font-weight: 600;
+      line-height: 34px;
+      text-shadow: 0 0 8px rgba(0, 212, 255, 0.12);
+    }
+
+    .el-table__fixed,
+    .el-table__fixed-right,
+    .el-table__fixed-header-wrapper,
+    .el-table__fixed-body-wrapper,
+    .el-table__fixed-right-patch {
+      background: #061224;
+    }
+
+    .el-table__empty-text {
+      color: rgba(191, 226, 255, 0.64);
+    }
+  }
+
+  .el-pagination {
+    @apply mt-8;
+    --el-pagination-bg-color: rgba(15, 23, 42, 0.76);
+    --el-pagination-button-disabled-bg-color: rgba(15, 23, 42, 0.46);
+    --el-pagination-hover-color: #67e8f9;
+    --el-pagination-text-color: var(--tech-text-muted);
+    --el-pagination-button-color: var(--tech-text-muted);
+
+    .btn-prev,
+    .btn-next,
+    .el-pager li,
+    .el-input__wrapper {
+      color: var(--tech-text-muted);
+      border: 1px solid rgba(0, 212, 255, 0.16);
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.78);
+    }
+
+    .el-pager li.is-active {
+      color: #020617 !important;
+      border-color: rgba(103, 232, 249, 0.92);
+      background: #67e8f9;
+      box-shadow: 0 0 16px rgba(103, 232, 249, 0.32);
+    }
+  }
+
+  .el-tag {
+    font-weight: 700;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.7);
+    box-shadow: inset 0 0 12px rgba(0, 212, 255, 0.05);
+  }
+
+  .el-radio-button__inner {
+    color: var(--tech-text-muted);
+    border-color: rgba(0, 212, 255, 0.22) !important;
+    background: rgba(15, 23, 42, 0.74);
+  }
+
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    color: #031424;
+    border-color: rgba(103, 232, 249, 0.92) !important;
+    background: linear-gradient(135deg, #67e8f9, var(--tech-primary));
+    box-shadow: 0 0 18px rgba(0, 212, 255, 0.26);
+  }
+
+  .el-tabs__item {
+    color: var(--tech-text-muted);
+    font-weight: 700;
+
+    &.is-active {
+      color: #67e8f9;
+    }
+  }
+
+  .el-tabs__active-bar {
+    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-blue));
+    box-shadow: 0 0 14px rgba(0, 212, 255, 0.44);
+  }
+}
+
+.el-popper,
+.el-dropdown__popper,
+.el-select__popper,
+.el-picker__popper {
+  border-color: rgba(0, 212, 255, 0.22) !important;
+  background: rgba(5, 16, 32, 0.96) !important;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42), 0 0 22px rgba(0, 212, 255, 0.12) !important;
+
+  .el-dropdown-menu,
+  .el-select-dropdown,
+  .el-picker-panel {
+    background: transparent;
+  }
+
+  .el-dropdown-menu__item,
+  .el-select-dropdown__item {
+    color: var(--tech-text-muted, #bfdbfe);
+  }
+
+  .el-dropdown-menu__item:not(.is-disabled):focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover,
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    color: #67e8f9;
+    background: rgba(14, 165, 233, 0.16);
+  }
+
+  .el-popper__arrow::before {
+    border-color: rgba(0, 212, 255, 0.22) !important;
+    background: rgba(5, 16, 32, 0.96) !important;
+  }
+}
+
 .el-table {
   tr {
     th {
       @apply dark:bg-slate-900;
       .cell {
-        @apply leading-[36px] text-gray-700 dark:text-gray-200;
+        @apply leading-[36px];
+        color: #baf6ff !important;
+        font-weight: 900;
+        text-shadow: 0 0 12px rgba(0, 212, 255, 0.32);
       }
     }
   }
@@ -58,7 +377,10 @@
     td {
       @apply dark:bg-slate-900;
       .cell {
-        @apply leading-[32px] text-gray-600 dark:text-gray-300;
+        @apply leading-[34px];
+        color: #eafcff !important;
+        font-weight: 600;
+        text-shadow: 0 0 8px rgba(0, 212, 255, 0.12);
       }
     }
   }
@@ -71,21 +393,6 @@
   }
 }
 
-//   layout
-
-// table
-.el-pagination {
-  @apply mt-8;
-  .btn-prev,
-  .btn-next {
-    @apply border border-solid border-gray-300 dark:border-gray-700 rounded;
-  }
-  .el-pager {
-    li {
-      @apply border border-solid border-gray-300 dark:border-gray-600 rounded text-gray-600 text-sm mx-1;
-    }
-  }
-}
 .el-menu {
   li {
     @apply my-1;
@@ -129,11 +436,18 @@
 }
 
 html.dark {
-  /* 自定义深色背景颜色 */
-  --el-bg-color: rgb(30, 41, 59);
-  --el-bg-color-overlay: rgb(40, 51, 69);
+  --el-bg-color: rgb(7, 17, 31);
+  --el-bg-color-overlay: rgb(8, 27, 54);
   --el-fill-color-light: rgb(15, 23, 42);
   --el-fill-color: rgb(15, 23, 42);
+  --el-border-color: rgba(0, 212, 255, 0.24);
+  --el-border-color-light: rgba(0, 212, 255, 0.18);
+  --el-border-color-lighter: rgba(0, 212, 255, 0.12);
+  --el-text-color-primary: #e0f7ff;
+  --el-text-color-regular: #bfdbfe;
+  --el-text-color-secondary: rgba(191, 226, 255, 0.72);
+  --el-input-bg-color: rgba(2, 8, 23, 0.68);
+  --el-mask-color: rgba(2, 6, 23, 0.72);
 }
 
 html.dark.login-light-mode {
diff --git a/src/style/main.scss b/src/style/main.scss
index 5698789..4314248 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,5 +1,46 @@
 @use '@/style/iconfont.css';
 @use './transition.scss';
+@use './equipment-tech.scss';
+
+:root {
+  --tech-bg: #07111f;
+  --tech-bg-deep: #020617;
+  --tech-panel: rgba(8, 27, 54, 0.9);
+  --tech-panel-soft: rgba(15, 23, 42, 0.78);
+  --tech-panel-strong: rgba(2, 8, 23, 0.92);
+  --tech-border: rgba(0, 212, 255, 0.22);
+  --tech-border-strong: rgba(0, 212, 255, 0.48);
+  --tech-text: #e0f7ff;
+  --tech-text-strong: #f4fbff;
+  --tech-text-muted: rgba(191, 226, 255, 0.72);
+  --tech-cyan: #00d4ff;
+  --tech-blue: #3b82f6;
+  --tech-amber: #f59e0b;
+  --tech-danger: #ef4444;
+  --tech-success: #10b981;
+  --tech-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), 0 0 28px rgba(0, 212, 255, 0.12);
+  --tech-radius: 16px;
+  --tech-primary: var(--el-color-primary, #00d4ff);
+  --tech-primary-soft: rgba(0, 212, 255, 0.16);
+  --tech-primary-glow: rgba(0, 212, 255, 0.28);
+}
+
+html,
+body {
+  width: 100%;
+  min-height: 100%;
+}
+
+html.dark {
+  --tech-bg: #07111f;
+  --tech-bg-deep: #020617;
+  --tech-panel: rgba(8, 27, 54, 0.92);
+  --tech-panel-soft: rgba(15, 23, 42, 0.82);
+  --tech-panel-strong: rgba(2, 8, 23, 0.94);
+  --tech-border: rgba(0, 212, 255, 0.28);
+  --tech-text: #e0f7ff;
+  --tech-text-muted: rgba(191, 226, 255, 0.72);
+}
 
 .html-grey {
   filter: grayscale(100%);
@@ -9,8 +50,384 @@
   filter: invert(80%);
 }
 
+#app.gva-tech-app,
+.gva-tech-app {
+  color: var(--tech-text);
+  background:
+    radial-gradient(circle at 12% 10%, rgba(0, 212, 255, 0.16), transparent 28%),
+    radial-gradient(circle at 86% 6%, rgba(245, 158, 11, 0.1), transparent 22%),
+    radial-gradient(circle at 54% 96%, rgba(59, 130, 246, 0.16), transparent 34%),
+    linear-gradient(135deg, var(--tech-bg-deep) 0%, var(--tech-bg) 52%, #0f172a 100%);
+}
+
+// 兼容旧页面中仍保留的 Uno/Tailwind 浅色背景类，避免局部白块破坏整体工业风。
+.gva-tech-app,
+.gva-tech-layout {
+  .bg-white,
+  .bg-gray-50,
+  .bg-gray-100,
+  .bg-gray-200,
+  .bg-blue-50,
+  .bg-red-50,
+  .bg-green-50,
+  .bg-amber-50,
+  .dark\:bg-slate-900,
+  .dark\:bg-slate-800,
+  .dark\:bg-slate-700,
+  .dark\:bg-slate-600,
+  .dark\:bg-slate-500,
+  .dark\:bg-gray-900,
+  .dark\:bg-gray-800,
+  .dark\:bg-gray-700,
+  .dark\:bg-gray-600 {
+    color: var(--tech-text) !important;
+    border-color: rgba(0, 212, 255, 0.18) !important;
+    background:
+      linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
+      radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%) !important;
+  }
+
+  .hover\:bg-gray-50:hover,
+  .hover\:bg-gray-100:hover,
+  .dark\:hover\:bg-gray-700:hover,
+  .dark\:hover\:bg-gray-600:hover,
+  .dark\:hover\:bg-blue-900:hover,
+  .hover\:bg-blue-50:hover {
+    color: var(--tech-text-strong) !important;
+    background: rgba(0, 212, 255, 0.12) !important;
+  }
+
+  .border-gray-100,
+  .border-gray-200,
+  .border-gray-300,
+  .border-gray-600,
+  .border-gray-700,
+  .border-blue-200,
+  .border-red-200,
+  .border-green-200,
+  .border-red-800,
+  .border-green-800,
+  .border-blue-800,
+  .dark\:border-gray-700,
+  .dark\:border-gray-600,
+  .dark\:border-slate-800,
+  .dark\:border-slate-700 {
+    border-color: rgba(0, 212, 255, 0.18) !important;
+  }
+}
+
+.gva-tech-layout {
+  position: relative;
+  overflow: hidden;
+  color: var(--tech-text);
+  background: transparent !important;
+  isolation: isolate;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    content: '';
+  }
+
+  &::before {
+    opacity: 0.34;
+    background-image:
+      linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px);
+    background-size: 36px 36px;
+    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
+    mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
+    animation: equipmentGridDrift 24s linear infinite;
+  }
+
+  &::after {
+    background: linear-gradient(110deg, transparent 0%, rgba(0, 212, 255, 0.06) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(0, 212, 255, 0.06) 55%, transparent 100%);
+    transform: translateX(-120%);
+    animation: equipmentScanLine 9s ease-in-out infinite;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.gva-tech-main,
+.gva-tech-scroll,
+.gva-tech-router-view {
+  background: transparent !important;
+}
+
+.gva-tech-scroll {
+  position: relative;
+  padding-top: 10px;
+}
+
+.gva-tech-router-view {
+  min-height: calc(100% - 3rem);
+  padding: 0 8px 12px;
+}
+
+.gva-tech-header {
+  color: var(--tech-text) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.26);
+  background:
+    linear-gradient(90deg, rgba(2, 8, 23, 0.94), rgba(8, 27, 54, 0.86)),
+    radial-gradient(circle at 18% 50%, rgba(0, 212, 255, 0.16), transparent 34%) !important;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34), 0 0 26px rgba(0, 212, 255, 0.1) !important;
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+
+  &::after {
+    position: absolute;
+    right: 18px;
+    bottom: 0;
+    left: 18px;
+    height: 1px;
+    content: '';
+    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.78), rgba(245, 158, 11, 0.52), transparent);
+    box-shadow: 0 0 18px rgba(0, 212, 255, 0.5);
+  }
+
+  .gva-tech-brand {
+    color: var(--tech-text-strong);
+    letter-spacing: 0.06em;
+    text-shadow: 0 0 18px rgba(0, 212, 255, 0.42);
+  }
+
+  .el-breadcrumb__inner,
+  .el-breadcrumb__separator,
+  .el-dropdown,
+  .el-dropdown * {
+    color: var(--tech-text-muted) !important;
+  }
+}
+
+.gva-tech-aside,
+.gva-tech-aside-head,
+.gva-tech-aside-rail,
+.gva-tech-aside-secondary {
+  color: var(--tech-text) !important;
+  border-color: rgba(0, 212, 255, 0.18) !important;
+  background:
+    linear-gradient(180deg, rgba(5, 16, 32, 0.94), rgba(2, 8, 23, 0.88)),
+    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.12), transparent 34%) !important;
+  box-shadow: inset -1px 0 0 rgba(0, 212, 255, 0.12), 10px 0 28px rgba(0, 0, 0, 0.22) !important;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+
+  .el-menu {
+    border: 0 !important;
+    background: transparent !important;
+  }
+
+  .el-menu-item,
+  .el-sub-menu__title {
+    position: relative;
+    height: 44px;
+    margin: 4px 0;
+    color: var(--tech-text-muted) !important;
+    border-radius: 12px;
+    transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
+
+    &:hover {
+      color: var(--tech-text-strong) !important;
+      background: rgba(0, 212, 255, 0.1) !important;
+      box-shadow: inset 0 0 18px rgba(0, 212, 255, 0.08);
+      transform: translateX(2px);
+    }
+  }
+
+  .el-menu-item.is-active,
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    color: #ffffff !important;
+    background: linear-gradient(90deg, rgba(0, 212, 255, 0.24), rgba(59, 130, 246, 0.13)) !important;
+    box-shadow: inset 3px 0 0 var(--tech-primary), 0 0 18px rgba(0, 212, 255, 0.16);
+  }
+}
+
+.gva-tech-collapse-btn {
+  color: var(--tech-text) !important;
+  border: 1px solid rgba(0, 212, 255, 0.22);
+  background: rgba(15, 23, 42, 0.86) !important;
+  box-shadow: 0 0 18px rgba(0, 212, 255, 0.14);
+  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
+
+  &:hover {
+    border-color: rgba(0, 212, 255, 0.56);
+    box-shadow: 0 0 24px rgba(0, 212, 255, 0.24);
+    transform: translateY(-2px);
+  }
+}
+
+.gva-tech-tabs {
+  border-bottom: 1px solid rgba(0, 212, 255, 0.14);
+  background: rgba(2, 8, 23, 0.42);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+
+  .el-tabs {
+    background: transparent !important;
+  }
+
+  .el-tabs__nav {
+    border: 0 !important;
+    gap: 6px;
+  }
+
+  .el-tabs__item {
+    height: 34px;
+    margin: 4px 0;
+    color: var(--tech-text-muted) !important;
+    border: 1px solid rgba(0, 212, 255, 0.14) !important;
+    border-radius: 999px !important;
+    background: rgba(15, 23, 42, 0.72);
+    transition: all 0.22s ease;
+
+    &.is-active {
+      color: #ffffff !important;
+      border-color: rgba(0, 212, 255, 0.54) !important;
+      background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(59, 130, 246, 0.16));
+      box-shadow: 0 0 18px rgba(0, 212, 255, 0.18);
+    }
+  }
+
+  .contextmenu {
+    color: var(--tech-text);
+    border: 1px solid rgba(0, 212, 255, 0.22);
+    border-radius: 12px;
+    background: rgba(5, 16, 32, 0.96);
+    box-shadow: var(--tech-shadow);
+
+    li:hover {
+      color: #67e8f9;
+      background: rgba(14, 165, 233, 0.16);
+    }
+  }
+}
+
+.gva-page-banner,
+.tech-page-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  min-height: 92px;
+  padding: 18px 24px;
+  margin: 0 0 12px;
+  overflow: hidden;
+  color: var(--tech-text);
+  border: 1px solid rgba(0, 212, 255, 0.28);
+  border-radius: 18px;
+  background:
+    linear-gradient(90deg, rgba(8, 27, 54, 0.9), rgba(4, 15, 32, 0.76)),
+    radial-gradient(circle at 22% 20%, rgba(0, 212, 255, 0.16), transparent 36%);
+  box-shadow: var(--tech-shadow), inset 0 0 26px rgba(0, 212, 255, 0.08);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: -36%;
+    width: 36%;
+    height: 100%;
+    content: '';
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
+    animation: equipmentCardGlint 5.8s ease-in-out infinite;
+  }
+
+  &::after {
+    flex: 1;
+    min-width: 140px;
+    height: 2px;
+    content: '';
+    background: linear-gradient(90deg, rgba(0, 212, 255, 0.82), rgba(245, 158, 11, 0.72), transparent);
+    box-shadow: 0 0 18px rgba(0, 212, 255, 0.44);
+  }
+}
+
+.gva-page-kicker,
+.tech-page-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 800;
+  color: #67e8f9;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+
+  &::before {
+    width: 8px;
+    height: 8px;
+    content: '';
+    border-radius: 50%;
+    background: var(--tech-cyan);
+    box-shadow: 0 0 14px var(--tech-cyan);
+    animation: equipmentDotBreath 1.8s ease-in-out infinite;
+  }
+}
+
+.gva-page-title,
+.tech-page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1.18;
+  color: var(--tech-text-strong);
+  letter-spacing: 0.08em;
+  text-shadow: 0 0 18px rgba(0, 212, 255, 0.42);
+}
+
+.gva-page-subtitle,
+.tech-page-subtitle {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--tech-text-muted);
+}
+
+.gva-table-box,
+.gva-search-box,
+.gva-form-box,
+.tech-card {
+  position: relative;
+  overflow: hidden;
+  color: var(--tech-text) !important;
+  border: 1px solid var(--tech-border);
+  border-radius: var(--tech-radius);
+  background:
+    linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.76)),
+    radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.08), transparent 34%) !important;
+  box-shadow: inset 0 0 24px rgba(0, 212, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: -34%;
+    width: 34%;
+    height: 100%;
+    content: '';
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
+    animation: equipmentCardGlint 8s ease-in-out infinite;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}
+
 .gva-table-box {
-  @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
+  @apply p-4 rounded my-2;
+
   .el-table {
     @apply border-x border-t border-b-0 rounded border-table-border border-solid -mx-[1px];
   }
@@ -18,9 +435,11 @@
 
 .gva-btn-list {
   @apply mb-3 flex items-center flex-wrap gap-2;
+
   .el-button + .el-button {
     @apply ml-0 !important;
   }
+
   .el-upload {
     .el-button {
       @apply ml-0 !important;
@@ -29,8 +448,10 @@
 }
 
 #nprogress .bar {
-  background: #29d !important;
+  background: linear-gradient(90deg, var(--tech-cyan), var(--tech-blue), var(--tech-amber)) !important;
+  box-shadow: 0 0 16px rgba(0, 212, 255, 0.7);
 }
+
 .gva-customer-icon {
   @apply w-4 h-4;
 }
@@ -39,13 +460,18 @@
   @apply hidden;
 }
 
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
 .gva-search-box {
-  @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
+  @apply p-4 rounded my-2;
   padding-bottom: 0;
 }
 
 .gva-form-box {
-  @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
+  @apply p-4 rounded my-2;
 }
 
 .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
@@ -54,7 +480,116 @@
 
 .el-dropdown {
   outline: none;
+
   * {
     outline: none;
   }
 }
+
+.tech-status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--tech-cyan);
+  box-shadow: 0 0 12px currentColor;
+  animation: equipmentDotBreath 1.8s ease-in-out infinite;
+}
+
+.tech-status-dot--success,
+.tech-status-dot--online {
+  color: var(--tech-success);
+  background: var(--tech-success);
+}
+
+.tech-status-dot--warning {
+  color: var(--tech-amber);
+  background: var(--tech-amber);
+}
+
+.tech-status-dot--danger,
+.tech-status-dot--offline {
+  color: var(--tech-danger);
+  background: var(--tech-danger);
+}
+
+.tech-value-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+  padding: 3px 10px;
+  font-family: DIN Alternate, Arial, sans-serif;
+  color: var(--tech-text);
+  border: 1px solid rgba(0, 212, 255, 0.24);
+  border-radius: 999px;
+  background: rgba(2, 8, 23, 0.6);
+  box-shadow: inset 0 0 12px rgba(0, 212, 255, 0.06);
+}
+
+@media (max-width: 768px) {
+  .gva-page-banner,
+  .tech-page-header {
+    align-items: flex-start;
+    flex-direction: column;
+    min-height: auto;
+    padding: 16px;
+
+    &::after {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+
+  .gva-page-title,
+  .tech-page-title {
+    font-size: 22px;
+  }
+}
+
+@supports not (gap: 1rem) {
+  .gva-btn-list > * {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+
+  .gva-tech-tabs .el-tabs__nav > * + *,
+  .gva-page-kicker > * + *,
+  .tech-page-kicker > * + *,
+  .tech-value-chip > * + * {
+    margin-left: 6px;
+  }
+
+  .gva-page-banner > * + *,
+  .tech-page-header > * + * {
+    margin-left: 18px;
+  }
+
+  @media (max-width: 768px) {
+    .gva-page-banner > * + *,
+    .tech-page-header > * + * {
+      margin-top: 12px;
+      margin-left: 0;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gva-tech-layout::before,
+  .gva-tech-layout::after,
+  .gva-page-banner::before,
+  .tech-page-header::before,
+  .gva-table-box::before,
+  .gva-search-box::before,
+  .gva-form-box::before,
+  .tech-card::before,
+  .tech-status-dot,
+  .gva-page-kicker::before,
+  .tech-page-kicker::before,
+  .equipment-tech-page::before,
+  .equipment-tech-page::after,
+  .equipment-tech-page .equipment-tech-header::before,
+  .equipment-tech-page .tech-status-dot {
+    animation: none !important;
+  }
+}
diff --git a/src/utils/format.js b/src/utils/format.js
index dc5cf07..402cf2e 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -164,6 +164,19 @@ export const setBodyPrimaryColor = (primaryColor, darkMode) => {
     `--el-menu-hover-bg-color`,
     addOpacityToColor(primaryColor, 0.2)
   )
+  document.documentElement.style.setProperty('--tech-primary', primaryColor)
+  document.documentElement.style.setProperty(
+    '--tech-primary-soft',
+    addOpacityToColor(primaryColor, darkMode === 'light' ? 0.1 : 0.16)
+  )
+  document.documentElement.style.setProperty(
+    '--tech-primary-glow',
+    addOpacityToColor(primaryColor, darkMode === 'light' ? 0.22 : 0.32)
+  )
+  document.documentElement.style.setProperty(
+    '--tech-menu-hover-bg',
+    addOpacityToColor(primaryColor, darkMode === 'light' ? 0.12 : 0.2)
+  )
 }
 
 const baseUrl = ref(import.meta.env.VITE_BASE_API)
diff --git a/src/utils/request.js b/src/utils/request.js
index 9dbc8d4..eeeb7b1 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -36,6 +36,12 @@ const showLoading = (
     // 再次检查activeAxios状态，防止竞态条件
     if (activeAxios > 0 && !isLoadingVisible) {
       if (!option.target) option.target = loadDom
+      option = {
+        text: '数据加载中...',
+        background: 'rgba(2, 8, 23, 0.72)',
+        customClass: 'gva-tech-loading',
+        ...option
+      }
       loadingInstance = ElLoading.service(option)
       isLoadingVisible = true
 
diff --git a/src/view/dashboard/components/card.vue b/src/view/dashboard/components/card.vue
index 2a50b28..e856538 100644
--- a/src/view/dashboard/components/card.vue
+++ b/src/view/dashboard/components/card.vue
@@ -5,14 +5,14 @@
 
 <template>
   <div
-    class="bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-400 rounded shadow"
+    class="dashboard-tech-card"
     :class="[customClass || '', withoutPadding ? 'p-0' : 'p-4']"
   >
-    <div v-if="title" class="flex justify-between items-center">
-      <div class="text-base font-bold">
+    <div v-if="title" class="dashboard-tech-card__header">
+      <div class="dashboard-tech-card__title">
         {{ title }}
       </div>
-      <div v-if="showAction" class="text-sm text-active cursor-pointer">
+      <div v-if="showAction" class="dashboard-tech-card__action">
         查看更多
       </div>
     </div>
@@ -43,4 +43,76 @@
   })
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .dashboard-tech-card {
+    position: relative;
+    overflow: hidden;
+    color: var(--tech-text);
+    border: 1px solid rgba(0, 212, 255, 0.22);
+    border-radius: 16px;
+    background:
+      linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74)),
+      radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.1), transparent 34%);
+    box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.24);
+    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -34%;
+      width: 34%;
+      height: 100%;
+      content: '';
+      pointer-events: none;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+      animation: equipmentCardGlint 7.2s ease-in-out infinite;
+    }
+
+    &:hover {
+      border-color: rgba(0, 212, 255, 0.5);
+      box-shadow: var(--tech-shadow), inset 0 0 24px rgba(0, 212, 255, 0.08);
+      transform: translateY(-3px);
+    }
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .dashboard-tech-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .dashboard-tech-card__title {
+    position: relative;
+    padding-left: 12px;
+    font-size: 17px;
+    font-weight: 800;
+    color: var(--tech-text-strong);
+    letter-spacing: 0.06em;
+    text-shadow: 0 0 14px rgba(0, 212, 255, 0.3);
+
+    &::before {
+      position: absolute;
+      top: 3px;
+      bottom: 3px;
+      left: 0;
+      width: 3px;
+      content: '';
+      border-radius: 999px;
+      background: linear-gradient(180deg, var(--tech-cyan), var(--tech-blue));
+      box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
+    }
+  }
+
+  .dashboard-tech-card__action {
+    font-size: 13px;
+    font-weight: 700;
+    color: #67e8f9;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/view/equipment/list/components/detail/components/info/index.vue b/src/view/equipment/list/components/detail/components/info/index.vue
index f1e5218..a552918 100644
--- a/src/view/equipment/list/components/detail/components/info/index.vue
+++ b/src/view/equipment/list/components/detail/components/info/index.vue
@@ -236,12 +236,20 @@
   // }
   .alarms-box,
   .info-box {
-    @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg;
-    padding-bottom: 40px;
+    position: relative;
+    padding: 16px 16px 40px;
+    margin: 8px 0;
+    overflow: hidden;
+    color: var(--tech-text);
+    border: 1px solid rgba(0, 212, 255, 0.22);
+    border-radius: 16px;
+    background: linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74));
+    box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
+
     .title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--el-text-color-primary, #303133);
+      font-size: 17px;
+      font-weight: 800;
+      color: var(--tech-text-strong);
       // margin: 0 0 16px 0;
       padding-bottom: 12px;
       // border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
@@ -268,11 +276,11 @@
         > span {
           font-size: 14px;
           &:nth-child(1) {
-            font-weight: 600;
-            color: var(--el-text-color-regular, #606266);
+            font-weight: 700;
+            color: var(--tech-text-muted);
           }
           &:nth-child(2) {
-            color: var(--el-text-color-regular, #303133);
+            color: var(--tech-text);
           }
         }
       }
diff --git a/src/view/equipment/list/components/detail/components/line/index.vue b/src/view/equipment/list/components/detail/components/line/index.vue
index 6419cac..b2d7bbb 100644
--- a/src/view/equipment/list/components/detail/components/line/index.vue
+++ b/src/view/equipment/list/components/detail/components/line/index.vue
@@ -119,18 +119,53 @@
   }
 
   .detail-card {
-    background-color: var(--el-bg-color-overlay, #ffffff);
-    border-radius: 8px;
+    position: relative;
+    overflow: hidden;
     padding: 24px;
-    border: 1px solid var(--el-border-color, #e4e7ed);
+    color: var(--tech-text);
+    border: 1px solid rgba(0, 212, 255, 0.22);
+    border-radius: 16px;
+    background: linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74));
+    box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -34%;
+      width: 34%;
+      height: 100%;
+      content: '';
+      pointer-events: none;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
+      animation: equipmentCardGlint 8s ease-in-out infinite;
+    }
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
 
     h3 {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--el-text-color-primary, #303133);
-      margin: 0 0 16px 0;
-      padding-bottom: 12px;
-      border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
+      position: relative;
+      padding: 0 0 12px 12px;
+      margin: 0 0 16px;
+      font-size: 18px;
+      font-weight: 800;
+      color: var(--tech-text-strong);
+      border-bottom: 1px solid rgba(0, 212, 255, 0.18);
+      text-shadow: 0 0 14px rgba(0, 212, 255, 0.28);
+
+      &::before {
+        position: absolute;
+        top: 2px;
+        bottom: 14px;
+        left: 0;
+        width: 3px;
+        content: '';
+        border-radius: 999px;
+        background: linear-gradient(180deg, var(--tech-cyan), var(--tech-blue));
+        box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
+      }
     }
   }
 
diff --git a/src/view/equipment/list/components/detail/components/trend/index.vue b/src/view/equipment/list/components/detail/components/trend/index.vue
index ae095c1..6c25fe7 100644
--- a/src/view/equipment/list/components/detail/components/trend/index.vue
+++ b/src/view/equipment/list/components/detail/components/trend/index.vue
@@ -518,31 +518,63 @@
 
 <style lang="scss" scoped>
   .trend-content {
-    // @apply text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg
     display: flex;
-
-    // flex-direction: column;
-    gap: 10px;
+    gap: 12px;
     box-sizing: border-box;
+    color: var(--tech-text);
+
+    .left,
+    .right .top,
+    .right .bottom,
+    .trend-toolbar,
+    .chart-card {
+      position: relative;
+      overflow: hidden;
+      color: var(--tech-text);
+      border: 1px solid rgba(0, 212, 255, 0.22);
+      border-radius: 16px;
+      background: linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74));
+      box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
+    }
+
     .left {
-      @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg 
       width: 270px;
+      padding: 16px;
+      flex-shrink: 0;
+
       .title {
-        font-size: 16px;
-        font-weight: 600;
-        color: var(--el-text-color-primary, #303133);
+        position: relative;
+        padding-left: 12px;
+        font-size: 17px;
+        font-weight: 800;
+        color: var(--tech-text-strong);
+        text-shadow: 0 0 14px rgba(0, 212, 255, 0.28);
+
+        &::before {
+          position: absolute;
+          top: 2px;
+          bottom: 2px;
+          left: 0;
+          width: 3px;
+          content: '';
+          border-radius: 999px;
+          background: linear-gradient(180deg, var(--tech-cyan), var(--tech-blue));
+          box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
+        }
+
         > span {
           margin-right: 50px;
         }
-        // margin: 0 0 16px 0;
-        // padding-bottom: 12px;
-        // border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
       }
+
       .line-item {
+        color: var(--tech-text-muted);
+
         > span {
           &:nth-child(1) {
             display: inline-block;
             width: 40px;
+            color: #67e8f9;
           }
           &:nth-child(2) {
             display: inline-block;
@@ -551,53 +583,81 @@
           }
         }
       }
+
       .ouliy {
-        padding: 5px;
-        border-radius: 5px;
+        padding: 7px 8px;
+        border-radius: 10px;
+        transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
+
         &.active {
-          background-color: var(--el-color-primary-light-9);
+          color: #ffffff;
+          background: rgba(0, 212, 255, 0.18);
+          box-shadow: inset 3px 0 0 var(--tech-primary), 0 0 14px rgba(0, 212, 255, 0.14);
         }
         &:hover {
-          background-color: var(--el-color-primary-light-8);
+          color: #ffffff;
+          background: rgba(0, 212, 255, 0.12);
         }
       }
     }
+
     .right {
       height: calc(100vh - 6rem - 120px);
       flex: 1;
       overflow: auto;
+
       .top {
-        @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg;
-        margin-bottom: 10px;
+        padding: 16px;
+        margin-bottom: 12px;
+
         .title {
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--el-text-color-primary, #303133);
+          position: relative;
+          padding-left: 12px;
+          font-size: 17px;
+          font-weight: 800;
+          color: var(--tech-text-strong);
+          text-shadow: 0 0 14px rgba(0, 212, 255, 0.28);
+
+          &::before {
+            position: absolute;
+            top: 2px;
+            bottom: 2px;
+            left: 0;
+            width: 3px;
+            content: '';
+            border-radius: 999px;
+            background: linear-gradient(180deg, var(--tech-cyan), var(--tech-blue));
+            box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
+          }
         }
+
         .info {
           display: flex;
-          // flex-direction: column;
           gap: 100px;
         }
+
         .item {
-          padding: 12px 12px 0 12px;
+          padding: 12px 12px 0;
+
           > div {
             height: 30px;
             white-space: nowrap;
+
             > span {
               &:nth-child(1) {
                 display: inline-block;
                 width: 120px;
                 font-size: 14px;
-                color: var(--el-text-color-regular, #ddd);
+                color: var(--tech-text-muted);
               }
               &:nth-child(2) {
                 font-size: 14px;
-                color: var(--el-text-color-primary, #303133);
+                color: var(--tech-text);
               }
             }
           }
         }
+
         .other {
           :deep(.el-table .el-table__cell) {
             padding: 2px;
@@ -611,44 +671,58 @@
           }
         }
       }
+
       .bottom {
-        @apply bg-white p-4  text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded rounded-lg;
+        padding: 16px;
+
         .title {
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--el-text-color-primary, #303133);
+          position: relative;
+          padding-left: 12px;
+          font-size: 17px;
+          font-weight: 800;
+          color: var(--tech-text-strong);
+          text-shadow: 0 0 14px rgba(0, 212, 255, 0.28);
+
+          &::before {
+            position: absolute;
+            top: 2px;
+            bottom: 2px;
+            left: 0;
+            width: 3px;
+            content: '';
+            border-radius: 999px;
+            background: linear-gradient(180deg, var(--tech-cyan), var(--tech-blue));
+            box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
+          }
         }
       }
     }
   }
 
   .trend-toolbar {
-    width: 40%;
     display: flex;
     align-items: center;
     gap: 12px;
-    margin-bottom: 16px;
+    width: 40%;
     padding: 16px;
-    background-color: var(--el-bg-color-overlay, #ffffff);
-    border-radius: 8px;
-    border: 1px solid var(--el-border-color, #e4e7ed);
+    margin-bottom: 16px;
   }
 
   .toolbar-label {
     font-size: 14px;
-    color: var(--el-text-color-regular, #606266);
+    color: var(--tech-text-muted);
     white-space: nowrap;
   }
 
   .chart-card {
-    background-color: var(--el-bg-color-overlay, #ffffff);
-    border-radius: 8px;
     padding: 16px;
     margin-bottom: 16px;
-    transition: all 0.3s ease;
+    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
 
     &:hover {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-color: rgba(0, 212, 255, 0.5);
+      box-shadow: var(--tech-shadow);
+      transform: translateY(-2px);
     }
   }
 
@@ -660,18 +734,18 @@
   }
 
   .chart-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--el-text-color-primary, #303133);
+    font-size: 15px;
+    font-weight: 800;
+    color: var(--tech-text-strong);
   }
 
   .chart-unit {
     font-size: 12px;
-    color: var(--el-text-color-regular, #606266);
+    color: var(--tech-text-muted);
   }
 
   .chart {
-    height: 220px;
     width: 100%;
+    height: 220px;
   }
 </style>
diff --git a/src/view/equipment/list/components/detail/index.vue b/src/view/equipment/list/components/detail/index.vue
index 19c1a1b..c7addd0 100644
--- a/src/view/equipment/list/components/detail/index.vue
+++ b/src/view/equipment/list/components/detail/index.vue
@@ -61,14 +61,53 @@
   .device-detail-page {
     // padding: 20px;
     .tabs-box {
-      @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2 rounded-lg;
+      position: relative;
       display: flex;
       align-items: center;
+      gap: 14px;
+      padding: 18px 20px;
+      margin: 8px 0 14px;
+      overflow: hidden;
+      color: var(--tech-text);
+      border: 1px solid rgba(0, 212, 255, 0.28);
+      border-radius: 18px;
+      background:
+        linear-gradient(90deg, rgba(8, 27, 54, 0.9), rgba(4, 15, 32, 0.76)),
+        radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.16), transparent 36%);
+      box-shadow: var(--tech-shadow), inset 0 0 26px rgba(0, 212, 255, 0.08);
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: -36%;
+        width: 36%;
+        height: 100%;
+        content: '';
+        pointer-events: none;
+        background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
+        animation: equipmentCardGlint 6s ease-in-out infinite;
+      }
+
+      > * {
+        position: relative;
+        z-index: 1;
+      }
+
       > .title {
-        margin: 0 15px;
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--el-text-color-primary, #303133);
+        flex: 1;
+        margin: 0 15px 0 0;
+        font-size: 24px;
+        font-weight: 800;
+        color: var(--tech-text-strong);
+        letter-spacing: 0.06em;
+        text-shadow: 0 0 18px rgba(0, 212, 255, 0.38);
+      }
+
+      :deep(.el-button.is-circle) {
+        color: #67e8f9;
+        border-color: rgba(0, 212, 255, 0.36);
+        background: rgba(15, 23, 42, 0.72);
+        box-shadow: 0 0 18px rgba(0, 212, 255, 0.14);
       }
     }
   }
diff --git a/src/view/equipment/list/components/list/index.vue b/src/view/equipment/list/components/list/index.vue
index 779586a..6df25eb 100644
--- a/src/view/equipment/list/components/list/index.vue
+++ b/src/view/equipment/list/components/list/index.vue
@@ -40,7 +40,8 @@
               </el-dropdown>
             </div>
             <div class="status-tags">
-              <el-tag :type="item.netStatus == 1 ? 'primary' : 'info'">
+              <el-tag class="device-status-tag" :type="item.netStatus == 1 ? 'primary' : 'info'">
+                <span class="tech-status-dot" :class="item.netStatus == 1 ? 'tech-status-dot--online' : 'tech-status-dot--offline'" />
                 {{ item.netStatus == 1 ? '在线' : '离线' }}
               </el-tag>
               <!-- <el-tag
@@ -238,50 +239,70 @@
   // 设备卡片容器
   .container-device {
     padding: 24px;
-    background-color: var(--el-bg-color, #f5f7fa);
+    background: transparent;
   }
 
   .device-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
-    gap: 12px;
+    gap: 14px;
     width: 100%;
-    background-color: var(--el-bg-color, #f5f7fa);
+    background: transparent;
   }
 
   .device-card {
-    background-color: var(--el-bg-color-overlay, #ffffff);
-    border-radius: 8px;
-    padding: 16px;
-    display: flex;
-    gap: 12px;
-    color: var(--el-text-color-regular, #303133);
     position: relative;
-    transition: all 0.3s ease;
-    border: 1px solid var(--el-border-color, #e4e7ed);
+    display: flex;
     align-items: center;
+    gap: 14px;
+    min-height: 142px;
+    padding: 18px;
+    overflow: hidden;
+    color: var(--tech-text);
     cursor: pointer;
+    border: 1px solid rgba(0, 212, 255, 0.22);
+    border-radius: 16px;
+    background: linear-gradient(135deg, rgba(9, 24, 48, 0.9), rgba(5, 16, 32, 0.72));
+    box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
+    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
+
+    &::after {
+      position: absolute;
+      right: -30px;
+      bottom: -30px;
+      width: 110px;
+      height: 110px;
+      content: '';
+      border: 1px solid rgba(0, 212, 255, 0.18);
+      border-radius: 50%;
+      box-shadow: 0 0 28px rgba(0, 212, 255, 0.12);
+    }
 
     &:hover {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      border-color: var(--el-color-primary, #409eff);
+      border-color: rgba(0, 212, 255, 0.56);
+      box-shadow: var(--tech-shadow), inset 0 0 26px rgba(0, 212, 255, 0.08);
+      transform: translateY(-3px);
     }
   }
 
   .device-image {
     position: relative;
-    width: 72px;
-    height: 72px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: transparent;
     flex-shrink: 0;
+    width: 84px;
+    height: 84px;
+    border: 1px solid rgba(0, 212, 255, 0.18);
+    border-radius: 18px;
+    background: radial-gradient(circle, rgba(0, 212, 255, 0.16), rgba(2, 8, 23, 0.28));
+    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.08), 0 0 18px rgba(0, 212, 255, 0.08);
 
     img {
-      width: 100%;
-      height: 100%;
+      width: 78%;
+      height: 78%;
       object-fit: contain;
+      filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.26));
     }
 
     .signal-icon {
@@ -289,49 +310,58 @@
       top: 0;
       right: 0;
       font-size: 14px;
-      color: var(--el-text-color-placeholder, #9ca3af);
+      color: var(--tech-text-muted);
 
       &.online {
-        color: #10b981;
+        color: var(--tech-success);
       }
     }
   }
 
   .device-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
     position: relative;
-    // padding-right: 20px;
+    z-index: 1;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 7px;
+    min-width: 0;
   }
 
   .card-menu {
     position: absolute;
     top: -4px;
     right: 0;
-    cursor: pointer;
-    color: var(--el-text-color-placeholder, #94a3b8);
     font-size: 18px;
+    color: var(--tech-text-muted);
+    cursor: pointer;
 
     &:hover {
-      color: var(--el-text-color-primary, #303133);
+      color: #67e8f9;
     }
   }
 
   .status-tags {
     display: flex;
-    gap: 6px;
     flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .device-status-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
   }
 
   .device-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--el-text-color-primary, #303133);
-    white-space: nowrap;
     overflow: hidden;
+    font-size: 17px;
+    font-weight: 800;
+    color: var(--tech-text-strong);
     text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: 0.04em;
+    text-shadow: 0 0 14px rgba(0, 212, 255, 0.26);
   }
 
   .device-id-row {
@@ -341,8 +371,10 @@
 
     .device-id {
       flex: 1;
-      font-size: 14px;
-      color: var(--el-color-primary, #409eff);
+      font-family: DIN Alternate, Arial, sans-serif;
+      font-size: 15px;
+      font-weight: 700;
+      color: #67e8f9;
       word-break: break-all;
     }
   }
@@ -352,21 +384,27 @@
   .device-alarm {
     display: flex;
     align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    color: var(--el-text-color-regular, #606266);
+    gap: 5px;
+    font-size: 13px;
+    color: var(--tech-text-muted);
 
     .el-icon {
-      font-size: 14px;
       flex-shrink: 0;
+      font-size: 15px;
+      color: #67e8f9;
     }
 
     span {
-      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
+
+  .device-alarm {
+    color: #fca5a5;
+    text-shadow: 0 0 12px rgba(239, 68, 68, 0.24);
+  }
   // .device-alarm {
   //   display: flex;
   //   // align-items: center;
diff --git a/src/view/layout/aside/combinationMode.vue b/src/view/layout/aside/combinationMode.vue
index 5584e89..30995fc 100644
--- a/src/view/layout/aside/combinationMode.vue
+++ b/src/view/layout/aside/combinationMode.vue
@@ -2,7 +2,7 @@
   <div class="h-full">
     <div
       v-if="mode === 'head'"
-      class="bg-white h-[calc(100%-4px)] text-slate-700 dark:text-slate-300 mx-2 dark:bg-slate-900 flex items-center w-[calc(100vw-600px)] overflow-auto"
+      class="gva-tech-aside-head h-[calc(100%-4px)] mx-2 flex items-center w-[calc(100vw-600px)] overflow-auto"
     >
       <el-menu
         :default-active="routerStore.topActive"
@@ -23,7 +23,7 @@
     </div>
     <div
       v-if="mode === 'normal'"
-      class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
+      class="gva-tech-aside relative h-full border-r"
       :class="isCollapse ? '' : '  px-2'"
       :style="{
         width: layoutSideWidth + 'px'
@@ -48,7 +48,7 @@
         </el-menu>
       </el-scrollbar>
       <div
-        class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
+        class="gva-tech-collapse-btn absolute bottom-8 right-2 w-8 h-8 flex items-center justify-center rounded cursor-pointer"
         :class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
         @click="toggleCollapse"
       >
diff --git a/src/view/layout/aside/headMode.vue b/src/view/layout/aside/headMode.vue
index db48fc9..04d4655 100644
--- a/src/view/layout/aside/headMode.vue
+++ b/src/view/layout/aside/headMode.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-white h-[calc(100%-4px)] text-slate-700 dark:text-slate-300 mx-2 dark:bg-slate-900 flex items-center w-[calc(100vw-600px)] overflow-auto"
+    class="gva-tech-aside-head h-[calc(100%-4px)] mx-2 flex items-center w-[calc(100vw-600px)] overflow-auto"
     ref="menuContainer"
   >
     <el-menu
diff --git a/src/view/layout/aside/normalMode.vue b/src/view/layout/aside/normalMode.vue
index 89d73d9..b395c78 100644
--- a/src/view/layout/aside/normalMode.vue
+++ b/src/view/layout/aside/normalMode.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
+    class="gva-tech-aside relative h-full border-r"
     :class="isCollapse ? '' : '  px-2'"
     :style="{
       width: layoutSideWidth + 'px'
@@ -25,7 +25,7 @@
       </el-menu>
     </el-scrollbar>
     <div
-      class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
+      class="gva-tech-collapse-btn absolute bottom-8 right-2 w-8 h-8 flex items-center justify-center rounded cursor-pointer"
       :class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
       @click="toggleCollapse"
     >
diff --git a/src/view/layout/aside/sidebarMode.vue b/src/view/layout/aside/sidebarMode.vue
index 128c655..2bef05c 100644
--- a/src/view/layout/aside/sidebarMode.vue
+++ b/src/view/layout/aside/sidebarMode.vue
@@ -2,7 +2,7 @@
   <div class="flex h-full">
     <!-- 一级菜单常驻侧边栏 -->
     <div
-      class="relative !h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
+      class="gva-tech-aside-rail relative !h-full border-r"
       :style="{
         width: config.layout_side_collapsed_width + 'px'
       }"
@@ -64,7 +64,7 @@
 
     <!-- 二级菜单并列显示 -->
     <div
-      class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700 px-2"
+      class="gva-tech-aside-secondary relative h-full border-r px-2"
       :style="{
         width: layoutSideWidth + 'px'
       }"
@@ -88,7 +88,7 @@
         </el-menu>
       </el-scrollbar>
       <div
-        class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
+        class="gva-tech-collapse-btn absolute bottom-8 right-2 w-8 h-8 flex items-center justify-center rounded cursor-pointer"
         :class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
         @click="toggleCollapse"
       >
diff --git a/src/view/layout/header/index.vue b/src/view/layout/header/index.vue
index 52631bd..103b5c5 100644
--- a/src/view/layout/header/index.vue
+++ b/src/view/layout/header/index.vue
@@ -5,7 +5,7 @@
 
 <template>
   <div
-    class="flex justify-between fixed top-0 left-0 right-0 z-10 h-16 bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 shadow dark:shadow-gray-700 items-center px-2"
+    class="gva-tech-header flex justify-between fixed top-0 left-0 right-0 z-10 h-16 items-center px-2"
   >
     <div class="flex items-center cursor-pointer flex-1">
       <div
@@ -16,7 +16,7 @@
         <Logo />
         <div
           v-if="!isMobile"
-          class="inline-flex font-bold text-2xl ml-2"
+          class="gva-tech-brand inline-flex font-bold text-2xl ml-2"
           :class="
             (config.side_mode === 'head' ||
               config.side_mode === 'combination') &&
@@ -55,7 +55,7 @@
       <el-dropdown>
         <div class="flex justify-center items-center h-full w-full">
           <span
-            class="cursor-pointer flex justify-center items-center text-black dark:text-gray-100"
+            class="cursor-pointer flex justify-center items-center text-cyan-50"
           >
             <CustomPic />
             <span v-show="!isMobile" class="w-16">{{
diff --git a/src/view/layout/index.vue b/src/view/layout/index.vue
index b67c9c1..60d5105 100644
--- a/src/view/layout/index.vue
+++ b/src/view/layout/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 w-screen h-screen">
+  <div class="gva-tech-layout w-screen h-screen">
     <el-watermark
       v-if="config.show_watermark"
-      :font="font"
+      :font="[font]"
       :z-index="9999"
       :gap="[180, 150]"
       class="!absolute !inset-0 !pointer-events-none"
@@ -14,18 +14,25 @@
         v-if="
           config.side_mode === 'normal' ||
           config.side_mode === 'sidebar' ||
-          (device === 'mobile' && config.side_mode == 'head') ||
-          (device === 'mobile' && config.side_mode == 'combination')
+          (device === 'mobile' && config.side_mode === 'head') ||
+          (device === 'mobile' && config.side_mode === 'combination')
         "
       />
       <gva-aside v-if="config.side_mode === 'combination' && device !== 'mobile'" mode="normal" />
-      <div class="flex-1 w-0 h-full">
+      <div class="gva-tech-main flex-1 w-0 h-full">
         <gva-tabs v-if="config.showTabs" />
-        <div class="overflow-auto px-2" :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'">
+        <div class="gva-tech-scroll overflow-auto px-2" :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'">
           <router-view v-if="reloadFlag" v-slot="{ Component, route }">
-            <div id="gva-base-load-dom" class="gva-body-h bg-gray-50 dark:bg-slate-800">
-              <transition mode="out-in" :name="route.meta.transitionType || config.transition_type">
-                <keep-alive :include="routerStore.keepAliveRouters">
+            <div id="gva-base-load-dom" class="gva-body-h gva-tech-router-view">
+              <div v-if="showPageBanner(route)" class="gva-page-banner">
+                <div>
+                  <div class="gva-page-kicker">INDUSTRIAL CONTROL</div>
+                  <h1 class="gva-page-title">{{ fmtTitle(route.meta.title, route) }}</h1>
+                  <p class="gva-page-subtitle">智慧用电安全监控 · 实时态势感知平台</p>
+                </div>
+              </div>
+              <transition mode="out-in" :name="route.meta['transitionType'] || config.transition_type">
+                <keep-alive :include="keepAliveRouterNames">
                   <component :is="Component" :key="route.fullPath" />
                 </keep-alive>
               </transition>
@@ -45,12 +52,13 @@
   import GvaTabs from './tabs/index.vue'
   import BottomInfo from '@/components/bottomInfo/bottomInfo.vue'
   import { emitter } from '@/utils/bus.js'
-  import { ref, onMounted, nextTick, reactive, watchEffect } from 'vue'
+  import { ref, onMounted, nextTick, computed } from 'vue'
   import { useRouter, useRoute } from 'vue-router'
   import { useRouterStore } from '@/pinia/modules/router'
   import { useUserStore } from '@/pinia/modules/user'
   import { useAppStore } from '@/pinia'
   import { storeToRefs } from 'pinia'
+  import { fmtTitle } from '@/utils/fmtRouterTitle'
   import '@/style/transition.scss'
   const appStore = useAppStore()
   const { config, isDark, device } = storeToRefs(appStore)
@@ -60,23 +68,20 @@
   })
 
   useResponsive(true)
-  const font = reactive({
-    color: 'rgba(0, 0, 0, .15)'
-  })
-
-  watchEffect(() => {
-    font.color = isDark.value ? 'rgba(255,255,255, .15)' : 'rgba(0, 0, 0, .15)'
-  })
+  const font = computed(() => ({
+    color: isDark.value ? 'rgba(255,255,255, .15)' : 'rgba(0, 0, 0, .15)'
+  }))
 
   const router = useRouter()
   const route = useRoute()
   const routerStore = useRouterStore()
+  const keepAliveRouterNames = computed(() => routerStore.keepAliveRouters)
 
   onMounted(() => {
     // 挂载一些通用的事件
     emitter.on('reload', reload)
-    if (userStore.loadingInstance) {
-      userStore.loadingInstance.close()
+    if (userStore['loadingInstance']) {
+      userStore['loadingInstance']['close']()
     }
     nextTick(() => {
       document.getElementsByClassName(
@@ -88,6 +93,13 @@
 
   const userStore = useUserStore()
 
+  const hideBannerRouteNames = ['Login', 'Reload', 'Init']
+  const showPageBanner = (currentRoute) => {
+    if (!currentRoute?.meta?.title) return false
+    if (hideBannerRouteNames.includes(currentRoute.name)) return false
+    return !currentRoute.meta.client && !currentRoute.meta['hidePageHeader']
+  }
+
   const reloadFlag = ref(true)
   let reloadTimer = null
   const reload = async () => {
@@ -95,13 +107,13 @@
       window.clearTimeout(reloadTimer)
     }
     reloadTimer = window.setTimeout(async () => {
-      if (route.meta.keepAlive) {
+      if (route.meta['keepAlive']) {
         reloadFlag.value = false
         await nextTick()
         reloadFlag.value = true
       } else {
-        const title = route.meta.title
-        router.push({ name: 'Reload', params: { title } })
+        const title = route.meta['title']
+        await router.push({ name: 'Reload', params: { title } })
       }
     }, 400)
   }
diff --git a/src/view/layout/tabs/index.vue b/src/view/layout/tabs/index.vue
index 6a6ad8a..bd48110 100644
--- a/src/view/layout/tabs/index.vue
+++ b/src/view/layout/tabs/index.vue
@@ -3,12 +3,12 @@
     @date: 2024/5/7
 !-->
 <template>
-  <div class="gva-tabs">
+  <div class="gva-tabs gva-tech-tabs">
     <el-tabs
       v-model="activeValue"
       :closable="!(historys.length === 1 && $route.name === defaultRouter)"
       type="card"
-      class="bg-white text-slate-700 dark:text-slate-500 dark:bg-slate-900 pt-1"
+      class="pt-1"
       @contextmenu.prevent="openContextMenu($event)"
       @tab-click="changeTab"
       @tab-remove="removeTab"
@@ -44,16 +44,19 @@
     </el-tabs>
 
     <!--自定义右键菜单html代码-->
-    <ul
-      v-show="contextMenuVisible"
-      :style="{ left: left + 'px', top: top + 'px' }"
-      class="contextmenu"
-    >
-      <li @click="closeAll">关闭所有</li>
-      <li @click="closeLeft">关闭左侧</li>
-      <li @click="closeRight">关闭右侧</li>
-      <li @click="closeOther">关闭其他</li>
-    </ul>
+    <teleport to="body">
+      <ul
+        v-show="contextMenuVisible"
+        :style="{ left: left + 'px', top: top + 'px' }"
+        ref="contextMenuRef"
+        class="contextmenu"
+      >
+        <li @click="closeAll">关闭所有</li>
+        <li @click="closeLeft">关闭左侧</li>
+        <li @click="closeRight">关闭右侧</li>
+        <li @click="closeOther">关闭其他</li>
+      </ul>
+    </teleport>
   </div>
 </template>
 
@@ -83,6 +86,7 @@
 
   const left = ref(0)
   const top = ref(0)
+  const contextMenuRef = ref(null)
   const isCollapse = ref(false)
   const isMobile = ref(false)
   const rightActive = ref('')
@@ -93,18 +97,25 @@
     if (historys.value.length === 1 && route.name === defaultRouter.value) {
       return false
     }
-    let id = ''
-    if (e.srcElement.nodeName === 'SPAN') {
-      id = e.srcElement.offsetParent.id
-    } else {
-      id = e.srcElement.id
-    }
+    const tabEl = e.target?.closest?.('[id^="tab-"]')
+    const id = tabEl?.id || ''
     if (id) {
       contextMenuVisible.value = true
 
-      left.value = e.clientX
-      top.value = e.clientY + 10
       rightActive.value = id.substring(4)
+      const tabRect = tabEl.getBoundingClientRect()
+      left.value = tabRect.left
+      top.value = tabRect.bottom + 6
+      nextTick(() => {
+        const menu = contextMenuRef.value
+        if (!menu) return
+        const { offsetWidth, offsetHeight } = menu
+        const edgeSpace = 8
+        const maxLeft = window.innerWidth - offsetWidth - edgeSpace
+        const maxTop = window.innerHeight - offsetHeight - edgeSpace
+        left.value = Math.max(edgeSpace, Math.min(left.value, maxLeft))
+        top.value = Math.max(edgeSpace, Math.min(top.value, maxTop))
+      })
     }
   }
   const closeAll = () => {
@@ -379,16 +390,46 @@
 
 <style lang="scss" scoped>
   .contextmenu {
-    @apply bg-white dark:bg-slate-900 w-28 m-0 py-2.5 px-0 border border-gray-200 text-sm shadow-md rounded absolute z-50 border-solid dark:border-slate-800;
+    min-width: 120px;
+    padding: 6px;
+    margin: 0;
+    position: fixed;
+    z-index: 3000;
+    overflow: hidden;
+    list-style: none;
+    border: 1px solid rgba(0, 212, 255, 0.26);
+    border-radius: 12px;
+    background:
+      linear-gradient(135deg, rgba(9, 24, 48, 0.98), rgba(5, 16, 32, 0.94)),
+      radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.12), transparent 34%);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42), 0 0 22px rgba(0, 212, 255, 0.16);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
   }
 
   .contextmenu li {
-    @apply text-slate-700 dark:text-slate-200 text-base list-none px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer;
+    min-height: 32px;
+    padding: 6px 14px;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--tech-text-muted, #bfdbfe);
+    cursor: pointer;
+    border-radius: 8px;
+    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+
+    &:hover {
+      color: #67e8f9;
+      background: rgba(14, 165, 233, 0.18);
+      box-shadow: inset 0 0 14px rgba(0, 212, 255, 0.08);
+      transform: translateX(2px);
+    }
   }
 
   $base-tag-item-height: 4rem;
 
   .gva-tabs {
+    position: relative;
+
     ::v-deep(.el-tabs--card > .el-tabs__header) {
       border: none;
     }
diff --git a/src/view/login/index.vue b/src/view/login/index.vue
index bf2749c..306bfb0 100644
--- a/src/view/login/index.vue
+++ b/src/view/login/index.vue
@@ -1,18 +1,18 @@
 <template>
-  <div id="userLayout" class="w-full h-full relative login-light-mode">
+  <div id="userLayout" class="tech-login w-full h-full relative login-light-mode">
     <div
-      class="rounded-lg flex items-center justify-evenly w-full h-full md:w-screen md:h-screen md:bg-[#194bfb] bg-white"
+      class="tech-login-shell rounded-lg flex items-center justify-evenly w-full h-full md:w-screen md:h-screen"
     >
       <div class="md:w-3/5 w-10/12 h-full flex items-center justify-evenly">
-        <div class="oblique h-[130%] w-3/5 bg-white dark:bg-slate-900 transform -rotate-12 absolute -ml-52" />
+        <div class="oblique h-[130%] w-3/5 transform -rotate-12 absolute -ml-52" />
         <!-- 分割斜块 -->
-        <div class="z-[999] pt-12 pb-10 md:w-96 w-full rounded-lg flex flex-col justify-between box-border">
+        <div class="tech-login-panel z-[999] pt-12 pb-10 md:w-96 w-full rounded-lg flex flex-col justify-between box-border">
           <div>
             <!-- <div class="flex items-center justify-center">
               <Logo :size="6" />
             </div> -->
             <div class="mb-9">
-              <p class="text-center text-4xl font-bold">
+              <p class="tech-login-title text-center text-4xl font-bold">
                 {{ $GIN_VUE_ADMIN.appName }}
               </p>
             </div>
@@ -72,7 +72,7 @@
           </div>
         </div>
       </div>
-      <div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]">
+      <div class="tech-login-visual hidden md:block w-1/2 h-full float-right">
         <img class="h-full" src="@/assets/new-background.jpg" alt="banner" />
       </div>
     </div>
@@ -219,3 +219,124 @@
     }
   }
 </script>
+
+<style lang="scss" scoped>
+  .tech-login {
+    overflow: hidden;
+    color: var(--tech-text);
+    background:
+      radial-gradient(circle at 18% 18%, rgba(0, 212, 255, 0.2), transparent 28%),
+      radial-gradient(circle at 82% 12%, rgba(245, 158, 11, 0.12), transparent 24%),
+      linear-gradient(135deg, #020617 0%, #07111f 52%, #0f172a 100%);
+  }
+
+  .tech-login-shell {
+    position: relative;
+    isolation: isolate;
+
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      pointer-events: none;
+      content: '';
+    }
+
+    &::before {
+      opacity: 0.38;
+      background-image:
+        linear-gradient(rgba(0, 212, 255, 0.12) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 212, 255, 0.12) 1px, transparent 1px);
+      background-size: 38px 38px;
+      animation: equipmentGridDrift 24s linear infinite;
+    }
+
+    &::after {
+      background: linear-gradient(110deg, transparent 0%, rgba(0, 212, 255, 0.08) 45%, rgba(255, 255, 255, 0.13) 50%, rgba(0, 212, 255, 0.08) 55%, transparent 100%);
+      transform: translateX(-120%);
+      animation: equipmentScanLine 8s ease-in-out infinite;
+    }
+  }
+
+  .oblique {
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    background: linear-gradient(180deg, rgba(5, 16, 32, 0.92), rgba(15, 23, 42, 0.78));
+    box-shadow: 0 0 40px rgba(0, 212, 255, 0.12);
+  }
+
+  .tech-login-panel {
+    position: relative;
+    padding-right: 28px;
+    padding-left: 28px;
+    overflow: hidden;
+    border: 1px solid rgba(0, 212, 255, 0.26);
+    background: linear-gradient(135deg, rgba(9, 24, 48, 0.86), rgba(5, 16, 32, 0.72));
+    box-shadow: var(--tech-shadow), inset 0 0 26px rgba(0, 212, 255, 0.08);
+    backdrop-filter: blur(14px);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -36%;
+      width: 36%;
+      height: 100%;
+      content: '';
+      pointer-events: none;
+      background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
+      animation: equipmentCardGlint 6.2s ease-in-out infinite;
+    }
+
+    :deep(.el-input__wrapper) {
+      height: 44px;
+      border: 1px solid rgba(0, 212, 255, 0.24);
+      border-radius: 12px;
+      background: rgba(2, 8, 23, 0.68);
+      box-shadow: inset 0 0 16px rgba(0, 212, 255, 0.08);
+    }
+
+    :deep(.el-input__inner) {
+      color: var(--tech-text);
+    }
+
+    :deep(.el-input__inner::placeholder) {
+      color: rgba(191, 226, 255, 0.5);
+    }
+
+    :deep(.el-button--primary) {
+      border: 0;
+      color: #031424;
+      font-weight: 800;
+      letter-spacing: 0.2em;
+      background: linear-gradient(135deg, #67e8f9 0%, #00d4ff 45%, #2563eb 100%);
+      box-shadow: 0 0 24px rgba(0, 212, 255, 0.32);
+    }
+  }
+
+  .tech-login-title {
+    color: var(--tech-text-strong);
+    letter-spacing: 0.12em;
+    text-shadow: 0 0 22px rgba(0, 212, 255, 0.48);
+  }
+
+  .tech-login-visual {
+    position: relative;
+    overflow: hidden;
+    background: #020617;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      content: '';
+      background: linear-gradient(90deg, rgba(2, 8, 23, 0.2), rgba(0, 212, 255, 0.16));
+      pointer-events: none;
+    }
+
+    img {
+      width: 100%;
+      object-fit: cover;
+      opacity: 0.82;
+      filter: saturate(1.18) contrast(1.08);
+    }
+  }
+</style>
diff --git a/src/view/person/person.vue b/src/view/person/person.vue
index 9920aae..e01544d 100644
--- a/src/view/person/person.vue
+++ b/src/view/person/person.vue
@@ -553,14 +553,58 @@
 
 <style lang="scss">
   .profile-container {
-    @apply p-4 lg:p-6 min-h-screen bg-gray-50 dark:bg-slate-900;
+    position: relative;
+    min-height: 100vh;
+    padding: 18px;
+    color: var(--tech-text);
+    background:
+      radial-gradient(circle at 14% 8%, rgba(0, 212, 255, 0.12), transparent 28%),
+      radial-gradient(circle at 90% 0%, rgba(245, 158, 11, 0.08), transparent 24%),
+      linear-gradient(135deg, rgba(2, 8, 23, 0.78), rgba(7, 17, 31, 0.94));
+    border-radius: 18px;
+
+    > .bg-white,
+    > .dark\:bg-slate-800,
+    .profile-card {
+      position: relative;
+      overflow: hidden;
+      color: var(--tech-text) !important;
+      border: 1px solid rgba(0, 212, 255, 0.22);
+      background: linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74)) !important;
+      box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.24);
+    }
+
+    > .bg-white > .relative {
+      background:
+        radial-gradient(circle at 18% 30%, rgba(0, 212, 255, 0.22), transparent 32%),
+        linear-gradient(110deg, rgba(8, 47, 73, 0.9), rgba(15, 23, 42, 0.76)) !important;
+    }
+
+    h2,
+    .text-2xl {
+      color: var(--tech-text-strong) !important;
+      text-shadow: 0 0 14px rgba(0, 212, 255, 0.28);
+    }
+
+    .text-gray-500,
+    .text-gray-600,
+    .dark\:text-gray-300,
+    .dark\:text-gray-400 {
+      color: var(--tech-text-muted) !important;
+    }
 
     .bg-pattern {
       background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     }
 
     .profile-card {
-      @apply shadow-sm hover:shadow-md transition-shadow duration-300;
+      transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
+
+      &:hover {
+        border-color: rgba(0, 212, 255, 0.5);
+        box-shadow: var(--tech-shadow);
+        transform: translateY(-2px);
+      }
     }
 
     .profile-action-btn {
@@ -571,7 +615,15 @@
     }
 
     .stat-card {
-      @apply p-4 lg:p-6 rounded-lg bg-gray-50 dark:bg-slate-700/50 text-center hover:shadow-md transition-all duration-300;
+      @apply p-4 lg:p-6 rounded-lg text-center transition-all duration-300;
+      border: 1px solid rgba(0, 212, 255, 0.18);
+      background: rgba(2, 8, 23, 0.52) !important;
+      box-shadow: inset 0 0 18px rgba(0, 212, 255, 0.06);
+
+      &:hover {
+        border-color: rgba(0, 212, 255, 0.46);
+        transform: translateY(-2px);
+      }
     }
 
     .custom-tabs {
diff --git a/src/view/securityControl/alarmList/index.vue b/src/view/securityControl/alarmList/index.vue
index c28b954..7334dd2 100644
--- a/src/view/securityControl/alarmList/index.vue
+++ b/src/view/securityControl/alarmList/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
-    <div class="p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2">
+    <div class="alarm-filter-panel tech-card p-4 rounded my-2">
       <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="报警事件" name="first"></el-tab-pane>
         <el-tab-pane label="预警事件" name="second"></el-tab-pane>
@@ -129,7 +129,7 @@
         orient: 'vertical',
         right: 8,
         top: 'middle',
-        textStyle: { color: '#606266', fontSize: 12 },
+        textStyle: { color: '#bfdbfe', fontSize: 12, fontWeight: 600 },
         itemWidth: 10,
         itemHeight: 10
       },
@@ -144,7 +144,7 @@
           labelLine: { show: false },
           itemStyle: {
             borderRadius: 6,
-            borderColor: '#fff',
+            borderColor: 'rgba(2, 8, 23, 0.92)',
             borderWidth: 2
           },
           // 中心文字
@@ -156,8 +156,8 @@
               style: {
                 text: totalCount,
                 textAlign: 'center',
-                fill: '#303133',
-                fontSize: 22,
+                fill: '#e0f7ff',
+                fontSize: 26,
                 fontWeight: 'bold'
               }
             },
@@ -168,7 +168,7 @@
               style: {
                 text: '总数',
                 textAlign: 'center',
-                fill: '#909399',
+                fill: '#7dd3fc',
                 fontSize: 12
               }
             }
@@ -218,8 +218,8 @@
       tooltip: {
         trigger: 'axis',
         backgroundColor: 'rgba(15, 23, 42, 0.9)',
-        borderColor: 'transparent',
-        textStyle: { color: '#fff' }
+        borderColor: 'rgba(0, 212, 255, 0.28)',
+        textStyle: { color: '#e0f7ff' }
       },
       grid: {
         left: 36,
@@ -231,16 +231,16 @@
         type: 'category',
         data: xAxisData,
         boundaryGap: false,
-        axisLine: { lineStyle: { color: '#e4e7ed' } },
-        axisLabel: { color: '#909399', fontSize: 11 }
+        axisLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.34)' } },
+        axisLabel: { color: '#93c5fd', fontSize: 11 }
       },
       yAxis: {
         type: 'value',
         minInterval: 1,
         axisLine: { show: false },
         axisTick: { show: false },
-        splitLine: { lineStyle: { color: '#f0f2f5' } },
-        axisLabel: { color: '#909399', fontSize: 11 }
+        splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.12)' } },
+        axisLabel: { color: '#93c5fd', fontSize: 11 }
       },
       series: [
         {
@@ -250,8 +250,8 @@
           symbol: 'none', // 不画数据点，全一条线
           smooth: true,
           lineStyle: {
-            color: '#409EFF',
-            width: 2
+            color: '#00d4ff',
+            width: 3
           },
           // 折线下面积渐变
           areaStyle: {
@@ -262,8 +262,8 @@
               x2: 0,
               y2: 1,
               colorStops: [
-                { offset: 0, color: 'rgba(64, 158, 255, 0.35)' },
-                { offset: 1, color: 'rgba(64, 158, 255, 0.02)' }
+                { offset: 0, color: 'rgba(0, 212, 255, 0.36)' },
+                { offset: 1, color: 'rgba(0, 212, 255, 0.02)' }
               ]
             }
           }
@@ -342,20 +342,59 @@
   .gva-table-box {
     padding-top: 0 !important;
   }
+  .alarm-filter-panel {
+    margin-bottom: 12px;
+  }
+
   .echarts-box {
     display: flex;
+    gap: 14px;
+    margin-bottom: 16px;
+
     > .item {
-      height: 251px;
+      position: relative;
+      height: 270px;
+      padding: 16px;
+      overflow: hidden;
+      border: 1px solid rgba(0, 212, 255, 0.22);
+      border-radius: 16px;
+      background: linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74));
+      box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
+      transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
+
+      &:hover {
+        border-color: rgba(0, 212, 255, 0.5);
+        box-shadow: var(--tech-shadow);
+        transform: translateY(-2px);
+      }
 
       &.pie {
-        width: 370px;
+        width: 390px;
       }
       &.broken-line {
         flex: 1;
       }
       .title {
-        font-size: 14px;
-        font-weight: bold;
+        position: relative;
+        padding-left: 12px;
+        margin: 0 0 10px;
+        font-size: 17px;
+        font-weight: 800;
+        color: var(--tech-text-strong);
+        letter-spacing: 0.06em;
+        text-shadow: 0 0 14px rgba(0, 212, 255, 0.3);
+
+        &::before {
+          position: absolute;
+          top: 3px;
+          bottom: 3px;
+          left: 0;
+          width: 3px;
+          content: '';
+          border-radius: 999px;
+          background: linear-gradient(180deg, var(--tech-cyan), var(--tech-blue));
+          box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
+        }
       }
     }
   }
diff --git a/vite.config.js b/vite.config.js
index e960826..43f7257 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,6 +10,7 @@ import VueFilePathPlugin from './vitePlugin/componentName/index.js'
 import { svgBuilder } from 'vite-auto-import-svg'
 import { AddSecret } from './vitePlugin/secret'
 import UnoCSS from '@unocss/vite'
+import autoprefixer from 'autoprefixer'
 
 // @see https://cn.vitejs.dev/config/
 export default ({ mode }) => {
@@ -59,6 +60,13 @@ export default ({ mode }) => {
       'process.env': {}
     },
     css: {
+      postcss: {
+        plugins: [
+          autoprefixer({
+            overrideBrowserslist: ['Android > 39', 'Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15']
+          })
+        ]
+      },
       preprocessorOptions: {
         scss: {
           api: 'modern-compiler' // or "modern"