PaiGram/resources/genshin/weapon/example.html

86 lines
3.9 KiB
HTML
Raw Normal View History

2022-07-26 10:07:31 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>weapon</title>
<script src="https://cdn.tailwindcss.com/"></script>
<link type="text/css" href="./weapon.css" rel="stylesheet">
<style>
.material-star {
position: relative;
top: -5px;
width: 100%;
display: flex;
align-items: center;
}
</style>
2022-07-26 10:07:31 +00:00
</head>
<body>
<div class="container mx-auto px-6 py-6 max-w-lg" id="container">
<div class="base-weapon-info rounded-xl flex mb-4">
<div class="base-weapon-info-name flex-grow m-5 ml-2 text-4xl text-white">
<h1>测试</h1>
<div class="material-star mt-4" style="height: 40px;width: 20px;">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
2022-07-26 10:07:31 +00:00
</div>
<div class="base-weapon-info-type m-2 mr-8 flex-shrink h-16 w-16">
<img src="./../../img/example/256x256.png">
</div>
</div>
<div class="stat-progression-1 rounded-xl flex mb-4">
<div class="flex-grow m-2 text-white">
<div class="stat-progression-secondary-stat-value mt-2 text-4xl text-white">
<h1>66.2%</h1>
</div>
<div class="stat-progression-secondary-stat-name mt-2 text-1xl text-white">
<h2>暴击伤害</h2>
</div>
</div>
<div class="base-weapon-info-source mr-4 my-1 rounded-full h-24 w-24 flex-shrink">
<img class="base-weapon-info-source-img object-contain w-full h-full" src="./../../img/example/256x256.png">
</div>
</div>
<div class="stat-progression-2 rounded-xl flex mb-4">
<div class="flex-grow m-2 text-white">
<div class="stat-progression-level text-base font-bold text-white">
<h1>Lv.90</h1>
</div>
<div class="stat-progression-base-atk text-base text-white">
<h2>攻击力6098</h2>
</div>
</div>
</div>
<div class="ascension-materials rounded-xl mb-4">
<div class="flex">
<div class="ascension-materials-info m-2 rounded-full flex-shrink w-16 h-16">
<img class="base-weapon-info-source-img " src="./../../img/example/256x256.png">
</div>
<div class="ascension-materials-info m-2 rounded-full flex-shrink w-16 h-16">
<img class="base-weapon-info-source-img " src="./../../img/example/256x256.png">
</div>
<div class="ascension-materials-info m-2 rounded-full flex-shrink w-16 h-16">
<img class="base-weapon-info-source-img " src="./../../img/example/256x256.png">
</div>
</div>
</div>
<div class="special-ability rounded-xl flex mb-4">
<div class="special-ability-box flex-grow m-2 text-white">
<div class="special-ability-name text-base font-bold text-white">
<h1>测试</h1>
</div>
<div class="stat-progression-base-atk text-base text-white">
<samp>这是个测试描述这是个测试描述这是个测试描述这是个测试描述这是个测试描述这是个测试描述
这是个测试描述这是个测试描述这是个测试描述这是个测试描述这是个测试描述这是个测试描述</samp>
</div>
<div class="text-base opacity-70 mt-5">
<samp>这是个武器介绍这是个武器介绍这是个武器介绍这是个武器介绍这是个武器介绍这是个武器介绍
这是个武器介绍这是个武器介绍这是个武器介绍这是个武器介绍这是个武器介绍这是个武器介绍</samp>
</div>
2022-07-26 10:07:31 +00:00
</div>
</div>
</div>
</body>
</html>