更新版本号

CHANGELOG.md

@@ -0,0 +1,10 @@
+# 1.0.2
+* 重写`体力`渲染
+* 增加`#图鉴设置体力开关`防止跟乐神的冲突默认是关闭的
+* 增加`#图鉴帮助`查看插件包功能概况
+* 增加`#图鉴版本`查看插件版本（借鉴喵喵代码 emmm好吧cv）
+
+# 1.0.1
+* 增加`#**图鉴`用于查看逍遥全图鉴
+* 增加`#图鉴更新`用于获取图鉴数据
+* 增加`#图鉴插件(强制)更新`用于插件包更新

apps/help.js

@@ -1,12 +1,52 @@
+import { Cfg } from "../components/index.js";
 import { segment } from "oicq";
-
+import lodash from "lodash";
+import { currentVersion, changelogs } from "../components/Changelog.js";
+import Common from "../components/Common.js";
 const _path = process.cwd();
-export async function calendar(e) {
+
-	e.reply("当前版本支持：\n角色、武器、食谱、怪物、圣遗物\n指令例：魔女图鉴")
+const helpFilePath = `${_path}/plugins/xiaoyao-cvs-plugin/resources/help/help-list.js`;
-	return true;
+const path_=`/plugins/xiaoyao-cvs-plugin/resources/common/layout/`;
+export async function help(e, { render }) {
+  if (!/图鉴/.test(e.msg) && !Cfg.get("sys.help", false)) {
+    return false;
+  }
+  let helpFile = {};
+  helpFile = await import(`file://${helpFilePath}?version=${new Date().getTime()}`);
+
+  const { helpCfg } = helpFile;
+  let helpGroup = [];
+
+  lodash.forEach(helpCfg, (group) => {
+    if (group.auth && group.auth === "master" && !e.isMaster) {
+      return;
     }
 
-export async function versionInfo(e) {
+
-	e.reply("当前图鉴版本：1.0.1")
+    lodash.forEach(group.list, (help) => {
-	return true;
+      let icon = help.icon * 1;
+      if (!icon) {
+        help.css = `display:none`;
+      } else {
+        let x = (icon - 1) % 10, y = (icon - x - 1) / 10;
+        help.css = `background-position:-${x * 50}px -${y * 50}px`;
+      }
+
+    });
+
+    helpGroup.push(group);
+  });
+
+  return await Common.render_path("help/index", {
+    helpCfg: helpGroup,
+    element: 'default'
+  }, { e, render, scale: 1.2 },path_)
+}
+
+export async function versionInfo(e, { render }) {
+	return await Common.render_path("help/version-info", {
+	  currentVersion,
+	  changelogs,
+	  elem: "cryo",
+	}, { e, render, scale: 1.2 },path_)
 }

components/Changelog.js

@@ -2,7 +2,7 @@ import fs from "fs";
 import lodash from "lodash";
 
 const _path = process.cwd();
-const _logPath = `${_path}/plugins/miao-plugin/CHANGELOG.md`;
+const _logPath = `${_path}/plugins/xiaoyao-cvs-plugin/CHANGELOG.md`;
 
 let logs = {};
 let changelogs = [];

components/Common.js

@@ -13,7 +13,29 @@ export const render = async function (path, params, cfg) {
     elemLayout: _layout_path + "elem.html",
     sys: {
       scale: Cfg.scale(cfg.scale || 1),
-      copyright: `Created By Yunzai-Bot<span class="version">${yunzaiVersion}</span> & Miao-Plugin<span class="version">${currentVersion}</span>`
+      copyright: `Created By Yunzai-Bot<span class="version">${yunzaiVersion}</span> &  xiaoyao-cvs-Plugin<span class="version">${currentVersion}</span>`
+    }
+  });
+
+  if (base64) {
+    e.reply(segment.image(`base64://${base64}`));
+  }
+
+  return true;
+}
+
+export const render_path = async function (path, params, cfg,path_) {
+  let paths = path.split("/");
+  let { render, e } = cfg;
+  let _layout_path = process.cwd() + path_;
+  let base64 = await render(paths[0], paths[1], {
+    ...params,
+    _layout_path,
+    defaultLayout: _layout_path + "default.html",
+    elemLayout: _layout_path + "elem.html",
+    sys: {
+      scale: Cfg.scale(cfg.scale || 1),
+      copyright: `Created By Yunzai-Bot<span class="version">${yunzaiVersion}</span> & xiaoyao-cvs-Plugin<span class="version">${currentVersion}</span>`
     }
   });
 
@@ -25,8 +47,9 @@ export const render = async function (path, params, cfg) {
 }
 
 
+
 export default {
-  render,
+  render,render_path,
   cfg: Cfg.get,
   isDisable: Cfg.isDisable
 };

index.js

@@ -4,7 +4,7 @@ import {
 } from "./apps/xiaoyao_image.js";
 import {
 	versionInfo,
-	calendar
+	help
 } from "./apps/help.js";
 import {
 	Note
@@ -18,7 +18,7 @@ export {
 	updateRes,
 	updateMiaoPlugin,
 	versionInfo,sysCfg,
-	calendar,
+	help,
 	AtlasAlias,
 	Note
 };
@@ -28,16 +28,16 @@ let rule = {
 		reg: "^#图鉴版本$",
 		describe: "【#帮助】 喵喵版本介绍",
 	},
-	calendar: {
+	help: {
-		reg: "^#图鉴列表$",
+		reg: "^#图鉴(列表|帮助|help)$",
-		describe: "【#日历】 活动日历",
+		describe: "查看插件的功能",
 	},
 	AtlasAlias: {
-		reg: "#*(.*)(信息|图鉴|命座|天赋|突破|材料|特色料理|特殊料理)$", //匹配消息正则，命令正则
+		reg: "#*(.*)(信息|图鉴|命座|天赋|突破|材料|特色料理|特殊料理)$",
-		describe: "【刻晴信息、刻晴图鉴、刻晴突破、刻晴命座】角色信息图鉴", //【命令】功能说明
+		describe: "【刻晴信息、刻晴图鉴、刻晴突破、刻晴命座】角色信息图鉴", 
 	},
 	Note: {
-		reg: "^#*(体力|树脂|查询体力|便笺|便签)$", //匹配消息正则，命令正则
+		reg: "^#*(体力|树脂|查询体力|便笺|便签)$",
 		describe: "体力",
 	},
 	...adminRule

resources/common/common.css

@@ -0,0 +1,324 @@
+@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;
+}
+@font-face {
+  font-family: "YS2";
+  src: url("../common/font/HYWH-65W.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: Number, YS2, PingFangSC-Medium, PingFang SC, sans-serif;
+  transform: scale(1.4);
+  transform-origin: 0 0;
+  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, 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, 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: 10px 0;
+}
+.copyright .version {
+  font-size: 13px;
+  color: #d3bc8e;
+  display: inline-block;
+  padding: 0 3px;
+}
+/*  */
+.cons {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 5px;
+  font-family: Number, YS;
+  border-radius: 4px;
+}
+.cons-0 {
+  background: #666;
+  color: #fff;
+}
+.cons-n0 {
+  background: #404949;
+  color: #fff;
+}
+.cons-1 {
+  background: #5cbac2;
+  color: #fff;
+}
+.cons-2 {
+  background: #339d61;
+  color: #fff;
+}
+.cons-3 {
+  background: #3e95b9;
+  color: #fff;
+}
+.cons-4 {
+  background: #3955b7;
+  color: #fff;
+}
+.cons-5 {
+  background: #531ba9cf;
+  color: #fff;
+}
+.cons-6 {
+  background: #ff5722;
+  color: #fff;
+}
+.cons2-0 {
+  border-radius: 4px;
+  background: #666;
+  color: #fff;
+}
+.cons2-1 {
+  border-radius: 4px;
+  background: #71b1b7;
+  color: #fff;
+}
+.cons2-2 {
+  border-radius: 4px;
+  background: #369961;
+  color: #fff;
+}
+.cons2-3 {
+  border-radius: 4px;
+  background: #4596b9;
+  color: #fff;
+}
+.cons2-4 {
+  border-radius: 4px;
+  background: #4560b9;
+  color: #fff;
+}
+.cons2-5 {
+  border-radius: 4px;
+  background: #531ba9cf;
+  color: #fff;
+}
+.cons2-6 {
+  border-radius: 4px;
+  background: #ff5722;
+  color: #fff;
+}
+/********  ELEM  ********/
+.elem-anemo .talent-icon {
+  background-image: url("./bg/talent-anemo.png");
+}
+.elem-anemo .elem-bg,
+.anemo-bg {
+  background-image: url("./bg/bg-anemo.jpg");
+}
+.elem-cryo .talent-icon {
+  background-image: url("./bg/talent-cryo.png");
+}
+.elem-cryo .elem-bg,
+.cryo-bg {
+  background-image: url("./bg/bg-cryo.jpg");
+}
+.elem-electro .talent-icon {
+  background-image: url("./bg/talent-electro.png");
+}
+.elem-electro .elem-bg,
+.electro-bg {
+  background-image: url("./bg/bg-electro.jpg");
+}
+.elem-geo .talent-icon {
+  background-image: url("./bg/talent-geo.png");
+}
+.elem-geo .elem-bg,
+.geo-bg {
+  background-image: url("./bg/bg-geo.jpg");
+}
+.elem-hydro .talent-icon {
+  background-image: url("./bg/talent-hydro.png");
+}
+.elem-hydro .elem-bg,
+.hydro-bg {
+  background-image: url("./bg/bg-hydro.jpg");
+}
+.elem-pyro .talent-icon {
+  background-image: url("./bg/talent-pyro.png");
+}
+.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, 0.8);
+  overflow: hidden;
+  color: #fff;
+  font-size: 16px;
+}
+.cont-title {
+  background: rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 1px 0 #fff;
+  color: #d3bc8e;
+  font-family: Number, 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, 0.4);
+}
+.cont-table .tr:nth-child(odd) {
+  background: rgba(50, 50, 50, 0.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, 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, 0.4);
+  min-width: 100px;
+  vertical-align: middle;
+}
+.logo {
+  font-size: 18px;
+  text-align: center;
+  color: #fff;
+  margin: 20px 0 10px 0;
+}
+/*# sourceMappingURL=common.css.map */

resources/common/common.less

@@ -0,0 +1,308 @@
+@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;
+}
+
+@font-face {
+  font-family: "YS2";
+  src: url("../common/font/HYWH-65W.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: Number, YS2, PingFangSC-Medium, PingFang SC, sans-serif;
+  transform: scale(1.4);
+  transform-origin: 0 0;
+  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: 10px 0;
+
+  .version {
+    font-size: 13px;
+    color: #d3bc8e;
+    display: inline-block;
+    padding: 0 3px;
+  }
+}
+
+
+/*  */
+
+.cons {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 5px;
+  border-radius: 4px;
+  font-family: Number, YS;
+  border-radius: 4px;
+}
+
+
+.cons(@idx, @bg, @color:#fff) {
+  .cons-@{idx} {
+    background: @bg;
+    color: @color;
+  }
+}
+
+.cons(0, #666);
+.cons(n0, #404949);
+.cons(1, #5cbac2);
+.cons(2, #339d61);
+.cons(3, #3e95b9);
+.cons(4, #3955b7);
+.cons(5, #531ba9cf);
+.cons(6, #ff5722);
+
+.cons2(@idx, @bg, @color:#fff) {
+  .cons2-@{idx} {
+    border-radius: 4px;
+    background: @bg;
+    color: @color;
+  }
+}
+
+.cons2(0, #666);
+.cons2(1, #71b1b7);
+.cons2(2, #369961);
+.cons2(3, #4596b9);
+.cons2(4, #4560b9);
+.cons2(5, #531ba9cf);
+.cons2(6, #ff5722);
+
+
+/********  ELEM  ********/
+
+@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: Number, 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;
+}
+
+.logo {
+  font-size: 18px;
+  text-align: center;
+  color: #fff;
+  margin: 20px 0 10px 0;
+}

resources/common/layout/default.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+    <link rel="shortcut icon" href="#"/>
+    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
+    {{block 'css'}}
+    {{/block}}
+  </head>
+  <body class="elem-{{element||elem||`hydro`}} {{displayMode || mode || `default`}}-mode  {{bodyClass}}" {{sys.scale}}>
+    <div class="container" id="container">
+      {{block 'main'}}{{/block}}
+      <div class="copyright">{{@sys.copyright}}</div>
+    </div>
+  </body>
+</html>

resources/common/layout/elem.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+    <link rel="shortcut icon" href="#"/>
+    <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
+    {{block 'css'}}
+    {{/block}}
+  </head>
+  <body class="elem-{{element||elem||`hydro`}} {{displayMode || mode || `default`}}-mode {{bodyClass}}" {{sys.scale}}>
+    <div class="container elem-bg" id="container">
+      {{block 'main'}}{{/block}}
+      <div class="copyright">{{@sys.copyright}}</div>
+    </div>
+  </body>
+</html>

resources/common/tpl.css

@@ -0,0 +1,469 @@
+.item-card {
+  width: 66px;
+  margin: 4px;
+  position: relative;
+  border-radius: 5px;
+}
+.item-card .badge {
+  overflow: hidden;
+  border-radius: 50%;
+  display: block;
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  background: #e9e5dc;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8), 2px 2px 2px rgba(50, 50, 50, 0.5);
+  z-index: 10;
+}
+.item-card .badge img {
+  width: 140%;
+  left: -27%;
+  top: -45%;
+  overflow: hidden;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+}
+.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");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg-1 {
+  background-image: url("./item/bg1.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg2 {
+  background-image: url("./item/bg2.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg-2 {
+  background-image: url("./item/bg2.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg3 {
+  background-image: url("./item/bg3.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg-3 {
+  background-image: url("./item/bg3.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg4 {
+  background-image: url("./item/bg4.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg-4 {
+  background-image: url("./item/bg4.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg5 {
+  background-image: url("./item/bg5.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .bg-5 {
+  background-image: url("./item/bg5.png");
+  border-radius: 5px 5px 15px 0;
+}
+.item-card .box {
+  border-radius: 5px;
+  overflow: hidden;
+  background: #e9e5dc;
+}
+.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;
+  background: rgba(0, 0, 0, 0.3);
+}
+.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 */

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;
+}

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.less.map */

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}}

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;
+  }
+
+}

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>

resources/common/tpl/avatar-card.html

@@ -0,0 +1,15 @@
+{{set avatar = $data[0]}}
+{{set {_res_path,_char} = $data[1]}}
+{{set _char = _char || "meta/character/"}}
+
+<div class="item">
+  <div class="item-bg elem-{{avatar.element}}">
+    <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.label || avatar.name}}</div>
+  </div>
+</div>

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 */

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}}
+      <span class="cons cons-{{ds.cons}}">{{ds.cons}}命</span> {{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>

resources/common/tpl/avatar-profile.less

@@ -0,0 +1,241 @@
+.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;
+    background: rgba(0, 0, 0, .3);
+  }
+
+  .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;
+    }
+  }
+}

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.less.map */

resources/common/tpl/item-card.less

@@ -0,0 +1,122 @@
+
+.item-card {
+  width: 66px;
+  margin: 4px;
+  position: relative;
+  border-radius: 5px;
+
+
+  .badge {
+    overflow: hidden;
+    border-radius: 50%;
+    display: block;
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    right: -4px;
+    top: -4px;
+    background: #e9e5dc;
+    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8), 2px 2px 2px rgba(50, 50, 50, .5);
+    z-index: 10;
+
+
+    img {
+      width: 140%;
+      left: -27%;
+      top: -45%;
+      overflow: hidden;
+      background-size: 100%;
+      background-repeat: no-repeat;
+      position: absolute;
+    }
+  }
+
+  .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");
+      border-radius: 5px 5px 15px 0;
+    }
+    .bg-@{value} {
+      background-image: url("./item/bg@{value}.png");
+      border-radius: 5px 5px 15px 0;
+    }
+  })
+
+  .box {
+    border-radius: 5px;
+    overflow: hidden;
+    background: #e9e5dc;
+
+    .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);
+}
+

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>

resources/help/help-list.js

@@ -0,0 +1,51 @@
+export const helpCfg = [{
+	"group": "信息查询",
+	"list": [{
+			"icon": 61,
+			"title": "#角色图鉴",
+			"desc": "目前已知原神角色概况"
+		},
+		{
+			"icon": 66,
+			"title": "#武器图鉴",
+			"desc": "目前已知原神武器概况"
+		},
+		{
+			"icon": 71,
+			"title": "#食谱图鉴",
+			"desc": "目前已知原神食谱概况"
+		},
+		{
+			"icon": 74,
+			"title": "#怪物图鉴",
+			"desc": "目前已知原神怪物概况"
+		},
+		{
+			"icon": 63,
+			"title": "#圣遗物图鉴",
+			"desc": "目前已知原神圣遗物概况"
+		},
+		{
+			"icon": 14,
+			"title": "#体力",
+			"desc": "重写原有的查询当前米游社体力"
+		},
+	]
+},{
+	"group": "管理命令，仅管理员可用",
+	"auth": "master",
+	"list": [{
+			"icon": 57,
+			"title": "#图鉴设置",
+			"desc": "例如#图鉴设置体力开启（关闭）"
+		},{
+			"icon": 58,
+			"title": "#图鉴更新",
+			"desc": "用于获取最新的图鉴数据图"
+		},{
+			"icon": 60,
+			"title": "#图鉴插件更新",
+			"desc": "用于获取最新的插件包数据"
+		}
+	]
+}]

resources/help/index.css

@@ -0,0 +1,114 @@
+body {
+  transform: scale(1);
+  width: 800px;
+  background: url("../common/theme/bg-01.jpg");
+}
+
+.container {
+  background: url(../common/theme/main-01.png) top left no-repeat;
+  background-size: 100% auto;
+  width: 800px;
+}
+
+.label {
+  font-family: Number, "微软雅黑", sans-serif;
+}
+
+.head-box {
+  margin: 60px 0 0 0;
+  padding-bottom: 0;
+}
+
+.head-box .title {
+  font-size: 50px;
+}
+
+.cont-box {
+  border-radius: 15px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 5px 15px;
+  overflow: hidden;
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+  position: relative;
+  background: rgba(43, 52, 61, 0.8);
+
+}
+
+.help-group {
+  color: #ceb78b;
+  font-size: 18px;
+  font-weight: bold;
+  padding: 8px 0 5px 10px;
+}
+
+.help-table {
+  text-align: center;
+  border-collapse: collapse;
+  margin: 5px -10px -10px -15px;
+  border-radius: 0 0 10px 10px;
+  display: table;
+  overflow: hidden;
+  width: calc(100% + 30px);
+  color: #fff;
+}
+
+.help-table .tr {
+  display: table-row;
+}
+
+.help-table .td,
+.help-table .th {
+  font-size: 14px;
+  display: table-cell;
+  box-shadow: 0 0 1px 0 #888 inset;
+  padding: 12px 0 12px 50px;
+  line-height: 24px;
+  position: relative;
+  width: 33.33%;
+  text-align: left;
+}
+
+.help-table .tr:nth-child(odd) {
+  background: rgba(34, 41, 51, .6)
+}
+
+.help-table .tr:nth-child(even) {
+  background: rgba(34, 41, 51, .3)
+}
+
+.help-table .tr:last-child .td {
+  padding-bottom: 12px;
+}
+
+.help-table .th {
+  background: rgba(34, 41, 51, .5)
+}
+
+.help-icon {
+  width: 40px;
+  height: 40px;
+  display: block;
+  position: absolute;
+  background: url("icon.png") 0 0 no-repeat;
+  background-size: 500px 500px;
+  border-radius: 5px;
+  left: 6px;
+  top: 12px;
+  transform: scale(0.85);
+}
+
+.help-title {
+  display: block;
+  color: #d3bc8e;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.help-desc {
+  display: block;
+  font-size: 13px;
+  line-height: 18px;
+  color: #eee;
+}
+

resources/help/index.html

@@ -0,0 +1,35 @@
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/help/index.css"/>
+{{/block}}
+
+{{block 'main'}}
+<div class="info_box">
+  <div class="head-box type{{bgType}}">
+    <div class="title">使用帮助</div>
+    <div class="label">Yunzai-Bot & xiaoyao-cvs-Plugin</div>
+  </div>
+</div>
+
+{{each helpCfg helpGroup}}
+<div class="cont-box">
+  <div class="help-group">{{helpGroup.group}}</div>
+  <div class="help-table">
+    {{each helpGroup.list help idx}}
+    {{if idx%3 == 0}}
+    <div class="tr">
+      {{/if}}
+      <div class="td">
+        <span class="help-icon" style="{{help.css}}"></span>
+        <strong class="help-title">{{help.title}}</strong>
+        <span class="help-desc">{{help.desc}}</span>
+      </div>
+      {{if idx%3 ==2 || idx == helpGroup.list.length -1}}
+    </div>
+    {{/if}}
+    {{/each}}
+  </div>
+</div>
+{{/each}}
+{{/block}}

resources/help/version-info.css

@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+body {
+  font-size: 18px;
+  color: #1e1f20;
+  font-family: Number, YS2;
+  transform: scale(1.3);
+  transform-origin: 0 0;
+  width: 520px;
+}
+.container {
+  width: 520px;
+  padding: 10px 0 10px 0;
+  background-size: 100% 100%;
+}
+.log-cont {
+  background-size: cover;
+  margin: 5px 15px 5px 10px;
+  border-radius: 10px;
+}
+.log-cont .cont {
+  margin: 0;
+}
+.log-cont .cont-title {
+  font-size: 16px;
+  padding: 10px 20px 6px;
+}
+.log-cont .cont-title.current-version {
+  font-size: 20px;
+}
+.log-cont .cont-body {
+  font-family: Number, YS2;
+}
+.log-cont ul {
+  font-size: 14px;
+  padding-left: 20px;
+}
+.log-cont ul li {
+  margin: 3px 0;
+}
+.log-cont ul.sub-log-ul li {
+  margin: 1px 0;
+}
+.log-cont .cmd {
+  font-family: Number, YS;
+  color: #d3bc8e;
+  display: inline-block;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 0 3px;
+  margin: 1px 3px;
+}
+.log-cont .new {
+  display: inline-block;
+  width: 18px;
+  margin: 0 -3px 0 1px;
+}
+.log-cont .new:before {
+  content: "NEW";
+  font-family: Number;
+  display: inline-block;
+  transform: scale(0.6);
+  transform-origin: 0 0;
+  color: #d3bc8e;
+  white-space: nowrap;
+}
+/*# sourceMappingURL=version-info.css.map */

resources/help/version-info.html

@@ -0,0 +1,35 @@
+{{extend elemLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" type="text/css" href="{{_res_path}}/help/version-info.css"/>
+{{/block}}
+
+{{block 'main'}}
+{{each changelogs ds idx}}
+<div class="hydro-bg log-cont">
+  <div class="cont">
+    {{if idx === 0 }}
+    <div class="cont-title current-version">当前版本 {{ds.version}}</div>
+    {{else}}
+    <div class="cont-title">喵喵版本 {{ds.version}}</div>
+    {{/if}}
+    <div class="cont-body">
+      <ul class="log-ul">
+        {{each ds.logs log}}
+        <li>
+          <p>{{@log.title}}</p>
+          {{if log.logs.length > 0}}
+          <ul class="sub-log-ul">
+            {{each log.logs ls}}
+            <li>{{@ls}}</li>
+            {{/each}}
+          </ul>
+          {{/if}}
+        </li>
+        {{/each}}
+      </ul>
+    </div>
+  </div>
+</div>
+{{/each}}
+{{/block}}

resources/help/version-info.less

@@ -0,0 +1,90 @@
+.linear-bg(@color) {
+  background-image: linear-gradient(to right, @color, @color 80%, fade(@color, 0) 100%);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+body {
+  font-size: 18px;
+  color: #1e1f20;
+  font-family: Number, YS2;
+  transform: scale(1.3);
+  transform-origin: 0 0;
+  width: 520px;
+}
+
+.container {
+  width: 520px;
+  padding: 10px 0 10px 0;
+  background-size: 100% 100%;
+
+}
+
+.log-cont {
+  background-size: cover;
+  margin: 5px 15px 5px 10px;
+  border-radius: 10px;
+
+  .cont {
+    margin: 0;
+  }
+
+  .cont-title {
+    font-size: 16px;
+    padding: 10px 20px 6px;
+
+    &.current-version {
+      font-size: 20px;
+    }
+  }
+
+  .cont-body {
+    font-family: Number, YS2;
+  }
+
+  ul {
+    font-size: 14px;
+    padding-left: 20px;
+
+    li {
+      margin: 3px 0;
+    }
+
+    &.sub-log-ul {
+      li {
+        margin: 1px 0;
+      }
+    }
+  }
+
+  .cmd {
+    font-family: Number, YS;
+    color: #d3bc8e;
+    display: inline-block;
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 0 3px;
+    margin: 1px 3px;
+  }
+
+  .new {
+    display: inline-block;
+    width: 18px;
+    margin: 0 -3px 0 1px;
+  }
+
+  .new:before {
+    content: "NEW";
+    font-family: Number;
+    display: inline-block;
+    transform: scale(0.6);
+    transform-origin: 0 0;
+    color: #d3bc8e;
+    white-space: nowrap;
+  }
+}