调整角色面板圣遗物评分部分展示

This commit is contained in:
Kokomi 2023-10-24 04:01:15 +08:00
parent becf9b255c
commit b51737e870
5 changed files with 161 additions and 22 deletions

View File

@ -187,6 +187,14 @@ let ProfileDetail = {
}
let artisDetail = profile.getArtisMark()
// 处理一下allAttr确保都有9个内容以获得比较好展示效果
let allAttr = profile.artis.getAllAttr() || []
allAttr = lodash.slice(allAttr, 0, 9)
for (let idx = allAttr.length; idx < 9; idx++) {
allAttr[idx] = {}
}
artisDetail.allAttr = allAttr
let artisKeyTitle = Artifact.getArtisKeyTitle(game)
let data = profile.getData('name,abbr,cons,level,talent,dataSource,updateTime,imgs,costumeSplash')
if (isSr) {

View File

@ -248,4 +248,36 @@ export default class Artis extends Base {
})
return ret
}
getAllAttr () {
let ret = {}
let add = (ds) => {
if (!ds) {
return
}
let key = ds.key
if (!ret[key]) {
ret[key] = {
key,
value: 0,
upNum: 0,
eff: 0
}
}
let tmp = ret[key]
tmp.value += ds.value
if (ds.eff && ds.upNum) {
tmp.eff += ds.eff
tmp.upNum += ds.upNum
}
}
this.forEach((arti) => {
// add(arti.main)
lodash.forEach(arti.attrs, (attr) => {
add(attr)
})
})
ret = lodash.sortBy(lodash.values(ret), ['eff']).reverse()
return ArtisMark.formatArti(ret, false, false, this.game)
}
}

View File

@ -540,7 +540,8 @@ body {
position: initial;
display: table;
}
.artis ul.detail li {
.artis ul.detail li,
.arti-info ul.detail li {
padding: 0 3px;
font-size: 14px;
position: relative;
@ -550,17 +551,20 @@ body {
height: 26px;
white-space: nowrap;
}
.artis ul.detail li span {
.artis ul.detail li span,
.arti-info ul.detail li span {
position: initial;
display: table-cell;
color: #fff;
}
.artis ul.detail li span.title {
.artis ul.detail li span.title,
.arti-info ul.detail li span.title {
text-align: left;
padding-left: 30px;
font-size: 14px;
}
.artis ul.detail li span.title i.eff {
.artis ul.detail li span.title i.eff,
.arti-info ul.detail li span.title i.eff {
position: absolute;
display: block;
left: 3px;
@ -574,7 +578,8 @@ body {
width: 23px;
text-align: center;
}
.artis ul.detail li span.title i.up-num {
.artis ul.detail li span.title i.up-num,
.arti-info ul.detail li span.title i.up-num {
position: absolute;
display: block;
left: 91px;
@ -586,41 +591,52 @@ body {
background-repeat: no-repeat;
background-size: auto 500%;
}
.artis ul.detail li span.title i.up-num.up-5 {
.artis ul.detail li span.title i.up-num.up-5,
.arti-info ul.detail li span.title i.up-num.up-5 {
background-position: 0 -8px;
}
.artis ul.detail li span.title i.up-num.up-4 {
.artis ul.detail li span.title i.up-num.up-4,
.arti-info ul.detail li span.title i.up-num.up-4 {
background-position: 0 -16px;
}
.artis ul.detail li span.title i.up-num.up-3 {
.artis ul.detail li span.title i.up-num.up-3,
.arti-info ul.detail li span.title i.up-num.up-3 {
background-position: 0 -24px;
}
.artis ul.detail li span.title i.up-num.up-2 {
.artis ul.detail li span.title i.up-num.up-2,
.arti-info ul.detail li span.title i.up-num.up-2 {
background-position: 0 -32px;
}
.artis ul.detail li span.title i.up-num.up-1 {
.artis ul.detail li span.title i.up-num.up-1,
.arti-info ul.detail li span.title i.up-num.up-1 {
background: none !important;
}
.artis ul.detail li span.val {
.artis ul.detail li span.val,
.arti-info ul.detail li span.val {
text-align: right;
padding-right: 10px;
font-size: 14px;
}
.artis ul.detail li.great span.title {
.artis ul.detail li.great span.title,
.arti-info ul.detail li.great span.title {
color: #ffe699;
}
.artis ul.detail li.great span.title i.up-num {
.artis ul.detail li.great span.title i.up-num,
.arti-info ul.detail li.great span.title i.up-num {
background-image: url("./imgs/up-num-icon2.png");
background-size: auto 500%;
}
.artis ul.detail li.nouse span {
.artis ul.detail li.nouse span,
.arti-info ul.detail li.nouse span {
color: #888;
}
.artis ul.detail li.nouse span i.up-num {
.artis ul.detail li.nouse span i.up-num,
.arti-info ul.detail li.nouse span i.up-num {
background-image: url("./imgs/up-num-icon0.png");
background-size: auto 500%;
}
.artis ul.detail li.arti-main {
.artis ul.detail li.arti-main,
.arti-info ul.detail li.arti-main {
font-size: 16px;
padding: 3px 3px;
font-weight: bold;
@ -783,9 +799,39 @@ body {
.arti-info {
width: 390px;
}
.arti-info .arti-attr {
.arti-info .arti-all-attr {
height: 64px;
}
.arti-info .arti-all-attr .arti-attr {
position: relative;
right: 0;
top: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 90px;
width: 100%;
}
.arti-info .arti-all-attr .arti-attr li {
width: 33.33%;
display: flex;
height: 30px;
line-height: 30px;
}
.arti-info .arti-all-attr .arti-attr li i.eff {
width: 28px !important;
top: 6px !important;
left: 5px !important;
}
.arti-info .arti-all-attr .arti-attr li span.title {
padding-left: 36px;
width: 60%;
}
.arti-info .arti-all-attr .arti-attr li span.val {
padding-right: 5px;
font-size: 13px;
width: 40%;
}
.arti-info .arti-notice {
height: 25px;
line-height: 25px;

View File

@ -186,9 +186,22 @@
<div class="arti-class-title">评分规则:{{ad.classTitle}}</div>
</div>
<div class="arti-info">
<div class="arti-attr"></div>
<div class="arti-notice dmg-desc">
评分仅供参考与娱乐。可使用<strong>{{gameHash}}{{data.abbr}}圣遗物</strong>来查看评分详情
<div class="arti-all-attr">
<ul class="detail attr arti-attr">
{{set sTitle = {暴击率:'暴击',暴击伤害:'爆伤',充能效率:'充能',元素精通:'精通',效果命中:'命中',效果抵抗:'抵抗',击破特攻:'击破',
大生命:'生命',大攻击:'攻击',大防御:'防御',小生命:'生命',小攻击:'攻击',小防御:'防御'}
}}
{{each ad.allAttr attr}}
{{if attr && attr.key}}
<li class="{{ad.charWeight[attr.key]*1 > 79.9 ?`great`:(ad.charWeight[attr.key]*1>0 ? `useful`:`nouse`)}}">
<span class="title">{{if attr.eff}}<i class="eff">{{attr.eff || ''}}</i>{{/if}} {{sTitle[artisKeyTitle[attr.key]] || artisKeyTitle[attr.key]}}</span>
<span class="val">+{{attr.value}}</span>
</li>
{{else}}
<li></li>
{{/if}}
{{/each}}
</ul>
</div>
</div>
</div>

View File

@ -667,7 +667,8 @@ body {
display: table;
}
.artis ul.detail li {
.artis ul.detail li,
.arti-info ul.detail li {
padding: 0 3px;
font-size: 14px;
position: relative;
@ -960,8 +961,47 @@ body {
.arti-info {
width: 390px;
.arti-attr {
.arti-all-attr {
height: 64px;
.arti-attr {
position: relative;
right: 0;
top: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 90px;
width: 100%;
li {
width: 33.33%;
display: flex;
height: 30px;
line-height: 30px;
i.eff {
width: 28px !important;
top: 6px !important;
left: 5px !important;
}
span {
}
span.title {
padding-left: 36px;
width: 60%;
}
span.val {
padding-right: 5px;
font-size: 13px;
width: 40%;
}
}
}
}
.arti-notice {