Yunzai-Plugin/ZZZ-Plugin
1
0
Fork 0
mirror of https://github.com/ZZZure/ZZZ-Plugin.git synced 2025-12-16 21:27:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

card basic

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

BIN
resources/common/images/SuitBg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
resources/common/images/UIDBg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

76
resources/common/layout/playerinfo.css Normal file
View file

@ -0,0 +1,76 @@
.user-info {
display: flex;
align-items: center;
gap: 1em;
padding: 0 1em;
padding-bottom: 1em;
padding-top: 1.7em;
}
.user-info .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;
}
.user-info .avatar img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.user-info .info-bar {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
gap: 0.2em;
}
.user-info .info-bar .info {
width: 100%;
display: flex;
overflow: hidden;
gap: 0.5em;
padding-left: 0.5em;
}
.user-info .info-bar .info .nickname {
font-size: 1.2em;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-info .info-bar .info .label {
-webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
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;
}
.user-info .info-bar .info .label.level {
background-color: rgb(243, 203, 69);
}
.user-info .info-bar .info .label.server {
background-color: rgb(81, 177, 253);
}
.user-info .info-bar .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);
}
/*# sourceMappingURL=playerinfo.css.map */

14
resources/common/layout/playerinfo.html Normal file
View file

@ -0,0 +1,14 @@
<link rel="stylesheet" type="text/css" href="{{@sys.resourcesPath}}/common/layout/playerinfo.css" />
<div class="user-info">
<div class="avatar">
<img src="{{avatar}}" alt="Avatar">
</div>
<div class="info-bar">
<div class="info">
<div class="nickname">{{player.nickname}}</div>
<div class="label level">Lv{{player.level}}</div>
<div class="label server">{{player.region_name}}</div>
</div>
<div class="uid">UID {{player.game_uid}}</div>
</div>
</div>

95
resources/common/layout/playerinfo.scss Normal file
View file

@ -0,0 +1,95 @@
.user-info {
display: flex;
align-items: center;
gap: 1em;
padding: 0 1em;
padding-bottom: 1em;
padding-top: 1.7em;
.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);
}
}
}