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

rebase: 优化样式

Browse source
This commit is contained in:
bietiaop 2024-07-26 17:18:34 +08:00
parent 52b9a5b1b3
commit 62952f33b1
3 changed files with 125 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

79
resources/panel/card.css
View file

@ -79,10 +79,8 @@
.card .basic .char .avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top center;
object-position: top center;
object-fit: cover;
object-position: top center;
position: absolute;
}
.card .basic .char .skills {
@ -371,7 +369,6 @@
display: flex;
flex-direction: column;
justify-content: stretch;
width: -moz-max-content;
width: max-content;
}
.card .basic .info .weapon_info .info .main .addition {
@ -542,8 +539,7 @@
.card .equip-list .box .icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
object-fit: contain;
display: block;
}
.card .equip-list .box .info {
@ -614,6 +610,48 @@
color: rgb(255, 255, 255);
font-size: 1em;
}
.card .damage-title {
padding-top: 1.2em;
}
.card .damagelist {
margin: 0 2em;
margin-top: 1em;
text-align: center;
display: grid;
backdrop-filter: blur(0.2em);
border-radius: 0.5em;
overflow: hidden;
box-shadow: 0 0 3em rgba(0, 0, 0, 0.6);
border: 0.1em solid rgba(255, 255, 255, 0.2);
}
.card .damagelist .dmg-tr {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
}
.card .damagelist .dmg-tr:first-child {
border-top: 0.2em solid rgba(255, 255, 255, 0.2);
border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
font-size: 1.1em;
background: rgba(0, 0, 0, 0.2);
text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.6);
}
.card .damagelist .dmg-tr:first-child .dmg-td {
text-align: center !important;
background: none !important;
}
.card .damagelist .dmg-td {
padding: 0.5em 0.5em;
font-size: 0.9em;
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
}
.card .damagelist .dmg-td:first-child {
text-align: left;
background: rgba(0, 0, 0, 0.2);
}
.card .damagelist .dmg-td:last-child {
border-right: none;
}
.copyright {
margin-top: -3.3em;
@ -621,29 +659,4 @@
z-index: 5;
}
.damage-title {
padding-top: 1.2em;
}
.damagelist {
margin-left: 2em;
}
.damagelist th {
text-align: center;
padding: 0.3em 0.3em;
width: 9em;
}
.damagelist th:first-child {
text-align: left;
padding-left: 4em;
width: 14em;
}
.damagelist td {
text-align: center;
padding: 0.3em 0.3em;
width: 9em;
}
.damagelist td:first-child {
width: 14em;
text-align: left;
}/*# sourceMappingURL=card.css.map */
/*# sourceMappingURL=card.css.map */

28
resources/panel/card.html
View file

@ -182,22 +182,18 @@
<% include(sys.specialTitle, {en: 'DAMAGE' , cn: '伤害统计' }) %>
</div>
<table class="damagelist">
<thead>
<tr>
<th>类型</th>
<th>暴击伤害</th>
<th>期望伤害</th>
</tr>
</thead>
<tbody>
{{each charData.damages damage}}
<tr>
<td>{{damage.title}}</td>
<td>{{damage.value.cd.toFixed(0)}}</td>
<td>{{damage.value.qw.toFixed(0)}}</td>
</tr>
{{/each}}
</tbody>
<div class="dmg-tr titlebar">
<div class="dmg-td">类型</div>
<div class="dmg-td">暴击伤害</div>
<div class="dmg-td">期望伤害</div>
</div>
{{each charData.damages damage}}
<div class="dmg-tr">
<div class="dmg-td">{{damage.title}}</div>
<div class="dmg-td">{{damage.value.cd.toFixed(0)}}</div>
<div class="dmg-td">{{damage.value.qw.toFixed(0)}}</div>
</div>
{{/each}}
</table>
{{/if}}
</div>

114
resources/panel/card.scss
View file

@ -291,22 +291,26 @@
.level {
$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 );
-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;
@ -530,6 +534,53 @@
}
}
}
.damage-title {
padding-top: 1.2em;
}
.damagelist {
margin: 0 2em;
margin-top: 1em;
text-align: center;
display: grid;
backdrop-filter: blur(0.2em);
border-radius: 0.5em;
overflow: hidden;
box-shadow: 0 0 3em rgba(0, 0, 0, 0.6);
border: 0.1em solid rgba(255, 255, 255, 0.2);
.dmg-tr {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
&:first-child {
border-top: 0.2em solid rgba(255, 255, 255, 0.2);
border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
font-size: 1.1em;
background: rgba(0, 0, 0, 0.2);
text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.6);
.dmg-td {
text-align: center !important;
background: none !important;
}
}
}
.dmg-td {
padding: 0.5em 0.5em;
font-size: 0.9em;
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
&:first-child {
text-align: left;
background: rgba(0, 0, 0, 0.2);
}
&:last-child {
border-right: none;
}
}
}
}
.copyright {
@ -537,34 +588,3 @@
position: relative;
z-index: 5;
}
.damage-title {
padding-top: 1.2em;
}
.damagelist {
margin-left: 2em;
th {
text-align: center;
padding: 0.3em 0.3em;
width: 9em;
&:first-child {
text-align: left;
padding-left: 4em;
width: 14em;
}
}
td {
text-align: center;
padding: 0.3em 0.3em;
width: 9em;
&:first-child {
width: 14em;
text-align: left;
}
}
}