Review changes batch 1 of 6
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 957 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
File diff suppressed because it is too large
Load Diff
@@ -1,26 +1,54 @@
|
||||
<!-- 页面编号:T-08;用途:成员隐私、离世纪念与无权限状态说明。 -->
|
||||
<template>
|
||||
<view class="member-status-page" :class="{
|
||||
<view
|
||||
class="member-status-page"
|
||||
:class="{
|
||||
'member-status--privacy': statusState === 'privacy',
|
||||
'member-status--deceased': statusState === 'deceased',
|
||||
'member-status--forbidden': statusState === 'forbidden'
|
||||
}">
|
||||
'member-status--forbidden': statusState === 'forbidden',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="member-status-page__header"><PageHeader title="成员状态" /></view>
|
||||
<view class="member-status-page__header"
|
||||
><PageHeader title="成员状态"
|
||||
/></view>
|
||||
<view class="status-tabs">
|
||||
<view v-for="item in tabs" :key="item.value" class="status-tab" @click="statusState = item.value">
|
||||
<image :src="statusState === item.value ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png' : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'" mode="aspectFit" />
|
||||
<text :class="{ 'status-tab__text--active': statusState === item.value }">{{ item.label }}</text>
|
||||
<view
|
||||
v-for="item in tabs"
|
||||
:key="item.value"
|
||||
class="status-tab"
|
||||
@click="statusState = item.value"
|
||||
>
|
||||
<image
|
||||
:src="
|
||||
statusState === item.value
|
||||
? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
|
||||
: '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
|
||||
"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text
|
||||
:class="{ 'status-tab__text--active': statusState === item.value }"
|
||||
>{{ item.label }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-card">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/tree/transparent/t01-state-panel.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="status-card__copy">
|
||||
<text>{{ activeStatus.eyebrow }}</text><text>{{ activeStatus.title }}</text><text>{{ activeStatus.copy }}</text>
|
||||
<text>{{ activeStatus.eyebrow }}</text
|
||||
><text>{{ activeStatus.title }}</text
|
||||
><text>{{ activeStatus.copy }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-guidance">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/tree/transparent/t01-state-panel.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view>
|
||||
<text>{{ activeStatus.guideTitle }}</text>
|
||||
<text v-for="line in activeStatus.guides" :key="line">{{ line }}</text>
|
||||
@@ -29,39 +57,169 @@
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import ModulePageBackground from '@/components/ModulePageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
const statusState = ref('privacy')
|
||||
const tabs = [{ value: 'privacy', label: '隐私' }, { value: 'deceased', label: '纪念' }, { value: 'forbidden', label: '无权限' }]
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
const statusState = ref("privacy");
|
||||
const tabs = [
|
||||
{ value: "privacy", label: "隐私" },
|
||||
{ value: "deceased", label: "纪念" },
|
||||
{ value: "forbidden", label: "无权限" },
|
||||
];
|
||||
const states = {
|
||||
privacy: { eyebrow: '隐私成员', title: '敏感资料只向授权成员展示', copy: '姓名可保留在世系位置,出生信息、联系方式和生平内容根据权限隐藏。', guideTitle: '隐私展示原则', guides: ['本人可以查看和维护自己的完整档案', '谱主可协助处理身份与世系关系', '普通成员只看到被允许公开的内容'] },
|
||||
deceased: { eyebrow: '离世成员', title: '在世系中保留温和的纪念状态', copy: '离世不会删除成员关系;档案可继续记录生平、影像和家人的追思内容。', guideTitle: '纪念资料范围', guides: ['生卒年月与世系关系继续保留', '生平内容由有权限家人共同维护', '敏感资料仍遵守原有隐私设置'] },
|
||||
forbidden: { eyebrow: '访问受限', title: '当前账号没有查看该档案的权限', copy: '为保护家人隐私,页面不会展示被隐藏的字段,也不会提供绕过权限的入口。', guideTitle: '如何申请查看', guides: ['先确认已经加入对应家谱', '联系谱主说明亲属关系和用途', '权限变更后重新进入成员档案'] }
|
||||
}
|
||||
const activeStatus = computed(() => states[statusState.value])
|
||||
onLoad((query) => { statusState.value = states[query.state] ? query.state : 'privacy' })
|
||||
privacy: {
|
||||
eyebrow: "隐私成员",
|
||||
title: "敏感资料只向授权成员展示",
|
||||
copy: "姓名可保留在世系位置,出生信息、联系方式和生平内容根据权限隐藏。",
|
||||
guideTitle: "隐私展示原则",
|
||||
guides: [
|
||||
"本人可以查看和维护自己的完整档案",
|
||||
"谱主可协助处理身份与世系关系",
|
||||
"普通成员只看到被允许公开的内容",
|
||||
],
|
||||
},
|
||||
deceased: {
|
||||
eyebrow: "离世成员",
|
||||
title: "在世系中保留温和的纪念状态",
|
||||
copy: "离世不会删除成员关系;档案可继续记录生平、影像和家人的追思内容。",
|
||||
guideTitle: "纪念资料范围",
|
||||
guides: [
|
||||
"生卒年月与世系关系继续保留",
|
||||
"生平内容由有权限家人共同维护",
|
||||
"敏感资料仍遵守原有隐私设置",
|
||||
],
|
||||
},
|
||||
forbidden: {
|
||||
eyebrow: "访问受限",
|
||||
title: "当前账号没有查看该档案的权限",
|
||||
copy: "为保护家人隐私,页面不会展示被隐藏的字段,也不会提供绕过权限的入口。",
|
||||
guideTitle: "如何申请查看",
|
||||
guides: [
|
||||
"先确认已经加入对应家谱",
|
||||
"联系谱主说明亲属关系和用途",
|
||||
"权限变更后重新进入成员档案",
|
||||
],
|
||||
},
|
||||
};
|
||||
const activeStatus = computed(() => states[statusState.value]);
|
||||
onLoad((query) => {
|
||||
statusState.value = states[query.state] ? query.state : "privacy";
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.member-status-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.member-status-page__header, .status-tabs, .status-card, .status-guidance { position: relative; z-index: 2; }
|
||||
.status-tabs { display: flex; gap: 10rpx; padding: 22rpx 24rpx 0; }
|
||||
.status-tab { position: relative; width: calc(33.333% - 7rpx); height: 62rpx; }
|
||||
.status-tab image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.status-tab text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 21rpx; font-weight: 700; }
|
||||
.status-tab .status-tab__text--active { color: #fff9ed; }
|
||||
.status-card { width: calc(100% - 48rpx); height: calc((100vw - 24px) * .34286); min-height: 224rpx; margin: 24rpx auto 0; }
|
||||
.status-card > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.status-card__copy { position: absolute; inset: 18% 10%; z-index: 1; text-align: center; }
|
||||
.status-card__copy text { display: block; }
|
||||
.status-card__copy text:first-child { color: $brand-red; font-size: 20rpx; letter-spacing: 3rpx; }
|
||||
.status-card__copy text:nth-child(2) { margin-top: 7rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 29rpx; font-weight: 700; }
|
||||
.status-card__copy text:last-child { margin-top: 10rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.5; }
|
||||
.status-guidance { width: calc(100% - 48rpx); height: min(400px, calc((100vw - 24px) * .9)); margin: 18rpx auto 0; }
|
||||
.status-guidance > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.status-guidance > view { position: absolute; inset: 12% 11%; z-index: 1; }
|
||||
.status-guidance text { display: block; color: $ink-muted; font-size: 21rpx; line-height: 1.65; }
|
||||
.status-guidance text:first-child { margin-bottom: 18rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
|
||||
.status-guidance text:not(:first-child) { margin-top: 12rpx; }
|
||||
.member-status-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.member-status-page__header,
|
||||
.status-tabs,
|
||||
.status-card,
|
||||
.status-guidance {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
padding: 22rpx 24rpx 0;
|
||||
}
|
||||
.status-tab {
|
||||
position: relative;
|
||||
width: calc(33.333% - 7rpx);
|
||||
height: 62rpx;
|
||||
}
|
||||
.status-tab image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.status-tab text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-tab .status-tab__text--active {
|
||||
color: #fff9ed;
|
||||
}
|
||||
.status-card {
|
||||
width: calc(100% - 48rpx);
|
||||
height: calc((100vw - 24px) * 0.34286);
|
||||
min-height: 224rpx;
|
||||
margin: 24rpx auto 0;
|
||||
}
|
||||
.status-card > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.status-card__copy {
|
||||
position: absolute;
|
||||
inset: 18% 10%;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.status-card__copy text {
|
||||
display: block;
|
||||
}
|
||||
.status-card__copy text:first-child {
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.status-card__copy text:nth-child(2) {
|
||||
margin-top: 7rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-card__copy text:last-child {
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.status-guidance {
|
||||
width: calc(100% - 48rpx);
|
||||
height: min(400px, calc((100vw - 24px) * 0.9));
|
||||
margin: 18rpx auto 0;
|
||||
}
|
||||
.status-guidance > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.status-guidance > view {
|
||||
position: absolute;
|
||||
inset: 12% 11%;
|
||||
z-index: 1;
|
||||
}
|
||||
.status-guidance text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.status-guidance text:first-child {
|
||||
margin-bottom: 18rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-guidance text:not(:first-child) {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Reference in New Issue
Block a user