feat: 大数据左侧顶部完成

src/assets/styles/common/common.scss

@@ -1,4 +1,5 @@
 @use "src/element";
+@use "src/digest";
 
 /* 定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸 */
 ::-webkit-scrollbar {

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;
+  }
+}

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;

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);
     }
   }
 }

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%;
 

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, [

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 {