diff --git a/style/mobile/components/guide/_index.less b/style/mobile/components/guide/_index.less index 77deedb811..657eaca51b 100644 --- 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,6 +67,10 @@ } } + &__dialog { + border-radius: @guide-dialog-border-radius; + } + &__content { &--popover { padding: @guide-popover-content-padding; @@ -73,9 +78,17 @@ &--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 index 5acc24b4e0..58b0b06705 100644 --- 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;