mirror of
https://github.com/ZZZure/ZZZ-Plugin.git
synced 2025-12-16 13:17:32 +00:00
feat: 角色天赋图鉴（支持自定义等级）
This commit is contained in:
bietiaop
parent
4f02e6b2ce
commit
15b14eece4
23 changed files with 937 additions and 124 deletions
140
resources/skills/index.css
Normal file
140
resources/skills/index.css
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
.char-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
}
|
||||
.char-info .avatar {
|
||||
width: 5em;
|
||||
aspect-ratio: 1;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.char-info .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.char-info .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.char-info .info .name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.char-info .info .name .simple {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.char-info .info .description {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.skills {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
.skills .skill {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.skills .skill .description {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.skills .skill .description .icon {
|
||||
width: 4em;
|
||||
aspect-ratio: 1;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.skills .skill .description .icon .skill-icon {
|
||||
width: 100%;
|
||||
}
|
||||
.skills .skill .description .info .name {
|
||||
font-size: 1.4em;
|
||||
color: rgb(246, 202, 69);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.skills .skill .description .info .item {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.skills .skill .description .info .item .title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.skills .skill .description .info .item .content .line .skill-icon {
|
||||
width: 1.2em;
|
||||
margin-bottom: -0.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
.skills .skill .detail .title {
|
||||
font-size: 1.1em;
|
||||
color: rgb(246, 202, 69);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.skills .skill .detail .title .level {
|
||||
font-size: 0.8em;
|
||||
color: white;
|
||||
background-color: rgb(246, 202, 69);
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 0.3em;
|
||||
margin-left: 0.5em;
|
||||
text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.skills .skill .detail .item .rate {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
}
|
||||
.skills .skill .detail .item .rate .tb-tr {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.skills .skill .detail .item .rate .tb-tr:first-child {
|
||||
border-top: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.skills .skill .detail .item .rate .tb-tr:nth-child(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.skills .skill .detail .item .rate .tb-td {
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.9em;
|
||||
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.skills .skill .detail .item .rate .tb-td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.skills .skill .detail .item .detail {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
}
|
||||
.skills .skill .detail .item .detail .tb-tr {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.skills .skill .detail .item .detail .tb-tr:first-child {
|
||||
border-top: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.skills .skill .detail .item .detail .tb-tr:nth-child(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.skills .skill .detail .item .detail .tb-td {
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.9em;
|
||||
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.skills .skill .detail .item .detail .tb-td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
112
resources/skills/index.html
Normal file
112
resources/skills/index.html
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
{{extend defaultLayout}}
|
||||
|
||||
{{block 'css'}}
|
||||
<link rel="stylesheet" href="{{@sys.currentPath}}/index.css">
|
||||
{{/block}}
|
||||
|
||||
{{block 'main'}}
|
||||
<div class="char-info">
|
||||
<div class="avatar">
|
||||
<img src="{{charData.square_icon}}" alt="Avatar">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">
|
||||
<div class="simple">{{charData.PartnerInfo.Name}}</div>
|
||||
<div class="full">{{charData.PartnerInfo.FullName}}</div>
|
||||
</div>
|
||||
<div class="description no-zzz-font">
|
||||
<div class="f">{{@charData.PartnerInfo.ImpressionF}}</div>
|
||||
<div class="m">{{@charData.PartnerInfo.ImpressionM}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skills">
|
||||
{{each displays display}}
|
||||
<div class="skill">
|
||||
<div class="description">
|
||||
<div class="icon">
|
||||
<div class="skill-icon {{display.icon}}"></div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{display.name}}</div>
|
||||
{{each charData.Skill[display.key].Description skill}}
|
||||
{{if !!skill.description}}
|
||||
<div class="item">
|
||||
<div class="title">{{skill.Name}}</div>
|
||||
<div class="content no-zzz-font">{{@skill.description}}</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="title">详细属性<span class="level">Lv.{{charData.Skill[display.key].level}}</span></div>
|
||||
{{if !!charData.Skill[display.key].rate}}
|
||||
{{each charData.Skill[display.key].rate rate}}
|
||||
<div class="item">
|
||||
<div class="name">{{rate.name}}</div>
|
||||
<div class="rate no-zzz-font">
|
||||
{{each rate.data.rate rt}}
|
||||
<div class="tb-tr">
|
||||
<div class="tb-td">{{rt.label}}</div>
|
||||
<div class="tb-td">{{rt.value}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div class="detail no-zzz-font">
|
||||
<div class="tb-tr">
|
||||
<div class="tb-td">#</div>
|
||||
<div class="tb-td">A</div>
|
||||
<div class="tb-td">B</div>
|
||||
<div class="tb-td">C</div>
|
||||
<div class="tb-td">D</div>
|
||||
<div class="tb-td">E</div>
|
||||
<div class="tb-td">F</div>
|
||||
<div class="tb-td">G</div>
|
||||
</div>
|
||||
{{each rate.data.details detail i}}
|
||||
<div class="tb-tr">
|
||||
<div class="tb-td">{{i}}</div>
|
||||
<div class="tb-td">{{detail.A}}</div>
|
||||
<div class="tb-td">{{detail.B}}</div>
|
||||
<div class="tb-td">{{detail.C}}</div>
|
||||
<div class="tb-td">{{detail.D}}</div>
|
||||
<div class="tb-td">{{detail.E}}</div>
|
||||
<div class="tb-td">{{detail.F}}</div>
|
||||
<div class="tb-td"></div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{if !!charData.Passive.currentLevel}}
|
||||
<div class="skill">
|
||||
<div class="description">
|
||||
<div class="icon">
|
||||
<div class="skill-icon core"></div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">核心技</div>
|
||||
<div class="detail">
|
||||
<div class="title">详细属性<span class="level">Lv.{{charData.Passive._level}}</span></div>
|
||||
</div>
|
||||
{{if !!charData.Passive.currentLevel.description}}
|
||||
{{each charData.Passive.currentLevel.description skill i}}
|
||||
<div class="item">
|
||||
<div class="title">{{charData.Passive.currentLevel.Name[i]}}</div>
|
||||
<div class="content no-zzz-font">{{@skill}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div style="text-align: center; font-size: 1em; color: #666; margin: 2em 0;">数据来源于Hakush</div>
|
||||
{{/block}}
|
||||
150
resources/skills/index.scss
Normal file
150
resources/skills/index.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
.char-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
.avatar {
|
||||
width: 5em;
|
||||
aspect-ratio: 1;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.5em;
|
||||
.simple {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.skills {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
margin: 0.5em;
|
||||
.skill {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
backdrop-filter: blur(5px);
|
||||
.description {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
.icon {
|
||||
width: 4em;
|
||||
aspect-ratio: 1;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
.skill-icon {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
.name {
|
||||
font-size: 1.4em;
|
||||
color: rgb(246, 202, 69);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.item {
|
||||
margin-bottom: 0.3em;
|
||||
.title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.content {
|
||||
.line {
|
||||
.skill-icon {
|
||||
width: 1.2em;
|
||||
margin-bottom: -0.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
.title {
|
||||
font-size: 1.1em;
|
||||
color: rgb(246, 202, 69);
|
||||
margin: 0.5em 0;
|
||||
.level {
|
||||
font-size: 0.8em;
|
||||
color: white;
|
||||
background-color: rgb(246, 202, 69);
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 0.3em;
|
||||
margin-left: 0.5em;
|
||||
text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
.item {
|
||||
.rate {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
.tb-tr {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
&:first-child {
|
||||
border-top: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
&:nth-child(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.tb-td {
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.9em;
|
||||
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
.tb-tr {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
&:first-child {
|
||||
border-top: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
&:nth-child(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.tb-td {
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.9em;
|
||||
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue