Add element block in abyss HTML

This commit is contained in:
LittleMengBot 2023-03-15 19:44:18 +08:00 committed by GitHub
parent 3206d5dccd
commit 6a52b4a508
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 23 additions and 9 deletions

View File

@ -26,6 +26,7 @@
<div class="caption">出战次数</div>
<div class="characters">
<div class="character">
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -114,7 +115,7 @@
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -122,7 +123,7 @@
</div>
<div class="character">
<div style="background-color: var(--red)">5命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -130,7 +131,7 @@
</div>
<div class="character">
<div style="background-color: var(--green)">4命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -138,7 +139,7 @@
</div>
<div class="character">
<div style="background-color: var(--green)">3命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -149,7 +150,7 @@
<div class="battle">
<div class="character">
<div style="background-color: var(--blue)">2命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -157,14 +158,14 @@
</div>
<div class="character">
<div style="background-color: var(--blue)">1命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -330,7 +331,7 @@
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
@ -338,7 +339,7 @@
</div>
<div class="character">
<div style="background-color: var(--red)">5命</div>
<div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>

View File

@ -75,6 +75,7 @@
{{ constellation }} 命
</div>
{% endif %}
<div class="element" style="background-image: url('../../img/element/{{ character.element }}.png')"></div>
<div class="icon"
style="background-image: url('../../background/rarity/half/{{ character.rarity }}.png')">
<img src="{{ character.icon }}" alt=""/>

View File

@ -37,6 +37,7 @@
<div class="characters">
{% for avatar in data.ranks.most_played %}
<div class="character">
<div class="element" style="background-image: url('../../img/element/{{ avatar.element }}.png')"></div>
<div
class="icon"
style="background-image: url('../../background/rarity/half/{{ avatar.rarity }}.png')"

View File

@ -121,6 +121,17 @@ body {
position: relative;
}
.characters > .character > .element {
position: absolute;
top: 3px;
left: 3px;
width: 25px;
height: 25px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon {
width: 100%;
height: 100px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.3 KiB