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:
yoimiya-kokomi 2022-09-25 05:05:22 +08:00
parent 279e997744
commit 897b66454d
21 changed files with 351 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -2,6 +2,7 @@
* 武器、圣遗物资源采用webp格式
* 资源引用逻辑更新，可能会导致一些展示异常，如遇问题请反馈
* `#深渊` 对单通、双通、三通的队伍展示样式优化，样式未完全稳定
* 一些已知Bug修复
# 2.0 Alpha.1~6

2
models/Avatar.js
View File

@ -8,7 +8,7 @@ import { Profile } from '../components/index.js'
import { Artifact, Character, Weapon, ArtifactSet } from './index.js'
import moment from 'moment'
const charKey = 'name,abbr,sName,star,imgs,face,side,weaponType,elem'.split(',')
const charKey = 'name,abbr,sName,star,imgs,face,side,gacha,weaponType,elem'.split(',')
export default class Avatar extends Base {
constructor (data = {}, pd = false, hasCk = true) {

2
models/AvatarList.js
View File

@ -35,7 +35,7 @@ export default class AvatarList extends Base {
getData (ids, keys = '') {
let rets = {}
keys = keys || 'id,name,level,star,cons,fetter,elem,face,side,abbr,weapon,artisSet'
keys = keys || 'id,name,level,star,cons,fetter,elem,face,side,gacha,abbr,weapon,artisSet'
let avatars = this.avatars
lodash.forEach(ids, (id) => {
rets[id] = avatars[id].getData(keys) || {}

4
models/Character.js
View File

@ -84,6 +84,10 @@ class Character extends Base {
return this.getImgs().side
}
get gacha () {
return this.getImgs().gacha
}
get imgs () {
return this.getImgs()
}

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

@ -17,7 +17,7 @@
<img src="{{_res_path}}{{ds.side}}" onerror="whenError(this)"/>
</div>
<div class="arti-icon">
<img src="{{_res_path}}/{{ds.img}}"/>
<div class="img" style="background-image:url({{_res_path}}{{ds.img}})"></div>
</div>
<div class="head">
<strong>{{ds.name}}</strong>

16
resources/character/character-card.css
View File

@ -143,12 +143,14 @@ body {
}
.weapon-cont {
width: 180px;
display: flex;
text-shadow: 1px 1px 1px #000;
}
.weapon-cont .img {
width: 80px;
height: 80px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.weapon-cont .star {
height: 20px;
@ -173,10 +175,14 @@ body {
background-position: 0 -80px;
}
.weapon-cont .weapon-info {
padding: 10px 0 0 0;
padding: 0;
position: absolute;
top: 10px;
left: 80px;
}
.weapon-cont .weapon-info strong {
font-size: 18px;
display: block;
}
.talent-cont {
display: flex;
@ -269,9 +275,9 @@ body {
box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.5);
}
.artis-cont .artis-list .item .item-icon {
width: 110%;
height: 45px;
margin: -5%;
width: 90%;
height: 35px;
margin: 4px 5%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

6
resources/character/character-card.html
View File

@ -25,12 +25,12 @@
<div class="char-detail cont">
<div class="cont weapon-cont left-line">
<img class="img" src="{{_res_path}}{{w.img}}"/>
<div class="img" style="background-image:url({{_res_path}}{{w.img}})"></div>
<div class="weapon-info">
<strong>{{w.name.length > 4 ? (w.abbr||w.name) : w.name}}</strong>
<div class="star star-{{w.star}}"></div>
<span>Lv.{{w.leve || w.level}} <span
class="affix affix-{{w.affix}}">精{{w.affix}}</span></span>
<div>Lv.{{w.leve || w.level}} <span
class="affix affix-{{w.affix}}">精{{w.affix}}</span></div>
</div>
</div>

16
resources/character/character-card.less
View File

@ -166,12 +166,14 @@ body {
.weapon-cont {
width: 180px;
display: flex;
text-shadow: 1px 1px 1px #000;
.img {
width: 80px;
height: 80px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.star {
@ -203,10 +205,14 @@ body {
}
.weapon-info {
padding: 10px 0 0 0;
padding: 0;
position: absolute;
top: 10px;
left: 80px;
strong {
font-size: 18px;
display: block;
}
}
@ -312,9 +318,9 @@ body {
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .5);
.item-icon {
width: 110%;
height: 45px;
margin: -5%;
width: 90%;
height: 35px;
margin: 4px 5%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

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

@ -422,8 +422,9 @@ body {
display: block;
}
.artis .item .arti-icon .img {
width: 60px;
height: 60px;
width: 50px;
height: 50px;
margin: 5px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

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

@ -489,30 +489,33 @@ body {
position: absolute;
left: 2px;
top: 3px;
span {
position: absolute;
right: 2px;
bottom: 0;
margin-left: 5px;
background: rgba(0, 0, 0, .5);
border-radius: 5px;
height: 18px;
line-height: 18px;
padding: 0 3px;
color: #fff;
font-size: 12px;
display: block;
}
.img {
width: 50px;
height: 50px;
margin: 5px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
.arti-icon span {
position: absolute;
right: 2px;
bottom: 0;
margin-left: 5px;
background: rgba(0, 0, 0, .5);
border-radius: 5px;
height: 18px;
line-height: 18px;
padding: 0 3px;
color: #fff;
font-size: 12px;
display: block;
}
.arti-icon .img {
width: 60px;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
.head {

12
resources/character/profile-stat.css
View File

@ -312,16 +312,16 @@ body {
}
.cont .avatar-artis.artis2 .img {
position: absolute;
width: 24px;
height: 24px;
transform: scale(0.7);
width: 92%;
height: 92%;
margin: 4%;
}
.cont .avatar-artis.artis2 .img:first-child {
left: -2px;
top: -2px;
transform-origin: left top;
}
.cont .avatar-artis.artis2 .img:last-child {
right: -2px;
bottom: -2px;
transform-origin: right bottom;
}
.cont .artis-mark-class {
width: 28px;

12
resources/character/profile-stat.less
View File

@ -344,17 +344,17 @@ body {
&.artis2 {
.img {
position: absolute;
width: 24px;
height: 24px;
transform: scale(.7);
width: 92%;
height: 92%;
margin: 4%;
&:first-child {
left: -2px;
top: -2px;
transform-origin: left top;
}
&:last-child {
right: -2px;
bottom: -2px;
transform-origin: right bottom;
}
}
}

5
resources/common/common.css
View File

@ -384,6 +384,11 @@ ul.cont-msg li strong,
background-position: center;
background-repeat: no-repeat;
}
.item-icon.artis .img {
width: 84%;
height: 84%;
margin: 8%;
}
.item-icon.star1 {
background-image: url("../common/item/bg1.png");
}

8
resources/common/common.less
View File

@ -330,6 +330,14 @@ ul.cont-msg, .cont-footer ul {
background-repeat: no-repeat;
}
&.artis {
.img {
width: 84%;
height: 84%;
margin: 8%;
}
}
@stars: 1, 2, 3, 4, 5;
each(@stars, {
&.star@{value} {

91
resources/common/tpl.css
View File

@ -154,7 +154,7 @@
width: 70px;
height: 70px;
border-radius: 7px 7px 15px 0;
background-size: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
@ -162,10 +162,6 @@
.avatar-card .avatar-face .img {
background-position: center bottom;
}
.avatar-card .avatar-face .cons {
border-radius: 0 0 0 5px;
padding: 2px 5px;
}
.avatar-card .avatar-face .avatar-level {
position: absolute;
bottom: 0;
@ -175,6 +171,13 @@
border-radius: 0 4px 0 0;
color: #fff;
}
.avatar-card .cons {
border-radius: 0 0 0 5px;
padding: 2px 5px;
position: absolute;
right: 0;
top: 0;
}
.avatar-card .avatar-talent {
height: 21px;
padding: 3px 5px 2px;
@ -217,10 +220,68 @@
white-space: nowrap;
margin-left: -1px;
}
.avatar-card .cons {
position: absolute;
right: 0;
top: 0;
.avatar-card.card-mini .wide,
.avatar-card.card-mini .line {
display: none;
}
.avatar-card .avatar-name {
padding: 8px 0 0 5px;
color: #333;
}
.avatar-card .avatar-name strong {
font-size: 14px;
display: block;
height: 23px;
line-height: 20px;
}
.avatar-card .avatar-name .cons {
position: initial;
border-radius: 4px;
padding: 1px 3px;
vertical-align: baseline;
}
.avatar-card.card-wide .mini {
display: none;
}
.avatar-card.card-wide .card {
width: 146px;
display: flex;
}
.avatar-card.card-wide .avatar-face {
height: 126px;
width: 76px;
border-radius: 7px 0 0 7px;
}
.avatar-card.card-wide .img {
background-size: 100% auto;
background-position: 0 10%;
height: 135px;
margin-top: -9px;
}
.avatar-card.card-wide .avatar-info {
width: 70px;
}
.avatar-card.card-wide .line {
display: block;
height: 1px;
width: 100%;
margin: 5px 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 100, 100, 0.5) 20%, rgba(100, 100, 100, 0.5) 80%, rgba(0, 0, 0, 0));
transform: scale(0.8);
}
.avatar-card.wide2 .card {
width: 298px;
}
.avatar-card.wide2 .avatar-face {
width: 146px;
}
.avatar-card.wide2 .avatar-face .img {
margin-top: -50px;
height: 176px;
}
.avatar-card.wide2 .avatar-info {
width: 146px;
padding-left: 5px;
}
.avatar-detail {
display: flex;
@ -249,16 +310,16 @@
}
.avatar-artis.artis2 .img {
position: absolute;
width: 24px;
height: 24px;
transform: scale(0.7);
width: 92%;
height: 92%;
margin: 4%;
}
.avatar-artis.artis2 .img:first-child {
left: -2px;
top: -2px;
transform-origin: left top;
}
.avatar-artis.artis2 .img:last-child {
right: -2px;
bottom: -2px;
transform-origin: right bottom;
}
.item-list {
display: flex;

71
resources/common/tpl/avatar-card.html
View File

@ -1,46 +1,53 @@
{{set avatar = $data[0] || false }}
{{set {_res_path} = $data[1]}}
{{set {_res_path, cardType} = $data[1]}}
{{set weapon = avatar.weapon || {} }}
{{set talentMap = ['a','e','q'] }}
<div class="avatar-card elem-{{avatar.elem}} avatar-{{avatar.name}}">
<div class="avatar-card elem-{{avatar.elem}} avatar-{{avatar.name}} card-{{cardType||'mini'}}">
<div class="card">
{{if avatar}}
<div class="avatar-face item-icon star{{avatar.star==4?4:5}}">
<span class="img"
style="background-image:url({{_res_path}}{{avatar.face}})"></span>
<span class="cons cons-{{avatar.cons}}">{{avatar.cons}}</span>
<div class="img mini" style="background-image:url({{_res_path}}{{avatar.face}})"></div>
<div class="img wide avatar-{{avatar.name}}" style="background-image:url({{_res_path}}{{avatar.gacha}})"></div>
<span class="cons cons-{{avatar.cons}} mini">{{avatar.cons}}</span>
<div class="avatar-level">Lv{{avatar.level}}</div>
</div>
{{set talent = avatar.talent || {} }}
{{if talent.a && talent.a.level }}
<div class="avatar-talent">
{{each talentMap k}}
{{set t = talent[k] || {} }}
<span
class="talent-item talent-{{k}} talent-{{t.original===10?'crown':'none'}} talent-{{t.level>t.original?'plus':'none'}}">{{t.level}}</span>
{{/each}}
</div>
{{else}}
<div class="avatar-talent no-talent"><span>暂无天赋数据</span></div>
{{/if}}
<div class="avatar-detail">
<div class="item avatar-weapon">
<div class="item-icon star{{weapon.star}}">
<span class="img" style="background-image:url({{_res_path}}{{weapon.img}})"></span>
<span class="cons cons-{{weapon.affix}}">{{weapon.affix}}</span>
</div>
</div>
<div class="item avatar-artis artis{{avatar.artisSet?.names?.length}}">
<div class="artis item-icon">
{{each avatar.artisSet?.imgs img}}
<div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
{{/each}}
<div class="avatar-info">
{{set talent = avatar.talent || {} }}
{{if talent.a && talent.a.level }}
<div class="avatar-name wide">
<strong>{{avatar.abbr}}</strong>
<span class="cons cons-{{avatar.cons}}">{{avatar.cons}}</span>
<span class="avatar-level">Lv{{avatar.level}}</span>
<div class="line"></div>
</div>
<div class="avatar-talent">
{{each talentMap k}}
{{set t = talent[k] || {} }} <span
class="talent-item talent-{{k}} talent-{{t.original===10?'crown':'none'}} talent-{{t.level>t.original?'plus':'none'}}">{{t.level}}</span>
{{/each}}
</div>
{{else}}
<div class="avatar-talent no-talent"><span>暂无天赋数据</span></div>
{{/if}}
<div class="line"></div>
<div class="avatar-detail">
<div class="item avatar-weapon">
<div class="item-icon star{{weapon.star}}">
<span class="img" style="background-image:url({{_res_path}}{{weapon.img}})"></span>
<span class="cons cons-{{weapon.affix}}">{{weapon.affix}}</span>
</div>
</div>
<div class="item avatar-artis artis{{avatar.artisSet?.names?.length}}">
<div class="artis item-icon">
{{each avatar.artisSet?.imgs img}}
<div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
{{/each}}
</div>
<div class="item-info wide"></div>
</div>
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>

116
resources/common/tpl/avatar-card.less
View File

@ -17,7 +17,7 @@
width: 70px;
height: 70px;
border-radius: 7px 7px 15px 0;
background-size: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .5);
@ -26,10 +26,6 @@
background-position: center bottom;
}
.cons {
border-radius: 0 0 0 5px;
padding: 2px 5px;
}
.avatar-level {
position: absolute;
@ -44,6 +40,15 @@
}
.cons {
border-radius: 0 0 0 5px;
padding: 2px 5px;
position: absolute;
right: 0;
top: 0;
}
.avatar-talent {
height: 21px;
padding: 3px 5px 2px;
@ -92,11 +97,90 @@
}
}
.cons {
position: absolute;
right: 0;
top: 0;
&.card-mini {
.wide, .line {
display: none;
}
}
.avatar-name {
padding: 8px 0 0 5px;
color: #333;
strong {
font-size: 14px;
display: block;
height: 23px;
line-height: 20px;
}
.cons {
position: initial;
border-radius: 4px;
padding: 1px 3px;
vertical-align: baseline;
}
}
&.card-wide {
.mini {
display: none;
}
.card {
width: 146px;
display: flex;
}
.avatar-face {
height: 126px;
width: 76px;
border-radius: 7px 0 0 7px;
}
.img {
background-size: 100% auto;
background-position: 0 10%;
height: 135px;
margin-top: -9px;
}
.avatar-info {
width: 70px;
}
.line {
display: block;
height: 1px;
width: 100%;
margin: 5px 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 100, 100, .5) 20%, rgba(100, 100, 100, .5) 80%, rgba(0, 0, 0, 0));
transform: scale(.8)
}
}
&.wide2 {
.card {
width: 298px;
}
.avatar-face {
width: 146px;
.img {
margin-top: -50px;
height: 176px;
}
}
.avatar-info {
width: 146px;
padding-left: 5px;
}
}
}
.avatar-detail {
@ -134,18 +218,20 @@
&.artis2 {
.img {
position: absolute;
width: 24px;
height: 24px;
transform: scale(.7);
width: 92%;
height: 92%;
margin: 4%;
&:first-child {
left: -2px;
top: -2px;
transform-origin: left top;
}
&:last-child {
right: -2px;
bottom: -2px;
transform-origin: right bottom;
}
}
}
}

BIN
resources/meta/artifact/如雷的盛怒/1.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 18 KiB

50
resources/stat/abyss-summary.css
View File

@ -74,7 +74,7 @@ body,
width: 175px;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: 0 -30px;
background-position: 0 10%;
}
.abyss-data {
display: flex;
@ -219,34 +219,44 @@ body,
height: 20px;
margin: 2px;
}
.avatar-banner.avatar-枫原万叶 {
background-position: 0 40px;
.avatar-banner.avatar-枫原万叶,
.img.wide.avatar-枫原万叶 {
background-position: 0 -13%;
}
.avatar-banner.avatar-九条裟罗 {
.avatar-banner.avatar-九条裟罗,
.img.wide.avatar-九条裟罗 {
background-position: 0 0;
}
.avatar-banner.avatar-香菱 {
background-position: 0 50px;
.avatar-banner.avatar-香菱,
.img.wide.avatar-香菱 {
background-position: 0 -16%;
}
.avatar-banner.avatar-行秋 {
background-position: 0 50px;
.avatar-banner.avatar-行秋,
.img.wide.avatar-行秋 {
background-position: 0 -16%;
}
.avatar-banner.avatar-甘雨 {
background-position: 0 25px;
.avatar-banner.avatar-甘雨,
.img.wide.avatar-甘雨 {
background-position: 0 -8%;
}
.avatar-banner.avatar-刻晴 {
background-position: 0 15px;
.avatar-banner.avatar-刻晴,
.img.wide.avatar-刻晴 {
background-position: 0 -5%;
}
.avatar-banner.avatar-神里绫华 {
background-position: 0 -40px;
.avatar-banner.avatar-神里绫华,
.img.wide.avatar-神里绫华 {
background-position: 0 13%;
}
.avatar-banner.avatar-班尼特 {
background-position: 0 -45px;
.avatar-banner.avatar-班尼特,
.img.wide.avatar-班尼特 {
background-position: 0 15%;
}
.avatar-banner.avatar-五郎 {
background-position: 0 -45px;
.avatar-banner.avatar-五郎,
.img.wide.avatar-五郎 {
background-position: 0 15%;
}
.avatar-banner.avatar-托马 {
background-position: 0 15px;
.avatar-banner.avatar-托马,
.img.wide.avatar-托马 {
background-position: 0 -5%;
}
/*# sourceMappingURL=abyss-summary.css.map */

13
resources/stat/abyss-summary.html
View File

@ -43,7 +43,7 @@
<strong>{{ds.value}}</strong>
</div>
<div class="avatar-banner avatar-{{avatar.name}}"
style="background-image:url({{_res_path}}/meta/character/{{avatar.name}}/imgs/gacha.webp)"></div>
style="background-image:url({{_res_path}}{{avatar.gacha}})"></div>
<div class="stat-msg">
{{each ds.msg msg}}
{{if msg.txt}}
@ -59,6 +59,7 @@
</div>
</div>
{{set cardTypes={1:['wide wide2'],2:['wide','wide'],3:['wide','mini','mini'],4:['mini','mini','mini','mini']} }}
{{each abyss?.floors floor}}
<div class="cont">
@ -69,14 +70,16 @@
</div>
<div class="abyss-floor-team">
<div class="abyss-team">
{{each floor?.display?.up?.avatars||[] id}}
<% include(_layout_path+'../tpl/avatar-card.html', [avatars[id],{_res_path}]) %>
{{set ds=floor?.display?.up?.avatars||[] }}
{{each ds id idx}}
<% include(_layout_path+'../tpl/avatar-card.html', [avatars[id],{_res_path, cardType:cardTypes[ds.length][idx]}]) %>
{{/each}}
</div>
<div class="line"></div>
<div class="abyss-team">
{{each floor?.display?.down?.avatars||[] id}}
<% include(_tpl_path+'/avatar-card.html', [avatars[id],{_res_path}]) %>
{{set ds=floor?.display?.down?.avatars||[] }}
{{each ds id idx}}
<% include(_tpl_path+'/avatar-card.html', [avatars[id],{_res_path, cardType:cardTypes[ds.length][idx]}]) %>
{{/each}}
</div>
</div>

22
resources/stat/abyss-summary.less
View File

@ -86,7 +86,7 @@ body, .container {
width: 175px;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: 0 -30px;
background-position: 0 10%;
}
.abyss-data {
@ -265,9 +265,9 @@ body, .container {
}
}
.avatar-banner {
.avatar-banner, .img.wide {
&.avatar-枫原万叶 {
background-position: 0 40px;
background-position: 0 -13%;
}
&.avatar-九条裟罗 {
@ -275,34 +275,34 @@ body, .container {
}
&.avatar-香菱 {
background-position: 0 50px;
background-position: 0 -16%;
}
&.avatar-行秋 {
background-position: 0 50px;
background-position: 0 -16%;
}
&.avatar-甘雨 {
background-position: 0 25px;
background-position: 0 -8%;
}
&.avatar-刻晴 {
background-position: 0 15px;
background-position: 0 -5%;
}
&.avatar-神里绫华 {
background-position: 0 -40px;
background-position: 0 13%;
}
&.avatar-班尼特 {
background-position: 0 -45px;
background-position: 0 15%;
}
&.avatar-五郎 {
background-position: 0 -45px;
background-position: 0 15%;
}
&.avatar-托马 {
background-position: 0 15px;
background-position: 0 -5%;
}
}