feat: unify project responsive layouts

This commit is contained in:
rain
2026-07-21 20:59:10 +08:00
parent a0d19f4aab
commit 5d99bae3f2
94 changed files with 2324 additions and 404 deletions
+4 -3
View File
@@ -163,6 +163,8 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.people-page {
display: flex;
min-height: 100vh;
@@ -178,12 +180,12 @@ onUnmounted(() => {
padding: 22rpx 24rpx 100rpx;
}
.people-search {
@include adaptive.adaptive-records-field;
display: grid;
grid-template-columns: minmax(0, 1fr) 126rpx;
width: 100%;
min-height: 44px;
align-items: center;
background: url("/static/assets/modules/records/transparent/r01-search-input-frame.png") center / 100% 100% no-repeat;
}
.people-search input {
z-index: 1;
@@ -214,14 +216,13 @@ onUnmounted(() => {
margin-top: 12px;
}
.person-card {
@include adaptive.adaptive-records-person;
display: flex;
width: 100%;
height: clamp(92px, 190rpx, 108px);
align-items: center;
margin-top: 12px;
padding: 16% 10%;
box-sizing: border-box;
background: url("/static/assets/modules/records/transparent/r01-person-name-card.png") center / 100% 100% no-repeat;
}
.person-card:first-child {
margin-top: 0;
+5 -3
View File
@@ -141,24 +141,26 @@ onUnmounted(() => { if (toastTimer) clearTimeout(toastTimer); });
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.person-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.person-detail-header,.person-detail-loading,.person-detail-content { z-index: 1; }
.person-detail-loading { min-height: calc(100vh - 100rpx); }
.person-detail-content { padding: 18rpx 24rpx 72rpx; }
.person-identity-card { display: flex; min-height: 190rpx; padding: 30rpx 10%; box-sizing: border-box; background: url("/static/assets/modules/records/transparent/r01-person-name-card.png") center / 100% 100% no-repeat; }
.person-identity-card { @include adaptive.adaptive-records-person; display: flex; min-height: 190rpx; padding: 30rpx 10%; }
.person-identity-card__copy { display: flex; flex: 1; flex-direction: column; justify-content: center; }
.person-identity-card__copy text { display: block; }
.person-identity-card__name { color: $ink; font-family: STKaiti,KaiTi,serif; font-size: 38rpx; font-weight: 700; }
.person-identity-card__meta { margin-top: 8rpx; color: $ink-muted; font-size: 25rpx; font-weight: 600; }
.person-identity-card__hint { margin-top: 8rpx; color: #806a51; font-size: 21rpx; }
.person-archive-card { min-height: 154rpx; margin-top: 14rpx; padding: 32rpx 42rpx; box-sizing: border-box; }
.person-archive-card,.person-long-field,.person-state-card { background: url("/static/assets/modules/records/transparent/module-content-frame.png") center / 100% 100% no-repeat; }
.person-archive-card,.person-long-field,.person-state-card { @include adaptive.adaptive-records-content; }
.person-archive-card text { display: block; }
.person-archive-card text:first-child,.person-long-field__label { color: $brand-red; font-size: 24rpx; font-weight: 700; }
.person-archive-card text:last-child { margin-top: 11rpx; color: $ink; font-size: 24rpx; line-height: 1.55; }
.person-edit-action { margin-top: 20rpx; }
.person-related-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14rpx; margin-top: 18rpx; }
.person-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8rpx 24rpx; min-height: 92rpx; margin-top: 12rpx; padding: 18rpx 28rpx; box-sizing: border-box; background: url("/static/assets/modules/records/transparent/module-field-frame.png") center / 100% 100% no-repeat; }
.person-field { @include adaptive.adaptive-records-field; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8rpx 24rpx; min-height: 92rpx; margin-top: 12rpx; padding: 18rpx 28rpx; }
.person-field__label { color: $ink; font-size: 23rpx; font-weight: 700; }
.person-field input { width: 100%; min-width: 0; min-height: 56rpx; color: $ink; font-size: 23rpx; text-align: right; }
.person-field-error { grid-column: 1 / -1; display: block; color: $brand-red; font-size: 21rpx; text-align: right; }
+3 -2
View File
@@ -114,6 +114,8 @@ const restoreGifts = () => {
};
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.gift-page {
display: flex;
min-height: 100vh;
@@ -137,8 +139,7 @@ const restoreGifts = () => {
.record-card,
.state-card {
box-sizing: border-box;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.record-card {
min-height: 190rpx;
+4 -4
View File
@@ -168,6 +168,8 @@ onUnmounted(() => {
});
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.gift-editor-page {
display: flex;
min-height: 100vh;
@@ -190,8 +192,7 @@ onUnmounted(() => {
.state-card {
box-sizing: border-box;
padding: 46rpx;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.form-card > text:first-child,
.detail-card > text:first-child,
@@ -211,8 +212,7 @@ onUnmounted(() => {
margin-top: 14rpx;
padding: 14rpx 24rpx;
box-sizing: border-box;
background: url("/static/assets/modules/records/transparent/module-field-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-field;
}
.field-row > text:first-child,
.detail-card > view > text:first-child {
+3 -2
View File
@@ -104,6 +104,8 @@ const restoreRituals = () => {
};
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.ritual-page {
display: flex;
min-height: 100vh;
@@ -127,8 +129,7 @@ const restoreRituals = () => {
.record-card,
.state-card {
box-sizing: border-box;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.record-card {
min-height: 190rpx;
+3 -2
View File
@@ -126,6 +126,8 @@ const backToRituals = () =>
uni.redirectTo({ url: "/pages/records/r05-ritual-list" });
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.ritual-detail-page {
display: flex;
min-height: 100vh;
@@ -151,8 +153,7 @@ const backToRituals = () =>
.state-card {
box-sizing: border-box;
padding: 42rpx 46rpx;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.detail-card > text {
display: block;
+4 -4
View File
@@ -139,6 +139,8 @@ onUnmounted(() => {
});
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.ritual-editor-page {
display: flex;
min-height: 100vh;
@@ -156,8 +158,7 @@ onUnmounted(() => {
.state-card {
box-sizing: border-box;
padding: 46rpx;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.form-card > text:first-child,
.state-card > text:first-child {
@@ -175,8 +176,7 @@ onUnmounted(() => {
margin-top: 14rpx;
padding: 14rpx 24rpx;
box-sizing: border-box;
background: url("/static/assets/modules/records/transparent/module-field-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-field;
}
.field-row > text:first-child {
color: $ink;
+5 -5
View File
@@ -140,6 +140,8 @@ onUnmounted(() => {
});
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.timeline-page {
display: flex;
min-height: 100vh;
@@ -171,7 +173,7 @@ onUnmounted(() => {
color: $ink-muted;
font-size: 22rpx;
background: url("/static/assets/modules/genealogy/transparent/section-divider.png")
center/100% 100% no-repeat;
center/100% auto no-repeat;
}
.person-lead text:first-child {
color: $brand-red;
@@ -181,8 +183,7 @@ onUnmounted(() => {
.state-card {
box-sizing: border-box;
padding: 34rpx 46rpx;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.timeline-card > text,
.state-card > text {
@@ -241,8 +242,7 @@ onUnmounted(() => {
box-sizing: border-box;
color: $ink;
font-size: 23rpx;
background: url("/static/assets/modules/records/transparent/module-field-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-field;
}
.dialog-form text {
display: block;
+5 -5
View File
@@ -147,6 +147,8 @@ onUnmounted(() => {
});
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.timeline-page {
display: flex;
min-height: 100vh;
@@ -178,7 +180,7 @@ onUnmounted(() => {
color: $ink-muted;
font-size: 22rpx;
background: url("/static/assets/modules/genealogy/transparent/section-divider.png")
center/100% 100% no-repeat;
center/100% auto no-repeat;
}
.person-lead text:first-child {
color: $brand-red;
@@ -188,8 +190,7 @@ onUnmounted(() => {
.state-card {
box-sizing: border-box;
padding: 34rpx 46rpx;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.timeline-card > text,
.state-card > text {
@@ -248,8 +249,7 @@ onUnmounted(() => {
box-sizing: border-box;
color: $ink;
font-size: 22rpx;
background: url("/static/assets/modules/records/transparent/module-field-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-field;
}
.dialog-form text {
display: block;
+4 -4
View File
@@ -143,6 +143,8 @@ onUnmounted(() => {
});
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.memo-page {
display: flex;
min-height: 100vh;
@@ -167,8 +169,7 @@ onUnmounted(() => {
.state-card {
box-sizing: border-box;
padding: 34rpx 46rpx;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.memo-card > view {
display: flex;
@@ -234,8 +235,7 @@ onUnmounted(() => {
box-sizing: border-box;
color: $ink;
font-size: 23rpx;
background: url("/static/assets/modules/records/transparent/module-field-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-field;
}
.dialog-form text {
display: block;
+4 -4
View File
@@ -149,6 +149,8 @@ onUnmounted(() => {
});
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.merit-page {
display: flex;
min-height: 100vh;
@@ -174,8 +176,7 @@ onUnmounted(() => {
.state-card {
box-sizing: border-box;
padding: 34rpx 46rpx;
background: url("/static/assets/modules/records/transparent/module-content-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-content;
}
.merit-summary {
text-align: center;
@@ -254,8 +255,7 @@ onUnmounted(() => {
box-sizing: border-box;
color: $ink;
font-size: 22rpx;
background: url("/static/assets/modules/records/transparent/module-field-frame.png")
center/100% 100% no-repeat;
@include adaptive.adaptive-records-field;
}
.dialog-form text {
display: block;