页面修改

src/components/MenuComponent.vue

@@ -1,112 +1,116 @@
 <template>
-  <el-col :span="24" class="mainHeader">
-      <el-col :span="2" class="sishuLogo">
-       <img class="logoImg" src="../assets/img/log.png"/>
-      </el-col>
-      <el-col :span="2" v-for="(item, index) of menuData" :key="item.id"
-      :class="{active:index == checkindex,menu_item:true}"
-      @click.native="secondNavClick(item,index)">
-        <div class="lineStyle"></div>
-        {{item.name}}
-      </el-col>
-       <el-col :span="4" class="userLogo">
-         <div class="">
-            <!-- <div v-html= "'Imgurl' +avatar"></div> -->
-          <img class="userstyle" src="../assets/img/user.jpg"/>
-            <span>{{name}}</span>
-            <img src="../assets/img/pack.png"/>
-         </div>
-      </el-col>
+  <el-col :span="24" class="">
+    <el-col :span="2" :offset="1">
+      <img class="logoImg" src="../assets/img/log.png"/>
+    </el-col>
+    <el-col :span="2" v-for="(item, index) of menuData" :key="item.id"
+            @click.native="secondNavClick(item,index)" style="text-align: center">
+      <span class="lineStyle" :class="{active:index == checkindex,menu_item:true}">{{item.name}}</span>
+
+    </el-col>
+
+    <el-col :span="2"  :offset="13">
+      <div class="">
+        <img class="userstyle" src="../assets/img/user.jpg"/>
+        <span>李老师</span>
+        <i class="el-icon-caret-bottom"></i>
+        <img src="" alt="">
+        <span>退出</span>
+      </div>
+    </el-col>
+    <el-col :span="1"></el-col>
   </el-col>
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
-export default {
-  name: "navMenu",
-  // props: {
-  //   navsData: Array
-  // },
-  data() {
-    return {
-      Imgurl:"https://xt.sharingschool.com/sz",
-      menuData: [ {
-    id: "1",
-    name: "校区管理员",
-    href: "SchoolManager",
-  },
-  {
-    id: "2",
-    name: "批改老师注册审核",
-    href: "TeacherApporval",
-  },
-  {
-    id: "3",
-    name: "批改老师薪酬表",
-    href: "TeacherPay",
-  },
- ],
-      checkindex: 0
-    };
-  },
-  watch: {
-    navsData(n) {
-      this.navsData = n;
-      this.initNav();
-    }
-  },
-  methods: {
-    // 初始化处理
-    // initNav() {
-    //   this.menuData = JSON.parse(JSON.stringify(this.navsData));
+  export default {
+    name: "navMenu",
+    // props: {
+    //   navsData: Array
     // },
-    secondNavClick(val, index) {
-      this.$router.push("/home/" + val.href);
-      this.checkindex = index;
-    }
-  },
-   computed: {
-      ...mapGetters(['name', 'avatar'])
+    data() {
+      return {
+        menuData: [ {
+          id: "1",
+          name: "校区群管理员",
+          href: "SchoolManager",
+        },
+          {
+            id: "2",
+            name: " 在线批改老师",
+            href: "TeacherApporval",
+          },
+          {
+            id: "3",
+            name: "",
+            href: "TeacherPay",
+          },
+        ],
+        checkindex: 0
+      };
     },
-  mounted() {
-    // this.initNav();
-  }
-};
+    watch: {
+      navsData(n) {
+        this.navsData = n;
+        this.initNav();
+      }
+    },
+    methods: {
+      // 初始化处理
+      // initNav() {
+      //   this.menuData = JSON.parse(JSON.stringify(this.navsData));
+      // },
+      secondNavClick(val, index) {
+        this.$router.push("/home/" + val.href);
+        this.checkindex = index;
+      }
+    },
+    mounted() {
+      // this.initNav();
+    }
+  };
 </script>
 <style scoped>
-/* .mainHeader{
-  width: 960px;
-} */
-.menu_item {
-  cursor: pointer;
-  color:#999999; 
-  font-size: 9px;
-  font-family: serif;
-  box-sizing:border-box;
-  height: 90%;
-  text-align:center;
-}
-.menu_item:hover {
-  color:#52CC60 ;
-  border-bottom:2px solid #52cc60;
-}
-.active {
-  color:#52CC60;
-  border-bottom:2px solid #52cc60;
-}
-.menu_item+.menu_item {
-  border-left: 1px solid #ffffff;
-}
-.logoImg{
-  width:80px;
-  height:40px;
-}
-.sishuLogo{
-  margin-left:125px;
-}
-.userstyle{
-  width:26px;
-  height:26px;
-  border-radius: 15px;
-}
+  /*.mainHeader{*/
+  /*height: 110px;*/
+  /*line-height:110px;*/
+  /*}*/
+  .menu_item {
+    cursor: pointer;
+    color:#999999;
+    font-size: 9px;
+    font-family: serif;
+    box-sizing:border-box;
+    height: 80%;
+    text-align:center;
+    padding-bottom:19px ;
+    /*display: inline-block;*/
+  }
+  .menu_item:hover {
+    color:#52CC60 ;
+    border-bottom:2px solid #52cc60;
+  }
+  .active {
+    color:#52CC60 !important;
+    border-bottom:2px solid #52cc60;
+  }
+  .menu_item+.menu_item {
+    border-left: 1px solid #ffffff;
+  }
+  .logoImg{
+    width:136px;
+    height:52px;
+  }
+  .sishuLogo{
+    margin-left:125px;
+  }
+  .userstyle{
+    width:26px;
+    height:26px;
+    border-radius: 15px;
+  }
+  .lineStyle{
+    color: #999999;
+    font-size: 18px;
+  }
 </style>

src/pages/Home.vue

@@ -184,6 +184,9 @@
 </script>
 
 <style scoped>
+  .main_conter{
+    height: 1000px;
+  }
   .out{
     margin-left:10px;
     color:#333333;
@@ -260,7 +263,7 @@
     background-color: #fff;
     box-shadow: 0px 0px 20px #eaeaea;
   }
-  .main_header .el-breadcrumb {
+  .el-breadcrumb {
     line-height: 50px;
   }
   .el-breadcrumb .el-breadcrumb__item {

src/pages/home/SchoolManager.vue

@@ -11,7 +11,7 @@
     <!--</div>-->
 
     <!-- table 表格 -->
-    <el-row :gutter="20" class="main-header" >
+    <el-row :gutter="20" class="main-items" >
       <el-col class="aside" :span="4" :offset="1" style="padding: 0 !important;">
         <div class="table-aside" v-for='(v, k) in ItemList' :key='k' :class="{active:k == checkindex}" @click="selectTitle(k)">{{v.text}}</div>
       </el-col>
@@ -495,12 +495,10 @@
     color: #999999;
     font-size: 18px;
   }
-  .main-header{
+  .main-items{
     color: #393939;
-
     text-align: center;
     line-height: 80px;
-    border-bottom: 1px solid #E5E5E5;
   }
   .main-header-item{
     font-size: 20px;