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

Merge pull request #28 from ZyeAlex/main

Browse source 
feat:调整伤害统计样式
This commit is contained in:
bietiaop 2024-07-26 16:26:57 +08:00 • committed by GitHub
commit 47e76adf80
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top center;
object-position: top center;
position: absolute;
}
.card .basic .char .skills {
@ -369,6 +371,7 @@
display: flex;
flex-direction: column;
justify-content: stretch;
width: -moz-max-content;
width: max-content;
}
.card .basic .info .weapon_info .info .main .addition {
@ -539,7 +542,8 @@
.card .equip-list .box .icon img {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
object-fit: contain;
display: block;
}
.card .equip-list .box .info {
@ -617,16 +621,29 @@
z-index: 5;
}
.damage-title {
padding-top: 1.2em;
}
.damagelist {
margin-left: 2em;
}
.damagelist th {
text-align: center;
padding: 0.3em 0.3em;
width:33%;
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:33%;
width: 9em;
}
/*# sourceMappingURL=card.css.map */
.damagelist td:first-child {
width: 14em;
text-align: left;
}/*# sourceMappingURL=card.css.map */

2
resources/panel/card.html
View file

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

133
resources/panel/card.scss
View file

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