MibooGram/resources/genshin/abyss_team/abyss_team.html

91 lines
2.6 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8" />
<title>abyss</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<script src="../../js/tailwindcss-3.1.8.js"></script>
<link type="text/css" href="../../styles/public.css" rel="stylesheet" />
<style>
#container {
max-width: 865px;
background-image: url("./../abyss/background/abyss-bg-grad.png");
background-color: rgb(11, 23, 44);
}
.item-not-owned {
position: relative;
}
.item-not-owned::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 50%);
border-radius: 5px;
}
</style>
</head>
<body>
<div
class="mx-auto flex flex-col h-full bg-contain bg-no-repeat py-6"
id="container"
>
<div class="title text-2xl my-4 text-yellow-500 text-center">
深境螺旋 - 推荐配队
</div>
<div
class="flex flex-row px-6 py-1 my-1 text-neutral-100 bg-white bg-opacity-10 justify-evenly text-sm"
>
<div>UID {{ uid }}</div>
<div>版本 {{ version }}</div>
</div>
{% for team in teams %}
<div class="mx-auto flex flex-col px-6 py-1 text-black my-1">
<div class="text-center mr-auto text-yellow-500">
推荐配队 {{ loop.index }}
</div>
{% for lane in ["up", "down"] %}
<div class="flex my-2 space-x-4">
{% for i in team[lane] %}
<div
class="bg-neutral-200 flex-shrink-0 rounded-lg overflow-hidden {% if not i.hava %}item-not-owned{% endif %}"
>
<div
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
style="background-image: url('./../abyss/background/roleStarBg{{ i.star }}.png');"
>
<img src="{{ i.icon }}" alt="" />
</div>
<div class="text-center">{{ i.name }}</div>
</div>
{% endfor %}
<div>
<div class="text-neutral-300">
{{ lane == 'up' and '上' or '下' }}半
</div>
<div class="text-neutral-400 text-sm">
使用率 {{ team[lane + "_rate"] }}
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
<div class="mt-6 text-center p-1 text-neutral-400 text-xs">
数据来源:游创工坊
</div>
</div>
</body>
</html>