fix: 资源重复3

This commit is contained in:
bietiaop 2024-07-13 09:39:03 +08:00
parent 162f88e7cd
commit 35c8c95b80
8 changed files with 104 additions and 199 deletions

View file

@ -4,49 +4,6 @@
.card .user-info {
margin: 0 1em;
}
.card > .title {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: stretch;
padding: 0 2.4em;
position: relative;
margin: 0.5em 0;
}
.card > .title .parallelograms {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
position: inherit;
padding-bottom: 0.4em;
z-index: 1;
}
.card > .title .parallelograms span {
width: 1.3em;
height: 80%;
background-color: rgb(246, 202, 69);
margin-right: -0.2em;
-webkit-clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
}
.card > .title .bg-content {
position: absolute;
bottom: -0.1em;
left: 50%;
transform: translate(-50%, 0) skewX(-8deg);
color: rgba(255, 255, 255, 0.1);
font-size: 2.7em;
}
.card > .title .content {
flex-grow: 1;
flex-shrink: 1;
font-size: 1.5em;
text-align: center;
position: inherit;
z-index: 1;
}
.card .status {
display: flex;
align-items: center;

View file

@ -25,7 +25,7 @@
<div class="label">式舆防卫战</div>
</div>
</div>
<div class="title">
<div class="special-title">
<div class="bg-content">
AGENT
</div>
@ -55,7 +55,7 @@
</div>
<div class="title">
<div class="special-title">
<div class="bg-content">
BANGBOO
</div>

View file

@ -3,60 +3,6 @@
.user-info {
margin: 0 1em;
}
> .title {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: stretch;
padding: 0 2.4em;
position: relative;
margin: 0.5em 0;
.parallelograms {
$pwidth: 0.7em;
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
position: inherit;
padding-bottom: 0.4em;
z-index: 1;
span {
width: 1.3em;
height: 80%;
background-color: rgb(246, 202, 69);
margin-right: -0.2em;
-webkit-clip-path: polygon(
$pwidth 0%,
100% 0%,
calc(100% - $pwidth) 100%,
0% 100%
);
clip-path: polygon(
$pwidth 0%,
100% 0%,
calc(100% - $pwidth) 100%,
0% 100%
);
}
}
.bg-content {
position: absolute;
bottom: -0.1em;
left: 50%;
transform: translate(-50%, 0) skewX(-8deg);
color: rgba(255, 255, 255, 0.1);
font-size: 2.7em;
}
.content {
flex-grow: 1;
flex-shrink: 1;
font-size: 1.5em;
text-align: center;
position: inherit;
z-index: 1;
}
}
.status {
display: flex;
align-items: center;

View file

@ -56,4 +56,48 @@
background-image: url("../images/IconDungeonBuffEther.png");
}
.special-title {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: stretch;
padding: 0 2.4em;
position: relative;
margin: 0.5em 0;
}
.special-title .parallelograms {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
position: inherit;
padding-bottom: 0.4em;
z-index: 1;
}
.special-title .parallelograms span {
width: 1.3em;
height: 80%;
background-color: rgb(246, 202, 69);
margin-right: -0.2em;
-webkit-clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
}
.special-title .bg-content {
position: absolute;
bottom: -0.1em;
left: 50%;
transform: translate(-50%, 0) skewX(-8deg);
color: rgba(255, 255, 255, 0.1);
font-size: 2.7em;
}
.special-title .content {
flex-grow: 1;
flex-shrink: 1;
font-size: 1.5em;
text-align: center;
position: inherit;
z-index: 1;
}
/*# sourceMappingURL=index.css.map */

View file

@ -80,3 +80,58 @@
background-image: url('../images/IconDungeonBuffEther.png');
}
}
.special-title {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: stretch;
padding: 0 2.4em;
position: relative;
margin: 0.5em 0;
.parallelograms {
$pwidth: 0.7em;
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
position: inherit;
padding-bottom: 0.4em;
z-index: 1;
span {
width: 1.3em;
height: 80%;
background-color: rgb(246, 202, 69);
margin-right: -0.2em;
-webkit-clip-path: polygon(
$pwidth 0%,
100% 0%,
calc(100% - $pwidth) 100%,
0% 100%
);
clip-path: polygon(
$pwidth 0%,
100% 0%,
calc(100% - $pwidth) 100%,
0% 100%
);
}
}
.bg-content {
position: absolute;
bottom: -0.1em;
left: 50%;
transform: translate(-50%, 0) skewX(-8deg);
color: rgba(255, 255, 255, 0.1);
font-size: 2.7em;
}
.content {
flex-grow: 1;
flex-shrink: 1;
font-size: 1.5em;
text-align: center;
position: inherit;
z-index: 1;
}
}

View file

@ -11,49 +11,6 @@
overflow: hidden;
padding: 5em 2.2em 2.2em 2.2em;
}
.card > .title {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: stretch;
padding: 0 0.4em;
position: relative;
margin: 0.5em 0;
}
.card > .title .parallelograms {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
position: inherit;
padding-bottom: 0.4em;
z-index: 1;
}
.card > .title .parallelograms span {
width: 1.3em;
height: 80%;
background-color: rgb(246, 202, 69);
margin-right: -0.2em;
-webkit-clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
}
.card > .title .bg-content {
position: absolute;
bottom: -0.1em;
left: 50%;
transform: translate(-50%, 0) skewX(-8deg);
color: rgba(255, 255, 255, 0.1);
font-size: 2.7em;
}
.card > .title .content {
flex-grow: 1;
flex-shrink: 1;
font-size: 1.5em;
text-align: center;
position: inherit;
z-index: 1;
}
.card .battery {
display: flex;
align-items: center;

View file

@ -7,7 +7,7 @@
{{block 'main'}}
<div class="card">
{{include sys.playerInfo}}
<div class="title">
<div class="special-title">
<div class="bg-content">
STAMINA
</div>
@ -43,7 +43,7 @@
</div>
</div>
<div class="title">
<div class="special-title">
<div class="bg-content">
ACTIVE
</div>
@ -83,4 +83,4 @@
</div>
</div>
</div>
{{/block}}
{{/block}}

View file

@ -9,60 +9,6 @@
min-height: 30em;
overflow: hidden;
padding: 5em 2.2em 2.2em 2.2em;
> .title {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: stretch;
padding: 0 0.4em;
position: relative;
margin: 0.5em 0;
.parallelograms {
$pwidth: 0.7em;
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
position: inherit;
padding-bottom: 0.4em;
z-index: 1;
span {
width: 1.3em;
height: 80%;
background-color: rgb(246, 202, 69);
margin-right: -0.2em;
-webkit-clip-path: polygon(
$pwidth 0%,
100% 0%,
calc(100% - $pwidth) 100%,
0% 100%
);
clip-path: polygon(
$pwidth 0%,
100% 0%,
calc(100% - $pwidth) 100%,
0% 100%
);
}
}
.bg-content {
position: absolute;
bottom: -0.1em;
left: 50%;
transform: translate(-50%, 0) skewX(-8deg);
color: rgba(255, 255, 255, 0.1);
font-size: 2.7em;
}
.content {
flex-grow: 1;
flex-shrink: 1;
font-size: 1.5em;
text-align: center;
position: inherit;
z-index: 1;
}
}
.battery {
display: flex;
align-items: center;