From 769e98ecad6c5db49aa8318cdb643a8b38e664f9 Mon Sep 17 00:00:00 2001
From: yoimiya-kokomi <592981798@qq.com>
Date: Wed, 11 May 2022 05:54:01 +0800
Subject: [PATCH] =?UTF-8?q?*=20`#=E8=A7=92=E8=89=B2=E9=9D=A2=E6=9D=BF`=20?=
 =?UTF-8?q?=E4=BC=A4=E5=AE=B3=E8=AE=A1=E7=AE=97=E6=96=B0=E5=A2=9E=E8=A1=8C?=
 =?UTF-8?q?=E7=A7=8B=E3=80=81=E7=8F=AD=E5=B0=BC=E7=89=B9=20*=20`#=E5=96=B5?=
 =?UTF-8?q?=E5=96=B5=E6=97=A5=E5=8E=86`=20=E7=9A=84=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BE=AE=E8=B0=83=20*=20=E5=BA=95=E5=B1=82?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7=EF=BC=9A=E6=8A=BD=E8=B1=A1=E4=BA=86=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E5=85=AC=E5=85=B1=E7=BB=84=E4=BB=B6=E4=B8=BAtpl?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E4=BB=A5=E6=8F=90=E9=AB=98=E5=A4=8D=E7=94=A8?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=8Ccss=E6=94=B9=E4=B8=BAless=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                 |   1 +
 CHANGELOG.md                               |  14 +-
 resources/common/common.css                | 156 +++-----
 resources/common/common.less               | 263 ++++++++++++
 resources/common/tpl.css                   | 444 +++++++++++++++++++++
 resources/common/tpl.less                  |  16 +
 resources/common/tpl/artis-detail.css      | 116 ++++++
 resources/common/tpl/artis-detail.html     |  25 ++
 resources/common/tpl/artis-detail.less     | 137 +++++++
 resources/common/tpl/artis-item.html       |  19 +
 resources/common/tpl/avatar-card.css       |   0
 resources/common/tpl/avatar-card.html      |  18 +
 resources/common/tpl/avatar-card.less      |   0
 resources/common/tpl/avatar-profile.css    | 204 ++++++++++
 resources/common/tpl/avatar-profile.html   |  47 +++
 resources/common/tpl/avatar-profile.less   | 240 +++++++++++
 resources/common/tpl/item-card.css         | 113 ++++++
 resources/common/tpl/item-card.less        | 120 ++++++
 resources/common/tpl/weapon-item.html      |  17 +
 resources/meta/character/班尼特/calc.js |  41 ++
 resources/meta/character/行秋/calc.js    |  30 ++
 resources/meta/character/香菱/calc.js    |   1 -
 resources/wiki/calendar.css                | 149 +++----
 resources/wiki/calendar.less               | 328 +++++++++++++++
 24 files changed, 2284 insertions(+), 215 deletions(-)
 create mode 100644 resources/common/common.less
 create mode 100644 resources/common/tpl.css
 create mode 100644 resources/common/tpl.less
 create mode 100644 resources/common/tpl/artis-detail.css
 create mode 100644 resources/common/tpl/artis-detail.html
 create mode 100644 resources/common/tpl/artis-detail.less
 create mode 100644 resources/common/tpl/artis-item.html
 create mode 100644 resources/common/tpl/avatar-card.css
 create mode 100644 resources/common/tpl/avatar-card.html
 create mode 100644 resources/common/tpl/avatar-card.less
 create mode 100644 resources/common/tpl/avatar-profile.css
 create mode 100644 resources/common/tpl/avatar-profile.html
 create mode 100644 resources/common/tpl/avatar-profile.less
 create mode 100644 resources/common/tpl/item-card.css
 create mode 100644 resources/common/tpl/item-card.less
 create mode 100644 resources/common/tpl/weapon-item.html
 create mode 100644 resources/meta/character/班尼特/calc.js
 create mode 100644 resources/meta/character/行秋/calc.js
 create mode 100644 resources/wiki/calendar.less

diff --git a/.gitignore b/.gitignore
index 165fa8a9..14a43878 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@
 /resources/miao-res-plus/
 /components/setting.json
 /config.js
+*.css.map
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e86134f..ba4fdfed 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/resources/common/common.css b/resources/common/common.css
index 2c71ff13..037617b7 100644
--- a/resources/common/common.css
+++ b/resources/common/common.css
@@ -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;
-}
\ No newline at end of file
+}
+/*# sourceMappingURL=common.css.map */
\ No newline at end of file
diff --git a/resources/common/common.less b/resources/common/common.less
new file mode 100644
index 00000000..47c19206
--- /dev/null
+++ b/resources/common/common.less
@@ -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;
+}
\ No newline at end of file
diff --git a/resources/common/tpl.css b/resources/common/tpl.css
new file mode 100644
index 00000000..6da491c9
--- /dev/null
+++ b/resources/common/tpl.css
@@ -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 */
\ No newline at end of file
diff --git a/resources/common/tpl.less b/resources/common/tpl.less
new file mode 100644
index 00000000..9900692e
--- /dev/null
+++ b/resources/common/tpl.less
@@ -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;
+}
\ No newline at end of file
diff --git a/resources/common/tpl/artis-detail.css b/resources/common/tpl/artis-detail.css
new file mode 100644
index 00000000..2a56ddcc
--- /dev/null
+++ b/resources/common/tpl/artis-detail.css
@@ -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 */
\ No newline at end of file
diff --git a/resources/common/tpl/artis-detail.html b/resources/common/tpl/artis-detail.html
new file mode 100644
index 00000000..53505050
--- /dev/null
+++ b/resources/common/tpl/artis-detail.html
@@ -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}}
\ No newline at end of file
diff --git a/resources/common/tpl/artis-detail.less b/resources/common/tpl/artis-detail.less
new file mode 100644
index 00000000..f1fb8e33
--- /dev/null
+++ b/resources/common/tpl/artis-detail.less
@@ -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;
+  }
+
+}
\ No newline at end of file
diff --git a/resources/common/tpl/artis-item.html b/resources/common/tpl/artis-item.html
new file mode 100644
index 00000000..2b5653e0
--- /dev/null
+++ b/resources/common/tpl/artis-item.html
@@ -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>
\ No newline at end of file
diff --git a/resources/common/tpl/avatar-card.css b/resources/common/tpl/avatar-card.css
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/common/tpl/avatar-card.html b/resources/common/tpl/avatar-card.html
new file mode 100644
index 00000000..13a69f34
--- /dev/null
+++ b/resources/common/tpl/avatar-card.html
@@ -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>
diff --git a/resources/common/tpl/avatar-card.less b/resources/common/tpl/avatar-card.less
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/common/tpl/avatar-profile.css b/resources/common/tpl/avatar-profile.css
new file mode 100644
index 00000000..59552d87
--- /dev/null
+++ b/resources/common/tpl/avatar-profile.css
@@ -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 */
\ No newline at end of file
diff --git a/resources/common/tpl/avatar-profile.html b/resources/common/tpl/avatar-profile.html
new file mode 100644
index 00000000..c74be473
--- /dev/null
+++ b/resources/common/tpl/avatar-profile.html
@@ -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>
diff --git a/resources/common/tpl/avatar-profile.less b/resources/common/tpl/avatar-profile.less
new file mode 100644
index 00000000..344a72bf
--- /dev/null
+++ b/resources/common/tpl/avatar-profile.less
@@ -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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/resources/common/tpl/item-card.css b/resources/common/tpl/item-card.css
new file mode 100644
index 00000000..b05271fa
--- /dev/null
+++ b/resources/common/tpl/item-card.css
@@ -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 */
\ No newline at end of file
diff --git a/resources/common/tpl/item-card.less b/resources/common/tpl/item-card.less
new file mode 100644
index 00000000..13feb52a
--- /dev/null
+++ b/resources/common/tpl/item-card.less
@@ -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);
+}
+
diff --git a/resources/common/tpl/weapon-item.html b/resources/common/tpl/weapon-item.html
new file mode 100644
index 00000000..1eccf229
--- /dev/null
+++ b/resources/common/tpl/weapon-item.html
@@ -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>
\ No newline at end of file
diff --git a/resources/meta/character/班尼特/calc.js b/resources/meta/character/班尼特/calc.js
new file mode 100644
index 00000000..a93c163f
--- /dev/null
+++ b/resources/meta/character/班尼特/calc.js
@@ -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
+  }
+}];
\ No newline at end of file
diff --git a/resources/meta/character/行秋/calc.js b/resources/meta/character/行秋/calc.js
new file mode 100644
index 00000000..4d4ae413
--- /dev/null
+++ b/resources/meta/character/行秋/calc.js
@@ -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"
+}];
\ No newline at end of file
diff --git a/resources/meta/character/香菱/calc.js b/resources/meta/character/香菱/calc.js
index c2ece66d..cbf4bd77 100644
--- a/resources/meta/character/香菱/calc.js
+++ b/resources/meta/character/香菱/calc.js
@@ -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: "旋火轮单次蒸发",
diff --git a/resources/wiki/calendar.css b/resources/wiki/calendar.css
index be1c8d31..f119922b 100644
--- a/resources/wiki/calendar.css
+++ b/resources/wiki/calendar.css
@@ -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;
-}
\ No newline at end of file
+}
+/*# sourceMappingURL=calendar.css.map */
\ No newline at end of file
diff --git a/resources/wiki/calendar.less b/resources/wiki/calendar.less
new file mode 100644
index 00000000..fa856516
--- /dev/null
+++ b/resources/wiki/calendar.less
@@ -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;
+    }
+  }
+}
\ No newline at end of file