refactor(feedback): 优化反馈页面样式和布局

-

pages/common/feedback.vue

@@ -4,19 +4,25 @@
 
     <view class="main_section">
       <view class="section">
-        <fui-textarea placeholder="请输入反馈内容"></fui-textarea>
+        <view class="text_input">
+          <fui-textarea placeholder="请输入反馈内容"></fui-textarea>
+        </view>
       </view>
 
       <view class="section">
-       <view class="input_box">
+       <view class="upload_box">
          <view>上传图片</view>
          <AQUplodeImgMulti :inputName="`images_arr`" :inputValue="formData.images_arr || []" @AQUploadSuccess="AQUploadSuccess"/>
        </view>
       </view>
 
       <view class="section">
-        <fui-input label="邮箱方式" borderTop placeholder="请输入邮箱"></fui-input>
+        <view class="input_box">
+          <fui-input label="邮箱方式" borderTop placeholder="请输入邮箱"></fui-input>
+        </view>
       </view>
+
+      <view class="btn">提交</view>
     </view>
   </view>
 </template>
@@ -117,58 +123,65 @@ export default {
 .main_section{
   min-height: 100vh;
   background: #292929 100%;
-  padding: 0 24rpx;
+  padding: 0 0rpx;
   padding-top: 32rpx;
   padding-bottom: 150rpx;
   font-size: 28rpx;
   color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+
   .section{
-    border: 1px solid red;
+    background-color: #434544;
-    .input_box{
+    padding: 40rpx 40rpx;
-      margin-bottom: 20rpx;
+    .text_input{
-      border-bottom: 1rpx solid #f3f3f3;
+      border: 1px solid #434544;
-      padding: 10rpx;
+      background-color: #434544 !important;
-      display: flex;
+      ::v-deep .fui-textarea__wrap{
-      justify-content: space-between;
+        border: 1px solid #797979;
-      align-items: center;
+        background-color: #434544 !important;
-      //border: 1px solid red;
-      view{
-        .required {
-          color: red;
-          margin-left: 5px; /* 可选：调整 * 的位置 */
-        }
-      }
-      .input{
-        padding-bottom: 15rpx;
-        width: 70%;
-        height: 40rpx;
-        font-size: 28rpx;
       }
-      .button{
+      ::v-deep .fui-textarea__background{
-        border: 1px solid #E87375;
+        border: 0;
-        color: #E87375;
+        background-color: #434544 !important;
-        padding: 2rpx 6rpx;
-        font-size: 28rpx;
-        border-radius: 8rpx;
       }
-      .invoice_type_box{
+    }
-        width: 100%;
+    .upload_box{
-        display: flex;
+      display: flex;
-        align-items: center;
+      flex-direction: column;
-        gap: 20rpx;
+      gap: 20rpx;
+    }
+    .input_box{
+      padding: 0;
+      color: #fff;
+      ::v-deep .fui-input__wrap{
+        background: #434544 !important;
+        padding-left: 0 !important;
       }
-      .edit-sex-list{
+      ::v-deep .fui-input__label{
-        width: 70%;
+        span{
-        display: flex;
+          color: #fff !important;
-        justify-content: space-between;
-        align-items: center;
-        .label_box{
-          display: flex;
-          align-items: center;
         }
       }
+      ::v-deep .uni-input-input{
+        color: #fff;
+      }
+      ::v-deep .fui-input__background{
+        background: #434544 !important;
+      }
     }
   }
+  .btn{
+    margin: 0 auto;
+    margin-top: 40rpx;
+    border: 1px solid #25a18b;
+    color: #25a18b;
+    width: 80%;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+  }
 
 }