新增 运输-装运卸数量组件

src/components/Number.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="number-box">
+    <div
+      v-for="(item, index) in arr"
+      :key="item.title"
+      :class="['box', 'df', 'aic', `${index == 2 ? '' : 'mb45'}`]"
+    >
+      <div :class="['icon', `mr20`]">
+        <img class="wh100" :src="exchangeUrl(item.icon)" alt="" />
+      </div>
+      <div class="count">
+        <div class="title mb2">{{ item.title }}</div>
+        <div class="number pl10">
+          <span :id="item.icon">{{ item.num }}</span>
+          <span style="font-size: 10px">个</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import CountUp from "countup";
+export default {
+  setup() {
+    let options = {
+      useEasing: true, // 过渡动画效果，默认ture
+      useEasing: true,
+      smartEasingThreshold: 2000,
+      smartEasingAmount: 2000,
+      useGrouping: true, // 千分位效果，例：1000->1,000。默认true
+      separator: ",", // 使用千分位时分割符号
+      decimal: ".", // 小数位分割符号
+      prefix: "", // 前置符号
+      suffix: "", // 后置符号，可汉字
+    };
+
+    let arr = ref([
+      { icon: "loading", title: "装货中船舶数量", num: 0 },
+      { icon: "transit", title: "运输中船舶数量", num: 0 },
+      { icon: "unloading", title: "卸货中船舶数量", num: 0 },
+    ]);
+    function init(arr = [16090, 20090, 69422]) {
+      // target,startVal,endVal,decimals,duration,options
+      // dom节点, 初始值,  结束值, 小数位数, 过渡几秒 , 初始参数
+      let num1 = new CountUp("loading", 0, arr[0], 0, 3, options),
+        num2 = new CountUp("transit", 0, arr[1], 0, 3, options),
+        num3 = new CountUp("unloading", 0, arr[2], 0, 3, options);
+      num1.start();
+      num2.start();
+      num3.start();
+    }
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      arr,
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="postcss" scoped>
+.number-box {
+  /* background: rgba(223, 218, 218, 0.05); */
+  padding: 48px 64px;
+  z-index: 100;
+}
+
+.box {
+}
+
+.mb45 {
+  margin-bottom: 45px;
+}
+.icon {
+  width: 48px;
+  height: 48px;
+}
+
+.count {
+  color: #fff;
+  .title {
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #cbd7dd;
+  }
+  .number {
+    font-size: 24px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #f2fbff;
+  }
+}
+</style>

src/main.js

@@ -6,17 +6,19 @@ import router from "./router";
 import store from "./store";
 import md5 from "md5";
 import "./styles/index.scss";
+import NumberVue from "comps/Number.vue";
 
 const app = createApp(App);
+app.component("NumberVue", NumberVue);
 
 router.beforeEach(async (to, from, next) => {
   let id = localStorage.id;
   if (id) {
     store.commit("changeLogin", true);
     if (0 === to.matched.length) {
-      next("/digitalEmpowermentCenter");
+      next("/transportationSafetyCenter");
     } else if (to.path == "/login") {
-      next("/digitalEmpowermentCenter");
+      next("/transportationSafetyCenter");
     } else {
       next();
     }