更新 #面板练度统计 的样式与功能

adapter/mys.js

@@ -10,7 +10,6 @@ class User {
 
   // 保存用户配置
   async setCfg (path, value) {
-    console.log(this.id)
     let userCfg = await redis.get(`genshin:user-cfg:${this.id}`)
     userCfg = userCfg ? JSON.parse(userCfg) : {}
     lodash.set(userCfg, path, value)

apps/character/profile-stat.js

@@ -1,6 +1,6 @@
 import lodash from 'lodash'
-import { Common } from '../../components/index.js'
+import { Common, Profile } from '../../components/index.js'
-import Avatars from '../../components/models/Avatars.js'
+import { Artifact, Avatars } from '../../components/models.js'
 
 export async function profileStat (e, { render }) {
   // 缓存时间，单位小时
@@ -17,14 +17,8 @@ export async function profileStat (e, { render }) {
     targetType: 'all',
     cookieType: 'all'
   })
-  if (!MysApi) return true
+  if (!MysApi || !MysApi?.targetUser?.uid) return true
-  let uid = MysApi.targetUid
+  let uid = MysApi?.targetUser?.uid
-
-  /*
-  let star = 0
-  if (/(四|4)/.test(msg)) star = 4
-  if (/(五|5)/.test(msg)) star = 5
-   */
 
   let resIndex = await MysApi.getCharacter()
   if (!resIndex) {
@@ -39,11 +33,16 @@ export async function profileStat (e, { render }) {
   // 天赋等级背景
   const talentLvMap = '0,1,1,1,2,2,3,3,3,4,5'.split(',')
 
+  let profiles = Profile.getAll(uid)
+
   let avatarRet = []
   lodash.forEach(talentData, (avatar) => {
-    let { talent } = avatar
+    let { talent, id, name } = avatar
     avatar.aeq = talent?.a?.original + talent?.e?.original + talent?.q?.original || 3
     avatarRet.push(avatar)
+    if (profiles[id]?.artis) {
+      avatar.artisMark = Artifact.getTotalMark(name, profiles[id].artis)
+    }
   })
 
   let sortKey = 'level,star,aeq,cons,weapon.level,weapon.star,weapon.affix,fetter'.split(',')
@@ -51,11 +50,10 @@ export async function profileStat (e, { render }) {
   avatarRet = lodash.orderBy(avatarRet, sortKey)
   avatarRet = avatarRet.reverse()
 
-  let noTalent = false
+  let talentNotice = ''
 
-  let talentNotice = `技能列表每${cacheCd}小时更新一次`
+  if (!MysApi.isSelfCookie) {
-  if (noTalent) {
+    talentNotice = '未绑定Cookie，无法获取天赋列表。请回复 #体力帮助 获取配置教程'
-    talentNotice = '未绑定体力Cookie，无法获取天赋列表。请回复 #体力 获取配置教程'
   }
 
   return await Common.render('character/profile-stat', {
@@ -65,6 +63,6 @@ export async function profileStat (e, { render }) {
     avatars: avatarRet,
     isSelf: e.isSelf,
     talentNotice,
-    elem: 'hydro',
+    elem: 'hydro'
   }, { e, render, scale: 1.8 })
 }

components/models.js

@@ -1,5 +1,6 @@
 import Character from './models/Character.js'
 import HutaoApi from './models/HutaoApi.js'
 import Artifact from './models/Artifact.js'
+import Avatars from './models/Avatars.js'
 
-export { Character, HutaoApi, Artifact }
+export { Character, HutaoApi, Artifact, Avatars }

components/models/Artifact.js

@@ -4,6 +4,7 @@ import { Character } from '../models.js'
 import lodash from 'lodash'
 import Format from '../Format.js'
 import _Data from '../Data.js'
+import Data from '../Data.js';
 
 let _path = process.cwd()
 let artis = _Data.readJSON(`${_path}/plugins/miao-plugin/resources/meta/reliquaries/`, 'data.json') || {}
@@ -24,7 +25,7 @@ let Artifact = {
     let attrMark = {}
 
     let char = Character.get(name)
-    let baseAttr = char.lvStat.detail['90']
+    let baseAttr = char?.lvStat?.detail['90'] || [400, 500, 300]
     lodash.forEach(attrWeight, (weight, attr) => {
       attrMark[attr] = weight / attrValue[attr]
     })
@@ -41,7 +42,8 @@ let Artifact = {
       attrMark.defPlus = attrMark.def / baseAttr[2] * 100
     }
     let maxMark = Artifact.getMaxMark(attrWeight)
-    let titleMark = {}; let titleWeight = {}
+    let titleMark = {}
+    let titleWeight = {}
     lodash.forEach(attrMark, (mark, attr) => {
       let aTitle = attrMap[attr].title
       if (/小/.test(aTitle)) {
@@ -81,7 +83,8 @@ let Artifact = {
   getMaxMark (attrWeight) {
     let ret = {}
     for (let idx = 1; idx <= 5; idx++) {
-      let totalMark = 0; let mMark = 0
+      let totalMark = 0;
+      let mMark = 0
       let mAttr = ''
       if (idx === 1) {
         mAttr = 'hpPlus'
@@ -151,6 +154,44 @@ let Artifact = {
     return ret
   },
 
+  getTotalMark (charName = '', artis) {
+    let artisMark = Artifact.getArtisMark(charName, artis)
+    let mark = 0
+    for (let k in artisMark) {
+      if (artisMark[k]) {
+        mark += artisMark[k]
+      }
+    }
+    let sets = {}
+    let setMap = {}
+    lodash.forEach(artis, (arti) => {
+      let setName = Artifact.getSetByArti(arti.name)?.name || 'N/A'
+      if (setName) {
+        sets[setName] = (sets[setName] || 0) + 1
+      }
+    })
+    console.log(charName, sets)
+    for (let set in sets) {
+      if (sets[set] >= 4) {
+        setMap[set] = 4
+      } else if (sets[set] >= 2) {
+        setMap[set] = 2
+      }
+    }
+    let setsRet = []
+    lodash.forEach(setMap, (v, k) => {
+      let name = Artifact.getArtiBySet(k)
+      if (name) {
+        setsRet.push(name)
+      }
+    })
+    return {
+      mark: (mark || 0).toFixed(1),
+      markClass: Artifact.getMarkClass(mark / 5),
+      sets: setsRet
+    }
+  },
+
   getMarkClass (mark) {
     let pct = mark
     let scoreMap = [['D', 10], ['C', 16.5], ['B', 23.1], ['A', 29.7], ['S', 36.3], ['SS', 42.9], ['SSS', 49.5], ['ACE', 56.1], ['ACE²', 66]]
@@ -194,7 +235,10 @@ let Artifact = {
       })
       return ret
     }
-    let title = ds[0]; let key = ''; let val = ds[1]; let num = ds[1]
+    let title = ds[0];
+    let key = '';
+    let val = ds[1];
+    let num = ds[1]
     if (!title || title === 'undefined') {
       return []
     }

components/models/Avatars.js

@@ -21,7 +21,7 @@ export default class Avatars extends Base {
       data.weapon = Data.getData(avatar.weapon, 'name,affix:affix_level,level,star:rarity')
       data.weapon.abbr = abbr[data?.weapon?.name || ''] || data?.weapon?.name
       if (data.star > 5) {
-        data.star = 5;
+        data.star = 5
       }
       let artis = {}
       let sets = {}

config/character_default.js

@@ -12,10 +12,10 @@
 export const customCharacters = {
 
   // 已有角色添加别名示例：为魈增加新的别名
-  // roleid请参见Yunzai roleId.js
+  // roleid请参见Yunzai config/genshin/roleId.js
   10000026: ['魈', '风夜叉'],
 
-  // 以下为新增自定义角色，角色id请以小写英文定义
+  // 自定义角色，角色id请以小写英文定义
   sb: ['散兵', '国崩']
 }
 
@@ -32,6 +32,7 @@ export const wifeData = {
 
   // 女儿：萝莉
   daughter: '派蒙, 瑶瑶',
+
   // 儿子：正太
   son: ''
 }

config/system/character.js

@@ -153,6 +153,16 @@ export const abbr = {
   证誓之明瞳: '证誓明瞳',
   波乱月白经津: '波乱',
   笼钓瓶一心: '笼钓瓶',
+  暗巷的酒与诗: '暗巷酒',
+  飞天大御剑: '飞天剑',
+  桂木斩长正: '桂木',
+  口袋魔导书: '魔导书',
+  历练的猎弓: '猎弓',
+  沐浴龙血的剑: '龙血剑',
+  神射手之誓: '神射手',
+  幽夜华尔兹: '华尔兹',
+  宗室秘法录: '宗室秘法',
+  异世界行记: '异世行记',
 
   角斗士的终幕礼: '角斗士',
   流浪大地的乐团: '流浪乐团',

resources/character/profile-stat.css

@@ -1,16 +1,6 @@
 .container {
   background-size: cover;
 }
-.lv {
-  width: 40px;
-  text-align: right;
-  padding-right: 2px;
-}
-.lv:before {
-  content: "Lv";
-  display: inline-block;
-  font-size: 12px;
-}
 #profile-stat {
   display: table;
   border-collapse: collapse;
@@ -34,6 +24,18 @@
   margin-left: -4px;
   font-size: 13px;
 }
+#profile-stat .item-icon.star1,
+#profile-stat .cons.star1 {
+  box-shadow: 0 0 0 1px #ababab;
+}
+#profile-stat .item-icon.star2,
+#profile-stat .cons.star2 {
+  box-shadow: 0 0 0 1px #d0ffbe;
+}
+#profile-stat .item-icon.star3,
+#profile-stat .cons.star3 {
+  box-shadow: 0 0 0 1px #bed0ff;
+}
 #profile-stat .item-icon.star4,
 #profile-stat .cons.star4 {
   box-shadow: 0 0 0 1px #dfbeff;
@@ -51,6 +53,18 @@
 #profile-stat .item-name.star5 {
   color: #ffe4b4;
 }
+#profile-stat .tr.thead .td-name {
+  padding-right: 22px;
+}
+#profile-stat .tr.thead .td-talent {
+  box-shadow: none;
+}
+#profile-stat .tr.thead .td-weapon {
+  padding-left: 50px;
+}
+#profile-stat .tr.thead .td-artis {
+  text-align: left;
+}
 #profile-stat .tr > div {
   text-align: center;
   height: 36px;
@@ -61,11 +75,21 @@
 #profile-stat .tr > div * {
   vertical-align: middle;
 }
+#profile-stat .tr > div.star4 {
+  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 {
+  width: 30px;
+  text-align: right;
+}
 #profile-stat .tr .td-name {
   text-align: right;
   width: 110px;
@@ -76,32 +100,48 @@
   height: 30px;
   border-radius: 5px;
   display: inline-block;
+  overflow: visible;
+}
+#profile-stat .tr .td-name .char-icon .img {
+  width: 34px;
+  height: 34px;
+  position: relative;
+  top: -3px;
+  left: -2px;
 }
 #profile-stat .tr .td-name .cons {
   margin-left: -5px;
 }
-#profile-stat .tr .th .name {
+#profile-stat .tr .td-fetter {
-  justify-content: center;
+  width: 40px;
+  text-align: center;
+  padding-right: 5px;
 }
-#profile-stat .tr > div.fetter10 {
+#profile-stat .tr .td-fetter .fetter {
-  background: url("./hart.png") center center no-repeat;
+  width: 32px;
-  background-size: contain;
+  height: 32px;
-  color: #fff;
 }
-#profile-stat .tr .cons span {
+#profile-stat .tr .td-talent {
-  display: inline-block;
+  width: 36px;
-  width: 14px;
+  box-shadow: 0 0 1px 0 rgba(150, 150, 150, 0.5);
-  height: 18px;
-  line-height: 18px;
-  vertical-align: middle;
-  border-radius: 4px;
-  margin-bottom: 2px;
 }
 #profile-stat .tr .td-weapon {
   text-align: left;
-  width: 160px;
   padding-left: 10px;
 }
+#profile-stat .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 {
+  content: "Lv.";
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(0.8);
+}
 #profile-stat .tr .td-weapon .weapon-icon {
   border-radius: 3px 0 0 3px;
 }
@@ -113,41 +153,23 @@
   height: 22px;
   display: inline-block;
   overflow: visible;
-  margin-left: 3px;
 }
 #profile-stat .tr .weapon-icon .img {
-  width: 32px;
+  width: 36px;
-  height: 32px;
+  height: 36px;
-  margin: -5px 0 0 -3px;
+  margin: -8px 0 0 -7px;
-}
-#profile-stat .tr .weapon .avatar-weapon {
-  display: flex;
-  align-items: center;
-}
-#profile-stat .tr .weapon .weapon_lv {
-  width: 30px;
-  margin-left: 8px;
-}
-#profile-stat .tr .weapon .weapon_alv {
-  width: 14px;
-  text-align: center;
-  height: 18px;
-  line-height: 18px;
-  padding: 0 3px;
-  border-radius: 4px;
-  margin-right: 5px;
 }
 #profile-stat .tr .lv1 {
-  background: rgba(60, 63, 65, 0.2);
+  background: rgba(60, 63, 65, 0.5);
 }
 #profile-stat .tr .lv2 {
-  background: rgba(23, 184, 58, 0.3);
+  background: rgba(23, 184, 58, 0.4);
 }
 #profile-stat .tr .lv3 {
-  background: rgba(27, 128, 212, 0.3);
+  background: rgba(27, 128, 212, 0.4);
 }
 #profile-stat .tr .lv4 {
-  background: rgba(146, 90, 255, 0.35);
+  background: rgba(146, 90, 255, 0.4);
 }
 #profile-stat .tr .lv5 {
   background: url("../common/item/crown-o.png") center center no-repeat rgba(255, 36, 26, 0.35);
@@ -155,15 +177,20 @@
 }
 #profile-stat .td-artis {
   width: 120px;
+  text-align: left;
 }
 #profile-stat .avatar-artis {
   margin-left: 3px;
+  text-align: left;
+  position: relative;
+  z-index: 10;
 }
 #profile-stat .avatar-artis .artis {
   position: relative;
   width: 30px;
   height: 30px;
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(51, 51, 51, 0.68);
+  box-shadow: 0 0 1px 0 #ffe4b4;
   display: inline-block;
 }
 #profile-stat .avatar-artis.artis2 .img {
@@ -179,9 +206,36 @@
   right: -2px;
   bottom: -2px;
 }
-.talent_notice {
+#profile-stat .arti-mark-class {
-  color: #888;
+  width: 30px;
+  font-size: 12px;
+  border-radius: 0 4px 4px 0;
+  display: inline-block;
+  text-align: center;
+  background: #888;
+  height: 18px;
+  line-height: 18px;
+  margin-left: -5px;
+  box-shadow: 0 0 1px 0 #ffe4b4;
+  position: relative;
+  z-index: 9;
+}
+#profile-stat .arti-mark-class.class-ACE,
+#profile-stat .arti-mark-class.class-ACE² {
+  background: #ff5722;
+}
+#profile-stat .arti-mark-class.class-SSS,
+#profile-stat .arti-mark-class.class-SS {
+  background: #ab7e31;
+}
+#profile-stat .arti-mark-class.class-S,
+#profile-stat .arti-mark-class.class-A {
+  background: #8a2cc9;
+}
+.cont-notice {
+  color: #666;
+  background: rgba(0, 0, 0, 0.7);
   text-align: right;
-  padding: 12px 5px 5px;
+  padding: 8px;
 }
 /*# sourceMappingURL=profile-stat.css.map */

resources/character/profile-stat.html

@@ -7,7 +7,7 @@
 
 {{block 'main'}}
 <div class="head-box">
-  <div class="title">角色面板练度统计</div>
+  <div class="title">#面板练度统计</div>
   <div class="label">UID:{{uid}} 共{{avatars.length }}名角色</div>
 </div>
 <div id="profile-stat">
@@ -32,19 +32,21 @@
       {{set tk = ['a','e','q'] }}
       <div class="avatar tr">
         <div class="td-level"> {{avatar.level}}</div>
-        <div class="td-name star{{avatar.star}}">
+        <div class="td-name">
           <div class="avatar-name">
             <span class="item-name star{{avatar.star}}">{{avatar.abbr||avatar.name}}</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}}">{{avatar.cons}}</span>
+            <span class="cons cons-{{avatar.cons}} star{{avatar.star}}">{{avatar.cons}}</span>
           </div>
         </div>
 
 
-        <div class="td-fetter"> {{avatar.fetter}}</div>
+        <div class="td-fetter ">
+          <span class="fetter fetter{{['空','荧','旅行者'].includes(avatar.name)?10:avatar.fetter}}"></span>
+        </div>
 
         {{each tk talentKey}}
         {{set curr = (avatar.talent||{})[talentKey] || {original:1,current:'-'} }}
@@ -53,7 +55,7 @@
         </div>
         {{/each}}
 
-        <div class="td-weapon  weapon_{{avatar.weapon_rarity}}">
+        <div class="td-weapon  star-{{weapon.star}}">
           {{if weapon?.name}}
           <span class="lv">{{weapon.level}}</span>
 
@@ -68,19 +70,27 @@
         <div class="td-artis">
           <div class="item avatar-artis artis{{avatar.sets.length}}">
             <div class="artis item-icon">
-              {{each avatar.sets name}}
+              {{each avatar?.artisMark?.sets || avatar?.sets || [] name}}
               <span class="img"
                     style="background-image:url({{_res_path}}/meta/reliquaries/icon/{{name}}.png)"></span>
               {{/each}}
             </div>
-            123.4
+            {{if avatar.artisMark}}
+            {{set mark = avatar.artisMark}}
+            <span class="arti-mark-class class-{{mark.markClass}}">{{mark.markClass}}</span>
+            {{mark.mark}}
+            {{else}}
+            <span class="arti-mark-class class-na">-</span> -
+            {{/if}}
           </div>
 
         </div>
       </div>
       {{/each}}
     </div>
-    <p class="talent_notice">{{talentNotice}}</p>
+    {{if talentNotice}}
+    <p class="cont-notice">{{talentNotice}}</p>
+    {{/if}}
   </div>
 </div>
 

resources/character/profile-stat.less

@@ -2,17 +2,6 @@
   background-size: cover;
 }
 
-.lv {
-  &:before {
-    content: "Lv";
-    display: inline-block;
-    font-size: 12px;
-  }
-
-  width: 40px;
-  text-align: right;
-  padding-right: 2px;
-}
 
 #profile-stat {
   display: table;
@@ -41,6 +30,18 @@
   }
 
   .item-icon, .cons {
+    &.star1 {
+      box-shadow: 0 0 0 1px rgb(171, 171, 171);
+    }
+
+    &.star2 {
+      box-shadow: 0 0 0 1px rgb(208, 255, 190);
+    }
+
+    &.star3 {
+      box-shadow: 0 0 0 1px rgb(190, 208, 255);
+    }
+
     &.star4 {
       box-shadow: 0 0 0 1px rgba(223, 190, 255, 1);
     }
@@ -62,6 +63,24 @@
     }
   }
 
+  .tr.thead {
+    .td-name {
+      padding-right: 22px;
+    }
+
+    .td-talent {
+      box-shadow: none;
+    }
+
+    .td-weapon {
+      padding-left: 50px;
+    }
+
+    .td-artis {
+      text-align: left;
+    }
+  }
+
   .tr {
 
     & > div {
@@ -75,6 +94,26 @@
       * {
         vertical-align: middle;
       }
+
+      &.star1 {
+
+      }
+
+      &.star2 {
+
+      }
+
+      &.star3 {
+
+      }
+
+      &.star4 {
+        background: rgba(102, 59, 143, 0.5);
+      }
+
+      &.star5 {
+        background: rgba(124, 95, 45, 0.5);
+      }
     }
 
     .index {
@@ -84,6 +123,13 @@
 
     }
 
+    .td-level {
+
+      width: 30px;
+      text-align: right;
+
+    }
+
     .td-name {
       text-align: right;
       width: 110px;
@@ -95,6 +141,17 @@
         height: 30px;
         border-radius: 5px;
         display: inline-block;
+        overflow: visible;
+
+
+        .img {
+          width: 34px;
+          height: 34px;
+
+          position: relative;
+          top: -3px;
+          left: -2px;
+        }
       }
 
       .cons {
@@ -103,31 +160,41 @@
 
     }
 
-    .th .name {
+    .td-fetter {
-      justify-content: center;
+      width: 40px;
+      text-align: center;
+      padding-right: 5px;
+
+      .fetter {
+        width: 32px;
+        height: 32px;
+      }
     }
 
-    > div.fetter10 {
+    .td-talent {
-      background: url("./hart.png") center center no-repeat;
+      width: 36px;
-      background-size: contain;
+      box-shadow: 0 0 1px 0 rgba(150, 150, 150, .5);
-      color: #fff;
-    }
-
-    .cons span {
-      display: inline-block;
-      width: 14px;
-      height: 18px;
-      line-height: 18px;
-      vertical-align: middle;
-      border-radius: 4px;
-      margin-bottom: 2px;
     }
 
     .td-weapon {
       text-align: left;
-      width: 160px;
       padding-left: 10px;
 
+      .lv {
+        width: 38px;
+        text-align: right;
+        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;
@@ -143,53 +210,29 @@
       height: 22px;
       display: inline-block;
       overflow: visible;
-      margin-left: 3px;
 
       .img {
-        width: 32px;
+        width: 36px;
-        height: 32px;
+        height: 36px;
-        margin: -5px 0 0 -3px;
+        margin: -8px 0 0 -7px;
       }
     }
 
 
-    .weapon .avatar-weapon {
-      display: flex;
-      align-items: center;
-    }
-
-    .weapon .weapon_lv {
-      width: 30px;
-      margin-left: 8px;
-    }
-
-    .weapon .weapon_alv {
-      width: 14px;
-      text-align: center;
-      height: 18px;
-      line-height: 18px;
-      padding: 0 3px;
-      border-radius: 4px;
-      margin-right: 5px;
-    }
-
-  }
-
-  .tr {
     .lv1 {
-      background: rgba(60, 63, 65, .2)
+      background: rgba(60, 63, 65, .5)
     }
 
     .lv2 {
-      background: rgba(23, 184, 58, .3)
+      background: rgba(23, 184, 58, .4)
     }
 
     .lv3 {
-      background: rgba(27, 128, 212, .3)
+      background: rgba(27, 128, 212, .4)
     }
 
     .lv4 {
-      background: rgba(146, 90, 255, .35);
+      background: rgba(146, 90, 255, .4);
     }
 
     .lv5 {
@@ -201,16 +244,21 @@
 
   .td-artis {
     width: 120px;
+    text-align: left;
   }
 
   .avatar-artis {
     margin-left: 3px;
+    text-align: left;
+    position: relative;
+    z-index: 10;
 
     .artis {
       position: relative;
       width: 30px;
       height: 30px;
-      background: rgba(255, 255, 255, .3);
+      background: rgba(51, 51, 51, 0.68);
+      box-shadow: 0 0 1px 0 #ffe4b4;
       display: inline-block;
     }
 
@@ -232,10 +280,43 @@
       }
     }
   }
+
+  .arti-mark-class {
+    width: 30px;
+    font-size: 12px;
+    border-radius: 0 4px 4px 0;
+    display: inline-block;
+    text-align: center;
+    background: #888;
+    height: 18px;
+    line-height: 18px;
+    margin-left: -5px;
+    box-shadow: 0 0 1px 0 #ffe4b4;
+    position: relative;
+    z-index: 9;
+
+    &.class- {
+      &ACE,
+      &ACE² {
+        background: #ff5722;
       }
 
-.talent_notice {
+      &SSS,
-  color: #888;
+      &SS {
-  text-align: right;
+        background: #ab7e31;
-  padding: 12px 5px 5px;
+      }
+
+      &S,
+      &A {
+        background: #8a2cc9;
+      }
+    }
+  }
+}
+
+.cont-notice {
+  color: #666;
+  background: rgba(0, 0, 0, .7);
+  text-align: right;
+  padding: 8px;
 }

resources/common/common.css

@@ -175,6 +175,44 @@ body {
   background: #ff5722;
   color: #fff;
 }
+/********  Fetter  ********/
+.fetter {
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  background: url('./item/fetter.png');
+  background-size: auto 100%;
+}
+.fetter.fetter1 {
+  background-position: 0% 0;
+}
+.fetter.fetter2 {
+  background-position: 11.11111111% 0;
+}
+.fetter.fetter3 {
+  background-position: 22.22222222% 0;
+}
+.fetter.fetter4 {
+  background-position: 33.33333333% 0;
+}
+.fetter.fetter5 {
+  background-position: 44.44444444% 0;
+}
+.fetter.fetter6 {
+  background-position: 55.55555556% 0;
+}
+.fetter.fetter7 {
+  background-position: 66.66666667% 0;
+}
+.fetter.fetter8 {
+  background-position: 77.77777778% 0;
+}
+.fetter.fetter9 {
+  background-position: 88.88888889% 0;
+}
+.fetter.fetter10 {
+  background-position: 100% 0;
+}
 /********  ELEM  ********/
 .elem-hydro .talent-icon {
   background-image: url("./bg/talent-hydro.png");

resources/common/common.less

@@ -163,6 +163,21 @@ body {
 .cons2(5, #531ba9cf);
 .cons2(6, #ff5722);
 
+/********  Fetter  ********/
+
+.fetter {
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  background: url('./item/fetter.png');
+  background-size: auto 100%;
+  @fetters: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+  each(@fetters, {
+    &.fetter@{value} {
+      background-position: (-100%/9)+(100%/9)*@value 0;
+    }
+  })
+}
 
 /********  ELEM  ********/