修改首页

yz

2021-01-29 177a4578502428ba21245db5575acd08bd9e7366

 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>