diff --git a/src/layout/components/Page/PageHeading.vue b/src/layout/components/Page/PageHeading.vue index 037f58eac..9bc989ae0 100644 --- a/src/layout/components/Page/PageHeading.vue +++ b/src/layout/components/Page/PageHeading.vue @@ -67,7 +67,7 @@ export default { h2 { font-size: 16px; font-weight: 600; - line-height: 2; + line-height: 50px; color: var(--color-text-primary); overflow: hidden; white-space: nowrap; diff --git a/src/styles/index.scss b/src/styles/index.scss index 4b03a3643..1b642e1e7 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -526,3 +526,24 @@ li.rmenu i.fa { .el-checkbox__inner { border-radius: 1px !important; } + +.el-alert.el-alert--info.is-light { + i.el-icon-info.is-big { + font-size: 16px; + width: 18px; + } +} + +.el-card.no-border { + margin-bottom: 20px; + + .el-card__header { + padding-top: 20px; + padding-bottom: 0; + + border-bottom: none; + display: inline-block; + font-size: 14px; + font-weight: 500; + } +} diff --git a/src/utils/theme/color.js b/src/utils/theme/color.js index b473310a6..3d0c54db4 100644 --- a/src/utils/theme/color.js +++ b/src/utils/theme/color.js @@ -90,22 +90,20 @@ export function changeMenuColor(themeColors) { colors['--menu-hover'] = mix(white, menuActiveTextColor.replace(/#/g, ''), 90) } - const lights = [15, 40, 60, 80] - const darken = [15, 30, 40, 60] + const lights = [15, 40, 60, 80, 90] + const darken = [15, 30, 40, 60, 80] for (const key in colors) { const currentColor = colors[key] elementStyle.setProperty(key, currentColor) - if (key === '--color-primary') { - for (const [i, light] of lights.entries()) { - const color = mix(white, currentColor.replace(/#/g, ''), light) - elementStyle.setProperty(key + '-light' + '-' + i, color) - } - for (const [i, dark] of darken.entries()) { - const color = mix(black, currentColor.replace(/#/g, ''), dark) - elementStyle.setProperty(key + '-dark' + '-' + i, color) - } + for (const [i, light] of lights.entries()) { + const color = mix(white, currentColor.replace(/#/g, ''), light) + elementStyle.setProperty(key + '-light' + '-' + i, color) + } + for (const [i, dark] of darken.entries()) { + const color = mix(black, currentColor.replace(/#/g, ''), dark) + elementStyle.setProperty(key + '-dark' + '-' + i, color) } if (key.includes('--color')) { diff --git a/src/utils/theme/index.js b/src/utils/theme/index.js index bf560e1d6..dd406ff7b 100644 --- a/src/utils/theme/index.js +++ b/src/utils/theme/index.js @@ -47,6 +47,9 @@ export function changeElementColor(themeColors) { .el-tag--dark.el-tag--${key} { background-color: ${value} !important; } + .el-alert.el-alert--${key}.is-light { + background-color: var(--color-${key}-light-4); + } ` } } diff --git a/src/views/assets/Asset/AssetList/components/BaseList.vue b/src/views/assets/Asset/AssetList/components/BaseList.vue index e94c369cb..3deac16c4 100644 --- a/src/views/assets/Asset/AssetList/components/BaseList.vue +++ b/src/views/assets/Asset/AssetList/components/BaseList.vue @@ -1,6 +1,6 @@