mirror of
https://github.com/yoimiya-kokomi/miao-plugin.git
synced 2024-09-28 03:46:09 +00:00
* #角色面板 伤害计算新增行秋、班尼特
* `#喵喵日历` 的一些样式微调 * 底层升级：抽象了部分公共组件为tpl模板以提高复用度，css改为less处理
This commit is contained in:
yoimiya-kokomi
parent
0e4905accd
commit
769e98ecad
1
.gitignore
vendored
1
.gitignore
vendored
@ -4,3 +4,4 @@
|
||||
/resources/miao-res-plus/
|
||||
/components/setting.json
|
||||
/config.js
|
||||
*.css.map
|
||||
|
||||
14
CHANGELOG.md
14
CHANGELOG.md
@ -1,10 +1,14 @@
|
||||
# 1.4.3
|
||||
# 1.5.0
|
||||
|
||||
* 增加`#喵喵日历` 功能
|
||||
* 【！请注意！】此功能需要安装moment库，请在Yunzai安装目录下运行`npm install moment`后再进行升级
|
||||
* 展示当前活动内容，包括深渊更新信息
|
||||
* `#角色面板` 伤害计算新增部分角色
|
||||
* 目前支持：雷神、胡桃、魈、神子、甘雨、宵宫、公子、绫人、绫华、心海、钟离、刻晴、阿贝多、香菱
|
||||
* 【！请注意！】此功能需要安装moment库，请在Yunzai安装目录下运行`npm install moment`后再进行升级
|
||||
* 展示当前进行中及即将开始的活动，包括深境螺旋
|
||||
* `#角色面板` 伤害计算目前支持
|
||||
* 长柄武器：雷神、胡桃、魈、钟离、香菱ⁿᵉʷ
|
||||
* 法器：神子、心海
|
||||
* 弓：甘雨、宵宫、公子
|
||||
* 单手剑：绫人、绫华、刻晴、阿贝多ⁿᵉʷ、行秋ⁿᵉʷ、班尼特ⁿᵉʷ
|
||||
* 底层升级：抽象了部分公共组件为tpl模板以提高复用度，css改为less处理
|
||||
|
||||
# 1.4.0
|
||||
|
||||
|
||||
@ -4,97 +4,79 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Number";
|
||||
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;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YS";
|
||||
src: url("../common/font/HYWH-85W.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: top left no-repeat #2a3860;
|
||||
background-size: contain;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
.head-box {
|
||||
border-radius: 15px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
.head-box .title {
|
||||
font-size: 36px;
|
||||
font-family: NZBZ, sans-serif;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
|
||||
.head-box .genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
.head-box .label {
|
||||
font-size: 16px;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
font-family: Number, sans-serif;
|
||||
@ -105,119 +87,99 @@ body {
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cons {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* */
|
||||
.cons-0 {
|
||||
border-radius: 4px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons-1 {
|
||||
background-color: #71b167;
|
||||
border-radius: 4px;
|
||||
background: #71b1b7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons-2 {
|
||||
background-color: #369961;
|
||||
border-radius: 4px;
|
||||
background: #369961;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons-3 {
|
||||
background-color: #4596b9;
|
||||
border-radius: 4px;
|
||||
background: #4596b9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons-4 {
|
||||
background-color: #4560b9;
|
||||
border-radius: 4px;
|
||||
background: #4560b9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons-5 {
|
||||
background-color: #531ba9cf;
|
||||
border-radius: 4px;
|
||||
background: #531ba9cf;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cons-6 {
|
||||
background-color: #ff5722;
|
||||
border-radius: 4px;
|
||||
background: #ff5722;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/******** ELEM ********/
|
||||
|
||||
.elem-anemo .talent-icon {
|
||||
background-image: url(../common/bg/talent-anemo.png)
|
||||
background-image: url("./bg/talent-anemo.png");
|
||||
}
|
||||
|
||||
.elem-anemo .elem-bg {
|
||||
background-image: url(../common/bg/bg-anemo.jpg);
|
||||
.elem-anemo .elem-bg,
|
||||
.anemo-bg {
|
||||
background-image: url("./bg/bg-anemo.jpg");
|
||||
}
|
||||
|
||||
|
||||
.elem-cryo .talent-icon {
|
||||
background-image: url(../common/bg/talent-cryo.png)
|
||||
background-image: url("./bg/talent-cryo.png");
|
||||
}
|
||||
|
||||
.elem-cryo .elem-bg {
|
||||
background-image: url(../common/bg/bg-cryo.jpg);
|
||||
.elem-cryo .elem-bg,
|
||||
.cryo-bg {
|
||||
background-image: url("./bg/bg-cryo.jpg");
|
||||
}
|
||||
|
||||
|
||||
.elem-electro .talent-icon {
|
||||
background-image: url(../common/bg/talent-electro.png)
|
||||
background-image: url("./bg/talent-electro.png");
|
||||
}
|
||||
|
||||
.elem-electro .elem-bg {
|
||||
background-image: url(../common/bg/bg-electro.jpg);
|
||||
.elem-electro .elem-bg,
|
||||
.electro-bg {
|
||||
background-image: url("./bg/bg-electro.jpg");
|
||||
}
|
||||
|
||||
|
||||
.elem-geo .talent-icon {
|
||||
background-image: url(../common/bg/talent-geo.png)
|
||||
background-image: url("./bg/talent-geo.png");
|
||||
}
|
||||
|
||||
.elem-geo .elem-bg {
|
||||
background-image: url(../common/bg/bg-geo.jpg);
|
||||
.elem-geo .elem-bg,
|
||||
.geo-bg {
|
||||
background-image: url("./bg/bg-geo.jpg");
|
||||
}
|
||||
|
||||
|
||||
.elem-hydro .talent-icon {
|
||||
background-image: url(../common/bg/talent-hydro.png)
|
||||
background-image: url("./bg/talent-hydro.png");
|
||||
}
|
||||
|
||||
.elem-hydro .elem-bg {
|
||||
background-image: url(../common/bg/bg-hydro.jpg);
|
||||
.elem-hydro .elem-bg,
|
||||
.hydro-bg {
|
||||
background-image: url("./bg/bg-hydro.jpg");
|
||||
}
|
||||
|
||||
|
||||
.elem-pyro .talent-icon {
|
||||
background-image: url(../common/bg/talent-pyro.png)
|
||||
background-image: url("./bg/talent-pyro.png");
|
||||
}
|
||||
|
||||
.elem-pyro .elem-bg {
|
||||
background-image: url(../common/bg/bg-pyro.jpg);
|
||||
.elem-pyro .elem-bg,
|
||||
.pyro-bg {
|
||||
background-image: url("./bg/bg-pyro.jpg");
|
||||
}
|
||||
|
||||
|
||||
/* cont */
|
||||
|
||||
.cont {
|
||||
border-radius: 10px;
|
||||
background: url("../common/cont/card-bg.png") top left repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 5px 15px 5px 10px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.cont-title {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
color: #d3bc8e;
|
||||
font-family: YS;
|
||||
@ -225,7 +187,6 @@ body {
|
||||
text-align: left;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.cont-title span {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
@ -233,7 +194,6 @@ body {
|
||||
font-family: Number, YS;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.cont-body {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
@ -242,21 +202,17 @@ body {
|
||||
font-family: YS;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul.cont-msg {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
ul.cont-msg li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
ul.cont-msg li strong {
|
||||
font-weight: normal;
|
||||
margin: 0 2px;
|
||||
color: #d3bc8e;
|
||||
}
|
||||
|
||||
.cont-footer {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
@ -264,60 +220,50 @@ ul.cont-msg li strong {
|
||||
font-family: YS;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.cont-table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cont-table .tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.cont-table .tr:nth-child(even) {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.cont-table .tr:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, .4);
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
|
||||
.cont-table .tr > div,
|
||||
.cont-table .tr > td{
|
||||
.cont-table .tr > td {
|
||||
display: table-cell;
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.cont-table .tr > div.value-full {
|
||||
display: table;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.cont-table .tr > div.value-none {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cont-table .thead {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cont-table .thead > div,
|
||||
.cont-table .thead > td{
|
||||
.cont-table .thead > td {
|
||||
font-family: YS;
|
||||
color: #d3bc8e;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.cont-table .title,
|
||||
.cont-table .th {
|
||||
font-family: YS;
|
||||
color: #d3bc8e;
|
||||
padding-right: 15px;
|
||||
text-align: right;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
min-width: 100px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=common.css.map */
|
||||
263
resources/common/common.less
Normal file
263
resources/common/common.less
Normal file
@ -0,0 +1,263 @@
|
||||
@font-face {
|
||||
font-family: "HWZS";
|
||||
src: url("../common/font/华文中宋.TTF");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Number";
|
||||
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;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YS";
|
||||
src: url("../common/font/HYWH-85W.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: top left no-repeat #2a3860;
|
||||
background-size: contain;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
.head-box {
|
||||
border-radius: 15px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
.head-box .title {
|
||||
font-size: 36px;
|
||||
font-family: NZBZ, sans-serif;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
|
||||
}
|
||||
|
||||
|
||||
.head-box .genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
.head-box .label {
|
||||
font-size: 16px;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
font-family: Number, sans-serif;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
.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(5, #531ba9cf);
|
||||
.cons(6, #ff5722);
|
||||
|
||||
|
||||
/******** ELEM ********/
|
||||
|
||||
@elems: anemo, cryo, electro, geo, hydro, pyro;
|
||||
|
||||
each(@elems, {
|
||||
.elem-@{value} .talent-icon {
|
||||
background-image: url("./bg/talent-@{value}.png");
|
||||
}
|
||||
|
||||
.elem-@{value} .elem-bg,
|
||||
.@{value}-bg {
|
||||
background-image: url("./bg/bg-@{value}.jpg");
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/* cont */
|
||||
|
||||
.cont {
|
||||
border-radius: 10px;
|
||||
background: url("../common/cont/card-bg.png") top left repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 5px 15px 5px 10px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.cont-title {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
color: #d3bc8e;
|
||||
font-family: YS;
|
||||
padding: 10px 20px;
|
||||
text-align: left;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.cont-title span {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-left: 10px;
|
||||
font-family: Number, YS;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.cont-body {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
font-family: YS;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul.cont-msg {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
ul.cont-msg li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
ul.cont-msg li strong {
|
||||
font-weight: normal;
|
||||
margin: 0 2px;
|
||||
color: #d3bc8e;
|
||||
}
|
||||
|
||||
.cont-footer {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-family: YS;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.cont-table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cont-table .tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.cont-table .tr:nth-child(even) {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.cont-table .tr:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, .4);
|
||||
}
|
||||
|
||||
.cont-table .tr > div,
|
||||
.cont-table .tr > td {
|
||||
display: table-cell;
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.cont-table .tr > div.value-full {
|
||||
display: table;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.cont-table .tr > div.value-none {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cont-table .thead {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cont-table .thead > div,
|
||||
.cont-table .thead > td {
|
||||
font-family: YS;
|
||||
color: #d3bc8e;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.cont-table .title,
|
||||
.cont-table .th {
|
||||
font-family: YS;
|
||||
color: #d3bc8e;
|
||||
padding-right: 15px;
|
||||
text-align: right;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
min-width: 100px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
444
resources/common/tpl.css
Normal file
444
resources/common/tpl.css
Normal file
@ -0,0 +1,444 @@
|
||||
.item-card {
|
||||
width: 66px;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.item-card .badge {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
background: #e9e5dc;
|
||||
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
|
||||
}
|
||||
.item-card .badge img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*filter: contrast(95%);*/
|
||||
}
|
||||
.item-card .item-bg {
|
||||
width: 100%;
|
||||
padding: 100% 0 0;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
}
|
||||
.item-card .bg1 {
|
||||
background-image: url("./item/bg1.png");
|
||||
}
|
||||
.item-card .bg2 {
|
||||
background-image: url("./item/bg2.png");
|
||||
}
|
||||
.item-card .bg3 {
|
||||
background-image: url("./item/bg3.png");
|
||||
}
|
||||
.item-card .bg4 {
|
||||
background-image: url("./item/bg4.png");
|
||||
}
|
||||
.item-card .bg5 {
|
||||
background-image: url("./item/bg5.png");
|
||||
}
|
||||
.item-card .box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.item-card .box:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
}
|
||||
.item-card .box .item-desc {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
background: #e9e5dc;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-family: Number, YS;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 3px;
|
||||
}
|
||||
.item-card .box .item-desc:last-child {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.item-card .box .name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-card .box .item-img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.item-card .item-life {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 9;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: "tttgbnumber";
|
||||
}
|
||||
.item-card .life1 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life2 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life3 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life4 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.item-card .life5 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.profile {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 115px;
|
||||
bottom: 0;
|
||||
right: 8px;
|
||||
box-shadow: 0 0 2px 0 #fff;
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.profile .main-pic {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: -260px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.profile .detail {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
}
|
||||
.profile .char-name {
|
||||
font-size: 50px;
|
||||
font-family: NZBZ;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
text-align: right;
|
||||
}
|
||||
.profile .char-lv {
|
||||
font-family: Number;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
text-align: right;
|
||||
}
|
||||
.profile .attr {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.profile .detail li {
|
||||
width: 300px;
|
||||
font-size: 17px;
|
||||
list-style: none;
|
||||
padding: 0 100px 0 35px;
|
||||
position: relative;
|
||||
font-family: YS;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profile .attr li i {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-image: url("../character/icon.png");
|
||||
background-size: auto 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
opacity: 0.9;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.profile .i-hp {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
.profile .i-atk {
|
||||
background-position: -40px 0;
|
||||
}
|
||||
.profile .i-def {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
.profile .i-mastery {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
.profile .i-cr {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
.profile .i-cd {
|
||||
background-position: -140px 0;
|
||||
}
|
||||
.profile .i-re {
|
||||
background-position: -120px 0;
|
||||
}
|
||||
.profile .i-dmg {
|
||||
background-position: -160px 0;
|
||||
}
|
||||
.profile .detail li:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.profile .detail li:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
.profile .detail li strong {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 85px;
|
||||
text-align: right;
|
||||
font-family: Number, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
.profile .detail li span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
font-family: Number, sans-serif;
|
||||
color: #90e800;
|
||||
font-size: 15px;
|
||||
}
|
||||
.profile .talent-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
display: table;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: 90;
|
||||
}
|
||||
.profile .talent-icon img,
|
||||
.profile .talent-icon .profile .talent-icon-img {
|
||||
width: 46%;
|
||||
height: 46%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -22% 0 0 -23%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.profile .talent-icon span {
|
||||
background: #fff;
|
||||
width: 34px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
color: #000;
|
||||
box-shadow: 0 0 5px 0 #000;
|
||||
font-family: Number;
|
||||
}
|
||||
.profile .talent-icon.talent-plus span {
|
||||
background: #2e353e;
|
||||
color: #ffdfa0;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profile .talent-icon.talent-crown:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url("../../character/imgs/crown.png") no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin-left: -14px;
|
||||
}
|
||||
.profile .char-talents {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile .char-cons .talent-item,
|
||||
.profile .char-talents .talent-item {
|
||||
flex: 1;
|
||||
}
|
||||
.profile .char-cons {
|
||||
display: flex;
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 20px;
|
||||
}
|
||||
.profile .char-cons .talent-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
.profile .char-cons .talent-icon.off {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.arti-detail {
|
||||
width: 185px;
|
||||
border-radius: 10px;
|
||||
background: url("./cont/card-bg.png") top left repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
|
||||
height: 205px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.arti-detail .arti-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 3px;
|
||||
}
|
||||
.arti-detail .arti-icon span {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 0;
|
||||
margin-left: 5px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
.arti-detail .arti-icon img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.arti-detail .head {
|
||||
color: #fff;
|
||||
padding: 12px 0 8px 68px;
|
||||
}
|
||||
.arti-detail .head strong {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-font: YS;
|
||||
}
|
||||
.arti-detail .head span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.arti-detail .head .mark {
|
||||
font-family: Number, YS;
|
||||
}
|
||||
.arti-detail ul.detail {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
position: initial;
|
||||
font-family: YS;
|
||||
}
|
||||
.arti-detail ul.detail li {
|
||||
padding: 0 3px;
|
||||
font-size: 14px;
|
||||
position: initial;
|
||||
width: 100%;
|
||||
display: table;
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.arti-detail ul.detail li.nouse span {
|
||||
color: #888;
|
||||
}
|
||||
.arti-detail ul.detail li.arti-main {
|
||||
font-size: 16px;
|
||||
padding: 3px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.arti-detail ul.detail li span {
|
||||
position: initial;
|
||||
display: table-cell;
|
||||
color: #fff;
|
||||
font-family: YS;
|
||||
}
|
||||
.arti-detail ul.detail li span.title {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.arti-detail ul.detail li span.val {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
font-family: Number;
|
||||
}
|
||||
.arti-detail ul.detail li:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.arti-detail ul.detail li:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
.arti-detail .avatar-icon {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 26px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
}
|
||||
.arti-detail .avatar-icon img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.arti-detail .arti-icon img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.item-list .item {
|
||||
width: 65px;
|
||||
}
|
||||
/*# sourceMappingURL=tpl.css.map */
|
||||
16
resources/common/tpl.less
Normal file
16
resources/common/tpl.less
Normal file
@ -0,0 +1,16 @@
|
||||
|
||||
|
||||
@import url('tpl/item-card');
|
||||
@import url('tpl/avatar-profile');
|
||||
@import url('tpl/artis-detail');
|
||||
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.item-list .item {
|
||||
width: 65px;
|
||||
}
|
||||
116
resources/common/tpl/artis-detail.css
Normal file
116
resources/common/tpl/artis-detail.css
Normal file
@ -0,0 +1,116 @@
|
||||
.arti-detail {
|
||||
width: 185px;
|
||||
border-radius: 10px;
|
||||
background: url("../cont/card-bg.png") top left repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
|
||||
height: 205px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.arti-detail .arti-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 3px;
|
||||
}
|
||||
.arti-detail .arti-icon span {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 0;
|
||||
margin-left: 5px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
.arti-detail .arti-icon img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.arti-detail .head {
|
||||
color: #fff;
|
||||
padding: 12px 0 8px 68px;
|
||||
}
|
||||
.arti-detail .head strong {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-font: YS;
|
||||
}
|
||||
.arti-detail .head span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.arti-detail .head .mark {
|
||||
font-family: Number, YS;
|
||||
}
|
||||
.arti-detail ul.detail {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
position: initial;
|
||||
font-family: YS;
|
||||
}
|
||||
.arti-detail ul.detail li {
|
||||
padding: 0 3px;
|
||||
font-size: 14px;
|
||||
position: initial;
|
||||
width: 100%;
|
||||
display: table;
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.arti-detail ul.detail li.nouse span {
|
||||
color: #888;
|
||||
}
|
||||
.arti-detail ul.detail li.arti-main {
|
||||
font-size: 16px;
|
||||
padding: 3px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.arti-detail ul.detail li span {
|
||||
position: initial;
|
||||
display: table-cell;
|
||||
color: #fff;
|
||||
font-family: YS;
|
||||
}
|
||||
.arti-detail ul.detail li.title {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.arti-detail ul.detail li.val {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
font-family: Number;
|
||||
}
|
||||
.arti-detail ul.detail:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.arti-detail ul.detail:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
.arti-detail .avatar {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 26px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
}
|
||||
.arti-detail .avatar img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.arti-detail .arti-icon img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
/*# sourceMappingURL=artis-detail.css.map */
|
||||
25
resources/common/tpl/artis-detail.html
Normal file
25
resources/common/tpl/artis-detail.html
Normal file
@ -0,0 +1,25 @@
|
||||
{{set ds = $data[0]}}
|
||||
{{set {_res_path,_char,_sys_res_path} = $data[1]}}
|
||||
{{if ds.name && ds.main && ds.main[0] && ds.main[0]!="undefined"}}
|
||||
<div class="item arti-detail">
|
||||
<div class="avatar-icon">
|
||||
<img src="{{_res_path}}/meta/character/{{ds.avatar}}/side.png" onerror="whenError(this)"/>
|
||||
</div>
|
||||
<div class="arti-icon">
|
||||
<img src="{{_sys_res_path}}/genshin/logo/reliquaries/{{ds.name}}.png"/>
|
||||
</div>
|
||||
<div class="head">
|
||||
<strong>{{ds.name}}</strong>
|
||||
<span class="mark mark-{{ds.markType}}"><span>{{ds.mark}}分</span> - {{ds.markType}}</span>
|
||||
</div>
|
||||
<ul class="detail">
|
||||
<li class="arti-main"><span class="title">{{ds.main[0]}}</span><span class="val">+{{ds.main[1]}}</span></li>
|
||||
{{each ds.attrs attr}}
|
||||
{{if attr[0]}}
|
||||
<li class="{{ds.usefulMark[attr[0]] ? `useful`:`nouse`}}"><span class="title">{{attr[0]}}</span><span
|
||||
class="val">+{{attr[1]}}</span></li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
137
resources/common/tpl/artis-detail.less
Normal file
137
resources/common/tpl/artis-detail.less
Normal file
@ -0,0 +1,137 @@
|
||||
.arti-detail {
|
||||
width: 185px;
|
||||
border-radius: 10px;
|
||||
background: url("./cont/card-bg.png") top left repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
|
||||
height: 205px;
|
||||
overflow: hidden;
|
||||
|
||||
.arti-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 3px;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 0;
|
||||
margin-left: 5px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
color: #fff;
|
||||
padding: 12px 0 8px 68px;
|
||||
|
||||
strong {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-font: YS;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
font-family: Number, YS;
|
||||
}
|
||||
}
|
||||
|
||||
ul.detail {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
position: initial;
|
||||
font-family: YS;
|
||||
|
||||
li {
|
||||
padding: 0 3px;
|
||||
font-size: 14px;
|
||||
position: initial;
|
||||
width: 100%;
|
||||
display: table;
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
|
||||
&.nouse span {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
&.arti-main {
|
||||
font-size: 16px;
|
||||
padding: 3px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
position: initial;
|
||||
display: table-cell;
|
||||
color: #fff;
|
||||
font-family: YS;
|
||||
|
||||
|
||||
&.title {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&.val {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
font-family: Number;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:nth-child(even) {
|
||||
background: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, .4)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 26px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.arti-icon img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
}
|
||||
19
resources/common/tpl/artis-item.html
Normal file
19
resources/common/tpl/artis-item.html
Normal file
@ -0,0 +1,19 @@
|
||||
{{set ds = $data[0]}}
|
||||
{{set {_res_path,_char,_sys_res_path} = $data[1]}}
|
||||
|
||||
<div class="item-card">
|
||||
<span class="badge">
|
||||
<img src="{{_sys_res_path}}/genshin/logo/side/{{ds.avatar==`旅行者`?`荧`:ds.avatar}}.png"/>
|
||||
</span>
|
||||
<div class="box">
|
||||
{{ if ds.affix_level>1}}
|
||||
<span class="item-life life{{ds.affix_level}}">
|
||||
{{ds.affix_level}}
|
||||
</span>
|
||||
{{/if}}
|
||||
<div class="item-bg bg{{ds.rarity}}"></div>
|
||||
<img class="item-img" src="{{_sys_res_path}}/genshin/logo/reliquaries/{{ds.name}}.png"/>
|
||||
<div class="item-desc artis-lvl">Lv.{{ds.level}}</div>
|
||||
<div class="item-desc artis-name">{{ds.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
0
resources/common/tpl/avatar-card.css
Normal file
0
resources/common/tpl/avatar-card.css
Normal file
18
resources/common/tpl/avatar-card.html
Normal file
18
resources/common/tpl/avatar-card.html
Normal file
@ -0,0 +1,18 @@
|
||||
{{set avatar = $data[0]}}
|
||||
{{set {_res_path,_char} = $data[1]}}
|
||||
|
||||
<div class="item">
|
||||
<div class="item-bg elem-{{avatar.element}}">
|
||||
<div class="role-box char-{{avatar.name}}">
|
||||
<img class="role" src="{{_res_path}}{{_char}}/{{avatar.name}}/gacha_card.png"/>
|
||||
</div>
|
||||
{{ 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>
|
||||
</div>
|
||||
0
resources/common/tpl/avatar-card.less
Normal file
0
resources/common/tpl/avatar-card.less
Normal file
204
resources/common/tpl/avatar-profile.css
Normal file
204
resources/common/tpl/avatar-profile.css
Normal file
@ -0,0 +1,204 @@
|
||||
.profile {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 115px;
|
||||
bottom: 0;
|
||||
right: 8px;
|
||||
box-shadow: 0 0 2px 0 #fff;
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.profile .main-pic {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: -260px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.profile .detail {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
}
|
||||
.profile .char-name {
|
||||
font-size: 50px;
|
||||
font-family: NZBZ;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
text-align: right;
|
||||
}
|
||||
.profile .char-lv {
|
||||
font-family: Number;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
text-align: right;
|
||||
}
|
||||
.profile .attr {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.profile .detail li {
|
||||
width: 300px;
|
||||
font-size: 17px;
|
||||
list-style: none;
|
||||
padding: 0 100px 0 35px;
|
||||
position: relative;
|
||||
font-family: YS;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profile .attr li i {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-image: url("../../character/icon.png");
|
||||
background-size: auto 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
opacity: 0.9;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.profile .i-hp {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
.profile .i-atk {
|
||||
background-position: -40px 0;
|
||||
}
|
||||
.profile .i-def {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
.profile .i-mastery {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
.profile .i-cr {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
.profile .i-cd {
|
||||
background-position: -140px 0;
|
||||
}
|
||||
.profile .i-re {
|
||||
background-position: -120px 0;
|
||||
}
|
||||
.profile .i-dmg {
|
||||
background-position: -160px 0;
|
||||
}
|
||||
.profile .detail li:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.profile .detail li:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
.profile .detail li strong {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 85px;
|
||||
text-align: right;
|
||||
font-family: Number, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
.profile .detail li span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
font-family: Number, sans-serif;
|
||||
color: #90e800;
|
||||
font-size: 15px;
|
||||
}
|
||||
.profile .talent-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
display: table;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: 90;
|
||||
}
|
||||
.profile .talent-icon img,
|
||||
.profile .talent-icon .profile .talent-icon-img {
|
||||
width: 46%;
|
||||
height: 46%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -22% 0 0 -23%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.profile .talent-icon span {
|
||||
background: #fff;
|
||||
width: 34px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
color: #000;
|
||||
box-shadow: 0 0 5px 0 #000;
|
||||
font-family: Number;
|
||||
}
|
||||
.profile .talent-icon.talent-plus span {
|
||||
background: #2e353e;
|
||||
color: #ffdfa0;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profile .talent-icon.talent-crown:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url("../character/imgs/crown.png") no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin-left: -14px;
|
||||
}
|
||||
.profile .char-talents {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile .char-cons .talent-item,
|
||||
.profile .char-talents .talent-item {
|
||||
flex: 1;
|
||||
}
|
||||
.profile .char-cons {
|
||||
display: flex;
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 20px;
|
||||
}
|
||||
.profile .char-cons .talent-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
.profile .char-cons .talent-icon.off {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
/*# sourceMappingURL=avatar-profile.css.map */
|
||||
47
resources/common/tpl/avatar-profile.html
Normal file
47
resources/common/tpl/avatar-profile.html
Normal file
@ -0,0 +1,47 @@
|
||||
{{set ds = $data[0]}}
|
||||
{{set {_res_path, _char, _sys_res_path, uid} = $data[1]}}
|
||||
{{set {attr} = ds}}
|
||||
|
||||
<div class="profile">
|
||||
<div class="main-pic"
|
||||
style="background-image:url({{_res_path}}/meta/character/{{ds.name}}/gacha_splash.png)"></div>
|
||||
<div class="detail">
|
||||
<div class="char-name">{{ds.name}}</div>
|
||||
<div class="char-lv">
|
||||
{{if uid}}UID {{uid}} - {{/if}}
|
||||
{{if ds.lv}} Lv.{{ds.lv}}{{/if}}
|
||||
</div>
|
||||
<div class="char-talents">
|
||||
{{each ds.talentMap tName key}}
|
||||
<div class="talent-item">
|
||||
<div class="talent-icon
|
||||
{{talent[key].level_current > talent[key].level_original ? `talent-plus`:``}}
|
||||
{{talent[key].level_original == 10 ? `talent-crown`:``}}">
|
||||
<div class="talent-icon-img"
|
||||
style="background-image:url({{_res_path}}/meta/character/{{ds.name}}/talent_{{key}}.png)"></div>
|
||||
<span>{{talent[key].level_current}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<ul class="attr">
|
||||
<li><i class="i-hp"></i>生命值<strong>{{attr.hp}}</strong><span>(+{{attr.hpPlus}})</span></li>
|
||||
<li><i class="i-atk"></i>攻击力<strong>{{attr.atk}}</strong><span>(+{{attr.atkPlus}})</span></li>
|
||||
<li><i class="i-def"></i>防御力<strong>{{attr.def}}</strong><span>(+{{attr.defPlus}})</span></li>
|
||||
<li><i class="i-mastery"></i>元素精通<strong>{{attr.mastery}}</strong></li>
|
||||
<li><i class="i-cr"></i>暴击率<strong>{{attr.cRate}}</strong></li>
|
||||
<li><i class="i-cd"></i>暴击伤害<strong>{{attr.cDmg}}</strong></li>
|
||||
<li><i class="i-re"></i>元素充能<strong>{{attr.recharge}}</strong></li>
|
||||
<li><i class="i-dmg"></i>伤害加成<strong>{{attr.dmgBonus}}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="char-cons">
|
||||
{{each cons con idx}}
|
||||
<div class="cons-item">
|
||||
<div class="talent-icon {{idx * 1 > avatar.actived_constellation_num * 1 ? 'off' : '' }}">
|
||||
<img src="{{_res_path}}/meta/character/{{name}}/cons_{{idx}}.png"/>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
240
resources/common/tpl/avatar-profile.less
Normal file
240
resources/common/tpl/avatar-profile.less
Normal file
@ -0,0 +1,240 @@
|
||||
.profile {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 115px;
|
||||
bottom: 0;
|
||||
right: 8px;
|
||||
box-shadow: 0 0 2px 0 #fff;
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-pic {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: -260px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.detail {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.char-name {
|
||||
font-size: 50px;
|
||||
font-family: NZBZ;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.char-lv {
|
||||
font-family: Number;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.attr {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail li {
|
||||
width: 300px;
|
||||
font-size: 17px;
|
||||
list-style: none;
|
||||
padding: 0 100px 0 35px;
|
||||
position: relative;
|
||||
font-family: YS;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.attr li i {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-image: url("../character/icon.png");
|
||||
background-size: auto 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
opacity: .9;
|
||||
transform: scale(.9);
|
||||
|
||||
}
|
||||
|
||||
.i-hp {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.i-atk {
|
||||
background-position: -40px 0;
|
||||
}
|
||||
|
||||
.i-def {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
|
||||
.i-mastery {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
|
||||
.i-cr {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
|
||||
.i-cd {
|
||||
background-position: -140px 0;
|
||||
}
|
||||
|
||||
.i-re {
|
||||
background-position: -120px 0;
|
||||
}
|
||||
|
||||
.i-dmg {
|
||||
background-position: -160px 0;
|
||||
}
|
||||
|
||||
.detail li {
|
||||
|
||||
&:nth-child(even) {
|
||||
background: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, .4)
|
||||
}
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 85px;
|
||||
text-align: right;
|
||||
font-family: Number, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
font-family: Number, sans-serif;
|
||||
color: #90e800;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.talent-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
display: table;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: 90;
|
||||
|
||||
|
||||
img,
|
||||
.profile .talent-icon-img {
|
||||
width: 46%;
|
||||
height: 46%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -22% 0 0 -23%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
span {
|
||||
background: #fff;
|
||||
width: 34px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
color: #000;
|
||||
box-shadow: 0 0 5px 0 #000;
|
||||
font-family: Number;
|
||||
}
|
||||
|
||||
&.talent-plus span {
|
||||
background: #2e353e;
|
||||
color: #ffdfa0;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
&.talent-crown:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url("../../character/imgs/crown.png") no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin-left: -14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.char-talents {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.char-cons .talent-item,
|
||||
.char-talents .talent-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.char-cons {
|
||||
display: flex;
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 20px;
|
||||
|
||||
.talent-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 -5px
|
||||
}
|
||||
|
||||
.talent-icon.off {
|
||||
filter: grayscale(100%);
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
113
resources/common/tpl/item-card.css
Normal file
113
resources/common/tpl/item-card.css
Normal file
@ -0,0 +1,113 @@
|
||||
.item-card {
|
||||
width: 52px;
|
||||
margin: 0px 0 5px 7px;
|
||||
position: relative;
|
||||
}
|
||||
.item-card .badge {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
background: #e9e5dc;
|
||||
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
|
||||
}
|
||||
.item-card .badge img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*filter: contrast(95%);*/
|
||||
}
|
||||
.item-card .bg1 {
|
||||
background-image: url("imgs/bg1.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg2 {
|
||||
background-image: url("imgs/bg2.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg3 {
|
||||
background-image: url("imgs/bg3.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg4 {
|
||||
background-image: url("imgs/bg4.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg5 {
|
||||
background-image: url("imgs/bg5.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .box:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
}
|
||||
.item-card .box .desc {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #e9e5dc;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-family: Number;
|
||||
}
|
||||
.item-card .box .name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-card .life {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 9;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: "tttgbnumber";
|
||||
}
|
||||
.item-card .life1 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life2 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life3 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life4 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.item-card .life5 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
/*# sourceMappingURL=item-card.css.map */
|
||||
120
resources/common/tpl/item-card.less
Normal file
120
resources/common/tpl/item-card.less
Normal file
@ -0,0 +1,120 @@
|
||||
|
||||
.item-card {
|
||||
width: 66px;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
|
||||
|
||||
.badge {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
background: #e9e5dc;
|
||||
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
|
||||
}
|
||||
|
||||
.badge img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*filter: contrast(95%);*/
|
||||
}
|
||||
|
||||
.item-bg {
|
||||
width: 100%;
|
||||
padding: 100% 0 0;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
each(range(5), {
|
||||
.bg@{value} {
|
||||
background-image: url("./item/bg@{value}.png");
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
background: #e9e5dc;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-family: Number, YS;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 3px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-life {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 9;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: "tttgbnumber";
|
||||
}
|
||||
|
||||
.life(@idx, @color) {
|
||||
.life@{idx} {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.life(1, #62a8ea);
|
||||
.life(2, #62a8ea);
|
||||
.life(3, #62a8ea);
|
||||
.life(4, #ff5722);
|
||||
.life(5, #ff5722);
|
||||
}
|
||||
|
||||
17
resources/common/tpl/weapon-item.html
Normal file
17
resources/common/tpl/weapon-item.html
Normal file
@ -0,0 +1,17 @@
|
||||
{{ set weapon = $data[0] }}
|
||||
{{ set {_sys_res_path} = $data[1] }}
|
||||
|
||||
<div class="item-card">
|
||||
<span class="badge">
|
||||
<img src="{{_sys_res_path}}/genshin/logo/side/{{weapon.avatar==`旅行者`?`荧`:weapon.avatar}}.png"/>
|
||||
</span>
|
||||
<div class="box">
|
||||
{{ if weapon.affix_level>1}}
|
||||
<span class="item-life life{{weapon.affix_level}}">{{weapon.affix_level}}</span>
|
||||
{{/if}}
|
||||
<div class="item-bg bg{{weapon.rarity}}"></div>
|
||||
<img class="item-img" src="{{_sys_res_path}}genshin/logo/weapon/{{weapon.name}}.png"/>
|
||||
<div class="item-desc weapon-lv">Lv.{{weapon.level}}</div>
|
||||
<div class="item-desc weapon-name">{{weapon.showName || weapon.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
41
resources/meta/character/班尼特/calc.js
Normal file
41
resources/meta/character/班尼特/calc.js
Normal file
@ -0,0 +1,41 @@
|
||||
export const details = [{
|
||||
title: "点赞攻击力提升",
|
||||
dmg: ({ attr, talent, cons }) => {
|
||||
let baseAtk = attr.atk.base;
|
||||
let pct = talent.q['攻击力加成比例'];
|
||||
if (cons >= 1) {
|
||||
pct += 20;
|
||||
}
|
||||
return {
|
||||
avg: baseAtk * pct / 100
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: "Q+点E总伤害",
|
||||
dmg: ({ attr, talent, cons }, dmg) => {
|
||||
let eDmg = dmg(talent.e['点按伤害'], 'e'),
|
||||
qDmg = dmg(talent.q['技能伤害'], 'q');
|
||||
return {
|
||||
avg: eDmg.avg + qDmg.avg,
|
||||
dmg: eDmg.dmg + qDmg.dmg
|
||||
}
|
||||
|
||||
}
|
||||
}, {
|
||||
title: "点赞每跳治疗",
|
||||
dmg: ({ attr, calc, talent }, { heal }) => heal(talent.q['持续治疗2'][0] * calc(attr.hp) / 100 + talent.q['持续治疗2'][1] * 1)
|
||||
}];
|
||||
|
||||
export const defDmgIdx = 1;
|
||||
export const mainAttr = "atk,hp,cpct,cdmg";
|
||||
|
||||
export const buffs = [{
|
||||
cons: 1,
|
||||
title: "班尼特1命：Q攻击力提升比例提高20%",
|
||||
}, {
|
||||
cons: 6,
|
||||
title: "班尼特6命：获得15%火伤加成",
|
||||
data: {
|
||||
dmg: 15
|
||||
}
|
||||
}];
|
||||
30
resources/meta/character/行秋/calc.js
Normal file
30
resources/meta/character/行秋/calc.js
Normal file
@ -0,0 +1,30 @@
|
||||
export const details = [{
|
||||
title: "先Q后E两段伤害",
|
||||
params: { e: 1 },
|
||||
dmg: ({ talent, attr }, dmg) => dmg(talent.e["技能伤害"], "e")
|
||||
}, {
|
||||
title: "雨帘剑伤害",
|
||||
dmg: ({ talent, attr }, dmg) => dmg(talent.q["剑雨伤害"], "q")
|
||||
}, {
|
||||
title: "雨帘剑蒸发",
|
||||
dmg: ({ talent, attr }, dmg) => dmg(talent.q["剑雨伤害"], "q", "zf")
|
||||
}];
|
||||
|
||||
export const mainAttr = "atk,cpct,cdmg,mastery";
|
||||
|
||||
export const buffs = [{
|
||||
title: "行秋2命：受到剑雨攻击的敌人水元素抗性降低15%",
|
||||
cons: 2,
|
||||
data: {
|
||||
kx: ({ params }) => params.e === 1 ? 0 : 15
|
||||
}
|
||||
}, {
|
||||
title: `行秋4命：开Q后E的伤害提升50%`,
|
||||
cons: 4,
|
||||
data: {
|
||||
"eDmg": 50
|
||||
}
|
||||
}, {
|
||||
title: "元素精通：蒸发融化伤害提高[zf]%",
|
||||
mastery: "zf,rh"
|
||||
}];
|
||||
@ -6,7 +6,6 @@ export const details = [{
|
||||
dmg: ({ talent }, dmg) => dmg(talent.e['喷火伤害'], 'e', 'zf')
|
||||
}, {
|
||||
title: "旋火轮单次伤害",
|
||||
showDetail: true,
|
||||
dmg: ({ talent, }, dmg) => dmg(talent.q['旋火轮伤害'], 'q')
|
||||
}, {
|
||||
title: "旋火轮单次蒸发",
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
.font-ys {
|
||||
font-family: YS;
|
||||
}
|
||||
.font-number {
|
||||
font-family: Number, YS;
|
||||
}
|
||||
@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;
|
||||
@ -20,31 +24,27 @@ body {
|
||||
transform-origin: 0 0;
|
||||
width: 996px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 996px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
font-family: "tttgbnumber";
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin: 20px 0 10px 0;
|
||||
font-family: Number, YS;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
padding: 1px 0;
|
||||
width: 956px;
|
||||
margin: 20px;
|
||||
box-shadow: 0 0 0 10px rgba(0, 0, 0, .6);
|
||||
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cal-bg {
|
||||
position: absolute;
|
||||
width: 956px;
|
||||
@ -59,51 +59,37 @@ body {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cal-bg table {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.cal-bg .tr.thead {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
height: 40px;
|
||||
|
||||
}
|
||||
|
||||
.cal-bg .tr.thead td {
|
||||
font-family: Number, YS;
|
||||
font-family: YS;
|
||||
}
|
||||
|
||||
.cal-bg td {
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.cal-bg td.date {
|
||||
width: 7.692%;
|
||||
|
||||
}
|
||||
|
||||
.cal-bg td.date.current-date {
|
||||
background: #d3bc8e;
|
||||
border: 1px solid #d3bc8e;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.cal-bg td.line {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.cal-bg td.line.current-date {
|
||||
background: rgba(211, 188, 142, .4)
|
||||
background: rgba(211, 188, 142, 0.4);
|
||||
}
|
||||
|
||||
.cal-list {
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item {
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
@ -111,10 +97,9 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(232, 226, 216, 1);
|
||||
background: #e8e2d8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cal-list .cal-item:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -126,16 +111,14 @@ body {
|
||||
box-shadow: 0 0 1px 0 #000 inset, 0 0 2px 0 #222a3b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item .info {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 15px 50px 15px 55px;
|
||||
min-width: calc(100% - 400px);
|
||||
border-radius: 5px;
|
||||
background-image: linear-gradient(to right, rgba(232, 226, 216, 1), rgba(232, 226, 216, 1) 80%, rgba(232, 226, 216, 0) 100%);
|
||||
background-image: linear-gradient(to right, #E8E2D8, #E8E2D8 80%, rgba(232, 226, 216, 0) 100%);
|
||||
}
|
||||
|
||||
.cal-list .cal-item .banner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -145,72 +128,70 @@ body {
|
||||
right: 0;
|
||||
background-size: 100% auto;
|
||||
background-position: left 40%;
|
||||
|
||||
}
|
||||
|
||||
.cal-list .cal-item strong {
|
||||
display: block;
|
||||
font-family: YS;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.cal-list .cal-item span {
|
||||
display: block;
|
||||
font-family: Number, YS;
|
||||
font-size: 12px;
|
||||
|
||||
font-family: Number, YS;
|
||||
}
|
||||
|
||||
/*
|
||||
.cal-list .cal-item.type-weapon .info,
|
||||
.cal-list .cal-item.type-character .info {
|
||||
background-image: linear-gradient(to right, rgba(227, 164, 111), rgba(227, 164, 111) 80%, rgba(227, 164, 111, 0) 100%);
|
||||
}
|
||||
*/
|
||||
|
||||
.cal-list .cal-item.type-character {
|
||||
overflow: visible;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-character .info {
|
||||
padding-left: 65px;
|
||||
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-character .character-img {
|
||||
width: 65px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal:last-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.cal-list .cal-item.type-normal:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal .info {
|
||||
padding: 8px 20px 8px 15px;
|
||||
line-height: 16px;
|
||||
color: #4b5366;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal .cal-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 6px;
|
||||
margin-left: -3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.cal-list .cal-item.type-normal strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
.cal-list .cal-item.type-normal .info {
|
||||
padding-left: 38px;
|
||||
}
|
||||
.cal-list .cal-item.type-normal strong,
|
||||
.cal-list .cal-item.type-normal span {
|
||||
display: inline;
|
||||
}
|
||||
.cal-list .cal-item.type-normal.small-mode span {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
.cal-list .cal-item .cal-icon {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
@ -218,36 +199,6 @@ body {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal .cal-icon {
|
||||
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 6px;
|
||||
margin-left: -3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal .info {
|
||||
padding-left: 38px;
|
||||
}
|
||||
|
||||
|
||||
.cal-list .cal-item.type-normal strong,
|
||||
.cal-list .cal-item.type-normal span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cal-list .cal-item.type-normal.small-mode span {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.calendar .now-line {
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
@ -255,9 +206,8 @@ body {
|
||||
width: 2px;
|
||||
box-shadow: 0 0 5px 0 #fff;
|
||||
background: #fff;
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.calendar .now-line:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -269,27 +219,20 @@ body {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -9px;
|
||||
transform: scaleY(.7);
|
||||
transform: scaleY(0.7);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.calendar .now-line.line2 {
|
||||
.calendar .now-line:after.line2 {
|
||||
z-index: 3;
|
||||
opacity: .5;
|
||||
background: rgb(211, 188, 141);
|
||||
opacity: 0.5;
|
||||
background: #d3bc8d;
|
||||
width: 2px;
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
.calendar .now-line.line2:after {
|
||||
}
|
||||
|
||||
.now-time {
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.now-time span {
|
||||
color: #fff;
|
||||
font-family: Number, YS;
|
||||
@ -298,24 +241,22 @@ body {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.cal-abyss-cont {
|
||||
padding-top: 15px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cal-abyss-cont .cal-item {
|
||||
border-radius: 0;
|
||||
background: url("./imgs/abyss.jpg") #333465 top right no-repeat;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cal-abyss-cont .cal-item .info {
|
||||
background: none;
|
||||
color: rgba(211, 188, 141, 1);
|
||||
color: #d3bc8d;
|
||||
background-image: linear-gradient(to right, #333465, #333465 80%, rgba(51, 52, 101, 0) 100%);
|
||||
}
|
||||
|
||||
.cal-list .cal-abyss-cont .cal-item:after {
|
||||
.cal-abyss-cont .cal-item:after {
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=calendar.css.map */
|
||||
328
resources/wiki/calendar.less
Normal file
328
resources/wiki/calendar.less
Normal file
@ -0,0 +1,328 @@
|
||||
//linear-gradient(to right, rgba(232, 226, 216, 1), rgba(232, 226, 216, 1) 80%, rgba(232, 226, 216, 0) 100%);
|
||||
|
||||
.linear-bg(@color) {
|
||||
background-image: linear-gradient(to right, @color, @color 80%, fade(@color, 0) 100%);
|
||||
}
|
||||
|
||||
.font-ys {
|
||||
font-family: YS;
|
||||
}
|
||||
|
||||
.font-number {
|
||||
font-family: Number, YS;
|
||||
}
|
||||
|
||||
@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;
|
||||
transform: scale(1);
|
||||
transform-origin: 0 0;
|
||||
width: 996px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 996px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin: 20px 0 10px 0;
|
||||
.font-number;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
padding: 1px 0;
|
||||
width: 956px;
|
||||
margin: 20px;
|
||||
box-shadow: 0 0 0 10px rgba(0, 0, 0, .6);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cal-bg {
|
||||
position: absolute;
|
||||
width: 956px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 1px 0 #fff inset;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
table {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.tr.thead {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
height: 40px;
|
||||
|
||||
td {
|
||||
.font-ys;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
|
||||
&.date {
|
||||
width: 7.692%;
|
||||
|
||||
&.current-date {
|
||||
background: #d3bc8e;
|
||||
border: 1px solid #d3bc8e;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&.line {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
&.current-date {
|
||||
background: rgba(211, 188, 142, .4)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal-list {
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
|
||||
|
||||
.cal-item {
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(232, 226, 216, 1);
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
box-shadow: 0 0 1px 0 #000 inset, 0 0 2px 0 #222a3b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 15px 50px 15px 55px;
|
||||
min-width: calc(100% - 400px);
|
||||
border-radius: 5px;
|
||||
.linear-bg(#E8E2D8);
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-size: 100% auto;
|
||||
background-position: left 40%;
|
||||
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
.font-ys;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
.font-number;
|
||||
|
||||
}
|
||||
|
||||
|
||||
&.type-character {
|
||||
overflow: visible;
|
||||
margin-top: 20px;
|
||||
|
||||
.info {
|
||||
padding-left: 65px;
|
||||
|
||||
}
|
||||
|
||||
.character-img {
|
||||
width: 65px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.type-normal {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 8px 20px 8px 15px;
|
||||
line-height: 16px;
|
||||
color: #4b5366;
|
||||
}
|
||||
|
||||
.cal-icon {
|
||||
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 6px;
|
||||
margin-left: -3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-left: 38px;
|
||||
}
|
||||
|
||||
|
||||
strong,
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
&.small-mode span {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cal-icon {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.calendar .now-line {
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
bottom: -18px;
|
||||
width: 2px;
|
||||
box-shadow: 0 0 5px 0 #fff;
|
||||
background: #fff;
|
||||
opacity: .8;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
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;
|
||||
|
||||
&:after {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.now-time {
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
.font-number;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 30px;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.cal-abyss-cont {
|
||||
padding-top: 15px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
|
||||
.cal-item {
|
||||
border-radius: 0;
|
||||
background: url("./imgs/abyss.jpg") #333465 top right no-repeat;
|
||||
position: absolute;
|
||||
|
||||
.info {
|
||||
background: none;
|
||||
color: rgba(211, 188, 141, 1);
|
||||
.linear-bg(#333465);
|
||||
}
|
||||
|
||||
&:after {
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user