From 72d1ca3d6f10f16133845d9d318fd1f9fe98b858 Mon Sep 17 00:00:00 2001
From: SurKaa <suralcarywn@qq.com>
Date: Mon, 24 Jul 2023 10:50:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20PanelGroup=20=E6=9F=90?=
 =?UTF-8?q?=E4=B8=AAPanel=E8=A2=AB=E9=80=89=E4=B8=AD=E6=97=B6=E4=BF=9D?=
 =?UTF-8?q?=E6=8C=81hover=E7=9A=84=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/admin/components/PanelGroup.vue  | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 589236ed..003cda74 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="40" class="panel-group">
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+      <div class="card-panel" :class="{active: clicked==='newVisitis'}" @click="handleSetLineChartData('newVisitis')">
         <div class="card-panel-icon-wrapper icon-people">
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
         </div>
@@ -14,7 +14,7 @@
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
+      <div class="card-panel" :class="{active: clicked==='messages'}" @click="handleSetLineChartData('messages')">
         <div class="card-panel-icon-wrapper icon-message">
           <svg-icon icon-class="message" class-name="card-panel-icon" />
         </div>
@@ -27,7 +27,7 @@
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+      <div class="card-panel" :class="{active: clicked==='purchases'}" @click="handleSetLineChartData('purchases')">
         <div class="card-panel-icon-wrapper icon-money">
           <svg-icon icon-class="money" class-name="card-panel-icon" />
         </div>
@@ -40,7 +40,7 @@
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+      <div class="card-panel" :class="{active: clicked==='shoppings'}" @click="handleSetLineChartData('shoppings')">
         <div class="card-panel-icon-wrapper icon-shopping">
           <svg-icon icon-class="shopping" class-name="card-panel-icon" />
         </div>
@@ -62,8 +62,16 @@ export default {
   components: {
     CountTo
   },
+  data() {
+    return {
+      // 被选中的值
+      clicked: 'newVisitis'
+    }
+  },
   methods: {
     handleSetLineChartData(type) {
+      // 更新被选中的
+      this.clicked = type
       this.$emit('handleSetLineChartData', type)
     }
   }
@@ -89,7 +97,7 @@ export default {
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
 
-    &:hover {
+    &:hover, &.active {
       .card-panel-icon-wrapper {
         color: #fff;
       }