🆕 version(custom): 发布v1.1.5-beta版本

2023-12-16 17:40:03 +08:00
parent d9ee4c6c84
commit c2f0621c18
18 changed files with 282 additions and 296 deletions
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,3 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-npx lint-staged --allow-empty
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,4 +1,3 @@
 /dist/*
 /public/*
-src/style/reset.css
 /node_modules/*
--- a/package.json
+++ b/package.json
@@ -1,22 +1,17 @@
 {
  "name": "hula-vue3",
  "private": true,
-  "version": "v1.1.0-beta",
+  "version": "v1.1.5-beta",
  "packageManager": "pnpm@8.11.0",
  "type": "module",
  "engines": {
    "node": "18.x || 20.x"
  },
-  "husky":{
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "oxlint --fix",
      "prettier --config .prettierrc --write",
-      "eslint --fix"
+      "eslint src"
    ]
  },
  "scripts": {
@@ -33,8 +28,7 @@
    "lint:stylelint": "stylelint --cache --fix **/*.{html,vue,css,scss} --cache --cache-location node_modules/.cache/stylelint/",
    "fix": "eslint --ext .js,.jsx,.ts,.vue src --fix",
    "preinstall": "npx only-allow pnpm",
-    "prepare": "npx husky install",
-    "commit": "lint-staged && git-cz && conventional-changelog -p cz-config.js -i CHANGELOG.md -s -r 0",
+    "commit": "git add . && lint-staged && git-cz && conventional-changelog -p cz-config.js -i CHANGELOG.md -s -r 0",
    "changelog": "conventional-changelog -p cz-config.js -i CHANGELOG.md -s -r 0",
    "lint:staged": "lint-staged"
  },
@@ -89,7 +83,6 @@
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.19.2",
-    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
    "only-allow": "^1.2.1",
    "oxlint": "^0.0.20",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -151,9 +151,6 @@ devDependencies:
  eslint-plugin-vue:
    specifier: ^9.19.2
    version: 9.19.2(eslint@8.55.0)
-  husky:
-    specifier: ^8.0.3
-    version: 8.0.3
  lint-staged:
    specifier: ^14.0.1
    version: 14.0.1
@@ -4570,12 +4567,6 @@ packages:
    engines: {node: '>=14.18.0'}
    dev: true

-  /husky@8.0.3:
-    resolution: {integrity: sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dev: true
-
  /iconv-lite@0.4.24:
    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
    engines: {node: '>=0.10.0'}
--- a/src/assets/css/cardchart.css
+++ b/src/assets/css/cardchart.css
@@ -1,27 +0,0 @@
-.weekData {
-  width: 350px;
-  height: 150px;
-  background: white;
-  padding: 15px;
-  border-radius: 10px;
-  margin-bottom: 10px;
-}
-.weekData p {
-  font-weight: bold;
-  font-size: 25px;
-}
-span {
-  font-weight: bold;
-}
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.2em;
-  font-size: 20px;
-}
-.tag-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.2em;
-  font-size: 14px;
-}
--- a/src/assets/scss/barchar.scss
+++ b/src/assets/scss/barchar.scss
--- a/src/assets/scss/cardchart.scss
+++ b/src/assets/scss/cardchart.scss
@@ -0,0 +1,27 @@
+.weekData {
+  width: 350px;
+  height: 150px;
+  background: white;
+  padding: 15px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  p {
+    font-weight: bold;
+    font-size: 25px;
+  }
+  span {
+    font-weight: bold;
+  }
+  .icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.2em;
+    font-size: 20px;
+  }
+  .tag-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.2em;
+    font-size: 14px;
+  }
+}
--- a/src/assets/scss/layout-header.scss
+++ b/src/assets/scss/layout-header.scss
@@ -1,18 +1,50 @@
-.header-unfold {
+@mixin header($calc-width: 110px) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
-  width: calc(100vw - 110px);
+  width: calc(100vw - $calc-width);
  border-radius: 10px;
  margin: 10px 10px 5px 10px;
 }
-.header-shrink {
+@mixin operation-list-box() {
  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  width: calc(100vw - 240px);
-  border-radius: 10px;
-  margin: 10px 10px 5px 10px;
+  align-items: center;
+  justify-content: flex-end;
+  cursor: pointer;
+}
+.header-unfold {
+  @include header;
+  .operation-list-box {
+    @include operation-list-box;
+    &:hover {
+      .n-icon {
+        animation: twinkle 0.3s ease-in-out;
+      }
+      .n-badge {
+        animation: twinkle-badge 0.3s ease-in-out;
+      }
+      .n-avatar {
+        animation: twinkle 0.3s ease-in-out;
+      }
+    }
+  }
+}
+.header-shrink {
+  @include header(240px);
+  .operation-list-box {
+    @include operation-list-box;
+    &:hover {
+      .n-icon {
+        animation: twinkle 0.3s ease-in-out;
+      }
+      .n-badge {
+        animation: twinkle-badge 0.3s ease-in-out;
+      }
+      .n-avatar {
+        animation: twinkle 0.3s ease-in-out;
+      }
+    }
+  }
 }
 .operation-list {
  border-radius: 10px;
@@ -24,30 +56,6 @@
  padding: 0 15px 0 15px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 }
-.operation-list-box {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  cursor: pointer;
-}
-.header-unfold .operation-list-box:hover .n-icon {
-  animation: twinkle 0.3s ease-in-out;
-}
-.header-shrink .operation-list-box:hover .n-icon {
-  animation: twinkle 0.3s ease-in-out;
-}
-.header-unfold .operation-list-box:hover .n-badge {
-  animation: twinkle-badge 0.3s ease-in-out;
-}
-.header-shrink .operation-list-box:hover .n-badge {
-  animation: twinkle-badge 0.3s ease-in-out;
-}
-.header-unfold .operation-list-box:hover .n-avatar {
-  animation: twinkle 0.3s ease-in-out;
-}
-.header-shrink .operation-list-box:hover .n-avatar {
-  animation: twinkle 0.3s ease-in-out;
-}
@keyframes twinkle {
  0% {
    transform: scale(0);
@@ -75,11 +83,11 @@
  border-radius: 8px;
  border: 1px transparent solid; /* 设置一个透明的边框 */
  transition: border-color 0.3s ease; /* 过渡效果应用于颜色而不是边框宽度 */
-}
-.search:hover {
-  border: 1px rgb(214, 211, 209) solid;
-}
-.search:hover .n-icon {
-  animation: twinkle 0.3s ease-in-out;
+  &:hover {
+    border: 1px rgb(214, 211, 209) solid;
+    .n-icon {
+      animation: twinkle 0.3s ease-in-out;
+    }
+  }
 }
 /*end*/
--- a/src/components/Language/index.vue
+++ b/src/components/Language/index.vue
@@ -1,46 +1,43 @@
 <template>
-  <div class="operation-list-box">
-    <n-tooltip trigger="hover" style="padding: 5px 8px 5px 8px">
-      <template #trigger>
-        <n-popover trigger="click">
-          <template #trigger>
-            <n-icon class="language" v-if="EYE_THEME" :size="24" :color="TEXT_COLOR"><Language /></n-icon>
-            <n-icon class="language" v-else :size="24"><Language /></n-icon>
-          </template>
-          <n-space vertical class="n-button-hover">
-            <n-text depth="3">
-              {{ i18nStore.locale === 'zh-CN' ? '简体中文' : 'English' }}
-            </n-text>
-            <n-button
-              :loading="loading"
-              style="font-weight: bold"
-              v-if="i18nStore.locale === 'en-US'"
-              @click="chineseSwitch"
-              quaternary>
-              <span>简体中文</span>
-              <n-icon color="#ccc"><ArrowUpRight /></n-icon>
-            </n-button>
-            <n-button :loading="loading" style="font-weight: bold" v-else @click="englishSwitch" quaternary>
-              <span>English</span>
-              <n-icon color="#ccc"><ArrowUpRight /></n-icon>
-            </n-button>
-          </n-space>
-        </n-popover>
-      </template>
-      {{ t('switch') }}
-    </n-tooltip>
-  </div>
+  <n-tooltip trigger="hover" style="padding: 5px 8px 5px 8px">
+    <template #trigger>
+      <n-popover trigger="click">
+        <template #trigger>
+          <n-icon class="language" v-if="EYE_THEME" :size="24" :color="TEXT_COLOR"><Language /></n-icon>
+          <n-icon class="language" v-else :size="24"><Language /></n-icon>
+        </template>
+        <n-space vertical class="n-button-hover">
+          <n-text depth="3">
+            {{ i18nStore.locale === 'zh-CN' ? '简体中文' : 'English' }}
+          </n-text>
+          <n-button
+            :loading="loading"
+            style="font-weight: bold"
+            v-if="i18nStore.locale === 'en-US'"
+            @click="chineseSwitch"
+            quaternary>
+            <span>简体中文</span>
+            <n-icon color="#ccc"><ArrowUpRight /></n-icon>
+          </n-button>
+          <n-button :loading="loading" style="font-weight: bold" v-else @click="englishSwitch" quaternary>
+            <span>English</span>
+            <n-icon color="#ccc"><ArrowUpRight /></n-icon>
+          </n-button>
+        </n-space>
+      </n-popover>
+    </template>
+    {{ t('switch') }}
+  </n-tooltip>
 </template>

 <script setup lang="ts">
 import { language } from '@/stores/i18n'
 import { i18n } from '@/i18n'
-import { Language } from '@vicons/tabler'
+import { ArrowUpRight, Language } from '@vicons/tabler'
 import { mainStore } from '@/stores/main'
 import { storeToRefs } from 'pinia'
-import { ArrowUpRight } from '@vicons/tabler'
 import { delay } from 'lodash-es'
-import { zhCN, dateZhCN } from 'naive-ui'
+import { dateZhCN, zhCN } from 'naive-ui'

 /*获取App中的provide传来的naive-ui国际化配置*/
 const NLanguage = ref(inject('NLanguage'))
@@ -74,19 +71,19 @@ const englishSwitch = () => {
 }
 </script>

-<style scoped>
-@import '@/assets/css/layout-header.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/layout-header.scss';
 .n-button-hover {
  font-weight: bold;
-}
-.n-button-hover .n-button:hover {
-  color: #bc3f4a;
-}
-.n-button-hover .n-button:hover span {
-  animation: twinkle 0.3s ease-in-out;
-}
-.n-button-hover .n-text {
-  margin-left: 13px;
+  .n-button:hover {
+    color: #bc3f4a;
+    span {
+      animation: twinkle 0.3s ease-in-out;
+    }
+  }
+  .n-text {
+    margin-left: 13px;
+  }
 }
@keyframes twinkle {
  0% {
--- a/src/global/search/index.vue
+++ b/src/global/search/index.vue
@@ -1,18 +1,16 @@
 <template>
-  <div class="operation-list-box">
-    <n-tooltip trigger="hover" style="padding: 5px 8px 5px 8px">
-      <template #trigger>
-        <div @click="showSearch" class="search-input">
-          <n-icon :size="24" :component="Search" />
-          <span>{{ t('search') }}</span>
-          <n-tag style="border-radius: 6px" :bordered="false" size="small">
-            {{ data.tags['search'].item.map((tag) => tag.charAt(0).toUpperCase() + tag.slice(1)).join('+') }}
-          </n-tag>
-        </div>
-      </template>
-      {{ t('global_search') }}
-    </n-tooltip>
-  </div>
+  <n-tooltip trigger="hover" style="padding: 5px 8px 5px 8px">
+    <template #trigger>
+      <div @click="showSearch" class="search-input">
+        <n-icon :size="24" :component="Search" />
+        <span>{{ t('search') }}</span>
+        <n-tag style="border-radius: 6px" :bordered="false" size="small">
+          {{ data.tags['search'].item.map((tag) => tag.charAt(0).toUpperCase() + tag.slice(1)).join('+') }}
+        </n-tag>
+      </div>
+    </template>
+    {{ t('global_search') }}
+  </n-tooltip>
  <!--全局弹框-->
  <search-modal v-model:value="show" />
 </template>
@@ -102,7 +100,7 @@ document.addEventListener('keydown', (event) => {
 </script>

 <style lang="scss" scoped>
-@import '@/assets/css/layout-header.css';
+@import '@/assets/scss/layout-header.scss';
 .search-input {
  display: flex;
  align-items: center;
--- a/src/global/settings/index.vue
+++ b/src/global/settings/index.vue
@@ -1,12 +1,10 @@
 <template>
-  <div class="operation-list-box">
-    <n-tooltip trigger="hover" style="padding: 5px 8px 5px 8px">
-      <template #trigger>
-        <n-icon :size="24" @click="showDrawer"><Settings /></n-icon>
-      </template>
-      {{ t('settings') }}
-    </n-tooltip>
-  </div>
+  <n-tooltip trigger="hover" style="padding: 5px 8px 5px 8px">
+    <template #trigger>
+      <n-icon :size="24" @click="showDrawer"><Settings /></n-icon>
+    </template>
+    {{ t('settings') }}
+  </n-tooltip>

  <n-drawer style="border-radius: 10px 0 0 10px" v-model:show="active" :width="350">
    <n-drawer-content :title="t('settings')" closable :native-scrollbar="false">
@@ -164,6 +162,6 @@ const save = (val: globalSetting, event: MouseEvent) => {
 </script>

 <style lang="scss">
-@import '@/assets/css/layout-header.css';
-@import '@/assets/scss/toggle-theme';
+@import '@/assets/scss/layout-header.scss';
+@import '@/assets/scss/toggle-theme.scss';
 </style>
--- a/src/layout/header/index.vue
+++ b/src/layout/header/index.vue
@@ -5,7 +5,7 @@

    <div class="operation-list">
      <!--全局搜索-->
-      <div class="search">
+      <div class="search operation-list-box">
        <GlobalSearch />
      </div>
      <n-divider vertical />
@@ -30,7 +30,9 @@
      </div>
      <n-divider vertical />
      <!--切换语言组件-->
-      <Language />
+      <div class="operation-list-box">
+        <Language />
+      </div>
      <n-divider vertical />
      <!--终端-->
      <div class="operation-list-box">
@@ -171,7 +173,9 @@
      </div>
      <n-divider vertical />
      <!-- 设置组件 -->
-      <Settings />
+      <div class="operation-list-box">
+        <Settings />
+      </div>
    </div>
  </div>
  <!--终端弹框-->
@@ -266,8 +270,8 @@ const userExit = () => {
 }
 </script>

-<style scoped>
-@import '@/assets/css/layout-header.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/layout-header.scss';
 :deep(.n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab.n-tabs-tab--active) {
  color: #189f57;
 }
@@ -279,9 +283,9 @@ const userExit = () => {
  display: flex;
  align-items: center;
  gap: 10px;
-}
-.info-content span {
-  font-weight: bold;
+  span {
+    font-weight: bold;
+  }
 }
 .info-tag {
  display: flex;
--- a/src/views/pagination/odometer/Barchart-second.vue
+++ b/src/views/pagination/odometer/Barchart-second.vue
@@ -7,6 +7,7 @@ import { onMounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import { mainStore } from '@/stores/main'
 import { storeToRefs } from 'pinia'
+
 type EChartsOption = echarts.EChartsOption

 const color = 'rgb(201,196,196)'
@@ -114,8 +115,8 @@ onMounted(() => {
 })
 </script>

-<style scoped>
-@import '@/assets/css/barchar.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/barchar.scss';
 .barchart {
  background: v-bind(BGC);
 }
--- a/src/views/pagination/odometer/Barchart-third.vue
+++ b/src/views/pagination/odometer/Barchart-third.vue
@@ -115,8 +115,8 @@ onMounted(() => {
 })
 </script>

-<style scoped>
-@import '@/assets/css/barchar.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/barchar.scss';
 .barchart {
  background: v-bind(BGC);
 }
--- a/src/views/pagination/odometer/Barchart.vue
+++ b/src/views/pagination/odometer/Barchart.vue
@@ -115,8 +115,8 @@ onMounted(() => {
 })
 </script>

-<style scoped>
-@import '@/assets/css/barchar.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/barchar.scss';

 .barchart {
  background: v-bind(BGC);
--- a/src/views/pagination/odometer/Cardchart-second.vue
+++ b/src/views/pagination/odometer/Cardchart-second.vue
@@ -36,7 +36,7 @@ import { onMounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import { mainStore } from '@/stores/main'
 import { storeToRefs } from 'pinia'
-import { CaretUp, CaretDown, ArrowNarrowUp } from '@vicons/tabler'
+import { ArrowNarrowUp, CaretDown, CaretUp } from '@vicons/tabler'

 type EChartsOption = echarts.EChartsOption
 const data = [
@@ -154,52 +154,52 @@ onMounted(() => {
 })
 </script>

-<style scoped>
-@import '@/assets/css/cardchart.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/cardchart.scss';
 .weekData {
  background: v-bind(BGC);
-}
-.count_second {
-  font-weight: bold;
-  font-size: 25px;
-  color: v-bind(TEXT_COLOR);
-}
-span {
-  color: v-bind(TEXT_COLOR);
-}
-.weekData p {
-  color: v-bind(TEXT_COLOR);
-}
-#weekData-second {
-  margin-left: 30px;
-}
-.count-div {
-  display: flex;
-  height: 70px;
-  align-items: center;
+  span {
+    color: v-bind(TEXT_COLOR);
+  }
+  .count-div {
+    display: flex;
+    height: 70px;
+    align-items: center;
+    .count_second {
+      font-weight: bold;
+      font-size: 25px;
+      color: v-bind(TEXT_COLOR);
+    }
+  }
+  .footer {
+    display: flex;
+    margin-top: 40px;
+    font-size: 14px;
+    .footer-left {
+      color: #cccccc;
+    }
+    .footer-top {
+      color: #bc3f4a;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+    .footer-bottom {
+      color: #2c964b;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  }
+  .tag {
+    flex: 1;
+  }
+  p {
+    color: v-bind(TEXT_COLOR);
+  }
 }
 #Cardchart-second {
  margin-left: 40px;
 }
-.footer {
-  display: flex;
-  margin-top: 40px;
-  font-size: 14px;
-}
-.footer-left {
-  color: #cccccc;
-}
-.footer-top {
-  color: #bc3f4a;
-  font-weight: bold;
-  margin-left: 5px;
-}
-.footer-bottom {
-  color: #2c964b;
-  font-weight: bold;
-  margin-left: 5px;
-}
-.tag {
-  flex: 1;
+#weekData-second {
+  margin-left: 30px;
 }
 </style>
--- a/src/views/pagination/odometer/Cardchart-third.vue
+++ b/src/views/pagination/odometer/Cardchart-third.vue
@@ -36,7 +36,7 @@ import { onMounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import { mainStore } from '@/stores/main'
 import { storeToRefs } from 'pinia'
-import { CaretUp, CaretDown, ArrowNarrowUp } from '@vicons/tabler'
+import { ArrowNarrowUp, CaretDown, CaretUp } from '@vicons/tabler'

 type EChartsOption = echarts.EChartsOption
 const xAxisData: string[] = []
@@ -144,52 +144,52 @@ onMounted(() => {
 })
 </script>

-<style scoped>
-@import '@/assets/css/cardchart.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/cardchart.scss';
 .weekData {
  background: v-bind(BGC);
-}
-.count_third {
-  font-weight: bold;
-  font-size: 25px;
-  color: v-bind(TEXT_COLOR);
-}
-span {
-  color: v-bind(TEXT_COLOR);
-}
-.weekData p {
-  color: v-bind(TEXT_COLOR);
-}
-#weekData-third {
-  margin-left: 30px;
-}
-.count-div {
-  display: flex;
-  height: 70px;
-  align-items: center;
+  span {
+    color: v-bind(TEXT_COLOR);
+  }
+  .count-div {
+    display: flex;
+    height: 70px;
+    align-items: center;
+    .count_third {
+      font-weight: bold;
+      font-size: 25px;
+      color: v-bind(TEXT_COLOR);
+    }
+  }
+  .tag {
+    flex: 1;
+  }
+  .footer {
+    display: flex;
+    margin-top: 40px;
+    font-size: 14px;
+    .footer-left {
+      color: #cccccc;
+    }
+    .footer-top {
+      color: #bc3f4a;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+    .footer-bottom {
+      color: #2c964b;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  }
+  p {
+    color: v-bind(TEXT_COLOR);
+  }
 }
 #Cardchart-third {
  margin-left: 40px;
 }
-.footer {
-  display: flex;
-  margin-top: 40px;
-  font-size: 14px;
-}
-.footer-left {
-  color: #cccccc;
-}
-.footer-top {
-  color: #bc3f4a;
-  font-weight: bold;
-  margin-left: 5px;
-}
-.footer-bottom {
-  color: #2c964b;
-  font-weight: bold;
-  margin-left: 5px;
-}
-.tag {
-  flex: 1;
+#weekData-third {
+  margin-left: 30px;
 }
 </style>
--- a/src/views/pagination/odometer/Cardchart.vue
+++ b/src/views/pagination/odometer/Cardchart.vue
@@ -35,7 +35,7 @@ import { CountTo } from 'vue3-count-to'
 import * as echarts from 'echarts'
 import { mainStore } from '@/stores/main'
 import { storeToRefs } from 'pinia'
-import { CaretUp, CaretDown, ArrowNarrowUp } from '@vicons/tabler'
+import { ArrowNarrowUp, CaretDown, CaretUp } from '@vicons/tabler'

 type EChartsOption = echarts.EChartsOption
 const store = mainStore()
@@ -93,49 +93,49 @@ onMounted(() => {
 })
 </script>

-<style scoped>
-@import '@/assets/css/cardchart.css';
+<style lang="scss" scoped>
+@import '@/assets/scss/cardchart.scss';
 .weekData {
  background: v-bind(BGC);
-}
-.count {
-  font-weight: bold;
-  font-size: 25px;
-  color: v-bind(TEXT_COLOR);
-}
-span {
-  color: v-bind(TEXT_COLOR);
-}
-.weekData p {
-  color: v-bind(TEXT_COLOR);
-}
-.count-div {
-  display: flex;
-  height: 70px;
-  align-items: center;
+  span {
+    color: v-bind(TEXT_COLOR);
+  }
+  .count-div {
+    display: flex;
+    height: 70px;
+    align-items: center;
+    .count {
+      font-weight: bold;
+      font-size: 25px;
+      color: v-bind(TEXT_COLOR);
+    }
+  }
+  .footer {
+    display: flex;
+    margin-top: 40px;
+    font-size: 14px;
+    .footer-left {
+      color: #cccccc;
+    }
+    .footer-top {
+      color: #bc3f4a;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+    .footer-bottom {
+      color: #2c964b;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  }
+  .tag {
+    flex: 1;
+  }
+  p {
+    color: v-bind(TEXT_COLOR);
+  }
 }
 #Cardchart {
  margin-left: 40px;
 }
-.footer {
-  display: flex;
-  margin-top: 40px;
-  font-size: 14px;
-}
-.footer-left {
-  color: #cccccc;
-}
-.footer-top {
-  color: #bc3f4a;
-  font-weight: bold;
-  margin-left: 5px;
-}
-.footer-bottom {
-  color: #2c964b;
-  font-weight: bold;
-  margin-left: 5px;
-}
-.tag {
-  flex: 1;
-}
 </style>