diff --git a/.gitignore b/.gitignore
index 9ad28d2..3e70728 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ tests/**/coverage/
 *.ntvs*
 *.njsproj
 *.sln
+
diff --git a/src/views/classes/blend/detail.vue b/src/views/classes/blend/detail.vue
new file mode 100644
index 0000000..ac819e4
--- /dev/null
+++ b/src/views/classes/blend/detail.vue
@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <Dec :content="content" />
+    <div class="blendDetail">
+      <p class="footer"><el-button type="primary" @click="$router.push('/classes/blend')">返回</el-button></p>
+      <div style="height:calc(100% - 40px);overflow:auto;">
+        <p>名单名称：0201考室</p>
+        <p>选择学制：小学</p>
+        <p>选择年级：一年级</p>
+        <p>有效期至：2020年03月01日</p>
+        <p>可见范围：全校可见</p>
+        <p>启动状态：正常</p>
+        <p>临时名单：</p>
+        <p style="text-align:right;padding-right:10px;">
+          <el-button type="primary" size="small">导出名单</el-button>
+        </p>
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="no"
+            label="序号"
+            width="180"
+          />
+          <el-table-column
+            prop="name"
+            label="姓名"
+            width="180"
+          />
+          <el-table-column
+            prop="sex"
+            label="性别"
+            width="180"
+          />
+          <el-table-column
+            prop="number"
+            label="学号"
+            width="180"
+          />
+          <el-table-column
+            prop="keybord"
+            label="键盘ID"
+          />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Dec from '@/components/Dec'
+export default {
+  name: 'Detail',
+  components: {
+    Dec
+  },
+  data() {
+    return {
+      content: '',
+      tableData: [{
+        no: 1,
+        name: '张三',
+        sex: '男',
+        number: '1001',
+        keybord: '20200203'
+      }, {
+        no: 2,
+        name: '张三',
+        sex: '男',
+        number: '1002',
+        keybord: '20200204'
+      }, {
+        no: 3,
+        name: '张三',
+        sex: '男',
+        number: '1003',
+        keybord: '20200205'
+      }, {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      }]
+
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style scoped>
+.blendDetail{
+    max-width: 1100px;
+    height:calc(100vh - 115px);
+    margin:0 auto;
+    background: #fff;
+    margin-top:15px;
+    padding:20px;
+    font-size: 14px;
+    position: relative;
+}
+.blendDetail p{
+    line-height: 40px;
+    margin:0;
+}
+.blendDetail .footer{
+    width:100%;
+    height:40px;
+    line-height: 40px;
+    text-align: center;
+    position: absolute;
+    bottom:10px;
+    left:0;
+    background: #fff;
+
+}
+</style>
diff --git a/src/views/classes/blend/index.vue b/src/views/classes/blend/index.vue
new file mode 100644
index 0000000..fa73361
--- /dev/null
+++ b/src/views/classes/blend/index.vue
@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <Dec :content="content" />
+    <div class="blend">
+      <div class="top-box">
+        <el-button type="primary" @click="creattest">创建考试</el-button>
+      </div>
+      <el-row style="height:calc(100% - 56px);">
+        <el-col :span="6" style="height:100%;border-right:1px solid #eee">
+          <ListBox
+            ref="listbox"
+            title="考试"
+            title-bg="#ccc"
+            :data="listData"
+            active-color="rgb(64, 158, 255)"
+            :acitve-index="1"
+            @clicklist="clicklist"
+            @removelist="removelist"
+            @submitname="submitname"
+          />
+        </el-col>
+        <el-col :span="18" style="padding:10px;height:100%;">
+          <p style="margin:0;line-height:40px;font-size:12px;">考试时间：2020年5月1日~2020年5月3日<el-button size="small" icon="el-ump-daochu" style="float:right">批量导出考场名单</el-button></p><div style="clear:both" />
+
+          <div class="class-room">
+            <div class="class-item" @mousemove="hoverIndex = 0" @mouseout="hoverIndex = -1" @click="listDetail('1234')">
+              <el-row>
+                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
+                <el-col :span="17">
+                  <p>考场号：001</p>
+                  <p>考场人数：30人</p>
+                  <p>可见范围：全校可见</p>
+                  <div v-show="hoverIndex==0" class="btn-group">
+                    <i class="el-ump-daochu " />
+                    <i class="el-icon-delete" @click.self="delet($event,'1234')" />
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+            <div class="class-item" @mousemove="hoverIndex = 1" @mouseout="hoverIndex = -1">
+              <el-row>
+                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
+                <el-col :span="17">
+                  <p>考场号：002</p>
+                  <p>考场人数：30人</p>
+                  <p>可见范围：全校可见</p>
+                  <div v-show="hoverIndex==1" class="btn-group">
+                    <i class="el-ump-daochu danger" />
+                    <i class="el-icon-delete" />
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+            <div class="class-item" @mousemove="hoverIndex = 2" @mouseout="hoverIndex = -1">
+              <el-row>
+                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
+                <el-col :span="17">
+                  <p>考场号：003</p>
+                  <p>考场人数：30人</p>
+                  <p>可见范围：全校可见</p>
+                  <div v-show="hoverIndex==2" class="btn-group">
+                    <i class="el-ump-daochu danger" />
+                    <i class="el-icon-delete" />
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+            <div class="class-item" @mousemove="hoverIndex = 3" @mouseout="hoverIndex = -1">
+              <el-row>
+                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
+                <el-col :span="17">
+                  <p>考场号：002</p>
+                  <p>考场人数：30人</p>
+                  <p>可见范围：全校可见</p>
+                  <div v-show="hoverIndex==3" class="btn-group">
+                    <i class="el-ump-daochu danger" />
+                    <i class="el-icon-delete" />
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!--创建考试-->
+    <el-dialog
+      title="创建混班考试"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="随机划分考场" name="first">
+          <el-form ref="random" :model="random" label-width="100px">
+            <el-form-item label="考试名称">
+              <el-input v-model="random.name" style="width:350px;" />
+            </el-form-item>
+            <el-form-item label="考试时间">
+              <el-date-picker
+                v-model="random.date"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                style="width:350px;"
+              />
+            </el-form-item>
+            <el-form-item label="选择年级">
+              <el-select v-model="random.grade" placeholder="请选择" style="width:350px;">
+                <el-option value="1">一年级</el-option>
+                <el-option value="2">二年级</el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="选择班级">
+              <el-select v-model="random.classes" multiple placeholder="请选择" style="width:350px;">
+                <el-option value="1">1班</el-option>
+                <el-option value="2">2班</el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="每个考场人数">
+              <el-input v-model="random.number" style="width:350px;" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="按考试成绩划分考场" name="second">
+          <el-form ref="result" :model="result" label-width="100px">
+            <el-form-item label="考试名称">
+              <el-input v-model="result.name" style="width:350px;" />
+            </el-form-item>
+            <el-form-item label="考试时间">
+              <el-date-picker
+                v-model="result.date"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                style="width:350px;"
+              />
+            </el-form-item>
+            <el-form-item label="选择年级">
+              <el-select v-model="result.grade" placeholder="请选择" style="width:350px;">
+                <el-option value="1">一年级</el-option>
+                <el-option value="2">二年级</el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="选择班级">
+              <el-select v-model="result.classes" multiple placeholder="请选择" style="width:350px;">
+                <el-option value="1">1班</el-option>
+                <el-option value="2">2班</el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="导入成绩">
+              <el-upload
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                multiple
+                :limit="1"
+                :on-exceed="handleExceed"
+              >
+                <el-button size="small" type="primary">点击上传</el-button>
+                <el-link type="primary" style="margin-left:35px;">下载成绩单模板</el-link>
+              </el-upload>
+            </el-form-item>
+            <el-form-item label="每个考场人数">
+              <el-input v-model="result.number" style="width:350px;" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Dec from '@/components/Dec'
+import ListBox from '@/components/ListBox'
+export default {
+  name: 'Blend',
+  components: {
+    Dec,
+    ListBox
+  },
+  data() {
+    return {
+      content: '考室信息短期有效，支持随机快速创建或自定义上传',
+      value: 0,
+      searchtext: '',
+      hoverIndex: -1,
+      dialogVisible: false,
+      dialogVisible1: true,
+      activeName: 'first',
+      listData: [
+        { id: 0, name: '2020年上学期中考试2020年上学期中考试' },
+        { id: 1, name: '2020年入学考试' }
+      ],
+      random: {
+        name: '',
+        date: '',
+        grade: '',
+        classes: '',
+        number: ''
+      },
+      result: {
+        name: '',
+        date: '',
+        grade: '',
+        classes: '',
+        number: ''
+      }
+    }
+  },
+  methods: {
+    search() {
+      console.log(1)
+    },
+    clicklist(index) {
+      console.log(index)
+    },
+    removelist(index) {
+      console.log(index)
+    },
+    submitname(index) {
+      this.listData[index].edit = false
+    },
+    creattest() {
+      this.dialogVisible = true
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done()
+        })
+        .catch(_ => {})
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview(file) {
+      console.log(file)
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件`)
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+    listDetail(id) {
+      this.$router.push({ path: '/classes/blendDetail', query: { id }})
+      console.log(id)
+    },
+    delet(event, id) {
+      event.stopPropagation()
+      console.log(id)
+    }
+  }
+}
+</script>
+<style scoped>
+.blend{
+    max-width: 1100px;
+    height:calc(100vh - 115px);
+    margin:0 auto;
+    background: #fff;
+    margin-top:15px;
+    padding:20px;
+}
+.top-box{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ccc;
+}
+.class-item{
+    width:49%;
+    float: left;
+    border:1px solid #888;
+    padding:10px 0;
+    border-radius: 20px;
+    margin-bottom:5px;
+    position: relative;
+}
+.class-item:nth-child(2n+1){
+    margin-right:2%;
+}
+.class-item p span{
+    font-size: 12px;
+    color:#888;
+}
+.class-item .left20{
+    margin-left: 20px;
+}
+.class-item .left30{
+    margin-left: 30px;
+}
+.btn-group{
+    font-size: 20px;
+    position: absolute;
+    top:0px;
+    right:20px;
+}
+.btn-group i{
+    cursor: pointer;
+    margin-right: 5px;
+}
+.class-room{
+    height:calc(100% - 32px);
+    overflow: auto;
+}
+</style>
diff --git a/src/views/classes/classes/index.vue b/src/views/classes/classes/index.vue
new file mode 100644
index 0000000..8d304e5
--- /dev/null
+++ b/src/views/classes/classes/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <Dec :content="content" />
+    <div class="classes">
+      <div class="top-box">
+        <el-row>
+          <el-col :span="12">
+            <el-button type="primary" @click="$router.push('/classes/add')">添加班级</el-button>
+          </el-col>
+          <el-col :span="12">
+            <span>状态：</span>
+            <el-select v-model="value" style="width:120px" placeholder="请选择">
+              <el-option :value="0" label="全部" />
+              <el-option :value="1" label="毕业" />
+              <el-option :value="2" label="在读启用" />
+              <el-option :value="3" label="在读禁用" />
+            </el-select>
+            <el-input
+              v-model="searchtext"
+              placeholder="班级名称或编号"
+              style="width:220px"
+            >
+              <i slot="suffix" class="el-input__icon el-icon-search" @click="search" />
+            </el-input>
+          </el-col>
+        </el-row>
+      </div>
+      <el-row style="height:calc(100% - 56px);">
+        <el-col :span="6" style="height:100%;border-right:1px solid #eee">
+          <ListBox
+            ref="listbox"
+            title="年级"
+            title-bg="#ccc"
+            :data="listData"
+            active-color="rgb(64, 158, 255)"
+            :acitve-index="1"
+            @clicklist="clicklist"
+            @removelist="removelist"
+            @submitname="submitname"
+          />
+        </el-col>
+        <el-col :span="18" style="padding:10px;">
+          <p style="text-align:right;padding-bottom:10px;margin:0;line-height:40px;"><el-button size="small" icon="el-ump-qingchu">删除毕业班级</el-button></p>
+          <div style="clear:both" />
+          <div class="class-item" @mousemove="hoverIndex = 0" @mouseout="hoverIndex = -1" @click="classDetail('1234')">
+            <el-row>
+              <el-col :span="4" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
+              <el-col :span="18">
+                <p>一年八班 <span>（在读启用）</span></p>
+                <p><span>小学一年级</span><span class="left20">55人</span><span class="left20">班级编号：2134</span></p>
+                <p><span>班主任：李四</span><span class="left30">任课老师：张三、王欧、李帅</span></p>
+                <div v-show="hoverIndex==0" class="btn-group">
+                  <i class="el-ump-jinzhi" />
+                  <i class="el-icon-edit" @click="edit($event,'1234')" />
+                  <i class="el-icon-delete" />
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="class-item" style="color:#888" @mouseover="hoverIndex=1" @mouseout="hoverIndex=-1">
+            <el-row>
+              <el-col :span="4" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
+              <el-col :span="18">
+                <p>一年八班 <span>（在读禁用）</span></p>
+                <p><span>小学一年级</span><span class="left20">55人</span><span class="left20">班级编号：2134</span></p>
+                <p><span>班主任：李四</span><span class="left30">任课老师：张三、王欧、李帅</span></p>
+                <div v-show="hoverIndex==1" class="btn-group">
+                  <i class="el-ump-jinzhi" />
+                  <i class="el-icon-edit" />
+                  <i class="el-icon-delete" />
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import Dec from '@/components/Dec'
+import ListBox from '@/components/ListBox'
+export default {
+  name: 'Classes',
+  components: {
+    Dec,
+    ListBox
+  },
+  data() {
+    return {
+      content: '信息管理员或者班主任可创建和管理班级',
+      value: 0,
+      searchtext: '',
+      hoverIndex: -1,
+      listData: [
+        { id: 0, name: '全部（30）', removeIcon: false },
+        { id: 2, name: '小学一年级（10）' },
+        { id: 3, name: '小学二年级（10）' },
+        { id: 4, name: '小学三年级（10）' }
+      ]
+    }
+  },
+  methods: {
+    search() {
+      console.log(1)
+    },
+    clicklist(index) {
+      console.log(index)
+    },
+    removelist(index) {
+      console.log(index)
+    },
+    submitname(index) {
+      this.listData[index].edit = false
+    },
+    classDetail(id) {
+      console.log(id)
+      this.$router.push({ path: '/classes/classDetail', query: { id }})
+    },
+    edit(event, id) {
+      event.stopPropagation()
+      this.$router.push({ path: '/classes/add', query: { id }})
+    }
+  }
+}
+</script>
+<style scoped>
+.classes{
+    max-width: 1100px;
+    height:calc(100vh - 115px);
+    margin:0 auto;
+    background: #fff;
+    margin-top:15px;
+    padding:20px;
+}
+.top-box{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ccc;
+}
+.class-item{
+    border:1px solid #888;
+    padding:10px 0;
+    border-radius: 20px;
+    margin-bottom:5px;
+    position: relative;
+}
+.class-item p span{
+    font-size: 12px;
+    color:#888;
+}
+.class-item .left20{
+    margin-left: 20px;
+}
+.class-item .left30{
+    margin-left: 30px;
+}
+.btn-group{
+    font-size: 20px;
+    position: absolute;
+    top:10px;
+    right:20px;
+}
+.btn-group i{
+    cursor: pointer;
+    margin-right: 5px;
+}
+</style>
diff --git a/src/views/classes/classes/page/add.vue b/src/views/classes/classes/page/add.vue
new file mode 100644
index 0000000..88cc3cf
--- /dev/null
+++ b/src/views/classes/classes/page/add.vue
@@ -0,0 +1,296 @@
+<template>
+  <div>
+    <Dec :content="content" />
+    <div class="add">
+      <p class="footer">
+        <el-button v-show="active==1" type="primary" @click="next">下一步</el-button>
+        <el-button v-show="active==1" type="danger" @click="close">取消</el-button>
+
+        <el-button v-show="active==2" type="primary" @click="prev">上一步</el-button>
+        <el-button v-show="active==2" type="primary" @click="save">保存</el-button>
+      </p>
+      <div style="height:calc(100% - 40px);overflow:auto;">
+        <el-steps :active="active" style="width:50%;margin:0 auto;">
+          <el-step title="添加班级信息" />
+          <el-step title="添加学生信息" />
+        </el-steps>
+        <div v-show="active==1">
+          <el-form ref="classes" :model="classes" label-width="100px" style="margin-top:30px;">
+            <el-form-item label="班级名称">
+              <el-input v-model="classes.name" style="width:400px;" placeholder="请输入班级名称" />
+            </el-form-item>
+            <el-form-item label="年级">
+              <el-select v-model="classes.lengthof" style="width:198px;" placeholder="请选择">
+                <el-option
+                  v-for="item in lengthof"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-select v-model="classes.grade" style="width:198px;" placeholder="请选择">
+                <el-option
+                  v-for="item in grade"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="班主任">
+              <el-select v-model="classes.tutor" style="width:400px;" placeholder="请选择">
+                <el-option
+                  v-for="item in tutor"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="任课老师">
+              <el-select v-model="classes.subjectTeacher" style="width:400px;" multiple placeholder="请选择">
+                <el-option
+                  v-for="item in subjectTeacher"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select v-model="classes.state" style="width:400px;" placeholder="请选择">
+                <el-option
+                  v-for="item in state"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div v-show="active==2">
+          <div class="btn-group">
+            <el-button type="primary" @click="studentdialog=true">添加学生</el-button>
+            <el-button type="primary" @click="importdialog=true">批量导入</el-button>
+            <el-button type="danger">批量删除</el-button>
+          </div>
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            @selection-change="getdata"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+            />
+            <el-table-column
+              prop="no"
+              label="序号"
+              width="180"
+            />
+            <el-table-column
+              prop="name"
+              label="姓名"
+              width="180"
+            />
+            <el-table-column
+              prop="sex"
+              label="性别"
+            />
+            <el-table-column
+              prop="number"
+              label="学号"
+            />
+            <el-table-column
+              prop="keybord"
+              label="键盘ID"
+            />
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!--添加学生-->
+    <el-dialog
+      title="添加学生"
+      :visible.sync="studentdialog"
+      width="30%"
+    >
+
+      <el-form ref="student" :model="student" label-width="100px" style="margin-top:30px;">
+        <el-form-item label="姓名">
+          <el-input v-model="student.name" style="width:300px;" placeholder="请输入学生名称" />
+        </el-form-item>
+        <el-form-item label="学号">
+          <el-input v-model="student.number" style="width:300px;" placeholder="请输入学号" />
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-select v-model="student.sex" style="width:300px;" placeholder="请选择性别">
+            <el-option value="0" label="男" />
+            <el-option value="1" label="女" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="答题器编号">
+          <el-input v-model="student.keybord" style="width:300px;" placeholder="请输入答题器编号" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="studentdialog = false">取 消</el-button>
+        <el-button type="primary" @click="studentdialog = false">保 存</el-button>
+      </span>
+    </el-dialog>
+    <!--批量导入-->
+    <el-dialog
+      title="批量导入学生"
+      :visible.sync="importdialog"
+      width="30%"
+    >
+      <p>第一步：下载模板并编辑完成学生的信息 <el-link type="primary"><i class="el-ump-xiazai" />下载导入模板</el-link></p>
+      <p>第二步：上传编辑完成的模板文件，完成导入</p>
+      <el-upload
+        class="upload-demo"
+        action="https://jsonplaceholder.typicode.com/posts/"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :before-remove="beforeRemove"
+        multiple
+        :limit="1"
+        :on-exceed="handleExceed"
+      >
+        <el-button size="small" type="primary">选择文件并上传</el-button>
+        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+      </el-upload>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="importdialog = false">取 消</el-button>
+        <el-button type="primary" @click="importdialog = false">保 存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Dec from '@/components/Dec'
+export default {
+  name: 'Add',
+  components: {
+    Dec
+  },
+  data() {
+    return {
+      content: '',
+      active: 1,
+      show: true,
+      studentdialog: false,
+      importdialog: false,
+      lengthof: [
+        { label: '小学', value: '1' },
+        { label: '中学', value: '2' },
+        { label: '大学', value: '3' }
+      ],
+      grade: [
+        { label: '一年级', value: '1' },
+        { label: '二年级', value: '2' },
+        { label: '三年级', value: '3' },
+        { label: '四年级', value: '4' }
+      ],
+      tutor: [
+        { label: '李老师', value: '1' },
+        { label: '张老师', value: '2' }
+      ],
+      subjectTeacher: [
+        { label: '数学老师', value: '1' },
+        { label: '语文老师', value: '2' },
+        { label: '英文老师', value: '3' }
+      ],
+      state: [
+        { label: '在读启用', value: '1' },
+        { label: '在读禁用', value: '2' },
+        { label: '已毕业', value: '3' }
+      ],
+      classes: {
+        name: '',
+        lengthof: '',
+        grade: '',
+        tutor: '',
+        subjectTeacher: '',
+        state: ''
+
+      },
+      tableData: [
+        { no: '0', name: '张三', sex: '男', number: '0001', keybord: '20200101' },
+        { no: '1', name: '李四', sex: '男', number: '0002', keybord: '20200102' },
+        { no: '2', name: '王五', sex: '男', number: '0003', keybord: '20200103' }
+      ],
+      student: {
+        name: '',
+        sex: '',
+        number: '',
+        keybord: ''
+      }
+
+    }
+  },
+  methods: {
+    next() {
+      this.active = 2
+    },
+    close() {
+      this.$router.push('/classes/classes')
+    },
+    prev() {
+      this.active = 1
+    },
+    save() {
+      this.$router.push('/classes/classes')
+    },
+    getdata(data) {
+      console.log(data)
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview(file) {
+      console.log(file)
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件`)
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    }
+
+  }
+}
+</script>
+<style scoped>
+.add{
+    max-width: 1100px;
+    height:calc(100vh - 115px);
+    margin:0 auto;
+    background: #fff;
+    margin-top:15px;
+    padding:20px;
+    font-size: 14px;
+    position: relative;
+}
+.add p{
+    line-height: 40px;
+    margin:0;
+}
+.add .footer{
+    width:100%;
+    height:40px;
+    line-height: 40px;
+    text-align: center;
+    position: absolute;
+    bottom:10px;
+    left:0;
+    background: #fff;
+
+}
+.el-tag{
+    margin-right:5px;
+}
+.btn-group{
+    margin-top:30px;
+}
+</style>
diff --git a/src/views/classes/classes/page/detail.vue b/src/views/classes/classes/page/detail.vue
new file mode 100644
index 0000000..2b79e79
--- /dev/null
+++ b/src/views/classes/classes/page/detail.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <Dec :content="content" />
+    <div class="classDetail">
+      <p class="footer"><el-button type="primary" @click="$router.push('/classes/classes')">返回</el-button></p>
+      <div style="height:calc(100% - 40px);overflow:auto;">
+        <p>班级名称：一年级八班</p>
+        <p>选择学制：小学</p>
+        <p>选择年级：一年级</p>
+        <p>入学年份：2020年09月</p>
+        <p>班主任：<el-tag>蔡徐坤</el-tag></p>
+        <p>任课老师：<el-tag>周杰伦</el-tag><el-tag>蔡依林</el-tag></p>
+        <p>班级名单：</p>
+        <p style="text-align:right;padding-right:10px;">
+          <el-button type="primary" size="small">导出名单</el-button>
+        </p>
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="no"
+            label="序号"
+            width="180"
+          />
+          <el-table-column
+            prop="name"
+            label="姓名"
+            width="180"
+          />
+          <el-table-column
+            prop="sex"
+            label="性别"
+            width="180"
+          />
+          <el-table-column
+            prop="number"
+            label="学号"
+            width="180"
+          />
+          <el-table-column
+            prop="keybord"
+            label="键盘ID"
+          />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Dec from '@/components/Dec'
+export default {
+  name: 'Detail',
+  components: {
+    Dec
+  },
+  data() {
+    return {
+      content: '',
+      tableData: [{
+        no: 1,
+        name: '张三',
+        sex: '男',
+        number: '1001',
+        keybord: '20200203'
+      }, {
+        no: 2,
+        name: '张三',
+        sex: '男',
+        number: '1002',
+        keybord: '20200204'
+      }, {
+        no: 3,
+        name: '张三',
+        sex: '男',
+        number: '1003',
+        keybord: '20200205'
+      }, {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      },
+      {
+        no: 4,
+        name: '张三',
+        sex: '男',
+        number: '1004',
+        keybord: '20200206'
+      }]
+
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style scoped>
+.classDetail{
+    max-width: 1100px;
+    height:calc(100vh - 115px);
+    margin:0 auto;
+    background: #fff;
+    margin-top:15px;
+    padding:20px;
+    font-size: 14px;
+    position: relative;
+}
+.classDetail p{
+    line-height: 40px;
+    margin:0;
+}
+.classDetail .footer{
+    width:100%;
+    height:40px;
+    line-height: 40px;
+    text-align: center;
+    position: absolute;
+    bottom:10px;
+    left:0;
+    background: #fff;
+
+}
+.el-tag{
+    margin-right:5px;
+}
+</style>