feat ui设计稿

src/components/ConfirmDialog.vue

@@ -58,72 +58,92 @@ function onCancel(): void {
 </template>
 
 <style lang="less" scoped>
+// 设计 24（取消绑定确认）/ 29（注销风险提示）：白卡 ~840 设计px、无蒙层压暗、
+// 底部两枚等宽整行按钮（次级 #EEF0F3 / 主色或危险色）
 .confirm-dialog {
   position: fixed;
   inset: 0;
   z-index: 1000;
   .flex(row, center);
-  background: rgba(0, 0, 0, 0.45);
+  background: transparent;
 
   &__panel {
-    width: 400px;
+    width: 660px; // 设计 840 × 0.77
     max-width: calc(100vw - 32px);
-    padding: @spacing-lg;
+    padding: @spacing-base;
     border-radius: @radius-lg;
     background: @white;
     box-shadow: @shadow-lg;
   }
 
+  // 蓝条 + 标题 15 设计px w700（与个人中心各弹窗一致）
   &__title {
+    position: relative;
     margin-bottom: @spacing-base;
-    font-size: @font-size-lg;
-    font-weight: 600;
+    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;
+    }
   }
 
   &__body {
     margin-bottom: @spacing-lg;
-    font-size: @font-size-base;
+    font-size: 11px; // 设计 29 条目 13 → 11
     color: @text-color;
-    line-height: 1.6;
+    line-height: 1.7;
   }
 
+  // 设计 24：两枚等宽整行按钮铺满卡宽
   &__footer {
-    .flex(row, flex-end);
+    .flex(row, flex-start);
     gap: @spacing-sm;
   }
 
   &__btn {
-    height: 34px;
+    flex: 1;
+    height: 36px;
     padding: 0 @spacing-base;
-    border: 1px solid @border-color-dark;
-    border-radius: @radius-base;
-    background: @white;
+    border: none;
+    border-radius: @profile-radius;
+    background: @profile-quiet-btn;
     color: @text-color;
-    font-size: @font-size-base;
+    font-size: 12px;
+    font-weight: 500;
     transition: all 0.2s;
 
     &:hover {
-      border-color: @primary-color;
-      color: @primary-color;
+      border: none;
+      background: darken(@profile-quiet-btn, 4%);
+      color: @text-color;
     }
 
+    // 设计 24 主按钮 #024FFF / 设计 29 危险按钮 #EF4444
     &--confirm {
-      border-color: @primary-color;
-      background: @primary-color;
+      background: @primary-strong;
       color: @white;
 
       &:hover {
-        background: @primary-hover;
+        background: darken(@primary-strong, 6%);
         color: @white;
       }
 
       &.is-danger {
-        border-color: @danger-color;
         background: @danger-color;
 
         &:hover {
-          background: fade(@danger-color, 85%);
+          background: darken(@danger-color, 6%);
         }
       }
     }