更新#角色部分样式及判断逻辑

apps/character/AvatarCard.js

@@ -18,7 +18,7 @@ export async function renderAvatar (e, avatar, renderType = 'card') {
       avatar = { id: char.id, name: char.name, detail: false }
     } else {
       let player = Player.create(e)
-      await player.refreshMysAvatar()
+      await player.refreshMysDetail()
       await player.refreshTalent(char.id)
       avatar = player.getAvatar(char.id)
       if (!avatar) {

apps/character/AvatarWife.js

@@ -164,7 +164,7 @@ export async function pokeWife (e, components) {
 }
 
 async function getAvatarList (player, type, mys) {
-  await player.refreshMysAvatar()
+  await player.refreshMysDetail()
   let list = []
   player.forEachAvatar((avatar) => {
     if (type !== false) {

apps/profile/ProfileStat.js

@@ -1,6 +1,5 @@
 import { Cfg, Common } from '../../components/index.js'
 import { MysApi, Player, Character } from '../../models/index.js'
-import moment from 'moment'
 
 export async function profileStat (e) {
   let isMatch = /^#(面板|喵喵|角色|武器|天赋|技能|圣遗物)练度统计?$/.test(e.original_msg || e.msg || '')
@@ -32,7 +31,16 @@ export async function profileStat (e) {
     sort: true
   })
 
-  let talentNotice = ''
+  if (avatarRet.length === 0) {
+    e.reply(`暂未获得#${uid}角色数据，请绑定CK或 #更新面板`)
+    return true
+  }
+
+  let talentNotice = []
+
+  if (!mys.isSelfCookie) {
+    talentNotice.push('未绑定CK，信息可能展示不完全')
+  }
 
   let faceChar = Character.get(player.face || avatarRet[0]?.id)
   let face = {
@@ -47,11 +55,11 @@ export async function profileStat (e) {
     save_id: uid,
     uid,
     info: player.getInfo(),
-    isStat: !isAvatarList,
+    updateTime: player.getUpdateTime(),
+    isSelfCookie: e.isSelfCookie,
     talentLvMap: '0,1,1,1,2,2,3,3,3,4,5'.split(','),
     face,
     avatars: avatarRet,
-    isSelf: e.isSelf,
     talentNotice
   }, { e, scale: 1.4 })
 }

apps/stat.js

@@ -196,7 +196,7 @@ async function abyssTeam (e) {
     return true
   }
   let player = Player.create(e)
-  await player.refreshMysAvatar()
+  await player.refreshMysDetail()
   await player.refreshTalent()
 
   let abyssData = await HutaoApi.getAbyssTeam()

models/AvatarArtis.js

@@ -14,34 +14,43 @@ export default class AvatarArtis extends Base {
     this.artis = {}
   }
 
-  setArtisData (ds = {}, source) {
+  setArtisData (ds = {}, profile = false) {
-    if (!this.hasArtis || ArtisMark.hasAttr(ds) || !ArtisMark.hasAttr(this.artis)) {
+    // let force = !this.hasArtis || ArtisMark.hasAttr(ds) || !ArtisMark.hasAttr(this.artis)
+    if (!profile || (profile && ArtisMark.hasAttr(ds))) {
       for (let idx = 1; idx <= 5; idx++) {
-        if (ds[idx]) {
+        if (ds[idx] || ds[`arti${idx}`]) {
-          this.setArtis(idx, ds[idx] || ds[`arti${idx}`] || {})
+          this.setArtis(idx, ds[idx] || ds[`arti${idx}`], profile)
         }
       }
-      return true
     }
-    return false
   }
 
-  setArtis (idx = 1, ds = {}) {
+  setArtis (idx = 1, ds = {}, profile = false) {
     idx = idx.toString().replace('arti', '')
-    let ret = {}
+    this.artis[idx] = this.artis[idx] || {}
-    ret.name = ds.name || ArtifactSet.getArtiNameBySet(ds.set, idx) || ''
+    let arti = this.artis[idx]
-    ret.set = ds.set || Artifact.getSetNameByArti(ret.name) || ''
+    if (profile) {
-    ret.level = ds.level || 1
+      arti.name = ds._name || ds.name || arti.name || ''
+      arti.set = ds._set || Artifact.getSetNameByArti(arti._name) || ds.set || ''
+      arti.level = ds._level || ds.level || 1
+    } else {
+      arti.name = ds.name || arti.name || ''
+      arti.set = ds.set || Artifact.getSetNameByArti(arti.name) || ''
+      arti.level = ds.level || 1
+    }
+    // 存在面板数据，更新面板数据
     if (ds.main && ds.attrs) {
-      ret.main = ArtisMark.formatAttr(ds.main || {})
+      arti._name = ds.name || arti.name
-      ret.attrs = []
+      arti._set = ds.set || Artifact.getSetNameByArti(arti.name) || arti.set || ''
+      arti._level = ds.level || arti.level
+      arti.main = ArtisMark.formatAttr(ds.main || {})
+      arti.attrs = []
       for (let attrIdx in ds.attrs || []) {
         if (ds.attrs[attrIdx]) {
-          ret.attrs.push(ArtisMark.formatAttr(ds.attrs[attrIdx]))
+          arti.attrs.push(ArtisMark.formatAttr(ds.attrs[attrIdx]))
         }
       }
     }
-    this.artis[idx] = ret
   }
 
   forEach (fn) {
@@ -73,6 +82,8 @@ export default class AvatarArtis extends Base {
           level: ds.level || 1
         }
         if (ds.main && ds.attrs) {
+          tmp._name = ds._name || null
+          tmp._level = ds._level || null
           tmp.main = ds.main || null
           tmp.attrs = []
           for (let attrIdx in ds.attrs || []) {
@@ -87,15 +98,15 @@ export default class AvatarArtis extends Base {
     return ret
   }
 
-  getDetail () {
+  getDetail (profile = false) {
     let ret = {}
     for (let idx = 1; idx <= 5; idx++) {
       let ds = this.artis[idx]
       if (ds) {
-        let artis = Artifact.get(ds.name)
+        let artis = Artifact.get(profile ? ds._name : ds.name)
         let tmp = {
           ...artis?.getData('img,name,set'),
-          level: ds.level || 1
+          level: (profile ? ds._level : ds.level) || 1
         }
         if (ds.main && ds.attrs) {
           tmp.main = ds.main || null
@@ -171,20 +182,6 @@ export default class AvatarArtis extends Base {
     return check
   }
 
-  // 获取圣遗物数据
-  getArtisData () {
-    let ret = {}
-    this.forEach((ds, idx) => {
-      let arti = Artifact.get(ds.name)
-      ret[idx] = {
-        ...ds,
-        name: arti.name,
-        img: arti.img
-      }
-    })
-    return ret
-  }
-
   /**
    * 获取圣遗物套装数据
    * @returns {*|{imgs: *[], names: *[], sets: {}, abbrs: *[], sName: string, name: (string|*)}}
@@ -195,10 +192,10 @@ export default class AvatarArtis extends Base {
    * name: '组合名字'， 若为4件套会使用套装完整名
    * sName: '简写名字'，若为4件套也会使用简写
    */
-  getSetData () {
+  getSetData (profile = false) {
     let setCount = {}
     this.forEach((arti, idx) => {
-      setCount[arti.set] = (setCount[arti.set] || 0) + 1
+      setCount[profile ? arti._set : arti.set] = (setCount[profile ? arti._set : arti.set] || 0) + 1
     })
     let sets = {}
     let names = []

models/Player.js

@@ -161,6 +161,17 @@ export default class Player extends Base {
     return ret
   }
 
+  getUpdateTime () {
+    let ret = {}
+    if (this._profile) {
+      ret.profile = MysAvatar.getDate(this._profile)
+    }
+    if (this._mys) {
+      ret.mys = MysAvatar.getDate(this._mys)
+    }
+    return ret
+  }
+
   getInfo () {
     let ret = {
       ...(this.info || {}),
@@ -189,6 +200,7 @@ export default class Player extends Base {
       }
       ret.activeDay = msg
     }
+    lodash.forEach(ret)
     return ret
   }
 
@@ -198,8 +210,8 @@ export default class Player extends Base {
   }
 
   // 更新米游社数据
-  async refreshMysAvatar (force = false) {
+  async refreshMysDetail (force = false) {
-    return MysAvatar.refreshMysAvatar(this, force)
+    return MysAvatar.refreshMysDetail(this, force)
   }
 
   async refreshMysInfo (force = false) {
@@ -224,7 +236,7 @@ export default class Player extends Base {
 
   async refreshAndGetAvatarData (cfg) {
     // 更新角色信息
-    await this.refreshMysAvatar(cfg.force)
+    await this.refreshMysDetail(cfg.force)
 
     // 更新天赋信息
     if (cfg.refreshTalent !== false) {

models/ProfileArtis.js

@@ -19,7 +19,7 @@ export default class ProfileArtis extends AvatarArtis {
     this.profile = profile
     this.elem = profile.elem || profile.char?.elem
     if (artis) {
-      this.setArtisData(artis)
+      this.setArtisData(artis, true)
     }
   }
 

models/player-lib/MysAvatar.js

@@ -1,5 +1,6 @@
 import lodash from 'lodash'
 import { Common, Data } from '../../components/index.js'
+import moment from 'moment'
 
 const MysAvatar = {
   /**
@@ -9,7 +10,7 @@ const MysAvatar = {
    * @param force
    * @returns {Promise<boolean>}
    */
-  async refreshMysAvatar (player, force = false) {
+  async refreshMysDetail (player, force = false) {
     let mys = player?.e?._mys
     if (!mys) {
       return false
@@ -40,7 +41,7 @@ const MysAvatar = {
       return false
     }
     let infoData = await mys.getIndex()
-    if (!infoData) {
+    if (!infoData || !infoData.role) {
       return false
     }
     MysAvatar.setMysInfo(player, infoData)
@@ -88,7 +89,7 @@ const MysAvatar = {
     let role = infoData.role
     // 设置角色信息
     let homeLevel = ((infoData?.homes || [])[0])?.level
-    if(role) {
+    if (role) {
       player.setBasicData({
         level: role.level,
         name: role.nickname
@@ -216,6 +217,10 @@ const MysAvatar = {
       return true
     }
     return false
+  },
+
+  getDate (time) {
+    return time ? moment(new Date(time)).format('MM-DD HH:mm') : ''
   }
 }
 export default MysAvatar

resources/character/avatar-list.css

@@ -41,8 +41,8 @@
   color: #414e64;
 }
 #banner .user-info .name {
-  height: 32px;
+  height: 34px;
-  line-height: 32px;
+  line-height: 34px;
 }
 #banner .user-info .name strong {
   font-size: 26px;
@@ -51,27 +51,39 @@
   padding-left: 5px;
 }
 #banner .user-info .uid {
-  height: 28px;
+  height: 22px;
-  line-height: 28px;
+  line-height: 22px;
+  font-size: 16px;
 }
 #banner .stat {
   position: absolute;
-  right: 20px;
+  right: 0;
   top: 0;
   display: flex;
   background: rgba(255, 255, 255, 0.5);
-  margin: 20px 5px;
+  margin: 16px;
-  border-radius: 10px;
+  border-radius: 29px;
+  height: 58px;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
 }
 #banner .stat-li {
   padding: 7px;
   width: 70px;
+  height: 58px;
   text-align: center;
   position: relative;
 }
 #banner .stat-li:nth-child(even) {
   background: rgba(225, 225, 225, 0.8);
 }
+#banner .stat-li:first-child {
+  width: 78px;
+  padding-left: 15px;
+}
+#banner .stat-li:last-child {
+  width: 78px;
+  padding-right: 15px;
+}
 #banner .stat-li strong {
   font-size: 22px;
   display: block;
@@ -93,7 +105,7 @@
 }
 .exploration .item {
   width: 93px;
-  height: 106.95px;
+  height: 116.25px;
   background: url('./imgs/exploration.webp') no-repeat;
   background-size: auto 100%;
   border-radius: 4px;
@@ -102,18 +114,19 @@
   color: #fff;
 }
 .exploration .item strong {
-  font-size: 22px;
+  font-size: 24px;
   display: block;
-  height: 26px;
+  height: 30px;
-  line-height: 26px;
+  line-height: 30px;
   text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, 0.5);
 }
 .exploration .item span {
   margin-top: 58px;
-  font-size: 12px;
+  font-size: 14px;
-  height: 18px;
+  height: 20px;
-  line-height: 18px;
+  line-height: 20px;
   display: block;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
 }
 .cont-title {
   padding: 8px 15px;
@@ -132,14 +145,23 @@
   margin: 5px;
 }
 .cont-notice {
-  color: #888;
+  text-align: right;
-  background: rgba(255, 255, 255, 0.4);
+}
-  font-size: 13px;
+.cont-notice strong {
-  text-align: center;
+  color: #d3bc8e;
-  padding: 8px;
 }
 .cont-notice span {
   padding: 0 3px;
-  color: #555;
+  color: #aaa;
+}
+.ck-notice {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+}
+.ck-notice strong {
+  color: #d3bc8e;
+  padding: 0 2px;
+  font-weight: normal;
 }
 /*# sourceMappingURL=avatar-list.css.map */

resources/character/avatar-list.html

@@ -14,10 +14,11 @@
   <div class="user-info">
     <div class="name">
       <strong>{{face.name}}</strong>
-      {{if face.level}}<span> #{{uid}}</span>{{/if}}
+      {{if face.level}} Lv.{{face.level}}{{/if}}
+
     </div>
     <div class="uid">
-      {{if face.level}} Lv.{{face.level}}·{{/if}}
+      {{if uid}}<span> #{{uid}}</span>{{/if}}
       {{ if info.activeDay}}{{info.activeDay}} {{/if}}
     </div>
   </div>
@@ -32,6 +33,9 @@
     {{/each}}
   </div>
 </div>
+{{if !isSelfCookie}}
+<div class="ck-notice">未绑定CK或CK失效，信息可能不完全。发送<strong>#体力帮助</strong>查看CK绑定方法，发送<strong>#更新面板</strong>更新游戏内角色展柜信息</div>
+{{/if}}
 <div id="avatar-list">
   {{if info && info?.exploration['蒙德']}}
   {{set citys = ['蒙德','龙脊雪山','璃月','层岩巨渊','稻妻','渊下宫','须弥'] }}
@@ -52,11 +56,16 @@
       <% include(_layout_path+'../tpl/avatar-card.html', [avatar,{_res_path, cardType:'mini'}]) %>
       {{/each}}
     </div>
-  </div>
+    <div class="cont-footer cont-notice">
-  {{if talentNotice}}
+      <strong>数据更新时间</strong>
-  <p class="cont-notice">{{@talentNotice}}</p>
+      {{if updateTime.profile}}
+      <span>面板：{{updateTime.profile}}</span>
       {{/if}}
-
+      {{if updateTime.mys}}
+      <span>米游社：{{updateTime.mys}}</span>
+      {{/if}}
+    </div>
+  </div>
 </div>
 
 

resources/character/avatar-list.less

@@ -46,8 +46,8 @@
     color: #414e64;
 
     .name {
-      height: 32px;
+      height: 34px;
-      line-height: 32px;
+      line-height: 34px;
 
       strong {
         font-size: 26px;
@@ -59,31 +59,49 @@
     }
 
     .uid {
-      height: 28px;
+      height: 22px;
-      line-height: 28px;
+      line-height: 22px;
+      font-size: 16px;
     }
   }
 
   .stat {
     position: absolute;
-    right: 20px;
+    right: 0;
     top: 0;
     display: flex;
     background: rgba(255, 255, 255, .5);
-    margin: 20px 5px;
+    margin: 16px;
-    border-radius: 10px;
+    border-radius: 29px;
+    height: 58px;
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4);
   }
 
   .stat-li {
+    @width: 70px;
+    @padding: 8px;
+
     padding: 7px;
-    width: 70px;
+    width: @width;
+    height: 58px;
     text-align: center;
     position: relative;
 
+
     &:nth-child(even) {
       background: rgba(225, 225, 225, .8);
     }
 
+    &:first-child {
+      width: @width+@padding;
+      padding-left: 7px+@padding;
+    }
+
+    &:last-child {
+      width: @width+@padding;
+      padding-right: 7px+@padding;
+    }
+
 
     strong {
       font-size: 22px;
@@ -111,7 +129,7 @@
 
   .item {
     width: 93px;
-    height: 93*1.15px;
+    height: 93*1.25px;
     background: url('./imgs/exploration.webp') no-repeat;
     background-size: auto 100%;
     border-radius: 4px;
@@ -120,19 +138,20 @@
     color: #fff;
 
     strong {
-      font-size: 22px;
+      font-size: 24px;
       display: block;
-      height: 26px;
+      height: 30px;
-      line-height: 26px;
+      line-height: 30px;
       text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .5);
     }
 
     span {
       margin-top: 58px;
-      font-size: 12px;
+      font-size: 14px;
-      height: 18px;
+      height: 20px;
-      line-height: 18px;
+      line-height: 20px;
       display: block;
+      text-shadow: 0 0 1px rgba(0, 0, 0, .5);
     }
   }
 
@@ -160,14 +179,26 @@
 }
 
 .cont-notice {
-  color: #888;
+  text-align: right;
-  background: rgba(255, 255, 255, .4);
+
-  font-size: 13px;
+  strong {
-  text-align: center;
+    color: #d3bc8e;
-  padding: 8px;
+  }
 
   span {
     padding: 0 3px;
-    color: #555;
+    color: #aaa;
+  }
+}
+
+.ck-notice {
+  text-align: center;
+  color: rgba(255, 255, 255, .9);
+  font-size: 13px;
+
+  strong {
+    color: #d3bc8e;
+    padding: 0 2px;
+    font-weight: normal;
   }
 }

resources/common/tpl.css

@@ -138,7 +138,7 @@
   background-color: #ff5722;
 }
 .avatar-card {
-  margin: 3px;
+  margin: 4.5px;
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
   font-size: 19.5px;
   border-radius: 10.5px;
@@ -168,20 +168,20 @@
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   left: 0;
-  padding: 2px 5px 2px 3px;
+  padding: 3px 7.5px 3px 4.5px;
-  border-radius: 0 4px 0 0;
+  border-radius: 0 6px 0 0;
   color: #fff;
 }
 .avatar-card .cons {
-  border-radius: 0 0 0 5px;
+  border-radius: 0 0 0 7.5px;
-  padding: 2px 5px;
+  padding: 3px 7.5px;
   position: absolute;
   right: 0;
   top: 0;
 }
 .avatar-card .avatar-talent {
   height: 30px;
-  padding: 3px 5px 2px;
+  padding: 4.5px 7.5px 3px;
   font-size: 18px;
   width: 100%;
   color: #222;
@@ -192,13 +192,13 @@
   width: 30px;
   height: 24px;
   line-height: 25.5px;
-  margin: 0 2px;
+  margin: 0 3px;
   text-align: center;
   display: block;
   background-size: contain;
   opacity: 0.8;
   position: relative;
-  border-radius: 3px;
+  border-radius: 4.5px;
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
 }
 .avatar-card .avatar-talent .talent-item.talent-plus {
@@ -208,13 +208,13 @@
 .avatar-card .avatar-talent .talent-item.talent-crown {
   background: #d3bc8e;
   color: #3a2702;
-  box-shadow: 0 0 2px 0 #000;
+  box-shadow: 0 0 3px 0 #000;
 }
 .avatar-card .avatar-talent.no-talent {
   font-size: 18px;
   color: rgba(100, 100, 100, 0.5);
   text-align: center;
-  padding: 3px 0 2px;
+  padding: 4.5px 0 3px;
 }
 .avatar-card .avatar-talent.no-talent span {
   transform: scale(0.75);
@@ -226,7 +226,7 @@
   display: none;
 }
 .avatar-card .avatar-name {
-  padding: 8px 0 0 5px;
+  padding: 12px 0 0 7.5px;
   color: #333;
 }
 .avatar-card .avatar-name strong {
@@ -238,7 +238,7 @@
 .avatar-card .avatar-name .cons {
   position: initial;
   border-radius: 4px;
-  padding: 1px 3px;
+  padding: 1.5px 4.5px;
   vertical-align: baseline;
 }
 .avatar-card.card-wide .mini {
@@ -250,14 +250,14 @@
 }
 .avatar-card.card-wide .avatar-face {
   height: 189px;
-  width: 76px;
+  width: 114px;
   border-radius: 10.5px 0 0 10.5px;
 }
 .avatar-card.card-wide .img {
   background-size: 100% auto;
   background-position: 0 10%;
   height: 135px;
-  margin-top: -9px;
+  margin-top: -13.5px;
 }
 .avatar-card.card-wide .avatar-info {
   width: 105px;
@@ -286,13 +286,14 @@
 }
 .avatar-card .avatar-detail {
   display: flex;
-  padding: 0 1px 2px;
+  padding: 0 1.5px 3px 3px;
 }
 .avatar-card .avatar-detail .item {
   width: 46.5px;
   height: 46.5px;
-  border-radius: 4px;
+  border-radius: 4.5px;
-  margin: 1px;
+  margin: 1.5px;
+  overflow: hidden;
 }
 .avatar-card .avatar-weapon .icon {
   border-radius: 4px;
@@ -300,8 +301,8 @@
 .avatar-card .avatar-weapon .cons {
   top: initial;
   bottom: 0;
-  padding: 1px 3px;
+  padding: 1.5px 4.5px;
-  border-radius: 3px 0 0 0;
+  border-radius: 4.5px 0 0 0;
 }
 .avatar-card .avatar-artis {
   position: relative;

resources/common/tpl/avatar-card.less

@@ -1,9 +1,7 @@
 
 .avatar-card {
   @px: 1.5px;
-
+  margin: @px*3;
-
-  margin: 3px;
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
   font-size: @px*13;
   border-radius: @px*7;
@@ -36,16 +34,16 @@
       bottom: 0;
       background: rgba(0, 0, 0, 0.6);
       left: 0;
-      padding: 2px 5px 2px 3px;
+      padding: @px*2 @px*5 @px*2 @px*3;
-      border-radius: 0 4px 0 0;
+      border-radius: 0 @px*4 0 0;
       color: #fff;
     }
 
   }
 
   .cons {
-    border-radius: 0 0 0 5px;
+    border-radius: 0 0 0 @px*5;
-    padding: 2px 5px;
+    padding: @px*2 @px*5;
     position: absolute;
     right: 0;
     top: 0;
@@ -53,7 +51,7 @@
 
   .avatar-talent {
     height: @px*20;
-    padding: 3px 5px 2px;
+    padding: @px*3 @px*5 @px*2;
     font-size: @px*12;
     width: 100%;
     color: #222;
@@ -64,13 +62,13 @@
       width: @px*20;
       height: @px*16;
       line-height: @px*17;
-      margin: 0 2px;
+      margin: 0 @px*2;
       text-align: center;
       display: block;
       background-size: contain;
       opacity: 0.8;
       position: relative;
-      border-radius: 3px;
+      border-radius: @px*3;
       box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
 
       &.talent-plus {
@@ -81,7 +79,7 @@
       &.talent-crown {
         background: #d3bc8e;
         color: #3a2702;
-        box-shadow: 0 0 2px 0 #000;
+        box-shadow: 0 0 @px*2 0 #000;
       }
     }
 
@@ -89,7 +87,7 @@
       font-size: @px*12;
       color: rgba(100, 100, 100, .5);
       text-align: center;
-      padding: 3px 0 2px;
+      padding: @px*3 0 @px*2;
 
       span {
         transform: scale(.75);
@@ -106,7 +104,7 @@
   }
 
   .avatar-name {
-    padding: 8px 0 0 5px;
+    padding: @px*8 0 0 @px*5;
     color: #333;
 
     strong {
@@ -119,7 +117,7 @@
     .cons {
       position: initial;
       border-radius: 4px;
-      padding: 1px 3px;
+      padding: @px @px*3;
       vertical-align: baseline;
     }
   }
@@ -136,7 +134,7 @@
 
     .avatar-face {
       height: @px * 126;
-      width: 76px;
+      width: @px*76;
       border-radius: @px*7 0 0 @px*7;
     }
 
@@ -144,7 +142,7 @@
       background-size: 100% auto;
       background-position: 0 10%;
       height: 135px;
-      margin-top: -9px;
+      margin-top: @px*-9;
     }
 
     .avatar-info {
@@ -186,13 +184,14 @@
 
   .avatar-detail {
     display: flex;
-    padding: 0 1px 2px;
+    padding: 0 @px*1 @px*2 @px*2;
 
     .item {
       width: @px*31;
       height: @px*31;
-      border-radius: 4px;
+      border-radius: @px*3;
-      margin: 1px;
+      margin: @px*1;
+      overflow: hidden;
     }
   }
 
@@ -204,8 +203,8 @@
     .cons {
       top: initial;
       bottom: 0;
-      padding: 1px 3px;
+      padding: @px @px*3;
-      border-radius: 3px 0 0 0;
+      border-radius: @px*3 0 0 0;
     }
   }
 
@@ -233,7 +232,5 @@
         }
       }
     }
-
-
   }
 }