修改完成

pages/tree/t07-member-directory.vue

@@ -21,11 +21,6 @@
       v-if="directoryState === 'list' || directoryState === 'empty'"
       class="directory-search"
     >
-      <image
-        class="directory-search__frame"
-        src="/static/assets/modules/tree/transparent/t07-search-input-frame.png"
-        mode="scaleToFill"
-      />
       <input
         v-model="keyword"
         aria-label="成员搜索关键词"
@@ -59,11 +54,6 @@
           class="directory-card"
           @click="openMember(item)"
         >
-          <image
-            class="directory-card__frame"
-            src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
-            mode="scaleToFill"
-          />
           <view class="directory-card__copy">
             <text class="directory-card__name">{{ item.name }}</text>
             <text class="directory-card__meta"
@@ -75,10 +65,6 @@
         </view>
       </template>
       <view v-else class="directory-state-card">
-        <image
-          src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
-          mode="scaleToFill"
-        />
         <view
           ><text>{{
             directoryState === "empty" ? "没有找到相关成员" : "成员目录暂不可用"
@@ -167,9 +153,9 @@ const openMember = (item) =>
 </script>
 <style scoped lang="scss">
 .directory-page {
-  position: relative;
+  display: flex;
   min-height: 100vh;
-  overflow-x: hidden;
+  flex-direction: column;
   overflow-y: auto;
   background: $paper;
 }
@@ -177,7 +163,6 @@ const openMember = (item) =>
 .directory-context,
 .directory-search,
 .directory-content {
-  position: relative;
   z-index: 2;
 }
 .directory-context {
@@ -199,39 +184,33 @@ const openMember = (item) =>
   font-weight: 500;
 }
 .directory-search {
+  display: grid;
   width: calc(100% - 48rpx);
-  height: 44px;
+  min-height: 44px;
   margin: 20rpx auto 0;
-}
-.directory-search__frame {
-  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;
 }
 .directory-search input {
-  position: absolute;
-  top: 0;
-  right: 110rpx;
-  bottom: 0;
-  left: 26rpx;
   z-index: 1;
-  height: 44px;
+  grid-area: 1 / 1;
+  min-height: 44px;
+  margin-right: 110rpx;
+  margin-left: 26rpx;
   color: $ink;
   font-size: 26rpx;
   line-height: 44px;
 }
 .directory-search__action {
-  position: absolute;
-  top: 0;
-  right: 8rpx;
   z-index: 1;
   display: flex;
+  grid-area: 1 / 1;
+  justify-self: end;
   min-width: 88rpx;
   min-height: 44px;
   align-items: center;
   justify-content: center;
+  margin-right: 8rpx;
   color: $brand-red;
   font-size: 24rpx;
   font-weight: 700;
@@ -258,25 +237,17 @@ const openMember = (item) =>
   font-size: 23rpx;
 }
 .directory-card {
-  position: relative;
   display: flex;
   width: 100%;
-  height: 196rpx;
+  min-height: 196rpx;
   align-items: center;
   box-sizing: border-box;
   margin-bottom: 16rpx;
   padding: 18rpx 28rpx;
-}
-.directory-card__frame {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
+    center / 100% 100% no-repeat;
 }
 .directory-card__copy {
-  position: relative;
   z-index: 1;
   display: flex;
   min-width: 0;
@@ -285,21 +256,19 @@ const openMember = (item) =>
   justify-content: center;
 }
 .directory-card__name {
-  overflow: hidden;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
   font-size: 31rpx;
   font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
 }
 .directory-card__meta {
-  overflow: hidden;
   margin-top: 7rpx;
   color: #62584c;
   font-size: 24rpx;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
 }
 .directory-card__status {
   align-self: flex-start;
@@ -311,23 +280,21 @@ const openMember = (item) =>
   line-height: 30rpx;
 }
 .directory-state-card {
-  position: relative;
+  display: flex;
   width: 100%;
-  height: 220rpx;
+  min-height: 220rpx;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 16rpx;
-}
-.directory-state-card > image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  padding: 48rpx 12%;
+  box-sizing: border-box;
+  background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
+    center / 100% 100% no-repeat;
 }
 .directory-state-card {
   margin-top: 70rpx;
 }
 .directory-state-card > view {
-  position: absolute;
-  inset: 24% 12%;
   z-index: 1;
   text-align: center;
 }
@@ -351,7 +318,7 @@ const openMember = (item) =>
 }
 @media screen and (max-width: 340px) {
   .directory-card {
-    height: 192rpx;
+    min-height: 192rpx;
     padding-right: 22rpx;
     padding-left: 22rpx;
   }