Pārlūkot izejas kodu

[Style 0000] 标签、菜单、按钮样式优化及相关变量修改

houzekong 4 mēneši atpakaļ
vecāks
revīzija
3808794009

+ 5 - 0
src/components/SimpleMenu/src/components/menu.less

@@ -323,6 +323,11 @@
         color: #fff;
         border-right: none;
       }
+
+      &-active:not(@{menu-prefix-cls}-submenu) {
+        background-color: @sider-dark-lighten-bg-color !important;
+        color: @primary-color !important;
+      }
     }
 
     &-dark&-vertical &-child-item-active > &-submenu-title {

+ 3 - 1
src/design/ant/btn.less

@@ -23,7 +23,9 @@
   &-primary {
     // update-begin--author:liaozhiyang---date:20240223---for:【QQYUN-8327】btn样式显示不正确
     // color: @white;
-    // background-color: @button-primary-color;
+    background-image: @gradient-secondary-color;
+    background-color: unset;
+    border-width: 0px;
     // update-end--author:liaozhiyang---date:20240223---for:【QQYUN-8327】btn样式显示不正确
 
     &:hover,

+ 11 - 2
src/design/color.less

@@ -68,9 +68,13 @@ html {
 
 // let -menu
 @sider-logo-bg-color: var(--sider-logo-bg-color);
-@sider-dark-bg-color: var(--sider-dark-bg-color);
+// 根据设计图将 bg-color 与 lighten-bg-color 替换
+@sider-dark-bg-color: var(--sider-dark-lighten-bg-color);
+// @sider-dark-bg-color: var(--sider-dark-bg-color);
 @sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
-@sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);
+// 与 bg-color 替换
+@sider-dark-lighten-bg-color: var(--sider-dark-bg-color);
+// @sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);
 
 // trigger
 @trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
@@ -140,3 +144,8 @@ html {
 @button-cancel-hover-color: @primary-color;
 @button-cancel-hover-bg-color: @white;
 @button-cancel-hover-border-color: @primary-color;
+
+@gradient-primary-color: linear-gradient(lighten(@primary-color, 20%), @primary-color);
+@gradient-secondary-color: linear-gradient(lighten(#284a7c, 40%), #284a7c);
+
+@table-thead-bg-color: #c5daf7;

+ 5 - 3
src/layouts/default/tabs/index.less

@@ -45,6 +45,7 @@ html[data-theme='light'] {
 
       .ant-tabs-tab {
         height: calc(@multiple-height - 4px);
+        padding-left: 24px;
         padding-right: 12px;
         line-height: calc(@multiple-height - 4px);
         color: @text-color-base;
@@ -102,11 +103,12 @@ html[data-theme='light'] {
         }
       }
 
-      .ant-tabs-tab-active {
+      .ant-tabs-tab.ant-tabs-tab-active {
         position: relative;
-        padding-left: 18px;
+        // padding-left: 18px;
         color: @white !important;
-        background: @primary-color;
+        background: @gradient-primary-color;
+        // background: @primary-color;
         border: 1px solid transparent;
         transition: none;