mirror of
https://github.com/PaiGramTeam/MibooGram.git
synced 2024-12-03 12:23:48 +00:00
🎨 Refacor avatar list layout & syle
This commit is contained in:
CWorld
GitHub
parent
9cf58a25e2
commit
e25bd55e48
1
.gitignore
vendored
1
.gitignore
vendored
@ -154,6 +154,7 @@ paigram.session-journal
|
||||
### ide ###
|
||||
.idea/
|
||||
.vscode/
|
||||
*.code-workspace
|
||||
|
||||
### Docker ###
|
||||
docker-compose.yml
|
||||
|
||||
@ -164,7 +164,6 @@ class AvatarListPlugin(Plugin):
|
||||
_render_data,
|
||||
viewport={"width": 1040, "height": 500},
|
||||
full_page=True,
|
||||
query_selector=".container",
|
||||
file_type=FileType.PHOTO,
|
||||
ttl=30 * 24 * 60 * 60,
|
||||
)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
@ -1,59 +1,57 @@
|
||||
@font-face {
|
||||
font-family: "seguiemj";
|
||||
src: url("../fonts/seguiemj.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: "seguiemj";
|
||||
src: url("../fonts/seguiemj.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-35W.ttf") format("truetype");
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-35W.ttf") format("truetype");
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-45W.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-45W.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-55W.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-55W.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-65W.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-65W.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-75W.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-75W.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-85W.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-family: "HYWH";
|
||||
src: url("../fonts/HYWenHei-85W.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Number";
|
||||
src: url("../fonts/tttgbnumber.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: "inpin hongmengti";
|
||||
src: url(../fonts/ZZZ_Default.otf);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Number", "HYWH", "seguiemj", emoji, serif, system-ui;
|
||||
font-family: "inpin hongmengti", "HYWH", "seguiemj", emoji, serif, system-ui;
|
||||
}
|
||||
|
||||
@ -1,297 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" gt-area="sea" gt-platform="pc" gt-device="undefined" style="--gpx: 1px;" mi18n-lang="zh-cn">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<html
|
||||
lang="en"
|
||||
gt-area="sea"
|
||||
gt-platform="pc"
|
||||
gt-device="undefined"
|
||||
style="--gpx: 1px"
|
||||
mi18n-lang="zh-cn"
|
||||
>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>绝区零战绩</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="preconnect" href="https://webstatic.hoyoverse.com/">
|
||||
<link rel="stylesheet" href="./css/font.css">
|
||||
<link rel="stylesheet" href="./css/swiper.min.css">
|
||||
<meta name="viewport"
|
||||
content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,viewport-fit=cover">
|
||||
<meta name="description" content="">
|
||||
<meta name="x-op-env" content="v1.0.14">
|
||||
<link href="./css/vendors_f08f35cc.css" rel="stylesheet">
|
||||
<link href="./css/pc_6db636c8.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="./css/pc_zzz_bangbooo_all~pc_zzz_challenge_all~pc_zzz_roles_all~pc_zzz_roles_detail_7c5ef2b9.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/pc_zzz_roles_detail_8479dbdd.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div data-v-5e800caa="" class="pc-root-layout" id="1081">
|
||||
<div data-v-5e800caa="" class="homeBg_3YryAw-I pc-layout-bg"></div>
|
||||
<div data-v-5e800caa="" class="pc-root-layout__container">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<link rel="preconnect" href="https://webstatic.hoyoverse.com/" />
|
||||
<link rel="stylesheet" href="../../styles/public.css" />
|
||||
<link rel="stylesheet" href="./css/swiper.min.css" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,viewport-fit=cover"
|
||||
/>
|
||||
<meta name="description" content="" />
|
||||
<meta name="x-op-env" content="v1.0.14" />
|
||||
<link href="./css/vendors_f08f35cc.css" rel="stylesheet" />
|
||||
<link href="./css/pc_6db636c8.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="./css/pc_zzz_bangbooo_all~pc_zzz_challenge_all~pc_zzz_roles_all~pc_zzz_roles_detail_7c5ef2b9.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="./css/pc_zzz_roles_detail_8479dbdd.css"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="./css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div data-v-5e800caa="" class="pc-root-layout" id="1081">
|
||||
<div data-v-5e800caa="" class="homeBg_3YryAw-I pc-layout-bg"></div>
|
||||
<div data-v-5e800caa="" class="pc-root-layout__container">
|
||||
<div data-v-5e800caa="" class="shareContainer_2ZR-xeyd">
|
||||
<div class="share-decoIcon tw-absolute tw-right-10 tw-top-10 tw-z-[1] tw-h-[50px] tw-w-[120px]"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<div class="shareBg_1ijiCPI_" style="display: none;"></div>
|
||||
<div class="share-header" style="display: none;"></div>
|
||||
<div class="sharePage_1Rb3Oz8D share-page"> <!---->
|
||||
<div data-v-5e800caa="" class="pc-root-layout__content">
|
||||
<div data-v-7c666a6a="" data-v-5e800caa="" class="role-detail detailPage_1CFihQoV" uid=""
|
||||
switches="[object Object],[object Object],[object Object]">
|
||||
<div class="pc-detail-page-bg detailPageBg_327tx5T6"
|
||||
style="background-image: url('https://act.hoyolab.com/app/mihoyo-zzz-game-record/images/page-bg-pc.9bd180ff.png'); background-color: rgb(1, 1, 1);"></div>
|
||||
<div class="header_1FGsRcEF">
|
||||
<div class="title_rlJZtEfB">代理人详情 - UID {{ uid }}</div>
|
||||
</div>
|
||||
<div data-v-7c666a6a="" class="role-detail-container"
|
||||
style="background: linear-gradient({{ color }} 18%, rgb(1, 1, 1) 42%);">
|
||||
<div data-v-7c666a6a="" class="infos-container">
|
||||
<div data-v-7c666a6a="" class="infos-main-content">
|
||||
<div data-v-7c666a6a="" class="role-infos">
|
||||
<div data-v-7c666a6a="" class="role-name-bg"
|
||||
style="background-color: {{ color }};">
|
||||
</div>
|
||||
<img data-v-7c666a6a="" src="https://act-webstatic.hoyoverse.com/game_record/zzz/role_vertical_painting/role_vertical_painting_{{ char.id }}.png"
|
||||
alt="" class="role-avatar">
|
||||
<div data-v-7c666a6a="" class="role-base-info">
|
||||
<img data-v-7c666a6a="" src="../../img/rarity/{{ char.rarity }}.png"
|
||||
alt="" class="rarity-icon">
|
||||
<div data-v-7c666a6a="" class="base-info">
|
||||
<div data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a=""><p data-v-7c666a6a="">{{ char.name }}</p>
|
||||
<span data-v-7c666a6a="">Lv40</span></div>
|
||||
<div data-v-7c666a6a="">
|
||||
<img data-v-7c666a6a="" src="../../img/attribute/{{ char.element_type }}.png"
|
||||
alt="">
|
||||
<img data-v-7c666a6a="" src="../../img/profession/{{ char.avatar_profession }}.png"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-7342b717="" data-v-7c666a6a="" class="rank-list"
|
||||
style="width: 224px; height: 24px;">
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80"
|
||||
style="width: 24px; height: 24px; color: rgb(62, 62, 62);">
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M30,27.28l-1.72,7.87H34L29.12,57.31h15l7.56-34.62H40.19Q37,26.68,30,27.28Z"></path>
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z"></path>
|
||||
</svg>
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80"
|
||||
style="width: 24px; height: 24px; color: rgb(62, 62, 62);">
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M51.92,22.69H36.82q-9.18,0-10.61,6.49L25,34.72H40l.5-2.07c.36-1.45,1.08-2.17,2.16-2.17a1.33,1.33,0,0,1,1.31.65,4.82,4.82,0,0,1,.09.65,4,4,0,0,1-2,3.76L21.68,50.08l-1.59,7.23H53.57l1.69-7.79H42.57L54.71,41a9.56,9.56,0,0,0,3.8-6.19l1.19-5.63a6.88,6.88,0,0,0,.2-1.94Q59.56,22.7,51.92,22.69Z"></path>
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z"></path>
|
||||
</svg>
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80"
|
||||
style="width: 24px; height: 24px; color: rgb(62, 62, 62);">
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M51.29,22.69h-15q-9.18,0-10.54,6.45l-.87,4.11H39.77l.28-1c.39-1.33,1.09-1.94,2.11-1.82.66.09,1.05.3,1.17.65a1.74,1.74,0,0,1,.23.73,4.27,4.27,0,0,1,0,.83c-.35,1.52-1.43,2.29-3.23,2.29H37.34l-1.69,7.79h3.24c1.26,0,1.93.47,2,1.41a3.71,3.71,0,0,1-.1.91l-.48,2.06C40,48.77,39.18,49.58,38,49.52c-.77,0-1.19-.52-1.27-1.46a4,4,0,0,1,0-.9L37.3,45h-15L21,51a6.51,6.51,0,0,0-.16,2q.33,4.37,7.89,4.37h15q9.18,0,10.72-7.28l.7-3.29a13.56,13.56,0,0,0,.37-3.43,5.45,5.45,0,0,0-.58-1.94q-.82-1.74-4-2.47,6.3-1.73,7.41-6.83L59,29.13a6.28,6.28,0,0,0,.18-1.86Q58.84,22.7,51.29,22.69Z"></path>
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z"></path>
|
||||
</svg>
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80"
|
||||
style="width: 24px; height: 24px; color: rgb(62, 62, 62);">
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M57.26,22.69H34.81L20.14,43.37l-1.56,7.1h17.6l-1.51,6.84h15l1.51-6.84h5l1.75-7.87h-5ZM37.86,42.6H33.29L40,33Z"></path>
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z"></path>
|
||||
</svg>
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80"
|
||||
style="width: 24px; height: 24px; color: rgb(62, 62, 62);">
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M23,42.94H38.11c.59-1.09,1.3-1.64,2.12-1.64a1.53,1.53,0,0,1,1.27.52,13.89,13.89,0,0,1,0,1.9L40.78,47c-.38,1.73-1.16,2.57-2.34,2.51-.92,0-1.34-.55-1.28-1.56.08-.43.15-.84.2-1.23s.11-.76.18-1.11H22.47L21.26,50.9a6.49,6.49,0,0,0-.17,1.91q.35,4.5,8,4.5H44.21Q53.48,57.31,55,50l2-9.3a9.25,9.25,0,0,0,.26-2.64q-.41-5.28-8.32-5.28a25.37,25.37,0,0,0-9.13,1.87l.91-4.16H59.25L61,22.69H27.41Z"></path>
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z"></path>
|
||||
</svg>
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80"
|
||||
style="width: 24px; height: 24px; color: rgb(62, 62, 62);">
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M51.29,22.69h-15q-9.13,0-10.54,6.45L21,51a7.15,7.15,0,0,0-.17,1.9q.35,4.45,7.9,4.46h15q9.21,0,10.76-7.27L56,43a9.1,9.1,0,0,0,.26-2.68q-.41-5.12-8.23-5.11a23.11,23.11,0,0,0-9.1,1.86l.86-3.82a6.46,6.46,0,0,1,.82-2.15,2,2,0,0,1,1.46-.65,1.29,1.29,0,0,1,1.25.64,1.08,1.08,0,0,1,.26.64,2.81,2.81,0,0,1-.12.81l-.09.59H58.11l.91-4a6.28,6.28,0,0,0,.18-1.86Q58.84,22.69,51.29,22.69Zm-11.9,20.6a1.4,1.4,0,0,1,1.27.56.91.91,0,0,1,.15.52,4,4,0,0,1-.13,1.17l-.39,1.77A2.75,2.75,0,0,1,39.47,49a2.12,2.12,0,0,1-1.47.56A1.24,1.24,0,0,1,36.8,49a3,3,0,0,1-.16-.7,4,4,0,0,1,.11-.95l.36-1.69C37.43,44.07,38.19,43.29,39.39,43.29Z"></path>
|
||||
<path data-v-7342b717="" fill="currentColor"
|
||||
d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<img data-v-7c666a6a=""
|
||||
src="{{ char.group_icon_path }}"
|
||||
alt="" class="group-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul data-v-7c666a6a="" class="property-info">
|
||||
{% for prop in props %}
|
||||
<li data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a="">
|
||||
<img data-v-7c666a6a="" src="./images/prop-{{ prop.icon }}-icon.png"
|
||||
alt=""> <span data-v-7c666a6a="">{{ prop.property_name }}</span>
|
||||
</div>
|
||||
<div data-v-7c666a6a="">
|
||||
{% if prop.add != '' %}
|
||||
<span data-v-7c666a6a="" class="base-add-prop">
|
||||
<span data-v-7c666a6a="">{{ prop.base }}</span>
|
||||
<span data-v-7c666a6a="">+{{ prop.add }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span data-v-7c666a6a="" class="final-prop">{{ prop.final }}</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div data-v-7c666a6a="" class="equipment-info"><h2 data-v-7c666a6a=""><span
|
||||
data-v-7c666a6a="">装备</span> <img data-v-7c666a6a=""
|
||||
src="./images/title-icon.0b3eeb69.png"
|
||||
alt=""></h2>
|
||||
<div data-v-7c666a6a="" class="suit-effects"><h3 data-v-7c666a6a="">
|
||||
套装激活效果</h3>
|
||||
{% set equip_suits = char.equip_suits %}
|
||||
{% if equip_suits %}
|
||||
<ul data-v-7c666a6a="">
|
||||
{% for suit in equip_suits %}
|
||||
<li data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a="">
|
||||
<p data-v-7c666a6a="">{{ suit.name }} [{{ suit.own }}/4]</p>
|
||||
<p data-v-7c666a6a="">
|
||||
{% if suit.own > 3 %}
|
||||
{{ suit.desc2_html | safe }}
|
||||
{% else %}
|
||||
{% if suit.own > 1 %}
|
||||
{{ suit.desc1_html | safe }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</p> <img data-v-7c666a6a=""
|
||||
src="./images/weapon-suit-icon.f75f0d28.png"
|
||||
alt="">
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<ul data-v-7c666a6a="" class="empty-content">
|
||||
<li data-v-7c666a6a=""><p data-v-7c666a6a="">暂无套装激活效果</p></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div data-v-7c666a6a="" class="main-content">
|
||||
{% set weapon = char.weapon %}
|
||||
{% if weapon %}
|
||||
<div data-v-7c666a6a="" class="weapon-info">
|
||||
<img data-v-7c666a6a="" src="./images/weapon-bg-{{ weapon.rarity }}.png" alt="" class="bg">
|
||||
<img
|
||||
data-v-7c666a6a=""
|
||||
src="{{ weapon.icon }}" alt=""
|
||||
class="icon">
|
||||
{% if weapon.star > 0 %}
|
||||
<img data-v-7c666a6a="" src="./images/role-star-{{ weapon.star }}.png"
|
||||
class="rank">
|
||||
{% endif %}
|
||||
<span data-v-7c666a6a="" class="level">Lv{{ weapon.level }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- 驱动盘-->
|
||||
{% set equips = char.equip_map %}
|
||||
{% for i in range(1, 7) %}
|
||||
<div data-v-7c666a6a="" class="equip-info equip-info-{{ loop.index }}">
|
||||
{% if loop.index < 4 %}
|
||||
{% set side = 'left' %}
|
||||
{% else %}
|
||||
{% set side = 'right' %}
|
||||
{% endif %}
|
||||
{% set equip = equips[loop.index | string] %}
|
||||
{% if equip %}
|
||||
<div data-v-7c666a6a="">
|
||||
<img data-v-7c666a6a="" src="{{ equip.icon }}" alt="" class="icon">
|
||||
<span data-v-7c666a6a="" class="level">Lv{{ equip.level }}</span>
|
||||
</div>
|
||||
<img data-v-7c666a6a=""
|
||||
src="./images/equip-bg-{{ side }}-{{ equip.rarity}}.png" alt=""
|
||||
class="bg">
|
||||
{% else %}
|
||||
<div data-v-7c666a6a="">
|
||||
<img data-v-7c666a6a="" src="./images/equip-disable-bg.png" alt="" class="icon">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% set skills = char.skills %}
|
||||
<div data-v-7c666a6a="" class="skill-info"><h2 data-v-7c666a6a=""><span
|
||||
data-v-7c666a6a="">技能</span> <img data-v-7c666a6a=""
|
||||
src="./images/title-icon.0b3eeb69.png"
|
||||
alt=""></h2>
|
||||
<ul data-v-7c666a6a="">
|
||||
<li data-v-7c666a6a="" class="skill-item">
|
||||
<div data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a=""><img data-v-7c666a6a=""
|
||||
src="./images/skill-icon-0.0d9692b6.png"
|
||||
alt="">
|
||||
<p data-v-7c666a6a=""><span data-v-7c666a6a="">{{ skills[0].level_str }}</span> <span
|
||||
data-v-7c666a6a="">LEVEL</span></p>
|
||||
<h2 data-v-7c666a6a="">普通攻击</h2>
|
||||
<h3 data-v-7c666a6a="">普通攻击</h3></div>
|
||||
</div>
|
||||
</li>
|
||||
<li data-v-7c666a6a="" class="skill-item">
|
||||
<div data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a=""><img data-v-7c666a6a=""
|
||||
src="./images/skill-icon-2.d863591b.png"
|
||||
alt="">
|
||||
<p data-v-7c666a6a=""><span data-v-7c666a6a="">{{ skills[2].level_str }}</span> <span
|
||||
data-v-7c666a6a="">LEVEL</span></p>
|
||||
<h2 data-v-7c666a6a="">闪避</h2>
|
||||
<h3 data-v-7c666a6a="">闪避</h3></div>
|
||||
</div>
|
||||
</li>
|
||||
<li data-v-7c666a6a="" class="skill-item">
|
||||
<div data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a=""><img data-v-7c666a6a=""
|
||||
src="./images/skill-icon-6.3fc55b66.png"
|
||||
alt="">
|
||||
<p data-v-7c666a6a=""><span data-v-7c666a6a="">{{ skills[5].level_str }}</span> <span
|
||||
data-v-7c666a6a="">LEVEL</span></p>
|
||||
<h2 data-v-7c666a6a="">支援技</h2>
|
||||
<h3 data-v-7c666a6a="">支援技</h3></div>
|
||||
</div>
|
||||
</li>
|
||||
<li data-v-7c666a6a="" class="skill-item">
|
||||
<div data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a=""><img data-v-7c666a6a=""
|
||||
src="./images/skill-icon-1.e2f84ffb.png"
|
||||
alt="">
|
||||
<p data-v-7c666a6a=""><span data-v-7c666a6a="">{{ skills[1].level_str }}</span> <span
|
||||
data-v-7c666a6a="">LEVEL</span></p>
|
||||
<h2 data-v-7c666a6a="">特殊技</h2>
|
||||
<h3 data-v-7c666a6a="">特殊技</h3></div>
|
||||
</div>
|
||||
</li>
|
||||
<li data-v-7c666a6a="" class="skill-item">
|
||||
<div data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a=""><img data-v-7c666a6a=""
|
||||
src="./images/skill-icon-3.afdb8abe.png"
|
||||
alt="">
|
||||
<p data-v-7c666a6a=""><span data-v-7c666a6a="">{{ skills[3].level_str }}</span> <span
|
||||
data-v-7c666a6a="">LEVEL</span></p>
|
||||
<h2 data-v-7c666a6a="">连携技</h2>
|
||||
<h3 data-v-7c666a6a="">连携技</h3></div>
|
||||
</div>
|
||||
</li>
|
||||
<li data-v-7c666a6a="" class="skill-item">
|
||||
<div data-v-7c666a6a="">
|
||||
<div data-v-7c666a6a=""><img data-v-7c666a6a=""
|
||||
src="./images/skill-icon-5.3d486da1.png"
|
||||
alt="">
|
||||
<p data-v-7c666a6a=""><span data-v-7c666a6a="">{{ skills[4].level_str }}</span> <span
|
||||
data-v-7c666a6a="">LEVEL</span></p>
|
||||
<h2 data-v-7c666a6a="">核心技</h2>
|
||||
<h3 data-v-7c666a6a="">核心技</h3></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!----> <!----> <!----> <!---->
|
||||
<div data-modal-id="__gt-popup__" data-modal-count="0" data-modal-visible-count="0"
|
||||
class="gt-modal gt-popup-root" style="z-index: 100;"></div>
|
||||
</div>
|
||||
<div
|
||||
class="share-decoIcon tw-absolute tw-right-10 tw-top-10 tw-z-[1] tw-h-[50px] tw-w-[120px]"
|
||||
style="display: none"
|
||||
></div>
|
||||
<div class="shareBg_1ijiCPI_" style="display: none"></div>
|
||||
<div class="share-header" style="display: none"></div>
|
||||
<div class="sharePage_1Rb3Oz8D share-page">
|
||||
<!---->
|
||||
<div data-v-5e800caa="" class="pc-root-layout__content">
|
||||
<div
|
||||
data-v-5e800caa=""
|
||||
class="role-detail detailPage_1CFihQoV"
|
||||
uid=""
|
||||
switches="[object Object],[object Object],[object Object]"
|
||||
>
|
||||
<div
|
||||
class="pc-detail-page-bg detailPageBg_327tx5T6"
|
||||
style="
|
||||
background-image: url('https://act.hoyolab.com/app/mihoyo-zzz-game-record/images/page-bg-pc.9bd180ff.png');
|
||||
background-color: rgb(1, 1, 1);
|
||||
"
|
||||
></div>
|
||||
<div class="header_1FGsRcEF">
|
||||
<div class="title_rlJZtEfB">代理人详情 - UID {{ uid }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="role-detail-container"
|
||||
style="background: linear-gradient({{ color }} 18%, rgb(1, 1, 1) 42%);"
|
||||
>
|
||||
<div class="infos-container">
|
||||
<div class="infos-main-content">
|
||||
<div class="role-infos">
|
||||
<div
|
||||
class="role-name-bg"
|
||||
style="background-color: {{ color }};"
|
||||
></div>
|
||||
<img
|
||||
src="https://act-webstatic.hoyoverse.com/game_record/zzz/role_vertical_painting/role_vertical_painting_{{ char.id }}.png"
|
||||
alt=""
|
||||
class="role-avatar"
|
||||
/>
|
||||
<div class="role-base-info">
|
||||
<img
|
||||
src="../../img/rarity/{{ char.rarity }}.png"
|
||||
alt=""
|
||||
class="rarity-icon"
|
||||
/>
|
||||
<div class="base-info">
|
||||
<div>
|
||||
<div>
|
||||
<p>{{ char.name }}</p>
|
||||
<span>Lv40</span>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="../../img/attribute/{{ char.element_type }}.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../../img/profession/{{ char.avatar_profession }}.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-v-7342b717=""
|
||||
class="rank-list"
|
||||
style="width: 224px; height: 24px"
|
||||
>
|
||||
<!-- prettier-ignore -->
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80" style=" width: 24px; height: 24px; color: rgb(62, 62, 62); " > <path data-v-7342b717="" fill="currentColor" d="M30,27.28l-1.72,7.87H34L29.12,57.31h15l7.56-34.62H40.19Q37,26.68,30,27.28Z" ></path> <path data-v-7342b717="" fill="currentColor" d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z" ></path> </svg>
|
||||
<!-- prettier-ignore -->
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80" style=" width: 24px; height: 24px; color: rgb(62, 62, 62); " > <path data-v-7342b717="" fill="currentColor" d="M51.92,22.69H36.82q-9.18,0-10.61,6.49L25,34.72H40l.5-2.07c.36-1.45,1.08-2.17,2.16-2.17a1.33,1.33,0,0,1,1.31.65,4.82,4.82,0,0,1,.09.65,4,4,0,0,1-2,3.76L21.68,50.08l-1.59,7.23H53.57l1.69-7.79H42.57L54.71,41a9.56,9.56,0,0,0,3.8-6.19l1.19-5.63a6.88,6.88,0,0,0,.2-1.94Q59.56,22.7,51.92,22.69Z" ></path> <path data-v-7342b717="" fill="currentColor" d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z" ></path> </svg>
|
||||
<!-- prettier-ignore -->
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80" style=" width: 24px; height: 24px; color: rgb(62, 62, 62); " > <path data-v-7342b717="" fill="currentColor" d="M51.29,22.69h-15q-9.18,0-10.54,6.45l-.87,4.11H39.77l.28-1c.39-1.33,1.09-1.94,2.11-1.82.66.09,1.05.3,1.17.65a1.74,1.74,0,0,1,.23.73,4.27,4.27,0,0,1,0,.83c-.35,1.52-1.43,2.29-3.23,2.29H37.34l-1.69,7.79h3.24c1.26,0,1.93.47,2,1.41a3.71,3.71,0,0,1-.1.91l-.48,2.06C40,48.77,39.18,49.58,38,49.52c-.77,0-1.19-.52-1.27-1.46a4,4,0,0,1,0-.9L37.3,45h-15L21,51a6.51,6.51,0,0,0-.16,2q.33,4.37,7.89,4.37h15q9.18,0,10.72-7.28l.7-3.29a13.56,13.56,0,0,0,.37-3.43,5.45,5.45,0,0,0-.58-1.94q-.82-1.74-4-2.47,6.3-1.73,7.41-6.83L59,29.13a6.28,6.28,0,0,0,.18-1.86Q58.84,22.7,51.29,22.69Z" ></path> <path data-v-7342b717="" fill="currentColor" d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z" ></path> </svg>
|
||||
<!-- prettier-ignore -->
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80" style=" width: 24px; height: 24px; color: rgb(62, 62, 62); " > <path data-v-7342b717="" fill="currentColor" d="M57.26,22.69H34.81L20.14,43.37l-1.56,7.1h17.6l-1.51,6.84h15l1.51-6.84h5l1.75-7.87h-5ZM37.86,42.6H33.29L40,33Z" ></path> <path data-v-7342b717="" fill="currentColor" d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z" ></path> </svg>
|
||||
<!-- prettier-ignore -->
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80" style=" width: 24px; height: 24px; color: rgb(62, 62, 62); " > <path data-v-7342b717="" fill="currentColor" d="M23,42.94H38.11c.59-1.09,1.3-1.64,2.12-1.64a1.53,1.53,0,0,1,1.27.52,13.89,13.89,0,0,1,0,1.9L40.78,47c-.38,1.73-1.16,2.57-2.34,2.51-.92,0-1.34-.55-1.28-1.56.08-.43.15-.84.2-1.23s.11-.76.18-1.11H22.47L21.26,50.9a6.49,6.49,0,0,0-.17,1.91q.35,4.5,8,4.5H44.21Q53.48,57.31,55,50l2-9.3a9.25,9.25,0,0,0,.26-2.64q-.41-5.28-8.32-5.28a25.37,25.37,0,0,0-9.13,1.87l.91-4.16H59.25L61,22.69H27.41Z" ></path> <path data-v-7342b717="" fill="currentColor" d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z" ></path> </svg>
|
||||
<!-- prettier-ignore -->
|
||||
<svg data-v-7342b717="" viewBox="0 0 80 80" style=" width: 24px; height: 24px; color: rgb(62, 62, 62); " > <path data-v-7342b717="" fill="currentColor" d="M51.29,22.69h-15q-9.13,0-10.54,6.45L21,51a7.15,7.15,0,0,0-.17,1.9q.35,4.45,7.9,4.46h15q9.21,0,10.76-7.27L56,43a9.1,9.1,0,0,0,.26-2.68q-.41-5.12-8.23-5.11a23.11,23.11,0,0,0-9.1,1.86l.86-3.82a6.46,6.46,0,0,1,.82-2.15,2,2,0,0,1,1.46-.65,1.29,1.29,0,0,1,1.25.64,1.08,1.08,0,0,1,.26.64,2.81,2.81,0,0,1-.12.81l-.09.59H58.11l.91-4a6.28,6.28,0,0,0,.18-1.86Q58.84,22.69,51.29,22.69Zm-11.9,20.6a1.4,1.4,0,0,1,1.27.56.91.91,0,0,1,.15.52,4,4,0,0,1-.13,1.17l-.39,1.77A2.75,2.75,0,0,1,39.47,49a2.12,2.12,0,0,1-1.47.56A1.24,1.24,0,0,1,36.8,49a3,3,0,0,1-.16-.7,4,4,0,0,1,.11-.95l.36-1.69C37.43,44.07,38.19,43.29,39.39,43.29Z" ></path> <path data-v-7342b717="" fill="currentColor" d="M40,0A40,40,0,1,0,80,40,40,40,0,0,0,40,0Zm0,71.91A31.91,31.91,0,1,1,71.91,40,32,32,0,0,1,40,71.91Z" ></path> </svg>
|
||||
</div>
|
||||
<img
|
||||
src="{{ char.group_icon_path }}"
|
||||
alt=""
|
||||
class="group-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="property-info">
|
||||
{% for prop in props %}
|
||||
<li>
|
||||
<div>
|
||||
<img
|
||||
src="./images/prop-{{ prop.icon }}-icon.png"
|
||||
alt=""
|
||||
/>
|
||||
<span>{{ prop.property_name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{% if prop.add != '' %}
|
||||
<span class="base-add-prop">
|
||||
<span>{{ prop.base }}</span>
|
||||
<span>+{{ prop.add }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="final-prop">{{ prop.final }}</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="equipment-info">
|
||||
<h2>
|
||||
<span>装备</span>
|
||||
<img src="./images/title-icon.0b3eeb69.png" alt="" />
|
||||
</h2>
|
||||
<div class="suit-effects">
|
||||
<h3>套装激活效果</h3>
|
||||
{% set equip_suits = char.equip_suits %} {% if
|
||||
equip_suits %}
|
||||
<ul>
|
||||
{% for suit in equip_suits %}
|
||||
<li>
|
||||
<div>
|
||||
<p>{{ suit.name }} [{{ suit.own }}/4]</p>
|
||||
<p>
|
||||
{% if suit.own > 3 %} {{ suit.desc2_html | safe
|
||||
}} {% else %} {% if suit.own > 1 %} {{
|
||||
suit.desc1_html | safe }} {% endif %} {% endif
|
||||
%}
|
||||
</p>
|
||||
<img
|
||||
src="./images/weapon-suit-icon.f75f0d28.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<ul class="empty-content">
|
||||
<li><p>暂无套装激活效果</p></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="main-content">
|
||||
{% set weapon = char.weapon %} {% if weapon %}
|
||||
<div class="weapon-info">
|
||||
<img
|
||||
src="./images/weapon-bg-{{ weapon.rarity }}.png"
|
||||
alt=""
|
||||
class="bg"
|
||||
/>
|
||||
<img src="{{ weapon.icon }}" alt="" class="icon" />
|
||||
{% if weapon.star > 0 %}
|
||||
<img
|
||||
src="./images/role-star-{{ weapon.star }}.png"
|
||||
class="rank"
|
||||
/>
|
||||
{% endif %}
|
||||
<span class="level">Lv{{ weapon.level }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- 驱动盘-->
|
||||
{% set equips = char.equip_map %} {% for i in range(1,
|
||||
7) %}
|
||||
<div class="equip-info equip-info-{{ loop.index }}">
|
||||
{% if loop.index < 4 %} {% set side = 'left' %} {%
|
||||
else %} {% set side = 'right' %} {% endif %} {% set
|
||||
equip = equips[loop.index | string] %} {% if equip %}
|
||||
<div>
|
||||
<img src="{{ equip.icon }}" alt="" class="icon" />
|
||||
<span class="level">Lv{{ equip.level }}</span>
|
||||
</div>
|
||||
<img
|
||||
src="./images/equip-bg-{{ side }}-{{ equip.rarity}}.png"
|
||||
alt=""
|
||||
class="bg"
|
||||
/>
|
||||
{% else %}
|
||||
<div>
|
||||
<img
|
||||
src="./images/equip-disable-bg.png"
|
||||
alt=""
|
||||
class="icon"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% set skills = char.skills %}
|
||||
<div class="skill-info">
|
||||
<h2>
|
||||
<span>技能</span>
|
||||
<img src="./images/title-icon.0b3eeb69.png" alt="" />
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="skill-item">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="./images/skill-icon-0.0d9692b6.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ skills[0].level_str }}</span>
|
||||
<span>LEVEL</span>
|
||||
</p>
|
||||
<h2>普通攻击</h2>
|
||||
<h3>普通攻击</h3>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="skill-item">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="./images/skill-icon-2.d863591b.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ skills[2].level_str }}</span>
|
||||
<span>LEVEL</span>
|
||||
</p>
|
||||
<h2>闪避</h2>
|
||||
<h3>闪避</h3>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="skill-item">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="./images/skill-icon-6.3fc55b66.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ skills[5].level_str }}</span>
|
||||
<span>LEVEL</span>
|
||||
</p>
|
||||
<h2>支援技</h2>
|
||||
<h3>支援技</h3>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="skill-item">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="./images/skill-icon-1.e2f84ffb.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ skills[1].level_str }}</span>
|
||||
<span>LEVEL</span>
|
||||
</p>
|
||||
<h2>特殊技</h2>
|
||||
<h3>特殊技</h3>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="skill-item">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="./images/skill-icon-3.afdb8abe.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ skills[3].level_str }}</span>
|
||||
<span>LEVEL</span>
|
||||
</p>
|
||||
<h2>连携技</h2>
|
||||
<h3>连携技</h3>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="skill-item">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="./images/skill-icon-5.3d486da1.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ skills[4].level_str }}</span>
|
||||
<span>LEVEL</span>
|
||||
</p>
|
||||
<h2>核心技</h2>
|
||||
<h3>核心技</h3>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<div
|
||||
data-modal-id="__gt-popup__"
|
||||
data-modal-count="0"
|
||||
data-modal-visible-count="0"
|
||||
class="gt-modal gt-popup-root"
|
||||
style="z-index: 100"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,130 +6,210 @@
|
||||
<link type="text/css" href="./style.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../../styles/public.css" rel="stylesheet" />
|
||||
<script src="../../js/tailwindcss-3.4.4.js"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#febb2e",
|
||||
dark: "#1a1c1b",
|
||||
card: "#252525",
|
||||
light: "#ffffff",
|
||||
muted: "#858585",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container flex flex-col justify-center p-6">
|
||||
<div
|
||||
class="header rounded-xl p-2 mb-6"
|
||||
style='background-image: url("{{ background }}") '
|
||||
>
|
||||
<body class="bg-black flex flex-col justify-center p-4 gap-y-4">
|
||||
<div
|
||||
class="header out-shadow rounded-2xl px-6 py-4 flex items-center gap-x-4 border-[6px] border-card"
|
||||
style='background-image: url("{{ background }}") '
|
||||
>
|
||||
<img
|
||||
class="size-20 rounded-full mr-4 border-4 border-black"
|
||||
src="{{ avatar }}"
|
||||
alt="Avatar"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<div class="uid text-light text-2xl">UID: {{ uid }}</div>
|
||||
</div>
|
||||
<div class="z-10">
|
||||
<img class="size-16" src="../../img/logo.png" alt="logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content grid grid-cols-2 gap-4 rounded-xl">
|
||||
{% for avatar_data in avatar_datas %}
|
||||
<div class="flex out-shadow bg-card p-3 rounded-2xl items-center gap-x-3">
|
||||
<!-- <td class="text-right {{ row_bg }}">
|
||||
{{ start_id + loop.index }}
|
||||
</td> -->
|
||||
<!-- role -->
|
||||
<div
|
||||
class="frame rounded-lg border-solid border-2 bg-contain p-4 flex items-center"
|
||||
class="role relative overflow-hidden p-1 border-4 border-black rounded-xl bg-black {% if avatar_data.rarity == 5 %}gold{% endif %}"
|
||||
>
|
||||
<div
|
||||
class="rank-container absolute top-0 left-0 z-10 p-1 bg-black text-light rounded-br-lg"
|
||||
>
|
||||
{% set rarity = 'S' if avatar_data.rarity == 5 else 'A' %}
|
||||
<img class="size-4" src="../../img/rarity/{{ rarity }}.png" />
|
||||
<!-- <span class="rank font-bold">
|
||||
{% if avatar_data.rarity == 5 %}S{% else %}A{% endif %}
|
||||
</span> -->
|
||||
</div>
|
||||
<img
|
||||
class="w-28 h-28 rounded-full mr-4"
|
||||
src="{{ avatar }}"
|
||||
alt="Avatar"
|
||||
class="size-[4.7rem] bg-card rounded"
|
||||
src="{{ avatar_data.icon }}"
|
||||
/>
|
||||
<div>
|
||||
<div class="uid text-xl italic px-2">UID: {{ uid }}</div>
|
||||
</div>
|
||||
|
||||
<!-- info -->
|
||||
<div
|
||||
class="info in-shadow flex-1 relative flex flex-row justify-between bg-black text-muted px-3 py-3 rounded-xl gap-x-3"
|
||||
>
|
||||
<div class="basic flex flex-col items-start gap-y-2 min-w-[3.7rem]">
|
||||
<span class="name text-xl text-light">{{ avatar_data.name }}</span>
|
||||
|
||||
<div>
|
||||
<small
|
||||
class="level text-light font-sans font-bold bg-[#686868] px-2 py-1 rounded"
|
||||
>Lv.{{ avatar_data.level }}</small
|
||||
>
|
||||
<!-- constellation -->
|
||||
{% set constellation = avatar_data.eidolon %} {% set class_str =
|
||||
'' %} {% if constellation != 0 %} {% set color = ['green', 'cyan',
|
||||
'blue', 'purple', 'pink', 'red'][constellation - 1] %} {% set
|
||||
class_str = "color " ~ color %} {% endif %}
|
||||
<span class="number {{ class_str }} mx-1"
|
||||
>{{ constellation }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider w-2">
|
||||
<div
|
||||
class="absolute top-0 h-full w-2 bg-card -skew-x-12"
|
||||
style="
|
||||
box-shadow: inset -1px 0 1px #1e1f208e,
|
||||
inset 1px 0 1px #dfd8d138;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<!-- skills -->
|
||||
<!-- {% for skill in avatar_data.skills %} <div>{{ skill.level }}</div> {% endfor %} -->
|
||||
{% set skills = avatar_data.skills %}
|
||||
<div class="skills flex flex-col gap-y-2">
|
||||
<ul class="ml-3">
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-0.0d9692b6.png" />
|
||||
<span>{{ skills[0].level }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-2.d863591b.png" />
|
||||
<span>{{ skills[2].level }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-6.3fc55b66.png" />
|
||||
<span>{{ skills[5].level }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-1.e2f84ffb.png" />
|
||||
<span>{{ skills[1].level }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-3.afdb8abe.png" />
|
||||
<span>{{ skills[3].level }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-5.3d486da1.png" />
|
||||
<span>{{ skills[4].level }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content rounded-xl overflow-hidden flex flex-col justify-center"
|
||||
>
|
||||
<table class="table text-center border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-right">#</th>
|
||||
<th colspan="2">角色</th>
|
||||
<th>等级</th>
|
||||
<th>意象</th>
|
||||
<th>普攻</th>
|
||||
<th>特殊</th>
|
||||
<th>闪避</th>
|
||||
<th>连携</th>
|
||||
<th>核心</th>
|
||||
<th>支援</th>
|
||||
<th colspan="4">音擎</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for avatar_data in avatar_datas %}
|
||||
{% set equipment = avatar_data.equipment %}
|
||||
{% if avatar_data.rarity == 5 %}
|
||||
{% set row_bg = 'gold' %}
|
||||
{% else %}
|
||||
{% set row_bg = 'nongold' %}
|
||||
{% endif %}
|
||||
{% if equipment != none %}
|
||||
{% set equip_star = equipment.rarity %}
|
||||
{% else %}
|
||||
{% set equip_star = '' %}
|
||||
{% endif %}
|
||||
<tr class="h-8 border border-b">
|
||||
<td class="text-right {{row_bg}}">{{ start_id + loop.index }}</td>
|
||||
<td class="role {{row_bg}}">
|
||||
<img
|
||||
class="h-8 pl-2 img-drop-shadow"
|
||||
src="{{ avatar_data.icon }}"
|
||||
/>
|
||||
</td>
|
||||
<td class="role text-left {{row_bg}}">{{ avatar_data.name }}</td>
|
||||
<td>{{ avatar_data.level }}</td>
|
||||
{% set constellation = avatar_data.eidolon %}
|
||||
{% set class_str = "" %}
|
||||
{% if constellation != 0 %}
|
||||
{% set color = ['green', 'cyan', 'blue', 'purple', 'pink', 'red'][constellation - 1] %}
|
||||
{% set class_str = "color " + color %}
|
||||
{% endif %}
|
||||
<td class="{{ class_str }}">
|
||||
<span class="number role inline-block"
|
||||
>{{ constellation }}</span
|
||||
>
|
||||
<div class="role bg"></div>
|
||||
</td>
|
||||
{% for skill in avatar_data.skills %} {% set talent_style =
|
||||
'talent' %} {% set skill_level = skill.level %} {% if skill_level
|
||||
< 4 %} {% set talent_style = talent_style + ' talent-level-first'
|
||||
%} {% endif %} {% if skill.max_level == skill.level %} {% if
|
||||
loop.index == 1 %} {% set talent_max_style = " talent-level-max"
|
||||
%} {% else %} {% set talent_max_style = " talent-level-max-img" %}
|
||||
{% endif %} {% set talent_style = talent_style + talent_max_style
|
||||
%} {% endif %} {% if skill.max_level != skill.level %} {% if
|
||||
skill_level < 4 %} {% set talent_style = talent_style + '
|
||||
talent-level-1' %} {% elif skill_level < 6 %} {% set talent_style
|
||||
= talent_style + ' talent-level-2' %} {% elif skill_level < 9 %}
|
||||
{% set talent_style = talent_style + ' talent-level-3' %} {% else
|
||||
%} {% set talent_style = talent_style + ' talent-level-4' %} {%
|
||||
endif %} {% endif %}
|
||||
<td class="{{ talent_style }}">{{ skill.level }}</td>
|
||||
{% endfor %} {% if equipment != none %}
|
||||
<td class="weapon-{{ equip_star }}-star text-left pl-3">
|
||||
{% if equipment.level < 10 %} Lv.{{ equipment.level }} {% else
|
||||
%} Lv.{{ equipment.level }} {% endif %}
|
||||
</td>
|
||||
<td
|
||||
class="weapon-{{ equip_star }}-star color border-none {{ ['green', 'cyan', 'blue', 'purple', 'red'][equipment.eidolon - 1] }}"
|
||||
|
||||
<!-- equipment -->
|
||||
{% set equipment = avatar_data.equipment %}
|
||||
<div
|
||||
class="equipment in-shadow bg-black rounded-xl p-2 gap-y-2 text-muted flex flex-col h-full items-end justify-center min-w-[7.4rem] relative overflow-hidden"
|
||||
>
|
||||
{% if equipment %} {% set equip_star = equipment.rarity %}
|
||||
<div
|
||||
class="equip-{{ equip_star }}-star out-shadow w-full flex items-center justify-between rounded ps-3 pe-2 mt-1 pb-1 gap-x-3"
|
||||
>
|
||||
<div
|
||||
class="weapon relative"
|
||||
style="filter: drop-shadow(2px 2px 2px black)"
|
||||
>
|
||||
<img
|
||||
class="size-8 scale-150"
|
||||
src="{{ equipment.icon }}"
|
||||
alt="weapon"
|
||||
/>
|
||||
<small
|
||||
class="number absolute -bottom-1 -end-1 bg-dark size-4 text-center rounded-full"
|
||||
>{{ equipment.eidolon }}</small
|
||||
>
|
||||
<span class="weapon number">{{ equipment.eidolon }}</span>
|
||||
<div class="weapon bg p-1">
|
||||
<div class="frame-border border-solid border"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="weapon weapon-{{ equip_star }}-star">
|
||||
<img class="h-8 pl-1" src="{{ equipment.icon }}" alt="weapon" />
|
||||
</td>
|
||||
<td class="weapon-{{ equip_star }}-star text-left">
|
||||
{{ equipment.name }}
|
||||
</td>
|
||||
{% else %}
|
||||
<td colspan="4"></td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="notice">
|
||||
{% if has_more %}
|
||||
<div>
|
||||
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>:
|
||||
<code>/avatars all</code>、<code>全部练度统计</code>
|
||||
</div>
|
||||
<div class="element-text-shadow text-light font-bold font-sans">
|
||||
Lv.{{ equipment.level }}
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-light">{{ equipment.name }}</p>
|
||||
{% else %}
|
||||
<div
|
||||
class="absolute top-0 start-0 h-full w-full justify-center bg-dark flex items-center"
|
||||
>
|
||||
<img
|
||||
class="size-16 mx-auto"
|
||||
src="../agent_detail/images/equip-disable-bg.png"
|
||||
alt="no-equip"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="notice skills text-muted flex items-center gap-x-3">
|
||||
<p>图样说明:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-0.0d9692b6.png" />
|
||||
<span>普通攻击</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-2.d863591b.png" />
|
||||
<span>闪避</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-6.3fc55b66.png" />
|
||||
<span>支援技</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-1.e2f84ffb.png" />
|
||||
<span>特殊技</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-3.afdb8abe.png" />
|
||||
<span>连携技</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../agent_detail/images/skill-icon-5.3d486da1.png" />
|
||||
<span>核心技</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="ml-auto">Generated By MibooGram</p>
|
||||
</div>
|
||||
{% if has_more %}
|
||||
<div class="notice text-muted">
|
||||
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>:
|
||||
<code>/avatars all</code>、<code>全部练度统计</code>
|
||||
</div>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,167 +1,51 @@
|
||||
:root {
|
||||
--white: rgb(246 248 249);
|
||||
--bg-color: rgb(233 229 220);
|
||||
--h-color: rgb(203 189 162);
|
||||
--red: rgb(255 86 33/ 80%);
|
||||
--pink: rgb(215 57 203/80%);
|
||||
--purple: rgb(159 68 211/80%);
|
||||
--blue: rgb(98 168 233/ 80%);
|
||||
--cyan: rgb(4 150 255/80%);
|
||||
--green: rgb(67 185 124/ 80%);
|
||||
--grey: rgb(189 191 190);
|
||||
body {
|
||||
width: 1200px !important;
|
||||
max-width: 1200px !important;
|
||||
}
|
||||
|
||||
/* 上半 */
|
||||
.container {
|
||||
width: 1000px !important;
|
||||
max-width: 1000px !important;
|
||||
.in-shadow {
|
||||
box-shadow: inset 1px 1px 1px #1e1f20b4, inset -1px -1px 1px #dfd8d171;
|
||||
}
|
||||
.out-shadow {
|
||||
box-shadow: inset -1px -1px 1px #1e1f208e, inset 1px 1px 1px #dfd8d138;
|
||||
}
|
||||
.element-text-shadow {
|
||||
text-shadow: 1.5px 1.5px 1px black;
|
||||
}
|
||||
|
||||
.header {
|
||||
/*background: #e0dad3 url(../gacha_log/img/) no-repeat right;*/
|
||||
box-shadow: 0 0 8px #72a2ae79;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
/* role */
|
||||
.role {
|
||||
background-image: linear-gradient(#da9ce7, #831cc7);
|
||||
}
|
||||
.role.gold {
|
||||
background-image: linear-gradient(#ffdc00, #ce7016);
|
||||
}
|
||||
|
||||
.frame {
|
||||
border-color: #cdbea8;
|
||||
color: white;
|
||||
/* skills */
|
||||
.skills ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
.skills li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #b3b3b3;
|
||||
column-gap: 0.2rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
.skills li img {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 0 0.08em 0.1em #00000023;
|
||||
/* equipment */
|
||||
.equip-5-star {
|
||||
background: linear-gradient(#7c5700 85%, #0f0f0f 85% 90%, #fdb300 90%);
|
||||
}
|
||||
|
||||
/* 下半 */
|
||||
.content {
|
||||
box-shadow: 0 0 8px #72a2ae79;
|
||||
font-size: 21px;
|
||||
.equip-4-star {
|
||||
background: linear-gradient(#5a0063 80%, #0f0f0f 80% 90%, #e501fb 90%);
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background-color: #e0dad3;
|
||||
}
|
||||
.table tr {
|
||||
border-color: #00000021;
|
||||
}
|
||||
.table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.role img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.weapon img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 计数+菱形图案 */
|
||||
.weapon img,
|
||||
.color {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.role.bg,
|
||||
.weapon.bg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.role.bg {
|
||||
top: 5px;
|
||||
left: 17px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
.weapon.bg {
|
||||
top: 0;
|
||||
left: -8px;
|
||||
transform: skewX(-11deg);
|
||||
}
|
||||
.frame-border {
|
||||
border-color: #f7e2ad2b;
|
||||
width: 62px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.color .number {
|
||||
color: white;
|
||||
}
|
||||
.green .bg {
|
||||
background-color: #3c7d7f;
|
||||
}
|
||||
.cyan .bg {
|
||||
background-color: #4898c7;
|
||||
}
|
||||
.blue .bg {
|
||||
background-color: #4576b4;
|
||||
}
|
||||
.purple .bg {
|
||||
background-color: #955ec9;
|
||||
}
|
||||
.pink .bg {
|
||||
background-color: #c24e9a;
|
||||
}
|
||||
.red .bg {
|
||||
background-color: #c24e4e;
|
||||
}
|
||||
|
||||
/* 武器、角色背景 */
|
||||
.weapon-1-star {
|
||||
background-color: #cfcfcf;
|
||||
}
|
||||
.weapon-2-star {
|
||||
background-color: #c0edee;
|
||||
}
|
||||
.weapon-3-star {
|
||||
background-color: #bedcff;
|
||||
}
|
||||
.weapon-4-star, .nongold {
|
||||
background-color: #d3c8fa;
|
||||
}
|
||||
.weapon-5-star, .gold {
|
||||
background-color: #f9e7bb;
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-image: linear-gradient(135deg, #9452a5 10%, #fff5c3 100%);
|
||||
}
|
||||
|
||||
.talent {
|
||||
background-size: contain, 1.6em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
text-shadow: 1px 1px 2px rgb(0 0 0 /20%);
|
||||
z-index: -1 !important;
|
||||
border-right-width: 0 !important;
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.talent-level-first {
|
||||
background-color: rgb(189, 191, 190) !important;
|
||||
}
|
||||
|
||||
.talent-level-1 {
|
||||
background-color: rgb(189, 191, 190);
|
||||
}
|
||||
|
||||
.talent-level-2 {
|
||||
background-color: var(--green);
|
||||
}
|
||||
|
||||
.talent-level-3 {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.talent-level-4 {
|
||||
background-color: rgb(190, 160, 250);
|
||||
}
|
||||
|
||||
.talent-level-max {
|
||||
background-image: linear-gradient(90deg, rgba(251, 129, 124, 0.8) 0%, rgba(255, 93, 85, 0.65) 50%, rgba(251, 129, 124, 0.8) 100%) !important;
|
||||
}
|
||||
|
||||
.talent-level-max-img {
|
||||
background-image: linear-gradient(90deg, rgba(251, 129, 124, 0.8) 0%, rgba(255, 93, 85, 0.65) 50%, rgba(251, 129, 124, 0.8) 100%) !important;
|
||||
.equip-3-star {
|
||||
background: linear-gradient(#004d77 85%, #0f0f0f 85% 90%, #00a7ff 90%);
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ body {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
margin: 2rem 1.2rem;
|
||||
background-color: #2e2e2e;
|
||||
background-color: #252525;
|
||||
border-radius: 18px;
|
||||
padding: 1.2rem;
|
||||
padding-top: 4.3rem;
|
||||
@ -96,14 +96,16 @@ body {
|
||||
box-shadow: var(--in-shadow);
|
||||
flex-basis: 45%;
|
||||
border-radius: 12px;
|
||||
outline: 1.5px solid #000000;
|
||||
border: 2.5px solid #424242;
|
||||
outline: 2px solid #000000;
|
||||
border: 3px solid #424242;
|
||||
padding: 0.9rem 0.6rem;
|
||||
padding-top: 1.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.4rem;
|
||||
text-align: end;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stamina .main {
|
||||
@ -117,10 +119,13 @@ body {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
transform: scale(1.7);
|
||||
filter: drop-shadow(1px 1px 3px black);
|
||||
}
|
||||
|
||||
.stamina .count span {
|
||||
color: #b8b8b8;
|
||||
font-weight: 900;
|
||||
filter: drop-shadow(1px 1px 0 black);
|
||||
}
|
||||
|
||||
.stamina .count .count-cur {
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<span>/ {{ max_resin }}</span>
|
||||
</div>
|
||||
<div class="datail">
|
||||
{% if resin_recovery_time %} 将于{{ resin_recovery_time }}
|
||||
{% if resin_recovery_time %} 将于 {{ resin_recovery_time }}
|
||||
全部恢复 {% else %} 电量已完全恢复 {% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mx-auto max-w-[640px] py-4">
|
||||
<div class="mx-auto max-w-[630px] py-4">
|
||||
<div
|
||||
class="header out-shadow border-4 border-black p-2 rounded-2xl bg-card mb-3"
|
||||
>
|
||||
@ -43,9 +43,14 @@
|
||||
src="{{ avatar }}"
|
||||
alt="Avatar"
|
||||
/>
|
||||
<div class="z-10 flex flex-col justify-center gap-y-2 text-dark">
|
||||
<h1 class="font-bold bg-background text-4xl">{{ nickname }}</h1>
|
||||
<h1 class="text-lg font-bold">UID: {{ uid }}</h1>
|
||||
<div
|
||||
class="z-10 flex-1 flex flex-col justify-center gap-y-2 text-dark"
|
||||
>
|
||||
<h1 class="bg-background text-4xl line-clamp-1">{{ nickname }}</h1>
|
||||
<h1 class="text-lg">UID: {{ uid }}</h1>
|
||||
</div>
|
||||
<div class="z-10">
|
||||
<img class="size-16" src="../../img/logo.png" alt="logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -71,7 +76,7 @@
|
||||
stats[key] != "" else "-" %} {% set tag = "capsule" if label ==
|
||||
"活跃天数" or label == "获取角色数" %}
|
||||
<div
|
||||
class="{{ tag }} item flex font-bold justify-between px-5 items-center py-1 bg-dark rounded-full in-shadow"
|
||||
class="{{ tag }} item flex justify-between px-5 items-center py-1 bg-dark rounded-full in-shadow"
|
||||
>
|
||||
<div class="text-muted">{{ label }}</div>
|
||||
<div class="text-light">{{ value }}</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user