修改完成
This commit is contained in:
@@ -20,12 +20,6 @@
|
||||
class="overview-surface"
|
||||
:class="{ 'overview-surface--state': overviewState !== 'ready' }"
|
||||
>
|
||||
<image
|
||||
class="overview-surface__skin"
|
||||
src="/static/assets/modules/genealogy/opaque/g05-overview-surface.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
|
||||
<template
|
||||
v-if="overviewState === 'ready' && genealogy && viewMode === 'member'"
|
||||
>
|
||||
@@ -44,6 +38,10 @@
|
||||
<text>已激活 {{ genealogy.activeCount || 0 }} 人</text>
|
||||
<text>{{ genealogy.visibility || "仅成员可见" }}</text>
|
||||
</view>
|
||||
<view class="overview-hero__stats">
|
||||
<text>始祖 {{ genealogy.ancestorName }}</text>
|
||||
<text>更新于 {{ genealogy.updatedAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
@@ -62,10 +60,6 @@
|
||||
<text class="overview-action__title">录入族人</text
|
||||
><text>从首代开始完善</text>
|
||||
</view>
|
||||
<view v-else class="overview-action-lock">
|
||||
<text class="overview-action__title">录入族人</text
|
||||
><text>仅管理员可用</text>
|
||||
</view>
|
||||
<view
|
||||
class="overview-action overview-action--poem"
|
||||
@click="toGenerationPoems"
|
||||
@@ -81,10 +75,6 @@
|
||||
<text class="overview-action__title">入谱审核</text
|
||||
><text>处理加入申请</text>
|
||||
</view>
|
||||
<view v-else class="overview-action-lock">
|
||||
<text class="overview-action__title">入谱审核</text
|
||||
><text>仅管理员可用</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="overview-family" @click="toFamily">
|
||||
@@ -130,10 +120,6 @@
|
||||
<text>{{ genealogy.publicDescription }}</text>
|
||||
</view>
|
||||
<view class="overview-public__action" @click="applyToJoin">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>申请加入这部家谱</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -142,11 +128,6 @@
|
||||
v-else-if="overviewState === 'loading'"
|
||||
class="overview-state overview-state--loading"
|
||||
>
|
||||
<image
|
||||
class="overview-state__frame"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<AppLoading
|
||||
text="正在展开家谱"
|
||||
description="请稍候，正在读取家谱概览。"
|
||||
@@ -162,11 +143,6 @@
|
||||
'overview-state--no-permission': overviewState === 'no-permission',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="overview-state__frame"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="overview-state__content">
|
||||
<image
|
||||
class="overview-state__seal"
|
||||
@@ -181,10 +157,6 @@
|
||||
overviewState === 'error' ? reloadOverview() : toGenealogies()
|
||||
"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{
|
||||
overviewState === "error" ? "重新查看" : "返回我的家谱"
|
||||
}}</text>
|
||||
@@ -223,6 +195,28 @@ const overviewFixture = {
|
||||
memberCount: 428,
|
||||
activeCount: 316,
|
||||
visibility: "仅成员可见",
|
||||
ancestorName: "汤文远",
|
||||
updatedAt: "2026-07-12",
|
||||
};
|
||||
const overviewFixtures = {
|
||||
1001: {
|
||||
...overviewFixture,
|
||||
id: "1001",
|
||||
name: "汤氏家谱",
|
||||
location: "河南·洛阳",
|
||||
memberCount: 158,
|
||||
activeCount: 108,
|
||||
},
|
||||
1002: {
|
||||
...overviewFixture,
|
||||
id: "1002",
|
||||
name: "汤氏宗谱",
|
||||
hall: "承志堂",
|
||||
location: "山东·济宁",
|
||||
memberCount: 286,
|
||||
activeCount: 215,
|
||||
},
|
||||
2001: overviewFixture,
|
||||
};
|
||||
|
||||
const stateTitle = computed(
|
||||
@@ -268,7 +262,13 @@ const loadGenealogy = (query = {}) => {
|
||||
}
|
||||
if (query.state === "loading") return;
|
||||
|
||||
genealogy.value = { ...overviewFixture, id: genealogyId.value };
|
||||
genealogy.value = {
|
||||
...(overviewFixtures[genealogyId.value] || overviewFixture),
|
||||
id: genealogyId.value,
|
||||
};
|
||||
if (query.genealogyName) {
|
||||
genealogy.value.name = decodeURIComponent(query.genealogyName);
|
||||
}
|
||||
overviewState.value = "ready";
|
||||
};
|
||||
|
||||
@@ -305,43 +305,40 @@ const applyToJoin = () =>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.overview-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.overview-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.overview-surface {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: min(483px, calc(100vw * 1.3422));
|
||||
}
|
||||
.overview-surface__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: min(483px, calc(100vw * 1.3422));
|
||||
flex: 0 0 auto;
|
||||
background: url("/static/assets/modules/genealogy/opaque/g05-overview-surface.png")
|
||||
center / 100% 100% no-repeat;
|
||||
}
|
||||
.overview-surface--state {
|
||||
display: flex;
|
||||
height: calc(100vh - 112rpx);
|
||||
min-height: 1040rpx;
|
||||
}
|
||||
.overview-surface--state .overview-surface__skin {
|
||||
display: none;
|
||||
padding: 28rpx;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
}
|
||||
.overview-ready {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
min-height: min(483px, calc(100vw * 1.3422));
|
||||
flex-direction: column;
|
||||
gap: 34rpx;
|
||||
padding: 58rpx 0 42rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.overview-hero {
|
||||
position: absolute;
|
||||
top: 6.5%;
|
||||
right: 8%;
|
||||
left: 8%;
|
||||
margin: 0 8%;
|
||||
color: #fff8ec;
|
||||
}
|
||||
.overview-hero__kicker {
|
||||
@@ -372,19 +369,15 @@ const applyToJoin = () =>
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.overview-actions {
|
||||
position: absolute;
|
||||
top: 29.2%;
|
||||
right: 7.2%;
|
||||
left: 7.2%;
|
||||
display: grid;
|
||||
min-height: 386rpx;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 3.4% 3%;
|
||||
height: 36.2%;
|
||||
margin: 0 7.2%;
|
||||
}
|
||||
.overview-actions--member {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
height: 36.2%;
|
||||
min-height: 386rpx;
|
||||
}
|
||||
.overview-action,
|
||||
.overview-action-lock {
|
||||
@@ -392,7 +385,7 @@ const applyToJoin = () =>
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
padding: 0 22rpx;
|
||||
padding: 24rpx 22rpx;
|
||||
box-sizing: border-box;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
@@ -408,14 +401,12 @@ const applyToJoin = () =>
|
||||
font-weight: 700;
|
||||
}
|
||||
.overview-family {
|
||||
position: absolute;
|
||||
top: 70.2%;
|
||||
right: 7.5%;
|
||||
left: 7.5%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
gap: 16rpx;
|
||||
margin: 0 7.5%;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
@@ -429,17 +420,14 @@ const applyToJoin = () =>
|
||||
color: $brand-red;
|
||||
}
|
||||
.overview-note {
|
||||
position: absolute;
|
||||
top: 80.5%;
|
||||
right: 8.5%;
|
||||
left: 8.5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 15%;
|
||||
margin: 0 8.5%;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
.overview-note__title {
|
||||
margin-bottom: 8rpx;
|
||||
@@ -449,25 +437,16 @@ const applyToJoin = () =>
|
||||
font-weight: 700;
|
||||
}
|
||||
.overview-state {
|
||||
position: absolute;
|
||||
top: 28rpx;
|
||||
right: 28rpx;
|
||||
bottom: 28rpx;
|
||||
left: 28rpx;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png")
|
||||
center / 100% 100% no-repeat;
|
||||
text-align: center;
|
||||
}
|
||||
.overview-state__frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overview-state__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@@ -501,37 +480,31 @@ const applyToJoin = () =>
|
||||
line-height: 1.7;
|
||||
}
|
||||
.overview-state-panel__action {
|
||||
position: relative;
|
||||
width: 560rpx;
|
||||
height: 124rpx;
|
||||
margin-top: 34rpx;
|
||||
}
|
||||
.overview-state-panel__action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.overview-state-panel__action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 560rpx;
|
||||
min-height: 124rpx;
|
||||
margin-top: 34rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.overview-state-panel__action text {
|
||||
z-index: 1;
|
||||
color: #fff9ed;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.overview-public {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
min-height: min(483px, calc(100vw * 1.3422));
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 58rpx 0 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.overview-public__hero {
|
||||
position: absolute;
|
||||
top: 6.5%;
|
||||
right: 8%;
|
||||
left: 8%;
|
||||
margin: 0 8%;
|
||||
color: #fff8ec;
|
||||
}
|
||||
.overview-public__eyebrow {
|
||||
@@ -555,24 +528,19 @@ const applyToJoin = () =>
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.overview-public__details {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
right: 9%;
|
||||
left: 9%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18rpx 28rpx;
|
||||
min-height: 240rpx;
|
||||
margin: 126rpx 9% 0;
|
||||
}
|
||||
.overview-public__details > view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.overview-public__details > view:nth-child(5) {
|
||||
position: absolute;
|
||||
top: 250rpx;
|
||||
right: 0;
|
||||
left: 0;
|
||||
grid-column: 1 / -1;
|
||||
align-self: start;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -596,11 +564,8 @@ const applyToJoin = () =>
|
||||
font-size: 27rpx;
|
||||
}
|
||||
.overview-public__notice {
|
||||
position: absolute;
|
||||
top: 78%;
|
||||
right: 9%;
|
||||
left: 9%;
|
||||
display: flex;
|
||||
margin: 54rpx 9% 0;
|
||||
color: $ink-muted;
|
||||
font-size: 19rpx;
|
||||
line-height: 26rpx;
|
||||
@@ -612,24 +577,15 @@ const applyToJoin = () =>
|
||||
font-weight: 700;
|
||||
}
|
||||
.overview-public__action {
|
||||
position: absolute;
|
||||
right: 9%;
|
||||
bottom: 2%;
|
||||
left: 9%;
|
||||
display: flex;
|
||||
height: 82rpx;
|
||||
min-height: 82rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.overview-public__action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 204rpx 9% 0;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.overview-public__action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fff9ed;
|
||||
font-size: 27rpx;
|
||||
@@ -637,9 +593,6 @@ const applyToJoin = () =>
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.overview-hero {
|
||||
top: 7%;
|
||||
}
|
||||
.overview-action {
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user