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

feat: 完成70%全局样式与可读性优化

Browse Source
This commit is contained in:
rain
2026-07-31 11:27:15 +08:00
parent 96524e4d6c
commit 555aa00043
116 changed files with 1928 additions and 1169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/GenealogyCard.vue
+84 -85
View File
@@ -27,36 +27,34 @@
<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/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<image
class="card-chevron"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<view class="card-detail-row">
<view class="card-updated">
<text>更新于 {{ genealogy.updatedAt }}</text>
<view class="card-meta-item card-meta-item--location">
<image
class="card-meta-icon"
src="/static/assets/foundation/transparent/meta-location.png"
mode="aspectFit"
/>
<text class="card-meta">{{ genealogy.location }}</text>
</view>
<view class="card-metas">
<view class="card-meta-item">
<image
class="card-meta-icon"
src="/static/assets/foundation/transparent/meta-location.png"
mode="aspectFit"
/>
<text class="card-meta">{{ genealogy.location }}</text>
</view>
<view class="card-meta-item">
<image
class="card-meta-icon"
src="/static/assets/foundation/transparent/meta-member.png"
mode="aspectFit"
/>
<text class="card-meta">{{ genealogy.memberCount }} 位成员</text>
</view>
<view class="card-meta-item card-meta-item--members">
<image
class="card-meta-icon"
src="/static/assets/foundation/transparent/meta-member.png"
mode="aspectFit"
/>
<text class="card-meta">{{ genealogy.memberCount }} 位成员</text>
</view>
<view class="card-trailing">
<text class="card-role app-single-line">{{ role }}</text>
<text v-if="genealogy.updatedAt" class="card-updated app-single-line"
>更新于 {{ genealogy.updatedAt }}</text
>
</view>
</view>
</view>
@@ -82,13 +80,13 @@ const accessibleLabel = computed(
<style scoped lang="scss">
.genealogy-card {
--card-padding-x: 24rpx;
--card-padding-y: 18rpx;
--card-padding-y: 20rpx;
display: grid;
grid-template-columns: 72rpx minmax(0, 1fr);
min-height: 178rpx;
grid-template-columns: 68rpx minmax(0, 1fr);
min-height: 204rpx;
align-items: center;
column-gap: 22rpx;
padding: 18rpx 24rpx;
column-gap: 20rpx;
padding: 20rpx 24rpx;
box-sizing: border-box;
background: transparent;
}
@@ -114,8 +112,8 @@ const accessibleLabel = computed(
grid-column: 1;
grid-row: 1;
z-index: 2;
width: 72rpx;
height: 112rpx;
width: 68rpx;
height: 106rpx;
place-items: center;
color: #fff5df;
}
@@ -132,14 +130,14 @@ const accessibleLabel = computed(
.surname-seal-copy {
z-index: 1;
display: flex;
height: 82rpx;
height: 78rpx;
align-items: center;
justify-content: center;
}
.seal-title {
color: #fff5df;
font-family: "STKaiti", "KaiTi", serif;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
font-weight: 700;
letter-spacing: 2rpx;
line-height: 1;
@@ -165,45 +163,47 @@ const accessibleLabel = computed(
.card-title-row {
display: flex;
min-width: 0;
align-items: flex-start;
align-items: center;
justify-content: space-between;
gap: 12rpx;
}
.card-name {
min-width: 0;
flex: 1;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 37rpx;
font-size: clamp(18px, 34rpx, 23px);
font-weight: 700;
line-height: 1.25;
overflow: hidden;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.card-detail-row {
display: flex;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
min-width: 0;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-top: 8rpx;
}
.card-metas {
display: flex;
min-width: 0;
width: 100%;
flex-wrap: wrap;
align-items: center;
margin-top: 2rpx;
gap: 4rpx 18rpx;
column-gap: 16rpx;
row-gap: 4rpx;
margin-top: 10rpx;
}
.card-meta-item {
display: flex;
min-width: 0;
align-items: center;
margin-right: 0;
}
.card-meta-item--location {
grid-column: 1 / -1;
}
.card-meta-item--members {
grid-column: 1;
}
.card-meta-icon {
width: 46rpx;
height: 46rpx;
width: 38rpx;
height: 38rpx;
flex: 0 0 auto;
margin-right: 6rpx;
opacity: 1;
@@ -212,73 +212,72 @@ const accessibleLabel = computed(
.card-meta {
min-width: 0;
color: #62584c;
font-size: 26rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 500;
overflow-wrap: anywhere;
}
.card-trailing {
grid-column: 2;
display: flex;
min-width: 0;
align-items: flex-end;
justify-content: center;
row-gap: 4rpx;
flex-direction: column;
}
.card-updated {
display: flex;
width: 100%;
flex: 0 0 auto;
align-items: center;
justify-content: flex-end;
margin-top: 0;
margin-left: 0;
color: #62584c;
font-size: 24rpx;
font-size: clamp(14px, 22rpx, 17px);
font-weight: 500;
line-height: 1.35;
white-space: nowrap;
overflow-wrap: anywhere;
}
.card-side {
z-index: 1;
display: flex;
min-width: 0;
flex: 0 1 auto;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-left: 20rpx;
}
.card-role {
min-width: 0;
color: #62584c;
font-size: 26rpx;
font-weight: 500;
overflow-wrap: anywhere;
padding: 3rpx 10rpx 4rpx;
border: 1rpx solid rgba(181, 138, 75, 0.56);
border-radius: 999rpx;
color: #7f4f16;
font-size: clamp(14px, 23rpx, 17px);
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
}
.card-chevron {
width: 34rpx;
height: 34rpx;
margin-left: 14rpx;
width: 30rpx;
height: 30rpx;
margin-left: 8rpx;
}
@media screen and (max-width: 340px) {
.genealogy-card {
--card-padding-x: 18rpx;
grid-template-columns: 66rpx minmax(0, 1fr);
grid-template-columns: 62rpx minmax(0, 1fr);
column-gap: 16rpx;
min-height: 148rpx;
min-height: 176rpx;
padding-right: 18rpx;
padding-left: 18rpx;
}
.surname-seal {
width: 66rpx;
height: 100rpx;
width: 62rpx;
height: 96rpx;
}
.card-name {
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
}
.card-meta {
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.card-updated {
display: none;
}
.card-side {
margin-left: 12rpx;
}
.card-chevron {
width: 28rpx;
height: 28rpx;