mirror of
https://github.com/yoimiya-kokomi/miao-plugin.git
synced 2024-11-21 22:48:13 +00:00
* #喵喵日历 增加 #喵喵日历列表命令，以列表形式展示活动信息
* `#深渊出场率`、`#角色持有率` 等功能样式及字体微调
This commit is contained in:
yoimiya-kokomi
parent
dc16c5480b
commit
95bebaaac8
@ -1,10 +1,12 @@
|
||||
# 1.5.1
|
||||
# 1.5.2
|
||||
|
||||
* `#喵喵日历` 增加 `#喵喵日历列表`命令，以列表形式展示活动信息
|
||||
* `#角色面板` 伤害计算增加部分角色，目前支持
|
||||
* 长柄武器：雷神、胡桃、魈、钟离、香菱
|
||||
* 法器：神子、心海、可莉ⁿᵉʷ、凝光ⁿᵉʷ
|
||||
* 弓：甘雨、宵宫、公子
|
||||
* 单手剑：绫人、绫华、刻晴、阿贝多、行秋、班尼特、七七ⁿᵉʷ
|
||||
* `#深渊出场率`、`#角色持有率` 等功能样式及字体微调
|
||||
|
||||
# 1.5.0
|
||||
|
||||
|
||||
@ -99,12 +99,15 @@ async function wikiCache(e) {
|
||||
}
|
||||
|
||||
export async function calendar(e, { render }) {
|
||||
|
||||
|
||||
let calData = await Calcendar.get();
|
||||
let mode = "calendar";
|
||||
if (/(日历列表|活动)$/.test(e.msg)) {
|
||||
mode = "list";
|
||||
}
|
||||
|
||||
let base64 = await render("wiki", "calendar", {
|
||||
...calData,
|
||||
displayMode: mode,
|
||||
cfgScale: Cfg.scale(1.1)
|
||||
});
|
||||
|
||||
|
||||
@ -151,6 +151,8 @@ let Cal = {
|
||||
}
|
||||
} else if (sDate > now) {
|
||||
label = sDate.format("MM-DD HH:mm") + " (" + moment.duration(sDate - now).humanize() + "后开始)"
|
||||
} else if (isAct) {
|
||||
label = sDate.format("MM-DD HH:mm") + " ~ " + eDate.format("MM-DD HH:mm");
|
||||
}
|
||||
|
||||
target.push({
|
||||
|
||||
2
index.js
2
index.js
@ -92,7 +92,7 @@ let rule = {
|
||||
describe: "【#帮助】 喵喵版本介绍",
|
||||
},
|
||||
calendar: {
|
||||
reg: "^#喵喵日历$",
|
||||
reg: "^#喵喵(日历|活动|日历列表)$",
|
||||
describe: "【#日历】 活动日历",
|
||||
},
|
||||
...adminRule
|
||||
|
||||
@ -1,75 +1,46 @@
|
||||
@font-face {
|
||||
font-family: "HWZhongSong";
|
||||
src: url("../common/font/华文中宋.TTF");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "tttgbnumber";
|
||||
src: url("../common/font/tttgbnumber.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "NZBZ";
|
||||
src: url("../common/font/NZBZ.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
transform: scale(1.25);
|
||||
transform-origin: 0 0;
|
||||
font-family: Number, YS;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #1234;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container img.bg {
|
||||
width: 100%;
|
||||
margin-bottom: -1px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
box-shadow: 0 -5px 10px 0 #000;
|
||||
padding: 5px 10px 10px 150px;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px #000;
|
||||
font-family: tttgbnumber;
|
||||
|
||||
font-family: Number, YS;
|
||||
}
|
||||
|
||||
.role_box {
|
||||
padding: 5px 10px;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
|
||||
.char_name {
|
||||
font-family: "NZBZ";
|
||||
font-size: 60px;
|
||||
@ -84,7 +55,6 @@ body {
|
||||
height: 85px;
|
||||
text-shadow: 0 0 3px #000, 3px 3px 5px #000;
|
||||
}
|
||||
|
||||
.char_name:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -100,7 +70,6 @@ body {
|
||||
box-shadow: 0 0 2px 0 #000;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.char_name .uid {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
@ -111,7 +80,6 @@ body {
|
||||
letter-spacing: 0;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.cons {
|
||||
display: inline-block;
|
||||
width: 55px;
|
||||
@ -122,52 +90,11 @@ body {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
font-family: tttgbnumber;
|
||||
font-family: Number, YS;
|
||||
box-shadow: 0px 0px 3px 0px #000;
|
||||
text-shadow: 0 0 3px #000;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.cons_0 {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
|
||||
.cons_0 {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cons_1 {
|
||||
background-color: #71b167;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons_2 {
|
||||
background-color: #369961;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons_3 {
|
||||
background-color: #4596b9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons_4 {
|
||||
background-color: #4560b9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons_5 {
|
||||
background-color: #531ba9cf;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons_6 {
|
||||
background-color: #ff5722;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.crown {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@ -177,29 +104,19 @@ body {
|
||||
vertical-align: bottom;
|
||||
background-image: url("./imgs/crown.png");
|
||||
}
|
||||
|
||||
.crown.crown_0 {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.crown.crown_1 {
|
||||
|
||||
}
|
||||
|
||||
.crown.crown_2 {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.crown.crown_3 {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 26px;
|
||||
margin: 10px 5px 2px 5px;
|
||||
}
|
||||
|
||||
|
||||
.weapon {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
@ -207,8 +124,6 @@ body {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.weapon_lv {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
@ -219,7 +134,6 @@ body {
|
||||
background-color: rgba(0, 0, 0, var(--bg-opacity));
|
||||
--bg-opacity: 0.75;
|
||||
}
|
||||
|
||||
.weapon_affix {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -233,22 +147,18 @@ body {
|
||||
border-radius: 5px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.weapon_cont {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.weapon_cont img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.weapon_name {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.equiv .img_box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
@ -256,13 +166,10 @@ body {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.equiv img {
|
||||
width: 100%;
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
|
||||
|
||||
.detail {
|
||||
margin-left: 5px;
|
||||
width: 300px;
|
||||
@ -271,7 +178,6 @@ body {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.talent {
|
||||
margin-left: 5px;
|
||||
width: 300px;
|
||||
@ -280,18 +186,11 @@ body {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.text_box::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.5) 20%,
|
||||
rgba(255, 255, 255, 0.5) 80%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
top: 0;
|
||||
@ -300,18 +199,11 @@ body {
|
||||
opacity: 1;
|
||||
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
|
||||
}
|
||||
|
||||
.text_box::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.5) 20%,
|
||||
rgba(255, 255, 255, 0.5) 80%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
@ -320,7 +212,6 @@ body {
|
||||
opacity: 1;
|
||||
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
|
||||
}
|
||||
|
||||
.detail p,
|
||||
.talent div {
|
||||
margin-right: 4px;
|
||||
@ -328,27 +219,22 @@ body {
|
||||
width: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.no_skill {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.star {
|
||||
width: 16px;
|
||||
vertical-align: -2px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.equiv {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/*margin-bottom: 5px;*/
|
||||
}
|
||||
|
||||
.equiv {
|
||||
margin: 0 10px 8px 10px;
|
||||
text-align: center;
|
||||
@ -361,7 +247,6 @@ body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.equiv .num {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
@ -373,8 +258,6 @@ body {
|
||||
--bg-opacity: 0.75;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
|
||||
.equiv .img_box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
@ -382,12 +265,10 @@ body {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.equiv img {
|
||||
width: 100%;
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
|
||||
.equiv_info {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
@ -397,11 +278,8 @@ body {
|
||||
margin-left: 5px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.equiv_info .text {
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
@ -409,16 +287,12 @@ body {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
body.bottom_mode {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.bottom_mode .info {
|
||||
height: 158px;
|
||||
}
|
||||
|
||||
|
||||
.bottom_mode .weapon {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -426,61 +300,49 @@ body.bottom_mode {
|
||||
padding-top: 120px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_affix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_cont {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_lv {
|
||||
border-radius: 8px 0 0 0;
|
||||
padding-left: 8px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
bottom: -8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_cont img {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_name {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
|
||||
.equiv_info {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.bottom_mode .detail {
|
||||
font-family: NZBZ;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.bottom_mode .for_left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/******** left mode **********/
|
||||
.left_mode {
|
||||
width: 800px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.left_mode .info {
|
||||
right: initial;
|
||||
padding: 10px 10px 5px 10px;
|
||||
@ -488,8 +350,6 @@ body.bottom_mode {
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.left_mode .weapon {
|
||||
top: -110px;
|
||||
width: 270px;
|
||||
@ -499,7 +359,6 @@ body.bottom_mode {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.left_mode .weapon_cont {
|
||||
width: 100px;
|
||||
padding: 3px 10px 0 0;
|
||||
@ -508,17 +367,14 @@ body.bottom_mode {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left_mode .for_bottom,
|
||||
.left_mode .weapon_lv,
|
||||
.left_mode .weapon_affix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left_mode .for_left {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.left_mode .weapon_name {
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
@ -526,48 +382,41 @@ body.bottom_mode {
|
||||
line-height: 30px;
|
||||
padding: 20px 0 0 110px;
|
||||
}
|
||||
|
||||
.left_mode .detail {
|
||||
width: auto;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.left_mode .talent {
|
||||
padding-left: 0;
|
||||
margin-right: -5px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.left_mode .info,
|
||||
.left_mode .weapon {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 5px 1px #000;
|
||||
}
|
||||
|
||||
.left_mode .equiv_info {
|
||||
padding: 0;
|
||||
background: none;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
position: absolute;
|
||||
|
||||
font-family: Number, YS;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.left_mode .copyright {
|
||||
bottom: 5px;
|
||||
right: 9px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
font-family: tttgbnumber;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.bottom_mode .copyright {
|
||||
bottom: 1px;
|
||||
right: 7px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
font-family: tttgbnumber;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=card.css.map */
|
||||
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
|
||||
<link rel="shortcut icon" href="#"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/character/card.css?v=1.0"/>
|
||||
</head>
|
||||
<body class="{{bg.mode}}_mode" {{cfgScale}}>
|
||||
@ -11,7 +12,7 @@
|
||||
<div class="uid">ID:{{uid}}</div>
|
||||
<span>{{ds.name}}</span>
|
||||
<span
|
||||
class="cons cons_{{actived_constellation_num}}">{{actived_constellation_num}}命</span>
|
||||
class="cons cons-{{actived_constellation_num}}">{{actived_constellation_num}}命</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="detail"> Lv.{{level}} ❤{{fetter}}
|
||||
|
||||
509
resources/character/card.less
Normal file
509
resources/character/card.less
Normal file
@ -0,0 +1,509 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
transform: scale(1.25);
|
||||
transform-origin: 0 0;
|
||||
font-family: Number, YS;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #1234;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container img.bg {
|
||||
width: 100%;
|
||||
margin-bottom: -1px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
box-shadow: 0 -5px 10px 0 #000;
|
||||
padding: 5px 10px 10px 150px;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px #000;
|
||||
font-family: Number, YS;
|
||||
|
||||
}
|
||||
|
||||
.role_box {
|
||||
padding: 5px 10px;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
|
||||
.char_name {
|
||||
font-family: "NZBZ";
|
||||
font-size: 60px;
|
||||
letter-spacing: 5px;
|
||||
line-height: 90px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
padding-left: 20px;
|
||||
left: 0;
|
||||
height: 85px;
|
||||
text-shadow: 0 0 3px #000, 3px 3px 5px #000;
|
||||
}
|
||||
|
||||
.char_name:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
right: -50px;
|
||||
min-width: 360px;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: -50px;
|
||||
opacity: 1;
|
||||
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
|
||||
box-shadow: 0 0 2px 0 #000;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.char_name .uid {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
top: -25px;
|
||||
left: 15px;
|
||||
letter-spacing: 0;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.cons {
|
||||
display: inline-block;
|
||||
width: 55px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
font-family: Number, YS;
|
||||
box-shadow: 0px 0px 3px 0px #000;
|
||||
text-shadow: 0 0 3px #000;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.crown {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
background-size: contain;
|
||||
vertical-align: bottom;
|
||||
background-image: url("./imgs/crown.png");
|
||||
}
|
||||
|
||||
.crown.crown_0 {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.crown.crown_1 {
|
||||
|
||||
}
|
||||
|
||||
.crown.crown_2 {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.crown.crown_3 {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 26px;
|
||||
margin: 10px 5px 2px 5px;
|
||||
}
|
||||
|
||||
|
||||
.weapon {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.weapon_lv {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
padding: 3px 5px;
|
||||
background-color: rgba(0, 0, 0, var(--bg-opacity));
|
||||
--bg-opacity: 0.75;
|
||||
}
|
||||
|
||||
.weapon_affix {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
background: #000;
|
||||
border-radius: 5px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.weapon_cont {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.weapon_cont img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.weapon_name {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.equiv .img_box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: 1px solid #d3bc8d;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.equiv img {
|
||||
width: 100%;
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
|
||||
|
||||
.detail {
|
||||
margin-left: 5px;
|
||||
width: 300px;
|
||||
margin-top: 3px;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.talent {
|
||||
margin-left: 5px;
|
||||
width: 300px;
|
||||
padding: 5px 5px 8px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.text_box::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.5) 20%,
|
||||
rgba(255, 255, 255, 0.5) 80%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
width: 300px;
|
||||
opacity: 1;
|
||||
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
|
||||
}
|
||||
|
||||
.text_box::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.5) 20%,
|
||||
rgba(255, 255, 255, 0.5) 80%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: -15px;
|
||||
width: 300px;
|
||||
opacity: 1;
|
||||
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
|
||||
}
|
||||
|
||||
.detail p,
|
||||
.talent div {
|
||||
margin-right: 4px;
|
||||
line-height: 16px;
|
||||
width: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.no_skill {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.star {
|
||||
width: 16px;
|
||||
vertical-align: -2px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.equiv {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/*margin-bottom: 5px;*/
|
||||
}
|
||||
|
||||
.equiv {
|
||||
margin: 0 10px 8px 10px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding: 3px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 5px;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.equiv .num {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
font-size: 12px;
|
||||
/*background: rgba(0,0,0,.6);*/
|
||||
border-radius: 5px;
|
||||
padding: 1px 5px;
|
||||
background-color: rgba(0, 0, 0, var(--bg-opacity));
|
||||
--bg-opacity: 0.75;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
|
||||
.equiv .img_box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: 1px solid #d3bc8d;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.equiv img {
|
||||
width: 100%;
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
|
||||
.equiv_info {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
padding: 5px 5px 1px 7px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(114, 102, 104, 0.3);
|
||||
margin-left: 5px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.equiv_info .text {
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
body.bottom_mode {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.bottom_mode .info {
|
||||
height: 158px;
|
||||
}
|
||||
|
||||
|
||||
.bottom_mode .weapon {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0px;
|
||||
padding-top: 120px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_affix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_cont {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_lv {
|
||||
border-radius: 8px 0 0 0;
|
||||
padding-left: 8px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
bottom: -8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_cont img {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.bottom_mode .weapon_name {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
|
||||
.equiv_info {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.bottom_mode .detail {
|
||||
font-family: NZBZ;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.bottom_mode .for_left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/******** left mode **********/
|
||||
.left_mode {
|
||||
width: 800px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.left_mode .info {
|
||||
right: initial;
|
||||
padding: 10px 10px 5px 10px;
|
||||
border-radius: 8px;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.left_mode .weapon {
|
||||
top: -110px;
|
||||
width: 270px;
|
||||
height: 100px;
|
||||
padding: 0 0 3px 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.left_mode .weapon_cont {
|
||||
width: 100px;
|
||||
padding: 3px 10px 0 0;
|
||||
border-radius: 0 10px 0 0;
|
||||
border-right: 0.5px solid rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left_mode .for_bottom,
|
||||
.left_mode .weapon_lv,
|
||||
.left_mode .weapon_affix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left_mode .for_left {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.left_mode .weapon_name {
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
padding: 20px 0 0 110px;
|
||||
}
|
||||
|
||||
.left_mode .detail {
|
||||
width: auto;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.left_mode .talent {
|
||||
padding-left: 0;
|
||||
margin-right: -5px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.left_mode .info,
|
||||
.left_mode .weapon {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 5px 1px #000;
|
||||
}
|
||||
|
||||
.left_mode .equiv_info {
|
||||
padding: 0;
|
||||
background: none;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
position: absolute;
|
||||
font-family: Number, YS;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.left_mode .copyright {
|
||||
bottom: 5px;
|
||||
right: 9px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.bottom_mode .copyright {
|
||||
bottom: 1px;
|
||||
right: 7px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
@ -22,6 +22,12 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "YS2";
|
||||
src: url("../common/font/HYWH-65W.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -34,8 +40,6 @@ body {
|
||||
font-family: PingFangSC-Medium, PingFang SC, sans-serif;
|
||||
transform: scale(1.4);
|
||||
transform-origin: 0 0;
|
||||
background: top left no-repeat #2a3860;
|
||||
background-size: contain;
|
||||
width: 600px;
|
||||
}
|
||||
.container {
|
||||
@ -92,40 +96,72 @@ body {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
font-family: Number, YS;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.cons-0 {
|
||||
border-radius: 4px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
.cons-n0 {
|
||||
background: #404949;
|
||||
color: #fff;
|
||||
}
|
||||
.cons-1 {
|
||||
border-radius: 4px;
|
||||
background: #71b1b7;
|
||||
background: #5cbac2;
|
||||
color: #fff;
|
||||
}
|
||||
.cons-2 {
|
||||
border-radius: 4px;
|
||||
background: #369961;
|
||||
background: #339d61;
|
||||
color: #fff;
|
||||
}
|
||||
.cons-3 {
|
||||
border-radius: 4px;
|
||||
background: #4596b9;
|
||||
background: #3e95b9;
|
||||
color: #fff;
|
||||
}
|
||||
.cons-4 {
|
||||
border-radius: 4px;
|
||||
background: #4560b9;
|
||||
background: #3955b7;
|
||||
color: #fff;
|
||||
}
|
||||
.cons-5 {
|
||||
border-radius: 4px;
|
||||
background: #531ba9cf;
|
||||
color: #fff;
|
||||
}
|
||||
.cons-6 {
|
||||
background: #ff5722;
|
||||
color: #fff;
|
||||
}
|
||||
.cons2-0 {
|
||||
border-radius: 4px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
.cons2-1 {
|
||||
border-radius: 4px;
|
||||
background: #71b1b7;
|
||||
color: #fff;
|
||||
}
|
||||
.cons2-2 {
|
||||
border-radius: 4px;
|
||||
background: #369961;
|
||||
color: #fff;
|
||||
}
|
||||
.cons2-3 {
|
||||
border-radius: 4px;
|
||||
background: #4596b9;
|
||||
color: #fff;
|
||||
}
|
||||
.cons2-4 {
|
||||
border-radius: 4px;
|
||||
background: #4560b9;
|
||||
color: #fff;
|
||||
}
|
||||
.cons2-5 {
|
||||
border-radius: 4px;
|
||||
background: #531ba9cf;
|
||||
color: #fff;
|
||||
}
|
||||
.cons2-6 {
|
||||
border-radius: 4px;
|
||||
background: #ff5722;
|
||||
color: #fff;
|
||||
|
||||
@ -26,6 +26,13 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YS2";
|
||||
src: url("../common/font/HYWH-65W.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -39,15 +46,12 @@ body {
|
||||
font-family: PingFangSC-Medium, PingFang SC, sans-serif;
|
||||
transform: scale(1.4);
|
||||
transform-origin: 0 0;
|
||||
background: top left no-repeat #2a3860;
|
||||
background-size: contain;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
@ -114,24 +118,46 @@ body {
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
font-family: Number, YS;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.cons(@idx, @bg, @color:#fff) {
|
||||
.cons-@{idx} {
|
||||
border-radius: 4px;
|
||||
background: @bg;
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.cons(0, #666);
|
||||
.cons(1, #71b1b7);
|
||||
.cons(2, #369961);
|
||||
.cons(3, #4596b9);
|
||||
.cons(4, #4560b9);
|
||||
.cons(n0, #404949);
|
||||
.cons(1, #5cbac2);
|
||||
.cons(2, #339d61);
|
||||
.cons(3, #3e95b9);
|
||||
.cons(4, #3955b7);
|
||||
.cons(5, #531ba9cf);
|
||||
.cons(6, #ff5722);
|
||||
|
||||
.cons2(@idx, @bg, @color:#fff) {
|
||||
.cons2-@{idx} {
|
||||
border-radius: 4px;
|
||||
background: @bg;
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.cons2(0, #666);
|
||||
.cons2(1, #71b1b7);
|
||||
.cons2(2, #369961);
|
||||
.cons2(3, #4596b9);
|
||||
.cons2(4, #4560b9);
|
||||
.cons2(5, #531ba9cf);
|
||||
.cons2(6, #ff5722);
|
||||
|
||||
|
||||
/******** ELEM ********/
|
||||
|
||||
|
||||
BIN
resources/common/font/HYWH-65W.ttf
Normal file
BIN
resources/common/font/HYWH-65W.ttf
Normal file
Binary file not shown.
Binary file not shown.
@ -37,22 +37,42 @@
|
||||
background-image: url("./item/bg1.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-1 {
|
||||
background-image: url("./item/bg1.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg2 {
|
||||
background-image: url("./item/bg2.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-2 {
|
||||
background-image: url("./item/bg2.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg3 {
|
||||
background-image: url("./item/bg3.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-3 {
|
||||
background-image: url("./item/bg3.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg4 {
|
||||
background-image: url("./item/bg4.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-4 {
|
||||
background-image: url("./item/bg4.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg5 {
|
||||
background-image: url("./item/bg5.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-5 {
|
||||
background-image: url("./item/bg5.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{{set avatar = $data[0]}}
|
||||
{{set {_res_path,_char} = $data[1]}}
|
||||
{{set _char = _char || "meta/character/"}}
|
||||
|
||||
<div class="item">
|
||||
<div class="item-bg elem-{{avatar.element}}">
|
||||
@ -9,10 +10,6 @@
|
||||
{{ if avatar.cons>0}}
|
||||
<div class="role-life life{{avatar.cons}}">{{avatar.cons}}命</div>
|
||||
{{/if}}
|
||||
<div class="role-name">{{avatar.name}}</div>
|
||||
<div class="role-lv">
|
||||
<div class="text">Lv {{avatar.level}}</div>
|
||||
<div class="text-bg"></div>
|
||||
</div>
|
||||
<div class="role-name">{{avatar.label || avatar.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -110,4 +110,4 @@
|
||||
.item-card .life5 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
/*# sourceMappingURL=item-card.css.map */
|
||||
/*# sourceMappingURL=item-card.less.map */
|
||||
@ -44,6 +44,10 @@
|
||||
background-image: url("./item/bg@{value}.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.bg-@{value} {
|
||||
background-image: url("./item/bg@{value}.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
})
|
||||
|
||||
.box {
|
||||
|
||||
@ -63,7 +63,7 @@ export const usefulAttr = {
|
||||
"云堇": "def,recharge",
|
||||
"荒泷一斗": "def,cRate,cDmg",
|
||||
"五郎": "def,recharge",
|
||||
"班尼特": "hp,cRate,cDmg,recharge",
|
||||
"班尼特": "hp,atk,cRate,cDmg,recharge",
|
||||
"枫原万叶": "mastery,cRate,cDmg,recharge",
|
||||
"雷电将军": "atk,cRate,cDmg,recharge",
|
||||
"行秋": "atk,cRate,cDmg,recharge",
|
||||
|
||||
@ -544,6 +544,7 @@ let sword = {
|
||||
title: "基于生命值上限提高攻击力[atkPlus]",
|
||||
data: {
|
||||
atkPlus: ({ attr, calc, refine }) => calc(attr.hp) * step(1.2)[refine] / 100
|
||||
|
||||
}
|
||||
}],
|
||||
"斫峰之刃": [{
|
||||
|
||||
@ -1,26 +1,22 @@
|
||||
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-list .item {
|
||||
margin: 0px 0 10px 10px;
|
||||
margin: 0 0 10px 10px;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
|
||||
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
|
||||
height: 88px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e7e5d9;
|
||||
}
|
||||
|
||||
.card-list .item img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 7px 7px 20px 0;
|
||||
}
|
||||
|
||||
.card-list .item.star5 img {
|
||||
background-image: url(../common/item/bg5.png);
|
||||
width: 100%;
|
||||
@ -29,7 +25,6 @@
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.card-list .item.star4 img {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
@ -37,27 +32,23 @@
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.card-list .item .num {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
font-family: "tttgbnumber";
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.card-list .item .name,
|
||||
.card-list .item .num_name {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0px;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
@ -65,12 +56,9 @@
|
||||
height: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.card-list .item .num_name {
|
||||
font-family: "tttgbnumber";
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.line_box {
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
@ -83,10 +71,10 @@
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.line_box .line {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
background-color: #ebebeb;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
/*# sourceMappingURL=abyss-pct.css.map */
|
||||
@ -3,11 +3,12 @@
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
|
||||
<link rel="shortcut icon" href="#"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-pct.css?v=1.0"/>
|
||||
<link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font">
|
||||
</head>
|
||||
<body id="container" class="body_box" {{cfgScale}}>
|
||||
<body id="container" class="body_box" {{cfgScale}}>
|
||||
<div class="container">
|
||||
<div class="info_box">
|
||||
<div class="head-box type{{bgType}}">
|
||||
@ -20,7 +21,9 @@
|
||||
{{/if}}
|
||||
<img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
|
||||
</div>
|
||||
|
||||
<% let pct = function (num) {
|
||||
return (num * 100).toFixed(2);
|
||||
} %>
|
||||
{{each abyss ds}}
|
||||
{{if chooseFloor == -1 || chooseFloor == ds.floor}}
|
||||
<div class="info_box_border">
|
||||
@ -35,11 +38,9 @@
|
||||
<img class="role"
|
||||
src="{{_sys_res_path}}/genshin/logo/role/{{char.name}}.png"
|
||||
/>
|
||||
|
||||
<div class="num_name">{{pct(char.value)}}%</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
88
resources/stat/abyss-pct.less
Normal file
88
resources/stat/abyss-pct.less
Normal file
@ -0,0 +1,88 @@
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.item {
|
||||
margin: 0 0 10px 10px;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
|
||||
height: 88px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e7e5d9;
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 7px 7px 20px 0;
|
||||
}
|
||||
|
||||
&.star5 img {
|
||||
background-image: url(../common/item/bg5.png);
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
/*filter: brightness(1.1);*/
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.star4 img {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-image: url(../common/item/bg4.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.name,
|
||||
.num_name {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.num_name {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line_box {
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
padding-bottom: 5px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
background-color: #ebebeb;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
}
|
||||
@ -2,36 +2,31 @@
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cont {
|
||||
font-family: YS;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cont-table .title {
|
||||
min-width: 30px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cont-table .title .team-count {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.card-list .card {
|
||||
margin: 3px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
|
||||
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e7e5d9;
|
||||
@ -40,25 +35,20 @@
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-list .has-character .for-no {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-list .no-character .for-has {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-list .no-character {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.card-list .no-label {
|
||||
font-size: 12px;
|
||||
font-family: YS;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.card-list .card img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@ -67,25 +57,18 @@
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-list .card.star5 img {
|
||||
background-image: url(../common/item/bg5.png);
|
||||
|
||||
/*filter: brightness(1.1);*/
|
||||
|
||||
}
|
||||
|
||||
.card-list .card.star4 img {
|
||||
background-image: url(../common/item/bg4.png);
|
||||
}
|
||||
|
||||
.card-list .card .cons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.card-list .card .num {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
@ -96,10 +79,9 @@
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-family: Number;
|
||||
}
|
||||
|
||||
.card-list .card .name,
|
||||
.card-list .card .num_name {
|
||||
position: absolute;
|
||||
@ -112,4 +94,4 @@
|
||||
height: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=abyss-team.css.map */
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
{{each floorTeam team idx}}
|
||||
<div class="tr">
|
||||
<div class="title">配队{{idx+1}}<span class="team-count">{{team.count}}场记录</span></div>
|
||||
<div class="title">配队{{idx+1}}<span class="team-count">{{team.count}}次记录</span></div>
|
||||
{{each team teamData key}}
|
||||
{{if key === "up" || key === "down"}}
|
||||
<div>
|
||||
|
||||
112
resources/stat/abyss-team.less
Normal file
112
resources/stat/abyss-team.less
Normal file
@ -0,0 +1,112 @@
|
||||
.head-box {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cont {
|
||||
font-family: YS;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cont-table .title {
|
||||
min-width: 30px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cont-table .title .team-count {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.card-list .card {
|
||||
margin: 3px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e7e5d9;
|
||||
font-size: 12px;
|
||||
font-family: Number;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-list .has-character .for-no {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-list .no-character .for-has {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-list .no-character {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.card-list .no-label {
|
||||
font-size: 12px;
|
||||
font-family: YS;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.card-list .card img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 5px 5px 10px 0;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-list .card.star5 img {
|
||||
background-image: url(../common/item/bg5.png);
|
||||
}
|
||||
|
||||
.card-list .card.star4 img {
|
||||
background-image: url(../common/item/bg4.png);
|
||||
}
|
||||
|
||||
.card-list .card .cons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.card-list .card .num {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
z-index: 9;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
font-family: Number;
|
||||
}
|
||||
|
||||
.card-list .card .name,
|
||||
.card-list .card .num_name {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0px;
|
||||
z-index: 9;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
|
||||
.weapon_mode .for_talent {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.talent_mode .for_weapon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.data-box {
|
||||
border-radius: 15px;
|
||||
margin-top: 20px;
|
||||
@ -15,10 +11,9 @@
|
||||
padding: 0px 15px 5px 15px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab_lable {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
@ -30,34 +25,22 @@
|
||||
border-radius: 15px 0px 15px 15px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.data_line {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.data_line_item {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
/*margin: 0 20px;*/
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: tttgbnumber;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.num .unit {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.data-box {
|
||||
|
||||
}
|
||||
|
||||
.char-list {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
@ -67,34 +50,19 @@
|
||||
/* border-radius: 0 0 15px 15px; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.char-list .avatar {
|
||||
display: table-row;
|
||||
font-family: tttgbnumber;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.char-list .avatar {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.char-list .avatar > div {
|
||||
box-shadow: 0 0 1px 0 #555 inset;
|
||||
}
|
||||
|
||||
.char-list .avatar:nth-child(odd) {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.char-list .avatar:nth-child(even) {
|
||||
|
||||
}
|
||||
|
||||
.char-list .avatar:nth-child(1) {
|
||||
background: #ccc;
|
||||
|
||||
}
|
||||
|
||||
.char-list .avatar > div {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
@ -102,56 +70,44 @@
|
||||
vertical-align: middle;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.char-list .avatar .index {
|
||||
color: #333;
|
||||
width: 30px;
|
||||
padding-left: 5px;
|
||||
|
||||
}
|
||||
|
||||
.char-list .avatar .name_cont {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
|
||||
.char-list .avatar .star4 {
|
||||
background: rgba(137, 189, 233, .6);
|
||||
background: rgba(137, 189, 233, 0.6);
|
||||
}
|
||||
|
||||
.char-list .avatar .star5 {
|
||||
background: rgba(239, 214, 137, .6);
|
||||
background: rgba(239, 214, 137, 0.6);
|
||||
}
|
||||
|
||||
.char-list .avatar .name_cont {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.char-list .avatar .name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.char-list .th,
|
||||
.char-list .th div{
|
||||
.char-list .th div {
|
||||
font-weight: bold;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.char-list .th .name {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.char-list .avatar .name .avatar_img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: relative;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.char-list .avatar .name img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -159,67 +115,52 @@
|
||||
top: -3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.char-list .avatar .name .avatar_name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.char-list .avatar .res {
|
||||
font-size: 12px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.char-list .avatar .res img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.char-list .avatar > div.lvl90 {
|
||||
}
|
||||
|
||||
.char-list .avatar > div.fetter10 {
|
||||
background: url("./hart.png") center center no-repeat;
|
||||
background-size: contain;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.char-list .cons {
|
||||
.char-list .char-cons {
|
||||
width: 400px;
|
||||
position: relative;
|
||||
z-index: 98;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.char-list .cons-pct,
|
||||
.char-list .cons-bg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.char-list .th .cons-pct {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.char-list .th .cons-pct > div:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.char-list .th .cons-pct > div:last-child {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.char-list .cons-pct {
|
||||
margin: 0 10px;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.char-list .cons-pct > div {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
@ -227,7 +168,9 @@
|
||||
font-weight: normal;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.char-list .life_bg {
|
||||
background: #888;
|
||||
}
|
||||
.char-list .cons-bg {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
@ -239,44 +182,10 @@
|
||||
overflow: hidden;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.char-list .life_bg {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.char-list .cons-bg > div:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.char-list .cons-bg > div {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.char-list .life0 {
|
||||
background: #5b8185
|
||||
.char-list .cons-bg > div:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.char-list .life1 {
|
||||
background: #ce881f;
|
||||
}
|
||||
|
||||
.char-list .life2 {
|
||||
background: #7ba824;
|
||||
}
|
||||
|
||||
.char-list .life3 {
|
||||
background: #3e8853;
|
||||
}
|
||||
|
||||
.char-list .life4 {
|
||||
background: #1a426e;
|
||||
}
|
||||
|
||||
.char-list .life5 {
|
||||
background: #632e62;
|
||||
}
|
||||
|
||||
.char-list .life6 {
|
||||
background: #9b2d1f;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=character.css.map */
|
||||
@ -3,9 +3,13 @@
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
|
||||
<link rel="shortcut icon" href="#"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/character.css?v=1.0"/>
|
||||
<link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font">
|
||||
<% let pct = function (num) {
|
||||
return (num * 100).toFixed(2);
|
||||
} %>
|
||||
</head>
|
||||
<body id="container" class="body_box" {{cfgScale}}>
|
||||
<div class="container">
|
||||
@ -30,15 +34,15 @@
|
||||
角色
|
||||
</div>
|
||||
<div class="lvl">持有率</div>
|
||||
<div class="cons">
|
||||
<div class="char-cons">
|
||||
<div class="cons-pct">
|
||||
<div class="life0">0命</div>
|
||||
<div class="life1">1命</div>
|
||||
<div class="life2">2命</div>
|
||||
<div class="life3">3命</div>
|
||||
<div class="life4">4命</div>
|
||||
<div class="life5">5命</div>
|
||||
<div class="life6">6命</div>
|
||||
<div class="cons-n0">0命</div>
|
||||
<div class="cons-1">1命</div>
|
||||
<div class="cons-2">2命</div>
|
||||
<div class="cons-3">3命</div>
|
||||
<div class="cons-4">4命</div>
|
||||
<div class="cons-5">5命</div>
|
||||
<div class="cons-6">6命</div>
|
||||
{{if mode === "char"}}
|
||||
<div class="life_bg">无</div>
|
||||
{{/if}}
|
||||
@ -60,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="pct">{{pct(char.hold)}}</div>
|
||||
<div class="cons">
|
||||
<div class="char-cons">
|
||||
<div class="cons-pct">
|
||||
{{each char.cons con idx}}
|
||||
<div>{{pct(con.value)}}</div>
|
||||
@ -71,14 +75,14 @@
|
||||
</div>
|
||||
<div class="cons-bg">
|
||||
{{each char.cons con idx}}
|
||||
<div class="life{{con.id}}" style='{{"width:"+pct(con.value)+"%"}}'></div>
|
||||
<div class="cons-{{con.id ===0?'n0':con.id}}" style='{{"width:"+pct(con.value)+"%"}}'></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<p class="notice"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p>
|
||||
<p class="notice"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p>
|
||||
</div>
|
||||
<div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div>
|
||||
</div>
|
||||
|
||||
244
resources/stat/character.less
Normal file
244
resources/stat/character.less
Normal file
@ -0,0 +1,244 @@
|
||||
|
||||
.weapon_mode .for_talent {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.talent_mode .for_weapon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.data-box {
|
||||
border-radius: 15px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0px 15px 5px 15px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab_lable {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -8px;
|
||||
background: #a98242;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 15px 0px 15px 15px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.data_line {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.data_line_item {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
/*margin: 0 20px;*/
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.num .unit {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.data-box {
|
||||
|
||||
}
|
||||
|
||||
.char-list {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
width: calc(100% + 30px);
|
||||
margin: 0 -15px -5px;
|
||||
font-size: 12px;
|
||||
/* border-radius: 0 0 15px 15px; */
|
||||
overflow: hidden;
|
||||
|
||||
.avatar {
|
||||
display: table-row;
|
||||
overflow: visible;
|
||||
|
||||
& > div {
|
||||
box-shadow: 0 0 1px 0 #555 inset;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
background: #ccc;
|
||||
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.index {
|
||||
color: #333;
|
||||
width: 30px;
|
||||
padding-left: 5px;
|
||||
|
||||
}
|
||||
|
||||
.name_cont {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
|
||||
.star4 {
|
||||
background: rgba(137, 189, 233, .6);
|
||||
}
|
||||
|
||||
.star5 {
|
||||
background: rgba(239, 214, 137, .6);
|
||||
}
|
||||
|
||||
.name_cont {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.char-list .th,
|
||||
.char-list .th div {
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.char-list .th .name {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.char-list .avatar .name .avatar_img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: relative;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.char-list .avatar .name img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.char-list .avatar .name .avatar_name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.char-list .avatar .res {
|
||||
font-size: 12px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.char-list .avatar .res img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.char-list .avatar > div.fetter10 {
|
||||
background: url("./hart.png") center center no-repeat;
|
||||
background-size: contain;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.char-list .char-cons {
|
||||
width: 400px;
|
||||
position: relative;
|
||||
z-index: 98;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.char-list .cons-pct,
|
||||
.char-list .cons-bg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.char-list .th .cons-pct {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.char-list .th .cons-pct > div:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.char-list .th .cons-pct > div:last-child {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.char-list .cons-pct {
|
||||
margin: 0 10px;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.char-list .cons-pct > div {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
mix-blend-mode: difference;
|
||||
font-weight: normal;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.char-list .life_bg {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
|
||||
.char-list .cons-bg {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
height: 20px;
|
||||
z-index: 99;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background: #888;
|
||||
|
||||
& > div {
|
||||
height: 20px;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,103 +1,64 @@
|
||||
@font-face {
|
||||
font-family: "tttgbnumber";
|
||||
src: url("../common/font/tttgbnumber.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: HYWenHei-55W;
|
||||
src: url('../common/font/HYWenHei-55W.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "NZBZ";
|
||||
src: url("../common/font/NZBZ.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(1.4);
|
||||
transform-origin: 0 0;
|
||||
background: url("./bg1.png") top left no-repeat #2a3860;
|
||||
background-size: contain;
|
||||
width: 600px;
|
||||
font-family: Number, YS2;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
background: url("./footer.png") left bottom no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
.head-box {
|
||||
border-radius: 15px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
margin-top:30px;
|
||||
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.head-box .title {
|
||||
font-size: 36px;
|
||||
font-family: NZBZ;
|
||||
}
|
||||
|
||||
|
||||
.head-box .genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
.head-box .label{
|
||||
font-size:16px;
|
||||
.head-box .label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.notice {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
padding: 12px 5px 5px;
|
||||
}
|
||||
.notice-center{
|
||||
color:#fff;
|
||||
.notice-center {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom:10px;
|
||||
text-shadow:1px 1px 1px #333;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 1px 1px 1px #333;
|
||||
}
|
||||
.copyright {
|
||||
font-size: 16px;
|
||||
font-family: "tttgbnumber";
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
text-shadow:1px 1px 1px #000;
|
||||
margin-bottom:10px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/*# sourceMappingURL=common.css.map */
|
||||
73
resources/stat/common.less
Normal file
73
resources/stat/common.less
Normal file
@ -0,0 +1,73 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
color: #1e1f20;
|
||||
transform: scale(1.4);
|
||||
transform-origin: 0 0;
|
||||
background: url("./bg1.png") top left no-repeat #2a3860;
|
||||
background-size: contain;
|
||||
width: 600px;
|
||||
font-family: Number, YS2;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
background: url("./footer.png") left bottom no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
.head-box {
|
||||
border-radius: 15px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
margin-top: 30px;
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-family: NZBZ;
|
||||
}
|
||||
|
||||
.genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
padding: 12px 5px 5px;
|
||||
}
|
||||
|
||||
.notice-center {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 1px 1px 1px #333;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -201,7 +201,7 @@ body {
|
||||
}
|
||||
.calendar .now-line {
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
top: 86px;
|
||||
bottom: -18px;
|
||||
width: 2px;
|
||||
box-shadow: 0 0 5px 0 #fff;
|
||||
@ -222,7 +222,7 @@ body {
|
||||
transform: scaleY(0.7);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
.calendar .now-line:after.line2 {
|
||||
.calendar .now-line.line2 {
|
||||
z-index: 3;
|
||||
opacity: 0.5;
|
||||
background: #d3bc8d;
|
||||
@ -256,7 +256,49 @@ body {
|
||||
color: #d3bc8d;
|
||||
background-image: linear-gradient(to right, #333465, #333465 80%, rgba(51, 52, 101, 0) 100%);
|
||||
}
|
||||
.cal-abyss-cont .cal-item:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3px;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
position: absolute;
|
||||
background: #d3bc8d;
|
||||
z-index: 8;
|
||||
}
|
||||
.cal-abyss-cont .cal-item:after {
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
.calendar-mode .for-list-mode {
|
||||
display: none;
|
||||
}
|
||||
.list-mode .container {
|
||||
width: 740px;
|
||||
}
|
||||
.list-mode .for-calendar-mode {
|
||||
display: none;
|
||||
}
|
||||
.list-mode .cal-bg {
|
||||
width: initial;
|
||||
}
|
||||
.list-mode .cal-list {
|
||||
padding: 45px 10px 0;
|
||||
}
|
||||
.list-mode .calendar {
|
||||
width: 700px;
|
||||
}
|
||||
.list-mode .cal-abyss-cont {
|
||||
height: initial !important;
|
||||
}
|
||||
.list-mode .cal-item {
|
||||
position: relative;
|
||||
margin-left: 0 !important;
|
||||
width: initial !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
.list-mode .now-line {
|
||||
display: none;
|
||||
}
|
||||
/*# sourceMappingURL=calendar.css.map */
|
||||
@ -6,10 +6,10 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/calendar.css"/>
|
||||
</head>
|
||||
<body class="elem-hydro">
|
||||
<body class="elem-hydro {{displayMode}}-mode">
|
||||
<div class="container elem-bg" id="container">
|
||||
<div class="calendar">
|
||||
<div class="cal-bg">
|
||||
<div class="cal-bg for-calendar-mode">
|
||||
<table class="cont-table" border-collapse="collapse">
|
||||
<tr class="tr thead">
|
||||
{{each dateList d}}
|
||||
@ -28,6 +28,16 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="cal-bg for-list-mode">
|
||||
<table class="cont-table" border-collapse="collapse">
|
||||
<tr class="tr thead">
|
||||
<td class="td month">活动列表</td>
|
||||
</tr>
|
||||
<tr class="tr">
|
||||
<td class="line"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="cal-list">
|
||||
<div class="cal-abyss-cont">
|
||||
{{each abyss li}}
|
||||
|
||||
@ -257,7 +257,7 @@ body {
|
||||
|
||||
.calendar .now-line {
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
top: 86px;
|
||||
bottom: -18px;
|
||||
width: 2px;
|
||||
box-shadow: 0 0 5px 0 #fff;
|
||||
@ -277,16 +277,16 @@ body {
|
||||
left: -9px;
|
||||
transform: scaleY(.7);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
&.line2 {
|
||||
z-index: 3;
|
||||
opacity: .5;
|
||||
background: rgb(211, 188, 141);
|
||||
width: 2px;
|
||||
box-shadow: none;
|
||||
&.line2 {
|
||||
z-index: 3;
|
||||
opacity: .5;
|
||||
background: rgb(211, 188, 141);
|
||||
width: 2px;
|
||||
box-shadow: none;
|
||||
|
||||
&:after {
|
||||
}
|
||||
&:after {
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -321,8 +321,66 @@ body {
|
||||
.linear-bg(#333465);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3px;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
position: absolute;
|
||||
background: #d3bc8d;
|
||||
z-index: 8;
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-mode {
|
||||
.for-list-mode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-mode {
|
||||
|
||||
.container {
|
||||
width: 740px;
|
||||
}
|
||||
|
||||
.for-calendar-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cal-bg {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.cal-list {
|
||||
padding: 45px 10px 0;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.cal-abyss-cont {
|
||||
height: initial !important;
|
||||
}
|
||||
|
||||
.cal-item {
|
||||
position: relative;
|
||||
margin-left: 0 !important;
|
||||
width: initial !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.now-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,63 +1,49 @@
|
||||
@font-face {
|
||||
font-family: "tttgbnumber";
|
||||
src: url("../common/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;
|
||||
font-family: Number, YS;
|
||||
transform: scale(1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 800px;
|
||||
padding: 0px 0px 10px 0px;
|
||||
padding: 0 0 10px 0;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.head-box {
|
||||
box-shadow: 0 5px 5px 0 rgb(0 0 0 / 25%);
|
||||
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
|
||||
width: 100%;
|
||||
height: 355px;
|
||||
overflow: hidden;
|
||||
font-family: tttgbnumber;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
text-shadow: 0px 0px 3px rgba(0 0 0 / 70%);
|
||||
margin-bottom: 25px;
|
||||
margin: 0 0 25px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.head-box .head {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #f0efe0;
|
||||
box-shadow: 0 0 3px 6px rgb(0 0 0 / 10%);
|
||||
box-shadow: 0 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: 52px;
|
||||
top: 35px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.head-box .head img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.head-box .head-astro {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
@ -66,7 +52,6 @@ body {
|
||||
left: 52px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.head-box .head-icon {
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
@ -76,14 +61,12 @@ body {
|
||||
height: 52px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.head-box .head-icon img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
float: left;
|
||||
margin: 4px 6px;
|
||||
}
|
||||
|
||||
.head-box .head-detail {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
@ -91,38 +74,30 @@ body {
|
||||
width: 540px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.head-box .name {
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.head-box .desc {
|
||||
font-size: 17px;
|
||||
font-size: 20px;
|
||||
margin-top: 17px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.head-box .ascension {
|
||||
font-size: 17px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.head-box .material {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.head-box .meterial_group {
|
||||
float: left;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.head-box .material span {
|
||||
display: block;
|
||||
height: 24px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.head-box .meterial_group div {
|
||||
width: 34px;
|
||||
height: 40px;
|
||||
@ -132,34 +107,29 @@ body {
|
||||
float: left;
|
||||
background-size: cover;
|
||||
margin-right: 5px;
|
||||
box-shadow: 0 0 3px 0px rgb(0 0 0 / 20%);
|
||||
box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.head-box .material span.meterial_desc {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.head-box .meterial_group div img {
|
||||
width: 30px;
|
||||
vertical-align: baseline;
|
||||
vertical-align: -webkit-baseline-middle;
|
||||
}
|
||||
|
||||
.head-box .genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
.base_info {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.uid:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
@ -170,35 +140,27 @@ body {
|
||||
top: 0;
|
||||
background: #d3bc8d;
|
||||
}
|
||||
|
||||
.uid {
|
||||
font-family: tttgbnumber;
|
||||
}
|
||||
|
||||
.head-box .data-box {
|
||||
margin-top: 220px;
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.head-box .data-box .tab-label {
|
||||
width: 170px;
|
||||
left: 20px;
|
||||
border-radius: 8px;
|
||||
background: #272f43;
|
||||
}
|
||||
|
||||
.data-box {
|
||||
border-radius: 15px;
|
||||
margin: 30px 15px;
|
||||
padding: 30px 15px 5px 15px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
@ -210,46 +172,41 @@ body {
|
||||
border-radius: 15px 0px 15px 15px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.data-line {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.data_line_item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
/*margin: 0 20px;*/
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: tttgbnumber;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.data-box .label {
|
||||
font-size: 18px;
|
||||
color: #7f858a;
|
||||
line-height: 1;
|
||||
margin-top: 3px;
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.talent-box {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
margin: 20px 15px 15px 15px;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.talent-detail {
|
||||
padding: 30px 15px 5px 15px;
|
||||
background: url(card-bg.png) left top repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.talent-info {
|
||||
position: relative;
|
||||
padding-left: 140px;
|
||||
@ -259,7 +216,6 @@ body {
|
||||
padding-bottom: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.talent-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
@ -274,7 +230,6 @@ body {
|
||||
background-position: center center;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.talent-icon img {
|
||||
width: 46%;
|
||||
height: 46%;
|
||||
@ -283,64 +238,75 @@ body {
|
||||
left: 50%;
|
||||
margin: -22% 0 0 -23%;
|
||||
}
|
||||
|
||||
.talent-info .talent-detail-table {
|
||||
margin-left: -140px;
|
||||
}
|
||||
|
||||
.talent-name {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
margin: 0 0 15px 0;
|
||||
color: #d3bc8e;
|
||||
line-height: 45px;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.talent-desc {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
padding-right: 10px;
|
||||
font-family: Number, YS2;
|
||||
}
|
||||
|
||||
.talent-desc strong {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-family: Number, YS;
|
||||
font-weight: normal;
|
||||
color: #d3bc8e;
|
||||
}
|
||||
|
||||
.talent-line {
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.talent-line:first-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.talent-table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
margin: 15px -10px -10px -15px;
|
||||
margin: 15px -10px -5px -15px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
width: calc(100% + 30px);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.talent-table .tr {
|
||||
display: table-row;
|
||||
.talent-table .th {
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.talent-table .colspan {
|
||||
display: table-column-group;
|
||||
.talent-table .td {
|
||||
font-size: 14px;
|
||||
}
|
||||
.talent-table .talent-name {
|
||||
min-width: 100px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.talent-table .td,
|
||||
.talent-table .th {
|
||||
padding: 7px;
|
||||
line-height: 24px;
|
||||
font-family: Number, YS;
|
||||
}
|
||||
.talent-table .tr:last-child .td {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.talent-table .tr > div:last-child {
|
||||
padding-right: 5px;
|
||||
}
|
||||
/*
|
||||
|
||||
.talent-table .td,
|
||||
.talent-table .th {
|
||||
@ -360,7 +326,8 @@ body {
|
||||
}
|
||||
|
||||
.talent-table .th {
|
||||
background: rgba(34, 41, 51, .5)
|
||||
background: rgba(34, 41, 51, .5);
|
||||
|
||||
}
|
||||
|
||||
.talent-table .lv {
|
||||
@ -381,78 +348,17 @@ body {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.talent-table .tr:last-child .td {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.talent-table .tr > div:last-child {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
*/
|
||||
.passive .talent-table {
|
||||
margin-right: 20px;
|
||||
width: 100%;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
.elem_anemo .talent-icon {
|
||||
background-image: url(../common/bg/talent-anemo.png)
|
||||
}
|
||||
|
||||
.elem_anemo .talent-box {
|
||||
background-image: url(../common/bg/bg-anemo.jpg);
|
||||
}
|
||||
|
||||
|
||||
.elem_cryo .talent-icon {
|
||||
background-image: url(../common/bg/talent-cryo.png)
|
||||
}
|
||||
|
||||
.elem_cryo .talent-box {
|
||||
background-image: url(../common/bg/bg-cryo.jpg);
|
||||
}
|
||||
|
||||
|
||||
.elem_electro .talent-icon {
|
||||
background-image: url(../common/bg/talent-electro.png)
|
||||
}
|
||||
|
||||
.elem_electro .talent-box {
|
||||
background-image: url(../common/bg/bg-electro.jpg);
|
||||
}
|
||||
|
||||
|
||||
.elem_geo .talent-icon {
|
||||
background-image: url(../common/bg/talent-geo.png)
|
||||
}
|
||||
|
||||
.elem_geo .talent-box {
|
||||
background-image: url(../common/bg/bg-geo.jpg);
|
||||
}
|
||||
|
||||
|
||||
.elem_hydro .talent-icon {
|
||||
background-image: url(../common/bg/talent-hydro.png)
|
||||
}
|
||||
|
||||
.elem_hydro .talent-box {
|
||||
background-image: url(../common/bg/bg-hydro.jpg);
|
||||
}
|
||||
|
||||
|
||||
.elem_pyro .talent-icon {
|
||||
background-image: url(../common/bg/talent-pyro.png)
|
||||
}
|
||||
|
||||
.elem_pyro .talent-box {
|
||||
background-image: url(../common/bg/bg-pyro.jpg);
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-family: "tttgbnumber";
|
||||
text-align: center;
|
||||
color: #7994a7;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=character.less.map */
|
||||
@ -3,13 +3,14 @@
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
|
||||
<link rel="shortcut icon" href="#"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/character.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div class="container elem_{{elem}}" id="container">
|
||||
<div class="container elem-{{elem}}" id="container">
|
||||
<div class="head-box" style="background-image:url('{{_res_path}}/{{_char}}/party.png')">
|
||||
<div class="head">
|
||||
<img src="{{_res_path}}{{_char}}/face.png"/>
|
||||
@ -42,8 +43,8 @@
|
||||
{{if mode == "talent"}}
|
||||
|
||||
{{each talent skill type}}
|
||||
<div class="talent-box">
|
||||
<div class="talent-detail">
|
||||
<div class="talent-box elem-bg">
|
||||
<div class="talent-detail cont">
|
||||
<div class="talent-line">
|
||||
<div class="talent-icon">
|
||||
<img src="{{_res_path}}{{_char}}/talent_{{type}}.png"/>
|
||||
@ -61,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{{if skill.tables && skill.tables.length > 0}}
|
||||
<table class="talent-table">
|
||||
<table class="talent-table cont-table">
|
||||
<tr class="tr">
|
||||
<td class="th"></td>
|
||||
{{each skill.lvs lv idx}}
|
||||
@ -72,11 +73,11 @@
|
||||
</tr>
|
||||
{{each skill.tables tr}}
|
||||
<tr class="tr">
|
||||
<td class="th talent_name">
|
||||
<td class="th talent-name">
|
||||
{{tr.name}}
|
||||
</td>
|
||||
{{if tr.isSame}}
|
||||
<td class="td colspan" colspan="{{type == a ? 6 : 8}}" class="td">{{tr.values[0]}} </td>
|
||||
<td class="td colspan" colspan="{{type == a ? 6 : 8}}" class="td">{{tr.values[0]}}</td>
|
||||
{{else}}
|
||||
{{each tr.values v idx}}
|
||||
{{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
|
||||
@ -93,7 +94,7 @@
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
<div class="talent-box">
|
||||
<div class="talent-box elem-bg">
|
||||
<div class="talent-detail passive">
|
||||
{{each passive pass idx}}
|
||||
<div class="talent-line">
|
||||
@ -131,7 +132,7 @@
|
||||
{{/if}}
|
||||
|
||||
{{if mode == "cons"}}
|
||||
<div class="talent-box">
|
||||
<div class="talent-box elem-bg">
|
||||
<div class="talent-detail">
|
||||
{{each cons con idx}}
|
||||
<div class="talent-line">
|
||||
|
||||
418
resources/wiki/character.less
Normal file
418
resources/wiki/character.less
Normal file
@ -0,0 +1,418 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
color: #1e1f20;
|
||||
font-family: Number, YS;
|
||||
transform: scale(1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 800px;
|
||||
padding: 0 0 10px 0;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.head-box {
|
||||
box-shadow: 0 5px 5px 0 rgb(0 0 0 / 25%);
|
||||
width: 100%;
|
||||
height: 355px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
text-shadow: 0px 0px 3px rgba(0 0 0 / 70%);
|
||||
margin: 0 0 25px;
|
||||
border-radius: 0;
|
||||
|
||||
|
||||
.head {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #f0efe0;
|
||||
box-shadow: 0 0 3px 6px rgb(0 0 0 / 10%);
|
||||
position: absolute;
|
||||
left: 52px;
|
||||
top: 35px;
|
||||
background-size: cover;
|
||||
|
||||
img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.head-astro {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
top: 198px;
|
||||
font-size: 17px;
|
||||
left: 52px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.head-icon {
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
top: 238px;
|
||||
width: 172px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
height: 52px;
|
||||
border-radius: 26px;
|
||||
|
||||
img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
float: left;
|
||||
margin: 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.head-detail {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 35px;
|
||||
width: 540px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 20px;
|
||||
margin-top: 17px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.ascension {
|
||||
font-size: 17px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.material {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.meterial_group {
|
||||
float: left;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.material span {
|
||||
display: block;
|
||||
height: 24px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.meterial_group div {
|
||||
width: 34px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
float: left;
|
||||
background-size: cover;
|
||||
margin-right: 5px;
|
||||
box-shadow: 0 0 3px 0px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.material span.meterial_desc {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.meterial_group div img {
|
||||
width: 30px;
|
||||
vertical-align: baseline;
|
||||
vertical-align: -webkit-baseline-middle;
|
||||
}
|
||||
|
||||
.genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
}
|
||||
|
||||
.base_info {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.uid:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 24px;
|
||||
border-radius: 1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #d3bc8d;
|
||||
}
|
||||
|
||||
.head-box .data-box {
|
||||
margin-top: 220px;
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
|
||||
.tab-label {
|
||||
width: 170px;
|
||||
left: 20px;
|
||||
border-radius: 8px;
|
||||
background: #272f43;
|
||||
}
|
||||
}
|
||||
|
||||
.data-box {
|
||||
border-radius: 15px;
|
||||
margin: 30px 15px;
|
||||
padding: 30px 15px 5px 15px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: -8px;
|
||||
background: #d4b98c;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
padding: 6px 20px;
|
||||
border-radius: 15px 0px 15px 15px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.data-line {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.data_line_item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
/*margin: 0 20px;*/
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.data-box .label {
|
||||
font-size: 18px;
|
||||
color: #7f858a;
|
||||
line-height: 1;
|
||||
margin-top: 3px;
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.talent-box {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
|
||||
position: relative;
|
||||
margin: 20px 15px 15px 15px;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.talent-detail {
|
||||
padding: 30px 15px 5px 15px;
|
||||
background: url(card-bg.png) left top repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.talent-info {
|
||||
position: relative;
|
||||
padding-left: 140px;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
min-height: 80px;
|
||||
padding-bottom: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.talent-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
padding: 5px;
|
||||
display: table;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -10px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.talent-icon img {
|
||||
width: 46%;
|
||||
height: 46%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -22% 0 0 -23%;
|
||||
}
|
||||
|
||||
.talent-info .talent-detail-table {
|
||||
margin-left: -140px;
|
||||
}
|
||||
|
||||
.talent-name {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
margin: 0 0 15px 0;
|
||||
color: #d3bc8e;
|
||||
line-height: 45px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.talent-desc {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
padding-right: 10px;
|
||||
font-family: Number, YS2;
|
||||
}
|
||||
|
||||
.talent-desc strong {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
font-family: Number, YS;
|
||||
font-weight: normal;
|
||||
color: #d3bc8e;
|
||||
}
|
||||
|
||||
.talent-line {
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.talent-line:first-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.talent-table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
margin: 15px -10px -5px -15px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
width: calc(100% + 30px);
|
||||
color: #fff;
|
||||
|
||||
.th {
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.td {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.talent-name {
|
||||
min-width: 100px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.td, .th {
|
||||
padding: 7px;
|
||||
line-height: 24px;
|
||||
font-family: Number, YS;
|
||||
}
|
||||
|
||||
.tr:last-child .td {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.tr > div:last-child {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
.talent-table .td,
|
||||
.talent-table .th {
|
||||
font-size: 14px;
|
||||
display: table-cell;
|
||||
box-shadow: 0 0 1px 0 #888 inset;
|
||||
padding: 7px 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.talent-table .tr:nth-child(odd) {
|
||||
background: rgba(34, 41, 51, .6)
|
||||
}
|
||||
|
||||
.talent-table .tr:nth-child(even) {
|
||||
background: rgba(34, 41, 51, .3)
|
||||
}
|
||||
|
||||
.talent-table .th {
|
||||
background: rgba(34, 41, 51, .5);
|
||||
|
||||
}
|
||||
|
||||
.talent-table .lv {
|
||||
font-family: tttgbnumber;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.talent-table .th {
|
||||
font-weight: bold;
|
||||
padding: 5px 3px;
|
||||
color: #d3bc8e;
|
||||
}
|
||||
|
||||
.talent-table .talent_name {
|
||||
min-width: 120px;
|
||||
padding: 10px 3px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
*/
|
||||
|
||||
.passive .talent-table {
|
||||
margin-right: 20px;
|
||||
width: 100%;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #7994a7;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user