Refactor(Card): Component all cards

Make all cards into components
This commit is contained in:
2024-04-28 11:37:57 +08:00
parent a5b26d9680
commit 497fb28b5d
34 changed files with 908 additions and 1206 deletions

View File

@@ -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 {