From c5c018ac0faf39d377394c0109a677a7e639eeb3 Mon Sep 17 00:00:00 2001
From: linxin <linxin@oaserver.dw.gdbbk.com>
Date: Fri, 1 Nov 2019 16:54:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8Dbug=E5=92=8C=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 LICENSE                            |   2 +-
 README.md                          |   3 +-
 package.json                       |   4 +-
 public/table.json                  |  40 +++
 src/api/index.js                   |  12 +-
 src/components/page/BaseCharts.vue | 178 ++++++-----
 src/components/page/BaseTable.vue  |   1 +
 src/components/page/Dashboard.vue  | 477 +++++++++++++++--------------
 src/components/page/Donate.vue     |   2 +-
 src/utils/request.js               |  45 +--
 10 files changed, 442 insertions(+), 322 deletions(-)
 create mode 100644 public/table.json

diff --git a/LICENSE b/LICENSE
index 0c4dc81..1ef7d3e 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 vue-manage-system
+Copyright (c) 2016-2019 vue-manage-system
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index fc4da78..7f681e0 100644
--- a/README.md
+++ b/README.md
@@ -16,9 +16,8 @@
     <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
   </a>
 
-基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.github.io/example/work/)
+基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.github.io/example/work/)
 
-本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
 
 > React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
 
diff --git a/package.json b/package.json
index fe19de9..5d6ca3d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-manage-system",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "scripts": {
     "dev": "npm run serve",
@@ -17,7 +17,7 @@
     "vue-i18n": "^8.10.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
-    "vue-schart": "^1.0.0",
+    "vue-schart": "^2.0.0",
     "vuedraggable": "^2.17.0"
   },
   "devDependencies": {
diff --git a/public/table.json b/public/table.json
new file mode 100644
index 0000000..ddd2e32
--- /dev/null
+++ b/public/table.json
@@ -0,0 +1,40 @@
+{
+    "list": [{
+            "id": 1,
+            "name": "张三",
+            "money": 123,
+            "address": "广东省东莞市长安镇",
+            "state": "成功",
+            "date": "2019-11-1",
+            "thumb": "https://lin-xin.gitee.io/images/post/wms.png"
+        },
+        {
+            "id": 2,
+            "name": "李四",
+            "money": 456,
+            "address": "广东省广州市白云区",
+            "state": "成功",
+            "date": "2019-10-11",
+            "thumb": "https://lin-xin.gitee.io/images/post/node3.png"
+        },
+        {
+            "id": 3,
+            "name": "王五",
+            "money": 789,
+            "address": "湖南省长沙市",
+            "state": "失败",
+            "date": "2019-11-11",
+            "thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
+        },
+        {
+            "id": 4,
+            "name": "赵六",
+            "money": 1011,
+            "address": "福建省厦门市鼓浪屿",
+            "state": "成功",
+            "date": "2019-10-20",
+            "thumb": "https://lin-xin.gitee.io/images/post/notice.png"
+        }
+    ],
+    "pageTotal": 4
+}
\ No newline at end of file
diff --git a/src/api/index.js b/src/api/index.js
index 77cdf6a..3035ba9 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,9 +1,9 @@
 import request from '../utils/request';
 
-export const fetchData = (query) => {
+export const fetchData = query => {
     return request({
-        url: '/ms/table/list',
-        method: 'post',
-        data: query
-    })
-}
\ No newline at end of file
+        url: './table.json',
+        method: 'get',
+        params: query
+    });
+};
diff --git a/src/components/page/BaseCharts.vue b/src/components/page/BaseCharts.vue
index b0ca9e1..a269925 100644
--- a/src/components/page/BaseCharts.vue
+++ b/src/components/page/BaseCharts.vue
@@ -2,108 +2,148 @@
     <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-pie-chart"></i> schart图表</el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <i class="el-icon-pie-chart"></i> schart图表
+                </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="container">
             <div class="plugins-tips">
                 vue-schart：vue.js封装sChart.js的图表组件。
-                访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
+                访问地址：
+                <a
+                    href="https://github.com/lin-xin/vue-schart"
+                    target="_blank"
+                >vue-schart</a>
             </div>
             <div class="schart-box">
                 <div class="content-title">柱状图</div>
-                <schart class="schart" canvasId="bar" :data="data1" type="bar" :options="options1"></schart>
+                <schart class="schart" canvasId="bar" :options="options1"></schart>
             </div>
             <div class="schart-box">
-            <div class="content-title">折线图</div>
-            <schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
+                <div class="content-title">折线图</div>
+                <schart class="schart" canvasId="line" :options="options2"></schart>
             </div>
             <div class="schart-box">
-            <div class="content-title">饼状图</div>
-            <schart class="schart" canvasId="pie" :data="data2" type="pie" :options="options3"></schart>
+                <div class="content-title">饼状图</div>
+                <schart class="schart" canvasId="pie" :options="options3"></schart>
             </div>
             <div class="schart-box">
-            <div class="content-title">环形图</div>
-            <schart class="schart" canvasId="ring" :data="data2" type="ring" :options="options4"></schart>
+                <div class="content-title">环形图</div>
+                <schart class="schart" canvasId="ring" :options="options4"></schart>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import Schart from 'vue-schart';
-    export default {
-        name: 'basecharts',
-        components: {
-            Schart
-        },
-        data: () => ({
-            data1:[
-                {name:'2012',value:1141},
-                {name:'2013',value:1499},
-                {name:'2014',value:2260},
-                {name:'2015',value:1170},
-                {name:'2016',value:970},
-                {name:'2017',value:1450}
-            ],
-            data2 : [
-                {name:'短袖',value:1200},
-                {name:'休闲裤',value:1222},
-                {name:'连衣裙',value:1283},
-                {name:'外套',value:1314},
-                {name:'羽绒服',value:2314}
-            ],
+import Schart from 'vue-schart';
+export default {
+    name: 'basecharts',
+    components: {
+        Schart
+    },
+    data() {
+        return {
             options1: {
-                title: '某商店近年营业总额',
-                autoWidth: true,   // 设置宽高自适应
-                showValue: false,
-                bgColor: '#F9EFCC',
-                fillColor: '#00887C',
-                contentColor: 'rgba(46,199,201,0.3)',
-                yEqual: 7
+                type: 'bar',
+                title: {
+                    text: '最近一周各品类销售图'
+                },
+                bgColor: '#fbfbfb',
+                labels: ['周一', '周二', '周三', '周四', '周五'],
+                datasets: [
+                    {
+                        label: '家电',
+                        fillColor: 'rgba(241, 49, 74, 0.5)',
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: '百货',
+                        data: [164, 178, 190, 135, 160]
+                    },
+                    {
+                        label: '食品',
+                        data: [144, 198, 150, 235, 120]
+                    }
+                ]
             },
             options2: {
-                title: '某商店近年营业总额',
-                bgColor: '#D5E4EB',
-                titleColor: '#00887C',
-                fillColor: 'red',
-                contentColor: 'rgba(46,199,201,0.3)'
+                type: 'line',
+                title: {
+                    text: '最近几个月各品类销售趋势图'
+                },
+                bgColor: '#fbfbfb',
+                labels: ['6月', '7月', '8月', '9月', '10月'],
+                datasets: [
+                    {
+                        label: '家电',
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: '百货',
+                        data: [164, 178, 150, 135, 160]
+                    },
+                    {
+                        label: '食品',
+                        data: [114, 138, 200, 235, 190]
+                    }
+                ]
             },
             options3: {
-                title: '某商店各商品年度销量',
-                bgColor: '#829dca',
-                titleColor: '#ffffff',
-                legendColor: '#ffffff',
-                radius: 120
+                type: 'pie',
+                title: {
+                    text: '服装品类销售饼状图'
+                },
+                legend: {
+                    position: 'left'
+                },
+                bgColor: '#fbfbfb',
+                labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
+                datasets: [
+                    {
+                        data: [334, 278, 190, 235, 260, 200, 141]
+                    }
+                ]
             },
             options4: {
-                title: '某商店各商品年度销量',
-                bgColor: '#829daa',
-                titleColor: '#ffffff',
-                legendColor: '#ffffff',
-                radius: 120,
-                innerRadius:80
+                type: 'ring',
+                title: {
+                    text: '环形三等分'
+                },
+                showValue: false,
+                legend: {
+                    position: 'bottom',
+                    bottom: 40
+                },
+                bgColor: '#fbfbfb',
+                labels: ['vue', 'react', 'angular'],
+                datasets: [
+                    {
+                        data: [500, 500, 500]
+                    }
+                ]
             }
-        })
+        };
     }
+};
 </script>
 
 <style scoped>
-.schart-box{
+.schart-box {
     display: inline-block;
     margin: 20px;
 }
-    .schart{
-        width: 500px;
-        height: 400px;
-    }
-    .content-title{
-        clear: both;
-        font-weight: 400;
-        line-height: 50px;
-        margin: 10px 0;
-        font-size: 22px;
-        color: #1f2f3d;
-    }
-    
+.schart {
+    width: 600px;
+    height: 400px;
+}
+.content-title {
+    clear: both;
+    font-weight: 400;
+    line-height: 50px;
+    margin: 10px 0;
+    font-size: 22px;
+    color: #1f2f3d;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue
index 570be5b..f4d333d 100644
--- a/src/components/page/BaseTable.vue
+++ b/src/components/page/BaseTable.vue
@@ -130,6 +130,7 @@ export default {
         // 获取 easy-mock 的模拟数据
         getData() {
             fetchData(this.query).then(res => {
+                console.log(res);
                 this.tableData = res.list;
                 this.pageTotal = res.pageTotal || 50;
             });
diff --git a/src/components/page/Dashboard.vue b/src/components/page/Dashboard.vue
index 4c61e9b..d142c1e 100644
--- a/src/components/page/Dashboard.vue
+++ b/src/components/page/Dashboard.vue
@@ -4,27 +4,29 @@
             <el-col :span="8">
                 <el-card shadow="hover" class="mgb20" style="height:252px;">
                     <div class="user-info">
-                        <img src="../../assets/img/img.jpg" class="user-avator" alt="">
+                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                         <div class="user-info-cont">
                             <div class="user-info-name">{{name}}</div>
                             <div>{{role}}</div>
                         </div>
                     </div>
-                    <div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
-                    <div class="user-info-list">上次登录地点：<span>东莞</span></div>
+                    <div class="user-info-list">
+                        上次登录时间：
+                        <span>2019-11-01</span>
+                    </div>
+                    <div class="user-info-list">
+                        上次登录地点：
+                        <span>东莞</span>
+                    </div>
                 </el-card>
                 <el-card shadow="hover" style="height:252px;">
                     <div slot="header" class="clearfix">
                         <span>语言详情</span>
-                    </div>
-                    Vue
-                    <el-progress :percentage="71.3" color="#42b983"></el-progress>
-                    JavaScript
-                    <el-progress :percentage="24.1" color="#f1e05a"></el-progress>
-                    CSS
-                    <el-progress :percentage="3.7"></el-progress>
-                    HTML
-                    <el-progress :percentage="0.9" color="#f56c6c"></el-progress>
+                    </div>Vue
+                    <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
+                    <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
+                    <el-progress :percentage="13.7"></el-progress>HTML
+                    <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
                 </el-card>
             </el-col>
             <el-col :span="16">
@@ -68,7 +70,7 @@
                         <span>待办事项</span>
                         <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                     </div>
-                    <el-table :data="todoList" :show-header="false" height="304" style="width: 100%;font-size:14px;">
+                    <el-table :show-header="false" :data="todoList" style="width:100%;">
                         <el-table-column width="40">
                             <template slot-scope="scope">
                                 <el-checkbox v-model="scope.row.status"></el-checkbox>
@@ -76,11 +78,14 @@
                         </el-table-column>
                         <el-table-column>
                             <template slot-scope="scope">
-                                <div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.title}}</div>
+                                <div
+                                    class="todo-item"
+                                    :class="{'todo-item-del': scope.row.status}"
+                                >{{scope.row.title}}</div>
                             </template>
                         </el-table-column>
                         <el-table-column width="60">
-                            <template slot-scope="scope">
+                            <template>
                                 <i class="el-icon-edit"></i>
                                 <i class="el-icon-delete"></i>
                             </template>
@@ -92,12 +97,12 @@
         <el-row :gutter="20">
             <el-col :span="12">
                 <el-card shadow="hover">
-                    <schart ref="bar" class="schart" canvasId="bar" :data="data" type="bar" :options="options"></schart>
+                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                 </el-card>
             </el-col>
             <el-col :span="12">
                 <el-card shadow="hover">
-                    <schart ref="line" class="schart" canvasId="line" :data="data" type="line" :options="options2"></schart>
+                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
                 </el-card>
             </el-col>
         </el-row>
@@ -105,239 +110,267 @@
 </template>
 
 <script>
-    import Schart from 'vue-schart';
-    import bus from '../common/bus';
-    export default {
-        name: 'dashboard',
-        data() {
-            return {
-                name: localStorage.getItem('ms_username'),
-                todoList: [{
-                        title: '今天要修复100个bug',
-                        status: false,
-                    },
-                    {
-                        title: '今天要修复100个bug',
-                        status: false,
-                    },
-                    {
-                        title: '今天要写100行代码加几个bug吧',
-                        status: false,
-                    }, {
-                        title: '今天要修复100个bug',
-                        status: false,
-                    },
-                    {
-                        title: '今天要修复100个bug',
-                        status: true,
-                    },
-                    {
-                        title: '今天要写100行代码加几个bug吧',
-                        status: true,
-                    }
-                ],
-                data: [{
-                        name: '2018/09/04',
-                        value: 1083
-                    },
-                    {
-                        name: '2018/09/05',
-                        value: 941
-                    },
-                    {
-                        name: '2018/09/06',
-                        value: 1139
-                    },
-                    {
-                        name: '2018/09/07',
-                        value: 816
-                    },
-                    {
-                        name: '2018/09/08',
-                        value: 327
-                    },
-                    {
-                        name: '2018/09/09',
-                        value: 228
-                    },
-                    {
-                        name: '2018/09/10',
-                        value: 1065
-                    }
-                ],
-                options: {
-                    title: '最近七天每天的用户访问量',
-                    showValue: false,
-                    fillColor: 'rgb(45, 140, 240)',
-                    bottomPadding: 30,
-                    topPadding: 30
+import Schart from 'vue-schart';
+import bus from '../common/bus';
+export default {
+    name: 'dashboard',
+    data() {
+        return {
+            name: localStorage.getItem('ms_username'),
+            todoList: [
+                {
+                    title: '今天要修复100个bug',
+                    status: false
                 },
-                options2: {
-                    title: '最近七天用户访问趋势',
-                    fillColor: '#FC6FA1',
-                    axisColor: '#008ACD',
-                    contentColor: '#EEEEEE',
-                    bgColor: '#F5F8FD',
-                    bottomPadding: 30,
-                    topPadding: 30
+                {
+                    title: '今天要修复100个bug',
+                    status: false
+                },
+                {
+                    title: '今天要写100行代码加几个bug吧',
+                    status: false
+                },
+                {
+                    title: '今天要修复100个bug',
+                    status: false
+                },
+                {
+                    title: '今天要修复100个bug',
+                    status: true
+                },
+                {
+                    title: '今天要写100行代码加几个bug吧',
+                    status: true
                 }
-            }
-        },
-        components: {
-            Schart
-        },
-        computed: {
-            role() {
-                return this.name === 'admin' ? '超级管理员' : '普通用户';
-            }
-        },
-        created(){
-            this.handleListener();
-            this.changeDate();
-        },
-        activated(){
-            this.handleListener();
-        },
-        deactivated(){
-            window.removeEventListener('resize', this.renderChart);
-            bus.$off('collapse', this.handleBus);
-        },
-        methods: {
-            changeDate(){
-                const now = new Date().getTime();
-                this.data.forEach((item, index) => {
-                    const date = new Date(now - (6 - index) * 86400000);
-                    item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
-                })
+            ],
+            data: [
+                {
+                    name: '2018/09/04',
+                    value: 1083
+                },
+                {
+                    name: '2018/09/05',
+                    value: 941
+                },
+                {
+                    name: '2018/09/06',
+                    value: 1139
+                },
+                {
+                    name: '2018/09/07',
+                    value: 816
+                },
+                {
+                    name: '2018/09/08',
+                    value: 327
+                },
+                {
+                    name: '2018/09/09',
+                    value: 228
+                },
+                {
+                    name: '2018/09/10',
+                    value: 1065
+                }
+            ],
+            options: {
+                type: 'bar',
+                title: {
+                    text: '最近一周各品类销售图'
+                },
+                xRorate: 25,
+                labels: ['周一', '周二', '周三', '周四', '周五'],
+                datasets: [
+                    {
+                        label: '家电',
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: '百货',
+                        data: [164, 178, 190, 135, 160]
+                    },
+                    {
+                        label: '食品',
+                        data: [144, 198, 150, 235, 120]
+                    }
+                ]
             },
-            handleListener(){
-                bus.$on('collapse', this.handleBus);
-                // 调用renderChart方法对图表进行重新渲染
-                window.addEventListener('resize', this.renderChart)
-            },
-            handleBus(msg){
-                setTimeout(() => {
-                    this.renderChart()
-                }, 300);
-            },
-            renderChart(){
-                this.$refs.bar.renderChart();
-                this.$refs.line.renderChart();
+            options2: {
+                type: 'line',
+                title: {
+                    text: '最近几个月各品类销售趋势图'
+                },
+                labels: ['6月', '7月', '8月', '9月', '10月'],
+                datasets: [
+                    {
+                        label: '家电',
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: '百货',
+                        data: [164, 178, 150, 135, 160]
+                    },
+                    {
+                        label: '食品',
+                        data: [74, 118, 200, 235, 90]
+                    }
+                ]
             }
+        };
+    },
+    components: {
+        Schart
+    },
+    computed: {
+        role() {
+            return this.name === 'admin' ? '超级管理员' : '普通用户';
         }
+    },
+    // created() {
+    //     this.handleListener();
+    //     this.changeDate();
+    // },
+    // activated() {
+    //     this.handleListener();
+    // },
+    // deactivated() {
+    //     window.removeEventListener('resize', this.renderChart);
+    //     bus.$off('collapse', this.handleBus);
+    // },
+    methods: {
+        changeDate() {
+            const now = new Date().getTime();
+            this.data.forEach((item, index) => {
+                const date = new Date(now - (6 - index) * 86400000);
+                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+            });
+        }
+        // handleListener() {
+        //     bus.$on('collapse', this.handleBus);
+        //     // 调用renderChart方法对图表进行重新渲染
+        //     window.addEventListener('resize', this.renderChart);
+        // },
+        // handleBus(msg) {
+        //     setTimeout(() => {
+        //         this.renderChart();
+        //     }, 200);
+        // },
+        // renderChart() {
+        //     this.$refs.bar.renderChart();
+        //     this.$refs.line.renderChart();
+        // }
     }
-
+};
 </script>
 
 
 <style scoped>
-    .el-row {
-        margin-bottom: 20px;
-    }
+.el-row {
+    margin-bottom: 20px;
+}
 
-    .grid-content {
-        display: flex;
-        align-items: center;
-        height: 100px;
-    }
+.grid-content {
+    display: flex;
+    align-items: center;
+    height: 100px;
+}
 
-    .grid-cont-right {
-        flex: 1;
-        text-align: center;
-        font-size: 14px;
-        color: #999;
-    }
+.grid-cont-right {
+    flex: 1;
+    text-align: center;
+    font-size: 14px;
+    color: #999;
+}
 
-    .grid-num {
-        font-size: 30px;
-        font-weight: bold;
-    }
+.grid-num {
+    font-size: 30px;
+    font-weight: bold;
+}
 
-    .grid-con-icon {
-        font-size: 50px;
-        width: 100px;
-        height: 100px;
-        text-align: center;
-        line-height: 100px;
-        color: #fff;
-    }
+.grid-con-icon {
+    font-size: 50px;
+    width: 100px;
+    height: 100px;
+    text-align: center;
+    line-height: 100px;
+    color: #fff;
+}
 
-    .grid-con-1 .grid-con-icon {
-        background: rgb(45, 140, 240);
-    }
+.grid-con-1 .grid-con-icon {
+    background: rgb(45, 140, 240);
+}
 
-    .grid-con-1 .grid-num {
-        color: rgb(45, 140, 240);
-    }
+.grid-con-1 .grid-num {
+    color: rgb(45, 140, 240);
+}
 
-    .grid-con-2 .grid-con-icon {
-        background: rgb(100, 213, 114);
-    }
+.grid-con-2 .grid-con-icon {
+    background: rgb(100, 213, 114);
+}
 
-    .grid-con-2 .grid-num {
-        color: rgb(45, 140, 240);
-    }
+.grid-con-2 .grid-num {
+    color: rgb(45, 140, 240);
+}
 
-    .grid-con-3 .grid-con-icon {
-        background: rgb(242, 94, 67);
-    }
+.grid-con-3 .grid-con-icon {
+    background: rgb(242, 94, 67);
+}
 
-    .grid-con-3 .grid-num {
-        color: rgb(242, 94, 67);
-    }
+.grid-con-3 .grid-num {
+    color: rgb(242, 94, 67);
+}
 
-    .user-info {
-        display: flex;
-        align-items: center;
-        padding-bottom: 20px;
-        border-bottom: 2px solid #ccc;
-        margin-bottom: 20px;
-    }
+.user-info {
+    display: flex;
+    align-items: center;
+    padding-bottom: 20px;
+    border-bottom: 2px solid #ccc;
+    margin-bottom: 20px;
+}
 
-    .user-avator {
-        width: 120px;
-        height: 120px;
-        border-radius: 50%;
-    }
+.user-avator {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+}
 
-    .user-info-cont {
-        padding-left: 50px;
-        flex: 1;
-        font-size: 14px;
-        color: #999;
-    }
+.user-info-cont {
+    padding-left: 50px;
+    flex: 1;
+    font-size: 14px;
+    color: #999;
+}
 
-    .user-info-cont div:first-child {
-        font-size: 30px;
-        color: #222;
-    }
+.user-info-cont div:first-child {
+    font-size: 30px;
+    color: #222;
+}
 
-    .user-info-list {
-        font-size: 14px;
-        color: #999;
-        line-height: 25px;
-    }
+.user-info-list {
+    font-size: 14px;
+    color: #999;
+    line-height: 25px;
+}
 
-    .user-info-list span {
-        margin-left: 70px;
-    }
+.user-info-list span {
+    margin-left: 70px;
+}
 
-    .mgb20 {
-        margin-bottom: 20px;
-    }
+.mgb20 {
+    margin-bottom: 20px;
+}
 
-    .todo-item {
-        font-size: 14px;
-    }
+.todo-item {
+    font-size: 14px;
+}
 
-    .todo-item-del {
-        text-decoration: line-through;
-        color: #999;
-    }
-
-    .schart {
-        width: 100%;
-        height: 300px;
-    }
+.todo-item-del {
+    text-decoration: line-through;
+    color: #999;
+}
 
+.schart {
+    width: 100%;
+    height: 300px;
+}
 </style>
diff --git a/src/components/page/Donate.vue b/src/components/page/Donate.vue
index 161469f..e20a92d 100644
--- a/src/components/page/Donate.vue
+++ b/src/components/page/Donate.vue
@@ -10,7 +10,7 @@
         <div class="container">
             <div class="plugins-tips">如果该框架对你有帮助，那就请作者喝杯饮料吧！加微信号linxin_20探讨问题。</div>
             <div>
-                <img src="https://lin-xin.github.io/images/weixin.jpg" />
+                <img src="https://lin-xin.gitee.io/images/weixin.jpg" />
             </div>
         </div>
     </div>
diff --git a/src/utils/request.js b/src/utils/request.js
index 53a721c..0cd1316 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,26 +2,33 @@ import axios from 'axios';
 
 const service = axios.create({
     // process.env.NODE_ENV === 'development' 来判断是否开发环境
-    baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
+    // easy-mock服务挂了，暂时不使用了
+    // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
     timeout: 5000
-})
+});
 
-service.interceptors.request.use( config => {
-    return config;
-}, error => {
-    console.log(error);
-    return Promise.reject();
-})
-
-service.interceptors.response.use(response => {
-    if(response.status === 200){
-        return response.data;
-    }else{
-        Promise.reject();
+service.interceptors.request.use(
+    config => {
+        return config;
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
     }
-}, error => {
-    console.log(error);
-    return Promise.reject();
-})
+);
 
-export default service;
\ No newline at end of file
+service.interceptors.response.use(
+    response => {
+        if (response.status === 200) {
+            return response.data;
+        } else {
+            Promise.reject();
+        }
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+export default service;