瀏覽代碼

mod:check样式调整

panqiuyao 8 月之前
父節點
當前提交
cdb1a7c4ab
共有 1 個文件被更改,包括 43 次插入34 次删除
  1. 43 34
      frontend/src/views/Photography/check.vue

+ 43 - 34
frontend/src/views/Photography/check.vue

@@ -1,46 +1,49 @@
 <template>
-  <div class="check-page flex-col">
-    <div class="main-container flex-col">
-      <div class="content-wrapper flex-row justify-between">
-        <div class="left-panel flex-col justify-between">
-          <div class="tips-container flex-row" v-if="show">
-            <img class="tips-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/tips-icon.png" />
-            <span class="tips-tex">请在圆盘上摆上鞋子(注意左右脚),要求鞋外侧朝向拍照机,鞋子中轴线和红外线对齐</span>
-            <img class="close-icon cu-p" referrerpolicy="no-referrer" src="@/assets/images/Photography/close-icon.png"  @click="show = false"/>
-          </div>
-          <div class="camera-preview  flex col center ">
-            <span v-if="step === 1" class="fs-14">
-               <img v-if="previewKey" class="camera-img" :src="preview+'?key='+previewKey" />
-            </span>
-            <template v-if="step === 2" >
-              <img class="camera-img" :src="imageUrl+'?key='+imageUrlkey" />
-              <span  class="camera-description">这是一张用于检查镜头是否合适的测试图</span>
-            </template>
+  <div class="check-wrap flex">
+
+    <div class="check-page flex-col">
+      <div class="main-container flex-col">
+        <div class="content-wrapper flex-row justify-between">
+          <div class="left-panel flex-col justify-between">
+            <div class="tips-container flex-row" v-if="show">
+              <img class="tips-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/tips-icon.png" />
+              <span class="tips-tex">请在圆盘上摆上鞋子(注意左右脚),要求鞋外侧朝向拍照机,鞋子中轴线和红外线对齐</span>
+              <img class="close-icon cu-p" referrerpolicy="no-referrer" src="@/assets/images/Photography/close-icon.png"  @click="show = false"/>
+            </div>
+            <div class="camera-preview  flex col center ">
+              <span v-if="step === 1" class="fs-14">
+                 <img v-if="previewKey" class="camera-img" :src="preview+'?key='+previewKey" />
+              </span>
+              <template v-if="step === 2" >
+                <img class="camera-img" :src="imageUrl+'?key='+imageUrlkey" />
+                <span  class="camera-description">这是一张用于检查镜头是否合适的测试图</span>
+              </template>
+            </div>
           </div>
+          <div class="example-image flex-col"><span class="example-text">示范图片</span></div>
         </div>
-        <div class="example-image flex-col"><span class="example-text">示范图片</span></div>
-      </div>
-      <div v-if="step === 1" class="action-button flex cente">
-        <div @click="takePictures" class="check-button  button--primary1 flex-col"><span class="button-text">拍照检查</span>
+        <div v-if="step === 1" class="action-button flex cente">
+          <div @click="takePictures" class="check-button  button--primary1 flex-col"><span class="button-text">拍照检查</span>
+          </div>
         </div>
-      </div>
 
-      <div v-else class="action-button flex center">
-        <div @click="checkConfirm" class="check-button  button--white flex-col">
-          <span class="button-text cu-p">重新拍照检查</span>
-        </div>
-        <router-link class="mar-left-20 " :to="{
-          name: 'PhotographyShot'
-        }">
-          <div class="check-button   button--primary1 flex-col">
-            <span class="button-text cu-p">确认无误,下一步</span>
+        <div v-else class="action-button flex center">
+          <div @click="checkConfirm" class="check-button  button--white flex-col">
+            <span class="button-text cu-p">重新拍照检查</span>
           </div>
-        </router-link>
+          <router-link class="mar-left-20 " :to="{
+            name: 'PhotographyShot'
+          }">
+            <div class="check-button   button--primary1 flex-col">
+              <span class="button-text cu-p">确认无误,下一步</span>
+            </div>
+          </router-link>
 
+        </div>
       </div>
     </div>
-  </div>
 
+  </div>
 
   <hardware-check
    @confirm="checkConfirm"
@@ -126,8 +129,14 @@ function takePictures() {
 }
 </script>
 <style scoped lang="scss">
-.check-page {
+.check-wrap {
+
   background-color: rgba(234, 236, 237, 1);
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+}
+.check-page {
   position: relative;
   width: 1200px;
   height: 768px;