From 0baa7adafded6ae9a67ca69a8c076aeb0bcb96df Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sun, 27 Aug 2023 22:32:05 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E6=A8=AA=E7=89=88?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E7=BE=8E=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/themes/dark.css                    |  8 +++-
 src/assets/themes/default.css                 |  8 +++-
 .../userAbyss/tua-detail-battle.vue           | 41 +++++++++++--------
 src/components/userAbyss/tua-detail-level.vue | 28 +++++++------
 src/components/userAbyss/tua-detail-title.vue |  3 +-
 src/components/userAbyss/tua-detail.vue       | 11 +++--
 src/pages/User/Abyss.vue                      |  7 ++--
 7 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/src/assets/themes/dark.css b/src/assets/themes/dark.css
index 5eeaac55..c8031f18 100644
--- a/src/assets/themes/dark.css
+++ b/src/assets/themes/dark.css
@@ -2,7 +2,7 @@
  * @file assets themes light.css
  * @description 主题样式文件
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.1
+ * @since Alpha v0.2.3
  */
 
 /* 主题色 */
@@ -13,6 +13,12 @@ html.dark {
   --common-shadow-4: rgb(255 255 255 / 40%);
   --common-shadow-8: rgb(255 255 255 / 80%);
 
+  /* box-shadow-transparent */
+  --common-shadow-t-1: rgb(0 0 0 / 10%);
+  --common-shadow-t-2: rgb(0 0 0 / 20%);
+  --common-shadow-t-4: rgb(0 0 0 / 40%);
+  --common-shadow-t-8: rgb(0 0 0 / 80%);
+
   /* box bg */
   --common-bg-1: #3d424b; /* 一级背景色 */
   --common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
diff --git a/src/assets/themes/default.css b/src/assets/themes/default.css
index 59c84507..af472a1f 100644
--- a/src/assets/themes/default.css
+++ b/src/assets/themes/default.css
@@ -2,7 +2,7 @@
  * @file assets themes dark.css
  * @description 主题样式文件
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.1
+ * @since Alpha v0.2.3
  */
 
 /* 主题色 */
@@ -13,6 +13,12 @@ html.default {
   --common-shadow-4: rgb(0 0 0 / 40%);
   --common-shadow-8: rgb(0 0 0 / 80%);
 
+  /* box-shadow-transparent */
+  --common-shadow-t-1: rgb(255 255 255 / 10%);
+  --common-shadow-t-2: rgb(255 255 255 / 20%);
+  --common-shadow-t-4: rgb(255 255 255 / 40%);
+  --common-shadow-t-8: rgb(255 255 255 / 80%);
+
   /* box bg */
   --common-bg-1: #faf7e8; /* 一级背景色 */
   --common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
diff --git a/src/components/userAbyss/tua-detail-battle.vue b/src/components/userAbyss/tua-detail-battle.vue
index 88ba2508..5cca8939 100644
--- a/src/components/userAbyss/tua-detail-battle.vue
+++ b/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>
diff --git a/src/components/userAbyss/tua-detail-level.vue b/src/components/userAbyss/tua-detail-level.vue
index 3021e96c..4427dfe7 100644
--- a/src/components/userAbyss/tua-detail-level.vue
+++ b/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>
diff --git a/src/components/userAbyss/tua-detail-title.vue b/src/components/userAbyss/tua-detail-title.vue
index 3dcbca81..fa456923 100644
--- a/src/components/userAbyss/tua-detail-title.vue
+++ b/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>
diff --git a/src/components/userAbyss/tua-detail.vue b/src/components/userAbyss/tua-detail.vue
index 10da882f..d34b245b 100644
--- a/src/components/userAbyss/tua-detail.vue
+++ b/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>
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index 98c485c6..d5ce6a02 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -272,10 +272,9 @@ async function uploadAbyss(): Promise<void> {
 }
 
 .uaw-d-box {
-  display: grid;
-  width: 100%;
-  grid-gap: 10px;
-  grid-template-columns: repeat(4, 1fr);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .user-empty {