From c5a0670c163aa2b90f1389a8e506326c6c502c0d Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Wed, 12 Mar 2025 10:17:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E6=95=B0=E6=8D=AE=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E9=A1=B6=E9=83=A8=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bg/sidebar => common/bg}/bg-count.png     | Bin
 src/assets/styles/common/common.scss          |   1 +
 src/assets/styles/common/src/digest.scss      |  16 ++++
 src/assets/styles/global.scss                 |   1 +
 .../big-data-left/components/left-top.vue     |  73 +++++++++++++-----
 src/views/big-data/index.vue                  |   2 +-
 .../charts/leftSidebarTop.ts                  |   2 +-
 .../components/sidebar-left-top.vue           |  31 +++-----
 8 files changed, 87 insertions(+), 39 deletions(-)
 rename src/assets/images/{business-supervision/bg/sidebar => common/bg}/bg-count.png (100%)
 create mode 100644 src/assets/styles/common/src/digest.scss

diff --git a/src/assets/images/business-supervision/bg/sidebar/bg-count.png b/src/assets/images/common/bg/bg-count.png
similarity index 100%
rename from src/assets/images/business-supervision/bg/sidebar/bg-count.png
rename to src/assets/images/common/bg/bg-count.png
diff --git a/src/assets/styles/common/common.scss b/src/assets/styles/common/common.scss
index ba0cc6a..778ba86 100644
--- a/src/assets/styles/common/common.scss
+++ b/src/assets/styles/common/common.scss
@@ -1,4 +1,5 @@
 @use "src/element";
+@use "src/digest";
 
 /* 定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸 */
 ::-webkit-scrollbar {
diff --git a/src/assets/styles/common/src/digest.scss b/src/assets/styles/common/src/digest.scss
new file mode 100644
index 0000000..f488c3a
--- /dev/null
+++ b/src/assets/styles/common/src/digest.scss
@@ -0,0 +1,16 @@
+.money-digit {
+  display: flex;
+  justify-content: end;
+  color: var(--color-primary-secondary);
+  font-size: 45px;
+  text-align: center;
+
+  span {
+    float: left;
+    margin: 0 3.5px;
+    width: 49px;
+    height: 62px;
+    background: url('@/assets/images/common/bg/bg-count.png') no-repeat;
+    background-size: cover;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 588ac51..dc54068 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -5,6 +5,7 @@
   --color-primary: #027AFF;
   --color-primary-secondary: #00FFFF;
   --color-primary-secondary-1: rgba(0, 255, 255, 0.71);
+  --color-success: #44D7B6;
   --color-info: #7CC1FF;
   --color-info-secondary: #707070;
   --color-info-secondary-1: #ADCBFF;
diff --git a/src/views/big-data/components/big-data-left/components/left-top.vue b/src/views/big-data/components/big-data-left/components/left-top.vue
index ccc400d..509d009 100644
--- a/src/views/big-data/components/big-data-left/components/left-top.vue
+++ b/src/views/big-data/components/big-data-left/components/left-top.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { displayContent } from '@/components/PanelItem/DigitalNumber';
 import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
@@ -12,25 +13,47 @@ const timeList = ref<TimeSelectType[]>([
 </script>
 
 <template>
-  <div class="big-data__sidebar-item h-[200px]">
+  <div class="big-data__sidebar-item">
     <div class="flex-x-between">
       <div class="big-data__sidebar-title">
         <h1>规模效益</h1>
       </div>
 
-      <div>
-        <TimeSelect :time-list="timeList" />
-      </div>
+      <TimeSelect :time-list="timeList" />
     </div>
 
-    <ul class="big-data__body">
-      <li class="big-data__body-item">
-        <div class="big-data__body-title">
+    <ul>
+      <li>
+        <div class="big-data__sidebar-item-body-title">
           <h1>进出口总值</h1>
-          <span>
-            总值增幅
-            <em>+123%</em>
-          </span>
+          <div>
+            <span>
+              总值增幅
+              <em>+123%</em>
+            </span>
+            <span>
+              超越第二名
+              <em>+22.3%</em>
+            </span>
+          </div>
+        </div>
+        <div class="money-digit">
+          <component :is="displayContent('8888888')" />
+        </div>
+      </li>
+
+      <li>
+        <div class="big-data__sidebar-item-body-title">
+          <h1>进出口总值</h1>
+          <div>
+            <span>
+              环比变化
+              <em>+123%</em>
+            </span>
+          </div>
+        </div>
+        <div class="money-digit">
+          <component :is="displayContent('888888')" />
         </div>
       </li>
     </ul>
@@ -38,28 +61,42 @@ const timeList = ref<TimeSelectType[]>([
 </template>
 
 <style lang="scss" scoped>
-.big-data__body {
+ul {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   width: 100%;
   height: 100%;
 
-  &-item {
+  li {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 18px 15px;
+    flex-direction: column;
+    margin: 18px 0 0 0;
     width: 100%;
   }
+}
 
-  &-title {
+.big-data__sidebar-item {
+  height: 296px;
+
+  &-body-title {
     display: flex;
     justify-content: space-between;
+    margin: 0 0 5px 0;
     width: 100%;
 
+    h1 {
+      font-size: 18px;
+    }
+
+    span {
+      margin: 0 4px 0 0;
+      font-size: 12px;
+    }
+
     em {
       font-style: normal;
+      font-size: 14px;
+      color: var(--color-success);
     }
   }
 }
diff --git a/src/views/big-data/index.vue b/src/views/big-data/index.vue
index 46e7da4..cc56b8b 100644
--- a/src/views/big-data/index.vue
+++ b/src/views/big-data/index.vue
@@ -17,7 +17,7 @@ import BigDataRight from '@/views/big-data/components/big-data-right/index.vue';
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 19px 25px;
+  padding: 0 25px;
   width: 100%;
   height: 100%;
 
diff --git a/src/views/business-supervision/charts/leftSidebarTop.ts b/src/views/business-supervision/charts/leftSidebarTop.ts
index cced960..6ae6bca 100644
--- a/src/views/business-supervision/charts/leftSidebarTop.ts
+++ b/src/views/business-supervision/charts/leftSidebarTop.ts
@@ -19,7 +19,7 @@ option.value = {
     {
       name: '进口额',
       type: 'bar',
-      barMaxWidth: 23,
+      barMaxWidth: 24,
       barGap: '-100%',
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
diff --git a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
index 0d209ff..bdb6348 100644
--- a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
+++ b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
@@ -32,14 +32,14 @@ onMounted(() => {
       </div>
     </div>
 
-    <div class="business-supervision__sidebar-money-digit">
+    <div class="money-digit">
       <component :is="displayContent(money)" />
     </div>
 
     <div>
       <div ref="chartProgress" class="business-supervision__sidebar-progress" />
 
-      <ul class="business-supervision__sidebar-value flex-x-between">
+      <ul class="business-supervision__sidebar-value">
         <li>
           进口额
           <i>¥1551154545</i>
@@ -55,32 +55,25 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.business-supervision__sidebar {
-  &-money-digit {
-    display: flex;
-    justify-content: end;
-    margin: 26px 0 0 0;
-    color: var(--color-primary-secondary);
-    font-size: 45px;
-    text-align: center;
+.money-digit {
+  margin: 26px 0 0 0;
 
-    span {
-      float: left;
-      margin: 0 3.5px;
-      width: 49px;
-      height: 69px;
-      background: url('@/assets/images/business-supervision/bg/sidebar/bg-count.png') no-repeat;
-      background-size: cover;
-    }
+  span {
+    height: 69px;
   }
+}
 
+.business-supervision__sidebar {
   &-progress {
     margin: 21px 0 0 0;
     width: 495px;
-    height: 23px;
+    height: 24px;
   }
 
   &-value {
+    display: flex;
+    justify-content: space-between;
+    margin: 9px 0 0 0;
     font-size: 18px;
 
     i {