#面板练度统计、'#面板列表`功能与样式优化

内嵌字体改为默认woff格式
调整部分页面与资源的结构与引用逻辑

CHANGELOG.md

@@ -1,11 +1,12 @@
-# 1.9.6
+# 1.9.7
 
 * 新增`#面板练度统计`功能
     * 可展示当前角色天赋及圣遗物练度信息
     * 需要用户绑定Cookie，圣遗物评分需要本地获取并查看过对应角色面板
-    * 部分样式及功能尚未完全稳定
+* `#面板列表` 等页面样式与功能优化
+* 内嵌字体改为默认woff格式，调整部分页面与资源的结构与引用逻辑
 
-# 1.9.1 ~ 1.9.5
+# 1.9.1 ~ 1.9.6
 
 * `#面板`、`#更新面板`命令使用图片渲染结果
 * Enka面板服务支持配置代理 **@永恒的小黑屋**

apps/character/profile-detail.js

@@ -89,8 +89,8 @@ export async function renderProfile (e, char, render, mode = 'profile', params =
     })
   }
 
-  if (mode === 'dmg') {
+  if (mode === 'dmg' && dmgCalc.dmgRet) {
-    let basic = dmgCalc.dmgCfg.basicRet
+    let basic = dmgCalc?.dmgCfg?.basicRet
     lodash.forEach(dmgCalc.dmgRet, (row) => {
       lodash.forEach(row, (ds) => {
         ds.val = (ds.avg > basic.avg ? '+' : '') + Format.comma(ds.avg - basic.avg)
@@ -113,8 +113,8 @@ export async function renderProfile (e, char, render, mode = 'profile', params =
     talent: char.getAvatarTalent(profile.talent, profile.cons),
     dmgData,
     dmgMsg,
-    dmgRet: dmgCalc.dmgRet,
+    dmgRet: dmgCalc.dmgRet || false,
-    dmgCfg: dmgCalc.dmgCfg,
+    dmgCfg: dmgCalc.dmgCfg || false,
     artis,
     enemyLv,
     enemyName: dmgCalc.enemyName || '小宝',

apps/character/profile-list.js

@@ -10,6 +10,9 @@ export async function profileList (e, { render }) {
   }
 
   let profiles = Profile.getAll(uid) || {}
+  let servName = Profile.getServName(uid)
+  let hasNew = false
+  let newCount = 0
 
   let chars = []
   let msg = ''
@@ -30,7 +33,10 @@ export async function profileList (e, { render }) {
     }
     tmp.source = ds.dataSource
     tmp.level = ds.lv || 1
-    tmp.isNew = newChar[char.name] ? 1 : 0
+    if (newChar[char.name]) {
+      tmp.isNew = 1
+      newCount++
+    }
     chars.push(tmp)
   })
 
@@ -44,6 +50,10 @@ export async function profileList (e, { render }) {
     return true
   }
 
+  if (newCount > 0) {
+    hasNew = newCount <= 8
+  }
+
   chars = lodash.sortBy(chars, ['isNew', 'star', 'level', 'id'])
   chars = chars.reverse()
 
@@ -52,6 +62,8 @@ export async function profileList (e, { render }) {
     save_id: uid,
     uid,
     chars,
+    servName,
+    hasNew,
     msg
   }, { e, render, scale: 1.6 })
 }

components/Profile.js

@@ -283,6 +283,11 @@ let Profile = {
     userData.chars[avatar] = originalData
     fs.writeFileSync(userFile, JSON.stringify(userData), '', ' ')
     return true
+  },
+
+  getServName (uid) {
+    let Serv = getServ(uid)
+    return Serv.getName({ uid, diyCfg, sysCfg })
   }
 }
 export default Profile

components/profile-data/enka.js

@@ -30,6 +30,11 @@ let Enka = {
       return false
     }
     return EnkaData.getData(uid, data)
+  },
+  getName ({ uid, diyCfg, sysCfg }) {
+    let url = diyCfg?.enkaApi?.url || sysCfg.enkaApi.url
+    url = url.replace('https://', '').replace('/', '').trim()
+    return url
   }
 }
 

components/profile-data/miao.js

@@ -218,6 +218,9 @@ let Miao = {
     })
     return ret
   },
+  getName ({ uid, diyCfg, sysCfg }) {
+    return 'MiaoApi'
+  },
   dataFix (ret) {
     if (ret._fix) {
       return ret

resources/character/artis.css

@@ -2,7 +2,6 @@
   width: 790px;
 }
 .uid {
-  font-family: Number;
   margin: 20px 10px 10px;
   text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
   text-align: right;

resources/character/artis.less

@@ -3,7 +3,6 @@
 }
 
 .uid {
-  font-family: Number;
   margin: 20px 10px 10px;
   text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
   text-align: right;

resources/character/card.css

@@ -1,3 +1,9 @@
+.font-YS {
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+.font-NZBZ {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
 * {
   margin: 0;
   padding: 0;
@@ -9,7 +15,6 @@ body {
   color: #fff;
   transform: scale(1.25);
   transform-origin: 0 0;
-  font-family: Number, YS;
 }
 .container {
   position: relative;
@@ -31,7 +36,6 @@ body {
   box-shadow: 0 -5px 10px 0 #000;
   padding: 5px 10px 10px 150px;
   text-shadow: 0 0 1px #000, 1px 1px 3px #000;
-  font-family: Number, YS;
 }
 .role_box {
   padding: 5px 10px;
@@ -42,7 +46,7 @@ body {
   font-size: 36px;
 }
 .char_name {
-  font-family: "NZBZ";
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   font-size: 60px;
   letter-spacing: 5px;
   line-height: 90px;
@@ -90,7 +94,6 @@ body {
   vertical-align: middle;
   text-align: center;
   letter-spacing: 0px;
-  font-family: Number, YS;
   box-shadow: 0px 0px 3px 0px #000;
   text-shadow: 0 0 3px #000;
   margin-right: 15px;
@@ -332,7 +335,7 @@ body.bottom_mode {
   width: calc(100% - 20px);
 }
 .bottom_mode .detail {
-  font-family: NZBZ;
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   margin-top: 0px;
 }
 .bottom_mode .for_left {
@@ -403,7 +406,6 @@ body.bottom_mode {
 }
 .copyright {
   position: absolute;
-  font-family: Number, YS;
   margin-bottom: 0;
 }
 .left_mode .copyright {

resources/character/card.less

@@ -1,3 +1,5 @@
+@import "../common/base.less";
+
 * {
   margin: 0;
   padding: 0;
@@ -11,7 +13,6 @@ body {
   color: #fff;
   transform: scale(1.25);
   transform-origin: 0 0;
-  font-family: Number, YS;
 }
 
 .container {
@@ -36,8 +37,6 @@ body {
   box-shadow: 0 -5px 10px 0 #000;
   padding: 5px 10px 10px 150px;
   text-shadow: 0 0 1px #000, 1px 1px 3px #000;
-  font-family: Number, YS;
-
 }
 
 .role_box {
@@ -52,7 +51,7 @@ body {
 
 
 .char_name {
-  font-family: "NZBZ";
+  .font-NZBZ;
   font-size: 60px;
   letter-spacing: 5px;
   line-height: 90px;
@@ -103,7 +102,6 @@ body {
   vertical-align: middle;
   text-align: center;
   letter-spacing: 0px;
-  font-family: Number, YS;
   box-shadow: 0px 0px 3px 0px #000;
   text-shadow: 0 0 3px #000;
   margin-right: 15px;
@@ -403,7 +401,7 @@ body.bottom_mode {
 }
 
 .bottom_mode .detail {
-  font-family: NZBZ;
+  .font-NZBZ;
   margin-top: 0px;
 }
 
@@ -489,7 +487,7 @@ body.bottom_mode {
 
 .copyright {
   position: absolute;
-  font-family: Number, YS;
+  //font-family: Number, YS;
   margin-bottom: 0;
 }
 

resources/character/detail.css

@@ -1,3 +1,9 @@
+.font-YS {
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+.font-NZBZ {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
 body {
   width: 600px;
 }
@@ -42,7 +48,7 @@ body {
 }
 .char-name {
   font-size: 50px;
-  font-family: NZBZ;
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
   text-align: right;
 }
@@ -416,7 +422,6 @@ body {
   display: block;
   white-space: nowrap;
   overflow: hidden;
-  font-font: YS;
 }
 .artis .head span {
   font-size: 14px;

resources/character/detail.html

@@ -175,7 +175,7 @@
 
 {{if mode === "dmg"}}
 
-{{if dmgCfg && dmgCfg.attr && dmgCfg.attr.length>0}}
+{{if dmgCfg && dmgCfg.attr && dmgCfg.attr.length>0 && dmgRet}}
 <div class="dmg-calc dmg-cont cont">
   <div class="cont-title">
     词条伤害计算<span>#{{name}}伤害{{dmgCfg.userIdx+1}}: 当前计算为[{{dmgCfg.title}}]</span>

resources/character/detail.less

@@ -1,3 +1,4 @@
+@import "../common/base.less";
 
 body {
   width: 600px;
@@ -50,7 +51,7 @@ body {
 
 .char-name {
   font-size: 50px;
-  font-family: NZBZ;
+  .font-NZBZ;
   text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
   text-align: right;
 }
@@ -506,7 +507,7 @@ body {
       display: block;
       white-space: nowrap;
       overflow: hidden;
-      font-font: YS;
+      //font-font: YS;
     }
 
     span {

resources/character/profile-list.css

@@ -50,4 +50,23 @@ body,
   overflow: hidden;
   border-radius: 50%;
 }
+.cont-footer {
+  display: flex;
+  background: rgba(0, 0, 0, 0.4);
+}
+.cont-footer span {
+  width: 50%;
+}
+.cont-footer .serv {
+  text-align: right;
+}
+.cont-footer .new-tip:before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background: #90e800;
+  border-radius: 50%;
+  margin-right: 3px;
+}
 /*# sourceMappingURL=profile-list.css.map */

resources/character/profile-list.html

@@ -9,20 +9,30 @@
 {{block 'main'}}
 {{set demo = chars[0]?.abbr || "雷神" }}
 <div class="head-box">
-  <div class="title">角色面板列表</div>
+  <div class="title">#面板列表<div class="label">UID:{{uid}} {{msg}}</div></div>
-  <div class="label">UID:{{uid}} {{msg}}</div>
+
   <div class="label">你可以使用<span>#{{demo}}面板</span>、<span>#{{demo}}伤害</span>、<span>#{{demo}}圣遗物</span>命令来查看面板信息了</div>
 </div>
-<div class="cont char-list">
+<div class="cont">
-  {{each chars char}}
+  <div class="char-list">
-  <div class="char-item {{char.isNew?'new-char':''}}">
+    {{each chars char}}
-    <div class="item-icon char-icon star{{char.star}}">
+    <div class="char-item {{char.isNew&&hasNew ?'new-char':''}}">
+      <div class="item-icon char-icon star{{char.star}}">
        <span class="img"
              style="background-image:url({{_res_path}}/meta/character/{{char.name}}/face.png)"></span>
+      </div>
+      <span class="name">{{char.abbr}}</span>
     </div>
-    <span class="name">{{char.abbr}}</span>
+    {{/each}}
+  </div>
+  <div class="cont-footer">
+    {{if hasNew}}
+    <span class="new-tip">本次更新角色</span>
+    {{else}}
+    <span></span>
+    {{/if}}
+    <span class="serv">当前更新服务：{{servName}}</span>
   </div>
-  {{/each}}
 </div>
 
 

resources/character/profile-list.less

@@ -59,4 +59,27 @@ body, .container {
     overflow: hidden;
     border-radius: 50%;
   }
+}
+
+.cont-footer {
+  display: flex;
+  background: rgba(0, 0, 0, .4);
+
+  span {
+    width: 50%;
+  }
+
+  .serv {
+    text-align: right;
+  }
+
+  .new-tip:before {
+    content: "";
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #90e800;
+    border-radius: 50%;
+    margin-right: 3px;
+  }
 }

resources/character/profile-stat.css

@@ -1,6 +1,9 @@
 .container {
   background-size: cover;
 }
+.head-box {
+  margin-top: 0px;
+}
 #profile-stat {
   display: table;
   border-collapse: collapse;
@@ -8,184 +11,258 @@
   margin: 0 -15px -5px;
   overflow: hidden;
 }
-#profile-stat .cont {
+#profile-stat .item-banner {
-  font-size: 14px;
+  display: flex;
-  background: none;
+  flex-direction: row;
+  align-items: center;
+  height: 36px;
 }
-#profile-stat .cons {
+#profile-stat .item-banner > * {
+  display: block;
+}
+#profile-stat .item-banner .item-icon {
+  z-index: 10;
+}
+#profile-stat .cons,
+#profile-stat .level {
   height: 22px;
   line-height: 22px;
   display: inline-block;
   width: 19px;
-  padding: 0 0 0 1px;
+  padding: 0;
+  margin: 0;
   text-align: center;
   vertical-align: middle;
-  border-radius: 0 3px 3px 0;
-  margin-left: -4px;
   font-size: 13px;
+  position: relative;
 }
-#profile-stat .item-icon.star1,
+#profile-stat .cons {
-#profile-stat .cons.star1 {
+  border-radius: 0 3px 3px 0;
+  width: 22px;
+  margin-right: 5px;
+}
+#profile-stat .level {
+  border-radius: 3px 0 0 3px;
+  width: 32px;
+}
+#profile-stat .level:before {
+  content: "Lv";
+}
+#profile-stat .level:before {
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(0.7);
+  transform-origin: right 55%;
+  margin-left: -3px;
+}
+#profile-stat .level:before {
+  content: "Lv";
+}
+#profile-stat .star1 .item-icon {
   box-shadow: 0 0 0 1px #ababab;
 }
-#profile-stat .item-icon.star2,
+#profile-stat .star1 .cons {
-#profile-stat .cons.star2 {
+  box-shadow: 0 0 0 1px #ababab;
+}
+#profile-stat .star1 .level {
+  box-shadow: 0 0 0 1px #ababab;
+  color: #2b2b2b;
+  background: rgba(171, 171, 171, 0.9);
+}
+#profile-stat .star2 .item-icon {
   box-shadow: 0 0 0 1px #d0ffbe;
 }
-#profile-stat .item-icon.star3,
+#profile-stat .star2 .cons {
-#profile-stat .cons.star3 {
+  box-shadow: 0 0 0 1px #d0ffbe;
+}
+#profile-stat .star2 .level {
+  box-shadow: 0 0 0 1px #d0ffbe;
+  color: #35be00;
+  background: rgba(208, 255, 190, 0.9);
+}
+#profile-stat .star3 .item-icon {
   box-shadow: 0 0 0 1px #bed0ff;
 }
-#profile-stat .item-icon.star4,
+#profile-stat .star3 .cons {
-#profile-stat .cons.star4 {
+  box-shadow: 0 0 0 1px #bed0ff;
+}
+#profile-stat .star3 .level {
+  box-shadow: 0 0 0 1px #bed0ff;
+  color: #0035be;
+  background: rgba(190, 208, 255, 0.9);
+}
+#profile-stat .star4 .item-icon {
   box-shadow: 0 0 0 1px #dfbeff;
 }
-#profile-stat .item-icon.star5,
+#profile-stat .star4 .cons {
-#profile-stat .cons.star5 {
+  box-shadow: 0 0 0 1px #dfbeff;
+}
+#profile-stat .star4 .level {
+  box-shadow: 0 0 0 1px #dfbeff;
+  color: #6000be;
+  background: rgba(223, 190, 255, 0.9);
+}
+#profile-stat .star5 .item-icon {
   box-shadow: 0 0 0 1px #ffe4b4;
 }
-#profile-stat .item-name {
+#profile-stat .star5 .cons {
+  box-shadow: 0 0 0 1px #ffe4b4;
+}
+#profile-stat .star5 .level {
+  box-shadow: 0 0 0 1px #ffe4b4;
+  color: #b47300;
+  background: rgba(255, 228, 180, 0.9);
+}
+.cont {
+  font-size: 14px;
+  background: none;
+}
+.cont .item-name {
   text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
-#profile-stat .item-name.star4 {
+.cont .item-name.star4 {
   color: #dfbeff;
 }
-#profile-stat .item-name.star5 {
+.cont .item-name.star5 {
   color: #ffe4b4;
 }
-#profile-stat .tr.thead .td-name {
+.cont .tr.thead {
-  padding-right: 22px;
+  background: rgba(0, 0, 0, 0.5);
+  font-weight: bold;
 }
-#profile-stat .tr.thead .td-talent {
+.cont .tr.thead > div {
-  box-shadow: none;
+  box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.7);
+  text-align: center;
 }
-#profile-stat .tr.thead .td-weapon {
+.cont .tr.thead .td-talent {
-  padding-left: 50px;
+  color: #d3bc8e;
 }
-#profile-stat .tr.thead .td-artis {
+.cont .tr > div {
-  text-align: left;
-}
-#profile-stat .tr > div {
   text-align: center;
   height: 36px;
   vertical-align: middle;
   line-height: 36px;
-  box-shadow: none;
+  box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.7);
 }
-#profile-stat .tr > div * {
+.cont .tr > div * {
   vertical-align: middle;
 }
-#profile-stat .tr > div.star4 {
+.cont .tr .index {
-  background: rgba(102, 59, 143, 0.5);
-}
-#profile-stat .tr > div.star5 {
-  background: rgba(124, 95, 45, 0.5);
-}
-#profile-stat .tr .index {
   color: #333;
   width: 30px;
   padding-left: 5px;
 }
-#profile-stat .tr .td-level {
+.cont .tr .td-name {
-  width: 30px;
+  text-align: left;
-  text-align: right;
+  width: 150px;
+  padding-left: 8px;
 }
-#profile-stat .tr .td-name {
+.cont .tr .td-name .char-icon {
-  text-align: right;
-  width: 110px;
-  padding-right: 8px;
-}
-#profile-stat .tr .td-name .char-icon {
   width: 30px;
   height: 30px;
   border-radius: 5px;
   display: inline-block;
   overflow: visible;
 }
-#profile-stat .tr .td-name .char-icon .img {
+.cont .tr .td-name .char-icon .img {
-  width: 34px;
+  width: 33px;
-  height: 34px;
+  height: 33px;
   position: relative;
   top: -3px;
-  left: -2px;
+  left: -1px;
+  border-radius: 0 0 6px 6px;
 }
-#profile-stat .tr .td-name .cons {
+.cont .tr .td-fetter {
-  margin-left: -5px;
-}
-#profile-stat .tr .td-fetter {
   width: 40px;
   text-align: center;
   padding-right: 5px;
 }
-#profile-stat .tr .td-fetter .fetter {
+.cont .tr .td-fetter .fetter {
   width: 32px;
   height: 32px;
 }
-#profile-stat .tr .td-talent {
+.cont .tr .td-talent {
-  width: 36px;
+  width: 35px;
   box-shadow: 0 0 1px 0 rgba(150, 150, 150, 0.5);
 }
-#profile-stat .tr .td-weapon {
+.cont .tr .td-weapon {
   text-align: left;
   padding-left: 10px;
 }
-#profile-stat .tr .td-weapon .lv {
+.cont .tr .td-weapon .lv {
   width: 38px;
   text-align: right;
   padding-right: 2px;
   display: inline-block;
   white-space: nowrap;
 }
-#profile-stat .tr .td-weapon .lv:before {
+.cont .tr .td-weapon .weapon-icon {
-  content: "Lv.";
+  border-radius: 0px;
-  display: inline-block;
-  font-size: 12px;
-  transform: scale(0.8);
 }
-#profile-stat .tr .td-weapon .weapon-icon {
+.cont .tr .td-weapon .cons {
-  border-radius: 3px 0 0 3px;
-}
-#profile-stat .tr .td-weapon .cons {
   border-radius: 0 3px 3px 0;
 }
-#profile-stat .tr .weapon-icon {
+.cont .tr .weapon-icon {
   width: 25px;
   height: 22px;
   display: inline-block;
   overflow: visible;
 }
-#profile-stat .tr .weapon-icon .img {
+.cont .tr .weapon-icon .img {
-  width: 36px;
+  width: 30px;
-  height: 36px;
+  height: 30px;
-  margin: -8px 0 0 -7px;
+  margin: -8px 0 0 -3px;
 }
-#profile-stat .tr .lv1 {
+.cont .tr .td-talent {
-  background: rgba(60, 63, 65, 0.5);
+  text-shadow: 0 0 1px #000, 0 0 2px rgba(0, 0, 0, 0.8);
+  color: rgba(255, 255, 255, 0.85);
 }
-#profile-stat .tr .lv2 {
+.cont .tr .talent-plus {
-  background: rgba(23, 184, 58, 0.4);
+  font-weight: bold;
+  color: #48cdda;
+  font-size: 15px;
+  text-shadow: 0 0 1px #000, 0 0 3px #000;
 }
-#profile-stat .tr .lv3 {
+.cont .tr .lv1 {
-  background: rgba(27, 128, 212, 0.4);
+  background: rgba(50, 50, 50, 0.6);
 }
-#profile-stat .tr .lv4 {
+.cont .tr .lv1.talent-plus {
-  background: rgba(146, 90, 255, 0.4);
+  color: #fff;
 }
-#profile-stat .tr .lv5 {
+.cont .tr .lv2 {
+  background: rgba(23, 184, 58, 0.5);
+}
+.cont .tr .lv2.talent-plus {
+  color: #fff;
+}
+.cont .tr .lv3 {
+  background: rgba(27, 128, 212, 0.5);
+}
+.cont .tr .lv3.talent-plus {
+  color: #fff;
+}
+.cont .tr .lv4 {
+  background: rgba(146, 90, 255, 0.5);
+}
+.cont .tr .lv4.talent-plus {
+  color: #fff;
+}
+.cont .tr .lv5 {
   background: url("../common/item/crown-o.png") center center no-repeat rgba(255, 36, 26, 0.35);
   background-size: contain;
+  color: #fff;
 }
-#profile-stat .td-artis {
+.cont .td-artis {
-  width: 120px;
+  width: 115px;
   text-align: left;
 }
-#profile-stat .avatar-artis {
+.cont .avatar-artis {
-  margin-left: 3px;
+  margin-left: 5px;
   text-align: left;
   position: relative;
   z-index: 10;
 }
-#profile-stat .avatar-artis .artis {
+.cont .avatar-artis .artis {
   position: relative;
   width: 30px;
   height: 30px;
@@ -193,45 +270,54 @@
   box-shadow: 0 0 1px 0 #ffe4b4;
   display: inline-block;
 }
-#profile-stat .avatar-artis.artis2 .img {
+.cont .avatar-artis.artis2 .img {
   position: absolute;
   width: 24px;
   height: 24px;
 }
-#profile-stat .avatar-artis.artis2 .img:first-child {
+.cont .avatar-artis.artis2 .img:first-child {
   left: -2px;
   top: -2px;
 }
-#profile-stat .avatar-artis.artis2 .img:last-child {
+.cont .avatar-artis.artis2 .img:last-child {
   right: -2px;
   bottom: -2px;
 }
-#profile-stat .arti-mark-class {
+.cont .arti-mark-class {
   width: 30px;
   font-size: 12px;
   border-radius: 0 4px 4px 0;
   display: inline-block;
   text-align: center;
-  background: #888;
+  background: rgba(51, 51, 51, 0.68);
   height: 18px;
   line-height: 18px;
-  margin-left: -5px;
   box-shadow: 0 0 1px 0 #ffe4b4;
   position: relative;
   z-index: 9;
+  margin-right: 5px;
 }
-#profile-stat .arti-mark-class.class-ACE,
+.cont .arti-mark-class.class-ACE,
-#profile-stat .arti-mark-class.class-ACE² {
+.cont .arti-mark-class.class-ACE² {
   background: #ff5722;
 }
-#profile-stat .arti-mark-class.class-SSS,
+.cont .arti-mark-class.class-SSS,
-#profile-stat .arti-mark-class.class-SS {
+.cont .arti-mark-class.class-SS {
   background: #ab7e31;
 }
-#profile-stat .arti-mark-class.class-S,
+.cont .arti-mark-class.class-S,
-#profile-stat .arti-mark-class.class-A {
+.cont .arti-mark-class.class-A {
   background: #8a2cc9;
 }
+.cont .arti-na {
+  padding-left: 8px;
+  white-space: nowrap;
+  transform: scale(0.8);
+  transform-origin: left center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  margin-right: -40px;
+}
 .cont-notice {
   color: #666;
   background: rgba(0, 0, 0, 0.7);

resources/character/profile-stat.html

@@ -12,10 +12,8 @@
 </div>
 <div id="profile-stat">
   <div class="cont">
-    <div class="cont-title">角色详情列表</div>
     <div class="cont-table">
       <div class="avatar tr thead">
-        <div class="td-level">Lv</div>
         <div class="td-name">角色</div>
 
         <div class="td-fetter">好感</div>
@@ -23,7 +21,7 @@
         <div class="td-talent">A</div>
         <div class="td-talent">E</div>
         <div class="td-talent">Q</div>
-        <div class="td-weapon">武器</div>
+        <div class="td-weapon">武器 精炼</div>
         <div class="td-artis">圣遗物</div>
       </div>
       {{each avatars avatar idx}}
@@ -31,15 +29,15 @@
       {{set weapon = avatar.weapon}}
       {{set tk = ['a','e','q'] }}
       <div class="avatar tr">
-        <div class="td-level"> {{avatar.level}}</div>
         <div class="td-name">
-          <div class="avatar-name">
+          <div class="item-banner star{{avatar.star}}">
-            <span class="item-name star{{avatar.star}}">{{avatar.abbr||avatar.name}}</span>
+            <span class="level">{{avatar.level}}</span>
             <div class="item-icon char-icon star{{avatar.star}}">
               <span class="img"
                     style="background-image:url({{_res_path}}/meta/character/{{avatar.name}}/face.png)"></span>
             </div>
-            <span class="cons cons-{{avatar.cons}} star{{avatar.star}}">{{avatar.cons}}</span>
+            <span class="cons avatar cons-{{avatar.cons}}">{{avatar.cons}}</span>
+            <span class="item-name">{{avatar.abbr||avatar.name}}</span>
           </div>
         </div>
 
@@ -57,18 +55,19 @@
 
         <div class="td-weapon  star-{{weapon.star}}">
           {{if weapon?.name}}
-          <span class="lv">{{weapon.level}}</span>
+          <div class="item-banner star{{weapon.star}}">
-
+            <span class="level">{{weapon.level}}</span>
-          <div class="item-icon weapon-icon star{{weapon.star}}">
+            <div class="item-icon weapon-icon star{{weapon.star}}">
               <span class="img"
                     style="background-image:url({{_res_path}}/meta/weapons/icon/{{weapon.name}}.png)"></span>
+            </div>
+            <span class="cons weapon cons-{{weapon.affix+1}} star{{weapon.star}}">{{weapon.affix}}</span>
+            <span class="item-name">{{weapon.abbr}}</span>
           </div>
-          <span class="cons cons-{{weapon.affix+1}} star{{weapon.star}}">{{weapon.affix}}</span>
-          <span class="item-name star{{weapon.star}}">{{weapon.abbr}}</span>
           {{/if}}
         </div>
         <div class="td-artis">
-          <div class="item avatar-artis artis{{avatar.sets.length}}">
+          <div class="item item-banner avatar-artis artis{{avatar.sets.length}}">
             <div class="artis item-icon">
               {{each avatar?.artisMark?.sets || avatar?.sets || [] name}}
               <span class="img"
@@ -80,7 +79,7 @@
             <span class="arti-mark-class class-{{mark.markClass}}">{{mark.markClass}}</span>
             {{mark.mark}}
             {{else}}
-            <span class="arti-mark-class class-na">-</span> -
+            <span class="arti-na">暂无面板数据</span>
             {{/if}}
           </div>
 

resources/character/profile-stat.less

@@ -2,6 +2,10 @@
   background-size: cover;
 }
 
+.head-box {
+  margin-top: 0px;
+}
+
 
 #profile-stat {
   display: table;
@@ -10,47 +14,91 @@
   margin: 0 -15px -5px;
   overflow: hidden;
 
+  .item-banner {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 36px;
 
-  .cont {
+    & > * {
-    font-size: 14px;
+      display: block;
-    background: none;
+    }
+
+    .item-icon {
+      z-index: 10;
+    }
   }
 
-  .cons {
+  .cons, .level {
     height: 22px;
     line-height: 22px;
     display: inline-block;
     width: 19px;
-    padding: 0 0 0 1px;
+    padding: 0;
+    margin: 0;
     text-align: center;
     vertical-align: middle;
-    border-radius: 0 3px 3px 0;
-    margin-left: -4px;
     font-size: 13px;
+    position: relative;
   }
 
-  .item-icon, .cons {
+  .cons {
-    &.star1 {
+    border-radius: 0 3px 3px 0;
-      box-shadow: 0 0 0 1px rgb(171, 171, 171);
+    width: 22px;
-    }
+    margin-right: 5px;
+  }
 
-    &.star2 {
+  .level {
-      box-shadow: 0 0 0 1px rgb(208, 255, 190);
+    border-radius: 3px 0 0 3px;
-    }
+    width: 32px;
 
-    &.star3 {
+    &:before {
-      box-shadow: 0 0 0 1px rgb(190, 208, 255);
+      content: "Lv";
-    }
 
-    &.star4 {
-      box-shadow: 0 0 0 1px rgba(223, 190, 255, 1);
-    }
-
-    &.star5 {
-      box-shadow: 0 0 0 1px rgba(255, 228, 180, 1);
     }
   }
 
+  .level:before {
+    display: inline-block;
+    font-size: 12px;
+    transform: scale(.7);
+    transform-origin: right 55%;
+    margin-left: -3px;
+  }
+
+  .level:before {
+    content: "Lv";
+  }
+
+
+  .star(@s, @color) {
+    .star@{s} {
+      .item-icon {
+        box-shadow: 0 0 0 1px @color;
+      }
+
+      .cons {
+        box-shadow: 0 0 0 1px @color;
+      }
+
+      .level {
+        box-shadow: 0 0 0 1px @color;
+        color: darken(@color, 50%);
+        background: fadeout(@color, 10%);
+      }
+    }
+  }
+  .star(1, rgb(171, 171, 171));
+  .star(2, rgb(208, 255, 190));
+  .star(3, rgb(190, 208, 255));
+  .star(4, rgb(223, 190, 255));
+  .star(5, rgb(255, 228, 180));
+}
+
+.cont {
+  font-size: 14px;
+  background: none;
+
   .item-name {
     text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, .8);
 
@@ -64,56 +112,32 @@
   }
 
   .tr.thead {
-    .td-name {
+    background: rgba(0, 0, 0, .5);
-      padding-right: 22px;
+    font-weight: bold;
+
+    & > div {
+      box-shadow: 0 0 1px 0 rgba(255, 255, 255, .7);
+      text-align: center;
     }
 
     .td-talent {
-      box-shadow: none;
-    }
 
-    .td-weapon {
+      color: #d3bc8e;
-      padding-left: 50px;
-    }
-
-    .td-artis {
-      text-align: left;
     }
   }
 
   .tr {
 
     & > div {
-
       text-align: center;
       height: 36px;
       vertical-align: middle;
       line-height: 36px;
-      box-shadow: none;
+      box-shadow: 0 0 1px 0 rgba(255, 255, 255, .7);
 
       * {
         vertical-align: middle;
       }
-
-      &.star1 {
-
-      }
-
-      &.star2 {
-
-      }
-
-      &.star3 {
-
-      }
-
-      &.star4 {
-        background: rgba(102, 59, 143, 0.5);
-      }
-
-      &.star5 {
-        background: rgba(124, 95, 45, 0.5);
-      }
     }
 
     .index {
@@ -123,17 +147,10 @@
 
     }
 
-    .td-level {
-
-      width: 30px;
-      text-align: right;
-
-    }
-
     .td-name {
-      text-align: right;
+      text-align: left;
-      width: 110px;
+      width: 150px;
-      padding-right: 8px;
+      padding-left: 8px;
 
 
       .char-icon {
@@ -145,19 +162,14 @@
 
 
         .img {
-          width: 34px;
+          width: 33px;
-          height: 34px;
+          height: 33px;
-
           position: relative;
           top: -3px;
-          left: -2px;
+          left: -1px;
+          border-radius: 0 0 6px 6px;
         }
       }
-
-      .cons {
-        margin-left: -5px;
-      }
-
     }
 
     .td-fetter {
@@ -172,7 +184,7 @@
     }
 
     .td-talent {
-      width: 36px;
+      width: 35px;
       box-shadow: 0 0 1px 0 rgba(150, 150, 150, .5);
     }
 
@@ -186,18 +198,10 @@
         padding-right: 2px;
         display: inline-block;
         white-space: nowrap;
-
-        &:before {
-          content: "Lv.";
-          display: inline-block;
-          font-size: 12px;
-          transform: scale(.8)
-        }
       }
 
-
       .weapon-icon {
-        border-radius: 3px 0 0 3px;
+        border-radius: 0px;
       }
 
       .cons {
@@ -212,43 +216,55 @@
       overflow: visible;
 
       .img {
-        width: 36px;
+        width: 30px;
-        height: 36px;
+        height: 30px;
-        margin: -8px 0 0 -7px;
+        margin: -8px 0 0 -3px;
       }
     }
 
-
+    .td-talent {
-    .lv1 {
+      text-shadow: 0 0 1px #000, 0 0 2px rgba(0, 0, 0, .8);
-      background: rgba(60, 63, 65, .5)
+      color: rgba(255, 255, 255, .85);
     }
 
-    .lv2 {
+    .talent-plus {
-      background: rgba(23, 184, 58, .4)
+      font-weight: bold;
+      color: #48cdda;
+      font-size: 15px;
+      text-shadow: 0 0 1px #000, 0 0 3px #000;
     }
 
-    .lv3 {
+    .lv(@lv, @c1, @c2:#fff) {
-      background: rgba(27, 128, 212, .4)
+      .lv@{lv} {
-    }
+        background: @c1;
 
-    .lv4 {
+        &.talent-plus {
-      background: rgba(146, 90, 255, .4);
+          color: @c2;
+        }
+      }
     }
+    .lv(1, rgba(50, 50, 50, .6));
+    .lv(2, rgba(23, 184, 58, .5));
+    .lv(3, rgba(27, 128, 212, .5));
+    .lv(4, rgba(146, 90, 255, .5));
 
     .lv5 {
       background: url("../common/item/crown-o.png") center center no-repeat rgba(255, 36, 26, .35);
       background-size: contain;
+      color: #fff;
     }
 
+
   }
 
   .td-artis {
-    width: 120px;
+    width: 115px;
+
     text-align: left;
   }
 
   .avatar-artis {
-    margin-left: 3px;
+    margin-left: 5px;
     text-align: left;
     position: relative;
     z-index: 10;
@@ -287,13 +303,13 @@
     border-radius: 0 4px 4px 0;
     display: inline-block;
     text-align: center;
-    background: #888;
+    background: rgba(51, 51, 51, 0.68);
     height: 18px;
     line-height: 18px;
-    margin-left: -5px;
     box-shadow: 0 0 1px 0 #ffe4b4;
     position: relative;
     z-index: 9;
+    margin-right: 5px;
 
     &.class- {
       &ACE,
@@ -312,6 +328,16 @@
       }
     }
   }
+
+  .arti-na {
+    padding-left: 8px;
+    white-space: nowrap;
+    transform: scale(.8);
+    transform-origin: left center;
+    color: rgba(255, 255, 255, .5);
+    font-size: 12px;
+    margin-right: -40px;
+  }
 }
 
 .cont-notice {

resources/common/base.css

@@ -0,0 +1,7 @@
+.font-ys {
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+.font-nzbz {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+/*# sourceMappingURL=base.css.map */

resources/common/base.less

@@ -0,0 +1,7 @@
+.font-YS {
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+
+.font-NZBZ {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}

resources/common/common.css

@@ -1,32 +1,20 @@
 @font-face {
-  font-family: "HWZS";
+  font-family: 'Number';
-  src: url("../common/font/华文中宋.TTF");
+  src: url("./font/tttgbnumber.woff") format('woff'), url("./font/tttgbnumber.ttf") format('truetype');
-  font-weight: normal;
-  font-style: normal;
 }
 @font-face {
-  font-family: "Number";
+  font-family: 'NZBZ';
-  src: url("../common/font/tttgbnumber.ttf");
+  src: url("./font/NZBZ.woff") format('woff'), url("./font/NZBZ.ttf") format('truetype');
-  font-weight: normal;
-  font-style: normal;
 }
 @font-face {
-  font-family: "NZBZ";
+  font-family: 'YS';
-  src: url("../common/font/NZBZ.ttf");
+  src: url("./font/HYWH-65W.woff") format('woff'), url("./font/HYWH-65W.ttf") format('truetype');
-  font-weight: normal;
-  font-style: normal;
 }
-@font-face {
+.font-YS {
-  font-family: "YS";
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
-  src: url("../common/font/HYWH-85W.ttf");
-  font-weight: normal;
-  font-style: normal;
 }
-@font-face {
+.font-NZBZ {
-  font-family: "YS2";
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
-  src: url("../common/font/HYWH-65W.ttf");
-  font-weight: normal;
-  font-style: normal;
 }
 * {
   margin: 0;
@@ -38,7 +26,7 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: Number, YS2, PingFangSC-Medium, PingFang SC, sans-serif;
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   transform: scale(1.4);
   transform-origin: 0 0;
   width: 600px;
@@ -56,10 +44,14 @@ body {
   margin-top: 30px;
 }
 .head-box .title {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   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 .title .label {
+  display: inline-block;
+  margin-left: 10px;
+}
 .head-box .genshin_logo {
   position: absolute;
   top: 1px;

resources/common/common.less

@@ -1,37 +1,15 @@
-@font-face {
+.font(@name, @file) {
-  font-family: "HWZS";
+  @font-face {
-  src: url("../common/font/华文中宋.TTF");
+    font-family: @name;
-  font-weight: normal;
+    src: url("./font/@{file}.woff") format('woff'), url("./font/@{file}.ttf") format('truetype');
-  font-style: normal;
+  }
 }
 
-@font-face {
+.font('Number', 'tttgbnumber');
-  font-family: "Number";
+.font('NZBZ', 'NZBZ');
-  src: url("../common/font/tttgbnumber.ttf");
+.font('YS', 'HYWH-65W');
-  font-weight: normal;
-  font-style: normal;
-}
 
-@font-face {
+@import "base.less";
-  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;
@@ -44,7 +22,7 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: Number, YS2, PingFangSC-Medium, PingFang SC, sans-serif;
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   transform: scale(1.4);
   transform-origin: 0 0;
   width: 600px;
@@ -65,9 +43,14 @@ body {
   margin-top: 30px;
 
   .title {
+    .font-NZBZ;
     font-size: 36px;
-    font-family: NZBZ, sans-serif;
     text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
+
+    .label {
+      display: inline-block;
+      margin-left: 10px;
+    }
   }
 
   .genshin_logo {

resources/common/layout/default.html

@@ -4,10 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <link rel="shortcut icon" href="#"/>
-    <link rel="preload" href="{{_res_path}}common/font/HYWH-65W.ttf" as="font" type="font/ttf" crossorigin>
+    <link rel="preload" href="{{_res_path}}common/font/HYWH-65W.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="{{_res_path}}common/font/HYWH-85W.ttf" as="font" type="font/ttf" crossorigin>
+    <link rel="preload" href="{{_res_path}}common/font/NZBZ.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="{{_res_path}}common/font/NZBZ.ttf" as="font" type="font/ttf" crossorigin>
+    <link rel="preload" href="{{_res_path}}common/font/tttgbnumber.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="{{_res_path}}common/font/tttgbnumber.ttf" as="font" type="font/ttf" crossorigin>
     <link rel="stylesheet" type="text/css" href="{{_res_path}}common/common.css"/>
     <title>miao-plugin</title>
     {{block 'css'}}

resources/common/layout/elem.html

@@ -4,10 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <link rel="shortcut icon" href="#"/>
-    <link rel="preload" href="{{_res_path}}common/font/HYWH-65W.ttf" as="font" type="font/ttf" crossorigin>
+    <link rel="preload" href="{{_res_path}}common/font/HYWH-65W.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="{{_res_path}}common/font/HYWH-85W.ttf" as="font" type="font/ttf" crossorigin>
+    <link rel="preload" href="{{_res_path}}common/font/NZBZ.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="{{_res_path}}common/font/NZBZ.ttf" as="font" type="font/ttf" crossorigin>
+    <link rel="preload" href="{{_res_path}}common/font/tttgbnumber.woff" as="font" type="font/woff" crossorigin>
-    <link rel="preload" href="{{_res_path}}common/font/tttgbnumber.ttf" as="font" type="font/ttf" crossorigin>
     <link rel="stylesheet" type="text/css" href="{{_res_path}}common/common.css"/>
     <title>miao-plugin</title>
     {{block 'css'}}

resources/common/tpl.css

@@ -87,7 +87,6 @@
   width: 100%;
   font-size: 12px;
   line-height: 16px;
-  font-family: Number, YS;
   white-space: nowrap;
   overflow: hidden;
   padding: 0 3px;
@@ -121,7 +120,6 @@
   color: #fff;
   padding: 1px 4px;
   border-radius: 3px;
-  font-family: "tttgbnumber";
 }
 .item-card .life1 {
   background-color: #62a8ea;
@@ -263,6 +261,12 @@
   right: -2px;
   bottom: -2px;
 }
+.font-YS {
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+.font-NZBZ {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
 .profile {
   position: relative;
   margin-bottom: 10px;
@@ -298,12 +302,11 @@
 }
 .profile .char-name {
   font-size: 50px;
-  font-family: NZBZ;
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, PingFangSC-Medium, "PingFang SC", sans-serif;
   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;
@@ -319,7 +322,6 @@
   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);
@@ -371,7 +373,6 @@
   position: absolute;
   right: 85px;
   text-align: right;
-  font-family: Number, sans-serif;
   font-weight: normal;
 }
 .profile .detail li span {
@@ -380,7 +381,6 @@
   text-align: left;
   width: 75px;
   display: inline-block;
-  font-family: Number, sans-serif;
   color: #90e800;
   font-size: 15px;
 }
@@ -422,7 +422,6 @@
   margin-left: -15px;
   color: #000;
   box-shadow: 0 0 5px 0 #000;
-  font-family: Number;
 }
 .profile .talent-icon.talent-plus span {
   background: #2e353e;
@@ -512,19 +511,14 @@
   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;
@@ -547,7 +541,6 @@
   position: initial;
   display: table-cell;
   color: #fff;
-  font-family: YS;
 }
 .arti-detail ul.detail li span.title {
   text-align: left;
@@ -556,7 +549,6 @@
 .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);

resources/common/tpl/artis-detail.less

@@ -46,7 +46,6 @@
       display: block;
       white-space: nowrap;
       overflow: hidden;
-      font-font: YS;
     }
 
     span {
@@ -54,7 +53,7 @@
     }
 
     .mark {
-      font-family: Number, YS;
+
     }
   }
 
@@ -62,7 +61,6 @@
     width: 100%;
     padding: 0;
     position: initial;
-    font-family: YS;
 
     li {
       padding: 0 3px;
@@ -87,7 +85,6 @@
         position: initial;
         display: table-cell;
         color: #fff;
-        font-family: YS;
 
 
         &.title {
@@ -98,7 +95,7 @@
         &.val {
           text-align: right;
           padding-right: 10px;
-          font-family: Number;
+          //font-family: Number;
         }
       }
 

resources/common/tpl/avatar-profile.less

@@ -1,3 +1,4 @@
+@import "../common/base.less";
 .profile {
   position: relative;
   margin-bottom: 10px;
@@ -36,13 +37,12 @@
 
   .char-name {
     font-size: 50px;
-    font-family: NZBZ;
+    .font-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;
@@ -60,7 +60,6 @@
     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);
@@ -127,7 +126,6 @@
       position: absolute;
       right: 85px;
       text-align: right;
-      font-family: Number, sans-serif;
       font-weight: normal;
     }
 
@@ -137,7 +135,6 @@
       text-align: left;
       width: 75px;
       display: inline-block;
-      font-family: Number, sans-serif;
       color: #90e800;
       font-size: 15px;
     }
@@ -183,7 +180,6 @@
       margin-left: -15px;
       color: #000;
       box-shadow: 0 0 5px 0 #000;
-      font-family: Number;
     }
 
     &.talent-plus span {

resources/common/tpl/item-card.less

@@ -64,7 +64,6 @@
       width: 100%;
       font-size: 12px;
       line-height: 16px;
-      font-family: Number, YS;
       white-space: nowrap;
       overflow: hidden;
       padding: 0 3px;
@@ -103,7 +102,6 @@
     color: #fff;
     padding: 1px 4px;
     border-radius: 3px;
-    font-family: "tttgbnumber";
   }
 
   .life(@idx, @color) {

resources/help/index.css

@@ -8,9 +8,6 @@ body {
   background-size: 100% auto;
   width: 830px;
 }
-.label {
-  font-family: Number, "微软雅黑", sans-serif;
-}
 .head-box {
   margin: 60px 0 0 0;
   padding-bottom: 0;

resources/help/index.less

@@ -11,7 +11,7 @@ body {
 }
 
 .label {
-  font-family: Number, "微软雅黑", sans-serif;
+  //font-family: Number, "微软雅黑", sans-serif;
 }
 
 .head-box {

resources/stat/abyss-summary.css

@@ -1,3 +1,9 @@
+.font-YS {
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+.font-NZBZ {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
 body,
 .container {
   width: 690px;
@@ -37,7 +43,7 @@ body,
 .abyss-stat .stat-title span {
   display: block;
   font-weight: normal;
-  font-family: NZBZ, sans-serif;
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   font-size: 24px;
 }
 .abyss-stat .stat-title strong {
@@ -86,7 +92,7 @@ body,
 .abyss-data .abyss-item .info strong {
   display: block;
   font-weight: normal;
-  font-family: NZBZ, YS2, sans-serif;
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
 }
 .abyss-data .abyss-item .info span {
   font-size: 24px;
@@ -103,7 +109,7 @@ body,
 .abyss-title strong {
   color: #d3bc8e;
   font-size: 18px;
-  font-family: Number, NZBZ, YS2, sans-serif;
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
   font-weight: normal;
   margin-right: 10px;
 }

resources/stat/abyss-summary.less

@@ -1,3 +1,5 @@
+@import "../common/base.less";
+
 body, .container {
   width: 690px;
 }
@@ -45,7 +47,7 @@ body, .container {
     span {
       display: block;
       font-weight: normal;
-      font-family: NZBZ, sans-serif;
+      .font-NZBZ;
       font-size: 24px;
     }
 
@@ -103,7 +105,7 @@ body, .container {
       strong {
         display: block;
         font-weight: normal;
-        font-family: NZBZ, YS2, sans-serif;
+        .font-NZBZ;
       }
 
       span {
@@ -126,7 +128,7 @@ body, .container {
   strong {
     color: #d3bc8e;
     font-size: 18px;
-    font-family: Number, NZBZ, YS2, sans-serif;
+    .font-NZBZ;
     font-weight: normal;
     margin-right: 10px;
   }

resources/stat/abyss-team.css

@@ -3,7 +3,6 @@
   margin-bottom: 15px;
 }
 .cont {
-  font-family: YS;
   margin-top: 10px;
 }
 .cont-table .title {
@@ -31,7 +30,6 @@
   overflow: hidden;
   background: #e7e5d9;
   font-size: 12px;
-  font-family: Number;
   color: #000;
   text-align: center;
 }
@@ -46,7 +44,6 @@
 }
 .card-list .no-label {
   font-size: 12px;
-  font-family: YS;
   color: #555;
 }
 .card-list .card img {
@@ -80,7 +77,6 @@
   border-radius: 3px;
   padding: 1px 5px;
   background: rgba(0, 0, 0, 0.5);
-  font-family: Number;
 }
 .card-list .card .name,
 .card-list .card .num_name {

resources/stat/abyss-team.less

@@ -4,7 +4,6 @@
 }
 
 .cont {
-  font-family: YS;
   margin-top: 10px;
 }
 
@@ -36,7 +35,6 @@
   overflow: hidden;
   background: #e7e5d9;
   font-size: 12px;
-  font-family: Number;
   color: #000;
   text-align: center;
 }
@@ -55,7 +53,6 @@
 
 .card-list .no-label {
   font-size: 12px;
-  font-family: YS;
   color: #555;
 }
 
@@ -94,7 +91,7 @@
   border-radius: 3px;
   padding: 1px 5px;
   background: rgb(0 0 0 / 50%);
-  font-family: Number;
+  //font-family: Number;
 }
 
 .card-list .card .name,

resources/stat/common.css

@@ -1,3 +1,9 @@
+.font-YS {
+  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
+.font-NZBZ {
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
+}
 * {
   margin: 0;
   padding: 0;
@@ -12,7 +18,6 @@ body {
   background: url("./imgs/bg1.png") top left no-repeat #2a3860;
   background-size: contain;
   width: 600px;
-  font-family: Number, YS2;
 }
 .container {
   width: 600px;
@@ -29,7 +34,7 @@ body {
 }
 .head-box .title {
   font-size: 36px;
-  font-family: NZBZ;
+  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
 }
 .head-box .genshin_logo {
   position: absolute;

resources/stat/common.less

@@ -1,3 +1,5 @@
+@import "../common/base.less";
+
 * {
   margin: 0;
   padding: 0;
@@ -13,7 +15,7 @@ body {
   background: url("./imgs/bg1.png") top left no-repeat #2a3860;
   background-size: contain;
   width: 600px;
-  font-family: Number, YS2;
+  //font-family: Number, YS2;
 }
 
 .container {
@@ -33,7 +35,7 @@ body {
 
   .title {
     font-size: 36px;
-    font-family: NZBZ;
+    .font-NZBZ;
   }
 
   .genshin_logo {

resources/wiki/calendar.css

@@ -13,7 +13,6 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
   transform: scale(1);
   transform-origin: 0 0;
   width: 996px;
@@ -28,7 +27,6 @@ body {
   text-align: center;
   color: #fff;
   margin: 20px 0 10px 0;
-  font-family: Number, YS;
 }
 .calendar {
   min-height: 400px;
@@ -132,7 +130,6 @@ body {
 .cal-list .cal-item span {
   display: block;
   font-size: 12px;
-  font-family: Number, YS;
 }
 .cal-list .cal-item.type-character {
   overflow: visible;
@@ -245,7 +242,6 @@ body {
 }
 .now-time span {
   color: #fff;
-  font-family: Number, YS;
   background: rgba(0, 0, 0, 0.6);
   border-radius: 30px;
   padding: 10px 15px;

resources/wiki/calendar.less

@@ -4,14 +4,6 @@
   background-image: linear-gradient(to right, @color, @color 80%, fade(@color, 0) 100%);
 }
 
-.font-ys {
-  font-family: YS;
-}
-
-.font-number {
-  font-family: Number, YS;
-}
-
 * {
   margin: 0;
   padding: 0;
@@ -22,7 +14,6 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
   transform: scale(1);
   transform-origin: 0 0;
   width: 996px;
@@ -39,7 +30,6 @@ body {
   text-align: center;
   color: #fff;
   margin: 20px 0 10px 0;
-  .font-number;
 }
 
 .calendar {
@@ -161,8 +151,6 @@ body {
     span {
       display: block;
       font-size: 12px;
-      .font-number;
-
     }
 
 
@@ -316,7 +304,6 @@ body {
 
   span {
     color: #fff;
-    .font-number;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 30px;
     padding: 10px 15px;

resources/wiki/character.css

@@ -7,7 +7,6 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: Number, YS;
   transform: scale(1);
   transform-origin: 0 0;
 }
@@ -256,7 +255,6 @@ body {
   font-size: 18px;
   line-height: 26px;
   padding-right: 10px;
-  font-family: Number, YS2;
 }
 .talent-desc strong {
   margin-top: 15px;
@@ -300,7 +298,6 @@ body {
 .talent-table .th {
   padding: 7px;
   line-height: 24px;
-  font-family: Number, YS;
 }
 .talent-table .tr:last-child .td {
   padding-bottom: 12px;

resources/wiki/character.less

@@ -8,7 +8,6 @@
 body {
   font-size: 18px;
   color: #1e1f20;
-  font-family: Number, YS;
   transform: scale(1);
   transform-origin: 0 0;
 }
@@ -295,7 +294,6 @@ body {
   font-size: 18px;
   line-height: 26px;
   padding-right: 10px;
-  font-family: Number, YS2;
 }
 
 .talent-desc strong {
@@ -346,7 +344,6 @@ body {
   .td, .th {
     padding: 7px;
     line-height: 24px;
-    font-family: Number, YS;
   }
 
   .tr:last-child .td {