update: panel

This commit is contained in:
bietiaop 2024-07-18 14:26:12 +08:00
parent 3d54e240a7
commit 9bd603e3c9
9 changed files with 92 additions and 10 deletions

View file

@ -18,13 +18,29 @@ body {
}
.copyright {
text-align: center;
font-size: 0.7em;
color: #797979;
padding-bottom: 2em;
display: flex;
justify-content: center;
align-items: center;
gap: 0.3em;
}
.copyright .highlight {
color: #fff;
position: relative;
}
.copyright .with-version {
padding-right: 1.8em;
}
.copyright .with-version .version {
padding: 0.1em 0.3em;
border-radius: 0.2em;
font-size: 0.8em;
color: #fff;
position: absolute;
top: -0.5em;
right: -0.5em;
}
/*# sourceMappingURL=index.css.map */

View file

@ -21,11 +21,28 @@ body {
}
.copyright {
text-align: center;
font-size: 0.7em;
color: #797979;
padding-bottom: 2em;
display: flex;
justify-content: center;
align-items: center;
gap: 0.3em;
.highlight {
color: #fff;
position: relative;
}
.with-version {
padding-right: 1.8em;
.version {
// background-color: #3f3f3f;
padding: 0.1em 0.3em;
border-radius: 0.2em;
font-size: 0.8em;
color: #fff;
position: absolute;
top: -0.5em;
right: -0.5em;
}
}
}

View file

@ -12,6 +12,9 @@
<div class="icon"></div>
</div>
<div class="list">
{{if list.length === 0}}
<div class="empty">暂无数据,请先刷新面板</div>
{{/if}}
{{each list item}}
<div class="item">
<div class="icon">
@ -30,4 +33,4 @@
</div>
{{/block}}
</html>
</html>

View file

@ -61,6 +61,13 @@
align-content: flex-start;
padding: 0.4em 0.6em 0.5em;
}
.panel > .list .empty {
color: white;
font-size: 0.8em;
text-align: center;
width: 100%;
padding-top: 0.6em;
}
.panel > .list .item {
display: flex;
flex-direction: column;
@ -74,6 +81,15 @@
margin-bottom: 0.2em;
position: relative;
}
.panel > .list .item .icon .new {
position: absolute;
right: 0.2em;
top: 0.4em;
width: 0.5em;
height: 0.5em;
background-color: rgb(51, 235, 0);
border-radius: 50%;
}
.panel > .list .item .icon img.streng {
width: 3.5em;
height: 3.5em;

View file

@ -12,9 +12,15 @@
<div class="icon"></div>
</div>
<div class="list">
{{if list.length === 0}}
<div class="empty">暂无数据,请确认查询正确</div>
{{/if}}
{{each list item}}
<div class="item">
<div class="icon">
{{if item?.isNew}}
<div class="new"></div>
{{/if}}
<img class="streng" src="{{item.square_icon}}" alt="" />
<div class="rank r{{item.rank}}">
<span> {{item.rank}} </span>
@ -30,4 +36,4 @@
</div>
{{/block}}
</html>
</html>

View file

@ -60,7 +60,13 @@
flex-wrap: wrap;
align-content: flex-start;
padding: 0.4em 0.6em 0.5em;
.empty {
color: white;
font-size: 0.8em;
text-align: center;
width: 100%;
padding-top: 0.6em;
}
.item {
display: flex;
flex-direction: column;
@ -72,6 +78,15 @@
background: url('./images/avatar_box.png') center / contain no-repeat;
margin-bottom: 0.2em;
position: relative;
.new {
position: absolute;
right: 0.2em;
top: 0.4em;
width: 0.5em;
height: 0.5em;
background-color: rgb(51, 235, 0);
border-radius: 50%;
}
img.streng {
width: 3.5em;
height: 3.5em;