Yunzai-Plugin/ZZZ-Plugin
1
0
Fork 0
mirror of https://github.com/ZZZure/ZZZ-Plugin.git synced 2025-12-16 13:17:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 角色命座

Browse source
This commit is contained in:
bietiaop 2025-03-01 20:25:03 +08:00
parent 5830178362
commit 73715f015f
12 changed files with 324 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

86
resources/cinema/index.css Normal file
View file

@ -0,0 +1,86 @@
.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;
}
.cinema {
padding: 1em;
}
.cinema .header {
margin-bottom: 1rem;
}
.cinema .title {
color: white;
font-size: 2rem;
margin: 0;
}
.cinema .subtitle {
color: #6666ff;
font-size: 1.5rem;
margin: 0;
}
.cinema .content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.cinema .section {
margin-bottom: 1rem;
}
.cinema .section-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.cinema .section-content {
font-size: 1.3rem;
line-height: 1.5;
}
.cinema .highlight {
color: #ffd700;
}
.cinema .skill-tag {
display: inline-block;
margin-right: 0.5rem;
}
.cinema .image-container {
text-align: center;
margin-top: 1rem;
}
.cinema .character-image {
max-width: 100%;
border-radius: 0.5rem;
}
/*# sourceMappingURL=index.css.map */

43
resources/cinema/index.html Normal file
View file

@ -0,0 +1,43 @@
{{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="cinema">
<div class="header">
<h1 class="title">意象影画</h1>
<h2 class="subtitle">CINEMA</h2>
</div>
<div class="content">
{{each charData.Talent talent}}
<div class="section">
<h3 class="section-title">{{talent.Level}}. {{talent.Name}}</h3>
<div class="section-content no-zzz-font">
{{@talent.description}}
</div>
</div>
{{/each}}
</div>
<div class="image-container">
<img src="{{charData.cinema_image}}" alt="角色插图" class="character-image">
</div>
<div style="text-align: center; font-size: 1em; color: #666; margin: 2em 0;">数据来源于Hakush</div>
{{/block}}

95
resources/cinema/index.scss Normal file
View file

@ -0,0 +1,95 @@
.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;
}
}
}
.cinema {
padding: 1em;
.header {
margin-bottom: 1rem;
}
.title {
color: white;
font-size: 2rem;
margin: 0;
}
.subtitle {
color: #6666ff;
font-size: 1.5rem;
margin: 0;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.section {
margin-bottom: 1rem;
}
.section-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.section-content {
font-size: 1.3rem;
line-height: 1.5;
}
.highlight {
color: #ffd700;
}
.skill-tag {
display: inline-block;
margin-right: 0.5rem;
}
.image-container {
text-align: center;
margin-top: 1rem;
}
.character-image {
max-width: 100%;
border-radius: 0.5rem;
}
}