refactor:dashboard

src/api/transaction.js

+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params: query
+  })
+}

src/components/TextHoverEffect/Mallki.vue

+<template>
+  <a class="link--mallki" :class="className" href="#">
+    {{text}}
+    <span :data-letters="text"></span>
+    <span :data-letters="text"></span>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    className: {
+      type: String
+    },
+    text: {
+      type: String,
+      default: 'vue-element-admin'
+    }
+  }
+}
+</script>
+
+
+<style>
+/* Mallki */
+.link--mallki {
+  font-weight: 800;
+  color: #4dd9d5;
+  font-family: 'Dosis', sans-serif;
+  -webkit-transition: color 0.5s 0.25s;
+  transition: color 0.5s 0.25s;
+  overflow: hidden;
+  position: relative;
+display: inline-block;
+    line-height: 1;
+        outline: none;
+    text-decoration: none;
+}
+
+.link--mallki:hover {
+  -webkit-transition: none;
+  transition: none;
+  color: transparent;
+}
+
+.link--mallki::before {
+  content: '';
+  width: 100%;
+  height: 6px;
+  margin: -3px 0 0 0;
+  background: #3888fa;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.4s;
+  transition: transform 0.4s;
+  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+.link--mallki:hover::before {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.link--mallki span {
+  position: absolute;
+  height: 50%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.link--mallki span::before {
+  content: attr(data-letters);
+  color: red;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  color: #3888fa;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: transform 0.5s;
+}
+
+.link--mallki span:nth-child(2) {
+  top: 50%;
+}
+
+.link--mallki span:first-child::before {
+  top: 0;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+}
+
+.link--mallki span:nth-child(2)::before {
+  bottom: 0;
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+}
+
+.link--mallki:hover span::before {
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+</style>

src/icons/svg/message.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727568680" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2026" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M0 202.7V631c0 83.3 68.3 150.7 152.6 150.7h228.9l8 190.3 224.9-190.3h257c84.3 0 152.6-67.4 152.6-150.7V202.7C1024 119.4 955.7 52 871.4 52H152.6C68.3 52 0 119.4 0 202.7z m658.6 237.9c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S771 512 730.9 512c-40.2 0-72.3-31.7-72.3-71.4z m-220.9 0c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S550.1 512 510 512c-40.2 0-72.3-31.7-72.3-71.4z m-216.8 0c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S333.3 512 293.1 512c-40.1 0-72.2-31.7-72.2-71.4z" p-id="2027"></path></svg>
\ No newline at end of file

src/icons/svg/money.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727546462" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1764" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M463.3 958.3V772.1H228.8v-77.5h234.5v-80.5H228.8v-83.5H420L191.5 128h113.7L469 420.6c18.2 33.4 32.4 62.4 42.7 86.9 9-19.8 24.6-50.5 46.8-92.1L713.9 128h120.8L605.5 530.6h192.9v83.5H564.9v80.5h233.5v77.5H564.9v186.2H463.3z" p-id="1765"></path></svg>
\ No newline at end of file

src/icons/svg/peoples.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727502091" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1640" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M765.184 873.941333c0 33.28-28.501333 60.288-63.829333 60.288L63.829333 934.229333C28.501333 934.229333 0 907.221333 0 873.941333c0-120.576 123.264-233.258667 249.216-277.674667-72.789333-42.496-121.728-118.058667-121.728-204.8L127.488 331.136c0-133.248 114.346667-241.365333 255.146667-241.365333s255.146667 108.117333 255.146667 241.365333l0 60.288c0 86.826667-48.981333 162.304-121.728 204.842667C641.962667 640.725333 765.184 753.365333 765.184 873.941333L765.184 873.941333z" p-id="1641"></path><path d="M848.256 870.570667l126.933333 0c27.008 0 48.810667-20.650667 48.810667-46.08 0-92.245333-94.293333-178.346667-190.549333-212.309333 55.637333-32.512 93.098667-90.282667 93.098667-156.672L926.549333 409.344c0-101.888-87.424-184.576-195.114667-184.576-13.397333 0-26.453333 1.28-39.125333 3.712 15.488 31.146667 24.149333 65.92 24.149333 102.613333l0 60.288c0 86.826667-24.448 152.746667-88.533333 204.842667C746.666667 625.365333 846.421333 751.018667 848.256 870.570667z" p-id="1642"></path></svg>
\ No newline at end of file

src/icons/svg/shoppingCard.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727582324" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2288" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M347.136 783.36q19.456 0 36.864 7.168t30.72 19.968 20.48 30.208 7.168 36.864-7.168 36.864-20.48 30.208-30.72 20.48-36.864 7.68q-20.48 0-37.376-7.68t-30.208-20.48-20.48-30.208-7.168-36.864 7.168-36.864 20.48-30.208 30.208-19.968 37.376-7.168zM773.12 785.408q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM945.152 203.776q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-12.8 37.888-22.016 62.976-24.064 68.096-17.92 53.248q-13.312 40.96-33.792 56.832t-50.176 15.872l-34.816 0-66.56 0-87.04 0-95.232 0-253.952 0 15.36 92.16 516.096 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-95.232 0-117.76 0-119.808 0-98.304 0-56.32 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l22.528 0 20.48 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0z" p-id="2289"></path></svg>
\ No newline at end of file

src/mock/index.js

@@ -2,6 +2,7 @@ import Mock from 'mockjs'
 import loginAPI from './login'
 import articleAPI from './article'
 import remoteSearchAPI from './remoteSearch'
+import transactionAPI from './transaction'
 
 Mock.setup({
   timeout: '350-600'
@@ -20,4 +21,6 @@ Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
 // 搜索相关
 Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
 
+// 账单相关
+Mock.mock(/\/transaction\/list/, 'get', transactionAPI.getList)
 export default Mock

src/mock/transaction.js

+import Mock from 'mockjs'
+
+const List = []
+const count = 20
+
+for (let i = 0; i < count; i++) {
+  List.push(Mock.mock({
+    order_no: '@guid()',
+    timestamp: +Mock.Random.date('T'),
+    username: '@name()',
+    price: '@float(1000, 15000, 0, 2)',
+    'status|1': ['success', 'pending']
+  }))
+}
+
+export default {
+  getList: () => {
+    return {
+      total: List.length,
+      items: List
+    }
+  }
+}

src/views/dashboard/admin/barChart.vue → src/views/dashboard/admin/components/BarChart.vue

@@ -57,8 +57,9 @@ export default {
           }
         },
         grid: {
-          left: '3%',
-          right: '4%',
+          top: 10,
+          left: '2%',
+          right: '2%',
           bottom: '3%',
           containLabel: true
         },
@@ -70,7 +71,10 @@ export default {
           }
         }],
         yAxis: [{
-          type: 'value'
+          type: 'value',
+          axisTick: {
+            show: false
+          }
         }],
         series: [{
           name: 'pageA',

src/views/dashboard/admin/components/BoxCard.vue

+<template>
+  <el-card class="box-card" style="margin-left:8px;">
+    <div slot="header" class="box-card-header">
+      <img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
+    </div>
+    <div style="position:relative;">
+      <pan-thumb class="panThumb" :image="avatar"></pan-thumb>
+      <mallki className='mallki-text' text='vue-element-admin'></mallki>
+      <div class='progress-item'>
+        <span>Vue</span>
+        <el-progress :percentage="70"></el-progress>
+      </div>
+      <div class='progress-item'>
+        <span>JavaScript</span>
+        <el-progress :percentage="18"></el-progress>
+      </div>
+      <div class='progress-item'>
+        <span>Css</span>
+        <el-progress :percentage="12"></el-progress>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanThumb from '@/components/PanThumb'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+
+export default {
+  components: { PanThumb, Mallki },
+
+  data() {
+    return {
+      statisticsData: {
+        article_count: 1024,
+        pageviews_count: 1024
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar',
+      'roles'
+    ])
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  created() {
+
+  },
+  methods: {
+  }
+
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+.box-card {
+  .el-card__header {
+    padding: 0px!important;
+  }
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card-header {
+  position: relative;
+  height: 220px;
+  img {
+    width: 100%;
+    height: 100%;
+    transition: all 0.2s linear;
+    &:hover {
+      transform: scale(1.1, 1.1);
+      filter: contrast(130%);
+    }
+  }
+}
+.mallki-text {
+  position: absolute;
+  top: -10px;
+  right: 0px;
+  font-size: 20px;
+  font-weight: bold;
+}
+.panThumb {
+  z-index: 100;
+  height: 70px!important;
+  width: 70px!important;
+  position: absolute;
+  top: -45px;
+  left: 0px;
+  border: 5px solid #ffffff;
+  background-color: #fff;
+  margin: auto;
+  box-shadow: none!important;
+}
+.progress-item {
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+</style>

src/views/dashboard/admin/lineChart.vue → src/views/dashboard/admin/components/LineChart.vue

@@ -24,6 +24,9 @@ export default {
     autoResize: {
       type: Boolean,
       default: true
+    },
+    chartData: {
+      type: Object
     }
   },
   data() {
@@ -60,62 +63,87 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
   methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
+    setOptions({ expectedData, actualData } = {}) {
       this.chart.setOption({
         xAxis: {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
         },
         grid: {
           left: 10,
           right: 10,
           bottom: 20,
+          top: 30,
           containLabel: true
         },
-
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
           }
         },
-        yAxis: {},
+        legend: {
+          data: ['expected', 'actual']
+        },
         series: [{
-          name: 'visitors',
-          itemStyle: {
+          name: 'expected', itemStyle: {
             normal: {
-              areaStyle: {}
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
             }
           },
           smooth: true,
           type: 'line',
-          data: [100, 120, 161, 134, 105, 160, 165],
-          animationDuration: 2600,
+          data: expectedData,
+          animationDuration: 2800,
           animationEasing: 'cubicInOut'
         },
         {
-          name: 'buyers',
+          name: 'actual',
           smooth: true,
           type: 'line',
           itemStyle: {
             normal: {
-              color: 'rgba(2, 197, 233, 0.2)',
+              color: '#3888fa',
               lineStyle: {
-                color: 'rgba(2, 197, 233, 0.2)'
+                color: '#3888fa',
+                width: 2
               },
               areaStyle: {
-                color: 'rgba(99,194,255, 0.6)'
+                color: '#f3f8ff'
               }
             }
           },
-          data: [120, 82, 91, 154, 162, 140, 130],
-          animationDuration: 2000,
+          data: actualData,
+          animationDuration: 2800,
           animationEasing: 'quadraticOut'
         }]
       })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
     }
   }
 }

src/views/dashboard/admin/pieChart.vue → src/views/dashboard/admin/components/PieChart.vue

@@ -49,10 +49,6 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
 
       this.chart.setOption({
-        title: {
-          text: 'WEEKLY WRITE ARTICLES',
-          x: 'center'
-        },
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b} : {c} ({d}%)'
@@ -68,7 +64,8 @@ export default {
             name: 'WEEKLY WRITE ARTICLES',
             type: 'pie',
             roseType: 'radius',
-            radius: [10, 90],
+            radius: [15, 95],
+            center: ['50%', '38%'],
             data: [
               { value: 320, name: 'industries' },
               { value: 240, name: 'technology' },

src/views/dashboard/admin/components/RaddarChart.vue

+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts 主题
+import { debounce } from '@/utils'
+
+const animationDuration = 3000
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHanlder)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '70%',
+          center: ['50%', '44%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 0,
+          bottom: 0,
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/components/TodoList/index.scss → src/views/dashboard/admin/components/TodoList/index.scss

@@ -4,7 +4,7 @@
 	color: #4d4d4d;
 	min-width: 230px;
 	max-width: 550px;
-	margin: 40px auto 0;
+	margin: 0 auto ;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	font-weight: 300;
@@ -84,7 +84,7 @@
 		-moz-osx-font-smoothing: grayscale;
 	}
 	.new-todo {
-		padding: 16px 16px 16px 60px;
+		padding: 10px 16px 16px 60px;
 		border: none;
 		background: rgba(0, 0, 0, 0.003);
 		box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);

src/components/TodoList/index.vue → src/views/dashboard/admin/components/TodoList/index.vue

@@ -2,7 +2,7 @@
   <section class="todoapp">
     <!-- header -->
     <header class="header">
-      <input class="new-todo" autofocus autocomplete="off" placeholder="TODO LIST?" @keyup.enter="addTodo">
+      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
     </header>
     <!-- main section -->
     <section class="main" v-show="todos.length">
@@ -24,9 +24,9 @@
           <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
         </li>
       </ul>
-      <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
+      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
         Clear completed
-      </button>
+      </button> -->
     </footer>
   </section>
 </template>
@@ -43,7 +43,12 @@ const filters = {
 const defalutList = [
   { text: 'star this repository', done: false },
   { text: 'fork this repository', done: false },
-  { text: 'follow author', done: false }
+  { text: 'follow author', done: false },
+  { text: 'vue-element-admin', done: true },
+  { text: 'vue', done: true },
+  { text: 'element-ui', done: true },
+  { text: 'axios', done: true },
+  { text: 'webpack', done: true }
 ]
 export default {
   components: { Todo },
@@ -51,7 +56,8 @@ export default {
     return {
       visibility: 'all',
       filters,
-      todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+      todos: defalutList
     }
   },
   computed: {

src/views/dashboard/admin/components/TransactionTable.vue

+<template>
+  <el-table :data="list" style="width: 100%;padding-top: 15px;" >
+    <el-table-column label="Order_No">
+      <template slot-scope="scope">
+        {{scope.row.order_no}}
+      </template>
+    </el-table-column>
+    <el-table-column label="Price" width="195" align="center">
+      <template slot-scope="scope">
+        {{scope.row.price | toThousandslsFilter}}
+      </template>
+    </el-table-column>
+    <el-table-column label="Status"  width="100" align="center">
+      <template slot-scope="scope">
+        <el-tag  :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
+      </template>
+    </el-table-column>
+    <!-- <el-table-column label="Username"  width="135" align="center">
+      <template slot-scope="scope">
+        {{scope.row.username}}
+      </template>
+    </el-table-column> -->
+  </el-table>
+</template>
+
+<script>
+import { fetchList } from '@/api/transaction'
+
+export default {
+  data() {
+    return {
+      list: null
+    }
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      fetchList().then(response => {
+        this.list = response.data.items.slice(0, 7)
+      })
+    } }
+
+}
+</script>

src/views/dashboard/admin/index.vue

 <template>
   <div class="dashboard-editor-container">
     <github-corner></github-corner>
-    <el-row class="btn-group">
+    <!-- <el-row class="btn-group">
       <el-col :span="4" class='text-center'>
         <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
       </el-col>
@@ -20,112 +20,238 @@
       <el-col :span="4" class='text-center'>
         <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
       </el-col>
-    </el-row>
-
-    <el-row>
+    </el-row> -->
+    <el-row class="panel-group" :gutter="40">
+      <el-col :span="6">
+        <div class='card-panel no-margin-left' @click="handleSetLineChartData('newVisitis')">
+          <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'>New Visits</div>
+            <count-to class="card-panel-num" :startVal='0' :endVal='102400' :duration='3600'></count-to>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class='card-panel' @click="handleSetLineChartData('messages')">
+          <div class="card-panel-icon-wrapper icon-message">
+            <svg-icon icon-class="message" class-name="card-panel-icon" />
+          </div>
+          <div class='card-panel-description'>
+            <div class='card-panel-text'>Messages</div>
+            <count-to class="card-panel-num" :startVal='0' :endVal='81212' :duration='3600'></count-to>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class='card-panel' @click="handleSetLineChartData('purchases')">
+          <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'>Purchases</div>
+            <count-to class="card-panel-num" :startVal='0' :endVal='9280' :duration='3600'></count-to>
+          </div>
+        </div>
+      </el-col>
       <el-col :span="6">
-        <el-card class="box-card">
-          <div slot="header" class="box-card-header">
-            <pan-thumb class="panThumb" :image="avatar"> 你的权限:
-              <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
-            </pan-thumb>
+        <div class='card-panel  no-margin-right' @click="handleSetLineChartData('shoppings')">
+          <div class="card-panel-icon-wrapper icon-shoppingCard">
+            <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
           </div>
-          <span class="display_name">{{name}}</span>
-          <div class="info-item">
-            <count-to class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></count-to>
-            <span class="info-item-text">文章</span>
-            <svg-icon icon-class="trendChart1" class="dashboard-editor-icon"></svg-icon>
+          <div class='card-panel-description'>
+            <div class='card-panel-text'>Shoppings</div>
+            <count-to class="card-panel-num" :startVal='0' :endVal='1299' :duration='3600'></count-to>
           </div>
-          <div class="info-item">
-            <count-to class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></count-to>
-            <span class="info-item-text">浏览量</span>
-            <svg-icon icon-class="trendChart2" class="dashboard-editor-icon"></svg-icon>
         </div>
-        </el-card>
       </el-col>
+    </el-row>
+
+    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
+      <line-chart :chart-data='lineChartData'></line-chart>
+    </el-row>
 
+    <el-row style="margin-top:30px;">
+      <el-col :span="8">
+        <div class="chart-wrapper no-margin-left">
+          <raddar-chart></raddar-chart>
+        </div>
+      </el-col>
       <el-col :span="8">
+        <div class="chart-wrapper">
           <pie-chart></pie-chart>
+        </div>
       </el-col>
-
-      <el-col :span="10">
+      <el-col :span="8">
+        <div class="chart-wrapper no-margin-right">
           <bar-chart></bar-chart>
+        </div>
       </el-col>
     </el-row>
 
-    <el-row :gutter="20">
-      <el-col :span="15">
-        <line-chart></line-chart>
+    <el-row style="margin-top:30px;">
+      <el-col :span="12" style="padding-right:8px;">
+        <transaction-table></transaction-table>
+      </el-col>
+      <el-col :span="6">
+        <todo-list style="margin:0 8px;"></todo-list>
       </el-col>
-      <el-col :span="9">
-        <todo-list></todo-list>
+      <el-col :span="6">
+        <box-card></box-card>
       </el-col>
+
     </el-row>
 
   </div>
 </template>
 
+
+
+
 <script>
-import { mapGetters } from 'vuex'
-import countTo from 'vue-count-to'
-import panThumb from '@/components/PanThumb'
-import todoList from '@/components/TodoList'
+import CountTo from 'vue-count-to'
 import GithubCorner from '@/components/GithubCorner'
-import pieChart from './pieChart'
-import barChart from './barChart'
-import lineChart from './lineChart'
+import LineChart from './components/LineChart'
+import RaddarChart from './components/RaddarChart'
+import PieChart from './components/PieChart'
+import BarChart from './components/BarChart'
+import TransactionTable from './components/TransactionTable'
+import TodoList from './components/TodoList'
+import BoxCard from './components/BoxCard'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 101, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
 
 export default {
   name: 'dashboard-admin',
-  components: { countTo, panThumb, todoList, GithubCorner, pieChart, lineChart, barChart },
+  components: {
+    CountTo,
+    GithubCorner,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    TransactionTable,
+    TodoList,
+    BoxCard
+  },
   data() {
     return {
-      statisticsData: {
-        article_count: 1024,
-        pageviews_count: 1024
-      }
+      lineChartData: lineChartData.newVisitis
     }
   },
-  computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard-editor-container {
-    margin: 30px;
-    .btn-group {
-        margin-bottom: 60px;
+  padding: 30px;
+  background-color: rgb(240, 242, 245);
+  .no-margin-left {
+    margin-left: 0!important;
   }
-    .box-card-header {
+  .no-margin-right {
+    margin-right: 0!important;
+  }
+  .panel-group {
+    margin-top: 20px;
+  }
+  .card-panel {
+    // margin: 0 25px;
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
     position: relative;
-        height: 160px;
-    }
-    .panThumb {
-        z-index: 100;
-        height: 150px;
-        width: 150px;
-        position: absolute;
-        left: 0px;
-        right: 0px;
-        margin: auto;
-    }
-    .display_name{
-        font-size: 30px;
-        display: block;
-    }
-    .info-item{
-        display: inline-block;
-        margin-top: 10px;
-        font-size: 14px;
-        &:last-of-type{
-            margin-left: 15px;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+      .icon-people {
+        background: #36a3f7;
+      }
+      .icon-message {
+        background: #f4516c;
       }
+      .icon-money {
+        background: #716aca;
+      }
+      .icon-shoppingCard {
+        background: #34bfa3
+      }
+    }
+    .icon-people {
+      color: #36a3f7;
+    }
+    .icon-message {
+      color: #f4516c;
+    }
+    .icon-money {
+      color: #716aca;
+    }
+    .icon-shoppingCard {
+      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;
+      }
+    }
+  }
+  .chart-wrapper {
+    background: #fff;
+    margin: 0 15px;
+    padding: 15px 15px 0;
+  }
+  .btn-group {
+    margin-bottom: 60px;
   }
 }
 </style>

src/views/layout/components/Navbar.vue

@@ -13,7 +13,9 @@
       </el-tooltip>
 
       <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+        <div>
           <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
+        </div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
           <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>

src/views/svg-icons/index.vue

@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     generateIconCode(symbol) {
-      return `<svg-icon :icon-class="${symbol}" />`
+      return `<svg-icon icon-class="${symbol}" />`
     },
     handleClipboard(text, event) {
       clipboard(text, event)