页面CSS框架优化，菜单与内容滚动条分离

src/components/exchange/index.vue

 <template>
-  <div class="integral-page">
+  <div class="admin-refresh">
     <el-form ref="searchFrom" :model="form" style="padding-top: 20px;background: white" label-width="100px" size="small" inline>
       <el-form-item label="标题">
         <el-input v-model="form.name"></el-input>

src/components/framework/index.vue

@@ -3,20 +3,22 @@
     <el-header>
       <head-index/>
     </el-header>
-    <el-container>
-      <el-main>
-        <transition name="el-fade-in">
-          <div class="menu-block">
-            <left-menu/>
-          </div>
-        </transition>
-        <div class="content">
+    <el-container class="refresh-container">
+      <!--<el-main>-->
+      <transition name="el-fade-in">
+        <div class="menu-block">
+          <left-menu/>
+        </div>
+      </transition>
+      <!--<div class="content">-->
+        <el-container class="content">
           <div class="router-block">
             <!--<tab/>-->
-                <router-view class="child-view" v-loading="$store.state.mainLoad"/>
+            <router-view class="child-view" v-loading="$store.state.mainLoad"/>
           </div>
-        </div>
-      </el-main>
+        </el-container>
+      <!--</div>-->
+      <!--</el-main>-->
     </el-container>
   </el-container>
 </template>
@@ -26,10 +28,10 @@
   // import tab from './tab'
   export default {
     components: {leftMenu, headIndex},
-    data(){
+    data() {
       return {
         transitionName: 'slide-left',
-        menuList:this.$store.state.menuList
+        menuList: this.$store.state.menuList
       }
     },
     computed: {
@@ -42,16 +44,43 @@
 
 <style lang="less">
   @import "../../util/public";
-  .el-header{
+
+  .el-header {
     background: #333333;
     color: white;
   }
-  .el-main{
+
+  .refresh-container {
+    height: calc(100% - 60px);
+
+    .content {
+      display: flex;
+      height: 100%;
+
+      .router-block {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .child-view {
+          box-sizing: border-box;
+          overflow-y: auto;
+          height: 100%;
+          /*height: calc(100% - 40px);
+          width: 100%;
+          overflow-y: auto;*/
+        }
+      }
+    }
+  }
+
+  .el-main {
     margin: 0;
     padding: 0;
     background: #f8f8f8;
 
-    .menu-block{
+    .menu-block {
+      flex-shrink: 0;
       float: left;
       height: 100%;
       background-color: #333333;
@@ -63,22 +92,10 @@
       bottom: 0;
       z-index: 10;*/
     }
-    .content{
-      display: flex;
-      height: 100%;
-      .router-block{
-        width: 100%;
-        height: 100%;
-        position: relative;
-        .child-view{
-          /*height: calc(100% - 40px);
-          width: 100%;
-          overflow-y: auto;*/
-        }
-      }
-    }
+
   }
-  .main-container{
+
+  .main-container {
     height: 100%;
   }
 </style>

src/components/framework/leftMenu.vue

@@ -7,7 +7,7 @@
     background-color="#333333"
     active-text-color="#ffd04b"
     :collapse="menuType"
-    class="el-menu-vertical-demo">
+    class="menu-refresh">
     <div class="menu-btn" @click="menuType = !menuType">
       <i v-if="!menuType" class="iconfont icon-shouqi"></i>
       <i v-if="menuType" class="iconfont icon-zhankai"></i>
@@ -20,72 +20,85 @@
       <template v-for="(item,i) in data.list">
         <el-menu-item
           v-if="!item.hidden" class="item"
-          :index="item.path" :key="i">{{item.value}}</el-menu-item>
+          :index="item.path" :key="i">{{item.value}}
+        </el-menu-item>
       </template>
     </el-submenu>
   </el-menu>
 </template>
 
 <script>
-export default {
-  name: "leftMenu",
-  data() {
-    return {
-      menuList: this.$store.state.menuList,
-      menuType: false
-    };
-  },
-  mounted() {
-    // console.log(this.menuList);
-  },
-  methods: {
-    changeMenuType: function() {
-      this.$store.state.menuType = !this.$store.state.menuType;
+  export default {
+    name: "leftMenu",
+    data() {
+      return {
+        menuList: this.$store.state.menuList,
+        menuType: false
+      };
     },
-    toPath: function(data) {
-      this.$router.push({ name: data.routerName });
-      if (this.$store.state.openedTab.indexOf(data) < 0) {
-        this.$store.state.openedTab.push(data);
+    mounted() {
+      // console.log(this.menuList);
+    },
+    methods: {
+      changeMenuType: function () {
+        this.$store.state.menuType = !this.$store.state.menuType;
+      },
+      toPath: function (data) {
+        this.$router.push({name: data.routerName});
+        if (this.$store.state.openedTab.indexOf(data) < 0) {
+          this.$store.state.openedTab.push(data);
+        }
       }
     }
-  }
-};
+  };
 </script>
 
-<style scoped lang="less">
-@import "../../util/public";
-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-}
-.el-menu {
-  background: @bg-b;
-  color: white;
-  overflow: auto;
-  height: 100%;
-  .menu-btn {
-    height: 35px;
-    background: @bg-b-s;
-    line-height: 35px;
-    /*text-align: center;*/
-    i {
-      font-size: 26px;
-      float: right;
-      padding: 0 15px;
+<style lang="less">
+  @import "../../util/public";
+
+  .menu-refresh {
+    &:not(.el-menu--collapse) {
+      width: 200px;
     }
-  }
-  .el-submenu {
-    .menu-icon {
+
+    &.el-menu {
+      overflow-x: hidden;
+      overflow-y: auto;
+      box-sizing: border-box;
+      height: 100%;
+      background: @bg-b;
       color: white;
-      font-size: 18px;
-      position: relative;
-      right: 5px;
-    }
-    .el-menu-item {
-      background: @main-font-color;
-    }
-    .template {
-      color: black;
+
+      .menu-btn {
+        width: 100%;
+        height: 35px;
+        background: @bg-b-s;
+        line-height: 35px;
+        /*text-align: center;*/
+
+        i {
+          font-size: 26px;
+          float: right;
+          padding: 0 15px;
+        }
+      }
+
+      .el-submenu {
+        .menu-icon {
+          color: white;
+          font-size: 18px;
+          position: relative;
+          right: 5px;
+        }
+
+        .el-menu-item {
+          background: @main-font-color;
+        }
+
+        .template {
+          color: black;
+        }
+      }
     }
   }
-}
 </style>

src/components/integral/index.vue

 <template>
-  <div class="integral-page">
+  <div class="admin-refresh">
     <el-form
       ref="searchFrom"
       :model="form"

src/components/lesson/index.vue

@@ -181,7 +181,7 @@
   .user{
     /*height: 100%;*/
     /*overflow: auto;*/
-    padding: 20px 0;
+    /*padding: 20px 0;*/
     .btn-content{
       text-align: center;
     }

src/components/noLesson/index.vue

@@ -5,7 +5,7 @@
         <el-button type="success" plain @click="add" v-if="!$store.state.readonly">添加不上课日期</el-button>
       </el-col>
     </el-row>
-    <div class="card">
+    <div class="card" style="margin-bottom: 10px;">
       <el-card :body-style="{ padding: '0px' }" v-for="(currentDate, index) in list" :key="index">
         <span class="time">{{ currentDate }}</span>
         <div class="bottom clearfix">

src/components/qrcode/index.vue

 <template>
-  <div class="qrcode">
-    <el-form label-width="100px" inline="">
+  <div class="admin-refresh">
+    <el-form label-width="100px" inline="" style="padding-top: 10px;">
       <el-form-item label="标题">
         <el-input/>
       </el-form-item>

src/components/subList/index.vue

 <template>
-  <div class="integral-page">
+  <div class="admin-refresh">
     <el-form
       ref="searchFrom"
       :model="searchFrom"

src/components/teacher/growth.vue

@@ -50,7 +50,7 @@
     <el-table
       size="mini"
       :data="userList"
-      height="calc(100vh - 335px)"
+      height="calc(100vh - 322px)"
       style="width: 100%">
       <el-table-column
         prop="name"

src/components/teacher/index.vue

@@ -48,7 +48,7 @@
     <el-table
       size="mini"
       :data="userList"
-      height="calc(100vh - 335px)"
+      height="calc(100vh - 322px)"
       style="width: 100%">
       <el-table-column
         prop="name"

src/components/teacher/userservice.vue

@@ -49,7 +49,7 @@
     <el-table
       size="mini"
       :data="userList"
-      height="calc(100vh - 335px)"
+      height="calc(100vh - 322px)"
       style="width: 100%">
       <el-table-column
         prop="name"