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
+17 -15
View File
@@ -8,8 +8,14 @@
</view>
</view>
<view class="card-copy">
<view class="card-main">
<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-metas">
<view class="card-meta-item">
@@ -26,11 +32,6 @@
</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>
</template>
@@ -47,9 +48,9 @@ defineEmits(['select'])
.genealogy-card {
position: relative;
display: flex;
min-height: 160rpx;
min-height: 156rpx;
align-items: center;
padding: 20rpx 24rpx;
padding: 18rpx 24rpx;
box-sizing: border-box;
background: transparent;
}
@@ -72,8 +73,8 @@ defineEmits(['select'])
position: relative;
z-index: 1;
display: flex;
width: 76rpx;
height: 118rpx;
width: 72rpx;
height: 112rpx;
flex: 0 0 auto;
align-items: 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) .seal-title { color: $ink-muted; }
.card-copy {
.card-main {
position: relative;
z-index: 1;
display: flex;
@@ -103,6 +104,7 @@ defineEmits(['select'])
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-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; }
@@ -115,12 +117,12 @@ defineEmits(['select'])
position: relative;
z-index: 1;
display: flex;
width: 124rpx;
min-width: 0;
flex: 0 0 auto;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-left: 10rpx;
margin-left: 20rpx;
}
.card-role { color: $ink-muted; font-size: 24rpx; white-space: nowrap; }
@@ -128,11 +130,11 @@ defineEmits(['select'])
@media screen and (max-width: 340px) {
.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-meta { font-size: 20rpx; }
.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; }
}
</style>
pages/genealogy/index.vue
+33 -33
View File
@@ -31,6 +31,7 @@
src="/static/assets/backgrounds/genealogy-current-slip-frame.png"
mode="scaleToFill"
/>
<view class="current-summary">
<view class="current-seal">
<image
class="current-seal-frame"
@@ -39,8 +40,8 @@
/>
<text class="current-seal-title">家谱</text>
</view>
<view class="current-copy">
<text class="current-name">{{ currentGenealogy.name }}</text>
</view>
<view class="current-info-divider"></view>
<view class="current-meta">
<view class="current-meta-item">
@@ -73,7 +74,6 @@
</view>
</view>
</view>
</view>
<view class="shortcut-grid">
<view
@@ -233,7 +233,7 @@ const openShortcut = (key) => {
.page-paper-texture {
position: absolute;
top: 184rpx;
top: 164rpx;
right: 0;
bottom: 0;
left: 0;
@@ -247,27 +247,26 @@ const openShortcut = (key) => {
.page-footer-landscape {
position: absolute;
right: 0;
bottom: 128rpx;
bottom: 112rpx;
left: 0;
z-index: 1;
width: 100%;
height: 360rpx;
opacity: 0.48;
height: 480rpx;
opacity: 0.5;
pointer-events: none;
}
.genealogy-content {
position: relative;
z-index: 2;
padding: 28rpx 48rpx 194rpx;
padding: 24rpx 32rpx 176rpx;
}
.current-slip {
position: relative;
display: flex;
min-height: 272rpx;
align-items: center;
padding: 34rpx 30rpx;
display: block;
min-height: 268rpx;
padding: 30rpx 34rpx 28rpx;
box-sizing: border-box;
background: transparent;
}
@@ -289,11 +288,11 @@ const openShortcut = (key) => {
z-index: 1;
display: flex;
width: 80rpx;
height: 136rpx;
height: 128rpx;
flex: 0 0 auto;
align-items: center;
justify-content: center;
margin-right: 26rpx;
margin-right: 24rpx;
color: #fff7e7;
}
@@ -317,13 +316,12 @@ const openShortcut = (key) => {
letter-spacing: 2rpx;
writing-mode: vertical-rl;
}
.current-copy {
.current-summary {
position: relative;
z-index: 1;
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
align-items: center;
}
.current-name {
overflow: hidden;
@@ -335,15 +333,20 @@ const openShortcut = (key) => {
white-space: nowrap;
}
.current-info-divider {
position: relative;
z-index: 1;
width: 100%;
height: 1rpx;
margin: 20rpx 0 18rpx;
margin: 14rpx 0 16rpx;
background: rgba(181, 138, 75, 0.48);
}
.current-meta {
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin-top: 0;
color: $ink-muted;
font-size: 25rpx;
@@ -353,7 +356,7 @@ const openShortcut = (key) => {
.current-meta-item {
display: flex;
align-items: center;
margin: 0 22rpx 8rpx 0;
margin: 0;
white-space: nowrap;
.current-meta-item-text{
@@ -368,10 +371,10 @@ const openShortcut = (key) => {
.shortcut-grid {
display: flex;
min-height: 208rpx;
min-height: 194rpx;
align-items: center;
margin-top: 36rpx;
padding: 14rpx 0;
margin-top: 24rpx;
padding: 8rpx 0;
}
.shortcut-item {
@@ -402,22 +405,22 @@ const openShortcut = (key) => {
display: block;
width: 100%;
height: 30rpx;
margin: 10rpx 0 2rpx;
margin: 4rpx 0 0;
}
.genealogy-lower {
padding: 18rpx 0 44rpx;
padding: 12rpx 0 36rpx;
}
.list-section {
margin-top: 22rpx;
margin-top: 16rpx;
}
.section-heading {
display: flex;
min-height: 64rpx;
min-height: 56rpx;
align-items: center;
margin-bottom: 12rpx;
margin-bottom: 8rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
@@ -433,7 +436,7 @@ const openShortcut = (key) => {
content: "";
}
.list-section + .list-section {
margin-top: 26rpx;
margin-top: 18rpx;
}
.create-action,
@@ -449,7 +452,7 @@ const openShortcut = (key) => {
.create-action {
width: 350rpx;
margin: 42rpx auto 0;
margin: 32rpx auto 0;
border: 2rpx solid $brand-red;
border-radius: 48rpx;
background: rgba(255, 249, 238, 0.66);
@@ -548,8 +551,8 @@ const openShortcut = (key) => {
@media screen and (max-width: 340px) {
.genealogy-content {
padding-right: 24rpx;
padding-left: 24rpx;
padding-right: 20rpx;
padding-left: 20rpx;
}
.current-name {
font-size: 40rpx;
@@ -557,9 +560,6 @@ const openShortcut = (key) => {
.shortcut-label {
font-size: 23rpx;
}
.current-meta-item {
margin-right: 12rpx;
}
.current-meta-icon {
width: 28rpx;
height: 28rpx;