feat: unify project responsive layouts
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user