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

feat: restructure G01 information hierarchy

Browse Source
This commit is contained in:
rain
2026-07-13 09:54:39 +08:00
parent ab8f9384c3
commit 79c195cb0d
2 changed files with 88 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/GenealogyCard.vue
+18 -16
View File
@@ -8,8 +8,14 @@
</view> </view>
</view> </view>
<view class="card-copy"> <view class="card-main">
<text class="card-name">{{ genealogy.name }}</text> <view class="card-title-row">
<text class="card-name">{{ genealogy.name }}</text>
<view class="card-side">
<text class="card-role">{{ role }}</text>
<image class="card-chevron" src="/static/assets/icons/common/chevron-right-v2.png" mode="aspectFit" />
</view>
</view>
<view class="card-detail-row"> <view class="card-detail-row">
<view class="card-metas"> <view class="card-metas">
<view class="card-meta-item"> <view class="card-meta-item">
@@ -26,11 +32,6 @@
</view> </view>
</view> </view>
</view> </view>
<view class="card-side">
<text class="card-role">{{ role }}</text>
<image class="card-chevron" src="/static/assets/icons/common/chevron-right-v2.png" mode="aspectFit" />
</view>
</view> </view>
</template> </template>
@@ -47,9 +48,9 @@ defineEmits(['select'])
.genealogy-card { .genealogy-card {
position: relative; position: relative;
display: flex; display: flex;
min-height: 160rpx; min-height: 156rpx;
align-items: center; align-items: center;
padding: 20rpx 24rpx; padding: 18rpx 24rpx;
box-sizing: border-box; box-sizing: border-box;
background: transparent; background: transparent;
} }
@@ -72,8 +73,8 @@ defineEmits(['select'])
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
width: 76rpx; width: 72rpx;
height: 118rpx; height: 112rpx;
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -87,7 +88,7 @@ defineEmits(['select'])
.genealogy-card:not(.genealogy-card--current) .surname-seal-frame { opacity: .32; } .genealogy-card:not(.genealogy-card--current) .surname-seal-frame { opacity: .32; }
.genealogy-card:not(.genealogy-card--current) .seal-title { color: $ink-muted; } .genealogy-card:not(.genealogy-card--current) .seal-title { color: $ink-muted; }
.card-copy { .card-main {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
@@ -103,6 +104,7 @@ defineEmits(['select'])
white-space: nowrap; white-space: nowrap;
} }
.card-title-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; }
.card-name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 37rpx; font-weight: 700; } .card-name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 37rpx; font-weight: 700; }
.card-detail-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; margin-top: 12rpx; } .card-detail-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; margin-top: 12rpx; }
.card-metas { display: flex; min-width: 0; align-items: center; } .card-metas { display: flex; min-width: 0; align-items: center; }
@@ -115,12 +117,12 @@ defineEmits(['select'])
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
width: 124rpx; min-width: 0;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
margin-left: 10rpx; margin-left: 20rpx;
} }
.card-role { color: $ink-muted; font-size: 24rpx; white-space: nowrap; } .card-role { color: $ink-muted; font-size: 24rpx; white-space: nowrap; }
@@ -128,11 +130,11 @@ defineEmits(['select'])
@media screen and (max-width: 340px) { @media screen and (max-width: 340px) {
.genealogy-card { min-height: 148rpx; padding-right: 18rpx; padding-left: 18rpx; } .genealogy-card { min-height: 148rpx; padding-right: 18rpx; padding-left: 18rpx; }
.surname-seal { width: 68rpx; height: 106rpx; margin-right: 16rpx; } .surname-seal { width: 66rpx; height: 100rpx; margin-right: 16rpx; }
.card-name { font-size: 32rpx; } .card-name { font-size: 32rpx; }
.card-meta { font-size: 20rpx; } .card-meta { font-size: 20rpx; }
.card-updated { display: none; } .card-updated { display: none; }
.card-side { width: 92rpx; margin-left: 8rpx; } .card-side { margin-left: 12rpx; }
.card-chevron { width: 28rpx; height: 28rpx; margin-left: 8rpx; } .card-chevron { width: 28rpx; height: 28rpx; margin-left: 8rpx; }
} }
</style> </style>
pages/genealogy/index.vue
+70 -70
View File
@@ -31,46 +31,46 @@
src="/static/assets/backgrounds/genealogy-current-slip-frame.png" src="/static/assets/backgrounds/genealogy-current-slip-frame.png"
mode="scaleToFill" mode="scaleToFill"
/> />
<view class="current-seal"> <view class="current-summary">
<image <view class="current-seal">
class="current-seal-frame" <image
src="/static/assets/icons/genealogy/seal-current-frame-v1.png" class="current-seal-frame"
mode="scaleToFill" src="/static/assets/icons/genealogy/seal-current-frame-v1.png"
/> mode="scaleToFill"
<text class="current-seal-title">家谱</text> />
</view> <text class="current-seal-title">家谱</text>
<view class="current-copy"> </view>
<text class="current-name">{{ currentGenealogy.name }}</text> <text class="current-name">{{ currentGenealogy.name }}</text>
<view class="current-info-divider"></view> </view>
<view class="current-meta"> <view class="current-info-divider"></view>
<view class="current-meta-item"> <view class="current-meta">
<image <view class="current-meta-item">
class="current-meta-icon" <image
src="/static/assets/icons/common/location-v1.png" class="current-meta-icon"
mode="aspectFit" src="/static/assets/icons/common/location-v1.png"
/> mode="aspectFit"
<text class="current-meta-item-text">{{ />
currentGenealogy.location <text class="current-meta-item-text">{{
}}</text> currentGenealogy.location
</view> }}</text>
<view class="current-meta-item"> </view>
<image <view class="current-meta-item">
class="current-meta-icon" <image
src="/static/assets/icons/common/member-meta-v1.png" class="current-meta-icon"
mode="aspectFit" src="/static/assets/icons/common/member-meta-v1.png"
/> mode="aspectFit"
<text class="current-meta-item-text" />
>{{ currentGenealogy.memberCount }} 位成员</text <text class="current-meta-item-text"
> >{{ currentGenealogy.memberCount }} 位成员</text
</view> >
<view class="current-meta-item"> </view>
<image <view class="current-meta-item">
class="current-meta-icon" <image
src="/static/assets/icons/common/admin-v1.png" class="current-meta-icon"
mode="aspectFit" src="/static/assets/icons/common/admin-v1.png"
/> mode="aspectFit"
<text class="current-meta-item-text">管理员</text> />
</view> <text class="current-meta-item-text">管理员</text>
</view> </view>
</view> </view>
</view> </view>
@@ -233,7 +233,7 @@ const openShortcut = (key) => {
.page-paper-texture { .page-paper-texture {
position: absolute; position: absolute;
top: 184rpx; top: 164rpx;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -247,27 +247,26 @@ const openShortcut = (key) => {
.page-footer-landscape { .page-footer-landscape {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 128rpx; bottom: 112rpx;
left: 0; left: 0;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 360rpx; height: 480rpx;
opacity: 0.48; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
.genealogy-content { .genealogy-content {
position: relative; position: relative;
z-index: 2; z-index: 2;
padding: 28rpx 48rpx 194rpx; padding: 24rpx 32rpx 176rpx;
} }
.current-slip { .current-slip {
position: relative; position: relative;
display: flex; display: block;
min-height: 272rpx; min-height: 268rpx;
align-items: center; padding: 30rpx 34rpx 28rpx;
padding: 34rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
background: transparent; background: transparent;
} }
@@ -289,11 +288,11 @@ const openShortcut = (key) => {
z-index: 1; z-index: 1;
display: flex; display: flex;
width: 80rpx; width: 80rpx;
height: 136rpx; height: 128rpx;
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 26rpx; margin-right: 24rpx;
color: #fff7e7; color: #fff7e7;
} }
@@ -317,13 +316,12 @@ const openShortcut = (key) => {
letter-spacing: 2rpx; letter-spacing: 2rpx;
writing-mode: vertical-rl; writing-mode: vertical-rl;
} }
.current-copy { .current-summary {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
min-width: 0; min-width: 0;
flex: 1; align-items: center;
flex-direction: column;
} }
.current-name { .current-name {
overflow: hidden; overflow: hidden;
@@ -335,15 +333,20 @@ const openShortcut = (key) => {
white-space: nowrap; white-space: nowrap;
} }
.current-info-divider { .current-info-divider {
position: relative;
z-index: 1;
width: 100%; width: 100%;
height: 1rpx; height: 1rpx;
margin: 20rpx 0 18rpx; margin: 14rpx 0 16rpx;
background: rgba(181, 138, 75, 0.48); background: rgba(181, 138, 75, 0.48);
} }
.current-meta { .current-meta {
position: relative;
z-index: 1;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between;
margin-top: 0; margin-top: 0;
color: $ink-muted; color: $ink-muted;
font-size: 25rpx; font-size: 25rpx;
@@ -353,7 +356,7 @@ const openShortcut = (key) => {
.current-meta-item { .current-meta-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 22rpx 8rpx 0; margin: 0;
white-space: nowrap; white-space: nowrap;
.current-meta-item-text{ .current-meta-item-text{
@@ -368,10 +371,10 @@ const openShortcut = (key) => {
.shortcut-grid { .shortcut-grid {
display: flex; display: flex;
min-height: 208rpx; min-height: 194rpx;
align-items: center; align-items: center;
margin-top: 36rpx; margin-top: 24rpx;
padding: 14rpx 0; padding: 8rpx 0;
} }
.shortcut-item { .shortcut-item {
@@ -402,22 +405,22 @@ const openShortcut = (key) => {
display: block; display: block;
width: 100%; width: 100%;
height: 30rpx; height: 30rpx;
margin: 10rpx 0 2rpx; margin: 4rpx 0 0;
} }
.genealogy-lower { .genealogy-lower {
padding: 18rpx 0 44rpx; padding: 12rpx 0 36rpx;
} }
.list-section { .list-section {
margin-top: 22rpx; margin-top: 16rpx;
} }
.section-heading { .section-heading {
display: flex; display: flex;
min-height: 64rpx; min-height: 56rpx;
align-items: center; align-items: center;
margin-bottom: 12rpx; margin-bottom: 8rpx;
color: $ink; color: $ink;
font-family: "STKaiti", "KaiTi", serif; font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx; font-size: 34rpx;
@@ -433,7 +436,7 @@ const openShortcut = (key) => {
content: ""; content: "";
} }
.list-section + .list-section { .list-section + .list-section {
margin-top: 26rpx; margin-top: 18rpx;
} }
.create-action, .create-action,
@@ -449,7 +452,7 @@ const openShortcut = (key) => {
.create-action { .create-action {
width: 350rpx; width: 350rpx;
margin: 42rpx auto 0; margin: 32rpx auto 0;
border: 2rpx solid $brand-red; border: 2rpx solid $brand-red;
border-radius: 48rpx; border-radius: 48rpx;
background: rgba(255, 249, 238, 0.66); background: rgba(255, 249, 238, 0.66);
@@ -548,8 +551,8 @@ const openShortcut = (key) => {
@media screen and (max-width: 340px) { @media screen and (max-width: 340px) {
.genealogy-content { .genealogy-content {
padding-right: 24rpx; padding-right: 20rpx;
padding-left: 24rpx; padding-left: 20rpx;
} }
.current-name { .current-name {
font-size: 40rpx; font-size: 40rpx;
@@ -557,9 +560,6 @@ const openShortcut = (key) => {
.shortcut-label { .shortcut-label {
font-size: 23rpx; font-size: 23rpx;
} }
.current-meta-item {
margin-right: 12rpx;
}
.current-meta-icon { .current-meta-icon {
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;