From ece604875e4a40a5d35cdb94d8b1179d0358df7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=82=B2=E6=85=A2=E6=88=96=E9=A6=99=E6=A9=99?=
 <49575330+xiangshu233@users.noreply.github.com>
Date: Fri, 21 Oct 2022 17:27:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=B8=89=E4=B8=AA=20useEchar?=
 =?UTF-8?q?ts=20hooks=20=E7=A4=BA=E4=BE=8B=20=E9=9A=8F=E4=BE=BF=E6=95=B4?=
 =?UTF-8?q?=E4=BA=86=E4=B8=AA=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      |  13 ++-
 src/layout/DefaultLayout.vue     |   7 --
 src/layout/components/Header.vue |  20 ----
 src/layout/components/Main.vue   |  29 ------
 src/layout/components/Menu.vue   |  29 ------
 src/layout/index.vue             |  17 ++--
 src/router/modules.ts            |   3 +-
 src/styles/common.less           |  13 +++
 src/views/dashboard/index.vue    | 161 +++++++++++--------------------
 src/views/message/barChart.vue   | 106 ++++++++++++++++++++
 src/views/message/index.vue      |  12 +--
 src/views/message/lineChart.vue  | 119 +++++++++++++++++++++++
 src/views/message/pieChart.vue   |  65 +++++++++++++
 src/views/my/index.vue           |  23 ++---
 14 files changed, 391 insertions(+), 226 deletions(-)
 delete mode 100644 src/layout/DefaultLayout.vue
 delete mode 100644 src/layout/components/Header.vue
 delete mode 100644 src/layout/components/Main.vue
 delete mode 100644 src/layout/components/Menu.vue
 create mode 100644 src/views/message/barChart.vue
 create mode 100644 src/views/message/lineChart.vue
 create mode 100644 src/views/message/pieChart.vue

diff --git a/src/App.vue b/src/App.vue
index a244fa9..205c8e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,12 @@
 <template>
   <vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars">
-    <router-view v-slot="{ Component }">
+    <routerView v-slot="{ Component }">
       <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" />
+        <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
+          <component :is="Component" />
+        </keep-alive>
       </transition>
-    </router-view>
+    </routerView>
   </vanConfigProvider>
 </template>
 
@@ -12,9 +14,14 @@
   import { computed } from 'vue';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { darken, lighten } from '@/utils/index';
+  import { useRouteStore } from '@/store/modules/route';
 
+  const routeStore = useRouteStore();
   const designStore = useDesignSettingStore();
 
+  // 需要缓存的路由组件
+  const keepAliveComponents = computed(() => routeStore.keepAliveComponents);
+
   const getDarkMode = computed(() => designStore.getDarkMode);
 
   const getThemeVars = computed(() => {
diff --git a/src/layout/DefaultLayout.vue b/src/layout/DefaultLayout.vue
deleted file mode 100644
index fb62d1f..0000000
--- a/src/layout/DefaultLayout.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
deleted file mode 100644
index 1c1b583..0000000
--- a/src/layout/components/Header.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div class="ignore-nav-header">
-    <van-nav-bar fixed :title="getTitle" />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-  import { useRoute } from 'vue-router';
-
-  const currentRoute = useRoute();
-
-  const getTitle = computed(() => currentRoute.meta.title as string);
-</script>
-
-<style scoped lang="less">
-  .ignore-nav-header {
-    height: @header-height;
-  }
-</style>
diff --git a/src/layout/components/Main.vue b/src/layout/components/Main.vue
deleted file mode 100644
index 92336f2..0000000
--- a/src/layout/components/Main.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="flex-1 nav-body">
-    <router-view>
-      <template #default="{ Component, route }">
-        <transition name="zoom-fade" mode="out-in" appear>
-          <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
-            <component :is="Component" :key="route.fullPath" />
-          </keep-alive>
-          <component v-else :is="Component" :key="route.fullPath" />
-        </transition>
-      </template>
-    </router-view>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-  import { useRouteStore } from '@/store/modules/route';
-
-  const routeStore = useRouteStore();
-  // 需要缓存的路由组件
-  const keepAliveComponents = computed(() => routeStore.keepAliveComponents);
-</script>
-
-<style scoped lang="less">
-  .nav-body {
-    overflow-x: auto;
-  }
-</style>
diff --git a/src/layout/components/Menu.vue b/src/layout/components/Menu.vue
deleted file mode 100644
index 536be0f..0000000
--- a/src/layout/components/Menu.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="ignore-nav-footer">
-    <van-tabbar route>
-      <van-tabbar-item
-        fixed
-        replace
-        v-for="menu in getMenus"
-        :key="menu.name"
-        :to="menu.path"
-        :icon="(menu.meta?.icon as string)"
-        >{{ menu.meta?.title }}
-      </van-tabbar-item>
-    </van-tabbar>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-  import { useRouteStore } from '@/store/modules/route';
-
-  const routeStore = useRouteStore();
-  const getMenus = computed(() => routeStore.menus);
-</script>
-
-<style scoped lang="less">
-  .nav-footer {
-    height: @footer-height;
-  }
-</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index de3c5c8..fe59085 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -3,6 +3,14 @@
     <van-nav-bar v-if="getShowHeader" fixed placeholder :title="getTitle" />
     <routerView class="flex-1 overflow-x-hidden">
       <template #default="{ Component, route }">
+        <!--
+          keep-alive 标签的 include 属性是根据组件的 name 判断的，
+          所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name，
+          并且与 router 路由表中使用的 name 属性 一致，否则无效
+          本项目使用了 vite-plugin-vue-setup-extend 插件
+          可直接在 script 标签上书写 name 如：
+          <script setup lang="ts" name="DashboardPage">
+        -->
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>
@@ -46,12 +54,3 @@
 </script>
 
 <style scoped lang="less"></style>
-
-<!--
-  keep-alive 标签的 include 属性是根据组件的 name 判断的，
-  所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name，
-  并且与 router 路由表中使用的 name 属性 一致，否则无效
-  本项目使用了 vite-plugin-vue-setup-extend 插件
-  可直接在 script 标签上书写 name 如：
-  <script setup lang="ts" name="DashboardPage">
--->
diff --git a/src/router/modules.ts b/src/router/modules.ts
index 02bacfc..2213c6e 100644
--- a/src/router/modules.ts
+++ b/src/router/modules.ts
@@ -17,7 +17,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
         path: 'index',
         name: 'DashboardPage',
         meta: {
-          keepAlive: true,
+          keepAlive: false,
         },
         component: () => import('@/views/dashboard/index.vue'),
       },
@@ -81,6 +81,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
     meta: {
       title: '修改昵称',
       innerPage: true,
+      keepAlive: false,
     },
     component: () => import('@/views/my/EditNickname.vue'),
   },
diff --git a/src/styles/common.less b/src/styles/common.less
index 8d95f15..75d7a76 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -96,3 +96,16 @@ a:hover {
     height: 100% !important;
   }
 }
+
+.my-card {
+  backdrop-filter: blur(10px);
+  /* stylelint-disable-next-line color-function-notation */
+  background: rgba(255, 255, 255, 70%);
+}
+
+html[data-theme='dark'] {
+  .my-card {
+    /* stylelint-disable-next-line color-function-notation */
+    background: rgba(30, 30, 30, 70%);
+  }
+}
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 789183e..f50af2f 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,117 +1,66 @@
 <template>
-  <div>
-    <van-field name="radio" label="单选框">
-      <template #input>
-        <van-radio-group v-model="checked" direction="horizontal">
-          <van-radio name="1">单选框 1</van-radio>
-          <van-radio name="2">单选框 2</van-radio>
-        </van-radio-group>
-      </template>
-    </van-field>
-    <van-field name="checkbox" label="复选框">
-      <template #input>
-        <van-checkbox v-model="checked2" shape="square" />
-      </template>
-    </van-field>
-    <van-field name="checkboxGroup" label="复选框组">
-      <template #input>
-        <van-checkbox-group v-model="groupChecked" direction="horizontal">
-          <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
-          <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
-        </van-checkbox-group>
-      </template>
-    </van-field>
-    <van-field name="slider" label="滑块">
-      <template #input>
-        <van-slider v-model="value" />
-      </template>
-    </van-field>
-    <van-field
-      v-model="result"
-      is-link
-      readonly
-      name="calendar"
-      label="日历"
-      placeholder="点击选择日期"
-      @click="showCalendar = true"
-    />
-    <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
-    <van-field
-      v-model="fieldValue"
-      is-link
-      readonly
-      label="地区"
-      placeholder="请选择所在地区"
-      @click="show = true"
-    />
-    <van-popup v-model:show="show" round position="bottom">
-      <van-cascader
-        v-model="cascaderValue"
-        title="请选择所在地区"
-        :options="options"
-        @close="show = false"
-        @finish="onFinish"
-      />
-    </van-popup>
-    <van-switch v-model="checked" />
-    <van-notice-bar
-      left-icon="volume-o"
-      text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
-    />
-    <van-steps direction="vertical" :active="0">
-      <van-step>
-        <h3>【城市】物流状态1</h3>
-        <p>2016-07-12 12:40</p>
-      </van-step>
-      <van-step>
-        <h3>【城市】物流状态2</h3>
-        <p>2016-07-11 10:00</p>
-      </van-step>
-      <van-step>
-        <h3>快件已发货</h3>
-        <p>2016-07-10 09:30</p>
-      </van-step>
-    </van-steps>
-    <div style="height: 300px; background: #000"></div>
+  <div class="flex flex-col justify-center items-center h-screen p-60px">
+    <div class="wel-box flex flex-col items-center justify-between w-full">
+      <SvgIcon class="logo enter-y" :size="130" name="logo" />
+      <div
+        class="text-darkBlue dark:text-garyWhite text-2xl font-black mt-12 mb-4 text-center enter-y"
+        >欢迎来到 {{ title }}</div
+      >
+      <div class="w-full mt-4 mb-6 enter-y">
+        <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
+          <van-swipe-item
+            class="text-gray-700 dark:text-gray-400 leading-relaxed text-center"
+            v-for="(text, index) in getSwipeText"
+            :key="index"
+          >
+            <p class="text-lg">{{ text.title }}</p>
+            <p class="text-sm">{{ text.details }}</p>
+          </van-swipe-item>
+        </van-swipe>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts" name="DashboardPage">
-  import { ref } from 'vue';
+  import { computed } from 'vue';
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
+  import SvgIcon from '@/components/SvgIcon.vue';
+  import { useGlobSetting } from '@/hooks/setting';
 
-  const checked2 = ref('1');
-  const checked = ref(false);
-  const groupChecked = ref([]);
-  const value = ref(50);
+  const designStore = useDesignSettingStore();
+  const globSetting = useGlobSetting();
 
-  const result = ref('');
-  const showCalendar = ref(false);
-  const onConfirm = (date) => {
-    result.value = `${date.getMonth() + 1}/${date.getDate()}`;
-    showCalendar.value = false;
-  };
+  const { title } = globSetting;
 
-  const show = ref(false);
-  const fieldValue = ref('');
-  const cascaderValue = ref('');
-  // 选项列表，children 代表子选项，支持多级嵌套
-  const options = [
-    {
-      text: '浙江省',
-      value: '330000',
-      children: [{ text: '杭州市', value: '330100' }],
-    },
-    {
-      text: '江苏省',
-      value: '320000',
-      children: [{ text: '南京市', value: '320100' }],
-    },
-  ];
-  // 全部选项选择完毕后，会触发 finish 事件
-  const onFinish = ({ selectedOptions }) => {
-    show.value = false;
-    fieldValue.value = selectedOptions.map((option) => option.text).join('/');
-  };
+  const getSwipeText = computed(() => {
+    return [
+      {
+        title: '💡 最新技术栈',
+        details: '基于Vue3、Vant4、Vite、TypeScript、windiCss等最新技术栈开发',
+      },
+      {
+        title: '⚡️ 轻量快速的热重载',
+        details: '无论应用程序大小如何，都始终极快的模块热重载（HMR）',
+      },
+      {
+        title: '🔩 主题配置',
+        details: '具备主题配置及黑暗主题适配，且持久化保存',
+      },
+      {
+        title: '🛠️ 丰富的 Vite 插件',
+        details: '集成大部分 Vite 插件，无需繁琐配置，开箱即用',
+      },
+      {
+        title: '📊 内置 useEcharts hooks',
+        details: '满足大部分图表展示，只需要写你的 options',
+      },
+      {
+        title: '🥳 完善的登录系统、路由、Axios配置',
+        details: '所有架构已搭建完毕，你可以直接开发你的业务需求',
+      },
+    ];
+  });
 </script>
 
 <style scoped lang="less"></style>
diff --git a/src/views/message/barChart.vue b/src/views/message/barChart.vue
new file mode 100644
index 0000000..aee65da
--- /dev/null
+++ b/src/views/message/barChart.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="my-card m-40px p-30px rounded-2xl shadow-xl">
+    <div ref="chartRef" :style="{ height: '350px' }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { onMounted, ref, Ref } from 'vue';
+  import type { EChartsOption } from 'echarts';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const chartOptions: EChartsOption = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+      },
+    },
+    legend: {},
+    grid: {
+      left: '1%',
+      right: '7%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+    },
+    yAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    series: [
+      {
+        name: 'Direct',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [320, 302, 301, 334, 390, 330, 320],
+      },
+      {
+        name: 'Mail Ad',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [120, 132, 101, 134, 90, 230, 210],
+      },
+      {
+        name: 'Affiliate Ad',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [220, 182, 191, 234, 290, 330, 310],
+      },
+      {
+        name: 'Video Ad',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [150, 212, 201, 154, 190, 330, 410],
+      },
+      {
+        name: 'Search Engine',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [820, 832, 901, 934, 1290, 1330, 1320],
+      },
+    ],
+  };
+
+  onMounted(() => {
+    setOptions(chartOptions);
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index d6b0a34..04a9cc6 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <p class="text-30px mb-50px"> vue3 v-model 的变化</p>
-    input: <input v-model="name" />
-    <p> {{ name }}</p>
+    <lineChart />
+    <barChart />
+    <pieChart />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-
-  const name = ref('Alice');
+  import lineChart from './lineChart.vue';
+  import barChart from './barChart.vue';
+  import pieChart from './pieChart.vue';
 </script>
 
 <style scoped></style>
diff --git a/src/views/message/lineChart.vue b/src/views/message/lineChart.vue
new file mode 100644
index 0000000..fcc3b66
--- /dev/null
+++ b/src/views/message/lineChart.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="my-card m-40px p-30px rounded-2xl shadow-xl">
+    <div ref="chartRef" :style="{ height: '350px' }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { onMounted, ref, Ref } from 'vue';
+  import type { EChartsOption } from 'echarts';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const chartOptions: EChartsOption = {
+    title: {
+      text: 'Stacked Area Chart',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    legend: {
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
+      top: '10%',
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [120, 132, 101, 134, 90, 230, 210],
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [220, 182, 191, 234, 290, 330, 310],
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [150, 232, 201, 154, 190, 330, 410],
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [320, 332, 301, 334, 390, 330, 320],
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        label: {
+          show: true,
+          position: 'top',
+        },
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+      },
+    ],
+  };
+
+  onMounted(() => {
+    setOptions(chartOptions);
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/message/pieChart.vue b/src/views/message/pieChart.vue
new file mode 100644
index 0000000..be9fecd
--- /dev/null
+++ b/src/views/message/pieChart.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="my-card m-40px p-30px rounded-2xl shadow-xl">
+    <div ref="chartRef" :style="{ height: '350px' }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { onMounted, ref, Ref } from 'vue';
+  import type { EChartsOption } from 'echarts';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const chartOptions: EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '5%',
+      left: 'center',
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['50%', '60%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '40',
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' },
+        ],
+      },
+    ],
+  };
+
+  onMounted(() => {
+    setOptions(chartOptions);
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index 1e057f3..1239757 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -111,23 +111,14 @@
       opacity: 0.9;
     }
   }
-  .my-card {
-    backdrop-filter: blur(10px);
-    background: rgba(255, 255, 255, 0.7);
-    .van-cell {
-      align-items: center;
-      background: transparent;
-      &:active {
-        background-color: var(--van-cell-active-color);
-      }
-      .xicon {
-        margin-right: 10px;
-      }
+  .van-cell {
+    align-items: center;
+    background: transparent;
+    &:active {
+      background-color: var(--van-cell-active-color);
     }
-  }
-  html[data-theme='dark'] {
-    .my-card {
-      background: rgba(30, 30, 30, 0.7);
+    .xicon {
+      margin-right: 10px;
     }
   }
 </style>