From 3f93b2dd39c52c8b8f4af81fd8555bfbbf9a646b Mon Sep 17 00:00:00 2001 From: Tyh2001 <1469442737@qq.com> Date: Thu, 27 Jul 2023 18:30:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20tab=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs-item/src/tabs-item.vue | 32 ++++++- packages/fighting-design/tabs/src/tabs.vue | 96 +++++++++++++++---- packages/fighting-theme/src/radio-group.scss | 19 +++- packages/fighting-theme/src/tabs-item.scss | 2 + packages/fighting-theme/src/tabs.scss | 15 ++- start/src/App.vue | 17 ++-- 6 files changed, 142 insertions(+), 39 deletions(-) diff --git a/packages/fighting-design/tabs-item/src/tabs-item.vue b/packages/fighting-design/tabs-item/src/tabs-item.vue index 38df7968e3..b3bc45a441 100644 --- a/packages/fighting-design/tabs-item/src/tabs-item.vue +++ b/packages/fighting-design/tabs-item/src/tabs-item.vue @@ -1,23 +1,49 @@ - + diff --git a/packages/fighting-design/tabs/src/tabs.vue b/packages/fighting-design/tabs/src/tabs.vue index 7bcd02c2cf..c2668360a4 100644 --- a/packages/fighting-design/tabs/src/tabs.vue +++ b/packages/fighting-design/tabs/src/tabs.vue @@ -1,8 +1,9 @@ + {{ activeName }} {{ item.label }} diff --git a/packages/fighting-theme/src/radio-group.scss b/packages/fighting-theme/src/radio-group.scss index 4f70f1b492..9523b90598 100644 --- a/packages/fighting-theme/src/radio-group.scss +++ b/packages/fighting-theme/src/radio-group.scss @@ -17,13 +17,24 @@ // 背景状态 // 背景状态默认元素之间的间距为 0 &.f-radio-group__background { - background: #f8f9fb; + background: #ececf1; + flex-wrap: nowrap; column-gap: var(--radio-group-column-gap, 0); row-gap: var(--radio-group-row-gap, 0); - // 选中的 - .f-radio__checked { - background-color: #fff; + .f-radio { + .f-radio__text { + color: rgb(142, 142, 160); + } + + // 选中的 + &.f-radio__checked { + background-color: #fff; + + .f-radio__text { + color: #2d5af1; + } + } } // 不同尺寸 diff --git a/packages/fighting-theme/src/tabs-item.scss b/packages/fighting-theme/src/tabs-item.scss index fd106f6ced..636f5b5512 100644 --- a/packages/fighting-theme/src/tabs-item.scss +++ b/packages/fighting-theme/src/tabs-item.scss @@ -1,2 +1,4 @@ .f-tabs-item { + padding: 4px 8px; + box-sizing: border-box; } diff --git a/packages/fighting-theme/src/tabs.scss b/packages/fighting-theme/src/tabs.scss index 6d9522db8e..6c92c75acc 100644 --- a/packages/fighting-theme/src/tabs.scss +++ b/packages/fighting-theme/src/tabs.scss @@ -5,10 +5,23 @@ // 菜单栏 .f-tabs__navs { display: flex; - justify-content: space-between; + border-bottom: 1px solid #ddd; + column-gap: 12px; + // 每一项 .f-tabs__nav-item { cursor: pointer; + padding: 10px 7px; + box-sizing: border-box; + font-size: 15px; + user-select: none; + border-bottom: 2px solid transparent; + + // 选中状态 + &.f-tabs__nav-active { + color: #2d5af1; + border-color: #2d5af1; + } } } diff --git a/start/src/App.vue b/start/src/App.vue index ec47acd1c3..a8f86f88b4 100644 --- a/start/src/App.vue +++ b/start/src/App.vue @@ -1,21 +1,18 @@ - + - {{ name }} - - + + 七岁的那一年,抓住那只蝉,以为能抓住夏天; 十七岁的那年,吻过他的脸,就以为和他能永远。 - + 长大 难道是人必经的溃烂。 - + 就算会有一天,没人与我合唱,至少在我的心中,还有个尚未崩坏的地方。 + +
七岁的那一年,抓住那只蝉,以为能抓住夏天;
十七岁的那年,吻过他的脸,就以为和他能永远。
长大 难道是人必经的溃烂。
就算会有一天,没人与我合唱,至少在我的心中,还有个尚未崩坏的地方。