阅卷流程列表

src/components/NavHeader/index.vue

@@ -67,10 +67,8 @@ function loginOut() {
 @keyframes navShow {
   from {
     height: 0;
-    opacity: 0;
   }
   to {
-    opacity: 1;
     height: 100%;
   }
 }
@@ -115,7 +113,7 @@ function loginOut() {
   &:hover{
     .child-nav{
       display: block;
-      animation: navShow .2s ease-in-out;
+      animation: all .2s ease-in-out;
     }
   }
 

src/pages/index.vue

@@ -1,10 +1,10 @@
 <route lang="json">
-  {
-    "meta":{
-      "title":"阅卷流程",
-      "breadcrumb": true
-    }
-  }
+{
+"meta":{
+"title":"阅卷流程",
+"breadcrumb": true
+}
+}
 </route>
 <script setup>
 let exam_time = $ref('')
@@ -12,26 +12,33 @@ let exam_form = $ref('')
 let exam_type = $ref('')
 let keyword = $ref('')
 let form_list = [{
-  value:'1',
-  label:'线上考试'
-},{
-  value:'2',
-  label:'线下考试'
+  value: '1',
+  label: '线上考试'
+}, {
+  value: '2',
+  label: '线下考试'
 }]
 let type_list = [{
-  value:'1',
-  label:'联考'
-},{
-  value:'2',
-  label:'月考'
-},{
-  value:'3',
-  label:'周考'
+  value: '1',
+  label: '联考'
+}, {
+  value: '2',
+  label: '月考'
+}, {
+  value: '3',
+  label: '周考'
 }]
+let chooseCheck = $ref([]);
+let checked = $ref(false);
+let checkedIds = $ref([]);
+let noData = $ref(null);
+function chooseAll() {
+
+}
 </script>
 <template>
   <NavHeader/>
-  <bread-crumb />
+  <bread-crumb/>
   <div class="w-1200px m-auto">
     <div class="flex items-center">
       <el-date-picker
@@ -71,7 +78,148 @@ let type_list = [{
       />
       <el-button class="ml-20px" type="primary" size="large">搜索</el-button>
     </div>
-
+    <div class="flex mt-20px justify-between">
+      <button type="button" class="add-btn">
+        <el-icon class="inline-block align-middle">
+          <Plus/>
+        </el-icon>
+        <span class="ml-5px inline-block align-middle">新建考试计划</span>
+      </button>
+      <button type="button" class="del-btn">批量删除</button>
+    </div>
+    <div class="mt-20px process-list-table">
+      <div class="head">
+        <div class="w-60px">
+          <p class="set-check all">
+            <input type="checkbox" id="chooseAll" @change="chooseAll" v-model="checked">
+            <label for="chooseAll"></label>
+          </p>
+        </div>
+        <div class="w-150px text-left">考试计划名称</div>
+        <div class="w-200px">状态</div>
+        <div class="w-150px">考试形式</div>
+        <div class="w-150px">考试类型</div>
+        <div class="w-180px">考试时间</div>
+        <div>操作</div>
+      </div>
+      <div></div>
+    </div>
   </div>
 
 </template>
+<style lang="scss" scoped>
+$color: #003eee;
+.add-btn {
+  width: 129px;
+  height: 36px;
+  background: #ffffff;
+  border: 1px solid $color;
+  border-radius: 4px;
+  font-size: 14px;
+  color: $color;
+  text-align: center;
+}
+
+.del-btn {
+  width: 92px;
+  height: 36px;
+  background: #ff0000;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+
+.process-list-table {
+  width: 100%;
+  min-height: 600px;
+
+  .head {
+    height: 50px;
+    display: flex;
+    background: $color;
+    border-radius: 6px 6px 0 0;
+    font-size: 16px;
+    line-height: 50px;
+    color: #fff;
+  }
+  .line{
+    
+  }
+}
+.set-check{
+  position: relative;
+  z-index: 40;
+  width: 20px;
+  height: 20px;
+  margin:15px auto 0;
+  label{
+    position: absolute;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+  input[type=checkbox]{
+    width: 20px;
+    height: 20px;
+    opacity: 0;
+    &:checked + label:after{
+
+    }
+  }
+  &.all{
+    label{
+      border: 1px solid #fff;
+    }
+    input[type=checkbox]{
+      &:checked + label{
+        border-color: #fff;
+      }
+      &:checked + label:after{
+        content: '';
+        width: 13px;
+        height: 8px;
+        position: absolute;
+        top: 3px;
+        left: 2px;
+        border: 2px solid #fff;
+        border-top: none;
+        border-right: none;
+        -moz-transform: rotate(-45deg);
+        -ms-transform: rotate(-45deg);
+        -webkit-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+
+      }
+    }
+  }
+  &.single{
+    margin: 0 auto;
+    label{
+      border: 1px solid #aaa;
+    }
+    input[type=checkbox]{
+      &:checked + label{
+        border-color: #003eee;
+      }
+      &:checked + label:after{
+        content: '';
+        width: 13px;
+        height: 6px;
+        position: absolute;
+        top: 3px;
+        left: 1px;
+        border: 2px solid #003eee;
+        border-top: none;
+        border-right: none;
+        -moz-transform: rotate(-45deg);
+        -ms-transform: rotate(-45deg);
+        -webkit-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}
+</style>

src/styles/main.css

@@ -10,7 +10,7 @@ html.dark {
   background: #121212;
 }
 .bg-0048e5{
-  background: #0048e5;
+  background: #003eee;
 }
 .width-1200px{
   width: 1200px;
@@ -21,3 +21,19 @@ html.dark {
 .font-size-12{
   font-size: 12px;
 }
+.el-button--primary{
+  background:#003eee;
+  border-color: #003eee;
+}
+.el-button--primary:hover{
+  background:#003eee;
+  border-color: #003eee;
+  opacity: .65;
+}
+.el-input__wrapper.is-focus,
+.el-select .el-input.is-focus .el-input__wrapper{
+  box-shadow: 0 0 0 1px #003eee!important;
+}
+.new-btn{
+
+}