UI调整

src/assets/styles/base.less

@@ -130,3 +130,6 @@ body {
 .mb-4 {
   margin-bottom: 20px;
 }
+.mr-1 {
+  margin-right: 5px;
+}

src/assets/styles/home.less

@@ -15,6 +15,7 @@
   bottom: 0;
   overflow: auto;
   z-index: 98;
+  padding: 0 30px 30px;
 }
 .home-main {
   position: relative;
@@ -83,8 +84,7 @@
 /* part */
 .part-box {
   position: relative;
-  min-height: 490px;
-  margin: 0 30px 40px;
+  height: 100%;
   border-radius: 40px;
   background-color: @background-light;
   overflow: auto;

src/assets/styles/iview-custom.less

@@ -222,7 +222,15 @@
     }
   }
 }
+.vertical-center-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
+  .ivu-modal {
+    top: 0;
+  }
+}
 // message
 .ivu-message {
   .ivu-message-notice-content {

src/assets/styles/manage.less

@@ -337,31 +337,7 @@
 
   // scan-area-steps
   .scan-area-steps {
-    position: relative;
     background-color: @background;
-    height: 100%;
     border-radius: 8px;
-
-    .part-head {
-      position: absolute;
-      width: 100%;
-      height: 64px;
-      top: 0;
-      left: 0;
-      z-index: auto;
-    }
-    .step-body {
-      padding: 64px 0 66px;
-      height: 100%;
-      margin: 0;
-    }
-    .step-ctrl {
-      position: absolute;
-      width: 100%;
-      height: 66px;
-      bottom: 0;
-      left: 0;
-      z-index: auto;
-    }
   }
 }

src/assets/styles/pages.less

@@ -4,9 +4,8 @@
     position: absolute;
     z-index: 9;
     width: 100%;
-    height: 260px;
     top: 50%;
-    margin-top: -130px;
+    transform: translateY(-50%);
     color: @fontMain;
 
     ul {
@@ -108,9 +107,12 @@
 
 /* camera */
 .camera-form {
+  position: absolute;
   width: 400px;
-  padding-top: 80px;
-  margin: 0 auto;
+  left: 50%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: -200px;
   .ivu-input {
     text-align: center;
     padding: 20px;
@@ -128,9 +130,6 @@
   text-align: center;
   margin-top: 50px;
 }
-.camera-write:hover {
-  color: @sub-color;
-}
 .camera-btn {
   position: absolute;
   left: 50%;
@@ -141,15 +140,32 @@
 
 /* setting-steps */
 .scan-area-steps {
+  position: relative;
+  height: 100%;
+
+  .part-head {
+    position: absolute;
+    width: 100%;
+    height: 64px;
+    top: 0;
+    left: 0;
+    z-index: auto;
+  }
+
   .step-body {
     position: relative;
-    padding: 0 30px;
-    margin-bottom: 40px;
-    min-height: 400px;
+    padding: 64px 0 66px;
+    height: 100%;
   }
   .step-ctrl {
-    text-align: center;
+    position: absolute;
+    width: 100%;
+    height: 66px;
+    bottom: 0;
+    left: 0;
+    z-index: auto;
     padding: 15px 0;
+    text-align: center;
 
     > button {
       width: 160px;
@@ -163,6 +179,7 @@
     position: relative;
     width: calc(100% - 250px);
     height: 100%;
+    overflow: hidden;
     &-disabled::before {
       content: "";
       display: block;
@@ -346,7 +363,6 @@
   height: 100%;
   .code-area-cont {
     width: 100%;
-    height: 100%;
   }
 }
 /* image-orientation */
@@ -373,21 +389,34 @@
 
 /* waiting */
 .waiting {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
   padding: 50px 20px;
   text-align: center;
   font-size: 24px;
 
   > i {
-    font-size: 40px;
+    margin-right: 5px;
   }
 }
 /* scan-wait */
 .scan-wait {
-  padding-top: 200px;
-  text-align: center;
-  position: relative;
-  button {
-    margin: 0 10px;
+  .action-list {
+    li {
+      width: 260px;
+      height: 160px;
+      padding: 60px 10px 0;
+
+      &:nth-of-type(1) {
+        background-color: @pink-color;
+      }
+      &:nth-of-type(2) {
+        background-color: @main-color;
+      }
+    }
   }
 
   &-tips {
@@ -403,17 +432,19 @@
 /* check-info */
 .check-info {
   .check-form {
-    padding-top: 80px;
+    position: absolute;
     width: 400px;
-    margin: 0 auto;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: -200px;
   }
   .check-action {
-    margin-top: 212px;
-    text-align: center;
-    > button {
-      height: 44px;
-      width: 160px;
-    }
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    width: 220px;
+    margin-left: -110px;
   }
 
   .ivu-select {
@@ -472,19 +503,17 @@
 }
 .check-result {
   text-align: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
   &-item {
-    display: inline-block;
-    vertical-align: top;
     width: 200px;
-    height: 144px;
+    min-height: 144px;
     border-radius: 20px;
     border: 2px solid rgba(59, 66, 122, 1);
     color: @fontSub;
     position: relative;
     padding: 32px 15px;
-    &:first-child {
-      margin-right: 10px;
-    }
     > i {
       position: absolute;
       top: 20px;
@@ -506,6 +535,7 @@
 
 /* scan */
 .scan {
+  height: 100%;
   // &-back {
   //   position: fixed;
   //   width: 220px;
@@ -628,28 +658,33 @@
   }
 
   &-image {
-    margin: 0 260px;
-    padding-bottom: 18px;
+    position: relative;
+    height: 100%;
+    margin: 0 210px;
   }
 
   &-main {
-    height: 456px;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    bottom: 56px;
     background: @background-light;
-    margin-bottom: 20px;
-    position: relative;
+    z-index: auto;
   }
 
   /* scan-wariting */
   &-waiting {
-    padding-top: 140px;
     border-radius: 20px;
     &-icon {
+      position: absolute;
       width: 233px;
       height: 229px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       background-image: url(../images/camera.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
-      margin: 0 auto;
     }
   }
 
@@ -659,12 +694,23 @@
   }
   // scan-info
   &-info {
-    margin-top: 20px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 0 0;
+    height: 56px;
     overflow: hidden;
     line-height: 36px;
-    p {
-      float: left;
+    z-index: 9;
+
+    &-main {
+      > p {
+        display: inline-block;
+        vertical-align: middle;
+      }
     }
+
     &-cont {
       margin-right: 20px;
 
@@ -700,13 +746,10 @@
       }
     }
   }
-  &-reset-area {
-    float: right;
-  }
 }
 .line-scan {
   .scan-image {
-    margin-left: 40px;
+    margin-left: 0;
   }
   .scan-student {
     position: absolute;
@@ -746,16 +789,16 @@
 .scan-exception-dialog {
   .exception-body {
     position: relative;
-    width: 944px;
+    height: 100%;
     margin: 0 auto;
     border-radius: 20px;
     background-color: #2e325a;
-    padding: 0 30px 30px;
+    overflow: hidden;
   }
   .exception-title {
-    position: relative;
+    position: absolute;
     font-size: 18px;
-    padding: 20px 0;
+    padding: 20px;
     line-height: 24px;
     > i {
       margin-right: 10px;
@@ -779,13 +822,19 @@
     }
   }
   .exception-code-area {
-    margin-bottom: 32px;
+    position: relative;
+    padding: 64px 0 80px;
   }
   .exception-footer {
+    position: absolute;
+    width: 100%;
+    height: 80px;
+    bottom: 0;
+    left: 0;
+    z-index: auto;
+    padding: 20px 20px 0;
     overflow: hidden;
-  }
-  .exception-form {
-    float: left;
+    align-items: flex-start;
   }
   .exception-search {
     width: 30px;
@@ -798,7 +847,6 @@
     }
   }
   .exception-actions {
-    float: right;
     > button {
       margin: 0 5px;
       font-weight: 500;
@@ -810,7 +858,7 @@
   }
   .ivu-modal-body {
     top: 0 !important;
-    padding: 56px 40px;
+    padding: 30px;
   }
   .ivu-modal-content {
     background: #25294a !important;
@@ -828,6 +876,7 @@
   }
   .ivu-modal-body {
     top: 62px !important;
+    padding-bottom: 30px;
   }
 }
 

src/modules/client/components/ScanExceptionDialog.vue

@@ -38,7 +38,7 @@
         </div>
       </div>
 
-      <div class="exception-footer" v-if="curException.showAction">
+      <div class="exception-footer box-justify" v-if="curException.showAction">
         <Form
           class="exception-form"
           ref="modalFormComp"

src/modules/client/views/Camera.vue

@@ -36,9 +36,9 @@
           <Button icon="handle icon" @click="toHandInput">手工输入</Button>
         </div>
       </Form>
-      <div class="camera-btn">
-        <Button size="large" type="primary" long @click="submit">下一步</Button>
-      </div>
+    </div>
+    <div class="camera-btn">
+      <Button type="primary" long @click="submit">下一步</Button>
     </div>
   </div>
 </template>

src/modules/client/views/CheckInfo.vue

@@ -27,7 +27,7 @@
       </Form>
     </div>
     <div class="check-action">
-      <Button size="large" type="primary" @click="save">下一步</Button>
+      <Button type="primary" long @click="save">下一步</Button>
     </div>
     <!-- confirm modal -->
     <Modal
@@ -37,7 +37,7 @@
       :width="490"
       :mask-closable="false"
       :closable="false"
-      :mask="false"
+      class-name="vertical-center-modal"
     >
       <div class="check-result">
         <div class="check-result-item">

src/modules/client/views/GroupScan.vue

@@ -39,18 +39,20 @@
       <div class="scan-main scan-picture" v-else>
         <img class="img-contain" :src="curImage.url" :alt="curImage.name" />
       </div>
-      <div class="scan-info">
-        <p class="scan-info-cont scan-info-scan">
-          <span>已采集：</span>
-          <span>{{ scanNo }}</span>
-        </p>
-        <p class="scan-info-cont scan-info-upload">
-          <span>未上传：</span>
-          <span>{{ unuploadNo }}</span>
-        </p>
-        <p>
-          <Button @click="resetStartCountTime">清零</Button>
-        </p>
+      <div class="scan-info box-justify">
+        <div class="scan-info-main">
+          <p class="scan-info-cont scan-info-scan">
+            <span>已采集：</span>
+            <span>{{ scanNo }}</span>
+          </p>
+          <p class="scan-info-cont scan-info-upload">
+            <span>未上传：</span>
+            <span>{{ unuploadNo }}</span>
+          </p>
+          <p>
+            <Button @click="resetStartCountTime">清零</Button>
+          </p>
+        </div>
         <div class="scan-reset-area">
           <Button
             type="primary"

src/modules/client/views/LineScan.vue

@@ -11,18 +11,20 @@
           ><span>{{ curStudent.examNumber }}</span>
         </div>
       </div>
-      <div class="scan-info">
-        <p class="scan-info-cont scan-info-scan">
-          <span>已采集：</span>
-          <span>{{ scanNo }}</span>
-        </p>
-        <p class="scan-info-cont scan-info-upload">
-          <span>未上传：</span>
-          <span>{{ unuploadNo }}</span>
-        </p>
-        <p>
-          <Button @click="resetStartCountTime">清零</Button>
-        </p>
+      <div class="scan-info box-justify">
+        <div class="scan-info-main">
+          <p class="scan-info-cont scan-info-scan">
+            <span>已采集：</span>
+            <span>{{ scanNo }}</span>
+          </p>
+          <p class="scan-info-cont scan-info-upload">
+            <span>未上传：</span>
+            <span>{{ unuploadNo }}</span>
+          </p>
+          <p>
+            <Button @click="resetStartCountTime">清零</Button>
+          </p>
+        </div>
         <div class="scan-reset-area">
           <Button
             type="primary"

src/modules/client/views/ScanArea.vue

@@ -8,7 +8,7 @@
     ></scan-area-steps>
     <div class="waiting" v-else>
       <Icon class="ivu-load-loop" type="ios-loading" />
-      <p>获取图片中，请稍后...</p>
+      <span>获取图片中，请稍后...</span>
     </div>
   </div>
 </template>

src/modules/client/views/ScanWait.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="scan-wait part-box">
-    <Button type="error" @click="resetConfig">重新设置采集信息</Button>
-    <Button type="primary" @click="tocCheckEncrypt" :loading="loading"
-      >开始采集</Button
-    >
+  <div class="scan-wait part-box action-type">
+    <div class="action-list">
+      <ul>
+        <li @click="resetConfig">重新设置采集信息</li>
+        <li @click="tocCheckEncrypt">
+          <Icon
+            v-if="loading"
+            class="ivu-load-loop mr-1"
+            type="ios-loading"
+          />开始采集
+        </li>
+      </ul>
+    </div>
     <p class="scan-wait-tips" v-if="tips">{{ tips }}</p>
   </div>
 </template>
@@ -49,6 +57,7 @@ export default {
       this.$router.push({ name: routerName });
     },
     tocCheckEncrypt() {
+      if (this.loading) return;
       this.exceptionIsConfirm = true;
       this.loading = true;
       this.tips = "正在检测加密狗，请稍后……";