From d28acf2829318afb665ad3e0c9fddc8c6098bc7b Mon Sep 17 00:00:00 2001
From: Gao xiaosong <704041637@qq.com>
Date: Sat, 16 Jan 2021 23:55:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/OrderCount.vue  | 150 ++++++---
 src/views/dashboard/PanelGroup.vue  | 481 +++++++++++++++++++---------
 src/views/dashboard/PanelGroupT.vue | 148 ++++++---
 src/views/dashboard/PieChart.vue    |   9 +-
 src/views/home.vue                  | 148 ++++++---
 5 files changed, 648 insertions(+), 288 deletions(-)

diff --git a/src/views/dashboard/OrderCount.vue b/src/views/dashboard/OrderCount.vue
index d496c4c..a737529 100644
--- a/src/views/dashboard/OrderCount.vue
+++ b/src/views/dashboard/OrderCount.vue
@@ -1,87 +1,155 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div class="divBox">
+    <el-row :gutter="24">
+      <el-col san="24" class="ivu-mb">
+        <el-card :bordered="false" class="dashboard-console-visit">
+          <div slot="header">
+            <div class="acea-row row-between-wrapper">
+              <div class="acea-row row-middle">
+                <el-avatar
+                  icon="el-icon-s-data"
+                  size="small"
+                  style="color: #1890ff; background: #e6f7ff; font-size: 13px"
+                />
+                <span class="ivu-pl-8">订单</span>
+              </div>
+              <div class="checkTime">
+                <!-- <el-radio-group v-model="visitDate" class="ivu-mr-8">
+                                    <el-radio label="last30" @change="handleChangeVisitType">30天</el-radio>
+                                    <el-radio label="week" @change="handleChangeWeek">周</el-radio>
+                                    <el-radio label="month" @change="handleChangeMonth">月</el-radio>
+                                    <el-radio label="year" @change="handleChangeYear">年</el-radio>
+                                </el-radio-group> -->
+              </div>
+            </div>
+          </div>
+          <div :class="className" ref="chart" :style="{ height: height, width: width }" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import { getOrderCount } from '@/api/visits'
-import { debounce } from '@/utils'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import { getOrderCount } from "@/api/visits";
+import { debounce } from "@/utils";
 
 export default {
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart",
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: String,
-      default: '300px'
-    }
+      default: "300px",
+    },
   },
   data() {
     return {
       chart: null,
       column: [],
-      orderCountDatas: []
-    }
+      orderCountDatas: [],
+    };
   },
   mounted() {
-    getOrderCount().then(res => {
-      this.column = res.column,
-        this.orderCountDatas = res.orderCountDatas
-    }).then(() =>{
-      this.initChart()
-    })
+    getOrderCount()
+      .then((res) => {
+        (this.column = res.column),
+          (this.orderCountDatas = res.orderCountDatas);
+      })
+      .then(() => {
+        this.initChart();
+      });
 
     this.__resizeHandler = debounce(() => {
       if (this.chart) {
-        this.chart.resize()
+        this.chart.resize();
       }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    window.removeEventListener('resize', this.__resizeHandler)
-    this.chart.dispose()
-    this.chart = null
+    window.removeEventListener("resize", this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$refs.chart, "macarons");
 
       this.chart.setOption({
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
         },
         legend: {
-          left: 'center',
-          bottom: '10',
-          data: this.column
+          left: "center",
+          bottom: "10",
+          data: this.column,
         },
         calculable: true,
         series: [
           {
-            name: '商品分类销售占总销售的比例',
-            type: 'pie',
-            roseType: 'radius',
+            name: "商品分类销售占总销售的比例",
+            type: "pie",
+            roseType: "radius",
             radius: [15, 95],
-            center: ['50%', '38%'],
+            center: ["50%", "38%"],
             data: this.orderCountDatas,
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
-      })
+            animationEasing: "cubicInOut",
+            animationDuration: 2600,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+  .acea-row{
+    /deep/.el-avatar--small {
+      width: 22px;
+      height: 22px;
+      line-height: 22px;
     }
   }
-}
-</script>
+  .checkTime{
+    /deep/.el-radio__input{
+      display: none;
+    }
+  }
+  .ivu-pl-8{
+    margin-left: 8px;
+    font-size: 14px;
+  }
+  .divBox {
+    // padding: 0 20px !important;
+  }
+  .dashboard-console-visit {
+    /deep/.el-card__header{
+      padding: 14px 20px !important;
+    }
+    ul {
+      li {
+        list-style-type: none;
+        margin-top: 12px;
+      }
+    }
+  }
+  .ivu-mb{
+    margin-bottom: 10px;
+  }
+</style>
+
diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
index f3f9d7f..fb8ed51 100644
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@@ -1,180 +1,353 @@
 <template>
-  <el-row :gutter="40" class="panel-group">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            会员总数
-          </div>
-          <count-to :start-val="0" :end-val="count.userCount" :duration="2600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="order" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            订单总数
-          </div>
-          <count-to :start-val="0" :end-val="count.orderCount" :duration="3000" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            总金额
-          </div>
-          <count-to :start-val="0" :end-val="count.priceCount" :duration="3200" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" >
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            商品总数
-          </div>
-          <count-to :start-val="0" :end-val="count.goodsCount" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-  </el-row>
+  <div>
+    <div class="divBox">
+      <el-row :gutter="24" class="baseInfo">
+        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
+          <el-card :bordered="false" dis-hover :padding="12">
+            <div slot="header" class="acea-row row-between-wrapper">
+              <span>会员总数</span>
+              <el-tag type="success">昨日</el-tag>
+            </div>
+            <div class="content" v-if="count">
+              <span class="content-number spBlock mb15">{{
+                count.userCount
+              }}</span>
+              <div>
+                <span class="content-time mr20"
+                  >日同比：<i
+                    class="content-is"
+                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.dayRate }}</i
+                  ><i
+                    :class="
+                      Number(count.dayRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+                <span class="content-time"
+                  >周同比：<i
+                    class="content-is"
+                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.weekRate }}</i
+                  ><i
+                    :class="
+                      Number(count.weekRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+              </div>
+              <el-divider></el-divider>
+              <div class="acea-row row-between-wrapper">
+                <span class="content-time">总销售额</span>
+                <span>{{ count.total }} 元</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
+          <el-card :bordered="false" dis-hover :padding="12">
+            <div slot="header" class="acea-row row-between-wrapper">
+              <span>订单总数</span>
+              <el-tag type="success">昨日</el-tag>
+            </div>
+            <div class="content" v-if="count">
+              <span class="content-number spBlock mb15">{{
+                count.userCount
+              }}</span>
+              <div>
+                <span class="content-time mr20"
+                  >日同比：<i
+                    class="content-is"
+                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.dayRate }}</i
+                  ><i
+                    :class="
+                      Number(count.dayRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+                <span class="content-time"
+                  >周同比：<i
+                    class="content-is"
+                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.weekRate }}</i
+                  ><i
+                    :class="
+                      Number(count.weekRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+              </div>
+              <el-divider></el-divider>
+              <div class="acea-row row-between-wrapper">
+                <span class="content-time">总访问量</span>
+                <span>{{ count.total }} Pv</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
+          <el-card :bordered="false" dis-hover :padding="12">
+            <div slot="header" class="acea-row row-between-wrapper">
+              <span>总金额</span>
+              <el-tag type="success">昨日</el-tag>
+            </div>
+            <div class="content" v-if="count">
+              <span class="content-number spBlock mb15">{{
+                count.userCount
+              }}</span>
+              <div>
+                <span class="content-time mr20"
+                  >日同比：<i
+                    class="content-is"
+                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.dayRate }}</i
+                  ><i
+                    :class="
+                      Number(count.dayRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+                <span class="content-time"
+                  >周同比：<i
+                    class="content-is"
+                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.weekRate }}</i
+                  ><i
+                    :class="
+                      Number(count.weekRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+              </div>
+              <el-divider></el-divider>
+              <div class="acea-row row-between-wrapper">
+                <span class="content-time">总订单量</span>
+                <span>{{ count.total }} 单</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
+          <el-card :bordered="false" dis-hover :padding="12">
+            <div slot="header" class="acea-row row-between-wrapper">
+              <span>商品总数</span>
+              <el-tag type="success">昨日</el-tag>
+            </div>
+            <div class="content" v-if="count">
+              <span class="content-number spBlock mb15">{{
+                count.userCount
+              }}</span>
+              <div>
+                <span class="content-time mr20"
+                  >日同比：<i
+                    class="content-is"
+                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.dayRate }}</i
+                  ><i
+                    :class="
+                      Number(count.dayRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+                <span class="content-time"
+                  >周同比：<i
+                    class="content-is"
+                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
+                    >{{ count.weekRate }}</i
+                  ><i
+                    :class="
+                      Number(count.weekRate) >= 0
+                        ? 'el-icon-caret-top'
+                        : 'el-icon-caret-bottom'
+                    "
+                /></span>
+              </div>
+              <el-divider></el-divider>
+              <div class="acea-row row-between-wrapper">
+                <span class="content-time">总用户</span>
+                <span>{{ count.total }} 人</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
 </template>
 <script>
-import CountTo from 'vue-count-to'
-import { gett } from '@/api/visits'
+import CountTo from "vue-count-to";
+import { gett } from "@/api/visits";
 export default {
   components: {
-    CountTo
+    CountTo,
   },
   data() {
     return {
-      count: { todayPrice: 0, todayCount: 0, proPrice: 0, proCount: 0,
-        monthPrice: 0, monthCount: 0, lastWeekCount: 0, lastWeekPrice: 0,
-        userCount: 0, orderCount: 0, priceCount: 0, goodsCount: 0}
-    }
+      count: {
+        todayPrice: 0,
+        todayCount: 0,
+        proPrice: 0,
+        proCount: 0,
+        monthPrice: 0,
+        monthCount: 0,
+        lastWeekCount: 0,
+        lastWeekPrice: 0,
+        userCount: 0,
+        orderCount: 0,
+        priceCount: 0,
+        goodsCount: 0,
+      },
+      
+    };
   },
   mounted() {
-    gett().then(res => {
-      this.count.todayPrice = res.todayPrice
-      this.count.todayCount = res.todayCount
-      this.count.proCount = res.proCount
-      this.count.proPrice = res.proPrice
+    gett().then((res) => {
+      this.count.todayPrice = res.todayPrice;
+      this.count.todayCount = res.todayCount;
+      this.count.proCount = res.proCount;
+      this.count.proPrice = res.proPrice;
 
-      this.count.monthPrice = res.monthPrice
-      this.count.monthCount = res.monthCount
-      this.count.lastWeekCount = res.lastWeekCount
-      this.count.lastWeekPrice = res.lastWeekPrice
+      this.count.monthPrice = res.monthPrice;
+      this.count.monthCount = res.monthCount;
+      this.count.lastWeekCount = res.lastWeekCount;
+      this.count.lastWeekPrice = res.lastWeekPrice;
 
-      this.count.userCount = res.userCount
-      this.count.orderCount = res.orderCount
-      this.count.priceCount = res.priceCount
-      this.count.goodsCount = res.goodsCount
-    })
-  }
-}
+      this.count.userCount = res.userCount;
+      this.count.orderCount = res.orderCount;
+      this.count.priceCount = res.priceCount;
+      this.count.goodsCount = res.goodsCount;
+    });
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .panel-group {
-    margin-top: 18px;
+.panel-group {
+  margin-top: 18px;
 
-    .card-panel-col {
-      margin-bottom: 32px;
-    }
-
-    .card-panel {
-      height: 108px;
-      cursor: pointer;
-      font-size: 12px;
-      position: relative;
-      overflow: hidden;
-      color: #666;
-      background: #fff;
-      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-      border-color: rgba(0, 0, 0, .05);
-
-
-
-      .icon-people {
-        color: #40c9c6;
-      }
-
-      .icon-message {
-        color: #36a3f7;
-      }
-
-      .icon-money {
-        color: #f4516c;
-      }
-
-      .icon-shopping {
-        color: #34bfa3
-      }
-
-      .card-panel-icon-wrapper {
-        float: left;
-        margin: 14px 0 0 14px;
-        padding: 16px;
-        transition: all 0.38s ease-out;
-        border-radius: 6px;
-      }
-
-      .card-panel-icon {
-        float: left;
-        font-size: 48px;
-      }
-
-      .card-panel-description {
-        float: right;
-        font-weight: bold;
-        margin: 26px;
-        margin-left: 0px;
-
-        .card-panel-text {
-          line-height: 18px;
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 16px;
-          margin-bottom: 12px;
-        }
-
-        .card-panel-num {
-          font-size: 20px;
-        }
-      }
-    }
+  .card-panel-col {
+    margin-bottom: 32px;
   }
 
-  @media (max-width:550px) {
-    .card-panel-description {
-      display: none;
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.05);
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3;
     }
 
     .card-panel-icon-wrapper {
-      float: none !important;
-      width: 100%;
-      height: 100%;
-      margin: 0 !important;
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
 
-      .svg-icon {
-        display: block;
-        margin: 14px auto !important;
-        float: none !important;
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
       }
     }
   }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+.baseInfo {
+  /deep/ .el-card__header {
+    padding: 15px 20px !important;
+  }
+}
+
+.ivu-mb {
+  margin-bottom: 10px;
+}
+.up,
+.el-icon-caret-top {
+  color: #f5222d;
+  font-size: 12px;
+  opacity: 1 !important;
+}
+
+.down,
+.el-icon-caret-bottom {
+  color: #39c15b;
+  font-size: 12px;
+  /*opacity: 100% !important;*/
+}
+
+.content {
+  &-number {
+    font-size: 30px;
+  }
+  &-time {
+    font-size: 14px;
+    /*color: #8C8C8C;*/
+  }
+}
+.spBlock {
+  display: block;
+}
 </style>
diff --git a/src/views/dashboard/PanelGroupT.vue b/src/views/dashboard/PanelGroupT.vue
index 8386610..bf6510d 100644
--- a/src/views/dashboard/PanelGroupT.vue
+++ b/src/views/dashboard/PanelGroupT.vue
@@ -1,50 +1,72 @@
 <template>
-  <el-row :gutter="40" class="panel-group">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="today" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">今日订单数</div>
-          <count-to :start-val="0" :end-val="count.todayCount" :duration="2600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="ic-yesterday" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">昨日订单数</div>
-          <count-to :start-val="0" :end-val="count.proCount" :duration="3000" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="seven" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">近七天订单数</div>
-          <count-to :start-val="0" :end-val="count.lastWeekCount" :duration="3200" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="monthlyview" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">本月订单数</div>
-          <count-to :start-val="0" :end-val="count.monthCount" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-  </el-row>
+  <div class="divBox">
+      <el-row :gutter="24" class="dashboard-console-grid">
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-user" style="color: #69c0ff" />
+              <p>会员总数</p>
+            </router-link>
+          </el-card>
+        </el-col>
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-setting" style="color: #95de64" />
+              <p>订单总数</p>
+            </router-link>
+          </el-card>
+        </el-col>
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-goods" style="color: #ff9c6e" />
+              <p>总金额</p>
+            </router-link>
+          </el-card>
+        </el-col>
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-s-order" style="color: #b37feb" />
+              <p>商品总数</p>
+            </router-link>
+          </el-card>
+        </el-col>
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-message" style="color: #ffd666" />
+              <p>今日订单数</p>
+            </router-link>
+          </el-card>
+        </el-col>
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-notebook-1" style="color: #5cdbd3" />
+              <p>昨日订单数</p>
+            </router-link>
+          </el-card>
+        </el-col>
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-s-finance" style="color: #ff85c0" />
+              <p>近七天订单数</p>
+            </router-link>
+          </el-card>
+        </el-col>
+        <el-col v-bind="grid" class="ivu-mb">
+          <el-card :bordered="false">
+            <router-link :to="{ path: '/user/index' }">
+              <i class="el-icon-s-ticket" style="color: #ffc069" />
+              <p>本月订单数</p>
+            </router-link>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
 </template>
 <script>
 import CountTo from 'vue-count-to'
@@ -56,7 +78,14 @@ export default {
   data() {
     return {
       count: { todayPrice: 0, todayCount: 0, proPrice: 0, proCount: 0,
-        monthPrice: 0, monthCount: 0, lastWeekCount: 0, lastWeekPrice: 0 }
+        monthPrice: 0, monthCount: 0, lastWeekCount: 0, lastWeekPrice: 0 },
+        grid: {
+        xl: 3,
+        lg: 6,
+        md: 6,
+        sm: 8,
+        xs: 8,
+      },
     }
   },
   mounted() {
@@ -134,4 +163,29 @@ export default {
     }
   }
 }
+
+
+.ivu-mb {
+  margin-bottom: 10px;
+}
+.divBox {
+  // padding: 0 20px !important;
+}
+
+.dashboard-console-grid {
+  text-align: center;
+  .ivu-card-body {
+    padding: 0;
+  }
+  i {
+    font-size: 32px;
+  }
+  a {
+    display: block;
+    color: inherit;
+  }
+  p {
+    margin-top: 8px;
+  }
+}
 </style>
diff --git a/src/views/dashboard/PieChart.vue b/src/views/dashboard/PieChart.vue
index ff1bc52..ab082d0 100644
--- a/src/views/dashboard/PieChart.vue
+++ b/src/views/dashboard/PieChart.vue
@@ -24,7 +24,14 @@ export default {
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      grid: {
+        xl: 3,
+        lg: 6,
+        md: 6,
+        sm: 8,
+        xs: 8,
+      },
     }
   },
   mounted() {
diff --git a/src/views/home.vue b/src/views/home.vue
index 9656cd7..58fc1e2 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -4,73 +4,131 @@
       <!--<yshop-info />-->
       <panel-group />
       <panel-group-t />
+      <order-count></order-count>
 
-      <el-row :gutter="32">
-        <el-col :xs="16" :sm="16" :lg="8">
-          <order-count></order-count>
-        </el-col>
-        <el-col :xs="16" :sm="16" :lg="8">
-
-          <div class="chart-wrapper">
-            <p>本月成交额</p>
-            <bar-chart />
-          </div>
-        </el-col>
-        <el-col :xs="16" :sm="16" :lg="8">
-          <div class="chart-wrapper">
-            <p>本月订单数</p>
-            <pie-chart />
-          </div>
-        </el-col>
-      </el-row>
-
+      <div class="divBox">
+        <el-row :gutter="24">
+          <el-col
+            :xl="16"
+            :lg="12"
+            :md="24"
+            :sm="24"
+            :xs="24"
+            class="ivu-mb mb10 dashboard-console-visit"
+          >
+            <el-card :bordered="false" dis-hover>
+              <div slot="header">
+                <div class="acea-row row-middle">
+                  <el-avatar
+                    icon="el-icon-s-operation"
+                    size="small"
+                    style="color: #1890ff; background: #e6f7ff; font-size: 13px"
+                  />
+                  <span class="ivu-pl-8">本月成交额</span>
+                </div>
+              </div>
+              <bar-chart />
+            </el-card>
+          </el-col>
+          <el-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
+            <el-card
+              :bordered="false"
+              dis-hover
+              class="dashboard-console-visit"
+            >
+              <div slot="header">
+                <div class="acea-row row-middle">
+                  <el-avatar
+                    icon="el-icon-picture-outline-round"
+                    size="small"
+                    style="color: #1890ff; background: #e6f7ff; font-size: 13px"
+                  />
+                  <span class="ivu-pl-8">本月订单数</span>
+                </div>
+              </div>
+              <pie-chart />
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './dashboard/PanelGroup'
-import PanelGroupT from './dashboard/PanelGroupT'
-import PieChart from './dashboard/BarChartT'
-import BarChart from './dashboard/BarChart'
-import { count } from '@/api/visits'
-import YshopInfo from './dashboard/YshopInfo'
-import OrderCount from './dashboard/OrderCount'
+import { mapGetters } from "vuex";
+import PanelGroup from "./dashboard/PanelGroup";
+import PanelGroupT from "./dashboard/PanelGroupT";
+import PieChart from "./dashboard/BarChartT";
+import BarChart from "./dashboard/BarChart";
+import { count } from "@/api/visits";
+import YshopInfo from "./dashboard/YshopInfo";
+import OrderCount from "./dashboard/OrderCount";
 
 /**
-   * 记录访问，只有页面刷新或者第一次加载才会记录
-   */
-count().then(res => {
-})
+ * 记录访问，只有页面刷新或者第一次加载才会记录
+ */
+count().then((res) => {});
 
 export default {
-  name: 'Dashboard',
+  name: "Dashboard",
   components: {
     PanelGroup,
     PanelGroupT,
     PieChart,
     BarChart,
     YshopInfo,
-    OrderCount
+    OrderCount,
   },
   computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  }
-}
+    ...mapGetters(["roles"]),
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 18px 22px 22px 22px;
-    background-color: rgb(240, 242, 245);
+.dashboard-editor-container {
+  padding: 18px 22px 22px 22px;
+  background-color: rgb(240, 242, 245);
 
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 32px;
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+.acea-row {
+  /deep/.el-avatar--small {
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+  }
+}
+.checkTime {
+  /deep/.el-radio__input {
+    display: none;
+  }
+}
+.ivu-pl-8 {
+  margin-left: 8px;
+  font-size: 14px;
+}
+.divBox {
+  // padding: 0 20px !important;
+}
+.dashboard-console-visit {
+  /deep/.el-card__header {
+    padding: 14px 20px !important;
+  }
+  ul {
+    li {
+      list-style-type: none;
+      margin-top: 12px;
     }
   }
+}
+.ivu-mb {
+  margin-bottom: 10px;
+}
 </style>