提交

src/pages/process/index.vue

@@ -387,7 +387,7 @@ function getListData() {
 getListData();
 </script>
 <style lang="scss" scoped>
-$color: #003eee;
+$color: #0048e5;
 ::v-deep .el-pagination.is-background .btn-next.is-active,
 ::v-deep .el-pagination.is-background .btn-prev.is-active,
 ::v-deep .el-pagination.is-background .el-pager li.is-active{

src/pages/process/kcsz/index.vue

@@ -1,6 +1,37 @@
 <template>
   <NavHeader/>
   <bread-crumb/>
+  <div class="w-1200px m-auto">
+    <div class="relative -mt-40px flex justify-end">
+      <button type="button" class="back-btn" @click="linkTo('process')">返回</button>
+    </div>
+    <div class="mt-10px w-full min-h-860px bg-hex-FFF py-25px px-20px">
+      <div class="flex items-center justify-between">
+        <div>
+          <img src="/images/icon-room.png" class="w-54px inline-block align-middle h-54px" alt="">
+          <h3 class="ml-10px text-20px text-hex-0148E5 inline-block align-middle">考场信息</h3>
+          <h4 class="ml-99px text-14px text-hex-0148E5 inline-block align-middle">总学生数：270人</h4>
+          <h4 class="ml-10px text-14px text-hex-0148E5 inline-block align-middle">试卷状态：</h4>
+          <h5 class="icon-state unusual inline-block align-middle"></h5>
+          <h5 class="ml-3px text-14px text-hex-FF8E00 inline-block align-middle">2</h5>
+          <h5 class="ml-10px icon-state absent inline-block align-middle"></h5>
+          <h5 class="ml-3px text-14px text-hex-909090 inline-block align-middle">21</h5>
+          <h5 class="ml-10px icon-state invalid inline-block align-middle"></h5>
+          <h5 class="ml-3px text-14px text-hex-FF0000 inline-block align-middle">21</h5>
+        </div>
+        <button type="button" class="room-btn">自动生成缺考</button>
+      </div>
+      <div class="mt-20px flex">
+        <button type="button" class="room-btn">下载二维码</button>
+        <button type="button" class="ml-15px room-btn">下载条形码</button>
+        <button type="button" class="ml-15px room-btn">选择历史考生</button>
+        <button type="button" class="ml-15px room-btn">上传考生</button>
+        <button type="button" class="ml-15px room-btn">下载模板</button>
+        <button type="button" class="ml-15px room-btn">导出</button>
+      </div>
+    </div>
+  </div>
+  <commonFooter/>
 </template>
 <route lang="json">
 {
@@ -18,6 +49,48 @@ const linkTo = (name) => {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.icon-state{
+  width: 27px;
+  height: 24px;
+  &.invalid{
+    background: url("/images/icon-invalid.png") center no-repeat;
+    background-size: 27px 24px;
+  }
+  &.unusual{
+    background: url("/images/icon-unusual.png") center no-repeat;
+    background-size: 27px 24px;
+  }
+  &.absent{
+    background: url("/images/icon-miss.png") center no-repeat;
+    background-size: 27px 24px;
+  }
+}
+.room-btn {
+  height: 30px;
+  border: 1px solid #003eee;
+  background: #fff;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 14px;
+  color: #003eee;
+
+  &:disabled {
+    background: #ccc;
+    border-color: #ccc;
+    color: #fff;
+    cursor: default;
+  }
 
+  input[type=file] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+}
 </style>