pull
Signed-off-by: 帮帮 <11372541+bbaban@user.noreply.gitee.com>
This commit is contained in:
帮帮
Gitee
parent
67c082f9d6
commit
0ccf4a3647
|
|
@ -0,0 +1,213 @@
|
|||
@font-face {
|
||||
font-family: "tttgbnumber";
|
||||
src: url("../../font/tttgbnumber.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
color: #1e1f20;
|
||||
font-family: PingFangSC-Medium, PingFang SC, sans-serif;
|
||||
transform: scale(2);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 465px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
}
|
||||
|
||||
.head_box .id_text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.head_box .role-name {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.head_box .genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
.basicInfo {
|
||||
padding: 10px 5px 15px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.avatar_covers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.avatar_covers div {
|
||||
flex: 0 0 33%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.avatar_covers img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #c3b6aa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.action_covers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action_covers div {
|
||||
flex: 0 0 25%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.action_covers img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #c3b6aa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.card-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #c3b6aa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hp-container {
|
||||
position: absolute;
|
||||
top: 9%;
|
||||
left: 12%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.hp-container img {
|
||||
position: absolute;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.rq-container img {
|
||||
position: absolute;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cost-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.va-container {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
.va-container img {
|
||||
position: relative;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ty-container {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.ty-container img {
|
||||
position: relative;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
.num {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.num img {
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 12px;
|
||||
font-family: "tttgbnumber";
|
||||
text-align: center;
|
||||
color: #7994a7;
|
||||
}
|
||||
|
||||
.bottom-msg {
|
||||
font-size: 12px;
|
||||
font-family: "tttgbnumber";
|
||||
text-align: center;
|
||||
color: #7994a7;
|
||||
margin-bottom: 5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.tab_lable {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -8px;
|
||||
background: #d4b98c;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 15px 0px 15px 15px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<link rel="stylesheet" type="text/css" href="{{pluResPath}}html/deck/deck.css" />
|
||||
<link rel="preload" href="{{pluResPath}}font/tttgbnumber.ttf" as="font">
|
||||
<link rel="preload" href="{{pluResPath}}img/roleIndex/namecard/{{bg}}.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/other/bg5.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/other/bg4.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/other/bg105.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/abyss/bg.png" as="image">
|
||||
{{@headIndexStyle}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div class="head_box">
|
||||
<div class="role-name">
|
||||
{{nickname}} lv:{{level}}
|
||||
</div>
|
||||
<div class="id_text">
|
||||
UID: {{uid}}
|
||||
</div>
|
||||
<img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
|
||||
</div>
|
||||
<div style="height: 11px;"></div>
|
||||
|
||||
<div class="basicInfo">
|
||||
<div class="tab_lable">角色牌详情</div>
|
||||
<div style="height: 10px;"></div>
|
||||
<div class="avatar_covers">
|
||||
{{each Data.avatar_cards val}}
|
||||
<div class="card-wrapper">
|
||||
<div class="overlay">
|
||||
<img src="{{pluResPath}}img/deck/边框.png" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="rq-container">
|
||||
<img src="{{pluResPath}}img/deck/容器.png" alt="">
|
||||
</div>
|
||||
<div class="hp-container">
|
||||
<img src="{{pluResPath}}img/deck/{{val.hp}}.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<img src="{{val.image}}" alt="">
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="basicInfo">
|
||||
<div class="tab_lable">行动牌详情</div>
|
||||
<div style="height: 10px;"></div>
|
||||
<div class="action_covers">
|
||||
{{each Data.action_cards val}}
|
||||
<div class="card-wrapper">
|
||||
<div class="overlay">
|
||||
<div class="num">
|
||||
<img src="{{pluResPath}}img/deck/{{val.num}}.png" alt="">
|
||||
</div>
|
||||
<img src="{{pluResPath}}img/deck/边框.png" alt="">
|
||||
</div>
|
||||
<div class="cost-wrapper">
|
||||
{{each val.action_cost vals}}
|
||||
<div class="ty-container">
|
||||
<img src="{{pluResPath}}img/deck/{{vals.cost_type}}.png" alt="" style="position: absolute; z-index: 1;">
|
||||
</div>
|
||||
<div class="va-container">
|
||||
<img src="{{pluResPath}}img/deck/{{vals.cost_value}}.png" alt="" style="position: absolute; z-index: 2;">
|
||||
</div>
|
||||
<div style="height: 150px;"></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<img src="{{val.image}}" alt="">
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logo">Miao-Yunzai</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
@font-face {
|
||||
font-family: "tttgbnumber";
|
||||
src: url("../../font/tttgbnumber.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
color: #1e1f20;
|
||||
font-family: PingFangSC-Medium, PingFang SC, sans-serif;
|
||||
transform: scale(2);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 465px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
}
|
||||
|
||||
.head_box .id_text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.head_box .role-name {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.head_box .genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
.basicInfo {
|
||||
padding: 10px 5px 15px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.avatar_covers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.avatar_covers div {
|
||||
flex: 0 0 33%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.avatar_covers img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #c3b6aa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.action_covers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action_covers div {
|
||||
flex: 0 0 25%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.action_covers img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #c3b6aa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.card-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #c3b6aa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hp-container {
|
||||
position: absolute;
|
||||
top: 9%;
|
||||
left: 12%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.hp-container img {
|
||||
position: absolute;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.rq-container img {
|
||||
position: absolute;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cost-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.va-container {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
.va-container img {
|
||||
position: relative;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ty-container {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.ty-container img {
|
||||
position: relative;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
.num {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.num img {
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 12px;
|
||||
font-family: "tttgbnumber";
|
||||
text-align: center;
|
||||
color: #7994a7;
|
||||
}
|
||||
|
||||
.bottom-msg {
|
||||
font-size: 12px;
|
||||
font-family: "tttgbnumber";
|
||||
text-align: center;
|
||||
color: #7994a7;
|
||||
margin-bottom: 5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.tab_lable {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -8px;
|
||||
background: #d4b98c;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 15px 0px 15px 15px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<link rel="stylesheet" type="text/css" href="{{pluResPath}}html/deckList/deckList.css" />
|
||||
<link rel="preload" href="{{pluResPath}}font/tttgbnumber.ttf" as="font">
|
||||
<link rel="preload" href="{{pluResPath}}img/roleIndex/namecard/{{bg}}.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/other/bg5.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/other/bg4.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/other/bg105.png" as="image">
|
||||
<link rel="preload" href="{{pluResPath}}img/abyss/bg.png" as="image">
|
||||
{{@headIndexStyle}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div class="head_box">
|
||||
<div class="role-name">
|
||||
{{nickname}} lv:{{level}}
|
||||
</div>
|
||||
<div class="id_text">
|
||||
UID: {{uid}}
|
||||
</div>
|
||||
<img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
|
||||
</div>
|
||||
<div style="height: 12px;"></div>
|
||||
|
||||
{{each Data vals}}
|
||||
<div class="basicInfo">
|
||||
<div class="tab_lable">七圣卡组{{vals.id}} 使用#七圣卡组{{vals.id}}查看详情</div>
|
||||
<div style="height: 10px;"></div>
|
||||
<div class="avatar_covers">
|
||||
{{each vals.avatar_cards val}}
|
||||
<div class="card-wrapper">
|
||||
<div class="overlay">
|
||||
<img src="{{pluResPath}}img/deck/边框.png" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="rq-container">
|
||||
<img src="{{pluResPath}}img/deck/容器.png" alt="">
|
||||
</div>
|
||||
<div class="hp-container">
|
||||
<img src="{{pluResPath}}img/deck/{{val.hp}}.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<img src="{{val.image}}" alt="">
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
<div class="logo">Miao-Yunzai</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue