mirror of
https://github.com/ZZZure/ZZZ-Plugin.git
synced 2025-12-17 05:37:46 +00:00
card basic
This commit is contained in:
bietiaop
parent
51fb65cdb4
commit
cd0793655d
32 changed files with 807 additions and 260 deletions
BIN
resources/card/images/IconDungeonBuffEther.png
Normal file
BIN
resources/card/images/IconDungeonBuffEther.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
resources/card/images/IconFire.png
Normal file
BIN
resources/card/images/IconFire.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
resources/card/images/IconIce.png
Normal file
BIN
resources/card/images/IconIce.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
resources/card/images/IconPhysDmg.png
Normal file
BIN
resources/card/images/IconPhysDmg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
resources/card/images/IconThunder.png
Normal file
BIN
resources/card/images/IconThunder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
resources/card/images/RANK_A.png
Normal file
BIN
resources/card/images/RANK_A.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
resources/card/images/RANK_B.png
Normal file
BIN
resources/card/images/RANK_B.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
resources/card/images/RANK_S.png
Normal file
BIN
resources/card/images/RANK_S.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
resources/card/images/status.png
Normal file
BIN
resources/card/images/status.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
175
resources/card/index.css
Normal file
175
resources/card/index.css
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
.card {
|
||||
margin: 0 1em;
|
||||
}
|
||||
.card .user-info {
|
||||
margin: 0 1em;
|
||||
}
|
||||
.card > .title {
|
||||
width: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0 2.4em;
|
||||
position: relative;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.card > .title .parallelograms {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
position: inherit;
|
||||
padding-bottom: 0.4em;
|
||||
z-index: 1;
|
||||
}
|
||||
.card > .title .parallelograms span {
|
||||
width: 1.3em;
|
||||
height: 80%;
|
||||
background-color: rgb(246, 202, 69);
|
||||
margin-right: -0.2em;
|
||||
-webkit-clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
|
||||
clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
|
||||
}
|
||||
.card > .title .bg-content {
|
||||
position: absolute;
|
||||
bottom: -0.1em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0) skewX(-8deg);
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
font-size: 2.7em;
|
||||
}
|
||||
.card > .title .content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
.card .status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: url("./images/status.png") no-repeat center center;
|
||||
background-size: 110% 160%;
|
||||
aspect-ratio: 2.4;
|
||||
overflow: hidden;
|
||||
margin: 0 1em;
|
||||
margin-bottom: 1.5em;
|
||||
padding-top: 4em;
|
||||
padding-left: 3em;
|
||||
padding-right: 3em;
|
||||
padding-bottom: 3.5em;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.card .status .item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.card .status .item .value {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.card .status .item .label {
|
||||
font-size: 0.95em;
|
||||
color: #e2e2e2;
|
||||
}
|
||||
.card .list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1em;
|
||||
padding: 0.5em 3em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.card .list .item {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.card .list .item * {
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
.card .list .item::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: -0.2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(138, 51, 183);
|
||||
z-index: 0;
|
||||
}
|
||||
.card .list .item .rank {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: 0.1em;
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background: url("./images/RANK_A.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
.card .list .item.rankS::after {
|
||||
background: rgb(230, 119, 51);
|
||||
}
|
||||
.card .list .item.rankS .rank {
|
||||
background-image: url("./images/RANK_S.png");
|
||||
}
|
||||
.card .list .item.rankB::after {
|
||||
background: rgb(93, 183, 249);
|
||||
}
|
||||
.card .list .item.rankB .rank {
|
||||
background-image: url("./images/RANK_B.png");
|
||||
}
|
||||
.card .list .item .image {
|
||||
width: 100%;
|
||||
aspect-ratio: 0.8;
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
.card .list .item .image img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.card .list .item .level {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
.card .list .item .property {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.1em;
|
||||
width: 1.6em;
|
||||
aspect-ratio: 1;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
border: solid 0.1em #000;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
.card .list .item .property.fire {
|
||||
background-image: url("./images/IconFire.png");
|
||||
}
|
||||
.card .list .item .property.ice {
|
||||
background-image: url("./images/IconIce.png");
|
||||
}
|
||||
.card .list .item .property.physdmg {
|
||||
background-image: url("./images/IconPhysDmg.png");
|
||||
}
|
||||
.card .list .item .property.thunder {
|
||||
background-image: url("./images/IconThunder.png");
|
||||
}
|
||||
.card .list .item .property.dungeon {
|
||||
background-image: url("./images/IconDungeonBuffEther.png");
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
86
resources/card/index.html
Normal file
86
resources/card/index.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
{{extend defaultLayout}}
|
||||
|
||||
{{block 'css'}}
|
||||
<link rel="stylesheet" href="{{@sys.currentPath}}/index.css">
|
||||
{{/block}}
|
||||
|
||||
{{block 'main'}}
|
||||
<div class="card">
|
||||
{{include sys.playerInfo}}
|
||||
<div class="status">
|
||||
<div class="item">
|
||||
<div class="value">{{card.stats.active_days}}</div>
|
||||
<div class="label">活跃天数</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="value">{{card.stats.avatar_num}}</div>
|
||||
<div class="label">获得代理人</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="value">{{card.stats.buddy_num}}</div>
|
||||
<div class="label">获得邦布</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="value">{{card.stats.cur_period_zone_layer_count}}</div>
|
||||
<div class="label">式舆防卫战</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="bg-content">
|
||||
AGENT
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
代理人信息
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="list">
|
||||
{{each card.avatar_list char i}}
|
||||
<div class="item rank{{char.rarity}}">
|
||||
<div class="rank rank{{char.rarity}}"></div>
|
||||
<div class="property {{char.element_str}}"></div>
|
||||
<div class="image">
|
||||
<img src="./images/status.png" alt="">
|
||||
</div>
|
||||
<div class="level">等级{{char.level}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="title">
|
||||
<div class="bg-content">
|
||||
BANGBOO
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
邦布信息
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="list">
|
||||
{{each card.buddy_list bangboo i}}
|
||||
<div class="item rank{{bangboo.rarity}}">
|
||||
<div class="rank rank{{bangboo.rarity}}"></div>
|
||||
<div class="image">
|
||||
<img src="./images/status.png" alt="">
|
||||
</div>
|
||||
<div class="level">等级{{bangboo.level}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/block}}
|
||||
188
resources/card/index.scss
Normal file
188
resources/card/index.scss
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
.card {
|
||||
margin: 0 1em;
|
||||
.user-info {
|
||||
margin: 0 1em;
|
||||
}
|
||||
> .title {
|
||||
width: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0 2.4em;
|
||||
position: relative;
|
||||
margin: 0.5em 0;
|
||||
.parallelograms {
|
||||
$pwidth: 0.7em;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
position: inherit;
|
||||
padding-bottom: 0.4em;
|
||||
z-index: 1;
|
||||
span {
|
||||
width: 1.3em;
|
||||
height: 80%;
|
||||
background-color: rgb(246, 202, 69);
|
||||
margin-right: -0.2em;
|
||||
-webkit-clip-path: polygon(
|
||||
$pwidth 0%,
|
||||
100% 0%,
|
||||
calc(100% - $pwidth) 100%,
|
||||
0% 100%
|
||||
);
|
||||
clip-path: polygon(
|
||||
$pwidth 0%,
|
||||
100% 0%,
|
||||
calc(100% - $pwidth) 100%,
|
||||
0% 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
.bg-content {
|
||||
position: absolute;
|
||||
bottom: -0.1em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0) skewX(-8deg);
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
font-size: 2.7em;
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: url('./images/status.png') no-repeat center center;
|
||||
background-size: 110% 160%;
|
||||
aspect-ratio: 2.4;
|
||||
overflow: hidden;
|
||||
margin: 0 1em;
|
||||
margin-bottom: 1.5em;
|
||||
padding-top: 4em;
|
||||
padding-left: 3em;
|
||||
padding-right: 3em;
|
||||
padding-bottom: 3.5em;
|
||||
justify-content: space-around;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.value {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.label {
|
||||
font-size: 0.95em;
|
||||
color: #e2e2e2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1em;
|
||||
padding: 0.5em 3em;
|
||||
margin-bottom: 1.5em;
|
||||
.item {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
* {
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: -0.2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(138, 51, 183);
|
||||
z-index: 0;
|
||||
}
|
||||
.rank {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: 0.1em;
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background: url('./images/RANK_A.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
&.rankS {
|
||||
&::after {
|
||||
background: rgb(230, 119, 51);
|
||||
}
|
||||
.rank {
|
||||
background-image: url('./images/RANK_S.png');
|
||||
}
|
||||
}
|
||||
&.rankB {
|
||||
&::after {
|
||||
background: rgb(93, 183, 249);
|
||||
}
|
||||
.rank {
|
||||
background-image: url('./images/RANK_B.png');
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
aspect-ratio: 0.8;
|
||||
background-color: #e2e2e2;
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.level {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
.property {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.1em;
|
||||
width: 1.6em;
|
||||
aspect-ratio: 1;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
border: solid 0.1em #000;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
&.fire {
|
||||
background-image: url('./images/IconFire.png');
|
||||
}
|
||||
&.ice {
|
||||
background-image: url('./images/IconIce.png');
|
||||
}
|
||||
&.physdmg {
|
||||
background-image: url('./images/IconPhysDmg.png');
|
||||
}
|
||||
&.thunder {
|
||||
background-image: url('./images/IconThunder.png');
|
||||
}
|
||||
&.dungeon {
|
||||
background-image: url('./images/IconDungeonBuffEther.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
76
resources/common/layout/playerinfo.css
Normal file
76
resources/common/layout/playerinfo.css
Normal 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
14
resources/common/layout/playerinfo.html
Normal 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
95
resources/common/layout/playerinfo.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,80 +11,6 @@
|
|||
overflow: hidden;
|
||||
padding: 5em 2.2em 2.2em 2.2em;
|
||||
}
|
||||
.card .user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1.7em;
|
||||
gap: 1em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
.card .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;
|
||||
}
|
||||
.card .user-info .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.card .user-info .info-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
gap: 0.2em;
|
||||
}
|
||||
.card .user-info .info-bar .info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
gap: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.card .user-info .info-bar .info .nickname {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.card .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;
|
||||
}
|
||||
.card .user-info .info-bar .info .label.level {
|
||||
background-color: rgb(243, 203, 69);
|
||||
}
|
||||
.card .user-info .info-bar .info .label.server {
|
||||
background-color: rgb(81, 177, 253);
|
||||
}
|
||||
.card .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);
|
||||
}
|
||||
.card > .title {
|
||||
width: 100%;
|
||||
background-size: contain;
|
||||
|
|
|
|||
|
|
@ -6,19 +6,7 @@
|
|||
|
||||
{{block 'main'}}
|
||||
<div class="card">
|
||||
<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>
|
||||
{{include sys.playerInfo}}
|
||||
<div class="title">
|
||||
<div class="bg-content">
|
||||
STAMINA
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue