fix Bug or esLink formatting

src/views/dashboard/console/console.vue

@@ -1,141 +1,152 @@
 <template>
   <div class="console">
-
     <!--数据卡片-->
     <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8" :cols="4">
       <n-grid-item>
-        <NCard title="访问量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="访问量"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="success">日</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl"/>
+            <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
           </div>
-          <div class="py-1 px-1 flex justify-between ">
+          <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
               日同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
               <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined"/>
+                <component is="CaretUpOutlined" />
               </n-icon>
             </div>
             <div class="text-sn">
               周同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
+              <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
               <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined"/>
+                <component is="CaretDownOutlined" />
               </n-icon>
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 总访问量： </div>
               <div class="text-sn">
-                总访问量：
-              </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" :endVal="visits.amount"/>
+                <CountTo :startVal="1" :endVal="visits.amount" />
               </div>
             </div>
           </template>
         </NCard>
       </n-grid-item>
       <n-grid-item>
-        <NCard title="销售额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="销售额"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="info">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl"/>
+            <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
           </div>
-          <div class="py-2 px-2 flex justify-between ">
+          <div class="py-2 px-2 flex justify-between">
             <div class="text-sn flex-1">
               <n-progress
-                  type="line"
-                  :percentage="saleroom.degree"
-                  :indicator-placement="'inside'"
-                  processing
+                type="line"
+                :percentage="saleroom.degree"
+                :indicator-placement="'inside'"
+                processing
               />
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 总销售额： </div>
               <div class="text-sn">
-                总销售额：
-              </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount"/>
+                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
               </div>
             </div>
           </template>
         </NCard>
       </n-grid-item>
       <n-grid-item>
-        <NCard title="订单量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="订单量"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="warning">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl"/>
+            <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
           </div>
-          <div class="py-1 px-1 flex justify-between ">
+          <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
               日同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
               <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined"/>
+                <component is="CaretUpOutlined" />
               </n-icon>
             </div>
             <div class="text-sn">
               周同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
               <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined"/>
+                <component is="CaretDownOutlined" />
               </n-icon>
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 转化率： </div>
               <div class="text-sn">
-                转化率：
-              </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount"/>
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
               </div>
             </div>
           </template>
         </NCard>
       </n-grid-item>
       <n-grid-item>
-        <NCard title="成交额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
+        <NCard
+          title="成交额"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
           <template #header-extra>
             <n-tag type="error">月</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl"/>
+            <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
           </div>
-          <div class="py-1 px-1 flex justify-between ">
+          <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
               月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
+              <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
               <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined"/>
+                <component is="CaretUpOutlined" />
               </n-icon>
             </div>
             <div class="text-sn">
               月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
+              <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
               <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined"/>
+                <component is="CaretDownOutlined" />
               </n-icon>
             </div>
           </div>
           <template #footer>
-            <div class="flex justify-between ">
+            <div class="flex justify-between">
+              <div class="text-sn"> 总成交额： </div>
               <div class="text-sn">
-                总成交额：
-              </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="volume.amount"/>
+                <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
               </div>
             </div>
           </template>
@@ -146,18 +157,20 @@
     <!--导航卡片-->
     <div class="mt-4">
       <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8" :cols="8">
-        <n-grid-item v-for="(item,index) in iconList" :key="index">
+        <n-grid-item v-for="(item, index) in iconList" :key="index">
           <NCard content-style="padding-top: 0;" size="small" :bordered="false">
             <template #footer>
               <div class="cursor-pointer">
                 <p class="flex justify-center">
-                     <span>
-                      <n-icon :size="item.size" class="flex-1" :style="{color:`${item.color}`}">
-                        <component :is="item.icon" v-on="item.eventObject || {}"/>
-                      </n-icon>
-                    </span>
+                  <span>
+                    <n-icon :size="item.size" class="flex-1" :style="{ color: `${item.color}` }">
+                      <component :is="item.icon" v-on="item.eventObject || {}" />
+                    </n-icon>
+                  </span>
                 </p>
-                <p class="flex justify-center"><span>{{ item.title }}</span></p>
+                <p class="flex justify-center"
+                  ><span>{{ item.title }}</span></p
+                >
               </div>
             </template>
           </NCard>
@@ -166,128 +179,117 @@
     </div>
 
     <!--访问量 | 流量趋势-->
-    <VisiTab></VisiTab>
-
+    <VisiTab />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
-import Icons from './components/Icons'
-import VisiTab from './components/VisiTab.vue'
-import { CountTo } from '@/components/CountTo/index'
-import { getConsoleInfo } from '@/api/dashboard/console'
+  import { defineComponent, onMounted, reactive, toRefs } from 'vue';
+  import Icons from './components/Icons';
+  import VisiTab from './components/VisiTab.vue';
+  import { CountTo } from '@/components/CountTo/index';
+  import { getConsoleInfo } from '@/api/dashboard/console';
 
-export default defineComponent({
-  components: { ...Icons, VisiTab, CountTo },
-  setup() {
-    const state = reactive({
-      cardHeaderStyle: {
-        'border-bottom': '1px solid #eee',
-        'font-size': '16px'
-      },
-      visits: {},
-      saleroom: {},
-      orderLarge: {},
-      volume: {},
-    })
-    // 图标列表
-    const iconList = [
-      {
-        icon: 'UsergroupAddOutlined',
-        size: '32',
-        title: '用户',
-        color: '#69c0ff',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'BarChartOutlined',
-        size: '32',
-        title: '分析',
-        color: '#69c0ff',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'ShoppingCartOutlined',
-        size: '32',
-        title: '商品',
-        color: '#ff9c6e',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'AccountBookOutlined',
-        size: '32',
-        title: '订单',
-        color: '#b37feb',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'CreditCardOutlined',
-        size: '32',
-        title: '票据',
-        color: '#ffd666',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'MailOutlined',
-        size: '32',
-        title: '消息',
-        color: '#5cdbd3',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'TagsOutlined',
-        size: '32',
-        title: '标签',
-        color: '#ff85c0',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-      {
-        icon: 'SettingOutlined',
-        size: '32',
-        title: '配置',
-        color: '#ffc069',
-        eventObject: {
-          click: () => {
-          }
-        }
-      },
-    ]
-    onMounted(async () => {
-      const { visits, saleroom, orderLarge, volume } = await getConsoleInfo()
-      state.visits = visits
-      state.saleroom = saleroom
-      state.orderLarge = orderLarge
-      state.volume = volume
-    })
-    return {
-      ...toRefs(state),
-      iconList
-    }
-  }
-})
+  export default defineComponent({
+    components: { ...Icons, VisiTab, CountTo },
+    setup() {
+      const state = reactive({
+        cardHeaderStyle: {
+          'border-bottom': '1px solid #eee',
+          'font-size': '16px',
+        },
+        visits: {},
+        saleroom: {},
+        orderLarge: {},
+        volume: {},
+      });
+      // 图标列表
+      const iconList = [
+        {
+          icon: 'UsergroupAddOutlined',
+          size: '32',
+          title: '用户',
+          color: '#69c0ff',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'BarChartOutlined',
+          size: '32',
+          title: '分析',
+          color: '#69c0ff',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'ShoppingCartOutlined',
+          size: '32',
+          title: '商品',
+          color: '#ff9c6e',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'AccountBookOutlined',
+          size: '32',
+          title: '订单',
+          color: '#b37feb',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'CreditCardOutlined',
+          size: '32',
+          title: '票据',
+          color: '#ffd666',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'MailOutlined',
+          size: '32',
+          title: '消息',
+          color: '#5cdbd3',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'TagsOutlined',
+          size: '32',
+          title: '标签',
+          color: '#ff85c0',
+          eventObject: {
+            click: () => {},
+          },
+        },
+        {
+          icon: 'SettingOutlined',
+          size: '32',
+          title: '配置',
+          color: '#ffc069',
+          eventObject: {
+            click: () => {},
+          },
+        },
+      ];
+      onMounted(async () => {
+        const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
+        state.visits = visits;
+        state.saleroom = saleroom;
+        state.orderLarge = orderLarge;
+        state.volume = volume;
+      });
+      return {
+        ...toRefs(state),
+        iconList,
+      };
+    },
+  });
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>