From 5e28d20d0a7d244c0bb7bdd391f9e26557deb9f6 Mon Sep 17 00:00:00 2001
From: "453530270@qq.com" <aa123456>
Date: Thu, 29 Jun 2023 17:08:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=B5=81=E8=B6=8B=E5=8A=BF=E7=9A=84?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{图片 11@1x.png => sactive_bg.png}      | Bin
 src/views/HomeView.vue                        |  27 +++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)
 rename src/assets/{图片 11@1x.png => sactive_bg.png} (100%)

diff --git a/src/assets/图片 11@1x.png b/src/assets/sactive_bg.png
similarity index 100%
rename from src/assets/图片 11@1x.png
rename to src/assets/sactive_bg.png
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 10883a2..bfe81a3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -40,9 +40,9 @@
     <div class="klqs">
       <div class="klqs_bg">客流趋势</div>
       <div class="klbtn">
-        <span>年</span>
-        <span>月</span>
-        <span>日</span>
+        <span :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
+        <span :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
+        <span :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
       </div>
 
     </div>
@@ -113,7 +113,8 @@ export default {
   name: 'HomeView',
   data() {
     return {
-      //
+      // 年月日选中的样式,默认日
+      klselt: "d",
     }
   },
   mounted() {
@@ -122,6 +123,10 @@ export default {
   },
   // 方法
   methods: {
+    //选择年月日中的某个
+    selitem(type) {
+      this.klselt = type;
+    },
     showorders() {
       // 基于准备好的dom，初始化echarts实例
       var chartDom = document.getElementById('showorders');
@@ -401,12 +406,20 @@ export default {
 .klqs .klbtn span {
   display: block;
   float: left;
-  width: 2.6rem;
-  height: 2.6rem;
+  width: 2.2rem;
+  height: 2.2rem;
   margin-left: 0.4rem;
-  line-height: 2.6rem;
+  line-height: 2.2rem;
   text-align: center;
   border: 1px solid #006bff;
+  cursor: pointer;
+}
+
+.klqs .klbtn span.spactive{
+  background-image: url('../assets/sactive_bg.png');
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: 0 0;
 }
 
 /**  場館飽和度 */