fix: 资源重复
|
|
@ -105,24 +105,15 @@
|
|||
top: 0.2em;
|
||||
left: 0.1em;
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background: url("./images/RANK_A.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
.card .list .item.rankS::after {
|
||||
background: rgb(230, 119, 51);
|
||||
}
|
||||
.card .list .item.rankS .rank {
|
||||
background-image: url("./images/RANK_S.png");
|
||||
}
|
||||
.card .list .item.rankB::after {
|
||||
background: rgb(93, 183, 249);
|
||||
}
|
||||
.card .list .item.rankB .rank {
|
||||
background-image: url("./images/RANK_B.png");
|
||||
}
|
||||
.card .list .item .image {
|
||||
width: 100%;
|
||||
aspect-ratio: 0.8;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<div class="list">
|
||||
{{each card.avatar_list char i}}
|
||||
<div class="item rank{{char.rarity}}">
|
||||
<div class="rank rank{{char.rarity}}"></div>
|
||||
<div class="rank rank-icon {{char.rarity}}"></div>
|
||||
<div class="property {{char.element_str}}"></div>
|
||||
<div class="image">
|
||||
<img src="{{char.square_icon}}" alt="">
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<div class="list">
|
||||
{{each card.buddy_list bangboo i}}
|
||||
<div class="item rank{{bangboo.rarity}}">
|
||||
<div class="rank rank{{bangboo.rarity}}"></div>
|
||||
<div class="rank rank-icon {{bangboo.rarity}}"></div>
|
||||
<div class="image">
|
||||
<img src="{{bangboo.square_icon}}" alt="">
|
||||
</div>
|
||||
|
|
@ -83,4 +83,4 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/block}}
|
||||
{{/block}}
|
||||
|
|
@ -113,9 +113,6 @@
|
|||
top: 0.2em;
|
||||
left: 0.1em;
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background: url('./images/RANK_A.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -123,17 +120,11 @@
|
|||
&::after {
|
||||
background: rgb(230, 119, 51);
|
||||
}
|
||||
.rank {
|
||||
background-image: url('./images/RANK_S.png');
|
||||
}
|
||||
}
|
||||
&.rankB {
|
||||
&::after {
|
||||
background: rgb(93, 183, 249);
|
||||
}
|
||||
.rank {
|
||||
background-image: url('./images/RANK_B.png');
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
|
@ -18,4 +18,21 @@
|
|||
font-family: "Source Han Serif", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.rank-icon {
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
.rank-icon.s, .rank-icon.S {
|
||||
background-image: url("../images/RANK_S.png");
|
||||
}
|
||||
.rank-icon.a, .rank-icon.A {
|
||||
background-image: url("../images/RANK_A.png");
|
||||
}
|
||||
.rank-icon.b, .rank-icon.B {
|
||||
background-image: url("../images/RANK_B.png");
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
|
|||
|
|
@ -39,3 +39,23 @@
|
|||
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.rank-icon {
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
&.s,
|
||||
&.S {
|
||||
background-image: url('../images/RANK_S.png');
|
||||
}
|
||||
&.a,
|
||||
&.A {
|
||||
background-image: url('../images/RANK_A.png');
|
||||
}
|
||||
&.b,
|
||||
&.B {
|
||||
background-image: url('../images/RANK_B.png');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 69 KiB |
|
|
@ -176,18 +176,9 @@
|
|||
top: 0.2em;
|
||||
right: 0.2em;
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background: url("./images/RANK_A.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
.card .list .item.rankS .rank {
|
||||
background-image: url("./images/RANK_S.png");
|
||||
}
|
||||
.card .list .item.rankB .rank {
|
||||
background-image: url("./images/RANK_B.png");
|
||||
}
|
||||
.card .list .item .image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1.5;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="list">
|
||||
{{each item.list inv j}}
|
||||
<div class="item rankS {{inv.isUp && 'up'}}">
|
||||
<div class="rank rankS"></div>
|
||||
<div class="rank rank-icon s"></div>
|
||||
<div class="image">
|
||||
<img src="{{inv.square_icon}}" alt="">
|
||||
</div>
|
||||
|
|
@ -54,4 +54,4 @@
|
|||
{{/each}}
|
||||
|
||||
</div>
|
||||
{{/block}}
|
||||
{{/block}}
|
||||
|
|
@ -127,22 +127,9 @@
|
|||
top: 0.2em;
|
||||
right: 0.2em;
|
||||
width: 1.5em;
|
||||
aspect-ratio: 1;
|
||||
background: url('./images/RANK_A.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
&.rankS {
|
||||
.rank {
|
||||
background-image: url('./images/RANK_S.png');
|
||||
}
|
||||
}
|
||||
&.rankB {
|
||||
.rank {
|
||||
background-image: url('./images/RANK_B.png');
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1.5;
|
||||
|
|
|
|||