群角色排行查看功能样式微调

This commit is contained in:
Kokomi 2022-11-12 21:29:53 +08:00
parent cdae15594b
commit 3feb7369ab
8 changed files with 246 additions and 149 deletions

View File

@ -43,7 +43,7 @@ export async function groupRank (e) {
}
} else if (type === 'list') {
let uids = await ProfileRank.getGroupUidList(groupId, char.id, mode)
return renderCharRankList({ e, uids, char, mode })
return renderCharRankList({ e, uids, char, mode, groupId })
}
}
@ -73,7 +73,7 @@ export async function resetRank (e) {
e.reply(`本群${charName}排名已重置...`)
}
async function renderCharRankList ({ e, uids, char, mode }) {
async function renderCharRankList ({ e, uids, char, mode, groupId }) {
let list = []
for (let ds of uids) {
let uid = ds.value
@ -88,8 +88,14 @@ async function renderCharRankList ({ e, uids, char, mode }) {
}
let dmg = await profile.calcDmg({ mode: 'single' })
if (dmg && dmg.avg) {
let title = dmg.title
// 稍微缩短下title
if (title.length > 10) {
title = title.replace(/[ ·]*/g, '')
}
title = title.length > 10 ? title.replace(/伤害$/, '') : title
tmp.dmg = {
title: dmg.title,
title: title,
avg: Format.comma(dmg.avg, 1)
}
}
@ -97,6 +103,7 @@ async function renderCharRankList ({ e, uids, char, mode }) {
}
}
let title = `#${char.name}${mode === 'mark' ? '圣遗物' : ''}排行`
const rankCfg = await ProfileRank.getGroupCfg(groupId)
// 渲染图像
return await Common.render('character/rank-profile-list', {
save_id: char.id,
@ -104,6 +111,7 @@ async function renderCharRankList ({ e, uids, char, mode }) {
title,
elem: char.elem,
bodyClass: `char-${char.name}`,
rankCfg,
mode
}, { e, scale: 1.4 })
}

View File

@ -1,3 +1,5 @@
import lodash from 'lodash'
let Format = {
int: function (d) {
return parseInt(d)
@ -6,7 +8,7 @@ let Format = {
num = parseFloat((num * 1).toFixed(fix))
let [integer, decimal] = String.prototype.split.call(num, '.')
integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,') // 正则先行断言
return `${integer}${decimal ? '.' + decimal : ''}`
return `${integer}${fix > 0 ? '.' + (decimal || lodash.repeat('0', fix)) : ''}`
},
pct: function (num, fix = 1) {
return (num * 1).toFixed(fix) + '%'

View File

@ -198,7 +198,8 @@ export default class Avatar extends Base {
names,
abbrs: [...abbrs, ...abbrs2],
imgs,
name: abbrs.length > 1 ? abbrs.join('+') : abbrs2[0]
name: (abbrs.length > 1 || abbrs2[0].length > 7) ? abbrs.join('+') : abbrs2[0],
sName: abbrs.join('+')
}
}
if (this.profile) {

View File

@ -170,7 +170,8 @@ export default class ProfileArtis extends Base {
names,
imgs,
abbrs: [...abbrs, ...abbrs2],
name: abbrs.length > 1 ? abbrs.join('+') : abbrs2[0]
name: (abbrs.length > 1 || abbrs2[0].length > 7) ? abbrs.join('+') : abbrs2[0],
sName: abbrs.join('+')
}
return this._setData
}

View File

@ -73,7 +73,7 @@
{{/each}}
</div>
<div class="artis-sets">{{data.artisSet?.name||'圣遗物'}}</div>
<div class="artis-sets">{{data.artisSet?.sName||'圣遗物'}}</div>
</div>
</div>

View File

@ -13,43 +13,61 @@ body {
background-size: cover;
overflow: hidden;
}
.char-item {
.group-rank-icon {
width: 16px;
height: 16px;
background: url("./imgs/mark-icon.png");
background-size: auto 100%;
display: inline-block;
vertical-align: bottom;
margin: -1px 3px -1px 0;
}
.group-rank-icon.mark-icon {
background-position: 100% 0;
}
.char-list-item {
height: 60px;
background-size: auto 150%;
display: flex;
padding: 5px;
overflow: visible;
}
.char-item .line {
margin-left: 10px;
.char-list-item .line {
margin-left: 15px;
position: relative;
}
.char-item .line:before {
.char-list-item .line:before {
content: "";
display: block;
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.8);
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
position: absolute;
left: -5px;
left: -15px;
top: 5px;
}
.char-idx {
width: 48px;
}
.char-idx span {
display: inline-block;
width: 24px;
height: 24px;
margin: 13px 10px;
margin: 13px 12px;
background: url('./imgs/mark-icon.png');
background-size: auto 100%;
text-align: center;
font-size: 12px;
line-height: 24px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.char-idx span.idx-1 {
width: 48px;
margin: 13px 0;
background-image: url('./imgs/mark-icon2.png');
color: rgba(0, 0, 0, 0);
text-shadow: none;
}
.char-idx span.mode-mark {
background-position: 100% 0;
@ -70,10 +88,13 @@ body {
border-radius: 50%;
}
.char-info .name {
margin-top: 4px;
height: 24px;
line-height: 24px;
font-size: 18px;
color: #d3bc8e;
font-weight: normal;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.char-info .cons {
height: 16px;
@ -82,9 +103,10 @@ body {
width: 16px;
text-align: center;
padding: 0;
margin-right: -2px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.char-info .info {
margin-top: 4px;
height: 20px;
font-size: 12px;
line-height: 20px;
@ -92,37 +114,6 @@ body {
.char-name {
width: 100px;
}
.char-weapon {
width: 130px;
display: flex;
}
.char-weapon .img {
margin: -3px 0;
width: 56px;
height: 56px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.char-weapon .weapon-info {
padding-left: 5px;
}
.char-weapon .cons {
width: 28px;
font-size: 12px;
transform: scale(0.9);
transform-origin: 0 50%;
}
.char-weapon .name {
height: 20px;
line-height: 20px;
margin-bottom: 3px;
}
.char-weapon .name strong {
color: #fff;
font-size: 13px;
font-weight: normal;
}
.char-talent {
display: flex;
padding: 0 5px;
@ -193,6 +184,50 @@ body {
top: -2px;
margin-left: -9px;
}
.char-item {
vertical-align: middle;
height: 50px;
}
.char-item .item {
position: relative;
width: 36px;
height: 36px;
margin: 7px 5px 7px 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
display: inline-block;
overflow: visible;
vertical-align: middle;
}
.char-weapon {
width: 125px;
display: flex;
}
.char-weapon .img {
margin: -10px -5px;
width: 46px;
height: 56px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.char-weapon .weapon-info {
padding-left: 5px;
}
.char-weapon .cons {
width: 28px;
font-size: 12px;
transform: scale(0.9);
transform-origin: 0 50%;
}
.char-weapon .name {
height: 20px;
line-height: 20px;
margin-bottom: 3px;
}
.char-weapon .name strong {
font-size: 13px;
font-weight: normal;
}
.char-artis {
display: flex;
width: 130px;
@ -221,28 +256,16 @@ body {
background: #aaa;
}
.char-artis .artis-mark-class {
border-radius: 5px;
display: inline-block;
text-align: center;
background: rgba(51, 51, 51, 0.68);
height: 20px;
line-height: 20px;
box-shadow: 0 0 1px 0 #ffe4b4;
position: relative;
z-index: 9;
color: #fff;
width: 28px;
font-size: 12px;
margin-right: -2px;
transform: scale(0.9);
transform-origin: 0 50%;
margin-right: -2px;
}
.char-artis .artis {
position: relative;
width: 36px;
height: 36px;
margin: 7px 5px 7px 0;
box-shadow: 0 0 1px 0 #ffe4b4;
display: inline-block;
}
.char-artis .artis.no-artis {
@ -267,21 +290,25 @@ body {
}
.char-artis .artis-title {
font-size: 12px;
white-space: nowrap;
}
.char-artis .artis-mark {
height: 23px;
margin-top: 5px;
}
.char-dmg {
text-align: right;
width: 120px;
}
.char-dmg .dmg {
height: 25px;
margin-top: 5px;
.char-dmg .dmg-value {
height: 30px;
line-height: 30px;
font-size: 18px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.char-dmg .dmg-title {
height: 15px;
line-height: 15px;
margin-top: 5px;
font-size: 12px;
color: #aaa;
}
/*# sourceMappingURL=rank-profile-list.css.map */

View File

@ -10,8 +10,31 @@
<div class="title">{{title}}</div>
</div>
<div id="profile-stat">
<div class="cont group-rank-tip {{groupRank?'has-rank':'no-rank'}}">
<div class="cont-title">
群排名说明
</div>
<div class="cont-body">
<ul class="cont-msg">
<li>
<i class="group-rank-icon dmg-icon"></i><strong>综合练度排名:</strong>
以期望伤害(计算暴击率的平均伤害,不代表实际伤害值)为排序的群内排名
</li>
<li>
<i class="group-rank-icon mark-icon"></i><strong>圣遗物评分排名:</strong>
基于角色评分规则进行圣遗物评分。评分规则为线性规则,无法体现词条平衡等实际因素,评分仅供娱乐
</li>
<li>
<strong>排名范围:</strong>
本群内 / 时间点:{{rankCfg.time}} 后 / 在群内主动通过 #面板 命令查看过的面板数据
</li>
</ul>
</div>
</div>
{{each list ds idx}}
<div class="cont char-item">
<div class="cont char-list-item">
<div class="char-idx">
<span class="idx-{{idx+1}} mode-{{mode}}">{{idx+1}}</span>
</div>
@ -19,13 +42,14 @@
<span class="img" style="background-image:url({{_res_path}}{{ds.imgs?.face}})"></span>
</div>
<div class="char-info char-name">
<div class="info">
Uid: {{ds.uid}}
</div>
<div class="name">
<span class="cons cons-{{ds.cons}}">{{ds.cons}}</span>
<strong>{{ds.sName}}</strong>
</div>
<div class="info">
Uid: {{ds.uid}}
</div>
</div>
<div class="char-talent">
@ -44,48 +68,50 @@
{{/each}}
</div>
<div class=" char-weapon line">
<div class="char-item char-weapon line">
{{set w = ds.weapon }}
<div class="img" style="background-image:url({{_res_path}}{{w.img}})"></div>
<div class="item item-icon star{{w.star}}">
<div class="img" style="background-image:url({{_res_path}}{{w.img}})"></div>
</div>
<div class="char-info weapon-info">
<div class="info">
<span class="cons cons-{{w.affix+1}}">精{{w.affix}}</span> Lv.{{w.leve || w.level}}
</div>
<div class="name">
<strong> {{w.name.length > 4 ? (w.abbr||w.name) : w.name}}</strong>
</div>
<div class="info">
<span class="cons cons-{{w.affix+1}}">精{{w.affix}}</span> Lv.{{w.leve || w.level}}
</div>
</div>
</div>
{{set mark = ds.artisMark || false }}
{{set aImgs = ds?.artisSet?.imgs || []}}
<div class="char-artis class-{{mark?.markClass||'D'}}">
<div class="item item-banner avatar-artis artis{{aImgs.length}}">
<div class="artis item-icon {{aImgs.length>0?'star5':'no-artis'}}">
{{each aImgs img}}
<div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
{{/each}}
{{if aImgs.length === 0}}
<span class="img no-artis"></span>
{{/if}}
</div>
<div class="char-item char-artis class-{{mark?.markClass||'D'}}">
<div
class="item artis item-icon avatar-artis {{aImgs.length>0?'star5':'no-artis'}} artis{{aImgs.length}}">
{{each aImgs img}}
<div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
{{/each}}
{{if aImgs.length === 0}}
<span class="img no-artis"></span>
{{/if}}
</div>
<div>
<div class="artis-mark">
<span class="artis-mark-class class-{{mark?.markClass||'D'}}">{{mark.markClass}}</span>
{{mark.mark}}
</div>
<div class="artis-title">
<div class="char-info artis-info">
<div class="name artis-title">
{{ds?.artisSet?.name}}
</div>
<div class="artis-mark">
<span class="cons artis-mark-class class-{{mark?.markClass||'D'}}">{{mark.markClass}}</span>
{{mark.mark}}
</div>
</div>
</div>
<div class="char-dmg line">
{{if ds.dmg}}
<div class="dmg">{{ds.dmg?.avg}}</div>
<div class="dmg-title">{{ds.dmg?.title}}</div>
<div class="dmg-value">{{ds.dmg?.avg}}</div>
{{else}}
{{/if}}
</div>

View File

@ -11,7 +11,21 @@ body {
overflow: hidden;
}
.char-item {
.group-rank-icon {
width: 16px;
height: 16px;
background: url("./imgs/mark-icon.png");
background-size: auto 100%;
display: inline-block;
vertical-align: bottom;
margin: -1px 3px -1px 0;
&.mark-icon {
background-position: 100% 0;
}
}
.char-list-item {
height: 60px;
background-size: auto 150%;
display: flex;
@ -19,7 +33,7 @@ body {
overflow: visible;
.line {
margin-left: 10px;
margin-left: 15px;
position: relative;
&:before {
@ -28,24 +42,28 @@ body {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, .8);
background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .1));
position: absolute;
left: -5px;
left: -15px;
top: 5px;
}
}
}
.char-idx {
width: 48px;
span {
display: inline-block;
width: 24px;
height: 24px;
margin: 13px 10px;
margin: 13px 12px;
background: url('./imgs/mark-icon.png');
background-size: auto 100%;
text-align: center;
font-size: 12px;
line-height: 24px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
&.idx-1 {
@ -53,6 +71,7 @@ body {
margin: 13px 0;
background-image: url('./imgs/mark-icon2.png');
color: rgba(0, 0, 0, 0);
text-shadow: none;
}
&.mode-mark {
@ -81,10 +100,13 @@ body {
.char-info {
.name {
margin-top: 4px;
height: 24px;
line-height: 24px;
font-size: 18px;
color: #d3bc8e;
font-weight: normal;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
.cons {
@ -94,10 +116,11 @@ body {
width: 16px;
text-align: center;
padding: 0;
margin-right: -2px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
.info {
margin-top: 4px;
height: 20px;
font-size: 12px;
line-height: 20px;
@ -108,43 +131,6 @@ body {
width: 100px;
}
.char-weapon {
width: 130px;
display: flex;
.img {
margin: -3px 0;
width: 56px;
height: 56px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.weapon-info {
padding-left: 5px;
}
.cons {
width: 28px;
font-size: 12px;
transform: scale(.9);
transform-origin: 0 50%;
}
.name {
height: 20px;
line-height: 20px;
margin-bottom: 3px;
strong {
color: #fff;
font-size: 13px;
font-weight: normal;
}
}
}
.char-talent {
display: flex;
padding: 0 5px;
@ -223,6 +209,59 @@ body {
}
}
.char-item {
vertical-align: middle;
height: 50px;
.item {
position: relative;
width: 36px;
height: 36px;
margin: 7px 5px 7px 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
display: inline-block;
overflow: visible;
vertical-align: middle;
}
}
.char-weapon {
width: 125px;
display: flex;
.img {
margin: -10px -5px;
width: 46px;
height: 56px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.weapon-info {
padding-left: 5px;
}
.cons {
width: 28px;
font-size: 12px;
transform: scale(.9);
transform-origin: 0 50%;
}
.name {
height: 20px;
line-height: 20px;
margin-bottom: 3px;
strong {
font-size: 13px;
font-weight: normal;
}
}
}
.char-artis {
display: flex;
width: 130px;
@ -261,21 +300,11 @@ body {
}
.artis-mark-class {
border-radius: 5px;
display: inline-block;
text-align: center;
background: rgba(51, 51, 51, 0.68);
height: 20px;
line-height: 20px;
box-shadow: 0 0 1px 0 #ffe4b4;
position: relative;
z-index: 9;
color: #fff;
width: 28px;
font-size: 12px;
margin-right: -2px;
transform: scale(.9);
transform-origin: 0 50%;
margin-right: -2px;
}
.artis {
@ -283,7 +312,6 @@ body {
width: 36px;
height: 36px;
margin: 7px 5px 7px 0;
box-shadow: 0 0 1px 0 #ffe4b4;
display: inline-block;
&.no-artis {
@ -317,25 +345,29 @@ body {
.artis-title {
font-size: 12px;
white-space: nowrap;
}
.artis-mark {
height: 23px;
margin-top: 5px;
}
}
.char-dmg {
text-align: right;
width: 120px;
.dmg {
height: 25px;
margin-top: 5px;
.dmg-value {
height: 30px;
line-height: 30px;
font-size: 18px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
.dmg-title {
height: 15px;
line-height: 15px;
margin-top: 5px;
font-size: 12px;
color: #aaa
}
}