首页布局完成，页面顶部返回组件

梁保满
1 parent 29f8fb90
Showing 28 changed files with 552 additions and 590 deletions
package.json
src/assets/css/base.css
src/assets/nav/analysis.png
src/assets/nav/ask.png
src/assets/nav/card.png
src/assets/nav/device.png
src/assets/nav/down.png
src/assets/nav/examinationPaper.png
src/assets/nav/portrait.png
src/assets/nav/setUpAccount.png
src/assets/nav/setUpConglomerate.png
src/assets/nav/setUpSchool.png
src/assets/nav/test.png
src/components/ECharts/lineEcharts.vue
src/components/backBox.vue
src/components/globalComponents.js
src/main.js
src/router/permission.js
src/store/index.js
src/utils/global.js
@@ -28,6 +28,7 @@
     "babel-core": "^6.22.1",
     "babel-loader": "^7.1.1",
     "babel-eslint": "^10.1.0",
+    "babel-polyfill": "^6.26.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "extract-text-webpack-plugin": "^3.0.0",
+* {
+  margin: 0px;
+  padding: 0px;
+}
+html,
+body {
+  height:100%;
+  overflow: hidden;
+  background-color: #fff;
+  font-size: 14px;
+  color: #333333;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
 \ No newline at end of file
@@ -96,7 +96,20 @@ export default {
           }
         ]
       })
-    }
+
+      this.selfAdaption()
+    },
+    // echart自适应
+    selfAdaption() {
+      let that = this;
+      setTimeout(() => {
+        window.onresize = function () {
+          if (that.$refs.echarts) {
+            that.$refs.echarts.chart.resize();
+          }
+        };
+      }, 10);
+    },
   }
 }
 </script>
+<template>
+  <div class="back">
+    <div class="back-l" @click="back">
+      <slot name="title"></slot>
+    </div>
+    <div class="back-r">
+      <slot name="btns"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "back",
+  methods: {
+    back() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.back {
+  width: 100%;
+  height: 56px;
+  border-bottom: 1px solid #e2e2e2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  .back-l {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    flex-shrink: 0;
+    font-size: 18px;
+    font-weight: 500;
+  }
+  .back-r {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .fa-mail-reply-all {
+    font-size: 28px;
+    color: #b3b3b3;
+    margin-right: 12px;
+  }
+}
+</style>
 \ No newline at end of file
+import Vue from "vue";
+/**
+ * require.context(directory .useSubdirectories ,regExp )
+ * directory :-读取文件路径
+ * useSubdirectories :-是够遍历文件子目录
+ * regExp :匹配文件正则
+ */
+
+function changeStr(str) {
+  return str.charAt(str).toUpperCase() + str.slice(1)
+}
+const requireComponent = require.context("./", false, /\.vue$/);
+
+requireComponent.keys().forEach((fileName) => {
+  let config = requireComponent(fileName);
+  let componentName = changeStr(
+    fileName.replace(/\.\//, "").replace(/\.\w+$/, "")
+  );
+  Vue.component(componentName, config.default || config);
+});
+
@@ -9,11 +9,15 @@ import i18n from &quot;./i18n/i18n&quot;
 import globalPlugin from "./utils/global"
 import permission from "./directive/permission/button"
 import NProgress from "nprogress"
+import "babel-polyfill"
+import '@/components/globalComponents.js'
+
  
 import "nprogress/nprogress.css"
 import "element-ui/lib/theme-chalk/index.css"
 import "font-awesome/css/font-awesome.css"
 import "@/router/permission"
+import "@/assets/css/base.css"
  
 Vue.config.productionTip = false
 Vue.use(ElementUI)
@@ -30,6 +34,4 @@ new Vue({
   store,
   i18n,
   render: h => h(App),
-  components: {App},
-  template: "<App/>"
 })
@@ -17,6 +17,7 @@ const TestAnalysis = () =&gt; import(&quot;@/views/test/analysis&quot;)
 const DataSync = () => import("@/views/dataSync/index")
 const Portrait = () => import("@/views/portrait/index")
 const Card = () => import("@/views/card/index")
+const Analysis = () => import("@/views/analysis/index")
 const Device = () => import("@/views/device/index")
 const Down = () => import("@/views/down/index")
 const DownClient = () => import("@/views/down/client")
@@ -127,42 +128,45 @@ let addrouters = [  //测试用，后续后端获取
       }
     ]
   },
+  
   {
-    path: "/dataSync",
-    iconCls: "fa fa-random", // 图标样式class
-    name: "数据同步",
+    path: "/setUpConglomerate",
+    iconCls: "fa fa-building", // 图标样式class
+    name: "学校管理",
     component: Layout,
     alone: true,
     children: [
       {
-        path: "/dataSync",
-        iconCls: "fa fa-random", // 图标样式class
-        name: "",
-        component: DataSync,
+        path: "/setUpConglomerate",
+        iconCls: "fa fa-building",
+        name: '集团管理',
+        component: SetUpConglomerate,
         children: []
-      }
+      },
     ]
   },
   {
-    path: "/",
-    iconCls: "fa fa-cog",
-    name: '信息管理',
+    path: "/setUpAccount",
+    iconCls: "fa fa-id-card-o", // 图标样式class
+    name: "账号管理",
     component: Layout,
+    alone: true,
     children: [
       {
         path: "/setUpAccount",
         iconCls: "fa fa-id-card-o",
-        name: '账号管理',
+        name: '',
         component: SetUpAccount,
         children: []
       },
-      {
-        path: "/setUpConglomerate",
-        iconCls: "fa fa-building",
-        name: '集团管理',
-        component: SetUpConglomerate,
-        children: []
-      },
+    ]
+  },
+  {
+    path: "/",
+    iconCls: "fa fa-cog",
+    name: '学校管理',
+    component: Layout,
+    children: [
       {
         path: "/setUpSchool",
         iconCls: "fa fa-calculator",
@@ -219,6 +223,22 @@ let addrouters = [  //测试用，后续后端获取
     ]
   },
   {
+    path: "/analysis",
+    iconCls: "fa fa-area-chart", // 图标样式class
+    name: "使用分析",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/analysis",
+        iconCls: "fa fa-area-chart", // 图标样式class
+        name: "",
+        component: Analysis,
+        children: []
+      }
+    ]
+  },
+  {
     path: "/down",
     iconCls: "fa fa-download", // 图标样式class
     name: "软件下载",
@@ -241,7 +261,22 @@ let addrouters = [  //测试用，后续后端获取
       }
     ]
   },
-
+  {
+    path: "/dataSync",
+    iconCls: "fa fa-random", // 图标样式class
+    name: "数据同步",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/dataSync",
+        iconCls: "fa fa-random", // 图标样式class
+        name: "",
+        component: DataSync,
+        children: []
+      }
+    ]
+  },
   {
     path: "*",
     redirect: "/404",
@@ -268,7 +303,7 @@ router.beforeEach((to, from, next) =&gt; {
                 roleName: "超级管理员"
               }
             ],
-            name: "张老师",
+            name: "李老师",
             // avatar: data.avatar ? data.avatar : "",
             // uid: data.id,
             // authorityRouter:[],
@@ -276,7 +311,6 @@ router.beforeEach((to, from, next) =&gt; {
           })
           await store.commit("setRouters", addrouters)
           let newAddRouters = store.getters.addRouters
-          // await router.addRoutes(newAddRouters)
           newAddRouters.forEach(res => {
             router.addRoute(res)
           })
@@ -20,6 +20,7 @@ const TestAnalysis = () =&gt; import(&quot;@/views/test/analysis&quot;)
 const DataSync = () => import("@/views/dataSync/index")
 const Portrait = () => import("@/views/portrait/index")
 const Card = () => import("@/views/card/index")
+const Analysis = () => import("@/views/analysis/index")
 const Device = () => import("@/views/device/index")
 const Down = () => import("@/views/down/index")
 const DownClient = () => import("@/views/down/client")
@@ -130,42 +131,45 @@ let addrouters = [  //测试用，后续后端获取
       }
     ]
   },
+  
   {
-    path: "/dataSync",
-    iconCls: "fa fa-random", // 图标样式class
-    name: "数据同步",
+    path: "/setUpConglomerate",
+    iconCls: "fa fa-building", // 图标样式class
+    name: "学校管理",
     component: Layout,
     alone: true,
     children: [
       {
-        path: "/dataSync",
-        iconCls: "fa fa-random", // 图标样式class
-        name: "",
-        component: DataSync,
+        path: "/setUpConglomerate",
+        iconCls: "fa fa-building",
+        name: '集团管理',
+        component: SetUpConglomerate,
         children: []
-      }
+      },
     ]
   },
   {
-    path: "/",
-    iconCls: "fa fa-cog",
-    name: '信息管理',
+    path: "/setUpAccount",
+    iconCls: "fa fa-id-card-o", // 图标样式class
+    name: "账号管理",
     component: Layout,
+    alone: true,
     children: [
       {
         path: "/setUpAccount",
         iconCls: "fa fa-id-card-o",
-        name: '账号管理',
+        name: '',
         component: SetUpAccount,
         children: []
       },
-      {
-        path: "/setUpConglomerate",
-        iconCls: "fa fa-building",
-        name: '集团管理',
-        component: SetUpConglomerate,
-        children: []
-      },
+    ]
+  },
+  {
+    path: "/",
+    iconCls: "fa fa-cog",
+    name: '学校管理',
+    component: Layout,
+    children: [
       {
         path: "/setUpSchool",
         iconCls: "fa fa-calculator",
@@ -222,6 +226,22 @@ let addrouters = [  //测试用，后续后端获取
     ]
   },
   {
+    path: "/analysis",
+    iconCls: "fa fa-area-chart", // 图标样式class
+    name: "使用分析",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/analysis",
+        iconCls: "fa fa-area-chart", // 图标样式class
+        name: "",
+        component: Analysis,
+        children: []
+      }
+    ]
+  },
+  {
     path: "/down",
     iconCls: "fa fa-download", // 图标样式class
     name: "软件下载",
@@ -244,7 +264,22 @@ let addrouters = [  //测试用，后续后端获取
       }
     ]
   },
-
+  {
+    path: "/dataSync",
+    iconCls: "fa fa-random", // 图标样式class
+    name: "数据同步",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/dataSync",
+        iconCls: "fa fa-random", // 图标样式class
+        name: "",
+        component: DataSync,
+        children: []
+      }
+    ]
+  },
   {
     path: "*",
     redirect: "/404",
@@ -301,8 +336,6 @@ const store = new Vuex.Store({
         // authorityRouter:[],
       });
       commit("setRouters", addrouters)
-      // let newAddRouters = getters.addRouters;
-      // await router.addRoutes(newAddRouters)
       addrouters.forEach((res) => {
         that.$router.addRoute(res);
       });
@@ -327,8 +360,6 @@ const store = new Vuex.Store({
         // authorityRouter:[],
       });
       commit("setRouters", addrouters)
-      // let newAddRouters = getters.addRouters;
-      // await router.addRoutes(newAddRouters)
       addrouters.forEach((res) => {
         that.$router.addRoute(res);
       });
@@ -7,98 +7,5 @@ export default {
     Vue.prototype.$echarts = echarts
     Vue.prototype.$request = request
     Vue.prototype.$rules = rules
-    /** 时间字符串
-     * @method $getDateDiff
-     * @param timespan
-     */
-    Vue.prototype.$getDateDiff = function (timespan) {
-      var dateTime = new Date(timespan)
-      var year = dateTime.getFullYear()
-      var month = (dateTime.getMonth() + 1) < 10 ? "0" + (dateTime.getMonth() + 1) : (dateTime.getMonth() + 1)
-      var day = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate()
-      var hour = dateTime.getHours() < 10 ? "0" + dateTime.getHours() : dateTime.getHours()
-      var minute = dateTime.getMinutes() < 10 ? "0" + dateTime.getMinutes() : dateTime.getMinutes()
-      var seconds = dateTime.getSeconds() < 10 ? "0" + dateTime.getSeconds() : dateTime.getSeconds()
-      var now = new Date()
-      var nowNew = now.getTime()
-      var milliseconds = 0
-      var timeSpanStr
-      milliseconds = nowNew - dateTime
-
-      if (milliseconds <= 1000 * 60 * 1) {
-        timeSpanStr = "刚刚"
-      } else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
-        timeSpanStr = Math.round((milliseconds / (1000 * 60))) + "分钟前"
-      } else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
-        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + "小时前"
-      } else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 3) {
-        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + "天前"
-      } else if (milliseconds > 1000 * 60 * 60 * 24 * 3 && year === now.getFullYear()) {
-        timeSpanStr = month + "-" + day + " " + hour + ":" + minute + ":" + seconds
-      } else {
-        timeSpanStr = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds
-      }
-      return timeSpanStr
-    }
-
-    /** 当前地址ip
-     * @method $path
-     * @param {}
-    */
-    Vue.prototype.$path = process.env.API_HOST
-
-    /** 传入路径转换成完整连接
-     * @method $getPath
-     * @param {url: 路径}
-    */
-    Vue.prototype.$getPath = function (url) {
-      const base = process.env.API_HOST
-      if (/^http/.test(url)) return url
-      return base + url
-    }
-    /** 是否开发模式
-     * @method $env
-     * @param {}
-    */
-    Vue.prototype.$env = process.env.NODE_ENV
-
-    /** 导出，下载处理文件流
-     * @method $exportClick
-     * @param {res：文件流，name ： 下载文件名}
-    */
-    Vue.prototype.$exportClick = function (res, name = "下载.zip") {
-      const content = res
-      const blob = new Blob([content])
-      const fileName = name
-      if ("download" in document.createElement("a")) { // 非IE下载
-        const elink = document.createElement("a")
-        elink.download = fileName
-        elink.style.display = "none"
-        elink.href = URL.createObjectURL(blob)
-        document.body.appendChild(elink)
-        elink.click()
-        URL.revokeObjectURL(elink.href) // 释放URL 对象
-        document.body.removeChild(elink)
-      } else { // IE10+下载
-        navigator.msSaveBlob(blob, fileName)
-      }
-    }
-
-    /** 当res.code === 200 时
-     * @method $restBack
-     * @param res
-     * @param fn
-     * @param message
-     * @param type
-     */
-    Vue.prototype.$restBack = function (res, fn = () => {}, message, type = "success") {
-      if (res.code === 200) {
-        this.$message({
-          message: message || res.message,
-          type: type
-        })
-        fn()
-      }
-    }
   }
 }
+<template>
+  <div>使用分析</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
 \ No newline at end of file
 <template>
   <div>
-    答题卡列表
-    <router-link to="/examinationPaperAdd">添加答题卡</router-link>
-    <router-link to="/examinationPaperRecycle">已归档答题卡</router-link>
-    <router-link to="/examinationPaperEdit">修改答案</router-link>
+    <back-box>
+      <template slot="title">
+        <i class="fa fa-mail-reply-all"></i>
+        <span>备题组卷</span>
+      </template>
+      <template slot="btns">
+        
+      </template>
+    </back-box>
+    <div class="content">
+      <router-link to="/examinationPaperAdd">添加答题卡</router-link>
+      <router-link to="/examinationPaperRecycle">已归档答题卡</router-link>
+      <router-link to="/examinationPaperEdit">修改答案</router-link>
+    </div>
   </div>
 </template>
  
 <script>
 export default {
-  name:"examinationPaper"
-}
+  name: "examinationPaper",
+};
 </script>
  
-<style>
-
+<style scoped lang="scss">
+.container {
+}
 </style>
 \ No newline at end of file
 <template>
-  <div>首页</div>
+  <div class="container">
+    <ul class="nav-list" v-if="type == '学校管理员'">
+      <li class="nav-item item1" @click="links('setUpAccount')">
+        <img class="icon" src="../../assets/nav/setUpAccount.png" alt="" />
+        <div class="text">
+          <p class="p1">账号管理</p>
+          <p class="p2">管理32个任课教师，14个班主任，3个备课组长账号信息。</p>
+        </div>
+      </li>
+      <li class="nav-item item1" @click="links('setUpSchool')">
+        <img class="icon" src="../../assets/nav/setUpSchool.png" alt="" />
+        <div class="text">
+          <p class="p1">学校管理</p>
+          <p class="p2">管理6个年级，3个班级，397名学生信息。</p>
+        </div>
+      </li>
+      <li class="nav-item item2" @click="links('device')">
+        <img class="icon" src="../../assets/nav/device.png" alt="" />
+        <div class="text">
+          <p class="p1">设备状态</p>
+          <p class="p2">管理14个基站，396套答题器设备。</p>
+        </div>
+      </li>
+      <li class="item3">
+        <div class="nav-item item1 item-child1" @click="links('analysis')">
+          <img class="icon" src="../../assets/nav/analysis.png" alt="" />
+          <div class="text">
+            <p class="p1">使用分析</p>
+            <p class="p2">按班级、科目等维度分析设备使用频率。</p>
+          </div>
+        </div>
+        <div class="nav-item item1 item-child2" @click="links('card')">
+          <img class="icon" src="../../assets/nav/card.png" alt="" />
+          <p class="p1">发卡补卡</p>
+          <p class="p2">为学生办理发卡、补卡业务。</p>
+        </div>
+        <div class="nav-item item1 item-child2" @click="links('down')">
+          <img class="icon" src="../../assets/nav/down.png" alt="" />
+          <p class="p1">软件下载</p>
+          <p class="p2">设置参数，下载授课端软件。</p>
+        </div>
+      </li>
+    </ul>
+    <ul class="nav-list" v-if="type == '集团管理员'">
+      <li v-for="item in navList" :key="item.path" class="nav-item item4" @click="links(item.path)">
+        <img class="icon" :src="getImgs(item.path)" alt="" />
+          <div class="text" v-if="item.path == 'setUpConglomerate'">
+            <p class="p1">学校管理</p>
+            <p class="p2">管理3个区域，14个学校。</p>
+          </div>
+          <div class="text" v-else-if="item.path == 'setUpAccount'">
+            <p class="p1">账号管理</p>
+            <p class="p2">共35个各层级管理员账号。</p>
+          </div>
+          <div class="text" v-else-if="item.path == 'device'">
+            <p class="p1">设备状态</p>
+            <p class="p2">管理14个基站，396套答题器设备。</p>
+          </div>
+          <div class="text" v-else>
+            <p class="p1">使用分析</p>
+            <p class="p2">按软件功能、题型统计使用频率。</p>
+          </div>
+      </li>
+    </ul>
+    <ul class="nav-list" v-if="type == '班主任' || type == '任课老师' ">
+      <li v-for="item in navList" :key="item.path" class="nav-item item4" @click="links(item.path)">
+        <img class="icon" :src="getImgs(item.path)" alt="" />
+          <div class="text" v-if="item.path == 'examinationPaper'">
+            <p class="p1">备题组卷</p>
+            <p class="p2">管理32套答题卡。</p>
+          </div>
+          <div class="text" v-else-if="item.path == 'portrait'">
+            <p class="p1">学生画像</p>
+            <p class="p2">共分析532名学生成绩。</p>
+          </div>
+          <div class="text" v-else-if="item.path == 'ask'">
+            <p class="p1">随堂问报表</p>
+            <p class="p2">对41套随堂问答题记录分析。</p>
+          </div>
+          <div class="text" v-else>
+            <p class="p1">即时测报表</p>
+            <p class="p2">对28套即时测答题记录分析。</p>
+          </div>
+      </li>
+    </ul>
+  </div>
 </template>
  
 <script>
 export default {
   name: "mainIndex",
-  mounted() {
-    this.selfAdaption();
+  data() {
+    return {
+      // type: "学校管理员",
+      // type: "集团管理员",
+      // type: "班主任",
+      type: "任课老师",
+      navList: [
+        // {
+        //   name: "学校管理",
+        //   path: "setUpConglomerate",
+        // },
+        // {
+        //   name: "账号管理",
+        //   path: "setUpAccount",
+        // },
+        // {
+        //   name: "设备状态",
+        //   path: "device",
+        // },
+        // {
+        //   name: "使用分析",
+        //   path: "analysis",
+        // },
+        {
+          name: "备题组卷",
+          path: "examinationPaper",
+        },
+        {
+          name: "学生画像",
+          path: "portrait",
+        },
+        {
+          name: "随堂问报表",
+          path: "ask",
+        },
+        {
+          name: "即时测报表",
+          path: "test",
+        },
+      ],
+    };
   },
+  mounted() {},
   methods: {
-    // echart自适应
-    selfAdaption() {
-      let that = this;
-      setTimeout(() => {
-        window.onresize = function () {
-          if (that.$refs.echarts) {
-            that.$refs.echarts.chart.resize();
-          }
-        };
-      }, 10);
+    getImgs(path) {
+      return require(`@/assets/nav/${path}.png`)
+    },
+    links(path) {
+      this.$router.push({
+        path: `/${path}`,
+      });
     },
   },
 };
 </script>
  
 <style lang="scss">
-$top: top;
-$bottom: bottom;
-$left: left;
-$right: right;
-$leftright: ($left, $right);
-$pinkk: #eec2d3;
-$bluee: #409eff;
-$yelloww: #f4d884;
-$grennn: #89dda0;
-$purplee: #78a2ea;
-$lightBluee: #b8d6ff;
-
-$list: bluee pinkk yelloww grennn purplee lightBluee;
-$list1: $bluee $pinkk $yelloww $grennn $purplee $lightBluee;
-%shadow {
-  background: #fff;
-  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
-  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
-  .title {
-    font-size: 14px;
-    padding: 10px;
-    i {
-      margin-#{$right}: 5px;
-    }
-  }
-}
-
-@mixin flex($direction: row, $content: space-between) {
+.container {
   display: flex;
-  flex-direction: $direction;
-  justify-content: $content;
-}
-.card {
-  color: #666;
-  @extend %shadow;
-
-  ul {
-    @include flex;
-    li {
-      flex: 1;
-      a {
-        color: #666666;
-        align-items: center;
-        padding-#{$top}: 20px;
-        padding-#{$bottom}: 20px;
-        @include flex(column);
-        span {
-          height: 44px;
-        }
-        .num {
-          line-height: 44px;
-          font-size: 42px;
-          color: $bluee;
-          margin: 0px;
-        }
+  justify-content: center;
+  align-items: center;
+  padding: 100px 90px 0 50px;
+  .nav-list {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .nav-item {
+      background: #f8f8f8;
+      border-radius: 20px;
+      box-shadow: 3px 3px 3px #aaaaaa59;
+      cursor: pointer;
+      &:hover {
+        background-color: #ededed;
       }
-      .kjfs-bluee {
-        color: $bluee;
+      .icon {
+        width: 110px;
+        height: 110px;
+        border-radius: 50%;
       }
-      .kjfs-pinkk {
-        color: $pinkk;
+      .p1 {
+        font-size: 18px;
+        color: #333;
+        line-height: 18px;
+        margin-bottom: 12px;
+        font-weight: 500;
       }
-      .kjfs-yelloww {
-        color: $yelloww;
+      .p2 {
+        font-size: 14px;
+        color: #999;
       }
-      .kjfs-grennn {
-        color: $grennn;
+    }
+    .item1 {
+      width: calc(50% - 10px);
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+      margin-right: 20px;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      padding: 40px 80px;
+      &:nth-child(2) {
+        margin-right: 0;
       }
-      .kjfs-purplee {
-        color: $purplee;
+      .icon {
+        margin-right: 20px;
       }
-      .kjfs-lightBluee {
-        color: $lightBluee;
+      .text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-top: 10px;
       }
-      &:hover {
-        .kjfs-bluee {
-          color: #ffffff;
-          background: $bluee;
-        }
-        .kjfs-pinkk {
-          color: #ffffff;
-          background: $pinkk;
+      .p2 {
+        line-height: 24px;
+      }
+      &.item-child1 {
+        width: 100%;
+        height: calc(50% - 8px);
+        margin-bottom: 16px;
+        padding: 0 20px;
+        align-items: center;
+        .icon {
+          width: 80px;
+          height: 80px;
         }
-        .kjfs-yelloww {
-          color: #ffffff;
-          background: $yelloww;
+      }
+      &.item-child2 {
+        height: calc(50% - 8px);
+        margin-right: 20px;
+        flex-wrap: wrap;
+        padding: 12px 30px;
+        .icon {
+          width: 60px;
+          height: 60px;
         }
-        .kjfs-grennn {
-          color: #ffffff;
-          background: $grennn;
+        .p1 {
+          flex: 1;
+          line-height: 60px;
+          margin-bottom: 0;
         }
-        .kjfs-purplee {
-          color: #ffffff;
-          background: $purplee;
+        .p2 {
+          width: 100%;
         }
-        .kjfs-lightBluee {
-          color: #ffffff;
-          background: $lightBluee;
+        &:last-of-type {
+          margin-right: 0;
         }
       }
     }
+    .item2 {
+      width: calc(50% - 10px);
+      height: 240px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-right: 20px;
+      box-sizing: border-box;
+      padding: 30px 0;
+      text-align: center;
+      &:last-of-type {
+        margin-right: 0;
+      }
+      .icon {
+        margin-bottom: 20px;
+      }
+      .p2 {
+        line-height: 16px;
+      }
+    }
+    .item3 {
+      width: calc(50% - 10px);
+      height: 240px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .item4 {
+      width: calc(50% - 10px);
+      flex-shrink: 0;
+      display: flex;
+      justify-content: flex-start;
+      margin-right: 20px;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      padding: 40px 80px;
+      &:nth-child(2n) {
+        margin-right: 0;
+      }
+      .icon {
+        margin-right: 20px;
+      }
+      .text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-top: 10px;
+      }
+      .p2 {
+        line-height: 24px;
+      }
+    }
   }
 }
-#lineEcharts {
-  margin-#{$top}: 30px;
-  padding-#{$top}: 30px;
-  @extend %shadow;
-}
 </style>
@@ -2,9 +2,16 @@
   <div>
     <el-aside id="asideNav">
       <div class="logo-name">
-        <img class="logo" src="../../../assets/images/logo.png" alt="">
-        <p >中天易教</p>
-        <img v-if="$store.getters.logoShow" class="logo" src="../../../assets/images/logo.png" alt="">
+        <img
+          v-if="$store.getters.logoShow"
+          class="logo"
+          src="../../../assets/images/logo.png"
+          alt=""
+        />
+        <template v-else>
+          <img class="logo" src="../../../assets/images/logo.png" alt="" />
+          <p>中天易教</p>
+        </template>
       </div>
       <el-menu
         :default-active="$route.path"
@@ -27,7 +34,7 @@
             >
               <template slot="title">
                 <i :class="item.iconCls ? item.iconCls : [fa, fa - server]"></i>
-                <span slot="title">{{item.name}}</span>
+                <span slot="title">{{ item.name }}</span>
               </template>
  
               <menu-tree :menuData="item.children"></menu-tree>
@@ -120,13 +127,13 @@ $right: right;
     align-items: center;
     width: 100%;
     height: 50px;
-    padding:0 16px;
+    padding: 0 16px;
     box-sizing: border-box;
     @extend %w100;
-    .logo{
-      width:24px;
-      height:24px;
-      margin-right:10px;
+    .logo {
+      width: 24px;
+      height: 24px;
+      margin-right: 10px;
     }
     p {
       line-height: 50px;
@@ -2,8 +2,8 @@
   <div>
     <el-header id="header">
       <span class="hideAside" @click="collapse"
-        ><i class="fa fa-indent fa-lg"></i
-      ></span>
+        ><i class="el-icon-s-fold" v-show="!isCollapse"></i>
+        <i class="el-icon-s-unfold" v-show="isCollapse"></i></span>
       <ul class="personal">
         <!-- <li>
           <langSelect></langSelect>
@@ -81,10 +81,12 @@ export default {
       dialogPassVisible: false,
       title: "",
       userId: "",
+      isCollapse:false
     };
   },
   methods: {
     collapse() {
+      this.isCollapse = !this.isCollapse
       this.$store.dispatch("collapse");
     },
     successCallback() {
@@ -122,20 +124,7 @@ export default {
     handleCommand(command) {
       //刷新权限跳转首页
       this.$message("click on item " + command);
-
-      this.$store.dispatch("setInfo", {
-        permissions: [
-          {
-            role: "superAdmin",
-            roleName: "超级管理员",
-          },
-        ],
-        // authorityRouter:[],
-        name: "",
-      });
-      this.$router.push({
-        path: "/index",
-      });
+      this.$store.dispatch("permissions", this);
     },
     logOut() {
       this.$router.push({
@@ -187,8 +176,13 @@ ul.el-menu {
   display: flex;
   justify-content: space-between;
   color: #fff;
+  padding:0 20px 0 10px;
   .hideAside {
     @extend %cursor;
+    i{
+      font-size:24px;
+      line-height: 50px;
+    }
   }
   .personal {
     display: flex;
@@ -198,6 +192,7 @@ ul.el-menu {
       font-size: 12px;
       @extend %cursor;
       position: relative;
+      line-height: 50px;
     }
   }
   .userInfo {
@@ -224,9 +219,11 @@ ul.el-menu {
   .el-icon-rank {
     font-size: 20px;
     transform: rotate(45deg);
+    line-height: 50px;
   }
   .el-icon-switch-button {
     font-size: 18px;
+    line-height: 50px;
   }
   .fa-lg {
     color: #fff;
@@ -48,26 +48,7 @@ export default {
   transition: all 0.3s;
 }
 </style>
-<style lang="scss">
-* {
-  margin: 0px;
-  padding: 0px;
-}
-
-body {
-  background-color: #f2f2f2;
-  font-size: 14px;
-  color: #333333;
-}
-
-li {
-  list-style: none;
-}
-
-a {
-  text-decoration: none;
-}
-
+<style lang="scss" scoped>
 $top: top;
 $bottom: bottom;
 $left: left;
@@ -84,12 +65,7 @@ $leftright: ($left, $right);
 %cursor {
   cursor: pointer;
 }
-html,
-body {
-  overflow: hidden;
-}
-html,
-body,
+
 #loyout,
 .el-container,
 #asideNav,
@@ -104,7 +80,8 @@ ul.el-menu {
 }
  
 #elmain {
-  background-color: #f0f2f5;
+  background-color: #fff;
+  padding:0;
 }
  
 .avatar-uploader .el-upload {
-<template>
-  <div class="cardshadow roleListTable">
-    <div>
-      <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addRole" plain v-role-btn="'btn_100002'">新增</el-button>
-    </div>
-    <el-table
-      :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        type="index">
-      </el-table-column>
-      <el-table-column
-        property="name"
-        label="角色名">
-      </el-table-column>
-      <el-table-column
-        property="describe"
-        label="角色描述">
-      </el-table-column>
-      <el-table-column
-        prop="status"
-        label="状态"
-        filter-placement="bottom-end">
-        <template slot-scope="scope">
-          <el-tag
-            :type="scope.row.status === '启用' ? 'primary' : 'danger'"
-            disable-transitions>{{scope.row.status}}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            :disabled="scope.row.name=='超级管理员'"
-            @click="handleEdit(scope.$index, scope.row)">编辑
-          </el-button>
-          <el-button
-            size="mini"
-            :disabled="scope.row.name=='超级管理员'"
-            @click="roleEdit(scope.$index, scope.row)">权限分配
-          </el-button>
-          <el-button
-            size="mini"
-            type="danger"
-            :disabled="scope.row.name=='超级管理员'"
-            @click="handleDelete(scope.$index, scope.row)">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="角色信息" width="700px" class="dialog1" :visible.sync="dialogFormVisible">
-      <el-form :model="form">
-        <el-form-item label="角色名称" :label-width="formLabelWidth">
-          <el-input v-model="form.name"
-                    maxlength="8"
-                    show-word-limit
-                    autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="角色描述" :label-width="formLabelWidth">
-          <el-input v-model="form.describe"
-                    maxlength="15"
-                    show-word-limit
-                    autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="是否开启" :label-width="formLabelWidth">
-          <el-switch v-model="form.status"></el-switch>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible=false">取 消</el-button>
-        <el-button type="primary" @click="addRoleSubmit">确 定</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog title="权限分配" class="dialog2" @opened="setRoleData" :visible.sync="dialogFormVisible2">
-      <el-input
-        placeholder="输入关键字进行过滤"
-        v-model="filterText"
-        style="margin-bottom: 20px"
-      >
-      </el-input>
-      <el-tree
-        :data="roleTree"
-        node-key="r_id"
-        show-checkbox
-        check-on-click-node
-        default-expand-all
-        check-strictly
-        :expand-on-click-node="false"
-        ref="permission"
-        :filter-node-method="filterNode"
-        :props="defaultProps">
-      </el-tree>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
-        <el-button type="primary" @click="rolePermissionSubmit">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "roleManage",
-  data () {
-    return {
-      tableData: [],
-      dialogFormVisible: false,
-      dialogFormVisible2: false,
-      form: {
-        name: "",
-        describe: "",
-        status: true,
-        permission: []
-      },
-      formLabelWidth: "120px",
-      defaultProps: {
-        children: "children",
-        label: "r_name",
-        id: "r_id"
-      },
-      selectRoleId: "",
-      selectData: [],
-      filterText: ""
-    }
-  },
-  methods: {
-    handleEdit (index, row) {
-      for (let item in row) {
-        this.form[item] = row[item]
-      }
-      this.form.status = row.status === "启用"
-      this.dialogFormVisible = true
-    },
-    addRole () {
-      this.form = {
-        name: "",
-        describe: "",
-        status: true
-      }
-      this.dialogFormVisible = true
-    },
-    addRoleSubmit () {
-      let that = this
-      if (!this.form.name) {
-        that.$message({
-          showClose: true,
-          message: "角色名称不能为空",
-          type: "error"
-        })
-        return false
-      }
-      this.$request.fetchAddRole(this.form).then((res) => {
-        that.$message({
-          showClose: true,
-          message: res.data.message,
-          type: "success"
-        })
-        this.dialogFormVisible = false
-        this.getList()
-      }).catch((err) => {
-        console.log(err)
-      })
-    },
-    rolePermissionSubmit () {
-      let that = this
-      let rolePermissionData = {
-        selectPermission: that.$refs.permission.getCheckedKeys(),
-        rid: that.selectRoleId
-      }
-      this.$request.fetchRolePermissions(rolePermissionData).then(res => {
-        that.$restBack(res.data, () => {
-          that.dialogFormVisible2 = false
-          that.getList()
-        })
-      }).catch((err) => {
-        console.log(err)
-      })
-    },
-    roleEdit (index, row) {
-      console.log(index, row)
-      this.selectRoleId = row.id
-      this.selectData = row.permission ? row.permission.split(",") : []
-      this.dialogFormVisible2 = true
-    },
-    setRoleData () {
-      this.$request.fetchSearchRolePermissions({rid: this.selectRoleId}).then(res => {
-        this.$refs.permission.setCheckedKeys([])
-        let permissionData = res.data.data.permissionPage + "," + res.data.data.permissionButton
-        this.$refs.permission.setCheckedKeys(permissionData.split(","))
-      })
-    },
-    handleDelete (index, row) {
-      let that = this
-      this.$request.fetchDelRole({
-        id: row.id
-      })
-        .then(response => {
-          console.log(response)
-          that.$message({
-            showClose: true,
-            message: response.data.message,
-            type: "success"
-          })
-          that.getList()
-        })
-        .catch(err => {
-          console.log(err)
-        })
-    },
-    getList () {
-      let that = this
-      this.$request.fetchGetRoleList()
-        .then(function (response) {
-          console.log(response)
-          for (let i = 0; i < response.data.rows.length; i++) {
-            if (response.data.rows[i].status) {
-              response.data.rows[i].status = "启用"
-            } else {
-              response.data.rows[i].status = "禁用"
-            }
-          }
-          that.tableData = response.data.rows
-        })
-        .catch(function (error) {
-          console.log(error)
-        })
-    },
-    filterNode (value, data) {
-      if (!value) return true
-      return data.r_name.indexOf(value) !== -1
-    }
-  },
-  watch: {
-    filterText (val) {
-      this.$refs.permission.filter(val)
-    }
-  },
-  computed: {
-    roleTree: function () {
-      let roleData = this.$store.getters.roleData
-      for (let i = 0; i < roleData.length; i++) {
-        if (roleData[i].redirect === "/404") {
-          roleData.splice(i, 1)
-        }
-      }
-      return roleData
-    }
-  },
-  mounted () {
-    this.getList()
-  }
-}
-</script>
-
-<style scoped>
-  .nameinput {
-    width: 150px;
-  }
-
-  .phoneinput {
-    width: 120px;
-  }
-
-  .datepicker {
-    width: 260px;
-  }
-  .dialog1 .el-dialog {
-    width: 35%;
-  }
-
-  .dialog1 .el-dialog .el-form {
-    width: 500px;
-    margin: 0 auto;
-  }
-
-  .el-form-item__content {
-    margin-left: 120px;
-    width: 300px;
-  }
-
-</style>
-