Parcourir la source

首页样式修改

liujiejie il y a 2 mois
Parent
commit
951e62f061

+ 122 - 3
src/views/admin/cockpitManage/cockpit-dashboard.scss

@@ -487,7 +487,11 @@
   }
 
   /* 第一列数据强制左对齐 */
-  .cockpit-unified-table #Tabtab .el-table__body td.el-table__cell:first-child .cell,
+  .cockpit-unified-table
+    #Tabtab
+    .el-table__body
+    td.el-table__cell:first-child
+    .cell,
   .cockpit-unified-table #Tabtab .el-table__body tr td:first-child .cell {
     justify-content: flex-start !important;
     text-align: left !important;
@@ -816,6 +820,46 @@ html[data-theme="tech-blue"] .cockpit-dashboard-page {
     linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
   background-size: 100% 100%, 24px 24px, 24px 24px;
 
+  .cockpit-dashboard__map {
+    filter: saturate(1.12) contrast(1.08) brightness(0.9);
+  }
+
+  .cockpit-dashboard__map::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    background: radial-gradient(
+        ellipse 70% 48% at 50% 45%,
+        rgba(20, 86, 165, 0.12) 0%,
+        rgba(0, 0, 0, 0) 74%
+      ),
+      linear-gradient(
+        180deg,
+        rgba(0, 8, 20, 0.26) 0%,
+        rgba(0, 8, 20, 0) 18%,
+        rgba(0, 8, 20, 0) 82%,
+        rgba(0, 8, 20, 0.24) 100%
+      );
+  }
+
+  .cockpit-dashboard__map::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    background-image: repeating-linear-gradient(
+      to bottom,
+      rgba(0, 235, 255, 0.04) 0,
+      rgba(0, 235, 255, 0.04) 1px,
+      transparent 1px,
+      transparent 4px
+    );
+    opacity: 0.45;
+  }
+
   .cockpit-dashboard__left,
   .cockpit-dashboard__right {
     scrollbar-width: none;
@@ -857,6 +901,62 @@ html[data-theme="tech-blue"] .cockpit-dashboard-page {
       pointer-events: none;
       z-index: 1;
     }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px rgba(0, 186, 255, 0.18),
+        inset 0 0 24px rgba(0, 122, 210, 0.14);
+      z-index: 1;
+    }
+  }
+
+  /* section 盒子内部科技填充纹理 */
+  .cockpit-panel > * {
+    position: relative;
+    z-index: 2;
+  }
+
+  .cockpit-panel::before,
+  .cockpit-panel::after {
+    border-radius: inherit;
+  }
+
+  .cockpit-panel {
+    background-image: linear-gradient(
+        115deg,
+        rgba(0, 170, 255, 0.09) 0%,
+        rgba(0, 170, 255, 0) 34%
+      ),
+      linear-gradient(
+        180deg,
+        rgba(0, 255, 255, 0.05) 0%,
+        rgba(0, 255, 255, 0) 24%
+      ),
+      repeating-linear-gradient(
+        90deg,
+        rgba(0, 210, 255, 0.035) 0,
+        rgba(0, 210, 255, 0.035) 1px,
+        transparent 1px,
+        transparent 18px
+      ),
+      repeating-linear-gradient(
+        0deg,
+        rgba(0, 170, 220, 0.028) 0,
+        rgba(0, 170, 220, 0.028) 1px,
+        transparent 1px,
+        transparent 18px
+      ),
+      linear-gradient(
+        180deg,
+        rgba(6, 22, 45, 0.97) 0%,
+        rgba(4, 16, 32, 0.98) 52%,
+        rgba(2, 10, 22, 0.99) 100%
+      ) !important;
+    background-blend-mode: screen, screen, normal, normal, normal;
   }
 
   .cockpit-panel__title,
@@ -875,6 +975,15 @@ html[data-theme="tech-blue"] .cockpit-dashboard-page {
 
   .cockpit-panel .centeredh3 span {
     color: #5ec8ff;
+    text-shadow: 0 0 10px rgba(86, 200, 255, 0.32);
+  }
+
+  .cockpit-panel__title,
+  .cockpit-panel h3,
+  .cockpit-panel .backbone h3,
+  .cockpit-panel .BOXYI > h3,
+  .cockpit-panel .centeredh3 {
+    text-shadow: 0 0 10px rgba(0, 170, 255, 0.28);
   }
 
   .cockpit-panel:not(.cockpit-panel--health):not(.cockpit-panel--inbound)
@@ -888,12 +997,18 @@ html[data-theme="tech-blue"] .cockpit-dashboard-page {
 
   /* 统一列表表(科技蓝) */
   .cockpit-unified-table-head {
-    background: rgba(0, 24, 44, 0.55) !important;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 36, 72, 0.72) 0%,
+      rgba(0, 24, 44, 0.58) 100%
+    ) !important;
     color: #ffffff !important;
+    box-shadow: inset 0 -1px 0 rgba(0, 190, 255, 0.22);
 
     span {
       color: #ffffff !important;
       font-weight: 400;
+      text-shadow: 0 0 8px rgba(0, 168, 255, 0.22);
     }
   }
 
@@ -957,6 +1072,8 @@ html[data-theme="tech-blue"] .cockpit-dashboard-page {
       color: #fff !important;
       background: var(--cockpit-input-bg) !important;
       border-color: var(--cockpit-input-border) !important;
+      box-shadow: inset 0 0 0 1px rgba(0, 150, 220, 0.18),
+        0 0 12px rgba(0, 122, 210, 0.08);
     }
 
     .el-switch__label {
@@ -976,6 +1093,7 @@ html[data-theme="tech-blue"] .cockpit-dashboard-page {
     .el-switch.is-checked .el-switch__core {
       border-color: var(--cockpit-accent);
       background-color: rgba(0, 120, 200, 0.85);
+      box-shadow: 0 0 14px rgba(0, 190, 255, 0.35);
     }
   }
 
@@ -1033,7 +1151,8 @@ html[data-theme="tech-blue"] .cockpit-dashboard-page {
     background: rgba(0, 22, 42, 0.65) !important;
     border: none !important;
     border-radius: 2px;
-    box-shadow: inset 0 0 0 1px rgba(0, 100, 170, 0.35);
+    box-shadow: inset 0 0 0 1px rgba(0, 122, 200, 0.55),
+      inset 0 0 16px rgba(0, 72, 120, 0.3);
     transition: box-shadow 0.2s;
 
     &::before,

+ 5 - 6
src/views/admin/cockpitManage/component/CockpitHealthPanel.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="cockpit-health-panel">
-    <CockpitTechTabs
-      v-model="activeTab"
-      :tabs="healthTabs"
-      variant="panel"
-    />
+    <CockpitTechTabs v-model="activeTab" :tabs="healthTabs" variant="panel" />
 
     <div class="cockpit-health-panel__tab-body">
       <div
@@ -25,7 +21,10 @@
           </ul>
           <div ref="chartRef" class="cockpit-health-panel__chart"></div>
         </div>
-        <CockpitHealthTable ref="healthTable" class="cockpit-health-panel__table" />
+        <CockpitHealthTable
+          ref="healthTable"
+          class="cockpit-health-panel__table"
+        />
       </div>
 
       <div