Refactor(Card): Component all cards
Make all cards into components
This commit is contained in:
33
src/assets/css/components/system/setting-card.scss
Normal file
33
src/assets/css/components/system/setting-card.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@use '@/assets/css/constants' as constants;
|
||||
|
||||
[data-component=component-setting-card] {
|
||||
.settings-card {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
color: constants.$main-color;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.icon {
|
||||
font-size: constants.$SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
:nth-child(n+3) {
|
||||
flex: 0 0 auto;
|
||||
color: constants.$font-main-color;
|
||||
}
|
||||
|
||||
.bt-save {
|
||||
color: constants.$main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
78
src/assets/css/components/system/statistics-card.scss
Normal file
78
src/assets/css/components/system/statistics-card.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
@use '@/assets/css/constants' as constants;
|
||||
|
||||
[data-component=component-statistics-card] {
|
||||
.statistics-card {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: constants.$main-color;
|
||||
|
||||
.icon {
|
||||
font-size: constants.$SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.value-chart {
|
||||
justify-content: space-around;
|
||||
width: 0;
|
||||
|
||||
> div {
|
||||
max-height: 12px;
|
||||
height: 12px;
|
||||
|
||||
> * {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value-percent {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.big-chart {
|
||||
width: 0;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
> * {
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
src/assets/css/components/system/system-card.scss
Normal file
28
src/assets/css/components/system/system-card.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@use '@/assets/css/constants' as constants;
|
||||
|
||||
[data-component=component-system-card] {
|
||||
cursor: pointer;
|
||||
|
||||
.system-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
gap: 42px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: constants.$production-color;
|
||||
font-size: constants.$SIZE_ICON_XL;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bolder;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
27
src/assets/css/components/tools/load-more-card.scss
Normal file
27
src/assets/css/components/tools/load-more-card.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
@use '@/assets/css/constants' as constants;
|
||||
|
||||
[data-component=component-load-more-card] {
|
||||
cursor: pointer;
|
||||
|
||||
.load-more-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
font-size: constants.$SIZE_ICON_XXL;
|
||||
color: constants.$production-color;
|
||||
align-items: center;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/assets/css/components/tools/repository-card.scss
Normal file
47
src/assets/css/components/tools/repository-card.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
@use '@/assets/css/constants' as constants;
|
||||
|
||||
[data-component=component-repository-card] {
|
||||
.repository-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.version-select {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
.upgrade-bt {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 20px;
|
||||
color: constants.$production-color;
|
||||
font-size: constants.$SIZE_ICON_XL;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: constants.$SIZE_ICON_XL;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-name {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
85
src/assets/css/components/tools/store-card.scss
Normal file
85
src/assets/css/components/tools/store-card.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
@use '@/assets/css/constants' as constants;
|
||||
|
||||
[data-component=component-store-card] {
|
||||
cursor: pointer;
|
||||
|
||||
.store-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
color: constants.$production-color;
|
||||
font-size: constants.$SIZE_ICON_XL;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: constants.$SIZE_ICON_XL;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 20px;
|
||||
|
||||
.tool-name {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
margin-top: 10px;
|
||||
color: constants.$font-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
padding-bottom: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
> * {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.author-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
font-size: 1.6em;
|
||||
gap: 4px;
|
||||
|
||||
> *:hover {
|
||||
color: constants.$font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,30 +12,6 @@
|
||||
height: 360px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden !important;
|
||||
cursor: pointer;
|
||||
|
||||
.common-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
gap: 42px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: constants.$production-color;
|
||||
font-size: constants.$SIZE_ICON_XL;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bolder;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,36 +11,6 @@
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
color: constants.$main-color;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.icon {
|
||||
font-size: constants.$SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
:nth-child(n+3) {
|
||||
flex: 0 0 auto;
|
||||
color: constants.$font-main-color;
|
||||
}
|
||||
|
||||
.bt-save {
|
||||
color: constants.$main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,81 +10,6 @@
|
||||
> .card-box {
|
||||
width: 48%;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.common-card {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: constants.$main-color;
|
||||
|
||||
.icon {
|
||||
font-size: constants.$SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.value-chart {
|
||||
justify-content: space-around;
|
||||
width: 0;
|
||||
|
||||
> div {
|
||||
max-height: 12px;
|
||||
height: 12px;
|
||||
|
||||
> * {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value-percent {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.big-chart {
|
||||
width: 0;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
> * {
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,73 +12,6 @@
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.common-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.version-select {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
.upgrade-bt {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 20px;
|
||||
color: constants.$production-color;
|
||||
font-size: constants.$SIZE_ICON_XL;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: constants.$SIZE_ICON_XL;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-name {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
font-size: constants.$SIZE_ICON_XXL;
|
||||
color: constants.$production-color;
|
||||
align-items: center;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -30,109 +30,6 @@
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
|
||||
.common-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
color: constants.$production-color;
|
||||
font-size: constants.$SIZE_ICON_XL;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: constants.$SIZE_ICON_XL;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 20px;
|
||||
|
||||
.tool-name {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
margin-top: 10px;
|
||||
color: constants.$font-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
padding-bottom: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
> * {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.author-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
font-size: 1.6em;
|
||||
gap: 4px;
|
||||
|
||||
> *:hover {
|
||||
color: constants.$font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
font-size: constants.$SIZE_ICON_XXL;
|
||||
color: constants.$production-color;
|
||||
align-items: center;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-tool {
|
||||
|
||||
@@ -72,109 +72,6 @@
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
|
||||
.common-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
color: constants.$production-color;
|
||||
font-size: constants.$SIZE_ICON_XL;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: constants.$SIZE_ICON_XL;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 20px;
|
||||
|
||||
.tool-name {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
margin-top: 10px;
|
||||
color: constants.$font-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
padding-bottom: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
> * {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.author-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
font-size: 1.6em;
|
||||
gap: 4px;
|
||||
|
||||
> *:hover {
|
||||
color: constants.$font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
font-size: constants.$SIZE_ICON_XXL;
|
||||
color: constants.$production-color;
|
||||
align-items: center;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-tool {
|
||||
|
||||
Reference in New Issue
Block a user