初始化：静态菜单版 数据大屏管理系统，对接KLPL3数据库

src/modules/dashboardBig/assets/scss/_variables.scss

@@ -0,0 +1,43 @@
+$colors: (
+  "primary": #1A5CD7,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "grey-1": #999999,
+  "dark": #222222,
+  "black-1": #171823,
+  "icon": #5cd9e8,
+  "success": #00d9a6,
+  "warning": #ffa726,
+  "danger": #ff5252,
+  "light-blue": #00d4ff
+);
+
+$screen-width: 1920px;
+$screen-height: 1080px;
+
+$border-radius-sm: 4px;
+$border-radius-md: 8px;
+$border-radius-lg: 12px;
+
+$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
+$shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
+$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 24px;
+$font-size-xxl: 32px;
+$font-size-title: 48px;
+
+$transition-fast: 0.2s ease;
+$transition-normal: 0.3s ease;
+$transition-slow: 0.5s ease;

src/modules/dashboardBig/assets/scss/style.scss

@@ -0,0 +1,396 @@
+@import "./_variables.scss";
+
+.dashboard-container {
+  width: 100%;
+  max-width: $screen-width;
+  height: auto;
+  min-height: calc(100vh - 180px);
+  background: map-get($colors, "black-1");
+  position: relative;
+  overflow: hidden;
+  margin: 0 auto;
+  border-radius: $border-radius-lg;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      radial-gradient(ellipse at 20% 20%, rgba(26, 92, 215, 0.15) 0%, transparent 50%),
+      radial-gradient(ellipse at 80% 80%, rgba(92, 217, 232, 0.1) 0%, transparent 50%);
+    pointer-events: none;
+  }
+}
+
+.dashboard-header {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $spacing-xl;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  
+  .header-title {
+    font-size: $font-size-xl;
+    font-weight: bold;
+    color: map-get($colors, "white");
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: "";
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(180deg, map-get($colors, "primary"), map-get($colors, "icon"));
+      border-radius: 2px;
+      margin-right: $spacing-md;
+    }
+  }
+  
+  .header-info {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xl;
+    
+    .info-item {
+      display: flex;
+      align-items: center;
+      gap: $spacing-sm;
+      color: map-get($colors, "grey-1");
+      font-size: $font-size-sm;
+      
+      .icon {
+        width: 16px;
+        height: 16px;
+        color: map-get($colors, "icon");
+      }
+    }
+    
+    .time-display {
+      font-size: $font-size-lg;
+      color: map-get($colors, "white");
+      font-family: 'Courier New', monospace;
+    }
+  }
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-auto-rows: minmax(320px, auto);
+  gap: $spacing-md;
+  padding: $spacing-md;
+  height: calc(100% - 80px);
+  min-height: 500px;
+  
+  .grid-left {
+    grid-column: span 1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+  }
+  
+  .grid-center {
+    grid-column: span 2;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+  }
+  
+  .grid-right {
+    grid-column: span 1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+  }
+  
+  .grid-top {
+    grid-column: span 2;
+  }
+  
+  .grid-bottom {
+    grid-column: span 2;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    
+    .grid-center,
+    .grid-top,
+    .grid-bottom {
+      grid-column: span 1;
+    }
+  }
+}
+
+.dashboard-card {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: $border-radius-lg;
+  padding: $spacing-md;
+  position: relative;
+  overflow: hidden;
+  min-height: 200px;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, map-get($colors, "primary"), map-get($colors, "icon"));
+  }
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $spacing-md;
+    
+    .card-title {
+      font-size: $font-size-md;
+      color: map-get($colors, "white");
+      font-weight: 500;
+    }
+    
+    .card-action {
+      color: map-get($colors, "grey-1");
+      font-size: $font-size-xs;
+      cursor: pointer;
+      
+      &:hover {
+        color: map-get($colors, "icon");
+      }
+    }
+  }
+  
+  .card-body {
+    height: calc(100% - 40px);
+    min-height: 120px;
+  }
+}
+
+.stat-card {
+  background: linear-gradient(135deg, rgba(26, 92, 215, 0.2) 0%, rgba(92, 217, 232, 0.1) 100%);
+  border: 1px solid rgba(26, 92, 215, 0.3);
+  
+  .stat-value {
+    font-size: $font-size-title;
+    font-weight: bold;
+    color: map-get($colors, "white");
+    line-height: 1.2;
+  }
+  
+  .stat-label {
+    font-size: $font-size-sm;
+    color: map-get($colors, "grey-1");
+    margin-top: $spacing-xs;
+  }
+  
+  .stat-trend {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+    margin-top: $spacing-sm;
+    font-size: $font-size-xs;
+    
+    &.up {
+      color: map-get($colors, "success");
+    }
+    
+    &.down {
+      color: map-get($colors, "danger");
+    }
+  }
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+.ranking-list {
+  .ranking-item {
+    display: flex;
+    align-items: center;
+    padding: $spacing-sm 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .rank {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: $font-size-xs;
+      font-weight: bold;
+      margin-right: $spacing-sm;
+      
+      &.top3 {
+        background: linear-gradient(135deg, map-get($colors, "warning"), map-get($colors, "danger"));
+        color: white;
+      }
+      
+      &:not(.top3) {
+        background: rgba(255, 255, 255, 0.1);
+        color: map-get($colors, "grey-1");
+      }
+    }
+    
+    .info {
+      flex: 1;
+      
+      .name {
+        font-size: $font-size-sm;
+        color: map-get($colors, "white");
+      }
+      
+      .value {
+        font-size: $font-size-xs;
+        color: map-get($colors, "grey-1");
+      }
+    }
+    
+    .trend {
+      font-size: $font-size-xs;
+      
+      &.up {
+        color: map-get($colors, "success");
+      }
+      
+      &.down {
+        color: map-get($colors, "danger");
+      }
+    }
+  }
+}
+
+.process-panel {
+  .process-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $spacing-sm 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .label {
+      font-size: $font-size-sm;
+      color: map-get($colors, "grey-1");
+    }
+    
+    .value {
+      font-size: $font-size-md;
+      font-weight: 500;
+      color: map-get($colors, "white");
+      
+      .unit {
+        font-size: $font-size-xs;
+        color: map-get($colors, "grey-1");
+        margin-left: $spacing-xs;
+      }
+    }
+  }
+}
+
+.progress-ring {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  margin: 0 auto;
+  
+  .ring-bg {
+    stroke: rgba(255, 255, 255, 0.1);
+    stroke-width: 8;
+    fill: none;
+  }
+  
+  .ring-progress {
+    stroke: url(#progressGradient);
+    stroke-width: 8;
+    fill: none;
+    stroke-linecap: round;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    transition: stroke-dashoffset 0.5s ease;
+  }
+  
+  .ring-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    
+    .ring-value {
+      font-size: $font-size-xl;
+      font-weight: bold;
+      color: map-get($colors, "white");
+    }
+    
+    .ring-label {
+      font-size: $font-size-xs;
+      color: map-get($colors, "grey-1");
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  
+  th, td {
+    padding: $spacing-sm;
+    text-align: left;
+    font-size: $font-size-xs;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+  
+  th {
+    color: map-get($colors, "grey-1");
+    font-weight: 500;
+  }
+  
+  td {
+    color: map-get($colors, "white");
+  }
+  
+  tr:hover td {
+    background: rgba(255, 255, 255, 0.05);
+  }
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}