master: Fixed 左右两次实现

Author: gitboyzcf

package.json

@@ -35,6 +35,8 @@
     "vue-echarts": "^7.0.3",
     "vue-i18n": "^10.0.4",
     "vue-router": "^4.4.5",
+    "vue3-count-to": "^1.1.2",
+    "vue3-seamless-scroll": "^2.0.1",
     "vuedraggable": "^2.24.3",
     "xgplayer": "^3.0.20"
   },

pnpm-lock.yaml

@@ -1,7 +1,9 @@
 <template>
   <div class="flex flex-col">
     <div class="box-title w-full h-28px"
-      ><span class="color-#f0f0f0 font-bold block w-90px text-center">{{ title }}</span></div
+      ><span class="color-#f0f0f0 font-bold block w-90px text-center" :style="{ width: wHeader }">{{
+        title
+      }}</span></div
     >
     <div class="box-content p-15px bg-#031e559c" :style="styleContent">
       <slot></slot>
@@ -15,13 +17,14 @@
       type: String,
       default: '标题'
     },
+    wHeader: String,
     styleContent: String
   })
 </script>
 
 <style lang="scss" scoped>
   .box-title {
     background: url('@/assets/images/box-h-bg.png') no-repeat center;
-    background-size: 100%;
+    background-size: 100% 100%;
   }
 </style>

src/assets/images/box-bg.png

@@ -0,0 +1,7 @@
+<template>
+  <count-to v-bind="$attrs" :duration="2000"></count-to>
+</template>
+
+<script setup>
+  import { CountTo } from 'vue3-count-to'
+</script>

src/components/Box.vue

@@ -5,7 +5,7 @@
   import * as echarts from 'echarts'
   import 'echarts-liquidfill'
 
-  let myChart = ref(null)
+  let myChart = shallowRef(null)
 
   const props = defineProps({
     // 区分chart
@@ -67,14 +67,11 @@
       text: '',
       color: '#409eff',
       textColor: '#000',
-      maskColor: 'rgba(255, 255, 255, .95)',
+      maskColor: 'rgba(56, 155, 255, .45)',
       zlevel: 0,
       lineWidth: 2
     })
-    if (!props.loading) {
-      myChart.value.hideLoading()
-      myChart.value.setOption(props.fullOptions.options, true)
-    }
+
     //自适应不同屏幕时改变图表尺寸
     window.addEventListener('resize', cancalDebounce)
   })