card basic

This commit is contained in:
bietiaop 2024-07-09 01:22:14 +08:00
parent 51fb65cdb4
commit cd0793655d
32 changed files with 807 additions and 260 deletions

View file

@ -9,101 +9,6 @@
min-height: 30em;
overflow: hidden;
padding: 5em 2.2em 2.2em 2.2em;
.user-info {
display: flex;
align-items: center;
margin-bottom: 1em;
margin-top: 1.7em;
gap: 1em;
padding: 0 1em;
.avatar {
width: 4em;
height: 4em;
border-radius: 50%;
border-image: url('./images/SuitBg.png');
border-image-width: 0;
border-image-outset: 0.4em;
border-image-repeat: round;
border-image-slice: 1 fill;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
}
.info-bar {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
gap: 0.2em;
.info {
width: 100%;
display: flex;
overflow: hidden;
gap: 0.5em;
padding-left: 0.5em;
.nickname {
font-size: 1.2em;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.label {
$label-width: 0.2em;
-webkit-clip-path: polygon(
$label-width 0%,
calc(100% - $label-width) 0%,
100% $label-width,
100% calc(100% - $label-width),
calc(100% - $label-width) 100%,
$label-width 100%,
0% calc(100% - $label-width),
0% $label-width
);
clip-path: polygon(
$label-width 0%,
calc(100% - $label-width) 0%,
100% $label-width,
100% calc(100% - $label-width),
calc(100% - $label-width) 100%,
$label-width 100%,
0% calc(100% - $label-width),
0% $label-width
);
padding: 0 0.4em;
font-size: 0.9em;
display: flex;
justify-content: center;
align-items: center;
color: rgb(43, 38, 40);
margin: 0.1em 0;
&.level {
background-color: rgb(243, 203, 69);
}
&.server {
background-color: rgb(81, 177, 253);
}
}
}
.uid {
border-image: url('./images/UIDBg.png');
border-image-slice: 0 100 0 100 fill;
border-image-width: 0em 1.6em 0em 1.6em;
border-image-outset: 0;
border-image-repeat: stretch stretch;
padding: 0.3em 1.6em;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.6);
}
}
}
> .title {
width: 100%;
background-size: contain;