class

src/assets/css/gobal.css

@@ -1,3 +1,16 @@
 a {
-    text-decoration: none;;
+    text-decoration: none;
+    ;
+}
+
+html,
+body {
+    padding: 0;
+    margin: 0;
+    background-color: #EBEDF5;
+}
+
+.tabEdit .el-input__inner {
+    border-radius: 0;
+    border: transparent;
 }

src/components/Base.vue

@@ -0,0 +1,115 @@
+<template>
+<!-- 视图体区 -->
+<div>
+            <div class="mainTop">
+               <el-checkbox >未结课</el-checkbox>
+                <span class="check"><el-checkbox >已结课</el-checkbox></span>
+                
+                <el-select placeholder="所属学科">
+                <el-option > </el-option>
+                </el-select>
+                <span class="data">开班日期:</span ><el-date-picker
+              type="date"
+              placeholder="选择日期">
+                 </el-date-picker>
+                 <el-select placeholder="姓名" class="topName">
+                <el-option > </el-option>
+                </el-select>
+                <el-button type="primary" size="
+                mini">搜索</el-button>
+                <el-button type="primary" size="
+                mini" class="add">添加</el-button>
+            </div>
+            <!-- 表格区域 -->
+             <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+     <el-table-column
+      type="selection"
+     >
+    </el-table-column>
+    <el-table-column
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+      prop="class"
+      label="班级名称"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="num"
+      label="人数"
+      width="">
+    </el-table-column>
+    <el-table-column
+      prop="leader"
+      label="主负责人"
+      width="">
+    </el-table-column>
+    <el-table-column
+      prop="object"
+      label="学科">
+    </el-table-column>
+    <el-table-column
+      prop="teacher"
+      label="教师">
+    </el-table-column>
+    <el-table-column
+      label="操作">
+      <template>
+          <router-link class="topEdit" to="/read" >编辑/查看</router-link> |
+          <a href="#" class="topDelet">删除</a>
+      </template>
+    </el-table-column>
+     </el-table>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+         return{
+          tableData: [{
+          id: '1',
+          class: '201910月第一期',
+          num: 56,
+          leader:'南湖恺',
+          object:'数学',
+          teacher:'黄晓静'
+
+        }
+           ]
+            }
+    }
+}
+</script>
+<style scoped>
+.check {
+    padding-left: 5px;
+    margin-right: 5px;
+}
+.data {
+    margin:0 5px;
+    font-size: 14px;
+}
+.topName {
+    margin: 0 5px;
+}
+.add {
+   float: right;
+}
+.el-table {
+    margin-top: 15px;
+}
+.topEdit{
+    color: #666666;
+}
+.topEdit:hover {
+    color: #529BFF
+}
+.topDelet {
+    color:#F5A09D; 
+}
+</style>

src/components/Home.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="all">
+        <!-- 头部区域上-->
+    <div class="head">
+        <div class="logo"></div>
+        <div class="headRight">
+            <i class="ico"></i> |
+            <span class="photo"></span>
+            <span class="name">你好</span> |
+            <a href="#" class="logout">退出</a>
+        </div>
+        </div>
+        <!-- 头部菜单栏 -->
+        <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-menu>
+        </div>
+
+        <!-- 视图体区 -->
+        <el-card class="con">
+            <router-view></router-view>
+        </el-card>
+
+        <div class="footer"><p>copyright@2013-2019 All Right</p></div>
+      
+    </div>
+</template>
+<script>
+export default {
+    
+    data(){
+       
+    }
+}
+</script>
+<style scoped>
+
+.head {
+    overflow: hidden;
+    width: 100%;
+    height: 68px;
+    background-color: #529BFF;
+line-height: 68px;
+color: #fff;
+}
+.logo {
+    float: left;
+    width: 300px;
+    height: 40px;
+    background-color: pink;
+    margin-left: 10px;
+   margin-top: 15px;
+}
+
+.headRight {
+    float: right;
+font-size: 12px;
+
+}
+.ico {
+    display: inline-block;
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    background-color: pink;
+    
+}
+.photo {
+     display: inline-block;
+     vertical-align: middle;
+    width: 42px;
+    height: 42px;
+    background-color: pink;
+    margin: 0 5px;
+    border-radius: 50%;
+}
+.logout {
+    color: #fff;
+    margin-right: 15px;
+}
+.headf {
+    height: 52px;
+    width: 100%;
+    background-color: #fff;
+    position: relative;
+    z-index: 999;
+   
+   
+}
+ .el-menu {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%)
+ }    
+ .el-menu-item {
+     margin-right: 20px!important;
+ } 
+.el-menu--horizontal>.el-menu-item{
+    height: 52px;
+    line-height: 52px;
+}
+/* 主体区 */
+.con{
+    margin:15px auto 0;
+    width: 1200px;
+    height: 100%;
+    background-color: #fff;
+    
+}
+.all {
+ position: relative;
+}
+.footer {
+    color: #B1B9CF;
+   position: absolute;
+   bottom: -80px;
+   left: 50%;
+   transform: translateX(-50%)
+
+
+}
+
+</style>

src/components/Login.vue

@@ -1,17 +1,19 @@
 <template>
     <div class="bg">
+        <div class="center">
        <div class="welcome">
            <img src="../assets/images/pt1.png" alt="">
        </div>
        <div class="box1">
-           <div class="input1" >用户名</div>
-           <div class="input2">密码</div>
+           <div class="input1" ><input placeholder="用户名"/></div>
+           <div class="input2"><input placeholder="密码"/></div>
            <el-checkbox class="checkbox1">记住密码</el-checkbox>
-           <router-link class="login" to="./user">登录</router-link>
+           <router-link class="login" to="./home">登 录</router-link>
             <p>
            <span>还没有账号?<a>立即注册</a></span>
        </p>
        </div>
+       </div>
        
       
     </div>
@@ -20,6 +22,9 @@
 export default {
     data() {
         return {}
+    },
+    methods:{
+        
     }
    
 }
@@ -29,10 +34,6 @@ a {
     text-decoration: none;
 }
 .bg {
-    /* position: relative;
-    margin: 20px auto;
-    min-width:1280px;
-    background:url(../assets/images/bg1.png) no-repeat; */
      position: fixed;
             top: 0;
             left: 0;
@@ -49,20 +50,28 @@ a {
              background-position: center 0; 
     
 }
+.center {
+    width: 434.5px;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
 .welcome {
     width: 286px;
     height: 30.5px;
     position: absolute;
-    top: 203px;
-    left: 496px;
+    top: 90px;
+    left:60px;
 }
 .box1 {
-    position: relative;
     width: 434.5px;
     height: 369px;
     position: absolute;
-    top: 261px;
-    left: 422px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
     background:url(../assets/images/2.png);
     color: #5D5D5D;
 }
@@ -132,4 +141,10 @@ a {
 .box1 p a {
     color: rgb(0, 153, 255)
 }
+.input2 input,.input1 input {
+    width: 100%;
+    height: 45px;
+    border: none;
+    outline: none;
+}
 </style>

src/components/User.vue

@@ -136,9 +136,7 @@
     left: 43.5px;
     background-color: pink;
 }
-.logoeng {
-   
-}
+
 .name {
     position: absolute;
     display: inline-block;

src/components/message/EditMessage.vue

@@ -0,0 +1,270 @@
+<template>
+    <div>
+        <!-- 基本信息区 -->
+    <div class="readTop">
+      <div class="baseMes">基本信息</div>
+      <router-link to="/read">
+        <span class="back">返回</span>
+      </router-link>
+    </div>
+    <!-- 表格区域-->
+    <table style="border-collapse:collapse;" class="tabEdit">
+      <tr class="tr">
+        <th>班级名称:</th>
+        <td colspan="3"><input/></td>
+      </tr>
+      <tr>
+        <th>学科:</th>
+        <td style="padding:0">
+           <el-select style="width:100% ;height:100%;border-radius:0" size="large" class="se"><el-option></el-option></el-select>
+        </td>
+        <th>年级:</th>
+        <td><input/></td>
+      </tr>
+      <tr>
+        <th>主负责人:</th>
+        <td><input/></td>
+        <th>副负责人:</th>
+        <td><input/></td>
+      </tr>
+      <tr>
+        <th>学科教师:</th>
+        <td><input/></td>
+        <th>开班日期</th>
+       
+          <td style="padding:0" class="riqi"><el-date-picker
+          style="width:100% ;height:100%;border:none"
+    size="large"
+      type="date"
+      placeholder="">
+    </el-date-picker>
+        </td>
+      </tr>
+      <tr>
+        <th>状态:</th>
+        <td>
+            <el-checkbox >已毕业</el-checkbox>
+            <el-checkbox >未毕业</el-checkbox>
+        </td>
+        <th>毕业日期：</th>
+          <td style="padding:0" class="riqi"><el-date-picker
+          style="width:100% ;height:100%;border:none"
+    size="large"
+      type="date"
+      placeholder="">
+    </el-date-picker>
+        </td>
+      </tr>
+    </table>
+    <!-- 保存按钮 -->
+    <el-button type="primary" size="mini" class="saveBtn">保存</el-button>
+
+    <!-- 学生信息区域 -->
+    <!-- 表格区域-->
+    <table style="border-collapse:collapse;">
+      <tr class="trmes">
+          <th></th>
+        <th>班级名称</th>
+        <th>序号</th>
+        <th>学生姓名</th>
+        <th>学号/登录名</th>
+        <th>家长姓名</th>
+        <th>家长手机</th>
+        <th>学生手机</th>
+        <th>身份证</th>
+        <th>操作</th>
+      </tr>
+     
+    </table>
+    <div class="kong"> 尚未添加学生，请尽快添加 <el-button size="mini" type="primary" class="addBtn" @click="addDialog">手动添加</el-button> </div>
+    
+
+    <!-- 添加学生的对话框 -->
+   
+    <el-dialog
+    class="addStu"
+  title="添加学生"
+  :visible.sync="addDialogVisible"
+  width="60%"
+ >
+  <span>
+      <a href="#" class="copy">可从Excel表格中复制粘贴 或 手动输入</a>
+      <table style="border-collapse:collapse;" class="addTable">
+      <tr class="trmes">
+        <th>班级名称</th>
+        <th>序号</th>
+        <th>学生姓名</th>
+        <th>学号/登录名</th>
+        <th>家长姓名</th>
+        <th>家长手机</th>
+      </tr>
+      <tr><td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td></tr>
+      <tr><td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td></tr>
+      <tr><td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td></tr>
+      <tr><td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td></tr>
+      <tr><td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td>
+      <td><input type="text"></td></tr>
+      </table>
+      <div class="line"></div>
+  </span>
+  
+  <span slot="footer" class="dialog-footer">
+    <el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
+    <el-button size="mini" type="primary" @click="addDialogVisible = false">添加</el-button>
+  </span>
+  
+</el-dialog>
+</div>
+
+</template>
+<script>
+export default {
+    data(){
+       return{
+          tableData: [{
+          id: '1',
+          studentName: '第一期',
+          xuehao: 56,
+          parentName:'南湖恺',
+          parentTel:'数学',
+          studentTel:'123',
+          idNum:'黄晓静'
+        }],
+        addDialogVisible:false,
+            }
+        
+            
+    },
+    methods:{
+        // 手动添加学生
+    addDialog(){
+this.addDialogVisible=true
+}
+    }
+}
+</script>
+<style scoped>
+.readTop{
+  position: relative;
+  width: 100%;
+  height: 40px;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 45px;
+}
+.back {
+    position: absolute;
+    right:0;
+    color: #529bff;
+}
+
+.baseMes {
+  position: absolute;
+  top: 29px;
+  left: 20px;
+  background-color: #fff;
+  padding: 0 5px;
+}
+/* 表格区域 */
+table {
+  font-size: 14px;
+  color: #333;
+  width: 100%;
+  border: 1px solid #ccc;
+  margin-top: 30px;
+}
+th {
+  width: 20%;
+  border: 1px solid #ccc;
+  height: 40px;
+  background-color: #FAFAFA;
+}
+
+td {
+ padding-left:10px;
+  width: 30%;
+  border: 1px solid #ccc;
+  overflow: hidden;
+}
+td input {
+    width: 100%;
+    height: 40px;
+    border: none;
+    outline: none;
+}
+.el-date-picker {
+    width: 100%;
+}
+.saveBtn {
+    margin:15px 0 10px 545px;
+}
+.trmes th {
+    width:10%;
+    
+}
+.trmes th:nth-child(1){
+ width: 7%;
+}
+.kong {
+    width: 100%;
+    height: 200px;
+    border: none;
+    font-size: 14px;
+position: relative;
+text-align: center;
+line-height:200px;
+    
+}
+.addBtn {
+    display: block;
+    position:absolute;
+    left: 50%;
+   top: 75%;
+   transform: translate(-50%,-50%)
+}
+.addTable {
+    width: 100%;
+    margin-top: 10px;
+}
+.addTable td {
+height: 30px;
+ width: 10%;
+ text-align: center;
+}
+.copy {
+    color: #529BFF;
+}
+.addStu .el-dialog__body {
+    padding-top: 5px;
+}
+.line {
+    width: 100%;
+    height: 1px;
+    background-color: #ccc;
+    margin-top: 30px;
+}
+
+</style>

src/components/message/Read.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <div class="readTop">
+      <div class="baseMes">基本信息</div>
+      <router-link to="/base">
+        <span class="back">返回</span>
+      </router-link>
+    </div>
+    <!-- 表格区域-->
+    <table style="border-collapse:collapse;">
+      <tr class="tr">
+        <th>班级名称:</th>
+        <td colspan="3"></td>
+      </tr>
+      <tr>
+        <th>学科:</th>
+        <td>
+          <span>数学</span>
+        </td>
+        <th>年级:</th>
+        <td></td>
+      </tr>
+      <tr>
+        <th>主负责人:</th>
+        <td>1</td>
+        <th>副负责人:</th>
+        <td>2</td>
+      </tr>
+      <tr>
+        <th>学科教师:</th>
+        <td>1</td>
+        <th>开班日期</th>
+        <td>
+          <span>2019-9-9</span>
+        </td>
+      </tr>
+      <tr>
+        <th>状态:</th>
+        <td>未毕业</td>
+        <th>毕业日期：</th>
+        <td>
+          <span>2019-9-9</span>
+        </td>
+      </tr>
+      
+    </table>
+    <!-- 学生信息区域 -->
+    
+    <div class="readBottom">
+      <div class="baseMes">学生信息</div>
+      <router-link to="/editMessage">
+        <span>编辑</span>
+      </router-link>
+     <div class="readRight">
+   <a href="#" class="daoru">导入</a> |
+     <a href="#" class="zhuanban">转班</a> |
+     <a href="#" class="del">删除</a>
+     </div>
+    </div>
+    
+    <!-- 表格区域 -->
+ <el-table
+ :header-cell-style="{background:'#eee'}"
+    :data="tableData"
+    border
+    style="width: 100%">
+     <el-table-column
+      type="selection"
+     >
+    </el-table-column>
+    <el-table-column
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+      prop="studentName"
+      label="学生姓名"
+      width="">
+    </el-table-column>
+    <el-table-column
+      prop="xuehao"
+      label="学号/登录名"
+      width="">
+    </el-table-column>
+    <el-table-column
+      prop="parentName"
+      label="家长姓名"
+      width="">
+    </el-table-column>
+    <el-table-column
+      prop="parentTel"
+      label="家长手机">
+    </el-table-column>
+    <el-table-column
+      prop="studentTel"
+      label="学生手机">
+    </el-table-column>
+    <el-table-column
+      prop="idNum"
+      label="身份证">
+    </el-table-column>
+    <el-table-column
+      label="操作">
+      <template>
+          <router-link class="bottomEdit" to="/read" >修改</router-link> 
+      </template>
+    </el-table-column>
+     </el-table>
+
+     <!--底部加号 -->
+     <div class="foot">
+         <div class="footIcon"><i class="el-icon-circle-plus"></i></div>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+     return{
+          tableData: [{
+          id: '1',
+          studentName: '第一期',
+          xuehao: 56,
+          parentName:'南湖恺',
+          parentTel:'数学',
+          studentTel:'123',
+          idNum:'黄晓静'
+        }]
+            }
+  },
+           
+   methods:{
+      
+    }
+}
+</script>
+<style scoped>
+.message {
+    overflow: hidden;
+}
+.readTop,.readBottom{
+  position: relative;
+  width: 100%;
+  height: 40px;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 45px;
+}
+.back {
+    position: absolute;
+    right:0;
+    color: #529bff;
+}
+.readBottom span {
+ float: right;
+color: #529bff;
+}
+.baseMes {
+  position: absolute;
+  top: 29px;
+  left: 20px;
+  background-color: #fff;
+  padding: 0 5px;
+}
+/* 表格区域 */
+table {
+  font-size: 14px;
+  color: #333;
+  width: 100%;
+  border: 1px solid #ccc;
+  margin-top: 30px;
+}
+th {
+  width: 20%;
+  border: 1px solid #ccc;
+  height: 50px;
+  background-color: #FAFAFA;
+}
+
+td {
+padding-left:10px;
+  width: 30%;
+  border: 1px solid #ccc;
+}
+.readBottom {
+    margin-top: 5px;
+}
+.readBottom span {
+line-height: 40px;
+}
+.readRight {
+    color:#C7CEE0;
+    position: absolute;
+    right: 0;
+    top: 55px;
+}
+.daoru,.zhuanban {
+    color: #595959;
+    font-size: 14px;
+
+}
+.del {
+      font-size: 14px;
+    color: #EE443E
+}
+
+.bottomEdit {
+    color: #529BFF;
+}
+.foot {
+position: relative;
+width: 100%;
+height: 20px;
+margin-top: 10px;
+}
+.footIcon {
+    font-size: 20xp;
+    display: block;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%)
+} 
+.el-icon-circle-plus:before {
+    font-size: 22px;
+}
+</style>

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './plugins/element.js'
+import './assets/css/gobal.css'
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -3,23 +3,42 @@ import VueRouter from 'vue-router'
 
 import Login from '../components/Login.vue'
 import User from '../components/User.vue'
+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'
 
 Vue.use(VueRouter)
 
 const routes = [
-  { path: '/', redirect: '/login' },
-  {
-    path: '/login',
-    component: Login
-  },
-  {
-    path: '/user',
-    component: User
-  }
+    { path: '/', redirect: '/login' },
+    {
+        path: '/login',
+        component: Login
+    },
+    {
+        path: '/user',
+        component: User
+    },
+    {
+        path: '/home',
+        component: Home,
+        redirect: '/base',
+        children: [{
+            path: '/base',
+            component: Base
+        }, {
+            path: '/read',
+            component: Read
+        }, {
+            path: '/editMessage',
+            component: editMessage
+        }]
+    }
 ]
 
 const router = new VueRouter({
-  routes
+    routes
 })
 
-export default router
+export default router