From afa85e1b94bc4a4a545cf8ee5c5ee1cb88d92d85 Mon Sep 17 00:00:00 2001
From: 1319612909 <1319612909@qq.com>
Date: Tue, 3 Nov 2020 22:28:04 +0800
Subject: [PATCH] index css

---
 web/src/style/main.scss          | 115 ++++++++++++
 web/src/view/dashboard/index.vue | 313 ++++++++++++++++++++-----------
 web/vue.config.js                |   2 +-
 3 files changed, 316 insertions(+), 114 deletions(-)

diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index 9024eb7b..d2f1de64 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -1231,3 +1231,118 @@ $mainHight: 100vh;
     overflow: hidden;
     height: 60px;
   }
+  .card{
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 4px;
+      overflow: hidden;
+      .car-left{
+          height: 68px;
+          width: 70%;
+          float: left;
+      }
+     .car-right{
+        height: 68px;
+        width: 29%;
+        float: left;
+        .flow,
+        .user-number,
+       .feedback{
+            width: 24px;
+            height: 24px;
+            display: inline-block;
+            border-radius: 50%;
+            line-height: 24px;
+            text-align: center;
+            font-size: 13px;
+            margin-right: 5px;
+        }
+        .flow{
+            background-color: #fff7e8;
+            border-color: #feefd0;
+            color: #faad14;
+        }
+        .user-number{
+            background-color: #ecf5ff;
+            border-color: #d9ecff;
+            color: #409eff;
+        }
+        .feedback{
+            background-color: #eef9e8;
+            border-color: #dcf3d1;
+            color:#52c41a;
+        }
+        .car-item{
+            text-align: right;
+            b{
+                display: block;
+            }
+        }
+       
+     }
+     
+      .card-img{
+        width: 68px;
+        height: 68px;
+        display: inline-block;
+        float: left;
+        overflow: hidden;
+        img{
+            width: 100%;
+           height: 100%;
+            border-radius: 50%;
+        }
+    }
+    .text{
+        height: 68px;
+        margin-left: 10px;
+        float: left;
+        margin-top: 14px;
+        h4{
+            font-size: 20px;
+            color: #262626;
+            font-weight: 500;
+            white-space: nowrap;
+         word-break: break-all;
+         text-overflow: ellipsis;
+         }
+         .tips-text{
+            color: #8c8c8c;
+            margin-top: 8px;
+         }
+    }
+   
+    
+  }
+  .shadow{
+      margin: 5px 0;
+      .grid-content{
+        background-color: #fff;
+        border-radius: 4px;
+        text-align: center;
+        padding: 15px 0;
+        cursor: pointer;
+        .el-icon{
+            width: 30px;
+            height: 30px;
+            font-size: 30px;
+            margin-bottom: 8px;
+        }
+        .el-icon-user{
+            color:  #ff9c6e;
+        }
+        .el-icon-setting{
+            color: #69c0ff;
+        }
+        .el-icon-menu{
+                color: #b37feb;
+        }
+        .el-icon-cpu{
+            color:#ffd666;
+        }
+        .el-icon-document-checked{
+            color:#ff85c0;
+        }
+      }
+     
+  }
diff --git a/web/src/view/dashboard/index.vue b/web/src/view/dashboard/index.vue
index 7e7433f1..6a994d0a 100644
--- a/web/src/view/dashboard/index.vue
+++ b/web/src/view/dashboard/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="big">
-     <div class="mid">
+     <!-- <div class="mid">
          <el-row :gutter="32">
              <el-col :xs="24" :sm="24" :lg="8">
                  <div class="chart-wrapper">
@@ -18,10 +18,56 @@
                  </div>
              </el-col>
          </el-row>
-     </div>
-     <div class="top">
+     </div> -->
+     <!-- <div class="top">
          <div id="main" class="chart-container"></div>
-     </div>
+     </div> -->
+         <div class="card">
+             <div class="car-left">
+                 <div>
+                    <span class="card-img"> <img :src="userInfo.headerImg"  alt="" > </span>   
+                    <div class="text"><h4>早安，管理员， 请开始您一天的工作吧！</h4>
+                        <p class="tips-text">
+                            <i class="el-icon-sunny"></i>
+                            <span>今日晴，18℃ - 28℃，出门记得防晒哦。</span>
+                        </p>
+                    </div>
+                 </div>
+             </div>
+             <div class="car-right">
+                 <el-row>
+                    <el-col :span="8"><div class="car-item">
+                        <span class="flow"><i class="el-icon-s-grid"></i></span>
+                        <span>今日流量 </span>
+                        <b>13260</b>
+                        </div></el-col>
+                    <el-col :span="8"><div class="car-item">
+                       <span class="user-number">
+                         <i class="el-icon-s-custom "></i>
+                        </span>
+                        <span>总用户 </span>
+                        <b>48286</b>
+                        </div></el-col>
+                    <el-col :span="8"><div class="car-item ">
+                      <span class="feedback">
+                          <i class="el-icon-star-on"></i>
+                      </span> 
+                        <span>好评率 </span>
+                        <b>98%</b>
+                        </div></el-col>
+                 </el-row>
+             </div>
+         </div>
+         <div class="shadow">
+             <el-row :gutter="20">
+                 <el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)">
+                      <div class="grid-content">
+                        <i :class="card.icon"></i>
+                        <p>{{card.label}}</p>  
+                    </div>  
+                 </el-col>
+            </el-row>
+         </div>
       <div class="bottom">
          <el-row :gutter="32">
              <el-col :xs="24" :sm="24" :lg="12">
@@ -42,127 +88,167 @@
 
 <script>
 import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import RaddarChart from "./component/RaddarChart"
-import stackMap from "./component/stackMap"
-import Sunburst from "./component/Sunburst"
+// require('echarts/theme/macarons') // echarts theme
+// import RaddarChart from "./component/RaddarChart"
+// import stackMap from "./component/stackMap"
+// import Sunburst from "./component/Sunburst"
 import musicPlayer from "./component/musicPlayer"
 import TodoList from "./component/todoList"
-
+import { mapGetters } from 'vuex'
 export default {
   name: 'Dashboard',
   data() {
     return {
+        toolCards:[
+            {
+                label:"用户管理",
+                icon:"el-icon el-icon-user",
+                name:"user"
+            },
+            {
+                label:"角色管理",
+                icon:"el-icon el-icon-setting",
+                name:"authority"
+            },
+            {
+                label:"菜单管理",
+                icon:"el-icon el-icon-menu",
+                name:"menu"
+            },
+            {
+                label:"代码生成器",
+                icon:"el-icon el-icon-cpu",
+                name:"autoCode"
+            },
+            {
+                label:"表单生成器",
+                icon:"el-icon el-icon-document-checked",
+                name:"formCreate"
+            },
+            {
+                label:"关于我们",
+                icon:"el-icon el-icon-user",
+                name:"about"
+            }
 
+        ]
     }
+  },
+   computed: {
+    ...mapGetters('user', ['userInfo'])
   },
     components:{
-        RaddarChart, //雷达图
-        stackMap, //堆叠图
-        Sunburst, //旭日图
         musicPlayer,  //音乐播放器
-        TodoList //TodoList
+        TodoList, //TodoList
+        // RaddarChart, //雷达图
+        // stackMap, //堆叠图
+        // Sunburst, //旭日图
+    },
+    methods:{
+      toTarget(name){
+          this.$router.push({name})
+      }
     },
-  mounted() {
-      let myChart = echarts.init(document.getElementById('main'),'macarons');
-      // let stackMap = echarts.init(document.getElementById('stackMap'));
-      let  option = {
-          legend: {},
-          tooltip: {
-              trigger: 'axis',
-              showContent: false
-          },
-          dataset: {
-              source: [
-                  ['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
-                  ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
-                  ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
-                  ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
-                  ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
-              ]
-          },
-          xAxis: {
-              type: 'category',
-              axisLabel: {
-                  show: true,
-                  textStyle: {
-                      color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
-                      fontSize : 14    //更改坐标轴文字大小
-                  }
-              },
-              axisTick: {
-                  show: false
-              },
-              axisLine:{
-                  lineStyle:{
-                      color:'rgb(192,192,192)' //更改坐标轴颜色
-                  }
-              },
-          },
-          yAxis: {
-              gridIndex:0,
-              axisLabel: {
-                  show: true,
-                  textStyle: {
-                      color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
-                      fontSize: 14    //更改坐标轴文字大小
-                  }
-              },
-              axisTick: {
-                  show: false
-              },
-              axisLine: {
-                  lineStyle: {
-                      color: 'rgb(192,192,192)' //更改坐标轴颜色
-                  }
-              }
-          },
-          grid: {top: '55%'},
-          series: [
-              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
-              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
-              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
-              {type: 'line', smooth: true, seriesLayoutBy: 'row'},
-              {
-                  type: 'pie',
-                  id: 'pie',
-                  radius: '30%',
-                  center: ['50%', '25%'],
-                  label: {
-                      formatter: '{b}: {@2012} ({d}%)'
-                  },
-                  encode: {
-                      itemName: 'product',
-                      value: '2012',
-                      tooltip: '2012'
-                  }
-              }
-          ]
-      };
-      //点记标记点时的动效
-      myChart.on('updateAxisPointer', function (event) {
-          var xAxisInfo = event.axesInfo[0];
-          if (xAxisInfo) {
-              var dimension = xAxisInfo.value + 1;
-              myChart.setOption({
-                  series: {
-                      id: 'pie',
-                      label: {
-                          formatter: '{b}: {@[' + dimension + ']} ({d}%)'
-                      },
-                      encode: {
-                          value: dimension,
-                          tooltip: dimension
-                      }
-                  }
-              });
-          }
-      });
+//   mounted() {
+//       let myChart = echarts.init(document.getElementById('main'),'macarons');
+//       // let stackMap = echarts.init(document.getElementById('stackMap'));
+//       let  option = {
+//           legend: {},
+//           tooltip: {
+//               trigger: 'axis',
+//               showContent: false
+//           },
+//           dataset: {
+//               source: [
+//                   ['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
+//                   ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
+//                   ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
+//                   ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
+//                   ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
+//               ]
+//           },
+//           xAxis: {
+//               type: 'category',
+//               axisLabel: {
+//                   show: true,
+//                   textStyle: {
+//                       color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
+//                       fontSize : 14    //更改坐标轴文字大小
+//                   }
+//               },
+//               axisTick: {
+//                   show: false
+//               },
+//               axisLine:{
+//                   lineStyle:{
+//                       color:'rgb(192,192,192)' //更改坐标轴颜色
+//                   }
+//               },
+//           },
+//           yAxis: {
+//               gridIndex:0,
+//               axisLabel: {
+//                   show: true,
+//                   textStyle: {
+//                       color: 'rgb(192,192,192)',  //更改坐标轴文字颜色
+//                       fontSize: 14    //更改坐标轴文字大小
+//                   }
+//               },
+//               axisTick: {
+//                   show: false
+//               },
+//               axisLine: {
+//                   lineStyle: {
+//                       color: 'rgb(192,192,192)' //更改坐标轴颜色
+//                   }
+//               }
+//           },
+//           grid: {top: '55%'},
+//           series: [
+//               {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+//               {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+//               {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+//               {type: 'line', smooth: true, seriesLayoutBy: 'row'},
+//               {
+//                   type: 'pie',
+//                   id: 'pie',
+//                   radius: '30%',
+//                   center: ['50%', '25%'],
+//                   label: {
+//                       formatter: '{b}: {@2012} ({d}%)'
+//                   },
+//                   encode: {
+//                       itemName: 'product',
+//                       value: '2012',
+//                       tooltip: '2012'
+//                   }
+//               }
+//           ]
+//       };
+//       //点记标记点时的动效
+//       myChart.on('updateAxisPointer', function (event) {
+//           var xAxisInfo = event.axesInfo[0];
+//           if (xAxisInfo) {
+//               var dimension = xAxisInfo.value + 1;
+//               myChart.setOption({
+//                   series: {
+//                       id: 'pie',
+//                       label: {
+//                           formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+//                       },
+//                       encode: {
+//                           value: dimension,
+//                           tooltip: dimension
+//                       }
+//                   }
+//               });
+//           }
+//       });
 
-      window.addEventListener('resize',function() {myChart.resize()});
-      myChart.setOption(option);
+//       window.addEventListener('resize',function() {myChart.resize()});
+//       myChart.setOption(option);
 
-  }
+//   }
 }
 </script>
 
@@ -170,7 +256,8 @@ export default {
     .big{
         margin:100px 0 0 0;
         padding-top: 0;
-        background-color: rgb(243,243,243);;
+        background-color: rgb(243,243,243);
+        padding-top: 15px;
         .top{
             width: 100%;
             height: 360px;
@@ -197,7 +284,7 @@ export default {
         .bottom{
             width: 100%;
             height: 300px;
-            margin: 20px 0;
+            // margin: 20px 0;
             .el-row{
                 margin-right: 4px !important;
             }
diff --git a/web/vue.config.js b/web/vue.config.js
index 89f2acc7..71961ce0 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -23,7 +23,7 @@ module.exports = {
             // 把key的路径代理到target位置
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: { //需要代理的路径   例如 '/api'
-                target: `http://127.0.0.1:8888`, //代理到 目标路径
+                target: `http://139.9.113.229:8888/`, //代理到 目标路径
                 changeOrigin: true,
                 pathRewrite: { // 修改路径数据
                     ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除