调整uid列表的样式
This commit is contained in:
Kokomi
parent
ee9d6be224
commit
9a4624cd16
|
|
@ -1,5 +1,14 @@
|
|||
.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 {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
|
|
@ -17,12 +26,13 @@
|
|||
}
|
||||
.uid-list .game-cont .game-title span {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
color: #666;
|
||||
float: right;
|
||||
}
|
||||
.uid-list .game-cont .game-title nobr {
|
||||
background: none;
|
||||
font-size: 12px;
|
||||
background: #888;
|
||||
color: #fff;
|
||||
color: #3a2702;
|
||||
display: inline-block;
|
||||
padding: 1px 2px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -35,9 +45,13 @@
|
|||
.uid-list .game-ul {
|
||||
padding: 8px;
|
||||
}
|
||||
.uid-list .game-ul .no-uid {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.uid-list .game-idx {
|
||||
height: 50px;
|
||||
padding: 13px 0;
|
||||
padding: 20px 0 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.uid-list .game-idx span {
|
||||
|
|
@ -51,23 +65,23 @@
|
|||
line-height: 22px;
|
||||
}
|
||||
.uid-list .game-bar {
|
||||
height: 50px;
|
||||
height: 64px;
|
||||
line-height: 30px;
|
||||
margin: 0;
|
||||
border-radius: 25px;
|
||||
border-radius: 33px;
|
||||
background: right top no-repeat #f0ece4;
|
||||
background-size: auto 100%;
|
||||
padding: 3px;
|
||||
width: 325px;
|
||||
padding: 4px;
|
||||
width: 375px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.uid-list .game-bar .face {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 30px;
|
||||
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;
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
@ -83,15 +97,30 @@
|
|||
line-height: 18px;
|
||||
color: #414e64;
|
||||
}
|
||||
.uid-list .game-bar .info .uid {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
.uid-list .game-bar .info div.shadow {
|
||||
position: relative;
|
||||
-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;
|
||||
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;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
|
@ -104,34 +133,36 @@
|
|||
vertical-align: middle;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.uid-list .game-bar .info .uid strong.ck {
|
||||
.uid-list .game-bar .info .uid-info .type.ck {
|
||||
background: #d3bc8e;
|
||||
color: #3a2702;
|
||||
font-weight: bold;
|
||||
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;
|
||||
}
|
||||
.uid-list .game-bar .info .name {
|
||||
.uid-list .game-bar .info .detail {
|
||||
font-size: 14px;
|
||||
text-shadow: 0 0 2px #fff;
|
||||
}
|
||||
.uid-list .game-bar .info .no-info {
|
||||
font-size: 12px;
|
||||
.uid-list .game-bar .info .detail .no-info {
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 0 1px #fff;
|
||||
}
|
||||
.uid-list .game-bar:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ece5d8;
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
right: 13px;
|
||||
top: 12px;
|
||||
}
|
||||
.uid-list .game-li {
|
||||
display: flex;
|
||||
|
|
@ -140,23 +171,34 @@
|
|||
.uid-list .game-li:last-child {
|
||||
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 {
|
||||
opacity: 1;
|
||||
background: url('../../img/icon/check.webp') center center no-repeat #4a5366;
|
||||
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 {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
color: #555;
|
||||
padding: 8px 12px 8px 24px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.tips li {
|
||||
padding: 2px 0;
|
||||
}
|
||||
.tips nobr {
|
||||
font-size: 12px;
|
||||
background: #555;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
color: #d3bc8e;
|
||||
display: inline-block;
|
||||
padding: 1px 2px;
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -10,22 +10,17 @@ gs:{mark:'#'},
|
|||
sr:{mark:'*'}
|
||||
}; }}
|
||||
|
||||
<div class="tips">
|
||||
#开头为原神，*开头为星穹铁道。发送CK可绑定CK对应uid<br>
|
||||
<nobr>#删除uid1</nobr>
|
||||
删除指定序号uid
|
||||
|
||||
<nobr>#绑定123456789</nobr>
|
||||
绑定对应uid
|
||||
</div>
|
||||
|
||||
<div class="uid-list">
|
||||
{{each uids game}}
|
||||
{{set mark = game.key==='gs'? '#':'*'}}
|
||||
<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 class="game-ul">
|
||||
{{if game.uidList?.length > 0 }}
|
||||
{{each game.uidList uid idx}}
|
||||
<div class="game-li {{game.uid*1 === uid.uid*1 ? 'active':''}}">
|
||||
<div class="game-idx">
|
||||
|
|
@ -34,26 +29,42 @@ sr:{mark:'*'}
|
|||
<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="info">
|
||||
<div class="uid">
|
||||
<span>{{uid.uid}}</span>
|
||||
<strong class="{{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</strong>
|
||||
<div class="uid-info">
|
||||
<div class="uid shadow">{{uid.uid}}<span>{{uid.uid}}</span></div>
|
||||
<div class="type {{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</div>
|
||||
</div>
|
||||
{{if uid.name && uid.level}}
|
||||
<div class="name">
|
||||
<div>{{uid.name}} Lv.{{uid.level}}</div>
|
||||
<div class="detail">
|
||||
{{if uid.name && uid.level}}
|
||||
<div class="name">{{uid.name}} Lv.{{uid.level}}</div>
|
||||
{{else}}
|
||||
<div class="no-info">暂无uid信息，可通过更新面板获取信息</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="no-info">暂无uid信息</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="no-uid">暂无uid，请发送CK或通过
|
||||
<nobr>{{mark}}绑定123456789</nobr>
|
||||
来绑定UID
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<ul class="tips">
|
||||
<li>原神及通用命令以#开头，星铁命令以*开头。发送CK可绑定CK对应uid</li>
|
||||
<li>游戏信息来自面板数据，如无信息或不准确请更新面板</li>
|
||||
<li>
|
||||
<nobr>#删除uid1</nobr>
|
||||
删除指定序号uid
|
||||
|
||||
<nobr>#绑定123456789</nobr>
|
||||
绑定对应uid
|
||||
</li>
|
||||
</ul>
|
||||
{{/block}}
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
.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 {
|
||||
|
|
@ -22,13 +32,14 @@
|
|||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
color: #666;
|
||||
float: right;
|
||||
}
|
||||
|
||||
nobr {
|
||||
background: none;
|
||||
font-size: 12px;
|
||||
background: #888;
|
||||
color: #fff;
|
||||
color: #3a2702;
|
||||
display: inline-block;
|
||||
padding: 1px 2px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -39,16 +50,23 @@
|
|||
.cont-body {
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.game-ul {
|
||||
padding: 8px;
|
||||
|
||||
.no-uid {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.game-idx {
|
||||
height: 50px;
|
||||
padding: 13px 0;
|
||||
padding: 20px 0 10px;
|
||||
margin-right: 5px;
|
||||
|
||||
span {
|
||||
|
|
@ -64,23 +82,23 @@
|
|||
}
|
||||
|
||||
.game-bar {
|
||||
height: 50px;
|
||||
height: 64px;
|
||||
line-height: 30px;
|
||||
margin: 0;
|
||||
border-radius: 25px;
|
||||
border-radius: 33px;
|
||||
background: right top no-repeat #f0ece4;
|
||||
background-size: auto 100%;
|
||||
padding: 3px;
|
||||
width: 325px;
|
||||
padding: 4px;
|
||||
width: 375px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.face {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
|
||||
border: 1px solid #fff;
|
||||
border: 2px solid #fff;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
|
||||
|
|
@ -98,16 +116,36 @@
|
|||
line-height: 18px;
|
||||
color: #414e64;
|
||||
|
||||
.uid {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
|
||||
div.shadow {
|
||||
position: relative;
|
||||
-webkit-text-stroke: 2px #fff;
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
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;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
|
@ -133,28 +171,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
.detail {
|
||||
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 {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ece5d8;
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
right: 13px;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -167,28 +209,42 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
.game-bar {
|
||||
box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
|
||||
}
|
||||
|
||||
.game-bar:after {
|
||||
opacity: 1;
|
||||
background: url('../../img/icon/check.webp') center center no-repeat #4a5366;
|
||||
background-size: 70% auto;
|
||||
}
|
||||
|
||||
.game-idx span {
|
||||
background: #d3bc8e;
|
||||
color: #3a2702;
|
||||
box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
color: #555;
|
||||
padding: 8px 12px 8px 24px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
|
||||
li {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
nobr {
|
||||
font-size: 12px;
|
||||
background: #555;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
color: #d3bc8e;
|
||||
display: inline-block;
|
||||
padding: 1px 2px;
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue