FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Isolate component styles

Browse Source
This commit is contained in:
Fat Snake
2023-12-21 10:36:01 +08:00
parent 8910c3a514
commit 1b78cd4163
16 changed files with 319 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/assets/css/pages/system/settings.scss
View File

@@ -1,38 +1,40 @@
@use '@/assets/css/constants' as constants;
.root-content {
padding: 30px;
gap: 20px;
.root-row {
[data-component=system-settings] {
.root-content {
padding: 30px;
gap: 20px;
.settings-card {
padding: 20px;
.root-row {
gap: 20px;
color: constants.$main-color;
> .head {
align-items: center;
gap: 5px;
.settings-card {
padding: 20px;
gap: 20px;
color: constants.$main-color;
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
> .head {
align-items: center;
gap: 5px;
.title {
display: flex;
font-size: 1.2em;
}
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.title {
display: flex;
font-size: 1.2em;
}
.bt-save {
color: constants.$main-color;
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.bt-save {
color: constants.$main-color;
}
}
}
}

130
src/assets/css/pages/system/statistics.scss
View File

@@ -1,86 +1,88 @@
@use '@/assets/css/constants' as constants;
.root-content {
padding: 30px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
[data-component=system-statistics] {
.root-content {
padding: 30px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
> .card-box {
width: 48%;
flex: 0 0 auto;
> .card-box {
width: 48%;
flex: 0 0 auto;
.common-card {
padding: 20px;
gap: 20px;
.common-card {
padding: 20px;
gap: 20px;
> .head {
align-items: center;
gap: 5px;
color: constants.$main-color;
> .head {
align-items: center;
gap: 5px;
color: constants.$main-color;
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
.title {
display: flex;
font-size: 1.2em;
}
.title {
display: flex;
font-size: 1.2em;
}
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
}
.card-content {
font-size: 1.1em;
padding: 0 10px;
gap: 10px;
.key, .value-percent {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.value {
color: constants.$font-secondary-color;
overflow: hidden;
> * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
}
.value-chart {
justify-content: space-around;
width: 0;
.card-content {
font-size: 1.1em;
padding: 0 10px;
gap: 10px;
> div {
max-height: 12px;
height: 12px;
.key, .value-percent {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.value {
color: constants.$font-secondary-color;
overflow: hidden;
> * {
transform: translateY(1px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.value-percent {
text-align: right;
}
.value-chart {
justify-content: space-around;
width: 0;
.big-chart {
width: 0;
height: 400px;
}
> div {
max-height: 12px;
height: 12px;
> * {
gap: 5px;
> * {
transform: translateY(1px);
}
}
}
.value-percent {
text-align: right;
}
.big-chart {
width: 0;
height: 400px;
}
> * {
gap: 5px;
}
}
}
}