Merge branch 'main' of http://hnucm.vip:18418/zS/go-view-fetch

默认500宽调整为450宽适配1920屏幕
样式优化
2025-08-21 21:36:55 +08:00 · 2025-08-21 21:36:26 +08:00 · 2025-08-21 21:35:17 +08:00 · 2025-08-21 21:34:32 +08:00 · 2025-08-21 21:34:01 +08:00 · 2025-08-21 21:33:31 +08:00
11 changed files with 467 additions and 425 deletions
--- a/src/assets/images/chart/charts/device_status.png
+++ b/src/assets/images/chart/charts/device_status.png
--- a/src/packages/components/Charts/MyComponents/AlarmList/config.ts
+++ b/src/packages/components/Charts/MyComponents/AlarmList/config.ts
@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { AlarmListConfig } from './index'
 import dataJson from './data.json'
-import { chartInitConfig } from '@/settings/designSetting'
 export enum FontWeightEnum {
  NORMAL = '常规',
  BOLD = '加粗',
@ -33,8 +32,8 @@ export const option = {
    '未解决': '#FF4D4F',
    '已解决': '#ffffff'
  },
-  headerHeight: 30,
-  itemHeight: 30,
+  headerHeight: 28,
+  itemHeight: 28,
  fontSize: 12,
  title: '近60分钟报警信息',
  titleSize: 17,
@ -43,8 +42,8 @@ export const option = {
  fontWeight: 'normal',
  fontStyle: 'normal',
  paddingX: 40,
-  paddingY: -19,
-  letterSpacing: 2,
+  paddingY: -30,
+  letterSpacing: 1,
  isShowButton: false
 }

@ -52,6 +51,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
  public key = AlarmListConfig.key
  public chartConfig = AlarmListConfig
  public option = option
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+

 }
--- a/src/packages/components/Charts/MyComponents/AlarmList/config.vue
+++ b/src/packages/components/Charts/MyComponents/AlarmList/config.vue
@ -38,7 +38,7 @@

 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 const props = defineProps({
  optionData: {
--- a/src/packages/components/Charts/MyComponents/AlarmList/index.vue
+++ b/src/packages/components/Charts/MyComponents/AlarmList/index.vue
@ -3,9 +3,7 @@
    <div class="go-alarm-list">
      <div class="header">
        <div class="title">
-          <!-- <div class="title-prefix">
-            <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
-          </div> -->
+
          <div class="title-text">
            <span :style="{
              color: option.titleColor,
@ -19,13 +17,12 @@
          </div>
        </div>
        <div v-if="option.isShowButton" class="header-right-squares">
-          <!-- <div class="square" style="background-color: #2e69e0"></div>
+          <div class="square" style="background-color: #2e69e0"></div>
          <div class="square" style="background-color: #2e9bf0"></div>
-          <div class="square" style="background-color: #2ef0b3"></div> -->
+          <div class="square" style="background-color: #2ef0b3"></div>
        </div>
      </div>
      <div class="table-header" :style="{
-        //  backgroundColor: option.headerBackgroundColor,
        height: option.headerHeight + 'px'
      }">
        <div v-for="header in option.header" :key="header" class="header-item"
@ -74,53 +71,40 @@ const getStatusColor = (status: string) => {
 </script>

 <style lang="scss" scoped>
+.SmallBorder {
+  position: relative;
+  // background-color: #ffffff;
+}
+
 .go-alarm-list {
  position: absolute;
  top: 0;
+  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
-  // background-color: #2066df;
  color: #ffffff;
  padding: 12px;
  margin-top: 5px;
  box-sizing: border-box;
+  // background-color: #4da6ff;
+  z-index: 10;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    margin-bottom: 3px;

    .title {
      display: flex;
      align-items: center;
-      margin-top: -5px;
-
-      // .title-prefix {
-      //   width: 40px;
-      //   height: 35px;
-      //   // background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
-      //   clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
-      //   display: flex;
-      //   justify-content: center;
-      //   align-items: center;
-      //   margin-left: 0px;
-
-      //   .title-icon {
-      //     font-size: 22px;
-      //   }
-      // }

      .title-text {
        height: 35px;
        display: flex;
        align-items: center;
-        // background-image: linear-gradient(to bottom, #17325f, #0e2142);
        padding: 0 20px 0 20px;
-        // margin-left: -10px;
-        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
      }
    }

@ -142,6 +126,7 @@ const getStatusColor = (status: string) => {
    padding: 0 10px;
    background: linear-gradient(to top, #226493c8, #0f2448);
    border-bottom: 2px solid #4da6ff;
+    margin-top: 10px;

    .header-item {
      flex: 1 0 25%;
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
@ -2,22 +2,20 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { DeviceStatusConfig } from './index'
 import dataJson from './data.json'
-
 export const option = {
  dataset: dataJson.source,
  header: ['所属企业', '设备类型', '设备名称'],
-  headerTextColor: '#ffffff',
+  headerTextColor: '#7F9DB4',
  textColor: '#ffffff',
-  headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
-  itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
-  timeTextColor: '#ffffff',
-  timeBgColor: '#FF4D4F',
-  headerHeight: 40,
-  itemHeight: 35,
-  fontSize: 14,
+  itemBackgroundColor: '#212936',
+  timeTextColor: '#B75055',
+  timeBgColor: '#562922',
+  headerHeight: 30,
+  itemHeight: 28,
+  fontSize: 11,
  title: '设备实时在线概况',
-  titleSize: 20,
-  titleColor: '#B4E4FF',
+  titleSize: 17,
+  titleColor: '#ffffff',
  iconColor: '#00E5FF',
  onlineRate: 75,
  onlineDevice: 23,
@ -26,7 +24,11 @@ export const option = {
  headerBgColor2: '#003a8c',
  legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
  progressColor: '#00E5FF',
-  progressBgColor: '#1A385A'
+  progressBgColor: 'rgba(0, 0, 0, 0.1)',
+  progressTextColor: '#DDE3E9',
+  paddingX: 60,
+  paddingY: -4,
+  letterSpacing: 1
 }

 export default class Config extends PublicConfigClass implements CreateComponentType {
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
@ -1,67 +1,90 @@
 <template>
-  <div class="go-device-status">
-    <div class="header">
-      <div class="header-left">
-        <div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }">
-          <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
-        </div>
-        <div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }">
-          <span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+  <SmallBorder>
+    <div class="go-device-status">
+      <div class="header">
+        <div class="header-left" :style="{
+          marginLeft:
+            option.paddingX
+            + 'px',
+          marginTop:
+            option.paddingY
+            + 'px'
+        }
+          ">
+          <div class="title-text-bg" :style="{
+
+          }">
+            <span class="title-text" :style="{
+              letterSpacing: option.letterSpacing + 'px',
+              color: option.titleColor, fontSize: option.titleSize + 'px'
+            }">{{
+              option.title }}</span>
+          </div>
        </div>
      </div>
-      <div class="header-right">
-        <div class="legend">
-          <div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
-        </div>
-      </div>
-    </div>
-    <div class="status-section">
-      <div class="online-rate">
+      <div class="status-section">
        <div class="rate-circle-bg">
-          <div
-            class="rate-circle"
-            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
-          >
+          <div class="rate-circle"
+            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }">
            <div class="rate-text-wrapper">
-              <span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
-              <span class="rate-percent" :style="{ color: option.progressColor }">%</span>
+              <span class="rate-text" :style="{ color: option.progressTextColor }">{{ option.onlineRate }}</span>
+              <span class="rate-percent" :style="{ color: option.progressTextColor }">%</span>
            </div>
          </div>
        </div>
-        <span class="rate-label">设备在线率</span>
-      </div>
-      <div class="progress-bar-wrapper">
-        <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
-          <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
+
+        <div class="online-content">
+          <div class="text-content">
+            <span class="online-text">
+              设备在线率
+            </span>
+            <div class="online-nums">
+              <span class="online-num">{{ option.onlineDevice }}</span>
+              <span class="total-num">/{{ option.totalDevice }}</span>
+            </div>
+          </div>
+
+          <div class="progress-bar-wrapper">
+            <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
+              <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }">
+              </div>
+            </div>
+          </div>
        </div>
      </div>
-      <div class="device-count">
-        <span class="online">{{ option.onlineDevice }}</span>
-        <span class="total">/ {{ option.totalDevice }}</span>
+      <div class="table-header" :style="{
+        height: option.headerHeight + 'px'
+      }">
+        <div v-for="header in option.header" :key="header" class="header-item"
+          :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+          {{ header }}
+        </div>
+        <div class="header-item"></div>
      </div>
-    </div>
-    <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
-      <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
-        {{ header }}
-      </div>
-      <div class="header-item"></div>
-    </div>
-    <div class="table-body">
-      <div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
-        <div class="row-item time-wrapper">
-          <div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
-            {{ item.time }}
+      <div class="table-body">
+        <div v-for="(item, index) in option.dataset" :key="index" class="table-row"
+          :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
+            item.enterprise }}</div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
+            item.deviceType }}</div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
+            item.deviceName }}</div>
+          <div class="row-item time-wrapper">
+            <div class="time"
+              :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
+              {{ item.time }}
+            </div>
          </div>
        </div>
      </div>
    </div>
-  </div>
+  </SmallBorder>
+
 </template>

 <script setup lang="ts">
+import SmallBorder from '../SmallBorder/index.vue'
 import { PropType, computed } from 'vue'
 import { option as configOption } from './config'

@ -76,56 +99,39 @@ const option = computed(() => props.chartConfig.option)
 </script>

 <style lang="scss" scoped>
+SmallBorder {
+  position: relative;
+}
+
 .go-device-status {
+  position: absolute;
+  top: 0;
+  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
-  background-color: #041126;
+  // background-color: #041126;
  color: #ffffff;
-  padding: 15px;
+  padding: 10px 15px;
+  // padding-bottom: 3px;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    margin-bottom: 10px;
+    margin-bottom: 5px;

-    .header-left {
-      display: flex;
-      align-items: center;
-      .title-icon-bg {
-        width: 50px;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
-        .title-icon {
-          font-size: 28px;
-        }
-      }
-      .title-text-bg {
-        height: 40px;
-        padding: 0 20px 0 30px;
-        margin-left: -10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
-        .title-text {
-          text-shadow: 0 0 10px rgba(180, 228, 255, 0.8);
-        }
-      }
-    }

    .header-right {
      display: flex;
      align-items: center;
+
      .legend {
        display: flex;
        margin-right: 10px;
+
        .legend-item {
          width: 15px;
          height: 8px;
@ -137,102 +143,147 @@ const option = computed(() => props.chartConfig.option)

  .status-section {
    display: flex;
+    flex-direction: row;
+
    align-items: center;
-    margin-bottom: 15px;
+    margin-bottom: -2px;
    padding: 0 10px;
-    .online-rate {
+
+    .rate-circle-bg {
+      position: relative;
+      width: 60px;
+      height: 60px;
      display: flex;
+      justify-content: center;
      align-items: center;
-      margin-right: 15px;
-      .rate-circle-bg {
-        position: relative;
-        width: 60px;
-        height: 60px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        &::after {
-          content: '';
-          position: absolute;
-          top: -5px;
-          left: -5px;
-          right: -5px;
-          bottom: -5px;
-          border-radius: 50%;
-          filter: blur(5px);
-          background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%);
-        }
-      }
-      .rate-circle {
-        width: 60px;
-        height: 60px;
+      padding-bottom: 2px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        right: -5px;
+        bottom: -5px;
        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        z-index: 1;
-        &::before {
-          content: '';
-          width: 48px;
-          height: 48px;
-          background-color: #041126;
-          border-radius: 50%;
-        }
-        .rate-text-wrapper {
-          position: absolute;
-          .rate-text {
-            font-size: 24px;
-            font-weight: bold;
-          }
-          .rate-percent {
-            font-size: 14px;
-            margin-left: 2px;
-          }
-        }
-      }
-      .rate-label {
-        font-size: 16px;
-        margin-left: 10px;
+        filter: blur(5px);
+        background: radial-gradient(circle, #0d5585, transparent 60%);
      }
    }
+
+    .rate-circle {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        width: 36px;
+        height: 36px;
+        background-color: #041126;
+        border-radius: 50%;
+      }
+
+      .rate-text-wrapper {
+        position: absolute;
+
+        .rate-text {
+          font-size: 12px;
+          font-weight: bold;
+        }
+
+        .rate-percent {
+          font-size: 12px;
+          margin-left: 0px;
+        }
+      }
+    }
+
+    .online-content {
+      margin-top: -5px;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 80%;
+      justify-content: center;
+      margin-left: 10px;
+
+      .text-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        margin-bottom: 2px;
+
+        .online-num {
+          font-size: 16px;
+          font-weight: bold;
+          color: #23DEE9;
+        }
+
+        .total-num {
+          font-size: 16px;
+          font-weight: bold;
+          color: #555657;
+
+        }
+      }
+    }
+
    .progress-bar-wrapper {
      flex: 1;
    }
+
    .progress-bar {
      width: 100%;
-      height: 12px;
-      border-radius: 6px;
+      height: 10px;
+      border-radius: 1px;
      overflow: hidden;
+      box-shadow: #082846 0px 0px 0px 2px;
+
      .progress {
        height: 100%;
-        border-radius: 6px;
-      }
-    }
-    .device-count {
-      font-size: 20px;
-      margin-left: 15px;
-      .online {
-        color: #00e5ff;
-      }
-      .total {
-        color: #ffffff;
+        border-radius: 1px;
+        background: linear-gradient(to right, #0A5987, #71D8FE);
+
      }
    }
+
  }

  .table-header {
    display: flex;
    align-items: center;
    padding: 0 10px;
-    border-radius: 5px;
+    border-radius: 1px;
+    background: linear-gradient(to top, #226493c8, #0f2448);
+    border-bottom: 2px solid #4da6ff;
+
+
    .header-item {
      text-align: left;
      padding-left: 10px;
-      &:nth-child(1) { flex: 2; }
-      &:nth-child(2) { flex: 2; }
-      &:nth-child(3) { flex: 3; }
-      &:nth-child(4) { flex: 1; }
+
+      &:nth-child(1) {
+        flex: 2;
+      }
+
+      &:nth-child(2) {
+        flex: 2;
+      }
+
+      &:nth-child(3) {
+        flex: 2;
+      }
+
+      &:nth-child(4) {
+        flex: 1;
+      }
    }
  }

@ -240,32 +291,60 @@ const option = computed(() => props.chartConfig.option)
    flex: 1;
    overflow-y: auto;
    margin-top: 5px;
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* 隐藏滚动条 */
+      width: 0;
+      height: 0;
+    }
+
+    scrollbar-width: none;
+
    .table-row {
      display: flex;
      align-items: center;
      padding: 0 10px;
-      margin-bottom: 5px;
-      border-radius: 5px;
+      margin-bottom: 3px;
+      border-radius: 1px;
+      border-bottom: 1px solid #29333C;
+
      &:last-child {
        border-bottom: none;
      }
+
      .row-item {
        text-align: left;
        padding-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
-        &:nth-child(1) { flex: 2; }
-        &:nth-child(2) { flex: 2; }
-        &:nth-child(3) { flex: 3; }
+
+        &:nth-child(1) {
+          flex: 2;
+        }
+
+        &:nth-child(2) {
+          flex: 2;
+        }
+
+        &:nth-child(3) {
+          flex: 2;
+        }
+
+        &:nth-child(4) {
+          flex: 1;
+        }
      }
+
      .time-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
+
        .time {
-          padding: 2px 8px;
+          padding: 1px 6px;
          border-radius: 5px;
        }
      }
--- a/src/packages/components/Charts/MyComponents/SmallBorder/config.ts
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/config.ts
@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { SmallBorderConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'

 export const option = {
  colors: ['#1089ff', '#0000ff'],
@ -13,6 +12,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
  public key = SmallBorderConfig.key
  public chartConfig = cloneDeep(SmallBorderConfig)
  public option = cloneDeep(option)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+

 }
--- a/src/packages/components/Charts/MyComponents/SmallBorder/index.vue
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/index.vue
--- a/src/packages/components/Charts/MyComponents/TopAlarms/config.ts
+++ b/src/packages/components/Charts/MyComponents/TopAlarms/config.ts
@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TopAlarmsConfig } from './index'
 import dataJson from './data.json'
-import { chartInitConfig } from '@/settings/designSetting'
 export const option = {
  dataset: dataJson.source,
  title: '未处置报警数TOP5',
@ -16,15 +15,14 @@ export const option = {
  dropdownOptions: ['当日', '当月', '当年'],
  dropdownDefault: '当日',
  iconColor: '#00E5FF',
-  letterSpacing:2,
+  letterSpacing: 1,
  paddingX: 40,
  paddingY: -5,
  isShowButton: false
 }
-
 export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = TopAlarmsConfig.key
  public chartConfig = TopAlarmsConfig
  public option = option
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 }
--- a/src/packages/components/Charts/MyComponents/TopAlarms/index.vue
+++ b/src/packages/components/Charts/MyComponents/TopAlarms/index.vue
@ -3,9 +3,6 @@
    <div class="go-top-alarms">
      <div class="header">
        <div class="title">
-          <!-- <div class="title-prefix">
-            <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
-          </div> -->
          <div class="title-text">
            <span :style="{
              color: option.titleColor,
@ -122,25 +119,11 @@ const handleSelect = (key: string) => {
      display: flex;
      align-items: center;

-      // .title-prefix {
-      //   width: 40px;
-      //   height: 35px;
-      //   background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
-      //   clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
-      //   display: flex;
-      //   justify-content: center;
-      //   align-items: center;
-
-      //   .title-icon {
-      //     font-size: 22px;
-      //   }
-      // }

      .title-text {
        height: 35px;
        display: flex;
        align-items: center;
-        // background-image: linear-gradient(to bottom, #17325f, #0e2142);
        padding: 0 20px 0 20px;
        margin-left: 0px;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
@ -190,10 +173,8 @@ const handleSelect = (key: string) => {
      'info value'
      'bar bar';
    align-items: center;
-    // margin-right: 10px;
    padding: 0 10px;
    gap: 6px 15px;
-    // background-color: antiquewhite;

    .item-info {
      grid-area: info;
@ -202,14 +183,12 @@ const handleSelect = (key: string) => {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
-      // background-color: yellowgreen;

      .rank {
        font-weight: normal;
        margin-right: 10px;
        display: flex;
        align-items: center;
-        // background-color: #fff;

        .rank-icon {
          display: inline-block;
@ -235,22 +214,18 @@ const handleSelect = (key: string) => {
      text-align: right;
      // font-size: 16px;
      font-weight: normal;
-      // background-color: aquamarine;
    }

    .progress-bar-wrapper {
      grid-area: bar;
      width: calc(100% - 60px);
-      /* Adjust width to not overlap value */
      position: relative;
      left: 20px;
-      /* Align with name */
    }

    .progress-bar {
      width: 100%;
      height: 5px;
-      // background-color: rgba(42, 58, 91, 0.5);
      border-radius: 1px;
      overflow: hidden;

--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@ -24,7 +24,7 @@ export const theme = {
 export const chartInitConfig = {
  x: 50,
  y: 50,
-  w: 500,
+  w: 450,
  h: 300,
  // 不建议动 offset
  offsetX: 0,
Author	SHA1	Message	Date
Free-sss	e5dca79442	Merge branch 'main' of http://hnucm.vip:18418/zS/go-view-fetch	2025-08-21 21:36:55 +08:00
Free-sss	dc870000b2	默认500宽调整为450宽适配1920屏幕	2025-08-21 21:36:26 +08:00
Free-sss	777c68a1a9	样式优化	2025-08-21 21:35:17 +08:00
Free-sss	60d4e7ee69	组件完成	2025-08-21 21:34:32 +08:00
Free-sss	bd0f759c66	优化	2025-08-21 21:34:01 +08:00
Free-sss	1d45b02af6	添加封面	2025-08-21 21:33:31 +08:00
Free-sss	c20bec67b8	更改边框显示顺序	2025-08-21 21:33:14 +08:00