class

package-lock.json

@@ -1895,6 +1895,13 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true,
+      "optional": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
@@ -2036,6 +2043,48 @@
       "integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8=",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.0.tgz",
+      "integrity": "sha1-jgm/89kSLhM/e4EByPvdAO09Krg=",
+      "dev": true,
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.1.0.tgz",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
+          "integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
+          "dev": true,
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.4.tgz",
+          "integrity": "sha1-PlcvI8hBGlz9lVfISeNmXgspBiM=",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.0.3",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.0.3.tgz",
@@ -6229,6 +6278,13 @@
       "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz?cache=0&sync_timestamp=1569841076205&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimage-size%2Fdownload%2Fimage-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -6877,6 +6933,64 @@
         "invert-kv": "^2.0.0"
       }
     },
+    "less": {
+      "version": "3.10.3",
+      "resolved": "https://registry.npm.taobao.org/less/download/less-3.10.3.tgz",
+      "integrity": "sha1-QXoJddXu7MUs/0vPo8CdNXgeZ5I=",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "mime": "^1.4.1",
+        "mkdirp": "^0.5.0",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz",
+          "integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npm.taobao.org/less-loader/download/less-loader-5.0.0.tgz",
+      "integrity": "sha1-SY3eOmxsT4h0WO6e0/CGoSrRtGY=",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        }
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz",
@@ -8801,6 +8915,16 @@
       "integrity": "sha1-foz42PW48jnBvGi+tOt4Vn1XLvg=",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz",
+      "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz",

package.json

@@ -21,9 +21,12 @@
     "@vue/cli-plugin-vuex": "^4.0.0",
     "@vue/cli-service": "^4.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
+    "axios": "^0.19.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.10"
   }

src/1.json

@@ -0,0 +1,53 @@
+[{
+        "id": "1",
+        "loginName": "南湖",
+        "studentName": "南湖",
+        "birth": "1290-2-2",
+        "parentName": "南湖恺",
+        "num": "234",
+        "tel": "456",
+        "idNum": "123"
+
+    },
+    {
+        "id": "2",
+        "loginName": "南湖",
+        "studentName": "南湖",
+        "birth": "1290-2-2",
+        "parentName": "南湖恺",
+        "num": "234",
+        "tel": "456",
+        "idNum": "123"
+    },
+    {
+        "id": "3",
+        "loginName": "南湖",
+        "studentName": "南湖",
+        "birth": "1290-2-2",
+        "parentName": "南湖恺",
+        "num": "234",
+        "tel": "456",
+        "idNum": "123"
+
+    },
+    {
+        "id": "4",
+        "loginName": "南湖",
+        "studentName": "南湖",
+        "birth": "1290-2-2",
+        "parentName": "南湖恺",
+        "num": "234",
+        "tel": "456",
+        "idNum": "123"
+    },
+    {
+        "id": "5",
+        "loginName": "南湖",
+        "studentName": "南湖",
+        "birth": "1290-2-2",
+        "parentName": "南湖恺",
+        "num": "234",
+        "tel": "456",
+        "idNum": "123"
+    }
+]

src/assets/css/gobal.css

@@ -1,6 +1,6 @@
 a {
     text-decoration: none;
-    ;
+    color: #529BFF;
 }
 
 html,
@@ -13,4 +13,12 @@ body {
 .tabEdit .el-input__inner {
     border-radius: 0;
     border: transparent;
+}
+
+.headf .el-icon-arrow-down:before {
+    content: ""
+}
+
+.headf .el-menu--horizontal>.el-submenu .el-submenu__title {
+    line-height: 53px;
 }

src/components/Base.vue

@@ -4,7 +4,6 @@
             <div class="mainTop">
                <el-checkbox >未结课</el-checkbox>
                 <span class="check"><el-checkbox >已结课</el-checkbox></span>
-                
                 <el-select placeholder="所属学科">
                 <el-option > </el-option>
                 </el-select>

src/components/Home.vue

@@ -2,7 +2,7 @@
     <div class="all">
         <!-- 头部区域上-->
     <div class="head">
-        <div class="logo"></div>
+        <div class="logo">AI升学测评分析平台</div>
         <div class="headRight">
             <i class="ico"></i> |
             <span class="photo"></span>
@@ -13,25 +13,57 @@
         <!-- 头部菜单栏 -->
         <div class="headf">
            <el-menu  mode="horizontal" >
-    <el-menu-item index="1"><i class="el-icon-menu"></i>基础信息</el-menu-item>
-    <el-menu-item index="2"><i class="el-icon-menu"></i>试题库</el-menu-item>
-    <el-menu-item index="3"><i class="el-icon-menu"></i>作业管理</el-menu-item>
-    <el-menu-item index="4"><i class="el-icon-menu"></i>学情报告</el-menu-item>
+        <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-menu"></i>
+              <span>基础信息</span>
+            </template>
+             <el-menu-item-group>
+              <el-menu-item index="1-1" @click='clickStu' >学生管理</el-menu-item>
+              <el-menu-item index="1-2" @click='clickTea'>教师管理</el-menu-item>
+            </el-menu-item-group>
+        </el-submenu>
+        <el-submenu index="2">
+            <template slot="title">
+              <i class="el-icon-menu"></i>
+              <span>试题库</span>
+            </template>
+             <el-menu-item-group>
+            
+            </el-menu-item-group>
+        </el-submenu>
+        <el-submenu index="3">
+            <template slot="title">
+              <i class="el-icon-menu"></i>
+              <span>作业管理</span>
+            </template>
+             <el-menu-item-group>
+              
+            </el-menu-item-group>
+        </el-submenu>
+        <el-submenu index="4">
+            <template slot="title">
+              <i class="el-icon-menu"></i>
+              <span>学情报告</span>
+            </template>
+             <el-menu-item-group>
+                 <el-menu-item index="1-2" @click='clickRep'>学情分析</el-menu-item>
+            </el-menu-item-group>
+        </el-submenu>
            </el-menu>
         </div>
 
         <!-- 视图体区 -->
+        <div class="banxin">
         <el-card class="con">
             <router-view></router-view>
         </el-card>
-
         <div class="footer"><p>copyright@2013-2019 All Right</p></div>
-      
+        </div>
     </div>
 </template>
 <script>
 export default {
-    
     data(){
        return {
 
@@ -40,6 +72,15 @@ export default {
     methods:{
         logout(){
             this.$router.push('/login')
+        },
+        clickTea(){
+            this.$router.push('/teacher')
+        },
+        clickStu(){
+            this.$router.push('/student')
+        },
+        clickRep(){
+            this.$router.push('/report')
         }
     }
 }
@@ -51,14 +92,17 @@ export default {
     width: 100%;
     height: 68px;
     background-color: #529BFF;
-line-height: 68px;
-color: #fff;
+    line-height: 68px;
+    color: #fff;
 }
 .logo {
+    font-size:16px;
     float: left;
-    width: 300px;
+    width: 20%;
+    line-height:40px;
+    font-weight: 900;
     height: 40px;
-    background-color: pink;
+    /* background-color: pink; */
     margin-left: 10px;
    margin-top: 15px;
 }
@@ -90,6 +134,7 @@ font-size: 12px;
     margin-right: 15px;
 }
 .headf {
+    overflow: hidden;
     height: 52px;
     width: 100%;
     background-color: #fff;
@@ -112,10 +157,12 @@ font-size: 12px;
     line-height: 52px;
 }
 /* 主体区 */
+
 .con{
     margin:15px auto 0;
     width: 1200px;
-    height: 100%;
+    min-width: 800px;
+    height: 410px;
     background-color: #fff;
     
 }
@@ -124,12 +171,11 @@ font-size: 12px;
 }
 .footer {
     color: #B1B9CF;
-   position: absolute;
-   bottom: -80px;
+   position: fixed;
+  bottom: 10px;;
    left: 50%;
    transform: translateX(-50%)
 
-
 }
 
 

src/components/message/Student.vue

@@ -0,0 +1,168 @@
+<template>
+    <div>
+        <!--头部区域 -->
+        <div class="studentTop">
+        <el-input size="mini" placeholder="输入学生姓名、登录名、身份证号码进行查询"></el-input>
+        <el-button type="primary" size="mini">搜索</el-button>
+        <el-button  size="mini">导入</el-button>
+        <el-button  size="mini">导出</el-button>
+        <el-button type="primary" size="mini" class="addStu">添加</el-button>
+        </div>
+        <!-- 表格区域 -->
+        <div class="stuTab">
+             <el-table
+    :data="tableData1.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+    border
+    style="width: 100%"
+    :header-cell-style="{background:'#FAFAFA'}">
+     <el-table-column
+     align="center"
+      type="selection"
+     >
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">{{id}}
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="loginName"
+      label="登录名"
+      width="">{{leader}}
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="studentName"
+      label="学生姓名"
+      >
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="birth"
+      label="出生日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="num"
+      label="班级数量">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="tel"
+      label="手机号">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="idNum"
+      label="身份证号码">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      label="操作"
+      width="180">
+      <template>
+          <router-link class="studentEdit" to="" ><span>查看</span> | 修改 </router-link> |
+          <a href="#" class="studentDelet">删除</a>
+      </template>
+    </el-table-column>
+    
+     </el-table>
+     <!-- 分页功能 -->
+     <div class="fenPage">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[1,2,3,5]"
+        :page-size="pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+      </div>
+     </div>
+    </div>
+</template>
+<script>
+//导入数据
+const Data=require('../../1.json')
+export default {
+    data(){
+        return {
+            currentPage:1,
+            pagesize:5,
+            tableData1: [
+        //  { id: '1',
+        //   loginName: '第一期',
+        //   studentName: 56,
+        //   parentName:'南湖恺',
+        //   birth:'数学',
+        //   num:'123',
+        //   tel:'123',
+        //   idNum:'123'}
+        ],
+       total:6
+        }
+    },
+    created(){
+      this.add()
+    },
+    methods:{
+      
+    //获取数据
+    add(){
+      this.tableData1=Data
+      this.total=this.tableData1.length
+      console.log(this.tableData1)
+    },
+    
+  //监听每页的条数变化
+    handleSizeChange(size) {
+      this.pagesize = size
+     this.add()
+    },
+    //监听当前页的变化
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.add()
+    },
+    }
+    
+      
+}
+</script>
+<style scoped lang="less">
+.studentTop {
+    position: relative;
+    margin-bottom: 20px;
+    .el-input {
+    width: 27%;
+    margin:0 10px;
+    }
+    .addStu {
+      position: absolute;
+      top: 0;
+      right: 0;
+    
+    }
+}
+.stuTab{
+     span {
+         color: #529BFF;
+     }
+     .studentDelet {
+         color: #EE443E;
+     }
+     
+}
+.fenPage {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+
+
+</style>

src/components/message/Teacher.vue

@@ -0,0 +1,124 @@
+<template>
+    <div>
+        <!--头部区域 -->
+        <div class="teacherTop">
+         <el-select placeholder="所属学科">
+           <el-option > </el-option>
+        </el-select>
+        <el-input  placeholder="输入名字或登录名查询"></el-input>
+        <el-button type="primary" size="mini">搜索</el-button>
+        <el-button  size="mini">导入</el-button>
+        <el-button  size="mini">导出</el-button>
+        <el-button type="primary" size="mini" class="addTea">添加</el-button>
+        </div>
+        <!-- 表格区域 -->
+        <div class="teaTab">
+             <el-table
+    :data="tableData"
+    border
+    style="width: 100%"
+    :header-cell-style="{background:'#FAFAFA'}">
+     <el-table-column
+     align="center"
+      type="selection"
+
+     >
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="loginName"
+      label="登录名"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="teacherName"
+      label="教师姓名"
+      >
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="birth"
+      label="出生日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="gender"
+      label="性别">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="tel"
+      label="手机号">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="object"
+      label="科目">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      label="操作"
+      width="180">
+      <template>
+          <router-link class="teacherEdit" to="/read" ><span>查看</span> | 修改 </router-link> |
+          <a href="#" class="teacherDelet">删除</a>
+      </template>
+    </el-table-column>
+     </el-table>
+     </div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+            tableData: [{
+          id: '1',
+          loginName: '第一期',
+          teacherName: 56,
+          parentName:'南湖恺',
+          birth:'数学',
+          gender:'123',
+          tel:'123',
+          object:'数学'
+        }]
+        }
+    }
+}
+</script>
+<style scoped lang="less">
+.teacherTop {
+    margin-bottom: 20px;
+    .el-select {
+        width: 12%;
+    };
+    .el-input {
+    width: 17%;
+    margin:0 10px;
+    }
+    .addTea {
+        margin-left:530px; 
+    }
+}
+.teaTab{
+    
+     span {
+         color: #529BFF;
+     }
+     .teacherDelet {
+         color: #EE443E;
+     }
+     
+}
+
+
+
+</style>

src/components/report/Person.vue

@@ -0,0 +1,167 @@
+<template>
+<!-- 个人学习报告页 -->
+<!-- 报告头部 -->
+<div>
+   <div class="personTop">
+       <div>
+        <span class="photo"></span>
+        <span>南华凯</span>
+        </div>
+        <span class="personBack">返回</span>
+   </div>
+    <div class="topNav">
+        <span class="topCon">
+        <a><i class="el-icon-document"></i>
+        <span>单次学情</span></a>
+        <a><i class="el-icon-document"></i>
+        <span>阶段学情</span></a>
+        </span>
+     </div>
+     <!-- 表格区域 -->
+     <div class="personMain">
+         <el-card>
+             
+         <div class="reportTop"><a href="#">南华凯个人作业报告</a>
+         <sapn class="personRight">
+             <el-input v-model="input" placeholder="请输入内容" ></el-input>
+             <el-button type="primary" size="mini">搜索</el-button>
+             </sapn></div>
+<el-table
+    :header-cell-style="{background:'#FAFAFA'}"
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="180">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="HomeworkName"
+      label="作业名称"
+      width="280">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="object"
+      label="科目">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="riqi"
+      label="作业日期">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      label="操作">
+      <template><a href="#">查看</a></template>
+    </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <div class="reportPag">
+         <el-button>上一页</el-button>
+         <div class="fenye"><span>1</span>/<span>5</span></div>
+            <el-button>下一页</el-button>
+  </div>
+ </el-card>
+     </div>
+     </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            tableData:[{
+            id: '1',
+          HomeworkName: '201910月第一期',
+          object: '数学',
+          riqi:'2019-9-9',
+          object:'数学'
+         
+            }]
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.personTop {
+    display: flex;
+    justify-content: space-between;
+    height: 60px;
+    background-color: #529BFF;
+    color: #fff;
+    .photo {
+    display: inline-block;
+    vertical-align: middle;
+    width: 42px;
+    height: 42px;
+    background-color: pink;
+    margin: 7px;
+    border-radius: 50%;
+    }
+    .personBack {
+       line-height: 60px;
+       margin-right: 20px;
+    }
+}
+.topNav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+        height: 50px;
+        background-color:#fff;
+        line-height: 50px;
+        margin: 0 auto;
+        a{
+            color: #414141;
+            margin-left: 70px;
+        }
+        span {
+            padding: 5px;
+        }
+        // a:hover{
+        //     color: #529BFF;
+        // }
+
+    }
+    .personMain {
+        width: 1200px;
+        margin: 10px auto;
+    }
+
+.reportPag {
+        position: relative;
+       display: flex;
+       justify-content: flex-end;
+       margin-top: 15px;
+      .fenye {
+          font-size: 14px;
+          position: absolute;
+          top: 10px;
+          right:105px;
+      }
+      .el-button {
+          margin: 0 15px;
+      }
+    }
+    .reportTop {
+        margin-bottom: 20px;
+         display: flex;
+        justify-content: space-between;
+        align-content: center;
+         .personRight {
+        .el-input {
+            width: 60%;
+        }
+        .el-button {
+            margin-left: 20px;
+        }
+    }
+    }
+   
+
+
+ 
+</style>

src/components/report/Report.vue

@@ -0,0 +1,126 @@
+<template>
+    <div >
+        <div class="reportTop">
+         <el-input size="mini" placeholder="输入学生姓名、登录名、身份证号码进行查询"></el-input>
+        <el-button type="primary" size="mini" @click="Person">搜索</el-button>
+        </div>
+<!-- 表格区域 -->
+    <div class="reportTab">
+          <el-table
+    :data="tableData"
+    border
+    style="width: 100%"
+    :header-cell-style="{background:'#FAFAFA'}">
+     <el-table-column
+     align="center"
+      type="selection"
+     >
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="loginName"
+      label="登录名"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="studentName"
+      label="学生姓名"
+      >
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="birth"
+      label="出生日期"
+      width="180">
+    </el-table-column>
+    
+    <el-table-column
+    align="center"
+      prop="parentTel"
+      label="家长手机">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="studentTel"
+      label="学生手机">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="idNum"
+      label="身份证号码">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      label="操作"
+      width="180">
+      <template>
+          <router-link class="studentEdit" to="" ><span>查看</span> </router-link>
+      </template>
+    </el-table-column>
+     </el-table>
+     </div>
+     <!-- 分页区域 -->
+     <div class="reportPag">
+         <el-button>上一页</el-button>
+         <div class="fenye"><span>1</span>/<span>5</span></div>
+         <el-button>下一页</el-button>
+     </div>
+    </div>
+
+</template>
+<script>
+export default {
+    data(){
+        return{
+            tableData: [{
+          id: '1',
+          loginName: '第一期',
+          studentName: 56,
+          birth:'2019-9-9',
+          parentTel:'156',
+          studentTel:'123',
+          idNum:'123',
+          
+        }]
+        }
+    },
+    methods:{
+       Person(){
+           this.$router.push('/person')
+       }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .reportTop {
+        margin-bottom: 20px;
+        .el-input {
+            width: 25%;
+            margin-right: 20px;
+        }
+    }
+    .reportPag {
+        position: relative;
+       display: flex;
+       justify-content: flex-end;
+       margin-top: 15px;
+      .fenye {
+          font-size: 14px;
+          position: absolute;
+          top: 10px;
+          right:105px;
+      }
+      .el-button {
+          margin: 0 15px;
+      }
+    }
+    
+
+</style>

src/main.js

@@ -7,8 +7,11 @@ import './assets/css/gobal.css'
 
 Vue.config.productionTip = false
 
+import axios from 'axios'
+// Vue.prototype.$http = axios
+
 new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')

src/router/index.js

@@ -7,6 +7,10 @@ import Home from '../components/Home.vue'
 import Base from '../components/Base.vue'
 import Read from '../components/message/Read.vue'
 import editMessage from '../components/message/EditMessage.vue'
+import Teacher from '../components/message/Teacher.vue'
+import Student from '../components/message/Student.vue'
+import Report from '../components/report/Report.vue'
+import Person from '../components/report/Person.vue'
 
 Vue.use(VueRouter)
 
@@ -33,8 +37,22 @@ const routes = [
         }, {
             path: '/editMessage',
             component: editMessage
+        }, {
+            path: '/teacher',
+            component: Teacher
+        }, {
+            path: '/student',
+            component: Student
+        }, {
+            path: '/report',
+            component: Report
         }]
-    }
+    },
+    {
+        path: '/person',
+        component: Person
+    },
+
 ]
 
 const router = new VueRouter({

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
-}
-</script>