添加@vueuse/core包依赖

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@antv/graphin": "^2.7.27",
     "@element-plus/icons-vue": "2.3.1",
+    "@vueuse/core": "^10.7.1",
     "antv-graphin-vue": "^2.6.10",
     "axios": "1.6.4",
     "dayjs": "1.11.10",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@element-plus/icons-vue':
     specifier: 2.3.1
     version: 2.3.1(vue@3.4.5)
+  '@vueuse/core':
+    specifier: ^10.7.1
+    version: 10.7.1(vue@3.4.5)
   antv-graphin-vue:
     specifier: ^2.6.10
     version: 2.6.10(@antv/g6@4.8.24)(core-js@3.35.0)(lodash-es@4.17.21)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(vue@3.4.5)
@@ -1373,6 +1376,10 @@ packages:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
 
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+    dev: false
+
   /@typescript-eslint/eslint-plugin@6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-Vih/4xLXmY7V490dGwBQJTpIZxH4ZFH6eCVmQ4RFkB+wmaCTDAx4dtgoWwMNGKLkqRY1L6rPqzEbjorRnDo4rQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -1967,6 +1974,18 @@ packages:
       vue-component-type-helpers: 1.8.27
     dev: true
 
+  /@vueuse/core@10.7.1(vue@3.4.5):
+    resolution: {integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.7.1
+      '@vueuse/shared': 10.7.1(vue@3.4.5)
+      vue-demi: 0.14.6(vue@3.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/core@9.13.0(vue@3.4.5):
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
     dependencies:
@@ -1979,10 +1998,23 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/metadata@10.7.1:
+    resolution: {integrity: sha512-jX8MbX5UX067DYVsbtrmKn6eG6KMcXxLRLlurGkZku5ZYT3vxgBjui2zajvUZ18QLIjrgBkFRsu7CqTAg18QFw==}
+    dev: false
+
   /@vueuse/metadata@9.13.0:
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
     dev: false
 
+  /@vueuse/shared@10.7.1(vue@3.4.5):
+    resolution: {integrity: sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==}
+    dependencies:
+      vue-demi: 0.14.6(vue@3.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared@9.13.0(vue@3.4.5):
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
     dependencies:

src/views/dashboard/components/Admin.vue

@@ -116,7 +116,7 @@ const { nowTime } = toRefs(state)
 
     <el-row justify="center">
       <el-col class="icenter">
-        <el-card class="box-card" style="width: 88%" shadow="hover">
+        <el-card class="box-card" style="width: 92%" shadow="hover">
           <template #header>
             <div class="fig-title">
               <Coin style="width: 2em; height: 2em; margin-right: 8px" />
@@ -151,13 +151,13 @@ const { nowTime } = toRefs(state)
   font-weight: 900;
   color: azure;
 }
-.text {
-  font-size: 14px;
-}
+// .text {
+//   font-size: 14px;
+// }
 
-.item {
-  padding: 18px 0;
-}
+// .item {
+//   padding: 18px 0;
+// }
 
 .icenter {
   display: flex;
@@ -174,6 +174,7 @@ const { nowTime } = toRefs(state)
 }
 
 .box-card {
-  width: 380px;
+  height: auto;
+  width: 80%;
 }
 </style>

src/views/stats/index.vue

@@ -0,0 +1,6 @@
+<!-- 分析统计页面 -->
+<template>
+  <div class="app-container">
+    <el-card />
+  </div>
+</template>