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

feat:调整伤害统计样式

Browse source
This commit is contained in:
ZyeAlex 2024-07-26 15:23:00 +08:00
parent 01666bee89
commit f7602c497f
3 changed files with 133 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

33
resources/panel/card.css
View file

@ -79,8 +79,10 @@
.card .basic .char .avatar img { .card .basic .char .avatar img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; -o-object-fit: cover;
object-position: top center; object-fit: cover;
-o-object-position: top center;
object-position: top center;
position: absolute; position: absolute;
} }
.card .basic .char .skills { .card .basic .char .skills {
@ -369,6 +371,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: stretch; justify-content: stretch;
width: -moz-max-content;
width: max-content; width: max-content;
} }
.card .basic .info .weapon_info .info .main .addition { .card .basic .info .weapon_info .info .main .addition {
@ -539,7 +542,8 @@
.card .equip-list .box .icon img { .card .equip-list .box .icon img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; -o-object-fit: contain;
object-fit: contain;
display: block; display: block;
} }
.card .equip-list .box .info { .card .equip-list .box .info {
@ -617,16 +621,29 @@
z-index: 5; z-index: 5;
} }
.damage-title {
padding-top: 1.2em;
}
.damagelist {
margin-left: 2em;
}
.damagelist th { .damagelist th {
text-align: center; text-align: center;
padding: 0.3em 0.3em; padding: 0.3em 0.3em;
width:33%; width: 9em;
}
.damagelist th:first-child {
text-align: left;
padding-left: 4em;
width: 14em;
} }
.damagelist td { .damagelist td {
text-align: center; text-align: center;
padding: 0.3em 0.3em; padding: 0.3em 0.3em;
width:33%; width: 9em;
} }
.damagelist td:first-child {
/*# sourceMappingURL=card.css.map */ width: 14em;
text-align: left;
}/*# sourceMappingURL=card.css.map */

2
resources/panel/card.html
View file

@ -178,7 +178,7 @@
</div> </div>
{{if damagelist}} {{if damagelist}}
<div class="title"> <div class="title damage-title">
<% include(sys.specialTitle, {en: 'DAMAGE' , cn: '伤害统计' }) %> <% include(sys.specialTitle, {en: 'DAMAGE' , cn: '伤害统计' }) %>
</div> </div>
<table class="damagelist"> <table class="damagelist">

133
resources/panel/card.scss
View file

@ -2,6 +2,7 @@
padding-top: 0.8em; padding-top: 0.8em;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.uid { .uid {
font-size: 0.6em; font-size: 0.6em;
text-align: center; text-align: center;
@ -20,9 +21,11 @@
-webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.6); -webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.6);
z-index: 1; z-index: 1;
} }
.star { .star {
width: 5.5em; width: 5.5em;
height: 1.5em; height: 1.5em;
@for $i from 0 through 5 { @for $i from 0 through 5 {
&.star#{$i} { &.star#{$i} {
background-size: cover; background-size: cover;
@ -32,18 +35,22 @@
} }
} }
} }
.basic { .basic {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
overflow: hidden; overflow: hidden;
.char { .char {
width: 55%; width: 55%;
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
.avatar { .avatar {
height: 100%; height: 100%;
padding-top: 1em; padding-top: 1em;
overflow: hidden; overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -52,6 +59,7 @@
position: absolute; position: absolute;
} }
} }
.skills { .skills {
position: absolute; position: absolute;
width: 120%; width: 120%;
@ -66,6 +74,7 @@
align-items: flex-end; align-items: flex-end;
padding-left: 2.5em; padding-left: 2.5em;
padding-bottom: 0.2em; padding-bottom: 0.2em;
.skill { .skill {
width: 1.4em; width: 1.4em;
aspect-ratio: 1; aspect-ratio: 1;
@ -76,6 +85,7 @@
} }
} }
} }
.info { .info {
width: 45%; width: 45%;
flex-grow: 0; flex-grow: 0;
@ -83,6 +93,7 @@
font-size: 1.2em; font-size: 1.2em;
position: relative; position: relative;
z-index: 2; z-index: 2;
.char_info { .char_info {
width: 140%; width: 140%;
position: relative; position: relative;
@ -96,41 +107,49 @@
border-image-repeat: stretch stretch; border-image-repeat: stretch stretch;
border-image-source: url('./images/CurseBG04.png'); border-image-source: url('./images/CurseBG04.png');
filter: drop-shadow(0 0 0.1em rgb(0, 0, 0)); filter: drop-shadow(0 0 0.1em rgb(0, 0, 0));
.base { .base {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.2em; gap: 0.2em;
overflow: hidden; overflow: hidden;
.rank { .rank {
width: 1.2em; width: 1.2em;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
.property { .property {
width: 1em; width: 1em;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
.name { .name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }
.addition { .addition {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.7em; font-size: 0.7em;
gap: 0.2em; gap: 0.2em;
padding-left: 1em; padding-left: 1em;
.level { .level {
background-color: #000; background-color: #000;
padding: 0em 0.7em; padding: 0em 0.7em;
border-radius: 1em; border-radius: 1em;
} }
.role_ranks { .role_ranks {
display: flex; display: flex;
gap: 0.1em; gap: 0.1em;
span { span {
width: 1.2em; width: 1.2em;
aspect-ratio: 1; aspect-ratio: 1;
@ -140,10 +159,12 @@
background-position: center; background-position: center;
opacity: 0.4; opacity: 0.4;
} }
@for $i from 1 through 7 { @for $i from 1 through 7 {
span:nth-child(#{$i}) { span:nth-child(#{$i}) {
background-image: url('./images/ranks/#{$i}.png'); background-image: url('./images/ranks/#{$i}.png');
} }
&.r#{$i} { &.r#{$i} {
@for $j from 1 through $i { @for $j from 1 through $i {
span:nth-child(#{$j}) { span:nth-child(#{$j}) {
@ -155,37 +176,45 @@
} }
} }
} }
.property_info { .property_info {
background-color: rgb(47, 47, 47); background-color: rgb(47, 47, 47);
border-left: 0.1em solid rgb(0, 0, 0); border-left: 0.1em solid rgb(0, 0, 0);
padding-top: 0.2em; padding-top: 0.2em;
background: url('./images/BgFrame01.png') center / 150% no-repeat; background: url('./images/BgFrame01.png') center / 150% no-repeat;
.title { .title {
font-size: 0.6em; font-size: 0.6em;
.special-title { .special-title {
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
} }
} }
.list { .list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2em; gap: 0.2em;
padding-bottom: 0.2em; padding-bottom: 0.2em;
.properties { .properties {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4em; gap: 0.4em;
padding: 0.05em 1em 0em 0.05em; padding: 0.05em 1em 0em 0.05em;
&:nth-child(odd) { &:nth-child(odd) {
background-color: rgba(221, 224, 221, 0.25); background-color: rgba(221, 224, 221, 0.25);
} }
.prop-icon { .prop-icon {
width: 1em; width: 1em;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin: 0 0.4em; margin: 0 0.4em;
} }
.label { .label {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@ -194,13 +223,16 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&.yellow { &.yellow {
color: rgb(247, 199, 54); color: rgb(247, 199, 54);
} }
&.blue { &.blue {
color: rgb(65, 147, 237); color: rgb(65, 147, 237);
} }
} }
.value { .value {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -209,6 +241,7 @@
} }
} }
} }
.weapon_info { .weapon_info {
border-image-slice: 118 0 68 43 fill; border-image-slice: 118 0 68 43 fill;
border-image-width: 4.5em 0em 2.7em 1.7em; border-image-width: 4.5em 0em 2.7em 1.7em;
@ -223,54 +256,57 @@
padding-bottom: 3em; padding-bottom: 3em;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.info { .info {
width: 100%; width: 100%;
position: relative; position: relative;
z-index: 2; z-index: 2;
.base { .base {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
.rarity-icon { .rarity-icon {
width: 2em; width: 2em;
} }
.name { .name {
text-shadow: 0 0 0.2em rgb(0, 0, 0); text-shadow: 0 0 0.2em rgb(0, 0, 0);
} }
} }
.main { .main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: stretch; justify-content: stretch;
width: max-content; width: max-content;
.addition { .addition {
font-size: 0.8em; font-size: 0.8em;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4em; gap: 0.4em;
.level { .level {
$label-width: 0.2em; $label-width: 0.2em;
-webkit-clip-path: polygon( -webkit-clip-path: polygon($label-width 0%,
$label-width 0%, calc(100% - $label-width) 0%,
calc(100% - $label-width) 0%, 100% $label-width,
100% $label-width, 100% calc(100% - $label-width),
100% calc(100% - $label-width), calc(100% - $label-width) 100%,
calc(100% - $label-width) 100%, $label-width 100%,
$label-width 100%, 0% calc(100% - $label-width),
0% calc(100% - $label-width), 0% $label-width );
0% $label-width clip-path: polygon($label-width 0%,
); calc(100% - $label-width) 0%,
clip-path: polygon( 100% $label-width,
$label-width 0%, 100% calc(100% - $label-width),
calc(100% - $label-width) 0%, calc(100% - $label-width) 100%,
100% $label-width, $label-width 100%,
100% calc(100% - $label-width), 0% calc(100% - $label-width),
calc(100% - $label-width) 100%, 0% $label-width );
$label-width 100%,
0% calc(100% - $label-width),
0% $label-width
);
padding: 0 0.4em; padding: 0 0.4em;
font-size: 0.9em; font-size: 0.9em;
display: flex; display: flex;
@ -281,6 +317,7 @@
background-color: rgb(243, 203, 69); background-color: rgb(243, 203, 69);
} }
} }
.properties { .properties {
display: flex; display: flex;
align-items: center; align-items: center;
@ -289,14 +326,17 @@
padding: 0 0.5em; padding: 0 0.5em;
border-radius: 1em; border-radius: 1em;
margin: 0.2em 0; margin: 0.2em 0;
&.sub { &.sub {
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
} }
.prop-icon { .prop-icon {
width: 1em; width: 1em;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
.label { .label {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@ -309,6 +349,7 @@
} }
} }
} }
.icon { .icon {
position: absolute; position: absolute;
top: 1.2em; top: 1.2em;
@ -316,6 +357,7 @@
z-index: 1; z-index: 1;
height: 70%; height: 70%;
margin-right: -1em; margin-right: -1em;
img { img {
height: 100%; height: 100%;
} }
@ -323,6 +365,7 @@
} }
} }
} }
.other { .other {
border-image-source: url('./images/BgFrame01.png'); border-image-source: url('./images/BgFrame01.png');
border-image-slice: 200 100 70 280 fill; border-image-slice: 200 100 70 280 fill;
@ -334,6 +377,7 @@
position: relative; position: relative;
z-index: 5; z-index: 5;
} }
.equip-list { .equip-list {
display: grid; display: grid;
gap: 1em; gap: 1em;
@ -341,6 +385,7 @@
padding: 0 1.8em; padding: 0 1.8em;
align-items: stretch; align-items: stretch;
margin-top: 1em; margin-top: 1em;
.box { .box {
$size: 3em; $size: 3em;
border-image-source: url('./images/equip_bg.png'); border-image-source: url('./images/equip_bg.png');
@ -352,6 +397,7 @@
margin-top: 1.3em; margin-top: 1.3em;
padding-bottom: 1em; padding-bottom: 1em;
min-height: 10em; min-height: 10em;
&.empty { &.empty {
&::after { &::after {
content: ''; content: '';
@ -367,6 +413,7 @@
background-position: center; background-position: center;
} }
} }
@for $i from 1 through 6 { @for $i from 1 through 6 {
&:nth-child(#{$i}) { &:nth-child(#{$i}) {
&::before { &::before {
@ -380,6 +427,7 @@
} }
} }
} }
.icon { .icon {
width: 0.9 * $size; width: 0.9 * $size;
aspect-ratio: 1; aspect-ratio: 1;
@ -392,6 +440,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
border-radius: 50%; border-radius: 50%;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -399,12 +448,14 @@
display: block; display: block;
} }
} }
.info { .info {
display: flex; display: flex;
padding-left: 2.2em; padding-left: 2.2em;
margin-top: -2.5em; margin-top: -2.5em;
gap: 0.5em; gap: 0.5em;
align-items: center; align-items: center;
.level { .level {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@ -415,10 +466,12 @@
border-radius: 1em; border-radius: 1em;
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }
.rarity-icon { .rarity-icon {
width: 2.2em; width: 2.2em;
} }
} }
.name { .name {
padding: 0 0.5em; padding: 0 0.5em;
overflow: hidden; overflow: hidden;
@ -426,8 +479,10 @@
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
} }
.property-list { .property-list {
padding: 0 0.5em; padding: 0 0.5em;
.properties { .properties {
display: flex; display: flex;
align-items: center; align-items: center;
@ -436,11 +491,13 @@
padding: 0 0.5em; padding: 0 0.5em;
border-radius: 1em; border-radius: 1em;
margin: 0.2em 0; margin: 0.2em 0;
.prop-icon { .prop-icon {
width: 1em; width: 1em;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
.label { .label {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@ -450,16 +507,20 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.value { .value {
color: rgb(249, 189, 64); color: rgb(249, 189, 64);
font-size: 0.7em; font-size: 0.7em;
} }
&.main { &.main {
background-color: rgb(65, 147, 237); background-color: rgb(65, 147, 237);
.prop-icon { .prop-icon {
width: 1.2em; width: 1.2em;
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
.value { .value {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 1em; font-size: 1em;
@ -470,20 +531,40 @@
} }
} }
} }
.copyright { .copyright {
margin-top: -3.3em; margin-top: -3.3em;
position: relative; position: relative;
z-index: 5; z-index: 5;
} }
.damage-title {
padding-top: 1.2em;
}
.damagelist { .damagelist {
margin-left: 2em;
th { th {
text-align: center; text-align: center;
padding: 0.3em 0.3em; padding: 0.3em 0.3em;
width:33%; width: 9em;
&:first-child {
text-align: left;
padding-left: 4em;
width: 14em;
}
} }
td { td {
text-align: center; text-align: center;
padding: 0.3em 0.3em; padding: 0.3em 0.3em;
width:33%; width: 9em;
&:first-child {
width: 14em;
text-align: left;
}
} }
} }