feat ui设计稿

src/views/profile/cpns/FeedbackForm.vue

@@ -114,13 +114,14 @@ function onReset(): void {
 </template>
 
 <style lang="less" scoped>
+// 设计 18（意见反馈表单）：表单直接铺在白面板上（无内嵌卡）、标签 13 设计px w500、
+// 白底 #DDE1E7 描边输入、计数灰字、附件区白底描边
 .feedback-form {
   .flex(column, flex-start);
   gap: @spacing-base;
-  padding: @spacing-lg @spacing-xl;
-  border-radius: @radius-lg;
-  background: @white;
-  box-shadow: @shadow-base;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
 
   &__field {
     .flex(column, flex-start);
@@ -129,7 +130,8 @@ function onReset(): void {
   }
 
   &__label {
-    font-size: @font-size-base;
+    font-size: 11px;
+    font-weight: 500;
     color: @heading-color;
   }
 
@@ -138,52 +140,51 @@ function onReset(): void {
     color: @danger-color;
   }
 
-  &__input {
+  &__input,
+  &__textarea {
     width: 100%;
-    height: 40px;
-    padding: 0 @spacing-base;
-    border: 1px solid @border-color;
-    border-radius: @radius-base;
-    background: @bg-color-light;
-    font-size: @font-size-base;
+    padding: 0 12px;
+    border: 1px solid @profile-input-border;
+    border-radius: @profile-radius;
+    background: @white;
+    font-size: 11px;
+    color: @text-color;
     outline: none;
     transition: border-color 0.2s;
     box-sizing: border-box;
 
     &:focus {
-      border-color: @primary-color;
+      border-color: @primary-strong;
     }
+
+    &::placeholder {
+      color: @heading-color;
+    }
+  }
+
+  &__input {
+    height: 32px; // 设计 40 × 0.77
   }
 
   &__textarea {
-    width: 100%;
-    padding: @spacing-sm @spacing-base;
-    border: 1px solid @border-color;
-    border-radius: @radius-base;
-    background: @bg-color-light;
-    font-size: @font-size-base;
+    padding: 8px 12px;
     line-height: 1.6;
-    outline: none;
-    transition: border-color 0.2s;
     resize: vertical;
-    box-sizing: border-box;
-
-    &:focus {
-      border-color: @primary-color;
-    }
   }
 
+  // 设计 18：字数统计 11 设计px 灰字
   &__counter {
     align-self: flex-end;
-    font-size: @font-size-sm;
+    color: @text-color-disabled;
+    font-size: 11px;
   }
 
   &__tip {
     padding: @spacing-sm @spacing-base;
-    border-radius: @radius-base;
+    border-radius: @profile-radius;
     background: @primary-light;
-    color: @primary-color;
-    font-size: @font-size-sm;
+    color: @primary-strong;
+    font-size: 11px;
     line-height: 1.6;
   }
 
@@ -191,5 +192,40 @@ function onReset(): void {
     .flex(row, flex-start);
     gap: @spacing-sm;
   }
+
+  // 附件区：设计 18 白底 + #DDE1E7 描边
+  :deep(.upload-area) {
+    min-height: 56px;
+    border: 1px solid @profile-input-border;
+    background: @white;
+
+    &:hover,
+    &.is-dragging {
+      background: @bg-color-light;
+    }
+  }
+
+  :deep(.upload-area__hint) {
+    color: @text-color-disabled;
+    font-size: 11px;
+  }
+
+  .app-button {
+    height: 32px;
+    padding: 0 16px;
+    border-radius: @profile-radius;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .app-button--primary {
+    border-color: @primary-strong;
+    background: @primary-strong;
+
+    &:hover {
+      border-color: darken(@primary-strong, 6%);
+      background: darken(@primary-strong, 6%);
+    }
+  }
 }
 </style>