PaiGramTeam/miao-plugin
3
0
Fork 0
mirror of https://github.com/yoimiya-kokomi/miao-plugin.git synced 2024-11-16 04:35:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

面板武器样式微调

Browse Source
This commit is contained in:
Kokomi 2023-10-14 21:17:27 +08:00
parent dc2fa84c94
commit 3aed243ba4
7 changed files with 195 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
models/AvatarData.js
View File

@ -163,7 +163,7 @@ export default class AvatarData extends Base {
map[`10${i}`] = `${prefix}10${i}` map[`10${i}`] = `${prefix}10${i}`
} }
} }
lodash.forEach(ds,(id)=>{ lodash.forEach(ds, (id) => {
let ret = /\d{4}(\d{3})/.exec(id) let ret = /\d{4}(\d{3})/.exec(id)
this.trees.push(map[ret?.[1] || id] || id) this.trees.push(map[ret?.[1] || id] || id)
}) })
@ -188,9 +188,6 @@ export default class AvatarData extends Base {
} }
getWeaponDetail () { getWeaponDetail () {
if (this.isGs) {
return this.weapon
}
let ret = { let ret = {
...this.weapon ...this.weapon
} }
@ -199,10 +196,21 @@ export default class AvatarData extends Base {
} }
let wData = Weapon.get(ret.id, this.game) let wData = Weapon.get(ret.id, this.game)
ret.splash = wData.imgs.gacha ret.splash = wData.imgs.gacha
let attrs = wData.calcAttr(ret.level, ret.promote) let wAttr = wData.calcAttr(ret.level, ret.promote)
lodash.forEach(attrs, (val, key) => { let attrs = {}
attrs[key] = Format.comma(val, 1) if (this.isSr) {
}) lodash.forEach(wAttr, (val, key) => {
attrs[key] = Format.comma(val, 1)
})
} else if (this.isGs) {
attrs.atkBase = Format.comma(wAttr.atkBase, 1)
if (wAttr?.attr?.key) {
let keyType = {
mastery: 'comma'
}
attrs[wAttr.attr.key] = Format[keyType[wAttr.attr.key] || 'pct'](wAttr.attr.value, 1)
}
}
ret.attrs = attrs ret.attrs = attrs
ret.desc = wData.getAffixDesc(ret.affix) ret.desc = wData.getAffixDesc(ret.affix)
return ret return ret

5
models/Weapon.js
View File

@ -74,7 +74,7 @@ class Weapon extends Base {
} }
get maxAffix () { get maxAffix () {
if(this.isSr){ if (this.isSr) {
return 5 return 5
} }
let data = this.detail?.affixData?.datas || {} let data = this.detail?.affixData?.datas || {}
@ -177,6 +177,9 @@ class Weapon extends Base {
// 获取精炼描述 // 获取精炼描述
getAffixDesc (affix = 1) { getAffixDesc (affix = 1) {
if (this.isGs) {
return {}
}
let skill = this.detail.skill let skill = this.detail.skill
let { name, desc, tables } = skill let { name, desc, tables } = skill
let reg = /\$(\d)\[(?:i|f1)\](\%?)/g let reg = /\$(\d)\[(?:i|f1)\](\%?)/g

2
resources/character/artis-list.css
View File

@ -16,7 +16,7 @@
} }
.artis .item .avatar { .artis .item .avatar {
position: absolute; position: absolute;
left: 30px; right: 0;
top: 24px; top: 24px;
width: 38px; width: 38px;
height: 38px; height: 38px;

4
resources/character/artis-list.less
View File

@ -21,7 +21,7 @@
.artis .item .avatar { .artis .item .avatar {
position: absolute; position: absolute;
left: 30px; right: 0;
top: 24px; top: 24px;
width: 38px; width: 38px;
height: 38px; height: 38px;
@ -38,4 +38,4 @@
.artis .item .avatar img { .artis .item .avatar img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }

89
resources/character/profile-detail.css
View File

@ -513,28 +513,6 @@ body {
.artis .head span { .artis .head span {
font-size: 14px; font-size: 14px;
} }
.artis.input-mode .item {
height: 100px;
margin: 5px 3px;
}
.artis.input-mode .item.weapon {
margin-left: 5px;
}
.artis.input-mode .item.arti {
width: 72px;
}
.artis.input-mode .item.arti .arti-icon,
.artis.input-mode .item.arti img {
width: 68px;
height: 68px;
}
.artis.input-mode .item.arti .head {
padding: 78px 0 0 0;
}
.artis.input-mode .item.arti .head strong {
font-size: 12px;
text-align: center;
}
.mark-ACE, .mark-ACE,
.mark-ACE² { .mark-ACE² {
color: #e85656; color: #e85656;
@ -653,6 +631,7 @@ body {
transform: scale(0.8); transform: scale(0.8);
transform-origin: 100px 10px; transform-origin: 100px 10px;
display: inline-block; display: inline-block;
display: none;
} }
.artis .weapon .star.star-2 { .artis .weapon .star.star-2 {
background-position: 0 -20px; background-position: 0 -20px;
@ -667,14 +646,15 @@ body {
background-position: 0 -80px; background-position: 0 -80px;
} }
.artis .weapon { .artis .weapon {
overflow: hidden; height: 86px;
height: 97px; overflow: visible;
margin-bottom: 10px;
} }
.artis .weapon .img { .artis .weapon .img {
width: 100px; width: 96px;
height: 100px; height: 96px;
top: 0; top: -10px;
left: 0; right: -10px;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
background-position: center; background-position: center;
@ -683,30 +663,33 @@ body {
} }
.artis .weapon .head { .artis .weapon .head {
position: absolute; position: absolute;
top: 0;
left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; padding: 15px 0 10px 15px;
text-align: right;
padding: 13px 12px 13px 0;
z-index: 3; z-index: 3;
border-radius: 10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(25, 25, 25, 0.5), rgba(25, 25, 25, 0), rgba(25, 25, 25, 0));
} }
.artis .weapon .head strong { .artis .weapon .head strong {
font-size: 18px; font-size: 15px;
margin-bottom: 3px; margin-bottom: 3px;
font-weight: normal;
} }
.artis .weapon .head > span { .artis .weapon .head > span {
display: block; display: block;
} }
.artis .weapon span { .artis .weapon span.info {
font-size: 16px; font-size: 14px;
margin-bottom: 8px;
} }
.artis .weapon .affix { .artis .weapon .affix {
color: #000; color: #000;
padding: 0 7px; padding: 0 7px;
border-radius: 4px; border-radius: 4px;
margin-left: 5px; font-size: 14px;
font-size: 16px; width: 40px;
margin-right: 5px;
} }
.artis .weapon .affix-1 { .artis .weapon .affix-1 {
box-shadow: 0 0 4px 0 #a3a3a3 inset; box-shadow: 0 0 4px 0 #a3a3a3 inset;
@ -728,8 +711,32 @@ body {
box-shadow: 0 0 4px 0 #deaf39 inset; box-shadow: 0 0 4px 0 #deaf39 inset;
background: #fff6dd; background: #fff6dd;
} }
.artis .artis-stat { .artis .weapon .weapon-attr {
height: 85px; font-size: 14px;
text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.7);
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 26px;
width: 100%;
background: rgba(0, 0, 0, 0.2);
line-height: 26px;
border-radius: 0 0 10px 10px;
text-align: center;
padding: 0 5px 0 10px;
}
.artis .weapon .weapon-attr div {
width: 50%;
}
.artis .weapon .weapon-attr div span {
color: #ffe699;
font-weight: bold;
}
.artis .arti-stat {
height: 94px;
padding-top: 5px;
} }
.arti-class-title { .arti-class-title {
height: 25px; height: 25px;
@ -852,7 +859,7 @@ body {
position: relative; position: relative;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.7); text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.7);
padding: 17px 10px 3px 15px; padding: 15px 10px 5px 15px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(25, 25, 25, 0.3), rgba(25, 25, 25, 0), rgba(25, 25, 25, 0)); background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(25, 25, 25, 0.3), rgba(25, 25, 25, 0), rgba(25, 25, 25, 0));
} }
.artis .item.arti .arti-icon { .artis .item.arti .arti-icon {
@ -874,6 +881,8 @@ body {
} }
.artis ul.detail { .artis ul.detail {
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
border-radius: 0 0 10px 10px;
overflow: hidden;
} }
.artis ul.detail li.arti-main { .artis ul.detail li.arti-main {
background: rgba(25, 25, 25, 0.5); background: rgba(25, 25, 25, 0.5);

20
resources/character/profile-detail.html
View File

@ -75,8 +75,7 @@
<div class="head"> <div class="head">
<strong>{{weapon.name}}</strong> <strong>{{weapon.name}}</strong>
<div class="star star-{{weapon.star}}"></div> <div class="star star-{{weapon.star}}"></div>
<span>Lv.{{weapon.leve || weapon.level}} <span <span><span class="affix affix-{{weapon.affix}}">精{{weapon.affix}}</span> Lv.{{weapon.leve || weapon.level}} </span>
class="affix affix-{{weapon.affix}}">精{{weapon.affix}}</span></span>
</div> </div>
</div> </div>
{{/if}} {{/if}}
@ -122,8 +121,7 @@
<div class="talent-icon <div class="talent-icon
{{talent.level > talent.original ? `talent-plus`:``}} {{talent.level > talent.original ? `talent-plus`:``}}
{{talent.original >= 10 ? `talent-crown`:``}}"> {{talent.original >= 10 ? `talent-crown`:``}}">
<div class="talent-icon-img" <div class="talent-icon-img" style="background-image:url({{_res_path}}{{imgs[key]}})"></div>
style="background-image:url({{_res_path}}{{imgs[key]}})"></div>
<strong>{{talent.level}}</strong> <strong>{{talent.level}}</strong>
<span>{{tName}}</span> <span>{{tName}}</span>
</div> </div>
@ -183,9 +181,16 @@
<div class="img" style="background-image:url({{_res_path}}{{weapon.img}})"></div> <div class="img" style="background-image:url({{_res_path}}{{weapon.img}})"></div>
<div class="head"> <div class="head">
<strong>{{weapon.name}}</strong> <strong>{{weapon.name}}</strong>
<div class="star star-{{weapon.star}}"></div> <span class="info"><span
<span>Lv.{{weapon.leve || weapon.level}} <span class="affix affix-{{weapon.affix}}">精{{weapon.affix}}</span> Lv.{{weapon.leve || weapon.level}} </span>
class="affix affix-{{weapon.affix}}">精{{weapon.affix}}</span></span> <div class="weapon-attr">
<div><span>攻击</span> +{{weapon.attrs.atkBase}}</div>
{{each weapon.attrs v k}} {{if k!== 'atkBase' }}
{{ set titleMap = {atkPct:'攻击',mastery:'精通',dmg:'伤害',hpPct:'生命',defPct:'防御',
cpct:'暴击', cdmg:'爆伤', phy:'物伤'} }}
<div><span>{{ titleMap[k] }}</span> +{{v}}</div>
{{/if}} {{/each}}
</div>
</div> </div>
</div> </div>
<div class="item arti-stat"> <div class="item arti-stat">
@ -197,6 +202,7 @@
</div> </div>
</div> </div>
{{/if}} {{/if}}
{{each ad.artis ds idx}} {{each ad.artis ds idx}}
<div class="item arti"> <div class="item arti">
{{if ds && ds.name && ds.main && ds.main.key && ds.main.key!="undefined"}} {{if ds && ds.name && ds.main && ds.main.key && ds.main.key!="undefined"}}

222
resources/character/profile-detail.less
View File

@ -632,41 +632,6 @@ body {
.mark { .mark {
} }
} }
&.input-mode {
.item {
height: 100px;
margin: 5px 3px;
&.weapon {
margin-left: 5px;
}
&.arti {
width: 72px;
.arti-icon, img {
width: 68px;
height: 68px;
}
span {
}
.head {
padding: 78px 0 0 0;
strong {
font-size: 12px;
text-align: center;
}
}
}
}
}
} }
.mark-ACE, .mark-ACE,
@ -812,6 +777,7 @@ body {
transform: scale(0.8); transform: scale(0.8);
transform-origin: 100px 10px; transform-origin: 100px 10px;
display: inline-block; display: inline-block;
display: none;
} }
.artis .weapon .star.star-2 { .artis .weapon .star.star-2 {
@ -832,84 +798,114 @@ body {
.artis .weapon { .artis .weapon {
overflow: hidden; height: 86px;
height: 97px; overflow: visible;
margin-bottom: 10px;
.img {
width: 96px;
height: 96px;
top: -10px;
right: -10px;
position: absolute;
z-index: 2;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.head {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 15px 0 10px 15px;
z-index: 3;
border-radius: 10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(25, 25, 25, 0.5), rgba(25, 25, 25, 0), rgba(25, 25, 25, 0));
strong {
font-size: 15px;
margin-bottom: 3px;
}
& > span {
display: block;
}
}
span.info {
font-size: 14px;
margin-bottom: 8px;
}
.affix {
color: #000;
padding: 0 7px;
border-radius: 4px;
font-size: 14px;
width: 40px;
margin-right: 5px;
}
.affix-1 {
box-shadow: 0 0 4px 0 #a3a3a3 inset;
background: #ebebebaa;
}
.affix-2 {
box-shadow: 0 0 4px 0 #51b72fbd inset;
background: #ddffdeaa;
}
.affix-3 {
box-shadow: 0 0 4px 0 #396cdecf inset;
background: #ddebffaa;
}
.affix-4 {
box-shadow: 0 0 4px 0 #c539debf inset;
background: #ffddf0aa;
}
.affix-5 {
box-shadow: 0 0 4px 0 #deaf39 inset;
background: #fff6dd;
}
.weapon-attr {
font-size: 14px;
text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.7);
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 26px;
width: 100%;
background: rgba(0, 0, 0, .2);
line-height: 26px;
border-radius: 0 0 10px 10px;
text-align: center;
padding: 0 5px 0 10px;
div {
width: 50%;
span {
color: #ffe699;
font-weight: bold;
}
}
}
} }
.artis .weapon .img { .artis .arti-stat {
width: 100px; height: 94px;
height: 100px; padding-top: 5px;
top: 0;
left: 0;
position: absolute;
z-index: 2;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.artis .weapon .head {
position: absolute;
bottom: 0;
right: 0;
left: 0;
text-align: right;
padding: 13px 12px 13px 0;
z-index: 3;
//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}
.artis .weapon .head strong {
font-size: 18px;
margin-bottom: 3px;
font-weight: normal;
}
.artis .weapon .head > span {
display: block;
}
.artis .weapon span {
font-size: 16px;
}
.artis .weapon .affix {
color: #000;
padding: 0 7px;
border-radius: 4px;
margin-left: 5px;
font-size: 16px;
}
.artis .weapon .affix-1 {
box-shadow: 0 0 4px 0 #a3a3a3 inset;
background: #ebebebaa;
}
.artis .weapon .affix-2 {
box-shadow: 0 0 4px 0 #51b72fbd inset;
background: #ddffdeaa;
}
.artis .weapon .affix-3 {
box-shadow: 0 0 4px 0 #396cdecf inset;
background: #ddebffaa;
}
.artis .weapon .affix-4 {
box-shadow: 0 0 4px 0 #c539debf inset;
background: #ffddf0aa;
}
.artis .weapon .affix-5 {
box-shadow: 0 0 4px 0 #deaf39 inset;
background: #fff6dd;
}
.artis .artis-stat {
height: 85px;
} }
.arti-class-title { .arti-class-title {
@ -1077,7 +1073,7 @@ body {
position: relative; position: relative;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.7); text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.7);
padding: 17px 10px 3px 15px; padding: 15px 10px 5px 15px;
background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7), rgba(25, 25, 25, .3), rgba(25, 25, 25, .0), rgba(25, 25, 25, 0)); background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7), rgba(25, 25, 25, .3), rgba(25, 25, 25, .0), rgba(25, 25, 25, 0));
} }
@ -1104,6 +1100,8 @@ body {
ul.detail { ul.detail {
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
border-radius: 0 0 10px 10px;
overflow: hidden;
li.arti-main { li.arti-main {
background: rgba(25, 25, 25, .5); background: rgba(25, 25, 25, .5);