客流趋势的选择项

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;
 }
 
 /**  場館飽和度 */