图像识别页面优化

src/assets/styles/variable.scss

@@ -1,6 +1,4 @@
-@use "sass:math";
 $vw_base: 750; //设计稿宽度
 @function vw($px) {
- 	@return (math.div($px, $vw_base)) * 100vw;
-}
-
+	@return ($px / $vw_base) * 100vw;
+}

src/components/imageAIVerifyErr.vue

@@ -30,7 +30,9 @@
               </div>
             </div>
           </template>
-          <div class="uploadBtnAIVerify">
+          <div
+            class="uploadBtnAIVerify"
+            :style="{ 'justify-content': shotsNum >= maxNum ? 'space-between' : center }">
             <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
             <div v-if="shotsNum >= maxNum" class="stillUploadAIVerify" @click="confirmUpload">
               仍要上传
@@ -47,11 +49,7 @@
             <!-- 有门店身份证时 只显示门店身份证和本地拜访照 -->
             <template v-if="storeIDCardUrl">
               <div class="storeIDCardUrl imageItemAIVerify">
-                <img
-                  :src="storeIDCardUrl"
-                  width="100px"
-                  height="100px"
-                  @click="previewsImg(storeIDCardUrl)" />
+                <img :src="storeIDCardUrl" @click="previewsImg(storeIDCardUrl)" />
                 <span>门店标准店招</span>
               </div>
             </template>
@@ -60,26 +58,19 @@
                 <img
                   v-if="createStoreUrl"
                   :src="createStoreUrl"
-                  width="100px"
-                  height="100px"
                   @click="previewsImg(createStoreUrl)" />
-                <img v-else :src="imageEmpty" width="100px" height="100px" />
+                <img v-else :src="imageEmpty" />
                 <span>建店时门店照</span>
               </div>
               <div class="newestImage imageItemAIVerify">
-                <img
-                  v-if="lastVisitUrl"
-                  :src="lastVisitUrl"
-                  width="100px"
-                  height="100px"
-                  @click="previewsImg(lastVisitUrl)" />
-                <img v-else :src="imageEmpty" width="100px" height="100px" />
+                <img v-if="lastVisitUrl" :src="lastVisitUrl" @click="previewsImg(lastVisitUrl)" />
+                <img v-else :src="imageEmpty" />
                 <span>上次拜访店招</span>
               </div>
             </template>
             <div class="presentImage imageItemAIVerify">
-              <img v-if="url" :src="url" width="100px" height="100px" @click="previewsImg(url)" />
-              <img v-else :src="imageEmpty" width="100px" height="100px" />
+              <img v-if="url" :src="url" @click="previewsImg(url)" />
+              <img v-else :src="imageEmpty" />
               <span>本次拜访店招</span>
             </div>
           </div>
@@ -97,7 +88,7 @@
                 placeholder="请输入反馈意见" />
             </div>
           </div>
-          <div class="uploadBtnAIVerify">
+          <div class="uploadBtnAIVerify" style="justify-content: center">
             <div class="confirmUploadAIVerify" @click="uploadImg(true)">重新拍照</div>
             <div class="changeImageAIVerify" @click="confirmUpDataImage()">更新门店照</div>
           </div>
@@ -282,13 +273,13 @@ export default {
   align-items: center;
   background: rgba(0, 0, 0, 0.5) !important;
   .el-dialog__body {
-    padding: 6px !important;
+    padding: 0px !important;
   }
   .el-dialog__header {
     text-align: center;
   }
   .AIVerifyErrdialog {
-    width: 95% !important;
+    width: vw(690) !important;
     margin-top: 1vh !important;
     border-radius: 8px !important;
     font-size: vw(32) !important;
@@ -302,7 +293,7 @@ export default {
   }
   .AIVerifyErrMask {
     width: 100%;
-    padding: 8px;
+    padding: vw(30) vw(30) 0 vw(30);
     overflow: hidden;
     /* min-height: 180px; */
     .errorImg {
@@ -310,12 +301,15 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      min-height: vw(303);
       img {
         width: vw(235);
+        height: vw(303);
+        border-radius: vw(10);
       }
     }
     .AIVerify {
-      font-size: vw(30);
+      font-size: vw(32);
       margin-top: vw(45);
       display: flex;
       justify-content: center;
@@ -361,15 +355,13 @@ export default {
     }
   }
   .tipsAIVerify {
-    padding: vw(28) 0;
+    padding: vw(30) 0 vw(40) 0;
     font-size: vw(22);
     color: #999999;
   }
   .uploadBtnAIVerify {
     display: flex;
     align-items: center;
-    justify-content: center;
-    padding: vw(8) 0;
     margin-top: vw(30);
     div {
       display: flex;
@@ -382,21 +374,23 @@ export default {
       width: vw(298);
       height: vw(68);
       background-blend-mode: normal, normal;
-      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
     }
     .confirmUploadAIVerify {
       background-image: linear-gradient(180deg, #ffa1a1 0%, #f6695f 35%, #ed301d 100%),
         linear-gradient(#aed0f9, #aed0f9);
+      box-shadow: 0px 3px 6px 0px rgba(183, 30, 14, 0.35);
       margin-right: 6px;
     }
     .changeImageAIVerify {
       background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
         linear-gradient(#0356b9, #0356b9);
+      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
       margin-left: 6px;
     }
     .stillUploadAIVerify {
       background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
         linear-gradient(#0356b9, #0356b9);
+      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
       margin-left: 6px;
     }
   }
@@ -414,6 +408,11 @@ export default {
         font-size: 12px;
         padding-top: 3px;
       }
+      img {
+        width: vw(196);
+        height: vw(228);
+        border-radius: vw(10);
+      }
     }
   }
   .tipsRemarkAIVerify {
@@ -441,8 +440,12 @@ export default {
       }
     }
     .van-field__body {
-      border: 1px solid #ccc;
-      padding-left: 10px;
+      border-radius: vw(10);
+      border: solid 1px #aaaaaa;
+      padding-left: vw(10);
+      background-color: #e7e7e7;
+      .van-field__control {
+      }
     }
   }
 }

src/components/uploadImgVStore.vue

@@ -95,36 +95,7 @@ export default {
       percentage: 0,
       timeFlag: null,
       imageAIVerifyFlag: false,
-      imageAIVerifyData: [
-        {
-          npkpiData: {
-            storeCode: null,
-            recognizeType: 1,
-            imageUrl:
-              'http://imagedt-nipponpaint.oss-cn-shenzhen.aliyuncs.com/77/772550faf0627de382d2336fb6c6ccfd.jpg',
-            shopSignInfo: {
-              name: null,
-              npStoreCode: null,
-              phone: '',
-              address: null,
-              contact: '',
-              businessScope: null,
-              mainBrand: null,
-            },
-            shopSignChange: 0,
-            checkInfo: {
-              cheatState: 0,
-              cheatType: null,
-              qualifiedState: 0,
-              unqualifiedReason: '纯色、非店招',
-            },
-            shopSignMatchList: [],
-          },
-          size: '82',
-          businessId: '8959656c-bd29-467a-b72a-6dc32a7e95f7',
-          url: 'https://cdn-svs-test.nipponpaint.com.cn/17401005962152025-02-21%E8%B0%88.jpg?Expires=2055633396&OSSAccessKeyId=LTAI5tG1DTJFA16BHkzHVxjz&Signature=8hlflptRBXlOfGIayDRZHRniKto%3D',
-        },
-      ], //图匠校验返回的数据
+      imageAIVerifyData: null, //图匠校验返回的数据
       controller: null, //取消请求状态
     };
   },

vue.config.js

@@ -57,7 +57,7 @@ module.exports = {
         // 但是在配置 `data` 选项的时候
         // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
         // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
-        prependData: `@import "@/assets/styles/variable.scss";`,
+        additionalData: `@import "@/assets/styles/variable.scss";`,
       },
     },
   },