From e1c8c20be295af12c97ee1e35921d73b891a9282 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sun, 2 Jul 2023 20:46:51 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B1=20=E8=A7=92=E8=89=B2=E6=8C=81?=
 =?UTF-8?q?=E6=9C=89=204/4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hutaoAbyss/hta-tab-hold.vue | 62 +++++++++++++++++++++-
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/components/hutaoAbyss/hta-tab-hold.vue b/src/components/hutaoAbyss/hta-tab-hold.vue
index be77dfd0..8e344d53 100644
--- a/src/components/hutaoAbyss/hta-tab-hold.vue
+++ b/src/components/hutaoAbyss/hta-tab-hold.vue
@@ -1,11 +1,69 @@
 <template>
-  {{ props.modelValue }}
+  <div class="hta-th-box">
+    <table class="hta-th-table">
+      <!-- 表头 -->
+      <tr>
+        <th>角色</th>
+        <th>持有</th>
+        <th>0命</th>
+        <th>1命</th>
+        <th>2命</th>
+        <th>3命</th>
+        <th>4命</th>
+        <th>5命</th>
+        <th>6命</th>
+      </tr>
+      <!-- 表格 -->
+      <tr v-for="item in props.modelValue" :key="item.holdingRate" class="hta-th-tr">
+        <td class="hta-th-td">
+          <TibWikiAbyss2 v-model="item.avatarId" />
+        </td>
+        <td>{{ (item.holdingRate * 100).toFixed(3) }}%</td>
+        <td v-for="rate in item.constellations" :key="rate.item">
+          {{ (rate.rate * 100).toFixed(3) }}%
+        </td>
+      </tr>
+    </table>
+  </div>
 </template>
 <script lang="ts" setup>
+// vue
+import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
+
 interface HtaTabHoldProps {
   modelValue: TGApp.Plugins.Hutao.Abyss.AvatarHold[];
-  data: TGApp.Sqlite.Character.AppData[];
 }
 
 const props = defineProps<HtaTabHoldProps>();
 </script>
+<style lang="css" scoped>
+.hta-th-box {
+  width: calc(100% - 10px);
+  height: 100%;
+  border: 1px inset var(--common-bg-1);
+  border-radius: 5px;
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.hta-th-table {
+  width: 100%;
+  text-align: center;
+}
+
+.hta-th-tr {
+  border-radius: 5px;
+  background: var(--common-bg-1);
+  border-collapse: collapse;
+}
+
+.hta-th-td {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>