feat ui设计稿

src/views/profile/cpns/BindContactDialog.vue

@@ -132,7 +132,7 @@ function onSubmit(): void {
 
         <label v-if="!isIdentity" class="bind-dialog__agree">
           <input v-model="agree" type="checkbox">
-          <span>我已阅读并同意《用户协议》和《隐私政策》</span>
+          <span>我已阅读并同意<em>《用户协议》</em>和<em>《隐私政策》</em></span>
         </label>
 
         <div class="bind-dialog__footer">
@@ -149,35 +149,68 @@ function onSubmit(): void {
 </template>
 
 <style lang="less" scoped>
+// 设计 23~27（绑定/换绑/身份验证弹窗）：与修改密码弹窗同规格 —— 白卡 700px、蓝条标题、
+// 白底描边输入、底部等宽双按钮；设计稿无蒙层压暗，遮罩透明。
 .bind-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~26：蓝条 + 标题 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;
+    }
   }
 
+  // 设计 23：身份验证标题为纯蓝字 14 设计px（无蓝条）
+  &__title:has(+ .bind-dialog__desc) {
+    padding-left: 0;
+    font-size: 11px;
+    color: @primary-strong;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  // 设计 23：说明为纯灰字（非底色块）
   &__desc {
-    padding: @spacing-sm @spacing-base;
-    border-radius: @radius-base;
-    background: @bg-color-light;
-    font-size: @font-size-sm;
+    padding: 0;
+    background: transparent;
+    color: @text-color-secondary;
+    font-size: 11px;
     line-height: 1.6;
   }
 
@@ -188,42 +221,85 @@ function onSubmit(): void {
   }
 
   &__label {
-    font-size: @font-size-base;
+    font-size: 11px;
+    font-weight: 500;
     color: @heading-color;
   }
 
   &__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;
     }
   }
 
   &__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/25/26：底部等宽双按钮，次级 #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>