rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/records/r02-person-detail.vue
+207 -47
View File
@@ -1,50 +1,84 @@
<!-- 页面编号：R-02；用途：人物录详情与不写库的人物资料预览。 -->
<template>
<view class="person-detail-page" :class="`person-detail-state--${personState}`">
<view
class="person-detail-page"
:class="`person-detail-state--${personState}`"
>
<ModulePageBackground module="records" />
<view class="person-detail-header">
<PageHeader
title="人物详情"
custom-back
@back="requestBack"
/>
<PageHeader title="人物详情" custom-back @back="requestBack" />
</view>
<view v-if="personState === 'loading'" class="person-detail-loading">
<AppLoading text="正在读取人物档案" description="请稍候，正在整理人物资料。" />
<AppLoading
text="正在读取人物档案"
description="请稍候，正在整理人物资料。"
/>
</view>
<view v-else class="person-detail-content">
<template v-if="personState === 'detail'">
<view class="person-identity-card">
<view class="person-identity-card__copy">
<text class="person-identity-card__name">{{ person.name || "待填写姓名" }}</text>
<text class="person-identity-card__meta">{{ person.relation || "人物预览" }} · 第 {{ person.generation || "—" }} 世</text>
<text class="person-identity-card__name">{{
person.name || "待填写姓名"
}}</text>
<text class="person-identity-card__meta"
>{{ person.relation || "人物预览" }} · 第
{{ person.generation || "—" }} 世</text
>
<text class="person-identity-card__hint">人物录档案</text>
</view>
</view>
</template>
<template v-if="personState === 'detail'">
<view v-for="item in detailSections" :key="item.title" class="person-archive-card">
<view><text>{{ item.title }}</text><text>{{ item.copy || "未填写" }}</text></view>
<view
v-for="item in detailSections"
:key="item.title"
class="person-archive-card"
>
<view
><text>{{ item.title }}</text
><text>{{ item.copy || "未填写" }}</text></view
>
</view>
<view class="person-related-actions">
<AppButton type="secondary" block label="成长日志" @click="toGrowthJournal" />
<view class="person-related-unavailable"><text>人生大事</text><text>暂未开放</text></view>
<AppButton
type="secondary"
block
label="成长日志"
@click="toGrowthJournal"
/>
<view class="person-related-unavailable"
><text>人生大事</text><text>暂未开放</text></view
>
</view>
<view class="person-edit-action" @click="toMemberProfile"><AppButton block label="查看成员档案" /></view>
<view class="person-edit-action" @click="toMemberProfile"
><AppButton block label="查看成员档案"
/></view>
</template>
<view v-else class="person-state-card">
<view>
<text>{{ personState === 'expired' ? '人物档案已失效' : '人物档案暂不可用' }}</text>
<text>{{ personState === 'expired' ? '这份人物资料不存在或不属于当前家谱。' : '请返回人物录重新选择，页面不会回退到其他人物。' }}</text>
<text>{{
personState === "expired" ? "人物档案已失效" : "人物档案暂不可用"
}}</text>
<text>{{
personState === "expired"
? "这份人物资料不存在或不属于当前家谱。"
: "请返回人物录重新选择，页面不会回退到其他人物。"
}}</text>
</view>
<view class="person-state-action"><AppButton type="secondary" block label="返回人物录" @click="returnToPeople" /></view>
<view class="person-state-action"
><AppButton
type="secondary"
block
label="返回人物录"
@click="returnToPeople"
/></view>
</view>
</view>
</view>
</template>
@@ -55,7 +89,11 @@ import AppButton from "@/components/AppButton.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
import {
appApi,
createRequestController,
isRequestCancelled,
} from "@/utils/api.js";
import {
goBack,
handleBackPress,
@@ -146,7 +184,12 @@ const loadPerson = async () => {
onLoad((query) => {
genealogyId.value = String(query.genealogyId || "");
personId.value = String(query.personId || "");
if (query.mode !== "view" || !genealogyId.value || !personId.value || query.state === "error") {
if (
query.mode !== "view" ||
!genealogyId.value ||
!personId.value ||
query.state === "error"
) {
personState.value = "error";
return;
}
@@ -163,31 +206,148 @@ onUnload(() => {
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.person-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.person-detail-header,.person-detail-loading,.person-detail-content { z-index: 1; }
.person-detail-loading { min-height: calc(100vh - 100rpx); }
.person-detail-content { padding: 18rpx 24rpx 72rpx; }
.person-identity-card { @include adaptive.adaptive-records-person; display: flex; min-height: 190rpx; padding: 30rpx 10%; }
.person-identity-card__copy { display: flex; flex: 1; flex-direction: column; justify-content: center; }
.person-identity-card__copy text { display: block; }
.person-identity-card__name { color: $ink; font-family: STKaiti,KaiTi,serif; font-size: 38rpx; font-weight: 700; }
.person-identity-card__meta { margin-top: 8rpx; color: $ink-muted; font-size: 25rpx; font-weight: 600; }
.person-identity-card__hint { margin-top: 8rpx; color: #806a51; font-size: 21rpx; }
.person-archive-card { min-height: 154rpx; margin-top: 14rpx; padding: 32rpx 42rpx; box-sizing: border-box; }
.person-archive-card,.person-state-card { @include adaptive.adaptive-records-content; }
.person-archive-card text { display: block; }
.person-archive-card text:first-child { color: $brand-red; font-size: 24rpx; font-weight: 700; }
.person-archive-card text:last-child { margin-top: 11rpx; color: $ink; font-size: 24rpx; line-height: 1.55; }
.person-edit-action { margin-top: 20rpx; }
.person-related-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14rpx; margin-top: 18rpx; }
.person-related-unavailable { display:flex; min-height:88rpx; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; border:1rpx solid rgba(128,89,49,.24); border-radius:8rpx; background:rgba(255,252,245,.38); color:$ink-muted; }
.person-related-unavailable text:first-child { font-size:25rpx; font-weight:700; }
.person-related-unavailable text:last-child { margin-top:4rpx; font-size:20rpx; }
.person-state-card { display: flex; flex-direction: column; min-height: 300rpx; margin-top: 26rpx; padding: 72rpx 54rpx 42rpx; box-sizing: border-box; text-align: center; }
.person-state-card text { display: block; }
.person-state-card text:first-child { color: $ink; font-family: STKaiti,KaiTi,serif; font-size: 34rpx; font-weight: 700; }
.person-state-card text:last-child { margin-top: 16rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.6; }
.person-state-action { margin: 24rpx 48rpx 0; }
@media (min-width: 400px) { .person-detail-content { padding-right: 32rpx; padding-left: 32rpx; } }
@media (max-width: 340px) { .person-detail-content { padding-right: 18rpx; padding-left: 18rpx; } .person-identity-card__name { font-size: 35rpx; } }
.person-detail-page {
display: flex;
min-height: 100vh;
flex-direction: column;
background: $paper;
}
.person-detail-header,
.person-detail-loading,
.person-detail-content {
z-index: 1;
}
.person-detail-loading {
min-height: calc(100vh - 100rpx);
}
.person-detail-content {
padding: 18rpx 24rpx 72rpx;
}
.person-identity-card {
@include adaptive.adaptive-records-person;
display: flex;
min-height: 190rpx;
padding: 30rpx 10%;
}
.person-identity-card__copy {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
}
.person-identity-card__copy text {
display: block;
}
.person-identity-card__name {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 38rpx;
font-weight: 700;
}
.person-identity-card__meta {
margin-top: 8rpx;
color: $ink-muted;
font-size: 25rpx;
font-weight: 600;
}
.person-identity-card__hint {
margin-top: 8rpx;
color: #806a51;
font-size: 21rpx;
}
.person-archive-card {
min-height: 154rpx;
margin-top: 14rpx;
padding: 32rpx 42rpx;
box-sizing: border-box;
}
.person-archive-card,
.person-state-card {
@include adaptive.adaptive-records-content;
}
.person-archive-card text {
display: block;
}
.person-archive-card text:first-child {
color: $brand-red;
font-size: 24rpx;
font-weight: 700;
}
.person-archive-card text:last-child {
margin-top: 11rpx;
color: $ink;
font-size: 24rpx;
line-height: 1.55;
}
.person-edit-action {
margin-top: 20rpx;
}
.person-related-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14rpx;
margin-top: 18rpx;
}
.person-related-unavailable {
display: flex;
min-height: 88rpx;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1rpx solid rgba(128, 89, 49, 0.24);
border-radius: 8rpx;
background: rgba(255, 252, 245, 0.38);
color: $ink-muted;
}
.person-related-unavailable text:first-child {
font-size: 25rpx;
font-weight: 700;
}
.person-related-unavailable text:last-child {
margin-top: 4rpx;
font-size: 20rpx;
}
.person-state-card {
display: flex;
flex-direction: column;
min-height: 300rpx;
margin-top: 26rpx;
padding: 72rpx 54rpx 42rpx;
box-sizing: border-box;
text-align: center;
}
.person-state-card text {
display: block;
}
.person-state-card text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 34rpx;
font-weight: 700;
}
.person-state-card text:last-child {
margin-top: 16rpx;
color: $ink-muted;
font-size: 24rpx;
line-height: 1.6;
}
.person-state-action {
margin: 24rpx 48rpx 0;
}
@media (min-width: 400px) {
.person-detail-content {
padding-right: 32rpx;
padding-left: 32rpx;
}
}
@media (max-width: 340px) {
.person-detail-content {
padding-right: 18rpx;
padding-left: 18rpx;
}
.person-identity-card__name {
font-size: 35rpx;
}
}
</style>