120 lines
4.3 KiB
Plaintext
120 lines
4.3 KiB
Plaintext
<view class="safe-shell cast-shell font-{{fontScale}}">
|
||
<view class="cast-head paper-panel">
|
||
<button class="quiet-button cast-back" bindtap="goBack" aria-label="返回封面">‹ 封面</button>
|
||
<view class="cast-heading-copy">
|
||
<text class="eyebrow">桂香里的熟面孔</text>
|
||
<text class="cast-title">人物画谱</text>
|
||
</view>
|
||
<view class="cast-head-actions">
|
||
<button
|
||
class="quiet-button font-button"
|
||
bindtap="toggleFont"
|
||
aria-label="{{fontScale === 'large' ? '把人物画谱文字再放大' : '恢复标准大字'}}"
|
||
>
|
||
{{fontScale === 'large' ? '再大一点' : '标准大字'}}
|
||
</button>
|
||
<view class="capsule-safe-space" aria-hidden="true"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view
|
||
class="cast-scroll"
|
||
scroll-y
|
||
enhanced
|
||
show-scrollbar="{{true}}"
|
||
lower-threshold="24"
|
||
bindscrolltolower="markListEnd"
|
||
aria-label="桂香人物列表，可上下滑动"
|
||
>
|
||
<view class="cast-intro">
|
||
<text>点开一位人物，先认清他和家里人的关系，再看看他在桂香里的故事。</text>
|
||
</view>
|
||
<view class="cast-grid">
|
||
<view
|
||
wx:for="{{cast}}"
|
||
wx:key="id"
|
||
class="cast-card paper-panel"
|
||
aria-role="button"
|
||
aria-label="{{item.name}}，{{item.title}}"
|
||
hover-class="cast-card-hover"
|
||
data-id="{{item.id}}"
|
||
bindtap="selectCharacter"
|
||
>
|
||
<view class="cast-image-wrap">
|
||
<view class="cast-portrait-window poses-{{item.poseCount}}">
|
||
<image
|
||
class="cast-image"
|
||
src="{{item.asset}}"
|
||
mode="aspectFit"
|
||
aria-label="{{item.name}}的全身像"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="cast-copy">
|
||
<view class="name-row">
|
||
<text class="cast-name">{{item.name}}</text>
|
||
<text class="eras">{{item.eras}}</text>
|
||
</view>
|
||
<text class="cast-role-title">{{item.title}}</text>
|
||
<text class="cast-relationship">{{item.relationship}}</text>
|
||
<text class="cast-hint">点开看故事</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="list-scroll-guide" aria-live="polite">
|
||
<text>{{castListEnded ? '人物都看见了' : '向下翻，还有更多人物'}}</text>
|
||
<text class="scroll-guide-mark" aria-hidden="true">{{castListEnded ? '✓' : '⌄'}}</text>
|
||
</view>
|
||
|
||
<view wx:if="{{selected}}" class="modal-backdrop" bindtap="closeCharacter">
|
||
<view
|
||
class="character-modal paper-panel"
|
||
catchtap="noop"
|
||
aria-role="dialog"
|
||
aria-label="{{selected.name}}的人物故事"
|
||
>
|
||
<button class="modal-close" bindtap="closeCharacter" aria-label="关闭人物故事">关闭</button>
|
||
<view class="modal-image-wrap">
|
||
<view class="modal-portrait-window poses-{{selected.poseCount}}">
|
||
<image
|
||
class="modal-image"
|
||
src="{{selected.asset}}"
|
||
mode="aspectFit"
|
||
aria-label="{{selected.name}}的全身像"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="modal-copy">
|
||
<view class="modal-head">
|
||
<view class="modal-heading">
|
||
<text class="eyebrow">{{selected.eras}} · {{selected.title}}</text>
|
||
<text class="modal-name">{{selected.name}}</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view
|
||
class="modal-story-scroll"
|
||
scroll-y
|
||
enhanced
|
||
bounces="{{false}}"
|
||
show-scrollbar="{{true}}"
|
||
aria-label="{{selected.name}}的人物故事正文，可上下滑动"
|
||
>
|
||
<view class="modal-story">
|
||
<text class="section-label">他和大家的关系</text>
|
||
<text class="modal-text">{{selected.relationship}}</text>
|
||
<text class="section-label">他在桂香里的故事</text>
|
||
<text class="modal-text">{{selected.readerRole}}</text>
|
||
<text class="section-label">衣着和模样</text>
|
||
<text class="modal-text">{{selected.readerVisual}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="modal-footer">
|
||
<button class="primary-button modal-done" bindtap="closeCharacter">看完了，返回人物谱</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|