diff --git "a/src/assets/img404/\344\270\212\344\274\240.png" "b/src/assets/img404/\344\270\212\344\274\240.png"
new file mode 100644
index 0000000000000000000000000000000000000000..945f33010feaba99af360f18460f8f529e7c405e
Binary files /dev/null and "b/src/assets/img404/\344\270\212\344\274\240.png" differ
diff --git "a/src/assets/img404/\345\210\207\346\215\242.png" "b/src/assets/img404/\345\210\207\346\215\242.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a94ba281d56dea7c9c17ce48348c58ac11ce773e
Binary files /dev/null and "b/src/assets/img404/\345\210\207\346\215\242.png" differ
diff --git "a/src/assets/img404/\345\210\227.png" "b/src/assets/img404/\345\210\227.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fc9244d0f63ab418ce7b30fec1062376c5fb00cc
Binary files /dev/null and "b/src/assets/img404/\345\210\227.png" differ
diff --git "a/src/assets/img404/\345\210\235\351\237\263\343\203\237\343\202\257.jpg" "b/src/assets/img404/\345\210\235\351\237\263\343\203\237\343\202\257.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..74ca2d189fd5d4c4e4231987c519ab720eb1a074
Binary files /dev/null and "b/src/assets/img404/\345\210\235\351\237\263\343\203\237\343\202\257.jpg" differ
diff --git "a/src/assets/img404/\345\210\240\351\231\244.png" "b/src/assets/img404/\345\210\240\351\231\244.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2b6f85dd7ae283576d88557b31fbd30f8f995fc2
Binary files /dev/null and "b/src/assets/img404/\345\210\240\351\231\244.png" differ
diff --git "a/src/assets/img404/\345\220\221\344\270\213.png" "b/src/assets/img404/\345\220\221\344\270\213.png"
new file mode 100644
index 0000000000000000000000000000000000000000..66884576949c90de994ba4022694508e2953b4f7
Binary files /dev/null and "b/src/assets/img404/\345\220\221\344\270\213.png" differ
diff --git "a/src/assets/img404/\345\257\274\345\207\272\346\225\260\346\215\256.png" "b/src/assets/img404/\345\257\274\345\207\272\346\225\260\346\215\256.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c712efbbe378b74c4bc174e28cec49cb31525ce0
Binary files /dev/null and "b/src/assets/img404/\345\257\274\345\207\272\346\225\260\346\215\256.png" differ
diff --git "a/src/assets/img404/\346\224\276\345\244\247\351\225\234.png" "b/src/assets/img404/\346\224\276\345\244\247\351\225\234.png"
new file mode 100644
index 0000000000000000000000000000000000000000..39c93935aeaacb559f183cfa768aa86278427d71
Binary files /dev/null and "b/src/assets/img404/\346\224\276\345\244\247\351\225\234.png" differ
diff --git "a/src/assets/img404/\347\226\221\351\227\256.png" "b/src/assets/img404/\347\226\221\351\227\256.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8f6a78b1e310484f58b7f51393b20702807763cb
Binary files /dev/null and "b/src/assets/img404/\347\226\221\351\227\256.png" differ
diff --git "a/src/assets/img404/\350\217\234\345\215\225.png" "b/src/assets/img404/\350\217\234\345\215\225.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c46e62ebedab63ce7e1440b7a9be7674bfee48bc
Binary files /dev/null and "b/src/assets/img404/\350\217\234\345\215\225.png" differ
diff --git a/src/request/api.js b/src/request/api.js
index 7edcef09ab939ed2bc62774488763c856233f808..55dbeb880a07532b56aee9e1cf204d47461dc119 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -42,4 +42,8 @@ const xcglsxan = data => get("https://www.fastmock.site/mock/d467c907f5ee1bbc555
 const xrsjbgAll = data => get("https://www.fastmock.site/mock/d467c907f5ee1bbc55539f227e53638a/suer/xcgl/sjbg", data);
 // 考试管理的渲染数据表格
 const kssjbgxr = data => get("https://www.fastmock.site/mock/d467c907f5ee1bbc55539f227e53638a/suer/ydgl/sjbg", data)
-export default { getSchoolAll,getcla, gnanxr, sjbgxr, xcglsxan, xrsjbgAll, kssjbgxr, getSubject, getWork, getInform, getInf, getSchool1, getModel, getEmploy, getSchname, getStudent, getClasses, getAdmin, getPage }
+const tablesj = data => get("https://www.fastmock.site/mock/e01fffb158faac46f499feb8ffbe1ccd/class/clokIn/manage",data)
+
+
+
+export default {tablesj, getSchoolAll,getcla, gnanxr, sjbgxr, xcglsxan, xrsjbgAll, kssjbgxr, getSubject, getWork, getInform, getInf, getSchool1, getModel, getEmploy, getSchname, getStudent, getClasses, getAdmin, getPage }
diff --git a/src/views/ClockIn/index.vue b/src/views/ClockIn/index.vue
index 9e70cd9cc40ba5656625fdb632fba8adb3185444..0cb4758deea8dac4a131654f8a95c7c543194757 100644
--- a/src/views/ClockIn/index.vue
+++ b/src/views/ClockIn/index.vue
@@ -1,29 +1,1076 @@
 <template>
-    <div>
-        <h1>打卡</h1>
+    <div class="boxq">
+    <div class="top-skipq">
+      <div
+        v-for="(item, i) in status"
+        :key="i"
+        @click="xgbjs(i, item)"
+        :class="{ bgs: isAnd(i) }"
+      >
+        {{ item }}
+      </div>
     </div>
+    <div class="bottom-content">
+      <div class="Input_field" v-show="kzyc">
+        <ul>
+          <li>
+            <span>班级</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -8px">
+            <span>学校名称</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li>
+            <span>打卡ID</span
+            ><el-input
+              v-model="input3"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>标题</span
+            ><el-input
+              v-model="input4"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; right:27px">
+            <span>开始日期</span
+            ><el-input
+              v-model="input5"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; right:27px">
+            <span>结束日期</span
+            ><el-input
+              v-model="input6"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: 2px">
+            <span>科目</span
+            ><el-select v-model="value1" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -27px">
+            <span>发布老师</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative;left:-2px">
+            <span>显示</span>
+            <el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: 370px;top:-60px">
+            <span>更新时间</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative;left:-27px">
+            <span>打卡列表</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left: 170px">
+            <el-button
+              type="success"
+              style="background-color: #18bc9c;text-align: center;"
+              class="tj"
+              >提交</el-button
+            >
+            <el-button class="cz">重置</el-button>
+          </li>
+        </ul>
+      </div>
+      <div class="bottom-button">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            class="reload"
+            @click="Refresh"
+          ></el-button>
+        </div>
+        <div>
+          <el-button type="append" icon="el-icon-plus" class="append" @click="dialogVisibless = true"
+            >添加</el-button
+          >
+        </div>
+        <div>
+          <el-button type="editor" icon="el-icon-edit" class="editor" @click="dialogVisibleq = true"
+            >编辑</el-button
+          >
+        </div>
+        <div>
+          <el-button type="delete" icon="el-icon-delete" class="delete" @click="dialogVisibles = true"
+            >删除</el-button
+          >
+        </div>
+        <el-input
+          v-model="input1"
+          placeholder="搜索"
+          style="width: 210px; margin: 10px 10px 0 810px"
+        ></el-input>
+        <ul style="display: flex;margin-top:10px;position: relative;">
+          <li class="qh"><img src="@/assets/img404/切换.png" /></li>
+          <li @click="xlklie" style="cursor: pointer">
+            <img src="@/assets/img404/列.png" /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -2px;
+              "
+            />
+          </li>
+          <li class="dc">
+            <img
+              src="@/assets/img404/导出数据.png"
+              style="margin-top: 8px"
+            /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -5px;
+              "
+            />
+          </li>
+          <!-- <div class="liexlkq" v-show="liexlk">
+        <el-checkbox v-model="checked[0]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[1]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[2]" style="margin: 0 0 20px" 
+          >打卡ID</el-checkbox
+        >
+        <el-checkbox v-model="checked[3]" style="margin: 0 0 20px" 
+          >标题</el-checkbox
+        >
+        <el-checkbox v-model="checked[4]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[5]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[6]" style="margin: 0 0 20px" 
+          >开始日期</el-checkbox
+        >
+        <el-checkbox v-model="checked[7]" style="margin: 0 0 20px" 
+          >结束日期</el-checkbox
+        >
+        <el-checkbox v-model="checked[8]" style="margin: 0 0 20px" 
+          >科目</el-checkbox
+        >
+        <el-checkbox v-model="checked[9]" style="margin: 0 0 20px" 
+          >发布老师</el-checkbox
+        >
+        <el-checkbox v-model="checked[10]" style="margin: 0 0 20px" 
+          >显示</el-checkbox
+        >
+        <el-checkbox v-model="checked[11]" style="margin: 0 0 20px" 
+          >更新时间</el-checkbox
+        >
+        <el-checkbox v-model="checked[12]" style="margin: 0 0 20px" 
+          >打卡列表</el-checkbox
+        >
+        <el-checkbox v-model="checked[13]" style="margin: 0 0 20px" 
+          >操作</el-checkbox
+        >
+      </div> -->
+      <div class="liexlkq" v-show="liexlk">
+        <el-checkbox v-model="checked[0]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[1]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[2]" style="margin: 0 0 20px" 
+          >打卡ID</el-checkbox
+        >
+        <el-checkbox v-model="checked[3]" style="margin: 0 0 20px" 
+          >标题</el-checkbox
+        >
+        <el-checkbox v-model="checked[4]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[5]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[6]" style="margin: 0 0 20px" 
+          >开始日期</el-checkbox
+        >
+        <el-checkbox v-model="checked[7]" style="margin: 0 0 20px" 
+          >结束日期</el-checkbox
+        >
+        <el-checkbox v-model="checked[8]" style="margin: 0 0 20px" 
+          >科目</el-checkbox
+        >
+        <el-checkbox v-model="checked[9]" style="margin: 0 0 20px" 
+          >发布老师</el-checkbox
+        >
+        <el-checkbox v-model="checked[10]" style="margin: 0 0 20px" 
+          >显示</el-checkbox
+        >
+        <el-checkbox v-model="checked[11]" style="margin: 0 0 20px" 
+          >更新时间</el-checkbox
+        >
+        <el-checkbox v-model="checked[12]" style="margin: 0 0 20px" 
+          >打卡时间</el-checkbox
+        >
+        <el-checkbox v-model="checked[13]" style="margin: 0 0 20px" 
+          >操作</el-checkbox
+        >
+      </div>
+        </ul>
+        <div class="sousuo" @click="kzsx">
+          <img src="@/assets/img404/放大镜.png" />
+        </div>
+      </div>
+      
+      <div>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[0]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[1]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column prop="id" label="打卡ID" width="120" v-if="checked[2]">
+            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
+          </el-table-column>
+          <el-table-column prop="title" label="标题" width="120" v-if="checked[3]">
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[4]">
+          </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[5]">
+          </el-table-column>
+          <el-table-column prop="startday" label="开始日期" show-overflow-tooltip v-if="checked[6]">
+          </el-table-column>
+          <el-table-column prop="endday" label="结束日期" show-overflow-tooltip v-if="checked[7]">
+          </el-table-column>
+          <el-table-column prop="km" label="科目" show-overflow-tooltip v-if="checked[8]">
+          </el-table-column>
+          <el-table-column prop="name" label="发布老师" show-overflow-tooltip v-if="checked[9]">
+          </el-table-column>
+          <el-table-column prop="value" label="显示" show-overflow-tooltip v-if="checked[10]">
+                        <template slot-scope="scope">
+                                    <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0"
+                        @click="open1"
+                        >
+                    </el-switch>
+                    </template>                        
+          </el-table-column>
+          <!-- <el-table-column label="审核状态" width="120">
+            <template slot-scope="scope">
+                <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0">
+                    </el-switch>      
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="gxtime" label="更新时间" show-overflow-tooltip v-if="checked[11]">
+          </el-table-column>
+          <el-table-column prop="address" label="打卡列表" show-overflow-tooltip v-if="checked[12]">
+            <el-button type="primary" icon="el-icon-view" class="view" style="width:55px;height:25px;padding:0;border-radius:0;background-color:#18bc9c;font-size:12px;border-color:#18bc9c" @click="dialogVisible = true">查看</el-button>
+          </el-table-column>
+          <el-table-column prop="" label="操作" show-overflow-tooltip v-if="checked[13]">
+            <el-button type="primary" icon="el-icon-edit" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#18bc9c;border-color:#18bc9c" @click="dialogVisibleq = true"></el-button>
+            
+            <el-button type="primary" icon="el-icon-delete-solid" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#f75444;border-color:#f75444" @click="dialogVisibles = true"></el-button>
+            
+          </el-table-column>
+        </el-table>
+        <!-- 分页↓ -->
+        <div class="fy" v-for="(item,u) in fy" :key="u">
+          <span style="margin-left:30px">显示第{{item.one}}到第{{item.two}}条记录，总共{{item.three}}条数据</span>
+          <span>每页显示
+             <el-select v-model="values" placeholder="" filterable style="width:70px;padding:0">
+                <el-option v-for="item in options" :key="item.values" :label="item.label" :value="item.values"></el-option>
+              </el-select>
+              条记录
+          </span>
+          <div style="margin:0 10px 0 500px">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="1000">
+            </el-pagination>
+          </div>
+          <el-input v-model="input7"  style="width:60px"></el-input>
+          <el-button type="info" plain style="background-color:#f4f4f4;margin-left:10px;color:#000">跳转</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 查看模态框↓ -->
+    <el-dialog :visible.sync="dialogVisible" width="50%" :before-close="handleClose" v-el-drag-dialog>
+        <span class="wxts">查看</span>
+        <div class="Input_field" v-show="kzyc">
+        <ul style="display:flex;flex-wrap:wrap;">
+          <li style="margin:0 10px 20px 60px">
+            <span>班级</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -8px;margin: 0 10px 0 10px">
+            <span>用户ID</span
+            ><el-input
+              v-model="input2"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>头像</span
+            ><el-input
+              v-model="input3"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin:0 34px 20px 60px">
+            <span>姓名</span
+            ><el-input
+              v-model="input4"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -14px">
+            <span>手机号</span
+            ><el-input
+              v-model="input5"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left:5px">
+            <span>性别</span
+            ><el-input
+              v-model="input6"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -20px;margin: 0 50px 20px 53px">
+            <span>审核状态</span
+            ><el-select v-model="value1" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -55px">
+            <span>所在班级</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left: 10px">
+            <el-button
+              type="success"
+              style="background-color: #18bc9c;text-align: center;"
+              class="tj"
+              >提交</el-button
+            >
+            <el-button class="cz">重置</el-button>
+          </li>
+        </ul>
+      </div>
+        <div class="bottom-button">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            class="reload"
+            @click="Refresh"
+          ></el-button>
+        </div>
+        <div>
+          <el-button type="append" icon="el-icon-plus" class="append" @click="dialogVisibless = true"
+            >添加</el-button
+          >
+        </div>
+        <div>
+          <el-button type="delete" icon="el-icon-delete" class="delete"
+            >删除</el-button
+          >
+        </div>
+        <el-input
+          v-model="input1"
+          placeholder="搜索"
+          style="width: 210px; margin: 10px 10px 0 140px"
+        ></el-input>
+        <ul style="display: flex;margin:10px;position: relative;">
+          <li class="qh"><img src="@/assets/img404/切换.png" /></li>
+          <li @click="xlklie" style="cursor: pointer">
+            <img src="@/assets/img404/列.png" /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -2px;
+              "
+            />
+          </li>
+          <li class="dc">
+            <img
+              src="@/assets/img404/导出数据.png"
+              style="margin-top: 8px"
+            /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -5px;
+              "
+            />
+          </li>
+        </ul>
+        <div class="sousuo" @click="kzsx" style="position: relative;top:0">
+          <img src="@/assets/img404/放大镜.png" />
+        </div>
+      </div>
+      <div>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[0]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[1]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column prop="id" label="打卡ID" width="120" v-if="checked[2]">
+            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
+          </el-table-column>
+          <el-table-column prop="title" label="标题" width="120" v-if="checked[3]">
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[4]">
+          </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[5]">
+          </el-table-column>
+          <el-table-column prop="startday" label="开始日期" show-overflow-tooltip v-if="checked[6]">
+          </el-table-column>
+          <el-table-column prop="endday" label="结束日期" show-overflow-tooltip v-if="checked[7]">
+          </el-table-column>
+          <el-table-column prop="km" label="科目" show-overflow-tooltip v-if="checked[8]">
+          </el-table-column>
+          <el-table-column prop="fbteacher" label="发布老师" show-overflow-tooltip v-if="checked[9]">
+          </el-table-column>
+          <el-table-column prop="value" label="显示" show-overflow-tooltip v-if="checked[10]">
+                        <template slot-scope="scope">
+                                    <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0"
+                        @click="open1"
+                        >
+                    </el-switch>
+                    </template>                        
+          </el-table-column>
+          <!-- <el-table-column label="审核状态" width="120">
+            <template slot-scope="scope">
+                <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0">
+                    </el-switch>      
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="gxtime" label="更新时间" show-overflow-tooltip v-if="checked[11]">
+          </el-table-column>
+          <el-table-column prop="address" label="打卡列表" show-overflow-tooltip v-if="checked[12]">
+            <el-button type="primary" icon="el-icon-view" class="view" style="width:55px;height:25px;padding:0;border-radius:0;background-color:#18bc9c;font-size:12px;border-color:#18bc9c" @click="dialogVisible = true">查看</el-button>
+          </el-table-column>
+          <el-table-column prop="address" label="操作" show-overflow-tooltip v-if="checked[13]">
+            <el-button type="primary" icon="el-icon-edit" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#18bc9c;border-color:#18bc9c" @click="dialogVisibleq = true"></el-button>
+            
+            <el-button type="primary" icon="el-icon-delete-solid" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#f75444;border-color:#f75444" @click="dialogVisibles = true"></el-button>
+            
+          </el-table-column>
+        </el-table> 
+        <!-- 分页↓ -->
+        <div class="fy" v-for="(item,u) in fy" :key="u">
+          <span style="margin-left:30px">显示第{{item.one}}到第{{item.two}}条记录，总共{{item.three}}条数据</span>
+          <span>每页显示
+             <el-select v-model="values" placeholder="" filterable style="width:70px;padding:0">
+                <el-option v-for="item in options" :key="item.values" :label="item.label" :value="item.values"></el-option>
+              </el-select>
+              条记录
+          </span>
+        </div>
+      </div>
+        <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>
+    <!-- 添加模态框 -->
+    <el-dialog :visible.sync="dialogVisibless" width="40%" :before-close="handleClosess" v-el-drag-dialog class="tianjia">
+        <span class="wxts">添加</span>
+        <div class="margin"><span style="margin:0 20px 0 0">姓名:</span><el-input v-model="input7" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 27px"><span style="margin:0 20px 0 0">手机号:</span><el-input v-model="input8" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 100px;display:flex;"><input type="radio" name="sex">&nbsp;男<input type="radio" name="sex" style="margin-left:10px">&nbsp;女</div>
+        <div style="margin:10px 0 10px 15px;"><span style="margin:0 20px 0 0">学校名称:</span><el-select v-model="valuee" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionss" :key="item.valuee" :label="item.label" :value="item.valuee"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 43px;"><span style="margin:0 20px 0 0">班级:</span><el-select v-model="valuew" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionsss" :key="item.valuew" :label="item.label" :value="item.valuew"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 15px;"><span style="margin:0 20px 0 0">任教科目:</span><el-select v-model="valueq" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionssss" :key="item.valueq" :label="item.label" :value="item.valueq"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 100px;display:flex;"><input type="radio" name="yes">&nbsp;否<input type="radio" name="yes" style="margin-left:10px">&nbsp;是</div>
+        <div style="display:flex;align-items: center;margin:10px 0 10px 45px"><span style="margin:0 20px 0 0">头像:</span><el-input v-model="input9" placeholder="" style="width:420px"></el-input><el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList"
+  :show-file-list="false">
+  <el-button size="small" type="primary" style="background-color:#f75444;border-color:#f75444;margin:0 10px 0 10px"><img src="@/assets/img404/上传.png" alt="">&nbsp;&nbsp;上传</el-button>
+  </el-upload>
+  <el-button type="primary" style="background-color:#444c69;height:38px;border-color:#444c69"><img src="@/assets/img404/菜单.png" alt=""><span style="position: relative;top: -3px;font-size:12px">选择</span></el-button>
+  </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibless = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c">确 定</el-button> 
+          <el-button type="primary" @click="dialogVisibless = false" style="background-color:#fff;color:#000;border-color:#dddddd">重 置</el-button>
+        </span>
+    </el-dialog>
+    <!-- 删除模态框 -->
+    <el-dialog :visible.sync="dialogVisibles" width="400px" :before-close="handleCloses">
+      <span class="wxts">温馨提示</span>
+        <span style="display:flex;align-items: center;"><img src="@/assets/img404/疑问.png" style="width:40px;height:40px">&nbsp;&nbsp;确定删除此项目?</span>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibles = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c;">确定</el-button>
+          <el-button type="primary" @click="dialogVisibles = false" style="background-color:#95a5a6;color:#fff;border-color:#95a5a6;">取消</el-button>
+        </span>
+    </el-dialog>
+    <!-- 修改模态框 -->
+    <el-dialog :visible.sync="dialogVisibleq" width="40%" height="800px" :before-close="handleCloseq" v-el-drag-dialog class="tianjia">
+        <span class="wxts">添加</span>
+        <div class="margin"><span style="margin:0 20px 0 0">姓名:</span><el-input v-model="input7" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 27px"><span style="margin:0 20px 0 0">手机号:</span><el-input v-model="input8" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 40px;display:flex;"><span>性别:</span><input type="radio" name="sex" style="margin-left:20px">&nbsp;男<input type="radio" name="sex" style="margin-left:10px">&nbsp;女</div>
+        <div style="display:flex;align-items: center;margin:10px 0 300px 45px"><span style="margin:0 17px 0 0">头像:</span><el-input v-model="input9" placeholder="" style="width:420px"></el-input><el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList"
+  :show-file-list="false">
+  <el-button size="small" type="primary" style="background-color:#f75444;border-color:#f75444;margin:0 10px 0 10px"><img src="@/assets/img404/上传.png" alt="">&nbsp;&nbsp;上传</el-button>
+  </el-upload>
+  <el-button type="primary" style="background-color:#444c69;height:38px;border-color:#444c69"><img src="@/assets/img404/菜单.png" alt=""><span style="position: relative;top: -3px;font-size:12px">选择</span></el-button>
+  </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibleq = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c">确 定</el-button> 
+          <el-button type="primary" @click="dialogVisibleq = false" style="background-color:#fff;color:#000;border-color:#dddddd">重 置</el-button>
+        </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import axios from "axios";
+import elDragDialog from '@/utils/el-dragDialog';
 export default {
-    name: 'ClassPROJECTIndex',
+  directives:{
+    elDragDialog
+  },
+  name: "ClassPROJECTIndex",
 
-    data() {
-        return {
-            
-        };
-    },
+  data() {
+    return {
+      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
+      dialogVisible: false,
+      dialogVisibles: false,
+      dialogVisibless: false,
+      dialogVisibleq: false,
+      status: ["全部", "xx幼儿园", "xxx培训机构","放大法带着","wqd","湖南工程","信息学校","石坝小学","天河学校","(测试","测试","一二托管","行知","高新学院","南部分校","xx机构","华龙幼儿园","融科学校","第一小学","西瓜O学校","线上考试","2132","阿里","985","zxc","xxx培训机构"],
+      arry: 0,
+      kzyc: false,
+      liexlk: false,
+      value:false,
+      input: "",
+      input1: "",
+      input2: "",
+      input3: "",
+      input4: "",
+      input5: "",
+      input6: "",
+      input7: "",
+      input8: "",
+      input9: "",
+      value1: "",
+      value2: "",
+      values:"",
+      valuew:"",
+      valuee:"",
+      valueq:"",
+      fy:[
+        {
+          one:1,
+          two:10,
+          three:255,
+        }
+      ],
+      options: [{
+          values: '选项1',
+          label: '10'
+        }, {
+          values: '选项2',
+          label: '15'
+        }, {
+          values: '选项3',
+          label: '25'
+        }, {
+          values: '选项4',
+          label: '30'
+        }, {
+          values: '选项5',
+          label: '35'
+        }, {
+          values: '选项5',
+          label: '40'
+        }, {
+          values: '选项5',
+          label: '45'
+        }, {
+          values: '选项5',
+          label: '50'
+        }, {
+          values: '选项5',
+          label: 'ALL'
+        }],
+        optionss: [{
+          valuee: '选项1',
+          label: '高新区第一中学'
+        }, {
+          valuee: '选项2',
+          label: '惠济区第二中学'
+        }, {
+          valuee: '选项3',
+          label: '管城回族区第三中学'
+        }, {
+          valuee: '选项4',
+          label: '金水区第四中学'
+        }, {
+          valuee: '选项5',
+          label: '中原区第五中学'
+        }, {
+          valuee: '选项5',
+          label: '二七区第6中学'
+        }, {
+          valuee: '选项5',
+          label: '高新区第二中学'
+        }, {
+          valuee: '选项5',
+          label: '惠济区第三中学'
+        }, {
+          valuee: '选项5',
+          label: 'ALL'
+        }],
+        optionsss: [{
+          values: '选项1',
+          label: '七年级一班'
+        }, {
+          valuew: '选项2',
+          label: '八年级二班'
+        }, {
+          valuew: '选项3',
+          label: '九年级三班'
+        }, {
+          valuew: '选项4',
+          label: '七年级二班'
+        }, {
+          valuew: '选项5',
+          label: '八年级一班'
+        }, {
+          valuew: '选项5',
+          label: '九年级二班'
+        }, {
+          valuew: '选项5',
+          label: '七年级三班'
+        }, {
+          valuew: '选项5',
+          label: '八年级三班'
+        }, {
+          valuew: '选项5',
+          label: 'ALL'
+        }],
+        optionssss: [{
+          valueq: '选项1',
+          label: '语文'
+        }, {
+          valueq: '选项2',
+          label: '英语'
+        }, {
+          valueq: '选项3',
+          label: '数学'
+        }, {
+          valueq: '选项4',
+          label: '政治'
+        }, {
+          valueq: '选项5',
+          label: '地理'
+        }, {
+          valueq: '选项5',
+          label: '历史'
+        }, {
+          valueq: '选项5',
+          label: '化学'
+        }, {
+          valueq: '选项5',
+          label: '物理'
+        }, {
+          valueq: '选项5',
+          label: '生物'
+        }],
+      checked:[false,false,true,true,true,true,true,true,true,true,true,true,true,true],
+      tableData:''
+    };
+  },
+  mounted:{
 
-    mounted() {
-        
+  },
+  created(){
+    this.tablesjs()
+  },
+  methods: {
+    tablesjs(){
+        this.$http.tablesj().then(res=>{
+            console.log(res);
+            this.tableData=res.tableData
+        })
     },
-
-    methods: {
-        
+    isAnd(num) {
+      return this.arry === num;
+    },
+    xgbjs(i, item) {
+      this.arry = i;
+    },
+    Refresh() {
+      location.reload();
     },
+    kzsx() {
+      this.kzyc = !this.kzyc;
+    },
+    xlklie() {
+      this.liexlk = !this.liexlk;
+    },
+    open1() {
+        this.$notify({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          type: 'success'
+        });
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleCloses(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleClosess(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleCloseq(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
+      }
+  },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+$font-size: 14px;
+$padding: 0 0 0 16px;
+.el-dialog__body{
+  padding: 12px 12px;
+  
+}
+.el-dialog__footer{
+  background-color: #ecf0f1;
+}
+.el-dialog__header{
+    background-color: #2c3e50; 
+    height: 20px;
+      }
+.wxts{
+  position: absolute;
+  top: 18px;
+  color: #fff;
+}
+.margin{
+  margin: 10px 0 10px 40px;
+  
+}
+.boxq {
+  .bottom-content {
+    width: 100%;
+    background-color: #fff;
+    .Input_field {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        li {
+          margin: 20px 0 0 110px;
+          span {
+            margin-right: 30px;
+            border-bottom-left-radius: 5px;
+          }
+          .tj,
+          .cz {
+            width: 60px;
+            height: 35px;
+            padding: $padding;
+            font-size: 12px;
+            
+          }
+        }
+      }
+    }
+  }
+}
 
+.liexlkq {
+  width: 100px;
+  height: 300px;
+  overflow: auto;
+  background-color: #fff;
+  padding: 3px 20px;
+  position: absolute;   
+  left:-40px;
+  top: 33px;
+  box-shadow: 2px 2px 5px 1px rgba(194, 194, 194, 0.8);
+  z-index: 5;
+}
+.boxq {
+  .bottom-button {
+    display: flex;
+    padding: 20px 0 0 20px;
+    .sousuo {
+      width: 40px;
+      height: 30px;
+      background-color: #f4f4f4;
+      border: 1px solid #e6e6e6;
+      border-radius: 5px;
+      padding: 5px 5px;
+      text-align: center;
+      line-height: 40px;
+      img {
+        width: 18px;
+        height: 18px;
+      }
+    }
+    ul {
+      .qh {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+      }
+      .dc {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+      li {
+        width: 40px;
+        height: 30px;
+        background-color: #f4f4f4;
+        text-align: center;
+        line-height: 35px;
+        padding: 5px 5px;
+        border: 1px solid #e6e6e6;
+      }
+    }
+    div {
+      margin: 10px 0 0 5px;
+    }
+    .reload {
+      background-color: #444c69;
+      border-color: #444c69;
+      width: 40px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+    }
+    .append {
+      background-color: #18bc9c;
+      border-color: #18bc9c;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+    }
+    .editor {
+      background-color: #18bc9c;
+      border-color: #18bc9c;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+      // opacity: 0.7;
+    }
+    .delete {
+      background-color: #f75444;
+      border-color: #f75444;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+      // opacity: 0.7;
+    }
+  }
+}
+.boxq {
+  .top-skipq {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: #e8edf0;
+    width: 100%;
+    // height: 70px;
+    overflow: auto;
+    div {
+      cursor: pointer;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      padding: 0 10px 0 10px;
+      background-color: #d8e0e6;
+      color: #95a5a6;
+      margin: 10px 10px 0 10px;
+    }
+  }
+}
+.bgs {
+  background-color: #fff !important;
+}
+.fy{
+  width: 100%;
+  height: 70px;
+  border-bottom: 1px solid #ebeef5;
+  display: flex;
+  align-items: center;
+}
+.active{
+  background-color: #444c69 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/FillInAForm/index.vue b/src/views/FillInAForm/index.vue
index 7e780cbb3953a1844dd427a7c320310dfd3ba1b0..aa3ac8c6e3d2bc3de22c57a8970bb89e981aecc3 100644
--- a/src/views/FillInAForm/index.vue
+++ b/src/views/FillInAForm/index.vue
@@ -1,29 +1,1125 @@
 <template>
-    <div>
-        <h1>填表</h1>
+    <div class="boxq">
+    <div class="top-skipq">
+      <div
+        v-for="(item, i) in status"
+        :key="i"
+        @click="xgbjs(i, item)"
+        :class="{ bgs: isAnd(i) }"
+      >
+        {{ item }}
+      </div>
     </div>
+    <div class="bottom-content">
+      <div class="Input_field" v-show="kzyc">
+        <ul>
+          <li>
+            <span>班级</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -8px">
+            <span>学校名称</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li>
+            <span>ID</span
+            ><el-input
+              v-model="input3"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>科目</span
+            ><el-input
+              v-model="input4"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; right:27px">
+            <span>发布老师</span
+            ><el-input
+              v-model="input5"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; right:27px">
+            <span>截至时间</span
+            ><el-input
+              v-model="input6"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative;left:-30px">
+            <span>显示</span>
+            <el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative;left:-27px">
+            <span>提交列表</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: 730px;top:-60px">
+            <span>更新时间</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -345px;">
+            <el-button
+              type="success"
+              style="background-color: #18bc9c;text-align: center;"
+              class="tj"
+              >提交</el-button
+            >
+            <el-button class="cz">重置</el-button>
+          </li>
+        </ul>
+      </div>
+      <div class="bottom-button">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            class="reload"
+            @click="Refresh"
+          ></el-button>
+        </div>
+        <div>
+          <el-button type="append" icon="el-icon-plus" class="append" @click="dialogVisibless = true"
+            >添加</el-button
+          >
+        </div>
+        <div>
+          <el-button type="editor" icon="el-icon-edit" class="editor" @click="dialogVisibleq = true"
+            >编辑</el-button
+          >
+        </div>
+        <div>
+          <el-button type="delete" icon="el-icon-delete" class="delete" @click="dialogVisibles = true"
+            >删除</el-button
+          >
+        </div>
+        <el-input
+          v-model="input1"
+          placeholder="搜索"
+          style="width: 210px; margin: 10px 10px 0 810px"
+        ></el-input>
+        <ul style="display: flex;margin-top:10px;position: relative;">
+          <li class="qh"><img src="@/assets/img404/切换.png" /></li>
+          <li @click="xlklie" style="cursor: pointer">
+            <img src="@/assets/img404/列.png" /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -2px;
+              "
+            />
+          </li>
+          <li class="dc">
+            <img
+              src="@/assets/img404/导出数据.png"
+              style="margin-top: 8px"
+            /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -5px;
+              "
+            />
+          </li>
+    <!-- <div class="liexlkq" v-show="liexlk">
+        <el-checkbox v-model="checked[0]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[1]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[2]" style="margin: 0 0 20px" 
+          >打卡ID</el-checkbox
+        >
+        <el-checkbox v-model="checked[3]" style="margin: 0 0 20px" 
+          >标题</el-checkbox
+        >
+        <el-checkbox v-model="checked[4]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[5]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[6]" style="margin: 0 0 20px" 
+          >开始日期</el-checkbox
+        >
+        <el-checkbox v-model="checked[7]" style="margin: 0 0 20px" 
+          >结束日期</el-checkbox
+        >
+        <el-checkbox v-model="checked[8]" style="margin: 0 0 20px" 
+          >科目</el-checkbox
+        >
+        <el-checkbox v-model="checked[9]" style="margin: 0 0 20px" 
+          >发布老师</el-checkbox
+        >
+        <el-checkbox v-model="checked[10]" style="margin: 0 0 20px" 
+          >显示</el-checkbox
+        >
+        <el-checkbox v-model="checked[11]" style="margin: 0 0 20px" 
+          >更新时间</el-checkbox
+        >
+        <el-checkbox v-model="checked[12]" style="margin: 0 0 20px" 
+          >打卡时间</el-checkbox
+        >
+        <el-checkbox v-model="checked[13]" style="margin: 0 0 20px" 
+          >操作</el-checkbox
+        >
+    </div> -->
+    <div class="liexlkqw" v-show="liexlk">
+        <el-checkbox v-model="checked[0]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[1]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[2]" style="margin: 0 0 20px" 
+          >ID</el-checkbox
+        >
+        <el-checkbox v-model="checked[3]" style="margin: 0 0 20px" 
+          >学校名称</el-checkbox
+        >
+        <el-checkbox v-model="checked[4]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[5]" style="margin: 0 0 20px" 
+          >科目</el-checkbox
+        >
+        <el-checkbox v-model="checked[6]" style="margin: 0 0 20px" 
+          >发布老师</el-checkbox
+        >
+        <el-checkbox v-model="checked[7]" style="margin: 0 0 20px" 
+          >截至时间</el-checkbox
+        >
+        <el-checkbox v-model="checked[8]" style="margin: 0 0 20px" 
+          >显示</el-checkbox
+        >
+        <el-checkbox v-model="checked[9]" style="margin: 0 0 20px" 
+          >提交列表</el-checkbox
+        >
+        <el-checkbox v-model="checked[10]" style="margin: 0 0 20px" 
+          >操作</el-checkbox
+        >
+      </div>
+    </ul>
+        <div class="sousuo" @click="kzsx">
+          <img src="@/assets/img404/放大镜.png" />
+        </div>
+      </div>
+      
+      <div>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[0]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[1]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column label="ID" width="120" v-if="checked[2]">
+            <template slot-scope="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[3]">
+          </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[4]">
+          </el-table-column>
+          <el-table-column prop="startday" label="科目" show-overflow-tooltip v-if="checked[5]">
+          </el-table-column>
+          <el-table-column prop="endday" label="发布老师" show-overflow-tooltip v-if="checked[6]">
+          </el-table-column>
+          <el-table-column prop="km" label="截至时间" show-overflow-tooltip v-if="checked[7]">
+          </el-table-column>
+          <el-table-column prop="value" label="显示" show-overflow-tooltip v-if="checked[8]">
+                        <template slot-scope="scope">
+                                    <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0"
+                        @click="open1"
+                        >
+                    </el-switch>
+                    </template>                        
+          </el-table-column>
+          <!-- <el-table-column label="审核状态" width="120">
+            <template slot-scope="scope">
+                <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0">
+                    </el-switch>      
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="address" label="提交列表" show-overflow-tooltip v-if="checked[9]">
+            <el-button type="primary" icon="el-icon-view" class="view" style="width:55px;height:25px;padding:0;border-radius:0;background-color:#18bc9c;font-size:12px;border-color:#18bc9c" @click="dialogVisible = true">查看</el-button>
+          </el-table-column>
+          <el-table-column prop="gxtime" label="更新时间" show-overflow-tooltip v-if="checked[10]">
+          </el-table-column>
+          <el-table-column prop="" label="操作" show-overflow-tooltip v-if="checked[11]">
+            <el-button type="primary" icon="el-icon-edit" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#18bc9c;border-color:#18bc9c" @click="dialogVisibleq = true"></el-button>
+            
+            <el-button type="primary" icon="el-icon-delete-solid" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#f75444;border-color:#f75444" @click="dialogVisibles = true"></el-button>
+            
+          </el-table-column>
+        </el-table>
+        <!-- 分页↓ -->
+        <div class="fy" v-for="(item,u) in fy" :key="u">
+          <span style="margin-left:30px">显示第{{item.one}}到第{{item.two}}条记录，总共{{item.three}}条数据</span>
+          <span>每页显示
+             <el-select v-model="values" placeholder="" filterable style="width:70px;padding:0">
+                <el-option v-for="item in options" :key="item.values" :label="item.label" :value="item.values"></el-option>
+              </el-select>
+              条记录
+          </span>
+          <div style="margin:0 10px 0 500px">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="1000">
+            </el-pagination>
+          </div>
+          <el-input v-model="input7"  style="width:60px"></el-input>
+          <el-button type="info" plain style="background-color:#f4f4f4;margin-left:10px;color:#000">跳转</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 查看模态框↓ -->
+    <el-dialog :visible.sync="dialogVisible" width="50%" :before-close="handleClose" v-el-drag-dialog>
+        <span class="wxts">查看</span>
+        <div class="Input_field" v-show="kzyc">
+        <ul style="display:flex;flex-wrap:wrap;">
+          <li style="margin:0 10px 20px 60px">
+            <span>班级</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -8px;margin: 0 10px 0 10px">
+            <span>用户ID</span
+            ><el-input
+              v-model="input2"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>头像</span
+            ><el-input
+              v-model="input3"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin:0 34px 20px 60px">
+            <span>姓名</span
+            ><el-input
+              v-model="input4"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -14px">
+            <span>手机号</span
+            ><el-input
+              v-model="input5"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left:5px">
+            <span>性别</span
+            ><el-input
+              v-model="input6"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -20px;margin: 0 50px 20px 53px">
+            <span>审核状态</span
+            ><el-select v-model="value1" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -55px">
+            <span>所在班级</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left: 10px">
+            <el-button
+              type="success"
+              style="background-color: #18bc9c;text-align: center;"
+              class="tj"
+              >提交</el-button
+            >
+            <el-button class="cz">重置</el-button>
+          </li>
+        </ul>
+      </div>
+        <div class="bottom-button">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            class="reload"
+            @click="Refresh"
+          ></el-button>
+        </div>
+        <div>
+          <el-button type="append" icon="el-icon-plus" class="append" @click="dialogVisibless = true"
+            >添加</el-button
+          >
+        </div>
+        <div>
+          <el-button type="delete" icon="el-icon-delete" class="delete"
+            >删除</el-button
+          >
+        </div>
+        <el-input
+          v-model="input1"
+          placeholder="搜索"
+          style="width: 210px; margin: 10px 10px 0 140px"
+        ></el-input>
+        <ul style="display: flex;margin:10px">
+          <li class="qh"><img src="@/assets/img404/切换.png" /></li>
+          <li @click="xlklie" style="cursor: pointer">
+            <img src="@/assets/img404/列.png" /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -2px;
+              "
+            />
+          </li>
+          <li class="dc">
+            <img
+              src="@/assets/img404/导出数据.png"
+              style="margin-top: 8px"
+            /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -5px;
+              "
+            />
+          </li>
+        </ul>
+        <div class="sousuo" @click="kzsx" style="position: relative;top:0">
+          <img src="@/assets/img404/放大镜.png" />
+        </div>
+      </div>
+      <div>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[0]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[1]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column label="打卡ID" width="120" v-if="checked[2]">
+            <template slot-scope="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column prop="title" label="标题" width="120" v-if="checked[3]">
+          </el-table-column>
+          <el-table-column prop="schoolname" label="学校名称" show-overflow-tooltip v-if="checked[4]">
+          </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[5]">
+          </el-table-column>
+          <el-table-column prop="startday" label="开始日期" show-overflow-tooltip v-if="checked[6]">
+          </el-table-column>
+          <el-table-column prop="endday" label="结束日期" show-overflow-tooltip v-if="checked[7]">
+          </el-table-column>
+          <el-table-column prop="km" label="科目" show-overflow-tooltip v-if="checked[8]">
+          </el-table-column>
+          <el-table-column prop="fbteacher" label="发布老师" show-overflow-tooltip v-if="checked[9]">
+          </el-table-column>
+          <el-table-column prop="value" label="显示" show-overflow-tooltip v-if="checked[10]">
+                        <template slot-scope="scope">
+                                    <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0"
+                        @click="open1"
+                        >
+                    </el-switch>
+                    </template>                        
+          </el-table-column>
+          <!-- <el-table-column label="审核状态" width="120">
+            <template slot-scope="scope">
+                <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0">
+                    </el-switch>      
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="gxtime" label="更新时间" show-overflow-tooltip v-if="checked[11]">
+          </el-table-column>
+          <el-table-column prop="address" label="打卡列表" show-overflow-tooltip v-if="checked[12]">
+            <el-button type="primary" icon="el-icon-view" class="view" style="width:55px;height:25px;padding:0;border-radius:0;background-color:#18bc9c;font-size:12px;border-color:#18bc9c" @click="dialogVisible = true">查看</el-button>
+          </el-table-column>
+          <el-table-column prop="address" label="操作" show-overflow-tooltip v-if="checked[13]">
+            <el-button type="primary" icon="el-icon-edit" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#18bc9c;border-color:#18bc9c" @click="dialogVisibleq = true"></el-button>
+            
+            <el-button type="primary" icon="el-icon-delete-solid" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#f75444;border-color:#f75444" @click="dialogVisibles = true"></el-button>
+            
+          </el-table-column>
+        </el-table> 
+        <!-- 分页↓ -->
+        <div class="fy" v-for="(item,u) in fy" :key="u">
+          <span style="margin-left:30px">显示第{{item.one}}到第{{item.two}}条记录，总共{{item.three}}条数据</span>
+          <span>每页显示
+             <el-select v-model="values" placeholder="" filterable style="width:70px;padding:0">
+                <el-option v-for="item in options" :key="item.values" :label="item.label" :value="item.values"></el-option>
+              </el-select>
+              条记录
+          </span>
+        </div>
+      </div>
+        <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>
+    <!-- 添加模态框 -->
+    <el-dialog :visible.sync="dialogVisibless" width="40%" :before-close="handleClosess" v-el-drag-dialog class="tianjia">
+        <span class="wxts">添加</span>
+        <div class="margin"><span style="margin:0 20px 0 0">姓名:</span><el-input v-model="input7" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 27px"><span style="margin:0 20px 0 0">手机号:</span><el-input v-model="input8" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 100px;display:flex;"><input type="radio" name="sex">&nbsp;男<input type="radio" name="sex" style="margin-left:10px">&nbsp;女</div>
+        <div style="margin:10px 0 10px 15px;"><span style="margin:0 20px 0 0">学校名称:</span><el-select v-model="valuee" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionss" :key="item.valuee" :label="item.label" :value="item.valuee"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 43px;"><span style="margin:0 20px 0 0">班级:</span><el-select v-model="valuew" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionsss" :key="item.valuew" :label="item.label" :value="item.valuew"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 15px;"><span style="margin:0 20px 0 0">任教科目:</span><el-select v-model="valueq" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionssss" :key="item.valueq" :label="item.label" :value="item.valueq"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 100px;display:flex;"><input type="radio" name="yes">&nbsp;否<input type="radio" name="yes" style="margin-left:10px">&nbsp;是</div>
+        <div style="display:flex;align-items: center;margin:10px 0 10px 45px"><span style="margin:0 20px 0 0">头像:</span><el-input v-model="input9" placeholder="" style="width:420px"></el-input><el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList"
+  :show-file-list="false">
+  <el-button size="small" type="primary" style="background-color:#f75444;border-color:#f75444;margin:0 10px 0 10px"><img src="@/assets/img404/上传.png" alt="">&nbsp;&nbsp;上传</el-button>
+  </el-upload>
+  <el-button type="primary" style="background-color:#444c69;height:38px;border-color:#444c69"><img src="@/assets/img404/菜单.png" alt=""><span style="position: relative;top: -3px;font-size:12px">选择</span></el-button>
+  </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibless = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c">确 定</el-button> 
+          <el-button type="primary" @click="dialogVisibless = false" style="background-color:#fff;color:#000;border-color:#dddddd">重 置</el-button>
+        </span>
+    </el-dialog>
+    <!-- 删除模态框 -->
+    <el-dialog :visible.sync="dialogVisibles" width="400px" :before-close="handleCloses">
+      <span class="wxts">温馨提示</span>
+        <span style="display:flex;align-items: center;"><img src="@/assets/img404/疑问.png" style="width:40px;height:40px">&nbsp;&nbsp;确定删除此项目?</span>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibles = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c;">确定</el-button>
+          <el-button type="primary" @click="dialogVisibles = false" style="background-color:#95a5a6;color:#fff;border-color:#95a5a6;">取消</el-button>
+        </span>
+    </el-dialog>
+    <!-- 修改模态框 -->
+    <el-dialog :visible.sync="dialogVisibleq" width="40%" height="800px" :before-close="handleCloseq" v-el-drag-dialog class="tianjia">
+        <span class="wxts">添加</span>
+        <div class="margin"><span style="margin:0 20px 0 0">姓名:</span><el-input v-model="input7" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 27px"><span style="margin:0 20px 0 0">手机号:</span><el-input v-model="input8" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 40px;display:flex;"><span>性别:</span><input type="radio" name="sex" style="margin-left:20px">&nbsp;男<input type="radio" name="sex" style="margin-left:10px">&nbsp;女</div>
+        <div style="display:flex;align-items: center;margin:10px 0 300px 45px"><span style="margin:0 17px 0 0">头像:</span><el-input v-model="input9" placeholder="" style="width:420px"></el-input><el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList"
+  :show-file-list="false">
+  <el-button size="small" type="primary" style="background-color:#f75444;border-color:#f75444;margin:0 10px 0 10px"><img src="@/assets/img404/上传.png" alt="">&nbsp;&nbsp;上传</el-button>
+  </el-upload>
+  <el-button type="primary" style="background-color:#444c69;height:38px;border-color:#444c69"><img src="@/assets/img404/菜单.png" alt=""><span style="position: relative;top: -3px;font-size:12px">选择</span></el-button>
+  </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibleq = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c">确 定</el-button> 
+          <el-button type="primary" @click="dialogVisibleq = false" style="background-color:#fff;color:#000;border-color:#dddddd">重 置</el-button>
+        </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import elDragDialog from '@/utils/el-dragDialog'
 export default {
-    name: 'ClassPROJECTIndex',
+  directives:{
+    elDragDialog
+  },
+  name: "ClassPROJECTIndex",
 
-    data() {
-        return {
-            
-        };
-    },
+  data() {
+    return {
+      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
+      dialogVisible: false,
+      dialogVisibles: false,
+      dialogVisibless: false,
+      dialogVisibleq: false,
+      status: ["全部", "xx幼儿园", "xxx培训机构","放大法带着","wqd","湖南工程","信息学校","石坝小学","天河学校","(测试","测试","一二托管","行知","高新学院","南部分校","xx机构","华龙幼儿园","融科学校","第一小学","西瓜O学校","线上考试","2132","阿里","985","zxc","xxx培训机构"],
+      arry: 0,
+      kzyc: false,
+      liexlk: false,
+      value:false,
+      input: "",
+      input1: "",
+      input2: "",
+      input3: "",
+      input4: "",
+      input5: "",
+      input6: "",
+      input7: "",
+      input8: "",
+      input9: "",
+      value1: "",
+      value2: "",
+      values:"",
+      valuew:"",
+      valuee:"",
+      valueq:"",
+      tableData: [
+        {
+          date: "1",
+          name: "张三",
+          sex:"女",
+          phoneid:"17335565356",
+          grade:"22",
+          schoolname:"高新第一初级中学",
+          title:"核酸",
+          startday:"2021-3-05",
+          endday:"2021-3-08",
+          km:"语文",
+          gxtime:"2023-7-31",
+        },
+        {
+          date: "2",
+          name: "李四",
+          sex:"女",
+          phoneid:"17335565356",
+          grade:"52",
+          schoolname:"高新第一初级中学",
+          title:"抗原",
+          startday:"2021-3-05",
+          endday:"2021-3-08",
+          km:"高数",
+          gxtime:"2023-7-31",
+        },
+        {
+          date: "3",
+          name: "王五",
+          sex: "女",
+          phoneid:"17335565356",
+          grade:"22",
+          schoolname:"高新第一初级中学",
+          title:"流感",
+          startday:"2021-3-05",
+          endday:"2021-3-08",
+          km:"英语",
+          gxtime:"2023-7-31",
+        },
+        {
+          date: "4",
+          name: "马六",
+          sex: "男",
+          phoneid:"17335565356",
+          grade:"36",
+          schoolname:"高新第一初级中学",
+          title:"测试",
+          startday:"2021-3-05",
+          endday:"2021-3-08",
+          km:"物理",
+          gxtime:"2023-7-31",
+        },
+        {
+          date: "5",
+          name: "赵六",
+          sex: "女",
+          phoneid:"17335565356",
+          grade:"54",
+          schoolname:"高新第一初级中学",
+          title:"我测你的码",
+          startday:"2021-3-05",
+          endday:"2021-3-08",
+          km:"化学",
+          gxtime:"2023-7-31",
+        },
+        {
+          date: "6",
+          name: "孙七",
+          sex: "男",
+          phoneid:"17335565356",
+          grade:"78",
+          schoolname:"高新第一初级中学",
+          title:"测试",
+          startday:"2021-3-05",
+          endday:"2021-3-08",
+          km:"生物",
+          gxtime:"2023-7-31",
+        },
+        {
+          date: "7",
+          name: "周八",
+          sex: "女",
+          phoneid:"17335565356",
+          grade:"91",
+          schoolname:"高新第一初级中学",
+          title:"先头",
+          startday:"2021-3-05",
+          endday:"2021-3-08",
+          km:"地理",
+          gxtime:"2023-7-31",
+        },
+      ],
+      fy:[
+        {
+          one:1,
+          two:10,
+          three:255,
+        }
+      ],
+      options: [{
+          values: '选项1',
+          label: '10'
+        }, {
+          values: '选项2',
+          label: '15'
+        }, {
+          values: '选项3',
+          label: '25'
+        }, {
+          values: '选项4',
+          label: '30'
+        }, {
+          values: '选项5',
+          label: '35'
+        }, {
+          values: '选项5',
+          label: '40'
+        }, {
+          values: '选项5',
+          label: '45'
+        }, {
+          values: '选项5',
+          label: '50'
+        }, {
+          values: '选项5',
+          label: 'ALL'
+        }],
+        optionss: [{
+          valuee: '选项1',
+          label: '高新区第一中学'
+        }, {
+          valuee: '选项2',
+          label: '惠济区第二中学'
+        }, {
+          valuee: '选项3',
+          label: '管城回族区第三中学'
+        }, {
+          valuee: '选项4',
+          label: '金水区第四中学'
+        }, {
+          valuee: '选项5',
+          label: '中原区第五中学'
+        }, {
+          valuee: '选项5',
+          label: '二七区第6中学'
+        }, {
+          valuee: '选项5',
+          label: '高新区第二中学'
+        }, {
+          valuee: '选项5',
+          label: '惠济区第三中学'
+        }, {
+          valuee: '选项5',
+          label: 'ALL'
+        }],
+        optionsss: [{
+          values: '选项1',
+          label: '七年级一班'
+        }, {
+          valuew: '选项2',
+          label: '八年级二班'
+        }, {
+          valuew: '选项3',
+          label: '九年级三班'
+        }, {
+          valuew: '选项4',
+          label: '七年级二班'
+        }, {
+          valuew: '选项5',
+          label: '八年级一班'
+        }, {
+          valuew: '选项5',
+          label: '九年级二班'
+        }, {
+          valuew: '选项5',
+          label: '七年级三班'
+        }, {
+          valuew: '选项5',
+          label: '八年级三班'
+        }, {
+          valuew: '选项5',
+          label: 'ALL'
+        }],
+        optionssss: [{
+          valueq: '选项1',
+          label: '语文'
+        }, {
+          valueq: '选项2',
+          label: '英语'
+        }, {
+          valueq: '选项3',
+          label: '数学'
+        }, {
+          valueq: '选项4',
+          label: '政治'
+        }, {
+          valueq: '选项5',
+          label: '地理'
+        }, {
+          valueq: '选项5',
+          label: '历史'
+        }, {
+          valueq: '选项5',
+          label: '化学'
+        }, {
+          valueq: '选项5',
+          label: '物理'
+        }, {
+          valueq: '选项5',
+          label: '生物'
+        }],
+      checked:[false,false,true,true,true,true,true,true,true,true,true,true,true,true]
+    };
+  },
 
-    mounted() {
-        
-    },
+  mounted() {},
 
-    methods: {
-        
+  methods: {
+    isAnd(num) {
+      return this.arry === num;
+    },
+    xgbjs(i, item) {
+      this.arry = i;
+    },
+    Refresh() {
+      location.reload();
     },
+    kzsx() {
+      this.kzyc = !this.kzyc;
+    },
+    xlklie() {
+      this.liexlk = !this.liexlk;
+    },
+    open1() {
+        this.$notify({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          type: 'success'
+        });
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleCloses(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleClosess(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleCloseq(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
+      }
+  },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+$font-size: 14px;
+$padding: 0 0 0 16px;
+.el-dialog__body{
+  padding: 12px 12px;
+  
+}
+.el-dialog__footer{
+  background-color: #ecf0f1;
+}
+.el-dialog__header{
+    background-color: #2c3e50; 
+    height: 20px;
+      }
+.wxts{
+  position: absolute;
+  top: 18px;
+  color: #fff;
+}
+.margin{
+  margin: 10px 0 10px 40px;
+  
+}
+.boxq {
+  .bottom-content {
+    width: 100%;
+    background-color: #fff;
+    .Input_field {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        li {
+          margin: 20px 0 0 110px;
+          span {
+            margin-right: 30px;
+            border-bottom-left-radius: 5px;
+          }
+          .tj,
+          .cz {
+            width: 60px;
+            height: 35px;
+            padding: $padding;
+            font-size: 12px;
+            
+          }
+        }
+      }
+    }
+  }
+}
 
+.liexlkqw {
+  width: 100px;
+  height: 300px;
+  overflow: auto;
+  background-color: #fff;
+  padding: 3px 20px;
+  position: absolute;   
+  right: 53px;
+  top: 32px;
+  box-shadow: 2px 2px 5px 1px rgba(194, 194, 194, 0.8);
+  z-index: 5;
+}
+.boxq {
+  .bottom-button {
+    display: flex;
+    padding: 20px 0 0 20px;
+    .sousuo {
+      width: 40px;
+      height: 30px;
+      background-color: #f4f4f4;
+      border: 1px solid #e6e6e6;
+      border-radius: 5px;
+      padding: 5px 5px;
+      text-align: center;
+      line-height: 40px;
+      img {
+        width: 18px;
+        height: 18px;
+      }
+    }
+    ul {
+      .qh {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+      }
+      .dc {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+      li {
+        width: 40px;
+        height: 30px;
+        background-color: #f4f4f4;
+        text-align: center;
+        line-height: 35px;
+        padding: 5px 5px;
+        border: 1px solid #e6e6e6;
+      }
+    }
+    div {
+      margin: 10px 0 0 5px;
+    }
+    .reload {
+      background-color: #444c69;
+      border-color: #444c69;
+      width: 40px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+    }
+    .append {
+      background-color: #18bc9c;
+      border-color: #18bc9c;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+    }
+    .editor {
+      background-color: #18bc9c;
+      border-color: #18bc9c;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+      // opacity: 0.7;
+    }
+    .delete {
+      background-color: #f75444;
+      border-color: #f75444;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+      // opacity: 0.7;
+    }
+  }
+}
+.boxq {
+  .top-skipq {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: #e8edf0;
+    width: 100%;
+    // height: 70px;
+    overflow: auto;
+    div {
+      cursor: pointer;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      padding: 0 10px 0 10px;
+      background-color: #d8e0e6;
+      color: #95a5a6;
+      margin: 10px 10px 0 10px;
+    }
+  }
+}
+.bgs {
+  background-color: #fff !important;
+}
+.fy{
+  width: 100%;
+  height: 70px;
+  border-bottom: 1px solid #ebeef5;
+  display: flex;
+  align-items: center;
+}
+.active{
+  background-color: #444c69 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Teacher/index.vue b/src/views/Teacher/index.vue
index 3567d542930ccf3307609a0f159c703548923c08..ce65d97b1957082a159753c440da82a0676e9c92 100644
--- a/src/views/Teacher/index.vue
+++ b/src/views/Teacher/index.vue
@@ -1,27 +1,1039 @@
 <template>
-    <div>
-        <h1>教师</h1>
+  <div class="box">
+    <div class="top-skip">
+      <div
+        v-for="(item, i) in status"
+        :key="i"
+        @click="xgbjs(i, item)"
+        :class="{ bgs: isAnd(i) }"
+      >
+        {{ item }}
+      </div>
     </div>
+    <div class="bottom-content">
+      <div class="Input_field" v-show="kzyc">
+        <ul>
+          <li>
+            <span>班级</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -8px">
+            <span>用户ID</span
+            ><el-input
+              v-model="input2"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>头像</span
+            ><el-input
+              v-model="input3"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>姓名</span
+            ><el-input
+              v-model="input4"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -14px">
+            <span>手机号</span
+            ><el-input
+              v-model="input5"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>性别</span
+            ><el-input
+              v-model="input6"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -20px">
+            <span>审核状态</span
+            ><el-select v-model="value1" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -55px">
+            <span>所在班级</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left: 170px">
+            <el-button
+              type="success"
+              style="background-color: #18bc9c;text-align: center;"
+              class="tj"
+              >提交</el-button
+            >
+            <el-button class="cz">重置</el-button>
+          </li>
+        </ul>
+      </div>
+      <div class="bottom-button">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            class="reload"
+            @click="Refresh"
+          ></el-button>
+        </div>
+        <div>
+          <el-button type="append" icon="el-icon-plus" class="append" @click="dialogVisibless = true"
+            >添加</el-button
+          >
+        </div>
+        <div>
+          <el-button type="editor" icon="el-icon-edit" class="editor" @click="dialogVisibleq = true"
+            >编辑</el-button
+          >
+        </div>
+        <div>
+          <el-button type="delete" icon="el-icon-delete" class="delete" @click="dialogVisibles = true"
+            >删除</el-button
+          >
+        </div>
+        <el-input
+          v-model="input1"
+          placeholder="搜索"
+          style="width: 210px; margin: 10px 10px 0 810px"
+        ></el-input>
+        <ul style="display: flex;margin-top:10px;position: relative;">
+          <li class="qh"><img src="@/assets/img404/切换.png" /></li>
+          <li @click="xlklie" style="cursor: pointer">
+            <img src="@/assets/img404/列.png" /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -2px;
+              "
+            />
+          </li>
+          <li class="dc">
+            <img
+              src="@/assets/img404/导出数据.png"
+              style="margin-top: 8px"
+            /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -5px;
+              "
+            />
+          </li>
+          <div class="liexlk" v-show="liexlk">
+        <el-checkbox v-model="checked[0]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[1]" style="margin: 0 0 20px" 
+          >用户ID</el-checkbox
+        >
+        <el-checkbox v-model="checked[2]" style="margin: 0 0 20px" 
+          >头像</el-checkbox
+        >
+        <el-checkbox v-model="checked[3]" style="margin: 0 0 20px" 
+          >姓名</el-checkbox
+        >
+        <el-checkbox v-model="checked[4]" style="margin: 0 0 20px" 
+          >手机号</el-checkbox
+        >
+        <el-checkbox v-model="checked[5]" style="margin: 0 0 20px" 
+          >性别</el-checkbox
+        >
+        <el-checkbox v-model="checked[6]" style="margin: 0 0 20px" 
+          >审核状态</el-checkbox
+        >
+        <el-checkbox v-model="checked[7]" style="margin: 0 0 20px" 
+          >所在班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[8]" style="margin: 0 0 20px" 
+          >操作</el-checkbox
+        >
+      </div>
+        </ul>
+        <div class="sousuo" @click="kzsx">
+          <img src="@/assets/img404/放大镜.png" />
+        </div>
+      </div>
+      <div>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[0]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column label="用户ID" width="120" v-if="checked[1]">
+            <template slot-scope="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column prop="" label="头像" width="120" v-if="checked[2]">
+            <img src="@/assets/img404/初音ミク.jpg" alt="" style="width:30px;height:30px">
+          </el-table-column>
+          <el-table-column prop="name" label="姓名" show-overflow-tooltip v-if="checked[3]">
+          </el-table-column>
+          <el-table-column prop="sex" label="性别" show-overflow-tooltip v-if="checked[4]">
+          </el-table-column>
+          <el-table-column prop="phoneid" label="手机号" show-overflow-tooltip v-if="checked[5]">
+          </el-table-column>
+          <el-table-column prop="value" label="审核状态" show-overflow-tooltip v-if="checked[6]">
+                        <template slot-scope="scope">
+                                    <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0"
+                        @click="open1"
+                        >
+                    </el-switch>
+                    </template>                        
+          </el-table-column>
+          <!-- <el-table-column label="审核状态" width="120">
+            <template slot-scope="scope">
+                <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0">
+                    </el-switch>      
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="address" label="所在班级" show-overflow-tooltip v-if="checked[7]">
+            <el-button type="primary" icon="el-icon-bank-card" class="view" style="width:55px;height:25px;padding:0;border-radius:0;background-color:#18bc9c;font-size:12px;border-color:#18bc9c" @click="dialogVisible = true">查看</el-button>
+          </el-table-column>
+          <el-table-column prop="address" label="操作" show-overflow-tooltip v-if="checked[8]">
+            <el-button type="primary" icon="el-icon-edit" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#18bc9c;border-color:#18bc9c" @click="dialogVisibleq = true"></el-button>
+            
+            <el-button type="primary" icon="el-icon-delete-solid" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#f75444;border-color:#f75444" @click="dialogVisibles = true"></el-button>
+            
+          </el-table-column>
+        </el-table>
+        <!-- 分页↓ -->
+        <div class="fy" v-for="(item,u) in fy" :key="u">
+          <span style="margin-left:30px">显示第{{item.one}}到第{{item.two}}条记录，总共{{item.three}}条数据</span>
+          <span>每页显示
+             <el-select v-model="values" placeholder="" filterable style="width:70px;padding:0">
+                <el-option v-for="item in options" :key="item.values" :label="item.label" :value="item.values"></el-option>
+              </el-select>
+              条记录
+          </span>
+          <div style="margin:0 10px 0 580px">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="1000">
+            </el-pagination>
+          </div>
+          <el-input v-model="input7"  style="width:60px"></el-input>
+          <el-button type="info" plain style="background-color:#f4f4f4;margin-left:10px;color:#000">跳转</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 查看模态框↓ -->
+    <el-dialog :visible.sync="dialogVisible" width="50%" :before-close="handleClose" v-el-drag-dialog>
+        <span class="wxts">查看</span>
+        <div class="Input_field" v-show="kzyc">
+        <ul style="display:flex;flex-wrap:wrap;">
+          <li style="margin:0 10px 20px 60px">
+            <span>班级</span
+            ><el-select v-model="value2" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -8px;margin: 0 10px 0 10px">
+            <span>用户ID</span
+            ><el-input
+              v-model="input2"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li>
+            <span>头像</span
+            ><el-input
+              v-model="input3"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin:0 34px 20px 60px">
+            <span>姓名</span
+            ><el-input
+              v-model="input4"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -14px">
+            <span>手机号</span
+            ><el-input
+              v-model="input5"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left:5px">
+            <span>性别</span
+            ><el-input
+              v-model="input6"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="position: relative; left: -20px;margin: 0 50px 20px 53px">
+            <span>审核状态</span
+            ><el-select v-model="value1" clearable placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+          <li style="position: relative; left: -55px">
+            <span>所在班级</span
+            ><el-input
+              v-model="input"
+              placeholder="请输入内容"
+              style="width: 210px"
+            ></el-input>
+          </li>
+          <li style="margin-left: 10px">
+            <el-button
+              type="success"
+              style="background-color: #18bc9c;text-align: center;"
+              class="tj"
+              >提交</el-button
+            >
+            <el-button class="cz">重置</el-button>
+          </li>
+        </ul>
+      </div>
+        <div class="bottom-button">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            class="reload"
+            @click="Refresh"
+          ></el-button>
+        </div>
+        <div>
+          <el-button type="append" icon="el-icon-plus" class="append" @click="dialogVisibless = true"
+            >添加</el-button
+          >
+        </div>
+        <div>
+          <el-button type="delete" icon="el-icon-delete" class="delete"
+            >删除</el-button
+          >
+        </div>
+        <el-input
+          v-model="input1"
+          placeholder="搜索"
+          style="width: 210px; margin: 10px 10px 0 140px"
+        ></el-input>
+        <ul style="display: flex;margin:10px">
+          <li class="qh"><img src="@/assets/img404/切换.png" /></li>
+          <li @click="xlklie" style="cursor: pointer">
+            <img src="@/assets/img404/列.png" /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -2px;
+              "
+            />
+          </li>
+          <li class="dc">
+            <img
+              src="@/assets/img404/导出数据.png"
+              style="margin-top: 8px"
+            /><img
+              src="@/assets/img404/向下.png"
+              style="
+                width: 10px;
+                height: 10px;
+                position: relative;
+                left: 5px;
+                top: -5px;
+              "
+            />
+          </li>
+        </ul>
+        <div class="sousuo" @click="kzsx" style="position: relative;top:0">
+          <img src="@/assets/img404/放大镜.png" />
+        </div>
+        <div class="liexlk" v-show="liexlk">
+        <el-checkbox v-model="checked[0]" style="margin: 0 0 20px" 
+          >班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[1]" style="margin: 0 0 20px" 
+          >用户ID</el-checkbox
+        >
+        <el-checkbox v-model="checked[2]" style="margin: 0 0 20px" 
+          >头像</el-checkbox
+        >
+        <el-checkbox v-model="checked[3]" style="margin: 0 0 20px" 
+          >姓名</el-checkbox
+        >
+        <el-checkbox v-model="checked[4]" style="margin: 0 0 20px" 
+          >手机号</el-checkbox
+        >
+        <el-checkbox v-model="checked[5]" style="margin: 0 0 20px" 
+          >性别</el-checkbox
+        >
+        <el-checkbox v-model="checked[6]" style="margin: 0 0 20px" 
+          >审核状态</el-checkbox
+        >
+        <el-checkbox v-model="checked[7]" style="margin: 0 0 20px" 
+          >所在班级</el-checkbox
+        >
+        <el-checkbox v-model="checked[8]" style="margin: 0 0 20px" 
+          >操作</el-checkbox
+        >
+      </div>
+      </div>
+      <div>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="grade" label="班级" show-overflow-tooltip v-if="checked[0]" v-bind:style="mapStyle">
+          </el-table-column>
+          <el-table-column label="用户ID" width="120" v-if="checked[1]">
+            <template slot-scope="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column prop="" label="头像" width="120" v-if="checked[2]">
+            <img src="@/assets/img404/初音ミク.jpg" alt="" style="width:30px;height:30px">
+          </el-table-column>
+          <el-table-column prop="name" label="姓名" show-overflow-tooltip v-if="checked[3]">
+          </el-table-column>
+          <el-table-column prop="sex" label="性别" show-overflow-tooltip v-if="checked[4]">
+          </el-table-column>
+          <el-table-column prop="phoneid" label="手机号" show-overflow-tooltip v-if="checked[5]">
+          </el-table-column>
+          <el-table-column prop="value" label="审核状态" show-overflow-tooltip v-if="checked[6]">
+                        <template slot-scope="scope">
+                                    <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0"
+                        @click="open1"
+                        >
+                    </el-switch>
+                    </template>                        
+          </el-table-column>
+          <!-- <el-table-column label="审核状态" width="120">
+            <template slot-scope="scope">
+                <el-switch
+                        v-model="scope.row.value"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                        active-value="100"
+                        inactive-value="0">
+                    </el-switch>      
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="address" label="所在班级" show-overflow-tooltip v-if="checked[7]">
+            <el-button type="primary" icon="el-icon-bank-card" class="view" style="width:55px;height:25px;padding:0;border-radius:0;background-color:#18bc9c;font-size:12px;border-color:#18bc9c" @click="dialogVisible = true">查看</el-button>
+          </el-table-column>
+          <el-table-column prop="address" label="操作" show-overflow-tooltip v-if="checked[8]">
+            <el-button type="primary" icon="el-icon-edit" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#18bc9c;border-color:#18bc9c" @click="dialogVisibleq = true"></el-button>
+            
+            <el-button type="primary" icon="el-icon-delete-solid" style="width:25px;height:25px;font-size:12px;padding:0;border-radius:0;background-color:#f75444;border-color:#f75444" @click="dialogVisibles = true"></el-button>
+            
+          </el-table-column>
+        </el-table> 
+        <!-- 分页↓ -->
+        <div class="fy" v-for="(item,u) in fy" :key="u" style="width:100%">
+          <span style="margin-left:30px">显示第{{item.one}}到第{{item.two}}条记录，总共{{item.three}}条数据</span>
+          <span>每页显示
+             <el-select v-model="values" placeholder="" filterable style="width:70px;padding:0">
+                <el-option v-for="item in options" :key="item.values" :label="item.label" :value="item.values"></el-option>
+              </el-select>
+              条记录
+          </span>
+        </div>
+      </div>
+        <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>
+    <!-- 添加模态框 -->
+    <el-dialog :visible.sync="dialogVisibless" width="40%" :before-close="handleClosess" v-el-drag-dialog class="tianjia">
+        <span class="wxts">添加</span>
+        <div class="margin"><span style="margin:0 20px 0 0">姓名:</span><el-input v-model="input7" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 27px"><span style="margin:0 20px 0 0">手机号:</span><el-input v-model="input8" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 100px;display:flex;"><input type="radio" name="sex">&nbsp;男<input type="radio" name="sex" style="margin-left:10px">&nbsp;女</div>
+        <div style="margin:10px 0 10px 15px;"><span style="margin:0 20px 0 0">学校名称:</span><el-select v-model="valuee" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionss" :key="item.valuee" :label="item.label" :value="item.valuee"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 43px;"><span style="margin:0 20px 0 0">班级:</span><el-select v-model="valuew" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionsss" :key="item.valuew" :label="item.label" :value="item.valuew"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 15px;"><span style="margin:0 20px 0 0">任教科目:</span><el-select v-model="valueq" placeholder="请选择" style="width:600px;"><el-option v-for="item in optionssss" :key="item.valueq" :label="item.label" :value="item.valueq"></el-option></el-select></div>
+        <div style="margin:10px 0 10px 100px;display:flex;"><input type="radio" name="yes">&nbsp;否<input type="radio" name="yes" style="margin-left:10px">&nbsp;是</div>
+        <div style="display:flex;align-items: center;margin:10px 0 10px 45px"><span style="margin:0 20px 0 0">头像:</span><el-input v-model="input9" placeholder="" style="width:420px"></el-input><el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList"
+  :show-file-list="false">
+  <el-button size="small" type="primary" style="background-color:#f75444;border-color:#f75444;margin:0 10px 0 10px"><img src="@/assets/img404/上传.png" alt="">&nbsp;&nbsp;上传</el-button>
+  </el-upload>
+  <el-button type="primary" style="background-color:#444c69;height:38px;border-color:#444c69"><img src="@/assets/img404/菜单.png" alt=""><span style="position: relative;top: -3px;font-size:12px">选择</span></el-button>
+  </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibless = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c">确 定</el-button> 
+          <el-button type="primary" @click="dialogVisibless = false" style="background-color:#fff;color:#000;border-color:#dddddd">重 置</el-button>
+        </span>
+    </el-dialog>
+    <!-- 删除模态框 -->
+    <el-dialog :visible.sync="dialogVisibles" width="400px" :before-close="handleCloses">
+      <span class="wxts">温馨提示</span>
+        <span style="display:flex;align-items: center;"><img src="@/assets/img404/疑问.png" style="width:40px;height:40px">&nbsp;&nbsp;确定删除此项目?</span>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibles = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c;">确定</el-button>
+          <el-button type="primary" @click="dialogVisibles = false" style="background-color:#95a5a6;color:#fff;border-color:#95a5a6;">取消</el-button>
+        </span>
+    </el-dialog>
+    <!-- 修改模态框 -->
+    <el-dialog :visible.sync="dialogVisibleq" width="40%" height="800px" :before-close="handleCloseq" v-el-drag-dialog class="tianjia">
+        <span class="wxts">添加</span>
+        <div class="margin"><span style="margin:0 20px 0 0">姓名:</span><el-input v-model="input7" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 27px"><span style="margin:0 20px 0 0">手机号:</span><el-input v-model="input8" placeholder="" style="width:600px;"></el-input></div>
+        <div style="margin:10px 0 10px 40px;display:flex;"><span>性别:</span><input type="radio" name="sex" style="margin-left:20px">&nbsp;男<input type="radio" name="sex" style="margin-left:10px">&nbsp;女</div>
+        <div style="display:flex;align-items: center;margin:10px 0 300px 45px"><span style="margin:0 17px 0 0">头像:</span><el-input v-model="input9" placeholder="" style="width:420px"></el-input><el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList"
+  :show-file-list="false">
+  <el-button size="small" type="primary" style="background-color:#f75444;border-color:#f75444;margin:0 10px 0 10px"><img src="@/assets/img404/上传.png" alt="">&nbsp;&nbsp;上传</el-button>
+  </el-upload>
+  <el-button type="primary" style="background-color:#444c69;height:38px;border-color:#444c69"><img src="@/assets/img404/菜单.png" alt=""><span style="position: relative;top: -3px;font-size:12px">选择</span></el-button>
+  </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisibleq = false" style="background-color:#18bc9c;color:#fff;border-color:#18bc9c">确 定</el-button> 
+          <el-button type="primary" @click="dialogVisibleq = false" style="background-color:#fff;color:#000;border-color:#dddddd">重 置</el-button>
+        </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import elDragDialog from '@/utils/el-dragDialog'
 export default {
-    name: 'ClassPROJECTIndex',
-
-    data() {
-        return {
+  directives:{
+    elDragDialog
+  },
+  name: "ClassPROJECTIndex",
 
-        };
-    },
+  data() {
+    return {
+      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
+      dialogVisible: false,
+      dialogVisibles: false,
+      dialogVisibless: false,
+      dialogVisibleq: false,
+      status: ["全部", "待审批", "审批通过"],
+      arry: 0,
+      kzyc: false,
+      liexlk: false,
+      value:false,
+      input: "",
+      input1: "",
+      input2: "",
+      input3: "",
+      input4: "",
+      input5: "",
+      input6: "",
+      input7: "",
+      input8: "",
+      input9: "",
+      value1: "",
+      value2: "",
+      values:"",
+      valuew:"",
+      valuee:"",
+      valueq:"",
+      tableData: [
+        {
+          date: "1",
+          name: "张三",
+          sex:"女",
+          phoneid:"17335565356",
+          grade:"22"
+        },
+        {
+          date: "2",
+          name: "李四",
+          sex:"女",
+          phoneid:"17335565356",
+          grade:"52"
+        },
+        {
+          date: "3",
+          name: "王五",
+          sex: "女",
+          phoneid:"17335565356",
+          grade:"22"
+        },
+        {
+          date: "4",
+          name: "马六",
+          sex: "男",
+          phoneid:"17335565356",
+          grade:"36"
+        },
+        {
+          date: "5",
+          name: "赵六",
+          sex: "女",
+          phoneid:"17335565356",
+          grade:"54"
+        },
+        {
+          date: "6",
+          name: "孙七",
+          sex: "男",
+          phoneid:"17335565356",
+          grade:"78"
+        },
+        {
+          date: "7",
+          name: "周八",
+          sex: "女",
+          phoneid:"17335565356",
+          grade:"91"
+        },
+      ],
+      fy:[
+        {
+          one:1,
+          two:10,
+          three:255,
+        }
+      ],
+      options: [{
+          values: '选项1',
+          label: '10'
+        }, {
+          values: '选项2',
+          label: '15'
+        }, {
+          values: '选项3',
+          label: '25'
+        }, {
+          values: '选项4',
+          label: '30'
+        }, {
+          values: '选项5',
+          label: '35'
+        }, {
+          values: '选项5',
+          label: '40'
+        }, {
+          values: '选项5',
+          label: '45'
+        }, {
+          values: '选项5',
+          label: '50'
+        }, {
+          values: '选项5',
+          label: 'ALL'
+        }],
+        optionss: [{
+          valuee: '选项1',
+          label: '高新区第一中学'
+        }, {
+          valuee: '选项2',
+          label: '惠济区第二中学'
+        }, {
+          valuee: '选项3',
+          label: '管城回族区第三中学'
+        }, {
+          valuee: '选项4',
+          label: '金水区第四中学'
+        }, {
+          valuee: '选项5',
+          label: '中原区第五中学'
+        }, {
+          valuee: '选项5',
+          label: '二七区第6中学'
+        }, {
+          valuee: '选项5',
+          label: '高新区第二中学'
+        }, {
+          valuee: '选项5',
+          label: '惠济区第三中学'
+        }, {
+          valuee: '选项5',
+          label: 'ALL'
+        }],
+        optionsss: [{
+          values: '选项1',
+          label: '七年级一班'
+        }, {
+          valuew: '选项2',
+          label: '八年级二班'
+        }, {
+          valuew: '选项3',
+          label: '九年级三班'
+        }, {
+          valuew: '选项4',
+          label: '七年级二班'
+        }, {
+          valuew: '选项5',
+          label: '八年级一班'
+        }, {
+          valuew: '选项5',
+          label: '九年级二班'
+        }, {
+          valuew: '选项5',
+          label: '七年级三班'
+        }, {
+          valuew: '选项5',
+          label: '八年级三班'
+        }, {
+          valuew: '选项5',
+          label: 'ALL'
+        }],
+        optionssss: [{
+          valueq: '选项1',
+          label: '语文'
+        }, {
+          valueq: '选项2',
+          label: '英语'
+        }, {
+          valueq: '选项3',
+          label: '数学'
+        }, {
+          valueq: '选项4',
+          label: '政治'
+        }, {
+          valueq: '选项5',
+          label: '地理'
+        }, {
+          valueq: '选项5',
+          label: '历史'
+        }, {
+          valueq: '选项5',
+          label: '化学'
+        }, {
+          valueq: '选项5',
+          label: '物理'
+        }, {
+          valueq: '选项5',
+          label: '生物'
+        }],
+      checked:[false,true,true,true,true,true,true,true,true]
+    };
+  },
 
-    mounted() {
+  mounted() {},
 
+  methods: {
+    isAnd(num) {
+      return this.arry === num;
     },
-
-    methods: {
-
+    xgbjs(i, item) {
+      this.arry = i;
     },
+    Refresh() {
+      location.reload();
+    },
+    kzsx() {
+      this.kzyc = !this.kzyc;
+    },
+    xlklie() {
+      this.liexlk = !this.liexlk;
+    },
+    open1() {
+        this.$notify({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          type: 'success'
+        });
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleCloses(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleClosess(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleCloseq(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
+      }
+  },
 };
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss">
+$font-size: 14px;
+$padding: 0 0 0 16px;
+.el-dialog__body{
+  padding: 12px 12px;
+  
+}
+.el-dialog__footer{
+  background-color: #ecf0f1;
+}
+.el-dialog__header{
+    background-color: #2c3e50; 
+    height: 20px;
+      }
+.wxts{
+  position: absolute;
+  top: 18px;
+  color: #fff;
+}
+.margin{
+  margin: 10px 0 10px 40px;
+  
+}
+.box {
+  .bottom-content {
+    .Input_field {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        li {
+          margin: 20px 0 0 110px;
+          span {
+            margin-right: 30px;
+            border-bottom-left-radius: 5px;
+            
+          }
+          .tj,
+          .cz {
+            width: 60px;
+            height: 35px;
+            padding: $padding;
+            font-size: 12px;
+            
+          }
+        }
+      }
+    }
+  }
+  .bottom-content {
+    width: 86vw;
+    background-color: #fff;
+  }
+}
+
+.liexlk {
+  width: 100px;
+  height: 300px;
+  overflow: auto;
+  background-color: #fff;
+  padding: 3px 20px;
+  position: absolute;   
+  left: -42px;
+  top: 33px;
+  box-shadow: 2px 2px 5px 1px rgba(194, 194, 194, 0.8);
+  z-index: 5;
+}
+.box {
+  .bottom-button {
+    display: flex;
+    padding: 20px 0 0 20px;
+    .sousuo {
+      width: 40px;
+      height: 30px;
+      background-color: #f4f4f4;
+      border: 1px solid #e6e6e6;
+      border-radius: 5px;
+      padding: 5px 5px;
+      text-align: center;
+      line-height: 40px;
+      img {
+        width: 18px;
+        height: 18px;
+      }
+    }
+    ul {
+      .qh {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+      }
+      .dc {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+      li {
+        width: 40px;
+        height: 30px;
+        background-color: #f4f4f4;
+        text-align: center;
+        line-height: 35px;
+        padding: 5px 5px;
+        border: 1px solid #e6e6e6;
+      }
+    }
+    div {
+      margin: 10px 0 0 5px;
+    }
+    .reload {
+      background-color: #444c69;
+      border-color: #444c69;
+      width: 40px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+    }
+    .append {
+      background-color: #18bc9c;
+      border-color: #18bc9c;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+    }
+    .editor {
+      background-color: #18bc9c;
+      border-color: #18bc9c;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+      // opacity: 0.7;
+    }
+    .delete {
+      background-color: #f75444;
+      border-color: #f75444;
+      width: 70px;
+      height: 40px;
+      font-size: $font-size;
+      padding: 0;
+      color: #fff;
+      // opacity: 0.7;
+    }
+  }
+}
+.box {
+  .top-skip {
+    display: flex;
+    background-color: #e8edf0;
+    width: 86vw;
+    height: 70px;
+    div {
+      cursor: pointer;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      padding: 0 20px 0 20px;
+      background-color: #d8e0e6;
+      color: #95a5a6;
+      margin-left: 5px;
+      position: relative;
+      top: 30px;
+      left: 20px;
+    }
+  }
+}
+.bgs {
+  background-color: #fff !important;
+}
+.fy{
+  width: 86vw;
+  height: 70px;
+  border-bottom: 1px solid #ebeef5;
+  display: flex;
+  align-items: center;
+}
+.active{
+  background-color: #444c69 !important;
+}
+</style>
\ No newline at end of file