修改完成

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;