MibooGram/resources/genshin/abyss/example.html
2022-07-26 18:07:31 +08:00

99 lines
4.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>abyss</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
#container {
background: url("./background/lookback-bg.png");
}
.character-icon {
width: 128px;
height: 128px;
}
.character-side-icon {
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<div class="mx-auto flex flex-col h-full bg-no-repeat bg-cover" id="container">
<div class="title text-2xl my-4 text-yellow-500 mx-auto">深境螺旋</div>
<div class="base-info flex flex-row px-20 py-1 my-1 text-white bg-white bg-opacity-10">
<div class="uid text-center mx-auto">UID 1414514</div>
<div class="text-center mx-auto">最深抵达 12-3</div>
<div class="text-center mx-auto">战斗次数 12</div>
<div class="text-center mx-auto">获得星级 36</div>
</div>
<div class="base-info flex flex-col px-20 py-1 text-black my-1">
<div class="text-center mr-auto text-yellow-500">出战次数</div>
<div class="mx-auto flex my-2">
<div class="bg-white rounded-lg mx-2">
<div class="character-icon rounded-lg bg-cover"
style="background: url('./background/roleStarBg4.png');background-size: cover;">
<img src="./../../img/example/256x256.png" alt=""></div>
<div class="text-center">12次</div>
</div>
<div class="bg-white rounded-lg mx-2">
<div class="character-icon rounded-lg bg-cover"
style="background: url('./background/roleStarBg4.png');background-size: cover;">
<img src="./../../img/example/256x256.png" alt=""></div>
<div class="text-center">12次</div>
</div>
<div class="bg-white rounded-lg mx-2">
<div class="character-icon rounded-lg bg-cover"
style="background: url('./background/roleStarBg5.png');background-size: cover;">
<img src="./../../img/example/256x256.png" alt=""></div>
<div class="text-center">12次</div>
</div>
<div class="bg-white rounded-lg mx-2">
<div class="character-icon rounded-lg bg-cover"
style="background: url('./background/roleStarBg5.png');background-size: cover;">
<img src="./../../img/example/256x256.png" alt=""></div>
<div class="text-center">12次</div>
</div>
</div>
</div>
<div class="flex flex-col my-1">
<div class="flex flex-col px-20 py-1 text-black my-1">
<div class="text-center mr-auto text-yellow-500">出战次数</div>
</div>
<div>
<div class="base-info flex flex-row px-20 py-1 my-1 text-white bg-black bg-opacity-10 ">
<div class="text-center flex flex-row flex-1 mr-6">
<div class="my-auto">最多击破数21</div>
<img class="character-side-icon ml-auto" src="./../../img/example/256x256.png" alt="">
</div>
<div class="text-center flex flex-row flex-1 mr-6">
<div class="my-auto">最强一击21</div>
<img class="character-side-icon ml-auto" src="./../../img/example/256x256.png" alt="">
</div>
</div>
<div class="base-info flex flex-row px-20 py-1 my-1 text-white">
<div class="text-center flex flex-row flex-1 mr-6">
<div class="my-auto">承受最多伤害21</div>
<img class="character-side-icon ml-auto" src="./../../img/example/256x256.png" alt="">
</div>
<div class="text-center flex flex-row flex-1 mr-6">
<div class="my-auto">元素爆发数21</div>
<img class="character-side-icon ml-auto" src="./../../img/example/256x256.png" alt="">
</div>
</div>
<div class="base-info flex flex-row px-20 py-1 my-1 text-white bg-black bg-opacity-10 ">
<div class="text-center flex flex-row flex-1 mr-6">
<div class="my-auto">元素战技释放次数21</div>
<img class="character-side-icon ml-auto" src="./../../img/example/256x256.png" alt="">
</div>
<div class="text-center flex flex-row flex-1 mr-6"></div>
</div>
</div>
</div>
<div class="my-2"></div>
</div>
</body>
</html>