feat ui设计稿

src/views/profile/cpns/ChangePasswordDialog.vue

@@ -103,7 +103,7 @@ function onSubmit(): void {
 
         <label class="change-pwd-dialog__agree">
           <input v-model="agree" type="checkbox">
-          <span>我已阅读并同意《用户协议》和《隐私政策》</span>
+          <span>我已阅读并同意<em>《用户协议》</em>和<em>《隐私政策》</em></span>
         </label>
 
         <div class="change-pwd-dialog__footer">
@@ -120,28 +120,49 @@ function onSubmit(): void {
 </template>
 
 <style lang="less" scoped>
+// 设计 22（修改密码弹窗）：白卡 900×~540 设计px、蓝条标题、白底描边输入 40 设计px、
+// 整行蓝色主按钮；设计稿无蒙层压暗（页面原样可见），故遮罩透明。
 .change-pwd-dialog {
   position: fixed;
   inset: 0;
   z-index: 1000;
   .flex(row, center);
-  background: rgba(0, 0, 0, 0.45);
+  background: transparent;
+  overflow-y: auto;
 
   &__panel {
-    width: 440px;
+    width: 700px; // 设计 900 × 0.77
     max-width: calc(100vw - 32px);
-    padding: @spacing-lg;
+    max-height: calc(100vh - 48px);
+    overflow-y: auto;
+    padding: @spacing-base;
     border-radius: @radius-lg;
     background: @white;
     box-shadow: @shadow-lg;
     .flex(column, flex-start);
     gap: @spacing-base;
+    .scrollbar();
   }
 
+  // 设计 22：蓝条（#024FFF 4×20 设计px）+ 标题 15 设计px w700
   &__title {
-    font-size: @font-size-lg;
-    font-weight: 600;
+    position: relative;
+    padding-left: 12px;
+    font-size: 12px;
+    font-weight: 700;
     color: @heading-color;
+    line-height: 20px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 3px;
+      width: 3px;
+      height: 14px;
+      border-radius: 2px;
+      background: @primary-strong;
+    }
   }
 
   &__field {
@@ -150,28 +171,37 @@ function onSubmit(): void {
     width: 100%;
   }
 
+  // 设计 22：标签 13 设计px w500 深灰
   &__label {
-    font-size: @font-size-base;
+    font-size: 11px;
+    font-weight: 500;
     color: @heading-color;
   }
 
+  // 设计 22：白底、#DDE1E7 描边、40 设计px ≈ 32px 高、13 设计px 字
   &__input {
     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;
+    height: 32px;
+    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;
     }
 
     &:read-only {
-      color: @text-color-secondary;
+      color: @text-color;
       cursor: not-allowed;
     }
   }
@@ -179,19 +209,55 @@ function onSubmit(): void {
   &__agree {
     .flex(row, flex-start, center);
     gap: @spacing-sm;
-    font-size: @font-size-sm;
-    color: @text-color;
+    font-size: 11px;
+    color: @text-color-secondary;
     cursor: pointer;
 
     input {
-      accent-color: @primary-color;
+      accent-color: @primary-strong;
+    }
+
+    em {
+      font-style: normal;
+      color: @primary-strong;
     }
   }
 
+  // 设计 24：底部两枚等宽整行按钮 —— 次级 #EEF0F3 灰底、主色 #024FFF
   &__footer {
-    .flex(row, flex-end);
+    .flex(row, flex-start);
     gap: @spacing-sm;
     width: 100%;
   }
+
+  .app-button {
+    flex: 1;
+    height: 36px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: @profile-radius;
+  }
+
+  .app-button--primary {
+    border-color: @primary-strong;
+    background: @primary-strong;
+
+    &:hover {
+      border-color: darken(@primary-strong, 6%);
+      background: darken(@primary-strong, 6%);
+    }
+  }
+
+  .app-button--default {
+    border: none;
+    background: @profile-quiet-btn;
+    color: @text-color;
+
+    &:hover {
+      border: none;
+      background: darken(@profile-quiet-btn, 4%);
+      color: @text-color;
+    }
+  }
 }
 </style>