feat: unify project responsive layouts

components/ModulePage.vue

@@ -249,6 +249,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
+@use "../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .module-page {
   display: flex;
   min-height: 100vh;
@@ -267,18 +269,18 @@ onUnmounted(() => {
   padding: 16rpx 26rpx 56rpx;
 }
 .module-lead {
+  display: flex;
   min-height: 56rpx;
+  align-items: center;
+  justify-content: center;
   margin: 0 12rpx 18rpx;
   color: $ink-muted;
   font-size: 23rpx;
   text-align: center;
-  background: url("/static/assets/modules/genealogy/transparent/section-divider.png") center / 100% 100% no-repeat;
+  background: url("/static/assets/modules/genealogy/transparent/section-divider.png") center / 100% auto no-repeat;
 }
 .module-lead text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+  display: block;
 }
 .module-panel {
   width: 100%;
@@ -304,7 +306,7 @@ onUnmounted(() => {
 }
 .form-row,
 .settings-row {
-  background: var(--module-field-asset) center / 100% 100% no-repeat;
+  @include adaptive.adaptive-module-field;
 }
 .form-row > text {
   color: $ink;
@@ -350,7 +352,7 @@ onUnmounted(() => {
 .detail-card,
 .timeline-row,
 .status-card {
-  background: var(--module-content-asset) center / 100% 100% no-repeat;
+  @include adaptive.adaptive-module-content;
 }
 .list-card__copy {
   padding: 34rpx 46rpx 28rpx;