♻️ 用户相关的四个一级页面勉强改完

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

@@ -21,12 +21,6 @@ interface TuaDetailBattleProps {
 const props = defineProps<TuaDetailBattleProps>();
 </script>
 <style lang="css" scoped>
-.tud-db-box {
-  padding: 5px;
-  border-radius: 5px;
-  background: var(--common-shadow-t-1);
-}
-
 .tud-db-icons-grid {
   display: flex;
   flex-direction: row;

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

@@ -25,9 +25,10 @@ const props = defineProps<TuaDetailLevelProps>();
   display: flex;
   flex-direction: column;
   padding: 10px;
+  border: 1px inset var(--common-shadow-2);
   border-radius: 5px;
   margin-top: 10px;
-  background: var(--common-shadow-1);
+  background: var(--box-bg-2);
   gap: 10px;
 }
 </style>

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

@@ -43,31 +43,27 @@ const props = defineProps<TuaDetailTitleProps>();
   height: 30px;
   align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid var(--common-shadow-4);
 }
 
 .tud-t-title {
-  color: var(--common-text-content);
+  color: var(--box-text-4);
 }
 
 .tud-t-val {
   display: flex;
   align-items: center;
-  color: var(--common-color-white);
-  font-family: var(--font-text);
-  text-shadow: 0 0 10px var(--common-color-yellow);
-}
-
-.dark .tud-t-val {
-  color: var(--common-color-yellow);
-  text-shadow: none;
+  color: var(--tgc-yellow-1);
+  font-family: var(--font-title);
+  gap: 5px;
 }
 
 .tud-t-val img {
   width: 20px;
   height: 20px;
+  padding: 1px;
   border-radius: 50%;
-  margin-right: 5px;
-  background: var(--common-shadow-4);
+  background: var(--tgc-btn-1);
   object-fit: cover;
 }
 </style>

src/components/userAbyss/tua-detail.vue

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

src/components/userAbyss/tua-overview.vue

@@ -45,26 +45,21 @@ const getIconNum = computed(() => (props.multi4 ? 4 : 1));
   align-items: center;
   justify-content: center;
   padding: 10px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  background: var(--common-shadow-1);
+  background: var(--box-bg-2);
 }
 
 .tuao-title {
-  color: var(--common-text-content);
+  color: var(--box-text-4);
   font-family: var(--font-title);
   font-size: 20px;
 }
 
 .tuao-val-text {
-  color: var(--common-color-white);
+  color: var(--tgc-yellow-1);
   font-family: var(--font-text);
   font-size: 20px;
-  text-shadow: 0 0 10px var(--common-color-yellow);
-}
-
-.dark .tuao-val-text {
-  color: var(--common-color-yellow);
-  text-shadow: none;
 }
 
 .tuao-val-icons {