style

src/assets/app.css

@@ -10,9 +10,11 @@ p {
   margin: 0;
 }
 
-/* :root {
-  --van-font-size-xs: 12px !important;
+:root {
+  /* --van-font-size-xs: 12px !important;
   --van-font-size-sm: 14px !important;
   --van-font-size-md: 16px !important;
-  --van-font-size-lg: 18px !important;
-} */
+  --van-font-size-lg: 18px !important; */
+  --van-primary-color: #00B3EC!important;
+  --van-blue: #00B3EC!important;
+}

src/views/feedback/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="feedback">
     <div class="feedbackTop">
-      <img src="/src/assets/image/logo_4dage.svg" alt="" />
+      <img src="/src/assets/image/logo_4dage 1.svg" alt="" />
       <div class="title">用户反馈</div>
     </div>
     <div class="submit bg-white">
@@ -104,12 +104,16 @@
     min-height: 100vh;
     min-width: 100vw;
     padding: 16px;
+    ::v-deep .van-rate__item {
+      padding-right: 26px;
+    }
     .submit {
       max-width: 1088px;
       padding: 64px 48px;
       margin: 0 auto;
       .submitMc {
         display: none;
+        margin: 0 8px;
       }
       .submitPc {
         display: block;
@@ -117,7 +121,7 @@
     }
     @media screen and (max-width: 450px) {
       ::v-deep .submit {
-        padding: 24px 0;
+        padding: 0 0 24px 0;
         .submitPc {
           display: none;
         }
@@ -148,7 +152,7 @@
         height: 120px;
         background: url(../../assets/image/bg_pc.png) no-repeat;
         margin-top: 30px;
-        background-size: 1088px 120px;
+        background-size: 100% 120px;
       }
     }
     @media screen and (max-width: 450px) {

src/views/feedback/mcSubmit.vue

@@ -4,11 +4,11 @@
       <van-cell-group style="margin: none" inset>
         <div class="myTitle required"><span class="number">01</span>{{ t('feedback.title1') }}</div>
         <van-field
+          class="zdycell"
           v-model="formData.problemDesc"
           label-align="top"
           name="故障描述"
           label=""
-          :before-upload="beforeUpload"
           rows="2"
           autoSize
           :max-count="5"
@@ -18,13 +18,15 @@
           :rules="[{ required: true, message: t('feedback.settext') + t('feedback.title1') }]"
           :placeholder="t('feedback.settext')"
         />
-        <van-field name="uploader" label-align="top">
+        <van-field class="uploadercell" name="uploader" label-align="top">
           <template #input>
             <div>
               <div>
                 <van-uploader
+                  upload-icon="plus"
                   :before-read="beforeRead"
                   :after-read="clzpAfterRead"
+                  :before-upload="beforeUpload"
                   accept=".jpg,.png,.mp4"
                   :max-count="6"
                   v-model="formData.problemDescImgs"
@@ -38,6 +40,7 @@
         <van-field
           v-model="formData.solution"
           label-align="top"
+          class="zdycell"
           name="故障描述"
           label=""
           rows="2"
@@ -48,11 +51,18 @@
           :rules="[{ required: true, message: t('feedback.settext') + t('feedback.title2') }]"
           :placeholder="t('feedback.settext')"
         />
-        <van-field name="uploader" label-align="top">
+        <van-field class="uploadercell" name="uploader" label-align="top">
           <template #input>
             <div>
               <div>
-                <van-uploader :before-read="beforeRead" :after-read="clzpAfterRead" :max-count="6" v-model="formData.solutionImgs" />
+                <van-uploader
+                  upload-icon="plus"
+                  class="uploadercell"
+                  :before-read="beforeRead"
+                  :after-read="clzpAfterRead"
+                  :max-count="6"
+                  v-model="formData.solutionImgs"
+                />
               </div>
               <div class="tips">{{ t('feedback.fileTips') }}</div>
             </div>
@@ -61,6 +71,7 @@
         <div class="myTitle required"><span class="number">03</span>{{ t('feedback.title3') }}</div>
         <van-field
           v-model="setObjId.industryOptionId"
+          class="zdycell"
           is-link
           readonly
           name="picker"
@@ -78,6 +89,7 @@
         </van-popup>
         <div class="myTitle required"><span class="number">04</span>{{ t('feedback.title4') }}</div>
         <van-field
+          class="zdycell"
           v-model="setObjId.hardwareOptionId"
           is-link
           readonly
@@ -96,6 +108,7 @@
         </van-popup>
         <div class="myTitle required"><span class="number">05</span>{{ t('feedback.title5') }}</div>
         <van-field
+          class="zdycell"
           v-model="setObjId.softwareOptionId"
           is-link
           readonly
@@ -115,6 +128,7 @@
         </van-popup>
         <div class="myTitle"><span class="number">06</span>{{ t('feedback.title6') }}</div>
         <van-field
+          class="zdycell"
           v-model="formData.nickName"
           label-align="top"
           name="联系电话"
@@ -124,6 +138,7 @@
         />
         <div class="myTitle"><span class="number">07</span>{{ t('feedback.title61') }}</div>
         <van-field
+          class="zdycell"
           v-model="formData.phone"
           label-align="top"
           name="联系电话"
@@ -135,6 +150,7 @@
         <van-field
           v-model="formData.country"
           is-link
+          class="zdycell"
           readonly
           name="picker"
           label=""
@@ -151,6 +167,7 @@
         <van-field
           v-if="formData.country == '中国'"
           v-model="formData.city"
+          class="zdycell"
           is-link
           readonly
           name="area"
@@ -173,7 +190,7 @@
         >
         <van-field name="rate" label="">
           <template #input>
-            <van-rate color="#FADB14" void-color="#D9D9D9" :allow-half="true" v-model="formData.score" />
+            <van-rate size="30" color="#FADB14" void-color="#D9D9D9" :allow-half="true" v-model="formData.score" />
           </template>
         </van-field>
         <div class="myTitle"
@@ -182,13 +199,14 @@
         >
         <van-field
           v-model="formData.scoreReason"
+          class="zdycell"
           label-align="top"
           name="联系电话"
           maxlength="30"
           label=""
           :placeholder="t('feedback.settext')"
         />
-        <div style="margin: 16px; background-color: #f5f5f5">
+        <div style="margin: 54px 0 16px 0; background-color: #f5f5f5">
           <van-button style="height: 44px" block color="#00B3EC" type="primary" native-type="submit"> 提交 </van-button>
         </div>
       </van-cell-group>
@@ -274,6 +292,21 @@
     return isJpgOrPng && isLt2M;
   }; //校验图片的格式
   function beforeRead(file) {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'video/mp4';
+    if (!isJpgOrPng) {
+      message.error(t('feedback.fileTips'));
+      return false;
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    const isLt50M = file.size / 1024 / 1024 < 50;
+    if (!isLt2M && (file.type === 'image/jpeg' || file.type === 'image/png')) {
+      message.error(t('feedback.fileTips'));
+      return false;
+    }
+    if (!isLt50M && file.type === 'video/mp4') {
+      message.error(t('feedback.fileTips'));
+      return Upload.LIST_IGNORE;
+    }
     if (!/(jpg|jpeg|png|JPG|PNG|mp4)/i.test(file.type)) {
       showToast(t('feedback.upload'));
       return false;
@@ -340,8 +373,8 @@
     }
     .myTitle {
       position: relative;
-      margin-top: 14px;
-      padding: 0 var(--van-cell-horizontal-padding);
+      margin: 32px 0 15px 0;
+      // padding: 0 var(--van-cell-horizontal-padding);
       .number {
         font-size: 16px;
         font-family: Microsoft YaHei, Microsoft YaHei;
@@ -357,5 +390,23 @@
         margin-right: 7px;
       }
     }
+    ::v-deep .van-cell:after {
+      display: none;
+    }
+    ::v-deep .van-cell {
+      padding: 4px 16px;
+    }
+    ::v-deep .van-uploader__upload{
+      background-color: #fff;
+      border: 1px solid #e4e4e5;
+      border-radius: 5px;
+    }
+    .zdycell {
+      border: 1px solid #e4e4e5;
+      border-radius: 5px;
+    }
+    .uploadercell{
+      padding: 40px 0 0 0;
+    }
   }
 </style>

src/views/feedback/pcSubmit.vue

@@ -5,7 +5,7 @@
         <div class="myTitle required" slot="label"><span class="number">01</span>{{ t('feedback.title1') }}</div>
         <a-textarea :autoSize="{ minRows: 3, maxRows: 6 }" v-model:value="formData.problemDesc" :placeholder="t('feedback.settext')" />
       </a-form-item>
-      <a-form-item name="problemFile">
+      <a-form-item name="problemFile" style="margin-top: 32px">
         <a-upload
           v-model:file-list="formData.problemDescImgs"
           accept=".jpg,.png,.mp4"
@@ -24,7 +24,7 @@
         <div class="myTitle required" slot="label"><span class="number">02</span>{{ t('feedback.title2') }}</div>
         <a-textarea :autoSize="{ minRows: 3, maxRows: 6 }" v-model:value="formData.solution" :placeholder="t('feedback.settext')" />
       </a-form-item>
-      <a-form-item>
+      <a-form-item name="problemFile" style="margin-top: 32px">
         <a-upload v-model:file-list="formData.solutionImgs" action="/service/sale/upload/file" list-type="picture-card">
           <div>
             <PlusOutlined />
@@ -91,7 +91,7 @@
           ><span class="number">{{ formData.country == '中国' ? '10' : '09' }}</span
           >{{ t('feedback.title8') }}</div
         >
-        <van-rate color="#FADB14" void-color="#D9D9D9" :allow-half="true" v-model="formData.score" :placeholder="t('feedback.setselcet')" />
+        <van-rate color="#FADB14" size="30" void-color="#D9D9D9" :allow-half="true" v-model="formData.score" :placeholder="t('feedback.setselcet')" />
       </a-form-item>
       <a-form-item>
         <div class="myTitle" slot="label"
@@ -205,6 +205,7 @@
   .myTitle {
     position: relative;
     margin-bottom: 14px;
+    margin-top: 32px;
     .number {
       font-size: 16px;
       font-family: Microsoft YaHei, Microsoft YaHei;