From 9bfddd0f98d799ec51a33f30494f0debcaca5ae7 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Thu, 19 Sep 2024 04:02:56 -0700 Subject: [PATCH] feat(carousel): [carousel] modify smb theme --- .../demos/pc/app/carousel/show-title-composition-api.vue | 2 +- examples/sites/demos/pc/app/carousel/show-title.vue | 2 +- packages/theme/src/carousel-item/index.less | 5 +++-- packages/theme/src/carousel-item/vars.less | 6 +++--- packages/theme/src/carousel/index.less | 6 +++++- packages/theme/src/carousel/vars.less | 8 ++++---- 6 files changed, 17 insertions(+), 12 deletions(-) diff --git a/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue b/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue index 52472753af..576ef9d5dd 100644 --- a/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue +++ b/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue @@ -21,7 +21,7 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope } .carousel-item-demo:nth-child(2n) { - background-color: #fafafa; + background-color: #f0f0f0; } .carousel-item-demo:nth-child(2n + 1) { diff --git a/examples/sites/demos/pc/app/carousel/show-title.vue b/examples/sites/demos/pc/app/carousel/show-title.vue index f2ec2828a8..d7e2df448b 100644 --- a/examples/sites/demos/pc/app/carousel/show-title.vue +++ b/examples/sites/demos/pc/app/carousel/show-title.vue @@ -28,7 +28,7 @@ export default { } .carousel-item-demo:nth-child(2n) { - background-color: #fafafa; + background-color: #f0f0f0; } .carousel-item-demo:nth-child(2n + 1) { diff --git a/packages/theme/src/carousel-item/index.less b/packages/theme/src/carousel-item/index.less index 5927d6010e..bf510763e4 100644 --- a/packages/theme/src/carousel-item/index.less +++ b/packages/theme/src/carousel-item/index.less @@ -38,12 +38,13 @@ height: var(--ti-carousel-item-title-height); width: 100%; line-height: var(--ti-carousel-item-title-height); - color: var(--ti-carousel-item-title-text-color, #fff); + color: var(--ti-carousel-item-title-text-color); text-align: left; background: var(--ti-carousel-item-title-bg-color); + opacity: 0.3; span { - padding: 0 12px; + padding: 0 16px; font-size: var(--ti-carousel-item-title-span-font-size); width: 80%; display: inline-block; diff --git a/packages/theme/src/carousel-item/vars.less b/packages/theme/src/carousel-item/vars.less index 8b2806ee44..b2cacfedba 100644 --- a/packages/theme/src/carousel-item/vars.less +++ b/packages/theme/src/carousel-item/vars.less @@ -11,9 +11,9 @@ */ .component-css-vars-carousel-item() { - --ti-carousel-item-title-height: var(--ti-common-size-height-small, 32px); - --ti-carousel-item-title-text-color: var(--ti-common-color-light, #fff); - --ti-carousel-item-title-bg-color: var(--ti-common-color-bg-dark-disabled); + --ti-carousel-item-title-height: var(--ti-common-size-height-medium); + --ti-carousel-item-title-text-color: var(--ti-common-color-light); + --ti-carousel-item-title-bg-color: var(--ti-common-color-bg-primary); --ti-carousel-item-title-span-font-size: var(--ti-common-font-size-base, 12px); --ti-carousel-mask-bg-color: var(--ti-common-color-light, #fff); } diff --git a/packages/theme/src/carousel/index.less b/packages/theme/src/carousel/index.less index 71249c0a85..7987b0a6c2 100644 --- a/packages/theme/src/carousel/index.less +++ b/packages/theme/src/carousel/index.less @@ -128,6 +128,10 @@ margin-right: var(--ti-carousel-indicator-margin-right); cursor: pointer; + &:last-child { + margin-right: 0; + } + &:hover button { opacity: var(--ti-carousel-hover-opacity); } @@ -212,7 +216,7 @@ left: auto; right: 16px; bottom: 0; - margin: 0 0 8px; + margin: 0 0 16px; transform: none; background: transparent; } diff --git a/packages/theme/src/carousel/vars.less b/packages/theme/src/carousel/vars.less index 3526230867..46db45235b 100644 --- a/packages/theme/src/carousel/vars.less +++ b/packages/theme/src/carousel/vars.less @@ -44,11 +44,11 @@ // 指示器按钮高度 --ti-carousel-indicator-button-height: var(--ti-common-size-2x, 8px); // 非当前指示器背景色 - --ti-carousel-indicator-button-bg-color: var(--ti-common-color-text-secondary); + --ti-carousel-indicator-button-bg-color: #e6e6e6; // 指示器项右外边距 --ti-carousel-indicator-margin-right: var(--ti-common-space-3x); // 当前指示器右边距 - --ti-carousel-indicator-active-width: var(--ti-common-size-5x); + --ti-carousel-indicator-active-width: var(--ti-common-size-3x); // 指示器项垂直内边距(hide) --ti-carousel-indicator-padding-vertical: var(--ti-common-space-0, 0px); // 指示器项水平内边距 @@ -58,7 +58,7 @@ // 当前指示器背景色 --ti-carousel-indicator-active-background-color: var(--ti-common-color-primary-active); // 当前指示器的宽度 - --ti-carousel-indicator-active-button-width: var(--ti-common-size-5x); + --ti-carousel-indicator-active-button-width: var(--ti-common-size-3x); // 当前指示器圆角 --ti-carousel-indicator-active-border-radius: var(--ti-common-space-base); // 幻灯片外的指示器动画(hide) @@ -66,7 +66,7 @@ // 幻灯片外的指示器默认背景色 --ti-carousel-outside-button-bg-color: var(--ti-common-color-dark, #000); // 幻灯片外的当前指示器背景色 - --ti-carousel-outside-button-active-bg-color: var(--ti-common-color-primary-active); + --ti-carousel-outside-button-active-bg-color: var(--ti-common-color-text-secondary); // 标签按钮的字号(hide) --ti-carousel-labels-button-font-size: var(--ti-common-font-size-base, 12px); // 正常透明度颜色