页面调整

src/components/SuperComponent.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-col :span="24" class="">
+      <el-col :span="2" :offset="2">
+       <img class="logoImg" src="../assets/img/log.png"/>
+      </el-col>
+      <el-col :span="2" v-show="roles.indexOf(item.id) >= 0"  v-for="(item, index) of menuData" :key="item.id"
+      @click.native="secondNavClick(item,index)">
+        <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 {
+      menuData: [ {
+    id: "2",
+    name: "校区管理员",
+    href: "SuperAdmin",
+  },
+  {
+    id: "2",
+    name: " 批改老师注册审核",
+    href: "CheckTeacherAudit",
+  },
+  {
+    id: "2",
+    name: "批改老师薪酬表",
+    href: "CheckTeacherPay",
+  },
+ ],
+      checkindex: 0
+    };
+  },
+  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;
+    }
+  },
+  computed: {
+      ...mapGetters(['name', 'avatar','roles'])
+    },
+  mounted() {
+    // this.initNav();
+  }
+};
+</script>
+<style scoped>
+/*.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/Super.vue

@@ -0,0 +1,290 @@
+<template>
+  <el-row class="height100">
+    <el-col :span="24" class="">
+      <div class="conterLayout">
+        <div class="main_header">
+          <SuperComponent></SuperComponent>
+          <!--<div class="main_header_user">-->
+          <!--<el-dropdown @command="handleCommand">-->
+          <!--<div class="el-dropdown-link" style="position: relative;cursor: pointer;">-->
+          <!--<span style="margin-right:30px; font-size: .14rem;"> {{getUser.name}} </span>-->
+          <!--&lt;!&ndash;<i class="el-icon-caret-right"></i>&ndash;&gt;-->
+          <!--<span class="out">退出</span>-->
+          <!--</div>-->
+          <!--<el-dropdown-menu slot="dropdown">-->
+          <!--<el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>-->
+          <!--<el-dropdown-item command="logDown" divided>退出登录</el-dropdown-item>-->
+          <!--</el-dropdown-menu>-->
+          <!--</el-dropdown>-->
+          <!--</div>-->
+        </div>
+        <div class="main_conter">
+          <router-view></router-view>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script type="es6">
+  import NavMenuComponent from "@/components/NavMenuComponent";
+  import SuperComponent from "@/components/SuperComponent";
+  import UserInfoView from "@/components/UserInfoView";
+  import { mapGetters, mapActions } from "vuex";
+  export default {
+    components: { NavMenuComponent, UserInfoView,SuperComponent },
+    name: "super",
+    data() {
+      return {
+        userImgPath: "",
+        filters: {
+          activitySerachListen: 0,
+          timeFrame: []
+        },
+        filterstwo: {
+          activityMonitoringListen: 0,
+          timeType: "0",
+          timeFrame: []
+        },
+        name: "在线人员管理CRM",
+        userName: "超级管理员",
+        // 菜单相关
+        router: true,
+        navHeight: 0,
+        navsData: [],
+        breadcrumb: "",
+        // 修改密码
+        modifyPwdFormRules: {
+          oldPassword: [
+            { required: true, message: "密码不能为空", trigger: "blur" },
+            { min: 5, message: "密码长度不能小于6", trigger: "blur" },
+            { max: 18, message: "密码长度不能大于18", trigger: "blur" }
+          ],
+          newPassword: [
+            { required: true, message: "新密码不能为空", trigger: "blur" },
+            { min: 5, message: "新密码长度不能小于6", trigger: "blur" },
+            { max: 18, message: "新密码长度不能大于18", trigger: "blur" }
+          ],
+          newPassword2: {
+            validator: (rule, value, callback) => {
+              if (value === "") {
+                callback(new Error("请再次输入密码"));
+              } else if (value !== this.modifyPwdForm.newPassword) {
+                callback(new Error("两次输入密码不一致!"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        },
+        modifyPwdForm: { oldPassword: "", newPassword: "" },
+        userModifyPwdVisible: false,
+        modifyPwdFormLoading: false,
+
+      };
+    },
+    watch: {
+    },
+    computed: {
+      ...mapGetters(["getUser", "getAtivityTimeFrameData"])
+    },
+    // async beforeCreate() {
+    //   let {
+    //     success,
+    //     permissionsMap
+    //   } = await this.$dao.sysDao.findPagePermissions();
+    //   if (success) this.setPagePermissions(permissionsMap);
+    //   // 判断用户是否登录
+    //   if (sessionStorage.user === undefined) {
+    //     this.$router.push("/");
+    //     return this.$message("请先登录!");
+    //   }
+    //   let menuList = this.$dao.sysDao.getMenuList();
+    //   if (menuList.length < 1) {
+    //     this.$router.push("/");
+    //   }
+    //   this.navsData = menuList;
+    //   this.twoMenu = this.$util.twoMenu(menuList);
+    // },
+    methods: {
+      ...mapActions([
+      ]),
+      ...mapGetters([""]),
+      // 修改密码框显示
+      userModifyPwdShow() {
+        const self = this;
+        self.userAddFormLoading = false;
+        self.userModifyPwdVisible = true;
+        self.modifyPwdForm = { oldPassword: "", newPassword: "" };
+      },
+      // 修改密码提交
+      userModifyPwdSubmit() {
+        const self = this;
+        self.$refs.modifyPwdForm.validate(async valid => {
+          if (!valid) return false;
+          self.userAddFormLoading = true;
+          let data = {
+            oldPassword: self.modifyPwdForm.oldPassword,
+            newPassword: self.modifyPwdForm.newPassword
+          };
+          let { success } = await self.$dao.sysDao.userModifyPwd(data);
+          if (success) {
+            self.userModifyPwdVisible = false;
+            self.$util.messageMethod("success", "修改密码成功!");
+          }
+          self.userAddFormLoading = false;
+        });
+      },
+      //  账号管理、退出登录
+      handleCommand(command) {
+        const self = this;
+        if (command === `logDown`) {
+          this.$confirm("您确定退出吗?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(() => {
+              this.$dao.logout();
+              this.$router.replace("/");
+              this.$util.messageMethod("success", "退出成功!");
+              // location.reload()
+            })
+            .catch(() => {
+              // console.log(err)
+              self.$message("已取消操作!");
+            });
+        } else if (command === `modifyPwd`) {
+          // self.$router.replace('/accountManagement')
+          self.userModifyPwdShow();
+        } else if (command === `accountManagement`) {
+          self.$router.replace("/accountManagement");
+        }
+      },
+      //  路由切换
+      // routerDataPath() {
+      //   const path = this.$route.path;
+      //   if (this.dashboard.indexOf(path) !== -1) this.activeName = path;
+      //   if (path !== "/accountManagement") {
+      //     return path;
+      //   } else {
+      //     return "";
+      //   }
+      // }
+    },
+    mounted() {
+      // this.userImgPath = this.getUser.imagePath;
+      this.breadcrumb = this.$route.name;
+      // this.$nextTick(() => {
+      //   this.navHeight =
+      //     document.body.clientHeight - this.$refs.logoUser.offsetHeight;
+      // });
+    }
+  };
+</script>
+
+<style scoped>
+  .main_conter{
+    height: 1000px;
+  }
+  .out{
+    margin-left:10px;
+    color:#333333;
+  }
+  .navlink{
+    float:left;
+    margin-right:24px;
+    color:#999999 ;
+    font-size: 9px;
+  }
+  .menu {
+    /* overflow-y: auto; */
+    position: relative;
+    z-index: 1;
+    background-color: #00253f;
+    box-shadow: 3px 0px 7px #cfcfcf;
+  }
+  .logoUser {
+    position: relative;
+    width: 100%;
+    color: #fff;
+    border-bottom: 1px solid #001625;
+  }
+  .logoImg {
+    padding: 0.2rem;
+  }
+  .logoImg > img {
+    display: inline-block;
+    width: 1.8rem;
+    height: 0.38rem;
+  }
+  .logoImg > h2 {
+    font-size: 0.14rem;
+    color: #82b5d7;
+  }
+  .userImg {
+    display: inline-block;
+    height: 0.9rem;
+    width: 0.9rem;
+    border: 2px solid #00c1de;
+  }
+  .userImg,
+  .userImg > img {
+    border-radius: 50%;
+  }
+  .userTitle > p {
+    margin: 0.1rem 0;
+    font-size: 0.16rem;
+    color: #6e828a;
+  }
+  .userAdmin {
+    display: inline-block;
+    margin-bottom: 0.35rem;
+    padding: 0 0.14rem;
+    height: 0.25rem;
+    background-color: #37bf5b;
+    border-radius: 0.1rem;
+  }
+  .userAdmin > span {
+    font-size: 0.12rem;
+    color: #def0e3;
+    line-height: 0.2rem;
+  }
+  .conterLayout {
+    background-color: #eef1f6;
+    width: 100%;
+    height: 100%;
+  }
+  .main_header {
+    display: flex;
+    position: relative;
+    height: 110px;
+    line-height: 110px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px #eaeaea;
+  }
+  .el-breadcrumb {
+    line-height: 50px;
+  }
+  .el-breadcrumb .el-breadcrumb__item {
+    padding-top: 13px;
+    line-height: 26px;
+    font-size: 18px;
+  }
+  .main_header_user {
+    position: absolute;
+    right: 30px;
+  }
+  .main_header_user .el-dropdown {
+    color: #333333;
+  }
+  .main_header_user .el-icon-caret-right {
+    transform: rotate(43deg);
+    position: absolute;
+    right: 30px;
+    bottom: 16px;
+  }
+  .ativityTimeFrame .el-radio {
+    margin-left: 15px;
+  }
+</style>

src/pages/home/TeacherApporval.vue

@@ -1,454 +1,23 @@
-<!-- 活动解析 -->
 <template>
   <div>
-    <!-- table 表格 -->
-    <el-row :gutter="20" class="main-items" >
-
-      <!--数据监控-->
-      <el-col :span="20" class="main" :offset="2">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="3"><div class="main-header-item" >注册老师数：18人</div></el-col>
-          <el-col :span="3"><div class="main-header-item">活跃老师数：16人</div></el-col>
-          <el-col :span="4"><div class="main-header-item">注册用户数：1128人</div></el-col>
-          <el-col :span="4"><div class="main-header-item">活跃用户数：1008人</div></el-col>
-        </el-row>
-        <el-table
-          :data="dataList"
-          highlight-current-row
-          size="medium"
-          border
-          stripe
-        >
-          <el-table-column
-            label="小组管理员"
-            header-align="center"
-          >
-            <template scope="scope">
-              <img :src="scope.row.img" alt="" class="table-img">
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="names"
-            label="小组人数"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="number"
-            label="老师出勤率"
-            header-align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="time"
-            label="作业批改总份数"
-            header-align="center">
-          </el-table-column>
-          <el-table-column
-            prop="allTime"
-            label="作业批改总张数"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="批改平均用时"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="家长平均评分"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="是否在线"
-            header-align="center"></el-table-column>
-          <el-table-column prop="status" label="" header-align="center" width="250">
-            <template scope="scope">
-              <el-button type="success" plain @click="isShow(1)">小组详情</el-button>
-              <el-button type="success" >管理员详情</el-button>
-            </template>
-          </el-table-column>
-
-        </el-table>
-      </el-col>
-      <!-- 分页显示 -->
-      <!--<el-pagination-->
-      <!--background-->
-      <!--class="all_pagination"-->
-      <!--@size-change="handleSizeChange"-->
-      <!--@current-change="pageChange"-->
-      <!--:page-sizes="[10, 20, 30, 40]"-->
-      <!--:page-size="10"-->
-      <!--layout="total, sizes, prev, pager, next, jumper"-->
-      <!--:total="filters.count">-->
-      <!--</el-pagination>-->
-    </el-row>
-
-    <!--可分配老师-->
-    <div class='showModel' @click="allShowModel(1)" v-if="hiddenModel"></div>
-    <div class='model' v-if="hiddenModel">
-      <div class='model-text'>
-          <div class="model-manager">
-            <div>校区管理员</div>
-            <div><img src="../../assets/img/del@2x.png" alt="" @click="allShowModel(1)"></div>
-          </div>
-        <div class="model-items">
-          <div class="model-items-first">
-            <div>
-              <img src="../../assets/img/user.jpg" alt="" class="model-items-first-img">
-              <div class="model-items-first-left">
-                <div>程歌（在线）</div>
-                <div class="model-items-first-left-down">南方科技大学</div>
-              </div>
-            </div>
-            <div>
-              <el-button type="danger" plain round @click="isShow(2)"><i class="el-icon-bottom"></i><span>降级</span></el-button>
-            </div>
-          </div>
-          <div class="model-items-other model-active">批改科目 : 语文、英语</div>
-          <div class="model-items-other">批改年级 : 1～2年级、3～4年级</div>
-          <div class="model-items-other model-active">可批改时间：<el-button type="info" round>周一</el-button></div>
-          <div class="model-items-other">手机号 : 18832340987</div>
-          <div class="model-items-other model-active-last">上次登录时间 : 2019.05.14 18:02</div>
-        </div>
-
-      </div>
-    </div>
-    <!--所有未批改作业-->
-    <div class='showModel' @click="allShowModel(2)" v-if="isPigai"></div>
-    <div class='model' v-if="isPigai">
-      <div class='model-text'>
-        <div class="model-text-head">
-          <div>是否要将程歌老师降级为普通批改老师？</div>
-        </div>
-        <div>
-          <div class="model-btn-items">是</div>
-          <div>是</div>
-        </div>
-      </div>
-    </div>
+    批改老师
   </div>
 </template>
 <script>
-  import { mapGetters, mapActions } from "vuex";
   export default {
-    components: { },
-    name: "actvResolveLabel",
+    name: "model",
+    components: {},
     props: {},
     data() {
-      return {
-        hiddenModel:false,
-        isPigai:false,
-        ItemList: [
-          {
-            text:'数据监控'
-          },
-          {
-            text:'当天'
-          },
-          {
-            text:'当月'
-          },
-        ],
-        dataList:[
-          {
-            img:'../../assets/img/user.jpg',
-            names:'阿三',
-            number:'3',
-            time:'14:22',
-            allTime:'14:22',
-            rate:'222',
-            status:'22'
-          },
-          {
-            img:'../../assets/img/user.jpg',
-            names:'阿三',
-            number:'3',
-            time:'14:22',
-            allTime:'14:22',
-            rate:'222',
-            status:'22'
-          }
-        ],
-        filters: {
-          actvNm: "",
-          actvCrtUserId: "",
-          actvType: "",
-          actvSmallType: "",
-          // 排序
-          pageNo: 1,
-          pageSize: 10,
-          count: 0,
-          orderField: "",
-          orderAD: ""
-        }
-      };
+      return {};
     },
     watch: {},
-    computed: {
-      ...mapGetters(["getUser"])
-    },
-    methods: {
-      ...mapActions(["setUser"]),
-      selectTitle(k) {
-        console.log(k);
-        this.checkindex = k;
-      },
-      isShow(str){
-        let _this = this;
-        console.log(str)
-        if (str == 1){
-          _this.hiddenModel = true;
-          _this.isPigai = false;
-        } else if (str == 2){
-          _this.isPigai = true;
-          _this.hiddenModel = false;
-        }
-
-      },
-      //关闭弹框
-      allShowModel(str) {
-        let _this = this;
-        if (str == 1){
-          _this.hiddenModel = false;
-        } else if (str == 2){
-          _this.isPigai = false;
-        }
-      },
-      //  输入框按键方法
-      keyCodeMethod(e) {
-        if (e.keyCode === 13) return this.itemListReshow();
-      },
-      expandChange(row, expandRows) {
-        for (let item of expandRows) {
-          if (row === item) {
-            this.expandRowKeys = [row.nodId];
-          }
-        }
-      },
-      // 分页
-      pageChange(val) {
-        this.filters.pageNo = val;
-        this.itemListReshow();
-      },
-      changeDateSlot(dateSlot) {
-        if (dateSlot) {
-          this.filters.startDate = dateSlot[0];
-          this.filters.endDate = dateSlot[1];
-        } else {
-          this.filters.startDate = null;
-          this.filters.endDate = null;
-        }
-      },
-      actvTypeChange(typeList) {
-        switch (typeList.length) {
-          case 1:
-            this.filters.actvType = typeList[0];
-            this.filters.actvSmallType = null;
-            break;
-          case 2:
-            this.filters.actvType = null;
-            this.filters.actvSmallType = typeList[1];
-            break;
-          default:
-            this.filters.actvType = null;
-            this.filters.actvSmallType = null;
-            break;
-        }
-      },
-      handleSizeChange(val) {
-        this.filters.pageSize = val;
-        this.itemListReshow();
-      },
-      // 排序
-      sortChange(sort) {
-        this.filters.orderField = sort.prop;
-        this.filters.orderAD = sort.order != null ? sort.order : "";
-        this.itemListReshow();
-      },
-      clearSearch() {
-        this.filters.actvNm = null;
-        this.filters.actvCrtUserId = null;
-        this.filters.actvType = null;
-        this.filters.actvSmallType = null;
-        this.filtersActvType = [];
-        this.createDateSlot = null;
-      },
-      // 获取创建人列表
-      // async getUserNameList() {
-      //   let {
-      //     userNameList = []
-      //   } = await this.$dao.actv.marketActDao.getUserNameList();
-      //   this.userNameList = userNameList || [];
-      //   let { list = [] } = await this.$dao.bsnsActvTypeAllList();
-      //   this.actvTypeList = list || [];
-      // }
-    },
-    mounted() {
-      // this.getsetDictByType2();
-      // this.getUserNameList();
-      // this.itemListReshow();
-    }
+    computed: {},
+    methods: {},
+    mounted() {}
   };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-  .main{
-    background-color: #fff;
-    margin-top: 16px;
-    padding: 0 !important;
-    border: 1px solid #E1E1E1;
-    min-height: 980px;
-  }
-  .table-aside{
-    color: #666666;
-    font-size: 18px;
-    text-align: center;
-    line-height: 60px;
-  }
-  el-table{
-    color: #999999;
-    font-size: 18px;
-  }
-  .main-items{
-    color: #393939;
-    text-align: center;
-    line-height: 80px;
-  }
-  .main-header-item{
-    font-size: 16px;
-    color: #7E7E7E;
-  }
-  .main-header-link{
-    color: #52CC60;
-    font-size: 18px;
-    margin-left: 10px;
-    text-decoration:underline
-  }
-  .el-select{
-    width: 100px;
-    margin: 0 5px;
-  }
-  .input-with-select .el-input-group__prepend {
-    background-color: #fff;
-  }
-  .active{
-    background-color: #52CC60;
-    color: #fff;
-  }
-  .el-input__inner{
-    height: 32px;
-  }
-  .cell{
-    font-size: 18px !important;
-  }
-  .table-img{
-    width:36px;
-    height:36px;
-    border-radius:6px;
-  }
-  .showModel{
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #000000;
-    opacity: 0.2;
-    overflow: hidden;
-    z-index: 1000;
-    color: #fff;
-
-  }
-  .model{
-    z-index: 1001;
-    width:40%;
-    height:auto;
-    position: fixed;
-    top: 30%;
-    left: 30%;
-    margin:auto;
-    background: #fff;
-    border-radius:30px;
-    text-align: center;
-  }
-
-  .model-items-first{
-    padding: 0 34px;
-    display: flex;
-    justify-content: space-between;
-  }
-  .model-items-first-img{
-    width: 68px;
-    height: 68px;
-    border-radius: 8px;
-    position: relative;
-    bottom: 20px;
-  }
-  .model-items-first-left{
-    display: inline-block;
-    color: #393939;
-    font-size: 24px;
-    margin-left: 14px;
-    text-align: left;
-  }
-  .model-items-first-left-down{
-    color: #7E7E7E;
-    font-size: 18px;
-  }
-  .model-text{
-    background:rgba(255,255,255,1);
-    border-radius:10px;
-  }
-  .model-items-other{
-    height: 60px;
-    line-height: 60px;
-    color: #393939;
-    font-size: 20px;
-    text-align: left;
-    padding: 0 34px;
-  }
-  .model-active{
-    background-color: #F6F7FB;
-  }
-  .model-active-last{
-    border-radius:0 0 30px 30px;
-    background-color: #F6F7FB;
-  }
-  .model-text-head{
-    padding: 40px 50px;
-    display: flex;
-    color: #393939;
-    font-size: 24px;
-    justify-content: space-between;
-  }
-  .model-manager{
-    display: flex;
-    justify-content: space-between;
-    margin: 30px;
-    color: #393939;
-    font-size: 24px;
-  }
-  .model-btn{
-    display: flex;
-    justify-content: space-around;
-  }
-  .model-btn-items{
-    width:154px;
-    height:50px;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
-    border-radius:4px;
-  }
-  .main-gay{
-    background:rgba(246,247,251,1);
-    color: #7E7E7E;
-  }
-  .model-grdeen{
-    background-color: #52CC60;
-    color: #fff;
-  }
-
 </style>

src/pages/super/CheckTeacherAudit.vue

@@ -3,35 +3,19 @@
   <div>
     <!-- table 表格 -->
     <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>
+
       <!--数据监控-->
-      <el-col :span="18" class="main" v-if="checkindex == 0">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="3"><div class="main-header-item" @click="isShow(1)">在线：6人</div></el-col>
-          <el-col :span="3"><div class="main-header-item" @click="isShow(2)">离线：26人</div></el-col>
-          <el-col :span="5"><div class="main-header-item"><span>分配未批改作业：4份</span><a href="" class="main-header-link" >去分配</a></div></el-col>
-          <el-col :span="10" :offset="3">
-            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-        </el-row>
+      <el-col :span="20" class="main" :offset="2">
+
         <el-table
           :data="dataList"
           highlight-current-row
-          size="mini"
+          size="medium"
+          border
           stripe
         >
           <el-table-column
-            label="头像"
+            label="注册老师"
             header-align="center"
           >
             <template scope="scope">
@@ -40,186 +24,36 @@
           </el-table-column>
           <el-table-column
             prop="names"
-            label="姓名"
+            label="学校"
             header-align="center"
           >
           </el-table-column>
           <el-table-column
             prop="number"
-            label="等待学生数"
+            label="批改科目"
             header-align="center"
           ></el-table-column>
           <el-table-column
             prop="time"
-            label="作业最长等待时长"
+            label="批改年级"
             header-align="center">
           </el-table-column>
           <el-table-column
             prop="allTime"
-            label="累计批改时间"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="响应速度"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="状态"
-            header-align="center"></el-table-column>
-
-        </el-table>
-      </el-col>
-      <!--当天-->
-      <el-col :span="18" class="main" v-if="checkindex == 1">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="5"><div class="main-header-item" @click="isShow(1)">今日报错总次数:：6人</div></el-col>
-          <el-col :span="10" :offset="5">
-            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-          <el-col :span="4">
-            <i class="el-icon-d-arrow-left"></i>
-            <span class="today-time">2019-02-04</span>
-            <i class="el-icon-d-arrow-right"></i>
-          </el-col>
-        </el-row>
-        <el-table
-          :data="dataList"
-          highlight-current-row
-          size="mini"
-          stripe
-        >
-          <el-table-column
-            label="头像"
+            label="可批改时间"
             header-align="center"
           >
             <template scope="scope">
-              <img :src="scope.row.img" alt="" class="table-img">
+              <el-button type="info" round>周一</el-button>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="names"
-            label="姓名"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="number"
-            label="被报错"
-            header-align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="time"
-            label="科目"
-            header-align="center">
-          </el-table-column>
-          <el-table-column
-            prop="allTime"
-            label="批改总份数"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="批改总张数"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="平均批改时间"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="出勤"
-            header-align="center"></el-table-column>
 
-        </el-table>
-      </el-col>
-      <!--当月-->
-      <el-col :span="18" class="main" v-if="checkindex == 2">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="5"><div class="main-header-item" @click="isShow(1)">当月报错总次数：6人</div></el-col>
-          <el-col :span="10" :offset="5">
-            <el-input placeholder="请输入老师" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-          <el-col :span="4">
-            <i class="el-icon-d-arrow-left"></i>
-            <span class="today-time">2019-02-04</span>
-            <i class="el-icon-d-arrow-right"></i>
-          </el-col>
-        </el-row>
-        <el-table
-          :data="dataList"
-          highlight-current-row
-          size="mini"
-          stripe
-        >
-          <el-table-column
-            label="头像"
-            header-align="center"
-          >
+          <el-table-column prop="status" label="" header-align="center" width="250">
             <template scope="scope">
-              <img :src="scope.row.img" alt="" class="table-img">
+              <el-button type="danger" @click="isShow(2)">不通过</el-button>
+              <el-button type="primary" @click="isShow(1)">通过</el-button>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="names"
-            label="姓名"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="number"
-            label="被报错"
-            header-align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="time"
-            label="科目"
-            header-align="center">
-          </el-table-column>
-          <el-table-column
-            prop="allTime"
-            label="批改总份数"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="批改总张数"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="正确率"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="满意度"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="平均批改时间"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="出勤率"
-            header-align="center"></el-table-column>
 
         </el-table>
       </el-col>
@@ -236,68 +70,32 @@
       <!--</el-pagination>-->
     </el-row>
 
-    <!--可分配老师-->
+    <!--是否通过-->
     <div class='showModel' @click="allShowModel(1)" v-if="hiddenModel"></div>
     <div class='model' v-if="hiddenModel">
       <div class='model-text'>
-        <div class="model-text-head">
-          <div>可分配老师</div>
-          <div>二年级数学</div>
+        <div class="model-text-items">
+          <div><img src="../../assets/img/del@2x.png" alt="" @click="allShowModel(2)" class="model-text-items-close"></div>
+          <div>是否要通过颜如玉老师的注册申请？</div>
         </div>
-        <div class="model-items">
-          <div class="model-items-left">
-            <div class="model-items-left-top">
-              <div>
-                <img src="../../assets/img/user.jpg" alt="" class="model-items-left-top-img">
-                <div style="display: inline-block">
-                  <div style="font-size: 24px">李大柱</div>
-                  <div class="model-items-left-top-number">等待学生：0</div>
-                </div>
-              </div>
-              <div> <el-button type="success">分配</el-button></div>
-            </div>
-          </div>
-          <div class="model-items-left">
-            <div class="model-items-left-top">
-              <div>
-                <img src="../../assets/img/user.jpg" alt="" class="model-items-left-top-img">
-                <div style="display: inline-block">
-                  <div style="font-size: 24px">李大柱</div>
-                  <div class="model-items-left-top-number">等待学生：0</div>
-                </div>
-              </div>
-              <div> <el-button type="success">分配</el-button></div>
-            </div>
-          </div>
+        <div class="model-btn">
+          <div class="model-btn-items main-gay">是</div>
+          <div class="model-btn-items model-grdeen">否</div>
         </div>
-
       </div>
     </div>
-    <!--所有未批改作业-->
+    <!--是否驳回-->
     <div class='showModel' @click="allShowModel(2)" v-if="isPigai"></div>
     <div class='model' v-if="isPigai">
       <div class='model-text'>
-        <div class="model-text-head">
-          <div>所有未批改作业</div>
+        <div class="model-text-items">
+          <div><img src="../../assets/img/del@2x.png" alt="" @click="allShowModel(2)" class="model-text-items-close"></div>
+          <div>是否要驳回颜如玉老师的注册申请？</div>
+        </div>
+        <div class="model-btn">
+          <div class="model-btn-items main-gay">是</div>
+          <div class="model-btn-items model-grdeen">否</div>
         </div>
-        <el-table
-          :data="tableData"
-          style="width: 100%">
-          <el-table-column
-            prop="date"
-            label="日期"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="name"
-            label="姓名"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="address"
-            label="地址">
-          </el-table-column>
-        </el-table>
       </div>
     </div>
   </div>
@@ -310,7 +108,6 @@
     props: {},
     data() {
       return {
-        checkindex: 0,
         hiddenModel:false,
         isPigai:false,
         ItemList: [
@@ -373,8 +170,10 @@
         console.log(str)
         if (str == 1){
           _this.hiddenModel = true;
+          _this.isPigai = false;
         } else if (str == 2){
           _this.isPigai = true;
+          _this.hiddenModel = false;
         }
 
       },
@@ -466,15 +265,13 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-  .aside{
-    background-color: #fff;
-    margin-top: 16px;
-    padding: 0;
-  }
+
   .main{
     background-color: #fff;
-    margin: 16px;
+    margin-top: 16px;
     padding: 0 !important;
+    border: 1px solid #E1E1E1;
+    min-height: 980px;
   }
   .table-aside{
     color: #666666;
@@ -492,7 +289,8 @@
     line-height: 80px;
   }
   .main-header-item{
-    font-size: 20px;
+    font-size: 16px;
+    color: #7E7E7E;
   }
   .main-header-link{
     color: #52CC60;
@@ -537,19 +335,59 @@
   }
   .model{
     z-index: 1001;
-    width:854px;
+    width:40%;
     height:auto;
-    position: relative;
-    /*right: auto;*/
+    position: fixed;
+    top: 30%;
+    left: 30%;
     margin:auto;
     background: #fff;
     border-radius:30px;
     text-align: center;
   }
+
+  .model-items-first{
+    padding: 0 34px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .model-items-first-img{
+    width: 68px;
+    height: 68px;
+    border-radius: 8px;
+    position: relative;
+    bottom: 20px;
+  }
+  .model-items-first-left{
+    display: inline-block;
+    color: #393939;
+    font-size: 24px;
+    margin-left: 14px;
+    text-align: left;
+  }
+  .model-items-first-left-down{
+    color: #7E7E7E;
+    font-size: 18px;
+  }
   .model-text{
     background:rgba(255,255,255,1);
     border-radius:10px;
   }
+  .model-items-other{
+    height: 60px;
+    line-height: 60px;
+    color: #393939;
+    font-size: 20px;
+    text-align: left;
+    padding: 0 34px;
+  }
+  .model-active{
+    background-color: #F6F7FB;
+  }
+  .model-active-last{
+    border-radius:0 0 30px 30px;
+    background-color: #F6F7FB;
+  }
   .model-text-head{
     padding: 40px 50px;
     display: flex;
@@ -557,36 +395,44 @@
     font-size: 24px;
     justify-content: space-between;
   }
-  .model-items-left{
-    width: 45%;
+  .model-manager{
+    display: flex;
+    justify-content: space-between;
+    margin: 30px;
     color: #393939;
     font-size: 24px;
   }
-  .model-items-left-top{
-    display: flex;;
-    justify-content: space-between;
-
-  }
-  .model-items{
-    padding: 0 50px 10px 50px;
-    display: flex;;
-    justify-content: space-between;
-  }
-  .model-items-left-top-img{
-    width:68px;
-    height:68px;
-    border-radius:8px;
-    position: relative;
-    bottom: 25px;
+  .model-btn{
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 44px;
   }
-  .model-items-left-top-number{
-    color: #7E7E7E;
+  .model-btn-items{
+    width:154px;
+    height:50px;
+    line-height: 50px;
+    text-align: center;
     font-size: 18px;
-    margin-left: 10px;
+    border-radius:4px;
   }
-  .today-time{
+  .main-gay{
+    background:rgba(246,247,251,1);
     color: #7E7E7E;
-    font-size: 18px;
-    margin: 0 20px;
+  }
+  .model-grdeen{
+    background-color: #52CC60;
+    color: #fff;
+  }
+  .model-text-items-close{
+    position: absolute;
+    top: 10px;
+    right: 15px;
+  }
+  .model-text-items{
+    position: relative;
+    color: #000000;
+    font-size: 24px;
+    text-align: center;
+    padding: 40px 0 50px 0;
   }
 </style>

src/pages/super/CheckTeacherPay.vue

@@ -3,103 +3,31 @@
   <div>
     <!-- table 表格 -->
     <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>
-      <!--数据监控-->
-      <el-col :span="18" class="main" v-if="checkindex == 0">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="3"><div class="main-header-item" @click="isShow(1)">在线：6人</div></el-col>
-          <el-col :span="3"><div class="main-header-item" @click="isShow(2)">离线：26人</div></el-col>
-          <el-col :span="5"><div class="main-header-item"><span>分配未批改作业：4份</span><a href="" class="main-header-link" >去分配</a></div></el-col>
-          <el-col :span="10" :offset="3">
-            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-        </el-row>
-        <el-table
-          :data="dataList"
-          highlight-current-row
-          size="mini"
-          stripe
-        >
-          <el-table-column
-            label="头像"
-            header-align="center"
-          >
-            <template scope="scope">
-              <img :src="scope.row.img" alt="" class="table-img">
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="names"
-            label="姓名"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="number"
-            label="等待学生数"
-            header-align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="time"
-            label="作业最长等待时长"
-            header-align="center">
-          </el-table-column>
-          <el-table-column
-            prop="allTime"
-            label="累计批改时间"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="响应速度"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="状态"
-            header-align="center"></el-table-column>
 
-        </el-table>
-      </el-col>
-      <!--当天-->
-      <el-col :span="18" class="main" v-if="checkindex == 1">
+      <!--数据监控-->
+      <el-col :span="20" class="main" :offset="2">
         <el-row :gutter="20" class="main-header">
-          <el-col :span="5"><div class="main-header-item" @click="isShow(1)">今日报错总次数:：6人</div></el-col>
-          <el-col :span="10" :offset="5">
-            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-          <el-col :span="4">
+          <el-col :span="3"><div class="main-header-item" >
             <i class="el-icon-d-arrow-left"></i>
-            <span class="today-time">2019-02-04</span>
+              <span>2018-12</span>
             <i class="el-icon-d-arrow-right"></i>
+          </div></el-col>
+          <el-col :span="4" :offset="17">
+            <div class="main-header-item">
+              <i class="el-icon-printer"></i>
+              <span>导出表表格</span>
+            </div>
           </el-col>
         </el-row>
         <el-table
           :data="dataList"
           highlight-current-row
-          size="mini"
+          size="medium"
+          border
           stripe
         >
           <el-table-column
-            label="头像"
+            label="注册老师"
             header-align="center"
           >
             <template scope="scope">
@@ -108,118 +36,28 @@
           </el-table-column>
           <el-table-column
             prop="names"
-            label="姓名"
+            label="1～2年级0.6元/份"
             header-align="center"
           >
           </el-table-column>
           <el-table-column
             prop="number"
-            label="被报错"
+            label="3～4年级0.8元/份"
             header-align="center"
           ></el-table-column>
           <el-table-column
             prop="time"
-            label="科目"
+            label="5～6年级1.2元/份"
             header-align="center">
           </el-table-column>
           <el-table-column
             prop="allTime"
-            label="批改总份数"
+            label="总计"
             header-align="center"
+            width="250"
           >
           </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="批改总张数"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="平均批改时间"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="出勤"
-            header-align="center"></el-table-column>
 
-        </el-table>
-      </el-col>
-      <!--当月-->
-      <el-col :span="18" class="main" v-if="checkindex == 2">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="5"><div class="main-header-item" @click="isShow(1)">当月报错总次数：6人</div></el-col>
-          <el-col :span="10" :offset="5">
-            <el-input placeholder="请输入老师" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-          <el-col :span="4">
-            <i class="el-icon-d-arrow-left"></i>
-            <span class="today-time">2019-02-04</span>
-            <i class="el-icon-d-arrow-right"></i>
-          </el-col>
-        </el-row>
-        <el-table
-          :data="dataList"
-          highlight-current-row
-          size="mini"
-          stripe
-        >
-          <el-table-column
-            label="头像"
-            header-align="center"
-          >
-            <template scope="scope">
-              <img :src="scope.row.img" alt="" class="table-img">
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="names"
-            label="姓名"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="number"
-            label="被报错"
-            header-align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="time"
-            label="科目"
-            header-align="center">
-          </el-table-column>
-          <el-table-column
-            prop="allTime"
-            label="批改总份数"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="批改总张数"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="正确率"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="满意度"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="平均批改时间"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="出勤率"
-            header-align="center"></el-table-column>
 
         </el-table>
       </el-col>
@@ -236,68 +74,19 @@
       <!--</el-pagination>-->
     </el-row>
 
-    <!--可分配老师-->
-    <div class='showModel' @click="allShowModel(1)" v-if="hiddenModel"></div>
-    <div class='model' v-if="hiddenModel">
-      <div class='model-text'>
-        <div class="model-text-head">
-          <div>可分配老师</div>
-          <div>二年级数学</div>
-        </div>
-        <div class="model-items">
-          <div class="model-items-left">
-            <div class="model-items-left-top">
-              <div>
-                <img src="../../assets/img/user.jpg" alt="" class="model-items-left-top-img">
-                <div style="display: inline-block">
-                  <div style="font-size: 24px">李大柱</div>
-                  <div class="model-items-left-top-number">等待学生：0</div>
-                </div>
-              </div>
-              <div> <el-button type="success">分配</el-button></div>
-            </div>
-          </div>
-          <div class="model-items-left">
-            <div class="model-items-left-top">
-              <div>
-                <img src="../../assets/img/user.jpg" alt="" class="model-items-left-top-img">
-                <div style="display: inline-block">
-                  <div style="font-size: 24px">李大柱</div>
-                  <div class="model-items-left-top-number">等待学生：0</div>
-                </div>
-              </div>
-              <div> <el-button type="success">分配</el-button></div>
-            </div>
-          </div>
-        </div>
 
-      </div>
-    </div>
-    <!--所有未批改作业-->
+    <!--弹框-->
     <div class='showModel' @click="allShowModel(2)" v-if="isPigai"></div>
     <div class='model' v-if="isPigai">
       <div class='model-text'>
-        <div class="model-text-head">
-          <div>所有未批改作业</div>
+        <div class="model-text-items">
+          <div><img src="../../assets/img/del@2x.png" alt="" @click="allShowModel(2)" class="model-text-items-close"></div>
+          <div>是否要驳回颜如玉老师的注册申请？</div>
+        </div>
+        <div class="model-btn">
+          <div class="model-btn-items main-gay">是</div>
+          <div class="model-btn-items model-grdeen">否</div>
         </div>
-        <el-table
-          :data="tableData"
-          style="width: 100%">
-          <el-table-column
-            prop="date"
-            label="日期"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="name"
-            label="姓名"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="address"
-            label="地址">
-          </el-table-column>
-        </el-table>
       </div>
     </div>
   </div>
@@ -310,7 +99,6 @@
     props: {},
     data() {
       return {
-        checkindex: 0,
         hiddenModel:false,
         isPigai:false,
         ItemList: [
@@ -373,8 +161,10 @@
         console.log(str)
         if (str == 1){
           _this.hiddenModel = true;
+          _this.isPigai = false;
         } else if (str == 2){
           _this.isPigai = true;
+          _this.hiddenModel = false;
         }
 
       },
@@ -466,15 +256,13 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-  .aside{
-    background-color: #fff;
-    margin-top: 16px;
-    padding: 0;
-  }
+
   .main{
     background-color: #fff;
-    margin: 16px;
+    margin-top: 16px;
     padding: 0 !important;
+    border: 1px solid #E1E1E1;
+    min-height: 980px;
   }
   .table-aside{
     color: #666666;
@@ -492,7 +280,8 @@
     line-height: 80px;
   }
   .main-header-item{
-    font-size: 20px;
+    font-size: 16px;
+    color: #7E7E7E;
   }
   .main-header-link{
     color: #52CC60;
@@ -537,19 +326,59 @@
   }
   .model{
     z-index: 1001;
-    width:854px;
+    width:40%;
     height:auto;
-    position: relative;
-    /*right: auto;*/
+    position: fixed;
+    top: 30%;
+    left: 30%;
     margin:auto;
     background: #fff;
     border-radius:30px;
     text-align: center;
   }
+
+  .model-items-first{
+    padding: 0 34px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .model-items-first-img{
+    width: 68px;
+    height: 68px;
+    border-radius: 8px;
+    position: relative;
+    bottom: 20px;
+  }
+  .model-items-first-left{
+    display: inline-block;
+    color: #393939;
+    font-size: 24px;
+    margin-left: 14px;
+    text-align: left;
+  }
+  .model-items-first-left-down{
+    color: #7E7E7E;
+    font-size: 18px;
+  }
   .model-text{
     background:rgba(255,255,255,1);
     border-radius:10px;
   }
+  .model-items-other{
+    height: 60px;
+    line-height: 60px;
+    color: #393939;
+    font-size: 20px;
+    text-align: left;
+    padding: 0 34px;
+  }
+  .model-active{
+    background-color: #F6F7FB;
+  }
+  .model-active-last{
+    border-radius:0 0 30px 30px;
+    background-color: #F6F7FB;
+  }
   .model-text-head{
     padding: 40px 50px;
     display: flex;
@@ -557,36 +386,44 @@
     font-size: 24px;
     justify-content: space-between;
   }
-  .model-items-left{
-    width: 45%;
+  .model-manager{
+    display: flex;
+    justify-content: space-between;
+    margin: 30px;
     color: #393939;
     font-size: 24px;
   }
-  .model-items-left-top{
-    display: flex;;
-    justify-content: space-between;
-
-  }
-  .model-items{
-    padding: 0 50px 10px 50px;
-    display: flex;;
-    justify-content: space-between;
-  }
-  .model-items-left-top-img{
-    width:68px;
-    height:68px;
-    border-radius:8px;
-    position: relative;
-    bottom: 25px;
+  .model-btn{
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 44px;
   }
-  .model-items-left-top-number{
-    color: #7E7E7E;
+  .model-btn-items{
+    width:154px;
+    height:50px;
+    line-height: 50px;
+    text-align: center;
     font-size: 18px;
-    margin-left: 10px;
+    border-radius:4px;
   }
-  .today-time{
+  .main-gay{
+    background:rgba(246,247,251,1);
     color: #7E7E7E;
-    font-size: 18px;
-    margin: 0 20px;
+  }
+  .model-grdeen{
+    background-color: #52CC60;
+    color: #fff;
+  }
+  .model-text-items-close{
+    position: absolute;
+    top: 10px;
+    right: 15px;
+  }
+  .model-text-items{
+    position: relative;
+    color: #000000;
+    font-size: 24px;
+    text-align: center;
+    padding: 40px 0 50px 0;
   }
 </style>

src/pages/super/SuperAdmin.vue

@@ -3,103 +3,24 @@
   <div>
     <!-- table 表格 -->
     <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>
-      <!--数据监控-->
-      <el-col :span="18" class="main" v-if="checkindex == 0">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="3"><div class="main-header-item" @click="isShow(1)">在线：6人</div></el-col>
-          <el-col :span="3"><div class="main-header-item" @click="isShow(2)">离线：26人</div></el-col>
-          <el-col :span="5"><div class="main-header-item"><span>分配未批改作业：4份</span><a href="" class="main-header-link" >去分配</a></div></el-col>
-          <el-col :span="10" :offset="3">
-            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-        </el-row>
-        <el-table
-          :data="dataList"
-          highlight-current-row
-          size="mini"
-          stripe
-        >
-          <el-table-column
-            label="头像"
-            header-align="center"
-          >
-            <template scope="scope">
-              <img :src="scope.row.img" alt="" class="table-img">
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="names"
-            label="姓名"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="number"
-            label="等待学生数"
-            header-align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="time"
-            label="作业最长等待时长"
-            header-align="center">
-          </el-table-column>
-          <el-table-column
-            prop="allTime"
-            label="累计批改时间"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="响应速度"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="状态"
-            header-align="center"></el-table-column>
 
-        </el-table>
-      </el-col>
-      <!--当天-->
-      <el-col :span="18" class="main" v-if="checkindex == 1">
+      <!--数据监控-->
+      <el-col :span="20" class="main" :offset="2">
         <el-row :gutter="20" class="main-header">
-          <el-col :span="5"><div class="main-header-item" @click="isShow(1)">今日报错总次数:：6人</div></el-col>
-          <el-col :span="10" :offset="5">
-            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-          <el-col :span="4">
-            <i class="el-icon-d-arrow-left"></i>
-            <span class="today-time">2019-02-04</span>
-            <i class="el-icon-d-arrow-right"></i>
-          </el-col>
+          <el-col :span="3"><div class="main-header-item" >注册老师数：18人</div></el-col>
+          <el-col :span="3"><div class="main-header-item">活跃老师数：16人</div></el-col>
+          <el-col :span="4"><div class="main-header-item">注册用户数：1128人</div></el-col>
+          <el-col :span="4"><div class="main-header-item">活跃用户数：1008人</div></el-col>
         </el-row>
         <el-table
           :data="dataList"
           highlight-current-row
-          size="mini"
+          size="medium"
+          border
           stripe
         >
           <el-table-column
-            label="头像"
+            label="小组管理员"
             header-align="center"
           >
             <template scope="scope">
@@ -108,118 +29,44 @@
           </el-table-column>
           <el-table-column
             prop="names"
-            label="姓名"
+            label="小组人数"
             header-align="center"
           >
           </el-table-column>
           <el-table-column
             prop="number"
-            label="被报错"
+            label="老师出勤率"
             header-align="center"
           ></el-table-column>
           <el-table-column
             prop="time"
-            label="科目"
+            label="作业批改总份数"
             header-align="center">
           </el-table-column>
           <el-table-column
             prop="allTime"
-            label="批改总份数"
+            label="作业批改总张数"
             header-align="center"
           >
           </el-table-column>
           <el-table-column
             prop="rate"
-            label="批改总张数"
+            label="批改平均用时"
             header-align="center"></el-table-column>
           <el-table-column
             prop="status"
-            label="平均批改时间"
+            label="家长平均评分"
             header-align="center"></el-table-column>
           <el-table-column
             prop="status"
-            label="出勤"
+            label="是否在线"
             header-align="center"></el-table-column>
-
-        </el-table>
-      </el-col>
-      <!--当月-->
-      <el-col :span="18" class="main" v-if="checkindex == 2">
-        <el-row :gutter="20" class="main-header">
-          <el-col :span="5"><div class="main-header-item" @click="isShow(1)">当月报错总次数：6人</div></el-col>
-          <el-col :span="10" :offset="5">
-            <el-input placeholder="请输入老师" v-model="input3" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="选年级" minlength="20">
-                <el-option label="一年级" value="1"></el-option>
-              </el-select>
-              <el-select v-model="select" slot="prepend" placeholder="选科目" minlength="20">
-                <el-option label="数学" value="1"></el-option>
-              </el-select>
-              <el-button slot="append" icon="el-icon-search"></el-button>
-            </el-input>
-          </el-col>
-          <el-col :span="4">
-            <i class="el-icon-d-arrow-left"></i>
-            <span class="today-time">2019-02-04</span>
-            <i class="el-icon-d-arrow-right"></i>
-          </el-col>
-        </el-row>
-        <el-table
-          :data="dataList"
-          highlight-current-row
-          size="mini"
-          stripe
-        >
-          <el-table-column
-            label="头像"
-            header-align="center"
-          >
+          <el-table-column prop="status" label="" header-align="center" width="250">
             <template scope="scope">
-              <img :src="scope.row.img" alt="" class="table-img">
+              <el-button type="success" plain @click="isShow(1)">小组详情</el-button>
+              <el-button type="success" >管理员详情</el-button>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="names"
-            label="姓名"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="number"
-            label="被报错"
-            header-align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="time"
-            label="科目"
-            header-align="center">
-          </el-table-column>
-          <el-table-column
-            prop="allTime"
-            label="批改总份数"
-            header-align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rate"
-            label="批改总张数"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="正确率"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="满意度"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="平均批改时间"
-            header-align="center"></el-table-column>
-          <el-table-column
-            prop="status"
-            label="出勤率"
-            header-align="center"></el-table-column>
 
         </el-table>
       </el-col>
@@ -240,35 +87,28 @@
     <div class='showModel' @click="allShowModel(1)" v-if="hiddenModel"></div>
     <div class='model' v-if="hiddenModel">
       <div class='model-text'>
-        <div class="model-text-head">
-          <div>可分配老师</div>
-          <div>二年级数学</div>
+        <div class="model-manager">
+          <div>校区管理员</div>
+          <div><img src="../../assets/img/del@2x.png" alt="" @click="allShowModel(1)"></div>
         </div>
         <div class="model-items">
-          <div class="model-items-left">
-            <div class="model-items-left-top">
-              <div>
-                <img src="../../assets/img/user.jpg" alt="" class="model-items-left-top-img">
-                <div style="display: inline-block">
-                  <div style="font-size: 24px">李大柱</div>
-                  <div class="model-items-left-top-number">等待学生：0</div>
-                </div>
+          <div class="model-items-first">
+            <div>
+              <img src="../../assets/img/user.jpg" alt="" class="model-items-first-img">
+              <div class="model-items-first-left">
+                <div>程歌（在线）</div>
+                <div class="model-items-first-left-down">南方科技大学</div>
               </div>
-              <div> <el-button type="success">分配</el-button></div>
             </div>
-          </div>
-          <div class="model-items-left">
-            <div class="model-items-left-top">
-              <div>
-                <img src="../../assets/img/user.jpg" alt="" class="model-items-left-top-img">
-                <div style="display: inline-block">
-                  <div style="font-size: 24px">李大柱</div>
-                  <div class="model-items-left-top-number">等待学生：0</div>
-                </div>
-              </div>
-              <div> <el-button type="success">分配</el-button></div>
+            <div>
+              <el-button type="danger" plain round @click="isShow(2)"><i class="el-icon-bottom"></i><span>降级</span></el-button>
             </div>
           </div>
+          <div class="model-items-other model-active">批改科目 : 语文、英语</div>
+          <div class="model-items-other">批改年级 : 1～2年级、3～4年级</div>
+          <div class="model-items-other model-active">可批改时间：<el-button type="info" round>周一</el-button></div>
+          <div class="model-items-other">手机号 : 18832340987</div>
+          <div class="model-items-other model-active-last">上次登录时间 : 2019.05.14 18:02</div>
         </div>
 
       </div>
@@ -277,27 +117,14 @@
     <div class='showModel' @click="allShowModel(2)" v-if="isPigai"></div>
     <div class='model' v-if="isPigai">
       <div class='model-text'>
-        <div class="model-text-head">
-          <div>所有未批改作业</div>
+        <div class="model-text-items">
+          <div><img src="../../assets/img/del@2x.png" alt="" @click="allShowModel(2)" class="model-text-items-close"></div>
+          <div>是否要将程歌老师降级为普通批改老师？</div>
+        </div>
+        <div class="model-btn">
+          <div class="model-btn-items main-gay">是</div>
+          <div class="model-btn-items model-grdeen">否</div>
         </div>
-        <el-table
-          :data="tableData"
-          style="width: 100%">
-          <el-table-column
-            prop="date"
-            label="日期"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="name"
-            label="姓名"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="address"
-            label="地址">
-          </el-table-column>
-        </el-table>
       </div>
     </div>
   </div>
@@ -310,7 +137,6 @@
     props: {},
     data() {
       return {
-        checkindex: 0,
         hiddenModel:false,
         isPigai:false,
         ItemList: [
@@ -373,8 +199,10 @@
         console.log(str)
         if (str == 1){
           _this.hiddenModel = true;
+          _this.isPigai = false;
         } else if (str == 2){
           _this.isPigai = true;
+          _this.hiddenModel = false;
         }
 
       },
@@ -466,15 +294,13 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-  .aside{
-    background-color: #fff;
-    margin-top: 16px;
-    padding: 0;
-  }
+
   .main{
     background-color: #fff;
-    margin: 16px;
+    margin-top: 16px;
     padding: 0 !important;
+    border: 1px solid #E1E1E1;
+    min-height: 980px;
   }
   .table-aside{
     color: #666666;
@@ -492,7 +318,8 @@
     line-height: 80px;
   }
   .main-header-item{
-    font-size: 20px;
+    font-size: 16px;
+    color: #7E7E7E;
   }
   .main-header-link{
     color: #52CC60;
@@ -537,19 +364,59 @@
   }
   .model{
     z-index: 1001;
-    width:854px;
+    width:40%;
     height:auto;
-    position: relative;
-    /*right: auto;*/
+    position: fixed;
+    top: 30%;
+    left: 30%;
     margin:auto;
     background: #fff;
     border-radius:30px;
     text-align: center;
   }
+
+  .model-items-first{
+    padding: 0 34px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .model-items-first-img{
+    width: 68px;
+    height: 68px;
+    border-radius: 8px;
+    position: relative;
+    bottom: 20px;
+  }
+  .model-items-first-left{
+    display: inline-block;
+    color: #393939;
+    font-size: 24px;
+    margin-left: 14px;
+    text-align: left;
+  }
+  .model-items-first-left-down{
+    color: #7E7E7E;
+    font-size: 18px;
+  }
   .model-text{
     background:rgba(255,255,255,1);
     border-radius:10px;
   }
+  .model-items-other{
+    height: 60px;
+    line-height: 60px;
+    color: #393939;
+    font-size: 20px;
+    text-align: left;
+    padding: 0 34px;
+  }
+  .model-active{
+    background-color: #F6F7FB;
+  }
+  .model-active-last{
+    border-radius:0 0 30px 30px;
+    background-color: #F6F7FB;
+  }
   .model-text-head{
     padding: 40px 50px;
     display: flex;
@@ -557,36 +424,44 @@
     font-size: 24px;
     justify-content: space-between;
   }
-  .model-items-left{
-    width: 45%;
+  .model-manager{
+    display: flex;
+    justify-content: space-between;
+    margin: 30px;
     color: #393939;
     font-size: 24px;
   }
-  .model-items-left-top{
-    display: flex;;
-    justify-content: space-between;
-
-  }
-  .model-items{
-    padding: 0 50px 10px 50px;
-    display: flex;;
-    justify-content: space-between;
-  }
-  .model-items-left-top-img{
-    width:68px;
-    height:68px;
-    border-radius:8px;
-    position: relative;
-    bottom: 25px;
+  .model-btn{
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 44px;
   }
-  .model-items-left-top-number{
-    color: #7E7E7E;
+  .model-btn-items{
+    width:154px;
+    height:50px;
+    line-height: 50px;
+    text-align: center;
     font-size: 18px;
-    margin-left: 10px;
+    border-radius:4px;
   }
-  .today-time{
+  .main-gay{
+    background:rgba(246,247,251,1);
     color: #7E7E7E;
-    font-size: 18px;
-    margin: 0 20px;
+  }
+  .model-grdeen{
+    background-color: #52CC60;
+    color: #fff;
+  }
+  .model-text-items-close{
+    position: absolute;
+    top: 10px;
+    right: 15px;
+  }
+  .model-text-items{
+    position: relative;
+    color: #000000;
+    font-size: 24px;
+    text-align: center;
+    padding: 40px 0 50px 0;
   }
 </style>

src/router/index.js

@@ -2,13 +2,16 @@ import Vue from "vue";
 import Router from "vue-router";
 import Login from "@/pages/Login";
 import Home from "@/pages/Home";
-// import Super from "@/pages/Super";
+import Super from "@/pages/Super";
 // import Redirect_uri from "@/pages/Redirect_uri";
 import Error from "@/pages/Error";
 import Error404 from "@/pages/Error404";
 import SchoolManager from "@/pages/home/SchoolManager";
 import TeacherApporval from "@/pages/home/TeacherApporval";
 import TeacherPay from "@/pages/home/TeacherPay";
+import CheckTeacherAudit from "@/pages/super/CheckTeacherAudit";
+import CheckTeacherPay from "@/pages/super/CheckTeacherPay";
+import SuperAdmin from "@/pages/super/SuperAdmin";
 import Redirect_uri from "@/pages/aikmt/Redirect_uri"; //微信登陆路由重定向页面
 Vue.use(Router);
 
@@ -29,34 +32,34 @@ export const constantRouterMap =
       name: "微信认证重定向页",
       component: Redirect_uri
     },
-     // {
-     //   path: "/super",
-     //   component: Super,
-     //   children:[
-     //     {
-     //       path: "",
-     //       redirect: "SuperAdmin"
-     //     },
-     //     {
-     //       path: "SuperAdmin",
-     //       name: "SuperAdmin",
-     //       component: SchoolManager,
-     //       meta: { title: '超级管理员', roles: ['2'] }
-     //     },
-     //     {
-     //       path: "CheckTeacherAudit",
-     //       name: "CheckTeacherAudit",
-     //       component: CheckTeacherAudit,
-     //       meta: { title: '批改老师注册审核', roles: ['2'] }
-     //     },
-     //     {
-     //       path: "CheckTeacherPay",
-     //       name: "CheckTeacherPay",
-     //       component: CheckTeacherPay,
-     //       meta: { title: '批改老师薪酬表', roles: ['2'] }
-     //     },
-     //   ]
-     // },
+     {
+       path: "/super",
+       component: Super,
+       children:[
+         {
+           path: "",
+           redirect: "SuperAdmin"
+         },
+         {
+           path: "SuperAdmin",
+           name: "SuperAdmin",
+           component: SuperAdmin,
+           meta: { title: '超级管理员', roles: ['2'] }
+         },
+         {
+           path: "CheckTeacherAudit",
+           name: "CheckTeacherAudit",
+           component: CheckTeacherAudit,
+           meta: { title: '批改老师注册审核', roles: ['2'] }
+         },
+         {
+           path: "CheckTeacherPay",
+           name: "CheckTeacherPay",
+           component: CheckTeacherPay,
+           meta: { title: '批改老师薪酬表', roles: ['2'] }
+         },
+       ]
+     },
       {
        path: "/home",
        component: Home,