feat: unify project responsive layouts

pages/genealogy/g01-my-genealogies.vue

@@ -561,6 +561,8 @@ const openShortcut = (key) => {
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .genealogy-index {
   display: flex;
   min-height: 100vh;
@@ -603,11 +605,10 @@ const openShortcut = (key) => {
 }
 
 .current-slip {
+  @include adaptive.adaptive-genealogy-current-slip;
   display: block;
   min-height: 268rpx;
   padding: 30rpx 34rpx 28rpx;
-  box-sizing: border-box;
-  background: url("/static/assets/modules/genealogy/transparent/current-slip-frame.png") center / 100% 100% no-repeat;
 }
 
 .current-seal {
@@ -618,7 +619,7 @@ const openShortcut = (key) => {
   align-items: center;
   justify-content: center;
   margin-right: 24rpx;
-  background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / 100% 100% no-repeat;
+  background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / contain no-repeat;
   color: #fff7e7;
 }
 .current-seal-title {
@@ -751,12 +752,11 @@ const openShortcut = (key) => {
 }
 
 .application-record {
+  @include adaptive.adaptive-genealogy-list-card;
   display: flex;
   min-height: 138rpx;
   align-items: center;
-  box-sizing: border-box;
   padding: 22rpx 26rpx;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png") center / 100% 100% no-repeat;
 }
 .application-record + .application-record {
   margin-top: 12rpx;
@@ -875,9 +875,9 @@ const openShortcut = (key) => {
 }
 
 .state-panel--error {
+  @include adaptive.adaptive-genealogy-state-panel;
   min-height: 1120rpx;
   padding: 0;
-  background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png") center / 100% 100% no-repeat;
 }
 
 .error-panel__content {
@@ -933,8 +933,8 @@ const openShortcut = (key) => {
 }
 
 .empty-panel {
+  @include adaptive.adaptive-genealogy-state-panel;
   min-height: 1120rpx;
-  background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png") center / 100% 100% no-repeat;
 }
 
 .empty-panel__content {
@@ -954,7 +954,7 @@ const openShortcut = (key) => {
   height: 184rpx;
   align-items: center;
   justify-content: center;
-  background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / 100% 100% no-repeat;
+  background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / contain no-repeat;
 }
 
 .empty-seal__text {
@@ -1067,15 +1067,10 @@ const openShortcut = (key) => {
   background: rgba(34, 20, 12, 0.68);
 }
 .add-dialog {
+  @include adaptive.adaptive-g01-add-sheet;
   width: 100%;
   min-height: 780rpx;
   max-height: calc(100vh - 80rpx);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-image-source: url("/static/assets/modules/genealogy/transparent/g01-add-sheet-background-v3.png");
-  border-image-slice: 220 0 1 0 fill;
-  border-image-width: 118rpx 0 1rpx;
-  border-image-repeat: stretch;
 }
 .add-dialog__content {
   display: flex;
@@ -1143,16 +1138,11 @@ const openShortcut = (key) => {
   background: rgba(34, 20, 12, 0.58);
 }
 .genealogy-switcher {
+  @include adaptive.adaptive-g01-switcher;
   width: 670rpx;
   max-width: 100%;
   min-height: 600rpx;
   max-height: calc(100vh - 120rpx);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-image-source: url("/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png");
-  border-image-slice: 300 260 360 260 fill;
-  border-image-width: 110rpx 48rpx 132rpx 48rpx;
-  border-image-repeat: stretch;
 }
 .genealogy-switcher__content {
   display: grid;

pages/genealogy/g03-create-genealogy.vue

@@ -24,7 +24,7 @@
               <input
                 v-model="createForm.surname"
                 maxlength="4"
-                placeholder="如：汤"
+                placeholder="请输入姓氏"
                 placeholder-class="placeholder"
                 @input="clearFieldError('surname')"
               />
@@ -37,7 +37,7 @@
               <input
                 v-model="createForm.name"
                 maxlength="24"
-                placeholder="如：汤氏家谱"
+                placeholder="请输入家谱名称"
                 placeholder-class="placeholder"
                 @input="clearFieldError('name')"
               />
@@ -407,6 +407,7 @@ const enterOverview = () =>
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .flow-page {
   display: flex;
   min-height: 100vh;
@@ -420,9 +421,8 @@ const enterOverview = () =>
 }
 
 .create-flow-panel {
+  @include adaptive.adaptive-genealogy-state-panel;
   min-height: 1000rpx;
-  background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png")
-    center / 100% 100% no-repeat;
 }
 
 .create-flow-panel__content {

pages/genealogy/g05-genealogy-overview.vue

@@ -304,6 +304,7 @@ const applyToJoin = () =>
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .overview-page {
   display: flex;
   min-height: 100vh;
@@ -314,12 +315,11 @@ const applyToJoin = () =>
   z-index: 3;
 }
 .overview-surface {
+  @include adaptive.adaptive-g05-overview-surface;
   z-index: 2;
   width: 100%;
   min-height: min(483px, calc(100vw * 1.3422));
   flex: 0 0 auto;
-  background: url("/static/assets/modules/genealogy/opaque/g05-overview-surface.png")
-    center / 100% 100% no-repeat;
 }
 .overview-surface--state {
   display: flex;
@@ -437,13 +437,12 @@ const applyToJoin = () =>
   font-weight: 700;
 }
 .overview-state {
+  @include adaptive.adaptive-genealogy-state-panel;
   display: flex;
   width: 100%;
   min-height: 0;
   align-items: center;
   justify-content: center;
-  background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png")
-    center / 100% 100% no-repeat;
   text-align: center;
 }
 .overview-state__content {

pages/genealogy/g06-search-genealogies.vue

@@ -5,15 +5,6 @@
     <view class="search-page__header"><PageHeader title="加入家谱" /></view>
 
     <view class="search-page__content">
-      <view class="search-title-strip">
-        <image
-          class="search-title-strip__seal"
-          src="/static/assets/foundation/transparent/brand-seal.png"
-          mode="aspectFit"
-        />
-        <text class="search-title-strip__text">加入家谱</text>
-      </view>
-
       <view class="mode-tabs">
         <view
           class="mode-tab"
@@ -439,6 +430,7 @@ const confirmInvite = () =>
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .search-page {
   display: flex;
   min-height: 100vh;
@@ -454,32 +446,6 @@ const confirmInvite = () =>
   padding: 30rpx 24rpx calc(58rpx + env(safe-area-inset-bottom));
   box-sizing: border-box;
 }
-.search-title-strip {
-  display: grid;
-  width: 100%;
-  height: 138rpx;
-  grid-template-columns: 156rpx 1fr 170rpx;
-  align-items: center;
-  background: url("/static/assets/modules/genealogy/opaque/g06-search-title-strip.png")
-    center / 100% 100% no-repeat;
-}
-.search-title-strip__seal {
-  z-index: 1;
-  width: 72rpx;
-  height: 84rpx;
-  margin-left: 52rpx;
-}
-.search-title-strip__text {
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #f5d596;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: 39rpx;
-  font-weight: 700;
-  letter-spacing: 5rpx;
-}
 .mode-tabs {
   display: flex;
   width: 500rpx;
@@ -516,11 +482,10 @@ const confirmInvite = () =>
   margin-top: 32rpx;
 }
 .search-field {
+  @include adaptive.adaptive-g06-search-field;
   display: grid;
   width: 430rpx;
   min-height: 95rpx;
-  background: url("/static/assets/modules/genealogy/opaque/g06-search-input-wide.png")
-    center / 100% 100% no-repeat;
 }
 .search-input {
   z-index: 1;
@@ -547,13 +512,12 @@ const confirmInvite = () =>
   font-size: 21rpx;
 }
 .search-action {
+  @include adaptive.adaptive-g06-search-action;
   display: flex;
   width: 200rpx;
   min-height: 88rpx;
   align-items: center;
   justify-content: center;
-  background: url("/static/assets/modules/genealogy/opaque/g06-search-button.png")
-    center / 100% 100% no-repeat;
 }
 .search-action__label {
   z-index: 1;
@@ -665,11 +629,10 @@ const confirmInvite = () =>
   font-weight: 700;
 }
 .result-card {
+  @include adaptive.adaptive-genealogy-list-card;
   min-height: 314rpx;
   box-sizing: border-box;
   padding: 28rpx 30rpx;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
-    center / 100% 100% no-repeat;
 }
 .result-card__content {
   z-index: 1;
@@ -748,11 +711,10 @@ const confirmInvite = () =>
   line-height: 35rpx;
 }
 .invite-field {
+  @include adaptive.adaptive-g06-search-field;
   display: grid;
   flex: 1;
   min-height: 95rpx;
-  background: url("/static/assets/modules/genealogy/opaque/g06-search-input-wide.png")
-    center / 100% 100% no-repeat;
 }
 .invite-input {
   z-index: 1;
@@ -792,15 +754,6 @@ const confirmInvite = () =>
     padding-right: 20rpx;
     padding-left: 20rpx;
   }
-  .search-title-strip__seal {
-    margin-left: 44rpx;
-  }
-  .search-title-strip {
-    grid-template-columns: 138rpx 1fr 148rpx;
-  }
-  .search-title-strip__text {
-    font-size: 37rpx;
-  }
   .search-field {
     width: 430rpx;
   }

pages/genealogy/g08-join-application.vue

@@ -40,7 +40,7 @@
           <text>与家谱关系</text
           ><input
             v-model="form.relation"
-            placeholder="例如：汤正华堂侄"
+            placeholder="例如：某某某堂侄"
             placeholder-class="join-placeholder"
             @input="clearFieldError('relation')"
           />
@@ -49,7 +49,7 @@
           fieldErrors.relation
         }}</text>
         <text class="relation-help"
-          >请以家谱中一位已知长辈为参照，例如：汤正华堂侄</text
+          >请以家谱中一位已知长辈为参照，例如：某某某堂侄</text
         >
         <view class="join-field join-field--message">
           <text>{{ sourceContract.thirdFieldLabel }}</text
@@ -224,6 +224,7 @@ const completeFlow = () =>
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .join-page {
   display: flex;
   min-height: 100vh;
@@ -234,14 +235,13 @@ const completeFlow = () =>
   z-index: 3;
 }
 .join-panel {
+  @include adaptive.adaptive-genealogy-state-panel;
   z-index: 2;
   width: calc(100% - 32rpx);
   min-height: min(590px, calc((100vw - 16px) * 1.337));
   margin: 22rpx auto 0;
   padding: 70rpx 8%;
   box-sizing: border-box;
-  background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png")
-    center / 100% 100% no-repeat;
 }
 .join-form {
   min-width: 0;
@@ -271,11 +271,10 @@ const completeFlow = () =>
   line-height: 1.6;
 }
 .join-field {
+  @include adaptive.adaptive-genealogy-form-field;
   display: grid;
   min-height: 92rpx;
   margin-top: 18rpx;
-  background: url("/static/assets/modules/genealogy/transparent/g-form-field-frame.png")
-    center / 100% 100% no-repeat;
 }
 .join-form__previous {
   display: block;

pages/genealogy/g09-my-applications.vue

@@ -218,6 +218,8 @@ const toSearch = () =>
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .application-page {
   display: flex;
   min-height: 100vh;
@@ -248,20 +250,19 @@ const toSearch = () =>
   font-size: 24rpx;
 }
 .application-card {
+  @include adaptive.adaptive-genealogy-list-card;
   display: grid;
   width: 100%;
-  min-height: 228rpx;
-  margin-bottom: 18rpx;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
-    center / 100% 100% no-repeat;
+  min-height: 210rpx;
+  margin-bottom: 12rpx;
 }
 .application-card__body {
   display: grid;
   min-width: 0;
-  min-height: 228rpx;
+  min-height: 174rpx;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12rpx 18rpx;
-  padding: 42rpx 52rpx 34rpx 64rpx;
+  gap: 8rpx 14rpx;
+  padding: 26rpx 28rpx 22rpx 40rpx;
   box-sizing: border-box;
 }
 .application-card__name {
@@ -332,8 +333,10 @@ const toSearch = () =>
   color: $brand-red;
   font-size: 23rpx;
   font-weight: 700;
+  white-space: nowrap;
 }
 .application-state-card {
+  @include adaptive.adaptive-genealogy-list-card;
   display: flex;
   width: 100%;
   min-height: 228rpx;
@@ -342,8 +345,6 @@ const toSearch = () =>
   margin-top: 80rpx;
   padding: 48rpx 12%;
   box-sizing: border-box;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
-    center / 100% 100% no-repeat;
 }
 .application-state-card__copy {
   display: flex;

pages/genealogy/g10-application-review.vue

@@ -32,18 +32,17 @@
             <text class="application-card__time">{{ item.appliedAt }}</text>
             <text class="application-card__relation">{{ item.relation }}</text>
             <view v-if="item.status === 'PENDING'" class="review-actions">
-              <view class="review-action" @click="confirmAudit(item, false)">
-                <image
-                  src="/static/assets/foundation/transparent/a01-secondary-button-v2.png"
-                  mode="aspectFit"
-                /><text>拒绝申请</text>
-              </view>
-              <view class="review-action" @click="confirmAudit(item, true)">
-                <image
-                  src="/static/assets/foundation/transparent/a01-primary-button-v2.png"
-                  mode="aspectFit"
-                /><text>通过申请</text>
-              </view>
+              <AppButton
+                compact
+                type="secondary"
+                label="拒绝申请"
+                @click="confirmAudit(item, false)"
+              />
+              <AppButton
+                compact
+                label="通过申请"
+                @click="confirmAudit(item, true)"
+              />
             </view>
             <view
               v-else
@@ -54,14 +53,6 @@
                   : 'review-result--rejected'
               "
             >
-              <image
-                :src="
-                  item.status === 'APPROVED'
-                    ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
-                    : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
-                "
-                mode="aspectFit"
-              />
               <text class="application-card__status">{{
                 item.status === "APPROVED" ? "已通过" : "已拒绝"
               }}</text>
@@ -81,16 +72,12 @@
           <text>{{ stateCopy }}</text>
         </view>
       </view>
-      <view
+      <AppButton
         v-if="reviewState === 'error'"
         class="review-page__retry"
+        label="重新查看"
         @click="loadApplications({ genealogyId })"
-      >
-        <image
-          src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
-          mode="aspectFit"
-        /><text>重新查看</text>
-      </view>
+      />
     </view>
 
     <AppDialog
@@ -117,6 +104,7 @@
             : '确认拒绝'
       "
       :show-cancel="!!confirmation"
+      compact-actions
       @confirm="helpVisible ? closeDialog() : applyAudit()"
       @cancel="closeDialog"
       @close="closeDialog"
@@ -146,6 +134,7 @@
 import { computed, ref } from "vue";
 import { onLoad, onUnload } from "@dcloudio/uni-app";
 import AppDialog from "@/components/AppDialog.vue";
+import AppButton from "@/components/AppButton.vue";
 import AppLoading from "@/components/AppLoading.vue";
 import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
@@ -271,6 +260,8 @@ const showHelp = () => {
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .review-page {
   display: flex;
   min-height: 100vh;
@@ -282,7 +273,7 @@ const showHelp = () => {
 }
 .rejection-field { width: 100%; margin: 20rpx 0; text-align: left; }
 .rejection-field > text:first-child { display: block; color: $ink; font-size: 23rpx; font-weight: 700; }
-.rejection-field textarea { width: 100%; min-height: 110rpx; margin-top: 10rpx; padding: 18rpx; box-sizing: border-box; color: $ink; font-size: 23rpx; line-height: 1.55; background: url("/static/assets/modules/genealogy/transparent/g-form-field-frame.png") center / 100% 100% no-repeat; }
+.rejection-field textarea { @include adaptive.adaptive-genealogy-form-field; width: 100%; min-height: 110rpx; margin-top: 10rpx; padding: 18rpx; color: $ink; font-size: 23rpx; line-height: 1.55; }
 .rejection-field__error { display: block; margin-top: 8rpx; color: $brand-red; font-size: 21rpx; }
 .review-content {
   z-index: 1;
@@ -308,19 +299,19 @@ const showHelp = () => {
   font-size: 24rpx;
 }
 .application-card {
+  @include adaptive.adaptive-genealogy-list-card;
   width: 100%;
-  min-height: 228rpx;
-  margin-bottom: 18rpx;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png") center / 100% 100% no-repeat;
+  min-height: 218rpx;
+  margin-bottom: 12rpx;
 }
 .application-card__body {
   display: grid;
   width: 100%;
-  min-height: 228rpx;
+  min-height: 182rpx;
   grid-template-columns: auto minmax(0, 1fr) auto;
   grid-template-rows: auto auto auto;
-  gap: 12rpx 0;
-  padding: 44rpx 52rpx 29rpx 64rpx;
+  gap: 8rpx 0;
+  padding: 28rpx 28rpx 22rpx 40rpx;
   box-sizing: border-box;
 }
 .application-card__name {
@@ -347,7 +338,7 @@ const showHelp = () => {
   display: block;
   grid-column: 1 / span 2;
   grid-row: 2;
-  margin-top: 15rpx;
+  margin-top: 8rpx;
   color: $ink-muted;
   font-size: 24rpx;
   line-height: 1.35;
@@ -359,33 +350,12 @@ const showHelp = () => {
   justify-self: end;
   gap: 12rpx;
 }
-.review-action {
-  display: grid;
+.review-actions .app-button {
   width: 148rpx;
   min-height: 68rpx;
 }
-.review-action image {
-  grid-area: 1 / 1;
-  width: 100%;
-  height: 100%;
-}
-.review-action text {
-  z-index: 1;
-  display: flex;
-  grid-area: 1 / 1;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: $ink;
-  font-family: "Microsoft YaHei", sans-serif;
-  font-size: 24rpx;
-  font-weight: 700;
-  letter-spacing: 1rpx;
-}
-.review-action:last-child text {
-  color: #fff9ed;
-}
 .review-result {
+  @include adaptive.adaptive-scroll-button(primary);
   display: grid;
   grid-column: 2 / 4;
   grid-row: 3;
@@ -393,11 +363,6 @@ const showHelp = () => {
   width: 308rpx;
   min-height: 68rpx;
 }
-.review-result image {
-  grid-area: 1 / 1;
-  width: 100%;
-  height: 100%;
-}
 .application-card__status {
   z-index: 1;
   display: flex;
@@ -412,14 +377,20 @@ const showHelp = () => {
 .review-result--approved .application-card__status {
   color: #fff9ed;
 }
+.review-result--approved {
+  border-image-source: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png");
+}
 .review-result--rejected .application-card__status {
   color: $ink;
 }
+.review-result--rejected {
+  border-image-source: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png");
+}
 .review-state-card {
+  @include adaptive.adaptive-genealogy-list-card;
   width: 100%;
   min-height: 228rpx;
   margin-top: 70rpx;
-  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png") center / 100% 100% no-repeat;
 }
 .review-state-card__copy {
   display: flex;
@@ -446,18 +417,9 @@ const showHelp = () => {
   width: 420rpx;
   min-height: 82rpx;
   margin: 32rpx auto 0;
-  background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png") center / contain no-repeat;
-}
-.review-page__retry text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #fff9ed;
-  font-size: 26rpx;
-  font-weight: 700;
 }
 .review-feedback {
+  @include adaptive.adaptive-feedback-toast;
   position: fixed;
   z-index: 40;
   top: 140rpx;
@@ -468,7 +430,6 @@ const showHelp = () => {
   align-items: center;
   justify-content: center;
   padding: 0 36rpx;
-  background: url("/static/assets/foundation/transparent/a01-scroll-toast-v3.png") center / 100% 100% no-repeat;
   transform: translateX(-50%);
 }
 .review-feedback text {

pages/genealogy/g11-genealogy-settings.vue

@@ -209,6 +209,7 @@ const saveSettings = () => {
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .settings-page {
   display: flex;
   min-height: 100vh;
@@ -219,14 +220,13 @@ const saveSettings = () => {
   z-index: 3;
 }
 .settings-panel {
+  @include adaptive.adaptive-genealogy-state-panel;
   z-index: 2;
   width: calc(100% - 32rpx);
   min-height: min(620px, calc((100vw - 16px) * 1.43));
   margin: 18rpx auto 0;
   padding: 70rpx 8%;
   box-sizing: border-box;
-  background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png")
-    center / 100% 100% no-repeat;
 }
 .settings-panel > .app-loading {
   grid-area: 1 / 1 / -1 / -1;
@@ -259,11 +259,10 @@ const saveSettings = () => {
   line-height: 1.55;
 }
 .settings-field {
+  @include adaptive.adaptive-genealogy-form-field;
   display: grid;
   min-height: 92rpx;
   margin-top: 17rpx;
-  background: url("/static/assets/modules/genealogy/transparent/g-form-field-frame.png")
-    center / 100% 100% no-repeat;
 }
 .settings-field > text {
   z-index: 1;

pages/genealogy/g12-generation-poems.vue

@@ -237,6 +237,7 @@ const savePoems = () => {
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .poem-page {
   display: flex;
   min-height: 100vh;
@@ -247,14 +248,13 @@ const savePoems = () => {
   z-index: 3;
 }
 .poem-panel {
+  @include adaptive.adaptive-genealogy-state-panel;
   z-index: 2;
   width: calc(100% - 32rpx);
   min-height: min(650px, calc((100vw - 16px) * 1.5));
   margin: 18rpx auto 0;
   padding: 76rpx 8%;
   box-sizing: border-box;
-  background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png")
-    center / 100% 100% no-repeat;
 }
 .poem-panel > .app-loading {
   grid-area: 1 / 1 / -1 / -1;
@@ -289,13 +289,12 @@ const savePoems = () => {
   margin-top: 18rpx;
 }
 .poem-row {
+  @include adaptive.adaptive-genealogy-form-field;
   display: grid;
   min-height: 72rpx;
   margin-top: 10rpx;
   grid-template-columns: 48% auto 1fr auto;
   align-items: center;
-  background: url("/static/assets/modules/genealogy/transparent/g-form-field-frame.png")
-    center / 100% 100% no-repeat;
 }
 .poem-row__number {
   z-index: 1;
@@ -347,11 +346,10 @@ const savePoems = () => {
   letter-spacing: 2rpx;
 }
 .poem-field {
+  @include adaptive.adaptive-genealogy-form-field;
   display: grid;
   min-height: 118rpx;
   margin-top: 22rpx;
-  background: url("/static/assets/modules/genealogy/transparent/g-form-field-frame.png")
-    center / 100% 100% no-repeat;
 }
 .poem-field > text {
   z-index: 1;