Lexcubia
/
Miao-Yunzai
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整uid列表的样式

This commit is contained in:
Kokomi 2023-06-30 04:50:30 +08:00
parent ee9d6be224
commit 9a4624cd16
3 changed files with 192 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
plugins/genshin/resources/html/user/uid-list.css
View File

@ -1,5 +1,14 @@
.container { .container {
width: 400px; width: 450px;
}
nobr {
font-size: 12px;
background: #000;
color: #d3bc8e;
display: inline-block;
padding: 1px 2px;
border-radius: 3px;
margin: 0 1px;
} }
.uid-list .game-cont { .uid-list .game-cont {
background: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.65);
@ -17,12 +26,13 @@
} }
.uid-list .game-cont .game-title span { .uid-list .game-cont .game-title span {
font-size: 12px; font-size: 12px;
color: #888; color: #666;
float: right;
} }
.uid-list .game-cont .game-title nobr { .uid-list .game-cont .game-title nobr {
background: none;
font-size: 12px; font-size: 12px;
background: #888; color: #3a2702;
color: #fff;
display: inline-block; display: inline-block;
padding: 1px 2px; padding: 1px 2px;
border-radius: 3px; border-radius: 3px;
@ -35,9 +45,13 @@
.uid-list .game-ul { .uid-list .game-ul {
padding: 8px; padding: 8px;
} }
.uid-list .game-ul .no-uid {
font-size: 12px;
text-align: center;
}
.uid-list .game-idx { .uid-list .game-idx {
height: 50px; height: 50px;
padding: 13px 0; padding: 20px 0 10px;
margin-right: 5px; margin-right: 5px;
} }
.uid-list .game-idx span { .uid-list .game-idx span {
@ -51,23 +65,23 @@
line-height: 22px; line-height: 22px;
} }
.uid-list .game-bar { .uid-list .game-bar {
height: 50px; height: 64px;
line-height: 30px; line-height: 30px;
margin: 0; margin: 0;
border-radius: 25px; border-radius: 33px;
background: right top no-repeat #f0ece4; background: right top no-repeat #f0ece4;
background-size: auto 100%; background-size: auto 100%;
padding: 3px; padding: 4px;
width: 325px; width: 375px;
display: flex; display: flex;
position: relative; position: relative;
} }
.uid-list .game-bar .face { .uid-list .game-bar .face {
width: 44px; width: 56px;
height: 44px; height: 56px;
border-radius: 22px; border-radius: 30px;
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5);
border: 1px solid #fff; border: 2px solid #fff;
overflow: hidden; overflow: hidden;
background-size: cover; background-size: cover;
} }
@ -83,15 +97,30 @@
line-height: 18px; line-height: 18px;
color: #414e64; color: #414e64;
} }
.uid-list .game-bar .info .uid { .uid-list .game-bar .info div.shadow {
font-size: 18px; position: relative;
display: flex; -webkit-text-stroke: 2px #fff;
} }
.uid-list .game-bar .info .uid span { .uid-list .game-bar .info div.shadow span {
font-weight: normal;
display: block; display: block;
padding-right: 5px; position: absolute;
-webkit-text-stroke: 0px #fff;
left: 0;
top: 0;
} }
.uid-list .game-bar .info .uid strong { .uid-list .game-bar .info .uid-info {
height: 25px;
font-size: 24px;
display: flex;
margin-top: 5px;
}
.uid-list .game-bar .info .uid-info .uid {
font-weight: normal;
display: block;
padding-right: 8px;
}
.uid-list .game-bar .info .uid-info .type {
width: 35px; width: 35px;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
@ -104,34 +133,36 @@
vertical-align: middle; vertical-align: middle;
transform: scale(0.9); transform: scale(0.9);
} }
.uid-list .game-bar .info .uid strong.ck { .uid-list .game-bar .info .uid-info .type.ck {
background: #d3bc8e; background: #d3bc8e;
color: #3a2702; color: #3a2702;
font-weight: bold; font-weight: bold;
box-shadow: 0 0 3px 0 #000; box-shadow: 0 0 3px 0 #000;
} }
.uid-list .game-bar .info .uid strong.reg { .uid-list .game-bar .info .uid-info .type.reg {
background: #666; background: #666;
} }
.uid-list .game-bar .info .name { .uid-list .game-bar .info .detail {
font-size: 14px; font-size: 14px;
text-shadow: 0 0 2px #fff;
} }
.uid-list .game-bar .info .no-info { .uid-list .game-bar .info .detail .no-info {
font-size: 12px;
color: #555; color: #555;
font-size: 12px;
text-shadow: 0 0 1px #fff;
} }
.uid-list .game-bar:after { .uid-list .game-bar:after {
display: block; display: block;
content: ""; content: "";
width: 28px; width: 36px;
height: 28px; height: 36px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #ece5d8; border: 2px solid #ece5d8;
opacity: 0; opacity: 0;
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5);
position: absolute; position: absolute;
right: 8px; right: 13px;
top: 8px; top: 12px;
} }
.uid-list .game-li { .uid-list .game-li {
display: flex; display: flex;
@ -140,23 +171,34 @@
.uid-list .game-li:last-child { .uid-list .game-li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.uid-list .game-li.active .game-bar {
box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
}
.uid-list .game-li.active .game-bar:after { .uid-list .game-li.active .game-bar:after {
opacity: 1; opacity: 1;
background: url('../../img/icon/check.webp') center center no-repeat #4a5366; background: url('../../img/icon/check.webp') center center no-repeat #4a5366;
background-size: 70% auto; background-size: 70% auto;
} }
.uid-list .game-li.active .game-idx span {
background: #d3bc8e;
color: #3a2702;
box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
}
.tips { .tips {
background: rgba(255, 255, 255, 0.8);
border-radius: 10px; border-radius: 10px;
font-size: 12px; font-size: 12px;
padding: 8px 12px; padding: 8px 12px 8px 24px;
color: #555; color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
background: rgba(0, 0, 0, 0.4);
}
.tips li {
padding: 2px 0;
} }
.tips nobr { .tips nobr {
font-size: 12px; font-size: 12px;
background: #555; background: #000;
color: #fff; color: #d3bc8e;
display: inline-block; display: inline-block;
padding: 1px 2px; padding: 1px 2px;
border-radius: 3px; border-radius: 3px;

47
plugins/genshin/resources/html/user/uid-list.html
View File

@ -10,22 +10,17 @@ gs:{mark:'#'},
sr:{mark:'*'} sr:{mark:'*'}
}; }} }; }}
<div class="tips">
#开头为原神，*开头为星穹铁道。发送CK可绑定CK对应uid<br>
<nobr>#删除uid1</nobr>
删除指定序号uid
<nobr>#绑定123456789</nobr>
绑定对应uid
</div>
<div class="uid-list"> <div class="uid-list">
{{each uids game}} {{each uids game}}
{{set mark = game.key==='gs'? '#':'*'}} {{set mark = game.key==='gs'? '#':'*'}}
<div class="game-cont"> <div class="game-cont">
<div class="game-title"><strong>{{game.name}}</strong><span>使用<nobr>{{mark}}uid1</nobr>切换uid <div class="game-title">
<strong>{{mark}}{{game.name}}</strong>
<span>使用<nobr>{{mark}}uid1</nobr>切换uid</span>
</div> </div>
<div class="game-ul"> <div class="game-ul">
{{if game.uidList?.length > 0 }}
{{each game.uidList uid idx}} {{each game.uidList uid idx}}
<div class="game-li {{game.uid*1 === uid.uid*1 ? 'active':''}}"> <div class="game-li {{game.uid*1 === uid.uid*1 ? 'active':''}}">
<div class="game-idx"> <div class="game-idx">
@ -34,26 +29,42 @@ sr:{mark:'*'}
<div class="game-bar" style="background-image:url({{_miao_path}}{{uid.banner}})"> <div class="game-bar" style="background-image:url({{_miao_path}}{{uid.banner}})">
<div class="face" style="background-image:url({{_miao_path}}{{uid.face}})"></div> <div class="face" style="background-image:url({{_miao_path}}{{uid.face}})"></div>
<div class="info"> <div class="info">
<div class="uid"> <div class="uid-info">
<span>{{uid.uid}}</span> <div class="uid shadow">{{uid.uid}}<span>{{uid.uid}}</span></div>
<strong class="{{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</strong> <div class="type {{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</div>
</div> </div>
{{if uid.name && uid.level}} <div class="detail">
<div class="name"> {{if uid.name && uid.level}}
<div>{{uid.name}} Lv.{{uid.level}}</div> <div class="name">{{uid.name}} Lv.{{uid.level}}</div>
{{else}}
<div class="no-info">暂无uid信息，可通过更新面板获取信息</div>
{{/if}}
</div> </div>
{{else}}
<div class="no-info">暂无uid信息</div>
{{/if}}
</div> </div>
</div> </div>
</div> </div>
{{/each}} {{/each}}
{{else}}
<div class="no-uid">暂无uid，请发送CK或通过
<nobr>{{mark}}绑定123456789</nobr>
来绑定UID
</div>
{{/if}}
</div> </div>
</div> </div>
{{/each}} {{/each}}
</div> </div>
<ul class="tips">
<li>原神及通用命令以#开头，星铁命令以*开头。发送CK可绑定CK对应uid</li>
<li>游戏信息来自面板数据，如无信息或不准确请更新面板</li>
<li>
<nobr>#删除uid1</nobr>
删除指定序号uid
<nobr>#绑定123456789</nobr>
绑定对应uid
</li>
</ul>
{{/block}} {{/block}}

120
plugins/genshin/resources/html/user/uid-list.less
View File

@ -1,5 +1,15 @@
.container { .container {
width: 400px; width: 450px;
}
nobr {
font-size: 12px;
background: #000;
color: #d3bc8e;
display: inline-block;
padding: 1px 2px;
border-radius: 3px;
margin: 0 1px;
} }
.uid-list { .uid-list {
@ -22,13 +32,14 @@
span { span {
font-size: 12px; font-size: 12px;
color: #888; color: #666;
float: right;
} }
nobr { nobr {
background: none;
font-size: 12px; font-size: 12px;
background: #888; color: #3a2702;
color: #fff;
display: inline-block; display: inline-block;
padding: 1px 2px; padding: 1px 2px;
border-radius: 3px; border-radius: 3px;
@ -39,16 +50,23 @@
.cont-body { .cont-body {
background: none; background: none;
padding: 0; padding: 0;
} }
} }
.game-ul { .game-ul {
padding: 8px; padding: 8px;
.no-uid {
font-size: 12px;
text-align: center;
}
} }
.game-idx { .game-idx {
height: 50px; height: 50px;
padding: 13px 0; padding: 20px 0 10px;
margin-right: 5px; margin-right: 5px;
span { span {
@ -64,23 +82,23 @@
} }
.game-bar { .game-bar {
height: 50px; height: 64px;
line-height: 30px; line-height: 30px;
margin: 0; margin: 0;
border-radius: 25px; border-radius: 33px;
background: right top no-repeat #f0ece4; background: right top no-repeat #f0ece4;
background-size: auto 100%; background-size: auto 100%;
padding: 3px; padding: 4px;
width: 325px; width: 375px;
display: flex; display: flex;
position: relative; position: relative;
.face { .face {
width: 44px; width: 56px;
height: 44px; height: 56px;
border-radius: 22px; border-radius: 30px;
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5); box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
border: 1px solid #fff; border: 2px solid #fff;
overflow: hidden; overflow: hidden;
background-size: cover; background-size: cover;
@ -98,16 +116,36 @@
line-height: 18px; line-height: 18px;
color: #414e64; color: #414e64;
.uid {
font-size: 18px; div.shadow {
display: flex; position: relative;
-webkit-text-stroke: 2px #fff;
span { span {
font-weight: normal;
display: block; display: block;
padding-right: 5px; position: absolute;
-webkit-text-stroke: 0px #fff;
left: 0;
top: 0;
}
}
.uid-info {
height: 25px;
font-size: 24px;
display: flex;
margin-top: 5px;
.uid {
font-weight: normal;
display: block;
padding-right: 8px;
} }
strong { .type {
width: 35px; width: 35px;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
@ -133,28 +171,32 @@
} }
} }
.name { .detail {
font-size: 14px; font-size: 14px;
text-shadow: 0 0 2px #fff;
.no-info {
color: #555;
font-size: 12px;
text-shadow: 0 0 1px #fff;
}
} }
.no-info {
font-size: 12px;
color: #555;
}
} }
&:after { &:after {
display: block; display: block;
content: ""; content: "";
width: 28px; width: 36px;
height: 28px; height: 36px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #ece5d8; border: 2px solid #ece5d8;
opacity: 0; opacity: 0;
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5); box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
position: absolute; position: absolute;
right: 8px; right: 13px;
top: 8px; top: 12px;
} }
} }
@ -167,28 +209,42 @@
} }
&.active { &.active {
.game-bar {
box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
}
.game-bar:after { .game-bar:after {
opacity: 1; opacity: 1;
background: url('../../img/icon/check.webp') center center no-repeat #4a5366; background: url('../../img/icon/check.webp') center center no-repeat #4a5366;
background-size: 70% auto; background-size: 70% auto;
} }
.game-idx span {
background: #d3bc8e;
color: #3a2702;
box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
}
} }
} }
} }
.tips { .tips {
background: rgba(255, 255, 255, .8);
border-radius: 10px; border-radius: 10px;
font-size: 12px; font-size: 12px;
padding: 8px 12px; padding: 8px 12px 8px 24px;
color: #555; color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
background: rgba(0, 0, 0, .4);
li {
padding: 2px 0;
}
nobr { nobr {
font-size: 12px; font-size: 12px;
background: #555; background: #000;
color: #fff; color: #d3bc8e;
display: inline-block; display: inline-block;
padding: 1px 2px; padding: 1px 2px;
border-radius: 3px; border-radius: 3px;