💄 调整UI，添加medals

#157

src/components/userChallenge/tuc-challenge-item.vue

@@ -3,6 +3,9 @@
   <div class="tuc-challenge-item-comp" @click="console.log(props.data)">
     <div class="top-title">
       <div class="name">{{ props.data.name }} Lv.{{ props.data.monster.level }}</div>
+      <div class="tags">
+        <TucMonsterTag v-for="(tag, idx) in props.data.monster.tags" :key="idx" :data="tag" />
+      </div>
       <div class="append">
         <span>战斗用时：</span>
         <span>{{ props.data.second }}</span>
@@ -26,25 +29,24 @@
           </div>
         </div>
       </div>
-      <div class="right-monster">
-        <div class="icon">
-          <!--          <TMiImg :src="props.data.monster.icon" :alt="props.data.name" :ori="true" />-->
-          <img :src="props.data.monster.icon" :alt="props.data.name" />
-        </div>
-        <div class="tags">
-          <div class="tag" v-for="(tag, idx) in props.data.monster.tags" :key="idx">
-            <TucMonsterTag :data="tag" />
-          </div>
-        </div>
+      <div class="right-desc">
+        <span
+          v-html="parseHtmlText(desc)"
+          v-for="(desc, idx) in props.data.monster.desc"
+          :key="idx"
+        />
       </div>
     </div>
+    <div class="monster-icon">
+      <TMiImg :src="props.data.monster.icon" :alt="props.data.name" :ori="true" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 import TMiImg from "@comp/app/t-mi-img.vue";
 import TucMonsterTag from "@comp/userChallenge/tuc-monster-tag.vue";
-import { getZhElement } from "@utils/toolFunc.js";
+import { getZhElement, parseHtmlText } from "@utils/toolFunc.js";
 
 import { AppCharacterData } from "@/data/index.js";
 
@@ -92,6 +94,7 @@ function getTeamBox(avatar: TGApp.Game.Challenge.ChallengeTeam): TItemBoxData {
   position: relative;
   display: flex;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
   flex-direction: column;
   align-items: flex-start;
@@ -106,19 +109,30 @@ function getTeamBox(avatar: TGApp.Game.Challenge.ChallengeTeam): TItemBoxData {
 
 .top-title {
   position: relative;
+  z-index: 1;
   display: flex;
   width: 100%;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  column-gap: 12px;
 
   .name {
     font-family: var(--font-title);
     font-size: 16px;
   }
 
+  .tags {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 8px;
+  }
+
   .append {
     display: flex;
     align-items: center;
+    margin-left: auto;
     color: var(--box-text-2);
     font-family: var(--font-title);
     font-size: 14px;
@@ -139,9 +153,10 @@ function getTeamBox(avatar: TGApp.Game.Challenge.ChallengeTeam): TItemBoxData {
   position: relative;
   display: flex;
   width: 100%;
-  height: 120px;
+  min-height: 120px;
   align-items: flex-start;
-  justify-content: space-between;
+  justify-content: flex-start;
+  column-gap: 16px;
 }
 
 .left-info {
@@ -151,6 +166,7 @@ function getTeamBox(avatar: TGApp.Game.Challenge.ChallengeTeam): TItemBoxData {
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
+  row-gap: 16px;
 }
 
 .team-box {
@@ -202,34 +218,47 @@ function getTeamBox(avatar: TGApp.Game.Challenge.ChallengeTeam): TItemBoxData {
   background: linear-gradient(to right, var(--box-bg-2) 100px, var(--box-bg-1));
 }
 
-.right-monster {
+.right-desc {
   position: relative;
+  z-index: 1;
   display: flex;
   height: 100%;
   flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-end;
+  align-items: flex-start;
+  justify-content: center;
+  row-gap: 8px;
 
-  .icon {
-    position: absolute;
-    top: -16px;
-    right: 0;
-    height: 100%;
-    flex-shrink: 0;
-    aspect-ratio: 1;
+  span {
+    color: var(--box-text-1);
+    font-size: 14px;
+    line-height: 1.4;
+    text-align: left;
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
 
-    img {
-      width: 100%;
-      height: 100%;
+    :deep(span) {
+      font-weight: bold;
     }
   }
+}
 
-  .tags {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    column-gap: 8px;
+.monster-icon {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  opacity: 0.5;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
 }
+
+.dark .monster-icon {
+  opacity: 0.8;
+}
 </style>

src/components/userChallenge/tuc-overview.vue

@@ -1,14 +1,16 @@
 <!-- 幽境危战，单人/联机数据总览 -->
 <template>
   <div class="tuc-overview-comp" @click="onClick()">
-    <TSubline>{{ props.title }}{{ props.data.has_data ? "" : " (无数据) " }}</TSubline>
-    <div class="toc-best" v-if="props.data.best">
-      <div class="label">
+    <div class="toc-top-title">
+      <div class="title">{{ props.title }}{{ props.data.has_data ? "" : " (无数据) " }}</div>
+      <div class="append" v-if="props.data.best">
         <span>最佳记录</span>
-      </div>
-      <div class="append" :title="getDiffTitle(props.data.best)">
-        <span>{{ getDiffTitle(props.data.best) }}</span>
         <span>{{ props.data.best.second }}s</span>
+        <img
+          :title="getDiffTitle(props.data.best)"
+          :src="`/icon/medals/${props.data.best.icon}.webp`"
+          alt="medal"
+        />
       </div>
     </div>
     <TucChallengeItem
@@ -19,7 +21,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-import TSubline from "@comp/app/t-subline.vue";
 import TucChallengeItem from "@comp/userChallenge/tuc-challenge-item.vue";
 
 type TucOverviewProps = {
@@ -63,15 +64,17 @@ function getDiffTitle(best: TGApp.Game.Challenge.ChallengeBest): string {
   row-gap: 12px;
 }
 
-.toc-best {
+.toc-top-title {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
   color: var(--box-text-1);
 
-  .label {
+  .title {
     font-family: var(--font-title);
+    font-size: 16px;
+    font-weight: bold;
   }
 
   .append {
@@ -79,6 +82,16 @@ function getDiffTitle(best: TGApp.Game.Challenge.ChallengeBest): string {
     align-items: center;
     color: var(--box-text-2);
     gap: 4px;
+
+    span {
+      font-size: 14px;
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+    }
   }
 }
 </style>