feat(guide): 更新样式对齐设计稿 (#1741)

* fix(guide): fix guide style * fix(guide): fix guide style
Tencent · Mar 6, 2024 · 6d0099c · 6d0099c
1 parent 64cc390
commit 6d0099c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/style/mobile/components/guide/_index.less b/style/mobile/components/guide/_index.less
@@ -50,6 +50,7 @@
     .@{prefix}-popover {
       &__content {
         border: 1px solid @guide-popover-border-color;
+        border-radius: @guide-popover-border-radius;
       }
     }
     .@{prefix}-popover[data-popper-placement^="bottom"] .@{prefix}-popover__content {
@@ -66,16 +67,28 @@
     }
   }
 
+  &__dialog {
+    border-radius: @guide-dialog-border-radius;
+  }
+
   &__content {
     &--popover {
       padding: @guide-popover-content-padding;
     }
 
     &--dialog {
       padding: @guide-dialog-content-padding;
-      min-width: var(--td-guide-dialog-width, 311px);
-      .@{guide}__title, .@{guide}__desc {
+      width: var(--td-guide-dialog-width, 311px);
+      .@{guide}__title {
+        text-align: center;
+        font-size: @guide-dialog-title-font-size;
+        line-height: @guide-dialog-title-line-height;
+      }
+      .@{guide}__desc {
+        margin-top: @guide-dialog-desc-margin-top;
         text-align: center;
+        font-size: @guide-dialog-desc-font-size;
+        line-height: @guide-dialog-desc-line-height;
       }
     }
   }
@@ -88,15 +101,18 @@
   &__title {
     text-align: left;
     color: @text-color-primary;
-    font: @guide-title-font-size;
-    font-weight: 700;
+    font-size: @guide-popover-title-font-size;
+    font-weight: 600;
+    line-height: @guide-popover-title-line-height;
   }
 
   &__desc {
     margin-top: @guide-tooltip-desc-margin-top;
     text-align: left;
     color: @text-color-secondary;
-    font-size: @guide-body-font-size;
+    font-size: @guide-popover-desc-font-size;
+    font-weight: 400;
+    line-height: @guide-popover-desc-line-height;
   }
 
   &__footer {

diff --git a/style/mobile/components/guide/_var.less b/style/mobile/components/guide/_var.less
@@ -8,9 +8,10 @@
 @comp-margin-xxl: 24px;
 @comp-margin-l: 16px;
 @comp-margin-m: 12px;
+@comp-margin-s: 8px;
 @comp-margin-xs: 4px;
 @guide-footer-popover-margin-top: @comp-margin-xxl;
-@guide-dialog-desc-margin-top: @comp-margin-xxl;
+@guide-dialog-desc-margin-top: @comp-margin-s;
 @guide-tooltip-desc-margin-top: @comp-margin-xs;
 @guide-action-margin-right: @comp-margin-m;
 @guide-popover-margin-top: @comp-margin-l;
@@ -23,13 +24,19 @@
 @guide-dialog-footer-padding: 0 @comp-padding-xxl;
 
 // border 相关
-@guide-highlight-border-radius: @radius-small; // 3px
+@guide-highlight-border-radius: @radius-default; // 6px
+@guide-popover-border-radius: @radius-large; // 9px
+@guide-dialog-border-radius: @radius-extra-large; // 12px
 
 // color 相关
 @guide-popover-border-color: @gray-color-4;
 
 // font 相关
-@font-title-small: 16px;
-@font-body-small: 14px;
-@guide-title-font-size: @font-title-small;
-@guide-body-font-size: @font-body-small;
+@guide-popover-title-font-size: @font-size-m;
+@guide-popover-desc-font-size: @font-size-base;
+@guide-dialog-title-font-size: 18px;
+@guide-dialog-desc-font-size: @font-size-m;
+@guide-popover-title-line-height: 24px;
+@guide-popover-desc-line-height: 22px;
+@guide-dialog-title-line-height: 26px;
+@guide-dialog-desc-line-height: 24px;