Skip to content

Commit aa7af57

Browse files
TomyJanTomyJan
committed
feat: 游戏卡片::网页模板
1 parent c07d5c2 commit aa7af57

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎resources/html/gameCardPns/template.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!DOCTYPE html>
2+
<html lang=zh-CN>
3+
<meta charset=utf-8>
4+
<meta name=viewport content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
5+
<title>战双卡片 - 库洛插件</title>
6+
<meta name=keywords content=库洛插件>
7+
<meta name=description content=库洛插件>
8+
9+
<style>
10+
body {
11+
font-family: MiSans
12+
}
13+
14+
.mr-4 {
15+
margin-right: 4px
16+
}
17+
18+
.mr-12 {
19+
margin-right: 12px;
20+
}
21+
22+
.pd-16 {
23+
padding: 16px
24+
}
25+
26+
.mb-16 {
27+
margin-bottom: 16px
28+
}
29+
30+
div,
31+
body {
32+
box-sizing: border-box;
33+
list-style: none;
34+
margin: 0;
35+
padding: 0
36+
}
37+
38+
span,
39+
div {
40+
word-break: break-word;
41+
vertical-align: middle
42+
/*英文和中文竖直居中*/
43+
}
44+
45+
.text-12 {
46+
font-size: 12px;
47+
line-height: 20px
48+
}
49+
50+
.text-14 {
51+
font-size: 14px;
52+
line-height: 22px
53+
}
54+
55+
.flex {
56+
display: flex
57+
}
58+
59+
.flex-vertical-center {
60+
display: flex;
61+
align-items: center
62+
}
63+
64+
.game-box-container[data-v-08c4bfda] {
65+
position: absolute;
66+
left: 50%;
67+
top: 50%;
68+
transform: translate(-50%, -50%);
69+
width: 355px;
70+
height: 152px
71+
}
72+
73+
.pns .game-box[data-v-08c4bfda] {
74+
width: 331px;
75+
height: 128px;
76+
background: url(https://web-static.kurobbs.com/resource/prod/assets/game-box-pns-02781a5b.png);
77+
background-size: 100% 100%
78+
}
79+
80+
.game-box[data-v-08c4bfda] {
81+
position: absolute;
82+
font-size: 16px;
83+
color: #fff;
84+
flex: 1
85+
}
86+
87+
.game-box-header .icon[data-v-08c4bfda] {
88+
width: 40px;
89+
height: 40px;
90+
border-radius: 4px
91+
}
92+
93+
.game-box-header .role-info[data-v-08c4bfda] {
94+
flex: 1
95+
}
96+
97+
.game-box-header .role-info .name[data-v-08c4bfda] {
98+
font-weight: 700
99+
}
100+
101+
.game-box-header .role-info .level[data-v-08c4bfda] {
102+
height: 16px;
103+
font-size: 12px;
104+
line-height: 12px;
105+
padding: 2px 4px;
106+
color: #fff;
107+
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .32) 100%);
108+
border: .4px solid rgba(255, 255, 255, .5);
109+
border-radius: 2px
110+
}
111+
112+
.game-box-header .sub-info[data-v-08c4bfda] {
113+
color: #aeb6c2;
114+
font-weight: 400;
115+
opacity: .5
116+
}
117+
118+
.game-box-footer[data-v-08c4bfda] {
119+
120+
display: flex;
121+
justify-content: space-between
122+
}
123+
124+
.game-box-footer .item[data-v-08c4bfda] {
125+
flex: 1;
126+
font-size: 12px;
127+
line-height: 20px;
128+
width: 100%;
129+
display: flex;
130+
flex-direction: column;
131+
align-items: center;
132+
justify-content: flex-start;
133+
color: #8c95a3
134+
}
135+
136+
.game-box-footer .item .number[data-v-08c4bfda] {
137+
display: flex;
138+
align-items: center;
139+
font-size: 16px;
140+
line-height: 24px;
141+
font-weight: 700;
142+
color: #fff
143+
}
144+
145+
.game-box-footer .item .title[data-v-08c4bfda] {
146+
width: 100%;
147+
color: #8c95a3;
148+
font-weight: 400;
149+
text-align: center
150+
}
151+
152+
.game-box-footer .item .icon[data-v-08c4bfda] {
153+
cursor: pointer
154+
}
155+
</style>
156+
</head>
157+
158+
<body>
159+
<div class="game-box-container pns" data-v-08c4bfda>
160+
<div class="game-box pd-16" data-v-08c4bfda>
161+
<div class="game-box-header flex mb-16" data-v-08c4bfda>
162+
<img class="icon mr-12" src="https://prod-alicdn-community.kurobbs.com/game/1677047559950121506.jpg" alt
163+
data-v-08c4bfda>
164+
<div class=role-info data-v-08c4bfda>
165+
<div class=flex-vertical-center data-v-08c4bfda>
166+
<div class="mr-4 text-14 name" data-v-08c4bfda>TomyJan</div>
167+
<div class=level data-v-08c4bfda>100级</div>
168+
</div>
169+
<div class="sub-info text-12" data-v-08c4bfda>
170+
<span data-v-08c4bfda>星火服 | ID：46218962</span>
171+
</div>
172+
</div>
173+
</div>
174+
<div class="game-box-footer flex" data-v-08c4bfda>
175+
<div class=item data-v-08c4bfda>
176+
<span class=number data-v-08c4bfda>33945</span>
177+
<span class=title data-v-08c4bfda>角色总评分</span>
178+
</div>
179+
<div class=item data-v-08c4bfda>
180+
<span class=number data-v-08c4bfda>21</span>
181+
<span class=title data-v-08c4bfda>角色数量</span>
182+
</div>
183+
<div class=item data-v-08c4bfda>
184+
<span class=number data-v-08c4bfda>3.1%</span>
185+
<span class=title data-v-08c4bfda>涂装收集率</span>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</body>
191+
192+
</html>

0 commit comments

Comments
 (0)