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-29 18:15:59 +08:00
parent 6fbcf21024
commit 8c2355a52c
59 changed files with 7995 additions and 1118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/genealogy/g05-genealogy-overview.vue
+238 -80
View File
@@ -18,18 +18,32 @@
<view
class="overview-surface"
:class="{ 'overview-surface--state': overviewState !== 'ready' }"
:class="{
'overview-surface--state': overviewState !== 'ready',
'overview-surface--member':
overviewState === 'ready' && viewMode === 'member',
}"
>
<template
v-if="overviewState === 'ready' && genealogy && viewMode === 'member'"
>
<view class="overview-ready">
<view class="overview-hero">
<text class="overview-hero__kicker"
>{{ genealogy.hall || "堂号待补" }} ·
{{ genealogy.location || "所在地待补" }}</text
>
<text class="overview-hero__title">{{ genealogy.name }}</text>
<view class="overview-hero__identity">
<view class="overview-hero__emblem">
<image
src="/static/assets/modules/genealogy/transparent/shortcut-tree.png"
mode="aspectFit"
/>
</view>
<view class="overview-hero__headings">
<text class="overview-hero__title">{{ genealogy.name }}</text>
<text class="overview-hero__kicker"
>{{ genealogy.hall || "堂号待补" }} ·
{{ genealogy.location || "所在地待补" }}</text
>
</view>
</view>
<text class="overview-hero__motto">{{
genealogy.intro || "简介待补充"
}}</text>
@@ -41,53 +55,97 @@
<text>{{
getGenealogyAccessPresetLabel(genealogy.accessPreset)
}}</text>
</view>
<view class="overview-hero__stats">
<text v-if="genealogy.joinTime"
>加入于 {{ formatGenealogyTime(genealogy.joinTime) }}</text
>
</view>
</view>
<view
class="overview-actions"
:class="{ 'overview-actions--member': accessRole === 'member' }"
>
<view class="overview-actions">
<view class="overview-action overview-action--tree" @click="toTree">
<text class="overview-action__title">世系树</text
><text>查看家脉关系</text>
</view>
<view
class="overview-action overview-action--poem"
@click="toGenerationPoems"
>
<text class="overview-action__title">字辈谱</text
><text>传承行辈次序</text>
<view class="overview-action__icon overview-action__icon--primary">
<image
src="/static/assets/modules/genealogy/transparent/shortcut-tree.png"
mode="aspectFit"
/>
</view>
<view class="overview-action__copy">
<text class="overview-action__title">世系树</text>
<text>查看家脉关系</text>
</view>
<image
class="overview-action__chevron"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<view
v-if="accessRole === 'owner'"
class="overview-action overview-action--review"
@click="toApplications"
>
<text class="overview-action__title">入谱审核</text
><text>处理加入申请</text>
<image
class="overview-action__icon"
src="/static/assets/modules/genealogy/transparent/shortcut-application.png"
mode="aspectFit"
/>
<view class="overview-action__copy">
<text class="overview-action__title">入谱审核</text>
<text>处理加入申请</text>
</view>
<image
class="overview-action__chevron"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<view
class="overview-action overview-action--poem"
@click="toGenerationPoems"
>
<image
class="overview-action__icon"
src="/static/assets/foundation/transparent/tab-genealogy.png"
mode="aspectFit"
/>
<view class="overview-action__copy">
<text class="overview-action__title">字辈谱</text>
<text>传承行辈次序</text>
</view>
<image
class="overview-action__chevron"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<view
v-if="accessRole === 'owner'"
class="overview-action overview-action--settings"
@click="toSettings"
>
<text class="overview-action__title">家谱设置</text
><text>维护公开范围与基础资料</text>
<image
class="overview-action__icon"
src="/static/assets/modules/genealogy/transparent/g05-settings-gear.png"
mode="aspectFit"
/>
<view class="overview-action__copy">
<text class="overview-action__title">家谱设置</text>
<text>维护公开范围与基础资料</text>
</view>
<image
class="overview-action__chevron"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<template v-else>
<view class="overview-summary">
<text class="overview-action__title">成员身份</text
><text>已加入 · 普通成员</text>
<text class="overview-action__title">成员身份</text>
<text>已加入 · 普通成员</text>
</view>
<view class="overview-summary">
<text class="overview-action__title">访问范围</text
><text>{{
<text class="overview-action__title">访问范围</text>
<text>{{
getGenealogyAccessPresetLabel(genealogy.accessPreset)
}}</text>
</view>
@@ -95,8 +153,14 @@
</view>
<view class="overview-family" @click="toFamily">
<text>家族近况</text><text>进入家族圈查看动态</text
><text>查看</text>
<view>
<text>家族近况</text>
<text>进入家族圈查看动态</text>
</view>
<image
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<view class="overview-note">
<text class="overview-note__title">成员资料按家谱访问规则保护</text>
@@ -388,6 +452,12 @@ const applyToJoin = () => {
min-height: min(483px, calc(100vw * 1.3422));
flex: 0 0 auto;
}
.overview-surface--member {
min-height: 100%;
border: 0;
border-image: none;
background: #fbf4e7;
}
.overview-surface--state {
display: flex;
height: calc(100vh - 112rpx);
@@ -398,35 +468,64 @@ const applyToJoin = () => {
}
.overview-ready {
display: flex;
min-height: min(540px, calc(100vw * 1.5));
flex-direction: column;
gap: 34rpx;
padding: 10rpx 0 42rpx;
min-height: 0;
padding: 0 0 calc(34rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.overview-hero {
margin: 0 8%;
display: flex;
min-height: 286rpx;
flex-direction: column;
justify-content: flex-end;
margin: 0;
padding: 34rpx 42rpx 28rpx;
background: #10293b
url("/static/assets/modules/genealogy/opaque/g05-overview-surface.png")
center top / auto 1220rpx no-repeat;
color: #fff8ec;
box-sizing: border-box;
}
.overview-hero__identity {
display: grid;
grid-template-columns: 108rpx minmax(0, 1fr);
align-items: center;
gap: 22rpx;
}
.overview-hero__emblem {
display: grid;
width: 108rpx;
height: 108rpx;
place-items: center;
border: 2rpx solid rgba(225, 190, 111, 0.86);
border-radius: 50%;
background: rgba(16, 41, 59, 0.56);
box-sizing: border-box;
}
.overview-hero__emblem image {
width: 64rpx;
height: 64rpx;
}
.overview-hero__kicker {
display: block;
color: #dec483;
font-size: 22rpx;
letter-spacing: 3rpx;
font-size: 20rpx;
line-height: 1.5;
}
.overview-hero__title {
display: block;
margin-top: 12rpx;
margin-bottom: 6rpx;
font-family: "STKaiti", "KaiTi", serif;
font-size: 46rpx;
font-size: 42rpx;
font-weight: 700;
letter-spacing: 4rpx;
letter-spacing: 2rpx;
}
.overview-hero__motto {
display: block;
margin-top: 6rpx;
height: 66rpx;
margin-top: 22rpx;
color: #e9dcc1;
font-size: 23rpx;
font-size: 21rpx;
line-height: 1.55;
overflow: hidden;
display: -webkit-box;
@@ -434,79 +533,138 @@ const applyToJoin = () => {
-webkit-line-clamp: 2;
}
.overview-hero__stats {
display: inline-flex;
gap: 18rpx;
margin-top: 12rpx;
display: flex;
flex-wrap: wrap;
gap: 8rpx 0;
margin-top: 18rpx;
color: #dbc990;
font-size: 22rpx;
transform: translateY(-18rpx);
font-size: 19rpx;
line-height: 1.4;
}
.overview-hero__stats + .overview-hero__stats {
margin-left: 18rpx;
.overview-hero__stats text {
display: flex;
align-items: center;
}
.overview-hero__stats text + text::before {
width: 1rpx;
height: 20rpx;
margin: 0 14rpx;
background: rgba(220, 201, 144, 0.55);
content: "";
}
.overview-actions {
display: grid;
min-height: 386rpx;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 3.4% 3%;
margin: 0 7.2%;
}
.overview-actions--member {
min-height: 386rpx;
display: flex;
flex-direction: column;
padding: 28rpx 42rpx 0;
background: #fbf4e7;
box-sizing: border-box;
}
.overview-action,
.overview-summary {
display: flex;
flex-direction: column;
justify-content: center;
display: grid;
grid-template-columns: 72rpx minmax(0, 1fr) 28rpx;
min-height: 126rpx;
align-items: center;
gap: 24rpx;
min-width: 0;
padding: 24rpx 22rpx;
padding: 18rpx 0;
border-top: 1rpx solid rgba(152, 119, 72, 0.28);
box-sizing: border-box;
color: $ink-muted;
font-size: 22rpx;
font-size: 21rpx;
line-height: 1.5;
}
.overview-action--tree {
min-height: 176rpx;
grid-template-columns: 128rpx minmax(0, 1fr) 28rpx;
gap: 28rpx;
border-top: 0;
}
.overview-action__icon {
width: 64rpx;
height: 64rpx;
justify-self: center;
object-fit: contain;
}
.overview-action__icon--primary {
display: grid;
width: 118rpx;
height: 118rpx;
place-items: center;
border: 2rpx solid rgba(160, 37, 30, 0.88);
border-radius: 50%;
background: #aa3129;
box-sizing: border-box;
}
.overview-action__icon--primary image {
width: 68rpx;
height: 68rpx;
filter: brightness(0) invert(1);
}
.overview-action__copy {
min-width: 0;
}
.overview-action__copy text,
.overview-summary text {
display: block;
}
.overview-action__chevron,
.overview-family image {
width: 26rpx;
height: 26rpx;
opacity: 0.68;
}
.overview-action__title {
margin-bottom: 9rpx;
margin-bottom: 5rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 30rpx;
font-weight: 700;
}
.overview-action--tree .overview-action__title {
font-size: 40rpx;
}
.overview-summary {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.overview-family {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-columns: minmax(0, 1fr) 26rpx;
align-items: center;
align-self: start;
gap: 16rpx;
margin: 0 7.5%;
gap: 20rpx;
margin: 14rpx 42rpx 0;
padding: 20rpx 0;
border-top: 1rpx solid rgba(152, 119, 72, 0.28);
color: $ink-muted;
font-size: 22rpx;
font-size: 20rpx;
line-height: 1.5;
}
.overview-family text {
display: block;
}
.overview-family text:first-child {
margin-bottom: 3rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 28rpx;
font-size: 27rpx;
font-weight: 700;
}
.overview-family text:last-child {
color: $brand-red;
}
.overview-note {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 8.5%;
margin: 18rpx 42rpx 0;
padding: 18rpx 0 0;
border-top: 1rpx solid rgba(152, 119, 72, 0.28);
color: $ink-muted;
font-size: 22rpx;
line-height: 1.6;
margin-top: 100rpx;
font-size: 19rpx;
line-height: 1.55;
}
.overview-note__title {
margin-bottom: 8rpx;
margin-bottom: 5rpx;
color: $brand-red;
font-family: "STKaiti", "KaiTi", serif;
font-size: 28rpx;
font-size: 24rpx;
font-weight: 700;
}
.overview-state {