♻️ 横版布局，美化样式

src/components/userAbyss/tua-detail-battle.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="tud-db-time">
-    {{ props.modelValue.time }}
-  </div>
-  <div class="tud-db-icons-grid">
-    <TibAbyssDetail
-      v-for="avatar in props.modelValue.characters"
-      :key="avatar.id"
-      :model-value="avatar"
-    />
+  <div class="tud-db-box">
+    <div class="tud-db-icons-grid">
+      <TibAbyssDetail
+        v-for="avatar in props.modelValue.characters"
+        :key="avatar.id"
+        :model-value="avatar"
+      />
+    </div>
+    <div class="tud-db-time">
+      {{ props.modelValue.time }}
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -20,17 +22,24 @@ interface TuaDetailBattleProps {
 const props = defineProps<TuaDetailBattleProps>();
 </script>
 <style lang="css" scoped>
+.tud-db-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .tud-db-icons-grid {
-  display: grid;
-  margin-bottom: 10px;
-  grid-gap: 10px;
-  grid-template-columns: repeat(4, 1fr);
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 10px;
 }
 
 .tud-db-time {
-  width: 100%;
-  color: var(--common-text-quote);
+  color: var(--common-text-content);
   font-size: 12px;
-  text-align: left;
+  text-align: center;
 }
 </style>

src/components/userAbyss/tua-detail-level.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="tud-dl-divider" />
-  <TuaDetailTitle
-    :val="props.modelValue.winStar"
-    :name="`第${props.modelValue.id}间`"
-    mode="level"
-  />
-  <TuaDetailBattle :model-value="props.modelValue.upBattle" />
-  <TuaDetailBattle :model-value="props.modelValue.downBattle" />
+  <div class="tua-dl-box">
+    <TuaDetailTitle
+      :val="props.modelValue.winStar"
+      :name="`第${props.modelValue.id}间`"
+      mode="level"
+    />
+    <TuaDetailBattle :model-value="props.modelValue.upBattle" />
+    <TuaDetailBattle :model-value="props.modelValue.downBattle" />
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
@@ -20,10 +21,13 @@ interface TuaDetailLevelProps {
 const props = defineProps<TuaDetailLevelProps>();
 </script>
 <style lang="css" scoped>
-.tud-dl-divider {
-  width: 100%;
-  height: 1px;
+.tua-dl-box {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
   border-radius: 5px;
-  background: var(--common-text-content);
+  margin-top: 10px;
+  background: var(--common-shadow-1);
+  gap: 10px;
 }
 </style>

src/components/userAbyss/tua-detail-title.vue

@@ -40,7 +40,6 @@ const props = defineProps<TuaDetailTitleProps>();
 <style lang="css" scoped>
 .tud-t-box {
   display: flex;
-  width: 100%;
   height: 30px;
   align-items: center;
   justify-content: space-between;
@@ -66,7 +65,9 @@ const props = defineProps<TuaDetailTitleProps>();
 .tud-t-val img {
   width: 20px;
   height: 20px;
+  border-radius: 50%;
   margin-right: 5px;
+  background: var(--common-shadow-4);
   object-fit: cover;
 }
 </style>

src/components/userAbyss/tua-detail.vue

@@ -5,6 +5,7 @@
       :name="`第${props.modelValue.id}层`"
       mode="floor"
     />
+    <div class="tuad-divider" />
     <div class="tuad-index-box">
       <TuaDetailLevel
         v-for="level in props.modelValue.levels"
@@ -25,15 +26,17 @@ interface TuaDetailProps {
 const props = defineProps<TuaDetailProps>();
 </script>
 <style lang="css" scoped>
-.tuad-box {
+.tuad-divider {
   width: 100%;
-  padding: 10px;
+  height: 1px;
   border-radius: 5px;
-  margin-bottom: 10px;
-  background: var(--common-shadow-1);
+  background: var(--common-text-content);
 }
 
 .tuad-index-box {
+  display: grid;
   width: 100%;
+  grid-gap: 10px;
+  grid-template-columns: repeat(3, 1fr);
 }
 </style>