verce-vue-test 0.0.30 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "private": false,
   "type": "module",
   "scripts": {

package/src/views/FundCockpitView.vue

@@ -4,23 +4,16 @@ import type { ComponentPublicInstance } from 'vue'
 import * as echarts from 'echarts'
 import type { ECharts, EChartsOption } from 'echarts'
 
-interface MetricExtraRow {
+interface MetricRow {
   label: string
   value: string
-  unit?: string
 }
 
 interface MetricCard {
   tone: 'blue' | 'green' | 'purple' | 'bank'
   title: string
-  value: string
-  unit: string
-  subLabel?: string
-  subValue?: string
-  subUnit?: string
-  extraRows?: MetricExtraRow[]
+  rows: MetricRow[]
   progress: number
-  visual: 'line' | 'bars' | 'bank'
 }
 
 interface GaugeCard {
@@ -50,47 +43,39 @@ const metricCards: MetricCard[] = [
   {
     tone: 'blue',
     title: '资金余额',
-    value: '891.17',
-    unit: '亿',
-    subLabel: '当日净流入',
-    subValue: '1,455.26',
-    subUnit: '亿',
+    rows: [
+      { label: '资金余额(亿):', value: '891.17' },
+      { label: '当日净流入(亿):', value: '1455.26' },
+    ],
     progress: 78,
-    visual: 'line',
   },
   {
     tone: 'green',
     title: '报备收款',
-    value: '5,624.57',
-    unit: '亿',
-    subLabel: '实际收款',
-    subValue: '62,606,103,98.41',
-    subUnit: '亿',
+    rows: [
+      { label: '报备收款(亿):', value: '5624.57' },
+      { label: '实际收款(亿):', value: '6260610398.41' },
+    ],
     progress: 92,
-    visual: 'bars',
   },
   {
     tone: 'purple',
-    title: '报告付款',
-    value: '4,733.39',
-    unit: '亿',
-    subLabel: '实际付款',
-    subValue: '62,606,089,43.15',
-    subUnit: '亿',
+    title: '报备扎金',
+    rows: [
+      { label: '报备扎金(亿):', value: '4733.39' },
+      { label: '实际扎金(亿):', value: '6260608943.15' },
+    ],
     progress: 87,
-    visual: 'line',
   },
   {
     tone: 'bank',
     title: '人行账户余额',
-    value: '0.00',
-    unit: '亿',
-    extraRows: [
-      { label: '法定存款准备金', value: '0.00', unit: '亿' },
-      { label: '超额准备金', value: '0.00', unit: '亿' },
+    rows: [
+      { label: '人行账户余额(亿):', value: '0.00' },
+      { label: '法定存款准备金(亿):', value: '0.00' },
+      { label: '超额准备金(亿):', value: '0.00' },
     ],
     progress: 0,
-    visual: 'bank',
   },
 ]
 
@@ -279,60 +264,68 @@ function createCashflowOption(): EChartsOption {
   }
 }
 
-function createGaugeOption(card: GaugeCard): EChartsOption {
+function createLiquidityRingOption(card: GaugeCard): EChartsOption {
+  const progress = Math.min(Math.max(card.needle, 0), card.max)
+  const rest = Math.max(card.max - progress, 0)
+  const ringGradient = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+    { offset: 0, color: '#1278ff' },
+    { offset: 0.5, color: '#33f0ff' },
+    { offset: 1, color: '#58ff86' },
+  ])
+
   return {
     animationDuration: 900,
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: '44%',
+        style: {
+          text: card.value,
+          fill: '#34eaff',
+          fontSize: 30,
+          fontWeight: 800,
+          textAlign: 'center',
+          textShadowBlur: 14,
+          textShadowColor: 'rgba(47, 233, 255, .55)',
+        },
+      },
+    ],
     series: [
       {
-        type: 'gauge',
-        min: 0,
-        max: card.max,
-        radius: '82%',
-        center: ['50%', '55%'],
-        splitNumber: 5,
-        axisLine: {
-          lineStyle: {
-            width: 15,
-            color: [
-              [0.38, '#1679ff'],
-              [0.74, '#3fe8f2'],
-              [1, '#ff5b5c'],
-            ],
-          },
+        type: 'pie',
+        radius: ['62%', '78%'],
+        center: ['50%', '52%'],
+        startAngle: 90,
+        clockwise: true,
+        silent: true,
+        label: { show: false },
+        labelLine: { show: false },
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: 'rgba(2, 14, 33, .5)',
+          borderWidth: 3,
         },
-        pointer: {
-          length: '54%',
-          width: 5,
-          itemStyle: {
-            color: '#68f7ff',
+        data: [
+          { value: progress, itemStyle: { color: ringGradient } },
+          { value: rest, itemStyle: { color: 'rgba(33, 79, 124, .28)' } },
+        ],
+      },
+      {
+        type: 'pie',
+        radius: ['46%', '47%'],
+        center: ['50%', '52%'],
+        silent: true,
+        label: { show: false },
+        labelLine: { show: false },
+        data: [
+          {
+            value: 1,
+            itemStyle: {
+              color: 'rgba(58, 216, 255, .18)',
+            },
           },
-        },
-        axisTick: {
-          distance: -18,
-          length: 6,
-          lineStyle: { color: '#cbe7ff', width: 2 },
-        },
-        splitLine: {
-          distance: -18,
-          length: 15,
-          lineStyle: { color: '#dff6ff', width: 3 },
-        },
-        axisLabel: {
-          color: 'inherit',
-          distance: -34,
-          fontSize: 13,
-        },
-        anchor: { show: false },
-        title: { show: false },
-        detail: {
-          valueAnimation: true,
-          offsetCenter: [0, '42%'],
-          color: '#30dcff',
-          fontSize: 28,
-          fontWeight: 700,
-          formatter: () => card.value,
-        },
-        data: [{ value: card.needle }],
+        ],
       },
     ],
   }
@@ -421,9 +414,9 @@ onMounted(async () => {
   updateCockpitScale()
   await nextTick()
   createChart(cashflowChart.value, createCashflowOption())
-  createChart(liquidityGauge.value, createGaugeOption(gaugeCards[0]!))
-  createChart(coverageGauge.value, createGaugeOption(gaugeCards[1]!))
-  createChart(stableGauge.value, createGaugeOption(gaugeCards[2]!))
+  createChart(liquidityGauge.value, createLiquidityRingOption(gaugeCards[0]!))
+  createChart(coverageGauge.value, createLiquidityRingOption(gaugeCards[1]!))
+  createChart(stableGauge.value, createLiquidityRingOption(gaugeCards[2]!))
   createChart(maturityChart.value, createMaturityOption())
   window.addEventListener('resize', handleViewportChange)
   window.visualViewport?.addEventListener('resize', handleViewportChange)
@@ -443,12 +436,9 @@ onUnmounted(() => {
         <div class="brand">
           <span class="logo-mark">C</span>
           <h1>资金驾驶舱</h1>
-          <p>资金盘位等流动性管理平台</p>
         </div>
 
         <div class="toolbar">
-          <span class="toolbar-item calendar-icon">2026-06-04（周三）</span>
-          <span class="toolbar-item clock-icon">10:30:45</span>
           <button class="export-button" type="button">
             <span class="download-icon"></span>
             导出报表
@@ -463,19 +453,14 @@ onUnmounted(() => {
               <span class="metric-icon-symbol"></span>
             </div>
             <div class="metric-content">
-              <h2>{{ card.title }}</h2>
-              <div class="metric-value">
-                <strong>{{ card.value }}</strong>
-                <span>{{ card.unit }}</span>
-              </div>
-              <p v-if="card.subLabel" class="metric-sub-label">{{ card.subLabel }}</p>
-              <p v-if="card.subValue" class="metric-sub-value">{{ card.subValue }} {{ card.subUnit }}</p>
-            </div>
-            <div class="metric-visual" :class="`is-${card.visual}`">
-              <span v-for="index in 6" :key="index"></span>
+              <p v-for="row in card.rows" :key="row.label" class="metric-row">
+                <span>{{ row.label }}</span>
+                <b>{{ row.value }}</b>
+              </p>
             </div>
+            <span class="metric-divider"></span>
             <div class="metric-progress">
-              <span>进度</span>
+              <span>进度:</span>
               <div class="progress-track">
                 <i :style="{ width: `${card.progress}%` }"></i>
               </div>
@@ -490,27 +475,14 @@ onUnmounted(() => {
               <span class="metric-icon-symbol"></span>
             </div>
             <div class="metric-content">
-              <h2>{{ card.title }}</h2>
-              <div class="metric-value">
-                <strong>{{ card.value }}</strong>
-                <span>{{ card.unit }}</span>
-              </div>
-              <template v-if="card.extraRows">
-                <p v-for="row in card.extraRows" :key="row.label" class="metric-extra-row">
-                  <span>{{ row.label }}</span>
-                  <b>{{ row.value }} {{ row.unit }}</b>
-                </p>
-              </template>
-              <template v-else>
-                <p v-if="card.subLabel" class="metric-sub-label">{{ card.subLabel }}</p>
-                <p v-if="card.subValue" class="metric-sub-value">{{ card.subValue }} {{ card.subUnit }}</p>
-              </template>
-            </div>
-            <div class="metric-visual" :class="`is-${card.visual}`">
-              <span v-for="index in 6" :key="index"></span>
+              <p v-for="row in card.rows" :key="row.label" class="metric-row">
+                <span>{{ row.label }}</span>
+                <b>{{ row.value }}</b>
+              </p>
             </div>
+            <span class="metric-divider"></span>
             <div class="metric-progress">
-              <span>进度</span>
+              <span>进度:</span>
               <div class="progress-track">
                 <i :style="{ width: `${card.progress}%` }"></i>
               </div>
@@ -523,7 +495,6 @@ onUnmounted(() => {
       <section class="cashflow-section">
         <div class="section-title-row">
           <h2>未来现金流</h2>
-          <button class="range-button" type="button">近15天 <span></span></button>
         </div>
         <span class="axis-unit">（亿元）</span>
         <div ref="cashflowChart" class="cashflow-chart"></div>
@@ -546,7 +517,6 @@ onUnmounted(() => {
       </section>
 
       <section class="table-section shibor-section">
-        <h2><span></span>利率/SHIBOR/FTP 数据</h2>
         <div class="table-shell">
           <table>
             <thead>
@@ -574,7 +544,6 @@ onUnmounted(() => {
       </section>
 
       <section class="table-section monitor-section">
-        <h2><span></span>关键指标监控</h2>
         <div class="table-shell">
           <table>
             <thead>
@@ -634,16 +603,14 @@ onUnmounted(() => {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background:
-    linear-gradient(90deg, transparent 0 49%, rgba(40, 152, 255, .08) 49.95% 50.05%, transparent 50.2%),
-    linear-gradient(180deg, rgba(0, 8, 18, .1), transparent 24%, rgba(0, 6, 16, .22));
+  background: linear-gradient(180deg, rgba(0, 8, 18, .1), transparent 24%, rgba(0, 6, 16, .22));
 }
 
 .topbar {
   position: absolute;
-  left: 32px;
+  left: 18px;
   top: 22px;
-  width: 1608px;
+  width: 1636px;
   height: 42px;
   display: flex;
   align-items: center;
@@ -652,7 +619,6 @@ onUnmounted(() => {
 
 .brand,
 .toolbar,
-.toolbar-item,
 .export-button {
   display: flex;
   align-items: center;
@@ -685,38 +651,12 @@ onUnmounted(() => {
   text-shadow: 0 0 18px rgba(104, 194, 255, .24);
 }
 
-.brand p {
-  margin-left: 4px;
-  color: #d5e4f5;
-  font-size: 15px;
-  font-weight: 600;
-}
-
 .toolbar {
   gap: 32px;
   color: #e0edf9;
   font-size: 14px;
 }
 
-.toolbar-item {
-  gap: 9px;
-  white-space: nowrap;
-}
-
-.toolbar-item::before {
-  content: "";
-  width: 18px;
-  height: 18px;
-  display: inline-block;
-  border: 1px solid rgba(230, 244, 255, .86);
-  border-radius: 3px;
-  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04);
-}
-
-.clock-icon::before {
-  border-radius: 50%;
-}
-
 .export-button {
   height: 37px;
   gap: 9px;
@@ -762,243 +702,229 @@ onUnmounted(() => {
 
 .metric-strip {
   position: absolute;
-  left: 32px;
-  top: 96px;
-  width: 1608px;
-  height: 150px;
+  left: 18px;
+  top: 94px;
+  width: 1636px;
+  height: 154px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 38px;
+  grid-template-columns: 805px 805px;
+  gap: 26px;
 }
 
 .metric-group {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 24px;
+  gap: 8px;
   min-width: 0;
 }
 
 .metric-card {
   position: relative;
   min-width: 0;
-  height: 150px;
-  padding-left: 96px;
-  border-right: 1px solid rgba(37, 108, 180, .2);
-}
-
-.metric-group .metric-card:last-child {
-  border-right: 0;
+  height: 154px;
+  overflow: hidden;
+  padding: 24px 24px 20px 134px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .metric-icon {
   position: absolute;
-  left: 0;
-  top: 7px;
-  width: 68px;
-  height: 68px;
-  border-radius: 12px;
+  left: 38px;
+  top: 34px;
+  width: 54px;
+  height: 54px;
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 18px 38px rgba(0, 62, 156, .22);
+  background: transparent;
+  box-shadow: none;
 }
 
 .metric-icon-symbol {
   position: relative;
   display: block;
-  color: #d8ecff;
-  font-size: 34px;
-  line-height: 1;
-  font-weight: 900;
-}
-
-.metric-card.is-blue .metric-icon {
-  background: linear-gradient(160deg, rgba(14, 119, 248, .88), rgba(5, 48, 120, .95));
+  width: 52px;
+  height: 52px;
+  transform: scale(.78);
+  transform-origin: center;
 }
 
 .metric-card.is-blue .metric-icon-symbol::before {
   content: "";
-  display: block;
-  width: 35px;
+  position: absolute;
+  left: 4px;
+  top: 9px;
+  width: 37px;
   height: 26px;
-  border-radius: 5px;
-  background: #69b9ff;
-  box-shadow: inset 0 -8px 0 rgba(20, 100, 216, .45);
+  border: 3px solid #39efcd;
+  border-radius: 6px;
+  box-shadow: none;
 }
 
 .metric-card.is-blue .metric-icon-symbol::after {
-  content: "";
+  content: "¥";
   position: absolute;
-  right: -5px;
-  bottom: -4px;
-  width: 20px;
-  height: 17px;
-  border-radius: 4px;
-  background: #3e8bff;
-  box-shadow: inset 0 0 0 2px rgba(160, 219, 255, .7);
-}
-
-.metric-card.is-green .metric-icon {
-  background: linear-gradient(160deg, rgba(65, 206, 83, .86), rgba(15, 90, 61, .96));
+  right: 0;
+  bottom: 1px;
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #045e86;
+  background: linear-gradient(180deg, #47eff2, #26bfe3);
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 900;
+  box-shadow: none;
 }
 
 .metric-card.is-green .metric-icon-symbol::before {
-  content: "￥";
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 3px;
+  width: 33px;
+  height: 45px;
+  border-radius: 3px;
+  background:
+    linear-gradient(90deg, rgba(3, 87, 108, .52) 8px, transparent 8px) 10px 14px / 19px 3px no-repeat,
+    linear-gradient(90deg, rgba(3, 87, 108, .48) 8px, transparent 8px) 10px 25px / 20px 3px no-repeat,
+    linear-gradient(90deg, rgba(3, 87, 108, .46) 8px, transparent 8px) 10px 36px / 18px 3px no-repeat,
+    linear-gradient(180deg, #55ffc7, #28d8d4);
+  clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%);
 }
 
-.metric-card.is-purple .metric-icon {
-  background: linear-gradient(160deg, rgba(154, 108, 255, .88), rgba(50, 39, 127, .96));
+.metric-card.is-green .metric-icon-symbol::after,
+.metric-card.is-purple .metric-icon-symbol::after {
+  content: "¥";
+  position: absolute;
+  right: 1px;
+  bottom: 1px;
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #04608a;
+  background: linear-gradient(180deg, #4ff1f1, #28bfdc);
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 900;
+  box-shadow: none;
 }
 
 .metric-card.is-purple .metric-icon-symbol::before {
-  content: "￥";
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 6px;
+  width: 39px;
+  height: 39px;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, #35ffc1 0 25%, transparent 25% 31%, #28d5e4 31% 100%);
+  box-shadow: none;
 }
 
-.metric-card.is-bank .metric-icon {
-  background: linear-gradient(160deg, rgba(30, 135, 255, .9), rgba(9, 48, 126, .96));
+.metric-card.is-bank .metric-icon-symbol::before {
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 4px;
+  width: 38px;
+  height: 44px;
+  clip-path: polygon(50% 0, 92% 18%, 82% 78%, 50% 100%, 18% 78%, 8% 18%);
+  background: linear-gradient(180deg, #55ff91, #32dfa5);
+  box-shadow: none;
 }
 
-.metric-card.is-bank .metric-icon-symbol::before {
-  content: "▥";
-  font-size: 38px;
+.metric-card.is-bank .metric-icon-symbol::after {
+  content: "¥";
+  position: absolute;
+  left: 17px;
+  top: 17px;
+  color: #064f70;
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 900;
 }
 
 .metric-content {
-  position: relative;
+  position: absolute;
   z-index: 2;
+  left: 126px;
+  top: 30px;
+  right: 23px;
+  display: grid;
+  row-gap: 13px;
 }
 
-.metric-content h2 {
-  margin-top: 0;
-  color: #eef7ff;
-  font-size: 15px;
-  line-height: 1.2;
-  font-weight: 700;
-}
-
-.metric-value {
-  margin-top: 8px;
-  display: flex;
+.metric-row {
+  margin: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: baseline;
-  gap: 9px;
-}
-
-.metric-value strong {
-  color: #f3f8ff;
-  font-size: 30px;
+  column-gap: 12px;
+  color: #eef8ff;
+  font-size: 17px;
   line-height: 1;
   font-weight: 800;
-  letter-spacing: 0;
-}
-
-.metric-value span {
-  color: #f2f7ff;
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.metric-sub-label {
-  margin-top: 14px;
-  color: #d6e4f4;
-  font-size: 14px;
-  line-height: 1;
-}
-
-.metric-sub-value {
-  margin-top: 7px;
-  color: #43f168;
-  font-size: 16px;
-  line-height: 1;
-  font-weight: 700;
+  text-shadow: 0 0 11px rgba(177, 224, 255, .18);
+  white-space: nowrap;
 }
 
-.metric-extra-row {
-  margin-top: 9px;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  column-gap: 12px;
-  color: #dbe8f5;
-  font-size: 14px;
+.metric-row b {
+  color: #f2f8ff;
+  font-size: 17px;
   line-height: 1;
+  font-weight: 800;
+  letter-spacing: 0;
 }
 
-.metric-extra-row b {
-  color: #eef7ff;
-  font-weight: 500;
-}
-
-.metric-visual {
-  position: absolute;
-  right: 20px;
-  top: 43px;
-  width: 96px;
-  height: 52px;
-  opacity: .88;
-}
-
-.metric-visual span {
-  position: absolute;
-  display: block;
+.metric-card.is-bank .metric-content {
+  top: 24px;
+  row-gap: 12px;
 }
 
-.metric-visual.is-line span {
-  width: 2px;
-  bottom: 0;
-  background: linear-gradient(180deg, #148cff, transparent);
+.metric-card.is-bank .metric-row {
+  font-size: 17px;
 }
 
-.metric-visual.is-line span:nth-child(1) { left: 4px; height: 18px; transform: rotate(24deg); }
-.metric-visual.is-line span:nth-child(2) { left: 20px; height: 34px; transform: rotate(48deg); }
-.metric-visual.is-line span:nth-child(3) { left: 43px; height: 50px; transform: rotate(-38deg); }
-.metric-visual.is-line span:nth-child(4) { left: 62px; height: 30px; transform: rotate(48deg); }
-.metric-visual.is-line span:nth-child(5) { left: 78px; height: 43px; transform: rotate(-28deg); }
-.metric-visual.is-line span:nth-child(6) { left: 92px; height: 55px; transform: rotate(33deg); }
-
-.metric-visual.is-line::after {
-  content: "";
+.metric-divider {
   position: absolute;
-  inset: 3px 0 8px;
-  clip-path: polygon(0 76%, 22% 45%, 48% 22%, 68% 48%, 100% 0);
-  border-top: 2px solid #087cff;
-  filter: drop-shadow(0 0 7px #007bff);
-}
-
-.metric-visual.is-bars {
-  display: flex;
-  align-items: flex-end;
-  gap: 9px;
-  justify-content: flex-end;
-}
-
-.metric-visual.is-bars span {
-  position: static;
-  width: 8px;
-  border-radius: 6px 6px 0 0;
-  background: linear-gradient(180deg, #2d85ff, rgba(21, 87, 184, .12));
+  z-index: 1;
+  left: 28px;
+  right: 28px;
+  top: 99px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(135, 184, 229, .25) 10%, rgba(126, 177, 224, .22) 88%, transparent);
+  box-shadow: 0 1px 0 rgba(5, 19, 38, .58);
 }
 
-.metric-visual.is-bars span:nth-child(1) { height: 17px; opacity: .38; }
-.metric-visual.is-bars span:nth-child(2) { height: 26px; opacity: .48; }
-.metric-visual.is-bars span:nth-child(3) { height: 34px; opacity: .62; }
-.metric-visual.is-bars span:nth-child(4) { height: 43px; opacity: .75; }
-.metric-visual.is-bars span:nth-child(5) { height: 49px; opacity: .86; }
-.metric-visual.is-bars span:nth-child(6) { height: 54px; opacity: .95; }
-
-.metric-visual.is-bank {
-  display: none;
+.metric-card.is-bank .metric-divider {
+  top: 97px;
 }
 
 .metric-progress {
   position: absolute;
-  left: 0;
-  right: 24px;
-  bottom: 14px;
+  z-index: 2;
+  left: 28px;
+  right: 28px;
+  bottom: 22px;
   display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) 38px;
+  grid-template-columns: 58px minmax(0, 1fr) 42px;
   align-items: center;
   gap: 12px;
-  color: #e6f1ff;
-  font-size: 14px;
+  color: #f0f8ff;
+  font-size: 18px;
+  line-height: 1;
+  font-weight: 800;
 }
 
 .progress-track {
@@ -1020,14 +946,15 @@ onUnmounted(() => {
 .metric-progress b {
   justify-self: end;
   color: #f5f9ff;
-  font-size: 15px;
+  font-size: 18px;
+  line-height: 1;
 }
 
 .cashflow-section {
   position: absolute;
-  left: 33px;
+  left: 18px;
   top: 279px;
-  width: 790px;
+  width: 805px;
   height: 398px;
 }
 
@@ -1039,8 +966,7 @@ onUnmounted(() => {
 }
 
 .section-title-row h2,
-.maturity-section h2,
-.table-section h2 {
+.maturity-section h2 {
   color: #eff8ff;
   font-size: 22px;
   line-height: 1;
@@ -1048,28 +974,6 @@ onUnmounted(() => {
   letter-spacing: 0;
 }
 
-.range-button {
-  width: 103px;
-  height: 35px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 13px;
-  border: 1px solid rgba(54, 126, 204, .25);
-  border-radius: 8px;
-  color: #f0f6ff;
-  background: rgba(20, 56, 99, .72);
-  font-size: 15px;
-}
-
-.range-button span {
-  width: 8px;
-  height: 8px;
-  border-right: 1px solid #a8bed6;
-  border-bottom: 1px solid #a8bed6;
-  transform: rotate(45deg) translateY(-2px);
-}
-
 .axis-unit {
   position: absolute;
   left: 11px;
@@ -1088,9 +992,9 @@ onUnmounted(() => {
 
 .gauge-section {
   position: absolute;
-  left: 862px;
+  left: 849px;
   top: 280px;
-  width: 778px;
+  width: 805px;
   height: 206px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1152,9 +1056,9 @@ onUnmounted(() => {
 
 .maturity-section {
   position: absolute;
-  left: 862px;
+  left: 849px;
   top: 514px;
-  width: 778px;
+  width: 805px;
   height: 184px;
 }
 
@@ -1176,50 +1080,22 @@ onUnmounted(() => {
 }
 
 .shibor-section {
-  left: 33px;
+  left: 18px;
   top: 711px;
-  width: 790px;
+  width: 805px;
 }
 
 .monitor-section {
-  left: 862px;
+  left: 849px;
   top: 711px;
-  width: 778px;
-}
-
-.table-section h2 {
-  height: 29px;
-  display: flex;
-  align-items: center;
-  gap: 11px;
-  font-size: 20px;
-}
-
-.table-section h2 span {
-  width: 23px;
-  height: 23px;
-  border-radius: 5px;
-  background: linear-gradient(135deg, #1d81ff, #0755e8);
-  box-shadow: 0 0 18px rgba(0, 115, 255, .48);
-}
-
-.monitor-section h2 span::after,
-.shibor-section h2 span::after {
-  content: "";
-  display: block;
-  width: 12px;
-  height: 12px;
-  margin: 5px auto 0;
-  border: 2px solid #e9f6ff;
-  border-top-width: 4px;
-  border-radius: 2px;
+  width: 805px;
 }
 
 .table-shell {
   position: absolute;
   left: 0;
   right: 0;
-  top: 45px;
+  top: 0;
   bottom: 0;
   overflow: hidden;
   border-radius: 6px;