修改完成

components/AppButton.vue

@@ -1,10 +1,12 @@
 <template>
-  <view
+  <button
     class="app-button"
     :class="[
       `app-button--${type}`,
       { 'app-button--block': block, 'app-button--disabled': disabled },
     ]"
+    :disabled="disabled"
+    :aria-label="label"
     :hover-class="disabled ? 'none' : 'app-button--pressed'"
     @click="handleClick"
   >
@@ -12,7 +14,7 @@
     <text class="app-button__label"
       ><slot>{{ label }}</slot></text
     >
-  </view>
+  </button>
 </template>
 
 <script setup>
@@ -39,28 +41,35 @@ const handleClick = (event) => {
 
 <style scoped lang="scss">
 .app-button {
-  position: relative;
-  display: inline-flex;
+  display: inline-grid;
   width: 420rpx;
   max-width: 100%;
   min-height: 88rpx;
-  align-items: center;
-  justify-content: center;
+  place-items: center;
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: normal;
+}
+.app-button::after {
+  border: 0;
 }
 .app-button--block {
-  display: flex;
+  display: grid;
   width: 100%;
 }
 .app-button__skin {
-  position: absolute;
-  inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
 }
+.app-button__skin,
+.app-button__label {
+  grid-area: 1 / 1;
+}
 .app-button__label {
-  position: relative;
   z-index: 1;
   padding: 0 38rpx;
   color: #fffaf0;

components/AppDialog.vue

@@ -4,13 +4,17 @@
     class="app-dialog-layer"
     @click="closeOnMask && cancel()"
   >
-    <view class="app-dialog" @click.stop>
-      <image
-        class="app-dialog__skin"
-        src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
-        mode="aspectFit"
-      />
-      <view class="app-dialog__content">
+    <view
+      ref="dialogRef"
+      class="app-dialog"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="title"
+      tabindex="-1"
+      @click.stop
+      @keydown.esc.stop="cancel"
+    >
+      <scroll-view class="app-dialog__content" scroll-y>
         <text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
         <text class="app-dialog__title">{{ title }}</text>
         <text v-if="message" class="app-dialog__message">{{ message }}</text>
@@ -27,15 +31,16 @@
           />
           <AppButton :label="confirmText" @click="$emit('confirm')" />
         </view>
-      </view>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script setup>
+import { nextTick, ref, watch } from "vue";
 import AppButton from "@/components/AppButton.vue";
 
-defineProps({
+const props = defineProps({
   visible: { type: Boolean, default: false },
   eyebrow: { type: String, default: "" },
   title: { type: String, required: true },
@@ -46,6 +51,23 @@ defineProps({
   closeOnMask: { type: Boolean, default: true },
 });
 const emit = defineEmits(["confirm", "cancel", "close"]);
+const dialogRef = ref(null);
+let previousFocus = null;
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (typeof document === "undefined") return;
+    if (visible) {
+      previousFocus = document.activeElement;
+      await nextTick();
+      dialogRef.value?.focus?.();
+      return;
+    }
+    previousFocus?.focus?.();
+    previousFocus = null;
+  },
+);
 const cancel = () => {
   emit("cancel");
   emit("close");
@@ -65,28 +87,23 @@ const cancel = () => {
   background: rgba(35, 18, 10, 0.62);
 }
 .app-dialog {
-  position: relative;
   width: 650rpx;
   max-width: 100%;
   min-height: 520rpx;
-}
-.app-dialog__skin {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+  background: url("/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png")
+    center / contain no-repeat;
 }
 .app-dialog__content {
-  position: relative;
   z-index: 1;
   display: flex;
   min-height: 520rpx;
+  max-height: calc(100vh - 80rpx);
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
   padding: 74rpx 66rpx 54rpx;
   text-align: center;
+  overflow-y: auto;
 }
 .app-dialog__eyebrow {
   color: #9f170f;

components/AppLoading.vue

@@ -1,5 +1,11 @@
 <template>
-  <view class="app-loading" :class="`app-loading--${variant}`">
+  <view
+    class="app-loading"
+    :class="`app-loading--${variant}`"
+    role="status"
+    aria-live="polite"
+    aria-busy="true"
+  >
     <view class="app-loading__emblem" aria-hidden="true">
       <image
         class="app-loading__seal"
@@ -33,7 +39,6 @@ defineProps({
 
 <style scoped lang="scss">
 .app-loading {
-  position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
@@ -144,11 +149,11 @@ defineProps({
 }
 @media (prefers-reduced-motion: reduce) {
   .app-loading__seal {
-    animation: app-loading-seal-essential-pulse 1.2s ease-in-out infinite;
+    animation: none;
     transform: none;
   }
   .app-loading__knot {
-    animation: app-loading-knot-essential-pulse 1.2s ease-in-out 0.2s infinite;
+    animation: none;
     transform: none;
   }
 }

components/AppToast.vue

@@ -1,5 +1,11 @@
 <template>
-  <view v-if="visible" class="app-toast" aria-live="polite">
+  <view
+    v-show="visible"
+    class="app-toast"
+    role="status"
+    aria-live="polite"
+    aria-atomic="true"
+  >
     <text class="app-toast__copy">{{ message }}</text>
   </view>
 </template>
@@ -34,7 +40,6 @@ defineProps({
   pointer-events: none;
 }
 .app-toast__copy {
-  position: relative;
   z-index: 1;
   padding: 14rpx 30rpx;
   color: #5c4330;

components/GenealogyCard.vue

@@ -71,10 +71,13 @@ defineEmits(["select"]);
 
 <style scoped lang="scss">
 .genealogy-card {
-  position: relative;
-  display: flex;
+  --card-padding-x: 24rpx;
+  --card-padding-y: 18rpx;
+  display: grid;
+  grid-template-columns: 72rpx minmax(0, 1fr);
   min-height: 178rpx;
   align-items: center;
+  column-gap: 22rpx;
   padding: 18rpx 24rpx;
   box-sizing: border-box;
   background: transparent;
@@ -85,42 +88,35 @@ defineEmits(["select"]);
 }
 
 .row-frame {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
+  grid-area: 1 / 1 / 2 / -1;
+  z-index: 1;
+  width: calc(100% + var(--card-padding-x) + var(--card-padding-x));
+  height: calc(100% + var(--card-padding-y) + var(--card-padding-y));
+  margin: calc(-1 * var(--card-padding-y)) calc(-1 * var(--card-padding-x));
   pointer-events: none;
 }
 
 .surname-seal {
-  position: relative;
-  z-index: 1;
-  display: flex;
+  display: grid;
+  grid-column: 1;
+  grid-row: 1;
+  z-index: 2;
   width: 72rpx;
   height: 112rpx;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  margin-right: 22rpx;
+  place-items: center;
   color: #fff5df;
 }
 
 .surname-seal-frame {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
 }
+.surname-seal-frame,
+.surname-seal-copy {
+  grid-area: 1 / 1;
+}
 .surname-seal-copy {
-  position: relative;
   z-index: 1;
   display: flex;
   height: 82rpx;
@@ -144,35 +140,30 @@ defineEmits(["select"]);
 }
 
 .card-main {
-  position: relative;
-  z-index: 1;
+  grid-column: 2;
+  grid-row: 1;
+  z-index: 2;
   display: flex;
   min-width: 0;
   flex: 1;
   flex-direction: column;
 }
 
-.card-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.card-meta {
-  white-space: nowrap;
-}
-
 .card-title-row {
   display: flex;
   min-width: 0;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
 }
 .card-name {
+  min-width: 0;
+  flex: 1;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
   font-size: 37rpx;
   font-weight: 700;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
 }
 .card-detail-row {
   display: flex;
@@ -186,8 +177,10 @@ defineEmits(["select"]);
   display: flex;
   min-width: 0;
   width: 100%;
+  flex-wrap: wrap;
   align-items: center;
   margin-top: 2rpx;
+  gap: 4rpx 18rpx;
 }
 .card-meta-item {
   display: flex;
@@ -195,9 +188,6 @@ defineEmits(["select"]);
   align-items: center;
   margin-right: 0;
 }
-.card-meta-item + .card-meta-item {
-  margin-left: 18rpx;
-}
 .card-meta-icon {
   width: 46rpx;
   height: 46rpx;
@@ -207,9 +197,11 @@ defineEmits(["select"]);
   filter: saturate(1.35) brightness(0.82) contrast(1.15);
 }
 .card-meta {
+  min-width: 0;
   color: #62584c;
   font-size: 26rpx;
   font-weight: 500;
+  overflow-wrap: anywhere;
 }
 .card-updated {
   display: flex;
@@ -222,15 +214,14 @@ defineEmits(["select"]);
   color: #62584c;
   font-size: 24rpx;
   font-weight: 500;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 
 .card-side {
-  position: relative;
   z-index: 1;
   display: flex;
   min-width: 0;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
@@ -238,10 +229,11 @@ defineEmits(["select"]);
 }
 
 .card-role {
+  min-width: 0;
   color: #62584c;
   font-size: 26rpx;
   font-weight: 500;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 .card-chevron {
   width: 34rpx;
@@ -251,6 +243,9 @@ defineEmits(["select"]);
 
 @media screen and (max-width: 340px) {
   .genealogy-card {
+    --card-padding-x: 18rpx;
+    grid-template-columns: 66rpx minmax(0, 1fr);
+    column-gap: 16rpx;
     min-height: 148rpx;
     padding-right: 18rpx;
     padding-left: 18rpx;
@@ -258,7 +253,6 @@ defineEmits(["select"]);
   .surname-seal {
     width: 66rpx;
     height: 100rpx;
-    margin-right: 16rpx;
   }
   .card-name {
     font-size: 32rpx;

components/ModulePage.vue

@@ -2,6 +2,7 @@
 <template>
   <view
     class="module-page"
+    :style="moduleAssetStyle"
     :class="[
       `module-page--${moduleKey}`,
       `module-page--${page.template}`,
@@ -20,17 +21,12 @@
 
     <view v-else-if="moduleState === 'ready'" class="module-page__content">
       <view class="module-lead">
-        <image
-          src="/static/assets/modules/genealogy/transparent/section-divider.png"
-          mode="scaleToFill"
-        />
         <text>{{ page.subtitle }}</text>
       </view>
 
       <view v-if="page.template === 'form'" class="module-panel module-form">
         <text class="section-eyebrow">填写信息</text>
         <view v-for="field in page.fields" :key="field" class="form-row">
-          <image :src="fieldAsset" mode="scaleToFill" />
           <text>{{ field }}</text>
           <input
             :placeholder="`请输入${field}`"
@@ -48,7 +44,6 @@
           class="list-card"
           @click="openPreview(item)"
         >
-          <image :src="contentAsset" mode="scaleToFill" />
           <view class="list-card__copy">
             <text>{{ item[0] }}</text>
             <text>{{ item[1] }}</text>
@@ -64,7 +59,6 @@
       >
         <text class="section-eyebrow">档案详情</text>
         <view v-for="item in page.sections" :key="item[0]" class="detail-card">
-          <image :src="contentAsset" mode="scaleToFill" />
           <view
             ><text>{{ item[0] }}</text
             ><text>{{ item[1] }}</text></view
@@ -82,7 +76,6 @@
           :key="item[0]"
           class="timeline-row"
         >
-          <image :src="contentAsset" mode="scaleToFill" />
           <view
             ><text>第 {{ index + 1 }} 则</text><text>{{ item[0] }}</text
             ><text>{{ item[1] }}</text></view
@@ -102,7 +95,6 @@
           class="settings-row"
           @click="openPreview(item)"
         >
-          <image :src="fieldAsset" mode="scaleToFill" />
           <view
             ><text>{{ item[0] }}</text
             ><text>{{ normalizedSectionCopy(item[1]) }}</text></view
@@ -113,11 +105,6 @@
       </view>
 
       <view v-else class="module-panel status-card">
-        <image
-          class="status-card__skin"
-          :src="contentAsset"
-          mode="scaleToFill"
-        />
         <view class="status-card__body">
           <text class="status-card__eyebrow">{{ page.badge }} · 服务说明</text>
           <text class="status-card__lead">{{ page.lead }}</text>
@@ -129,11 +116,6 @@
 
     <view v-else class="module-page__content module-page__content--state">
       <view class="module-panel status-card">
-        <image
-          class="status-card__skin"
-          :src="contentAsset"
-          mode="scaleToFill"
-        />
         <view class="status-card__body">
           <text class="status-card__eyebrow">{{ stateCopy.eyebrow }}</text>
           <text class="status-card__lead">{{ stateCopy.title }}</text>
@@ -188,6 +170,10 @@ const fieldAsset = computed(
   () =>
     `/static/assets/modules/${assetModule.value}/transparent/module-field-frame.png`,
 );
+const moduleAssetStyle = computed(() => ({
+  "--module-content-asset": `url(${contentAsset.value})`,
+  "--module-field-asset": `url(${fieldAsset.value})`,
+}));
 const query = (() => {
   if (typeof location !== "undefined")
     return Object.fromEntries(
@@ -264,16 +250,15 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .module-page {
-  position: relative;
+  display: flex;
   min-height: 100vh;
-  overflow-x: hidden;
+  flex-direction: column;
   background: $paper;
 }
 .module-page__header,
 .module-page__content,
 .module-page__loading {
-  position: relative;
-  z-index: 2;
+  z-index: 1;
 }
 .module-page__loading {
   min-height: calc(100vh - 100rpx);
@@ -282,29 +267,20 @@ onUnmounted(() => {
   padding: 16rpx 26rpx 56rpx;
 }
 .module-lead {
-  position: relative;
-  height: 56rpx;
+  min-height: 56rpx;
   margin: 0 12rpx 18rpx;
   color: $ink-muted;
   font-size: 23rpx;
   text-align: center;
-}
-.module-lead image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  background: url("/static/assets/modules/genealogy/transparent/section-divider.png") center / 100% 100% no-repeat;
 }
 .module-lead text {
-  position: relative;
-  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
 .module-panel {
-  position: relative;
   width: 100%;
 }
 .section-eyebrow {
@@ -317,7 +293,6 @@ onUnmounted(() => {
   letter-spacing: 3rpx;
 }
 .form-row {
-  position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   min-height: 84rpx;
@@ -327,30 +302,19 @@ onUnmounted(() => {
   padding: 14rpx 26rpx;
   box-sizing: border-box;
 }
-.form-row image,
-.detail-card image,
-.settings-row image,
-.list-card > image,
-.timeline-row > image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+.form-row,
+.settings-row {
+  background: var(--module-field-asset) center / 100% 100% no-repeat;
 }
 .form-row > text {
-  position: relative;
-  z-index: 1;
   color: $ink;
   font-size: 24rpx;
   font-weight: 700;
 }
 .form-row input {
-  position: relative;
-  z-index: 1;
   width: 100%;
   min-width: 0;
-  height: 56rpx;
+  min-height: 56rpx;
   color: $ink;
   font-size: 23rpx;
   text-align: right;
@@ -379,13 +343,16 @@ onUnmounted(() => {
 }
 .list-card,
 .timeline-row {
-  position: relative;
   width: 100%;
   min-height: 188rpx;
 }
+.list-card,
+.detail-card,
+.timeline-row,
+.status-card {
+  background: var(--module-content-asset) center / 100% 100% no-repeat;
+}
 .list-card__copy {
-  position: relative;
-  z-index: 1;
   padding: 34rpx 46rpx 28rpx;
 }
 .list-card__copy text {
@@ -410,13 +377,10 @@ onUnmounted(() => {
   font-weight: 600;
 }
 .detail-card {
-  position: relative;
   min-height: 170rpx;
   margin-top: 16rpx;
 }
 .detail-card > view {
-  position: relative;
-  z-index: 1;
   padding: 34rpx 44rpx;
 }
 .detail-card text,
@@ -435,8 +399,6 @@ onUnmounted(() => {
   line-height: 1.55;
 }
 .timeline-row > view {
-  position: relative;
-  z-index: 1;
   padding: 29rpx 44rpx;
 }
 .timeline-row text {
@@ -460,7 +422,6 @@ onUnmounted(() => {
   font-size: 23rpx;
 }
 .settings-row {
-  position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   min-height: 94rpx;
@@ -470,10 +431,6 @@ onUnmounted(() => {
   padding: 20rpx 28rpx 18rpx 26rpx;
   box-sizing: border-box;
 }
-.settings-row > view {
-  position: relative;
-  z-index: 1;
-}
 .settings-row > view text:first-child {
   color: $ink;
   font-size: 24rpx;
@@ -485,8 +442,6 @@ onUnmounted(() => {
   font-size: 21rpx;
 }
 .settings-row > text {
-  position: relative;
-  z-index: 1;
   color: $brand-red;
   font-size: 21rpx;
   font-weight: 600;
@@ -495,15 +450,7 @@ onUnmounted(() => {
   min-height: 330rpx;
   text-align: center;
 }
-.status-card__skin {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
 .status-card__body {
-  position: relative;
-  z-index: 1;
   padding: 70rpx 60rpx 48rpx;
 }
 .status-card__eyebrow {

components/PageHeader.vue

@@ -16,16 +16,22 @@
       mode="aspectFit"
     />
     <view class="header-side header-side--left">
-      <view v-if="root" class="header-icon-button" @click="$emit('brand')">
+      <button
+        v-if="root"
+        class="header-icon-button"
+        aria-label="返回首页"
+        @click="$emit('brand')"
+      >
         <image
           class="header-logo"
           src="/static/assets/foundation/transparent/brand-seal.png"
           mode="aspectFit"
         />
-      </view>
-      <view
+      </button>
+      <button
         v-else
         class="header-back"
+        aria-label="返回上一页"
         hover-class="header-back--pressed"
         @click="goBack"
       >
@@ -34,15 +40,16 @@
           src="/static/assets/foundation/transparent/chevron-right.png"
           mode="aspectFit"
         />
-      </view>
+      </button>
     </view>
 
     <text class="header-title">{{ title }}</text>
 
     <view class="header-side header-side--right">
-      <view
+      <button
         v-if="root"
         class="header-icon-button header-notice"
+        aria-label="打开消息中心"
         @click="$emit('notice')"
       >
         <image
@@ -51,10 +58,10 @@
           mode="aspectFit"
         />
         <view v-if="unreadCount > 0" class="notice-dot"></view>
-      </view>
-      <view v-else class="header-action" @click="$emit('action')">{{
+      </button>
+      <button v-else class="header-action" :disabled="!action" @click="$emit('action')">{{
         action
-      }}</view>
+      }}</button>
     </view>
   </view>
   </view>
@@ -66,9 +73,17 @@ const props = defineProps({
   action: { type: String, default: "" },
   root: { type: Boolean, default: false },
   unreadCount: { type: Number, default: 0 },
+  fallbackUrl: { type: String, default: "/pages/genealogy/g01-my-genealogies" },
 });
 
-const goBack = () => uni.navigateBack();
+const goBack = () => {
+  const stack = getCurrentPages();
+  if (stack.length > 1) {
+    uni.navigateBack();
+    return;
+  }
+  uni.reLaunch({ url: props.fallbackUrl });
+};
 </script>
 
 <style scoped lang="scss">
@@ -128,7 +143,6 @@ const goBack = () => uni.navigateBack();
 
 .page-header--root .header-side,
 .page-header--root .header-title {
-  position: relative;
   z-index: 2;
 }
 
@@ -147,12 +161,20 @@ const goBack = () => uni.navigateBack();
 }
 
 .header-icon-button {
-  position: relative;
-  display: flex;
+  display: grid;
   width: 88rpx;
   height: 88rpx;
-  align-items: center;
-  justify-content: center;
+  place-items: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: normal;
+}
+.header-icon-button::after,
+.header-back::after,
+.header-action::after {
+  border: 0;
 }
 
 .header-logo {
@@ -164,12 +186,19 @@ const goBack = () => uni.navigateBack();
   height: 48rpx;
 }
 
+.header-logo,
+.header-notice-icon,
 .notice-dot {
-  position: absolute;
-  top: 15rpx;
-  right: 13rpx;
+  grid-area: 1 / 1;
+}
+
+.notice-dot {
+  align-self: start;
+  justify-self: end;
   width: 14rpx;
   height: 14rpx;
+  margin-top: 15rpx;
+  margin-right: 13rpx;
   border: 2rpx solid $brand-red;
   border-radius: 50%;
   background: #fff9ed;
@@ -177,7 +206,12 @@ const goBack = () => uni.navigateBack();
 
 .header-action {
   width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
   font-size: 27rpx;
+  line-height: normal;
 }
 
 .header-back {
@@ -186,6 +220,11 @@ const goBack = () => uni.navigateBack();
   height: 88rpx;
   align-items: center;
   justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: normal;
 }
 .header-back__icon {
   width: 42rpx;

components/tree/TreeMemberForm.vue

@@ -14,12 +14,6 @@
       ><PageHeader :title="config.pageTitle"
     /></view>
     <view class="member-form-panel">
-      <image
-        class="member-form-panel__skin"
-        src="/static/assets/modules/tree/transparent/t01-state-panel.png"
-        mode="scaleToFill"
-      />
-
       <view v-if="formState === 'form'" class="member-form">
         <text class="member-form__eyebrow">{{ config.eyebrow }}</text>
         <text class="member-form__title">{{ config.title }}</text>
@@ -29,10 +23,6 @@
           :key="field.key"
           class="member-field"
         >
-          <image
-            src="/static/assets/modules/tree/transparent/t07-search-input-frame.png"
-            mode="scaleToFill"
-          />
           <text>{{ field.label }}</text>
           <input
             v-model="form[field.key]"
@@ -206,34 +196,26 @@ const showConflictHelp = () => {
 
 <style scoped lang="scss">
 .member-form-page {
-  position: relative;
+  display: flex;
   min-height: 100vh;
-  overflow: hidden;
+  flex-direction: column;
   background: $paper;
 }
 .member-form-page__header {
-  position: relative;
   z-index: 3;
 }
 .member-form-panel {
-  position: relative;
   z-index: 2;
   width: calc(100% - 32rpx);
   min-height: min(640px, calc((100vw - 16px) * 1.48));
   margin: 18rpx auto 0;
   padding: 7.5% 8%;
   box-sizing: border-box;
-}
-.member-form-panel__skin {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+  background: url("/static/assets/modules/tree/transparent/t01-state-panel.png")
+    center / 100% 100% no-repeat;
 }
 .member-form,
 .member-form-result {
-  position: relative;
   z-index: 1;
 }
 .member-form__eyebrow {
@@ -258,7 +240,6 @@ const showConflictHelp = () => {
   line-height: 1.5;
 }
 .member-field {
-  position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   min-height: 78rpx;
@@ -267,27 +248,20 @@ const showConflictHelp = () => {
   margin-top: 12rpx;
   padding: 12rpx 22rpx;
   box-sizing: border-box;
-}
-.member-field image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+  background: url("/static/assets/modules/tree/transparent/t07-search-input-frame.png")
+    center / 100% 100% no-repeat;
 }
 .member-field > text {
-  position: relative;
   z-index: 1;
   color: $ink;
   font-size: 24rpx;
   font-weight: 700;
 }
 .member-field input {
-  position: relative;
   z-index: 1;
   width: 100%;
   min-width: 0;
-  height: 54rpx;
+  min-height: 54rpx;
   color: $ink;
   font-size: 24rpx;
   text-align: right;
@@ -304,22 +278,21 @@ const showConflictHelp = () => {
   text-align: center;
 }
 .member-form-action {
-  position: relative;
+  display: grid;
   width: 100%;
-  height: 76rpx;
+  min-height: 76rpx;
   margin-top: 17rpx;
 }
 .member-form-action image {
-  position: absolute;
-  inset: 0;
+  grid-area: 1 / 1;
   width: 100%;
   height: 100%;
   pointer-events: none;
 }
 .member-form-action text {
-  position: relative;
   z-index: 1;
   display: flex;
+  grid-area: 1 / 1;
   align-items: center;
   justify-content: center;
   height: 100%;