From 177a4578502428ba21245db5575acd08bd9e7366 Mon Sep 17 00:00:00 2001
From: yz <yz_0812@outlook.com>
Date: 星期五, 29 一月 2021 02:02:25 +0800
Subject: [PATCH] 修改首页

---
 src/views/dashboard/index.vue |   83 ++++++++++++++++++++++++++++-------------
 1 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index f56b433..e5d6542 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="main">
-    <el-row>
-      <el-col :span="8"><div>&nbsp;</div></el-col>
-      <el-col :span="8">
+    <el-row style="    height: 40px;">
+      <el-col :span="12"><div>&nbsp;</div></el-col>
+      <el-col :span="12">
         <ul class="data-ul">
-          <li>今日</li>
-          <li>本周</li>
-          <li>本月</li>
-          <li>今年</li>
+          <li :class="{selectedColor:selectIndex === 0}" @click="selectTab(0)">今日</li>
+          <li :class="{selectedColor:selectIndex === 1}" @click="selectTab(1)">本周</li>
+          <li :class="{selectedColor:selectIndex === 2}" @click="selectTab(2)">本月</li>
+          <li :class="{selectedColor:selectIndex === 3}" @click="selectTab(3)">今年</li>
         </ul>
-      </el-col>
-      <el-col :span="8">
+        <span style=" font-size: 16px; color: #333333;"> 时间段：</span>
         <el-date-picker
           v-model="value2"
           type="datetimerange"
@@ -19,7 +18,9 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           align="right"
-        /></el-col>
+          value-format="yyyy-MM-dd"
+        />
+      </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="4">
@@ -172,35 +173,57 @@
           }
         ]
       },
-      value2: ''
+      value2: '',
+      selectIndex: 0 // 搜索结果,被选中的li index
+    }
+  }, methods: {
+    selectTab(index) {
+      this.selectIndex = index
     }
   }
 }
 </script>
 <style lang="scss">
-.el-card__body{
-  text-align: center;
-}
-.data-ul {
-	margin-top: 1px;
-	list-style: none;
+.main{
+  padding: 20px;
+  .data-ul {
+    margin-right: 40px;
+	margin-top: 0px;
+  list-style: none;
+   float: left;
 	li {
-		float: left;
-		border: 1px solid;
+    float: left;
 		width: 60px;
-		height: 30px;
 		text-align: center;
-		line-height: 30px;
-    background: #ffffff;
-		border: 1px solid #dcdfe6;
+    font-size: 16px;
+    color: #333333;
 	}
 	li:hover {
-		border-color: #409eff;
+    color:#931e1e;
+    border-bottom:2px solid #931e1e;
 	}
 }
-.card-number{
-color:#0000BF;
+}
+.selectedColor{
+  color:#931e1e;
+    border-bottom:2px solid #931e1e;
+}
+.el-card__body{
+  text-align: center;
+  .card-number{
+color:#931e1e;
 font-size:20px;
+}
+}
+.el-card__body:hover{
+  text-align: center;
+  background-color: #931e1e;
+  color:#fff;
+  .card-number{
+  color:#fff;
+font-size:20px;
+
+}
 }
 .el-row {
 	margin-bottom: 20px;
@@ -229,4 +252,10 @@
 	background-color: #f9fafc;
 }
 </style>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.data-ul {
+	li {
+  line-height: 40px;
+  }
+}
+</style>

--
Gitblit v1.8.0