From 0170c80e024b4d543c194d7e34b4e53b8bdf68b0 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Wed, 14 Jun 2023 11:41:26 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E5=AE=8C=E6=88=90=E5=B0=98?=
 =?UTF-8?q?=E6=AD=8C=E5=A3=B6=E6=95=B0=E6=8D=AE=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userRecord/tur-home-grid.vue | 33 +++++++
 src/components/userRecord/tur-home-sub.vue  | 98 +++++++++++++++++++++
 src/pages/User/Record.vue                   |  3 +-
 3 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 src/components/userRecord/tur-home-grid.vue
 create mode 100644 src/components/userRecord/tur-home-sub.vue

diff --git a/src/components/userRecord/tur-home-grid.vue b/src/components/userRecord/tur-home-grid.vue
new file mode 100644
index 00000000..4b169633
--- /dev/null
+++ b/src/components/userRecord/tur-home-grid.vue
@@ -0,0 +1,33 @@
+<template>
+  <div v-if="props.modelValue===undefined">
+    暂无数据
+  </div>
+  <div v-else class="tur-hg-box">
+    <TurHomeSub v-for="home in homes" :data="home" />
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TurHomeSub from "./tur-home-sub.vue";
+
+interface TurHomeGridProps {
+  modelValue?: string;
+}
+
+const props = defineProps<TurHomeGridProps>();
+const homes = computed(() => {
+  const res = JSON.parse(props.modelValue || "[]") as TGApp.Sqlite.Record.Home[];
+  if (res.length > 0) {
+    return res;
+  }
+});
+</script>
+<style lang="css" scoped>
+.tur-hg-box {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  width: 100%;
+}
+</style>
diff --git a/src/components/userRecord/tur-home-sub.vue b/src/components/userRecord/tur-home-sub.vue
new file mode 100644
index 00000000..bb454ae1
--- /dev/null
+++ b/src/components/userRecord/tur-home-sub.vue
@@ -0,0 +1,98 @@
+<template>
+  <div
+    class="tur-hs-box"
+    :style="{
+      backgroundImage: 'url(' + data.bg + ')',
+      backgroundSize: 'cover',
+    }"
+  >
+    <div class="tur-hs-name">
+      {{ data.name }}
+    </div>
+    <div class="tur-hs-title">
+      <img :src="data.comfortIcon" alt="comfort">
+      {{ data.comfortName }}
+    </div>
+    <div class="tur-hs-text-grid">
+      <div class="tur-hs-text">
+        <div>{{ data.level }}</div>
+        <div>信任等阶</div>
+      </div>
+      <div class="tur-hs-text">
+        <div>{{ data.comfort }}</div>
+        <div>最高洞天仙力</div>
+      </div>
+      <div class="tur-hs-text">
+        <div>{{ data.furniture }}</div>
+        <div>获得摆设数</div>
+      </div>
+      <div class="tur-hs-text">
+        <div>{{ data.visit }}</div>
+        <div>历史访客数</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TurHomeSubProps {
+  data: TGApp.Sqlite.Record.Home;
+}
+
+const props = defineProps<TurHomeSubProps>();
+console.log(props.data);
+</script>
+<style lang="css" scoped>
+.tur-hs-box {
+  border-radius: 5px;
+  position: relative;
+}
+
+.tur-hs-name {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-family: var(--font-text);
+  font-size: 16px;
+  color: var(--common-color-white);
+  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
+}
+
+.tur-hs-title {
+  padding: 10px;
+  font-family: var(--font-title);
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  color: var(--common-color-white);
+  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
+}
+
+.tur-hs-title img {
+  width: 30px;
+  height: 30px;
+  margin-right: 5px;
+}
+
+.tur-hs-text-grid {
+  padding: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  background: rgb(0 0 0 / 20%);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  text-align: center;
+  color: var(--common-color-white);
+}
+
+.tur-hs-text :nth-child(1) {
+  font-family: var(--font-text);
+  text-shadow: #fec90b 0 0 5px;
+}
+
+.tur-hs-text :nth-child(2) {
+  font-family: var(--font-title);
+  font-size: 16px;
+  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
+}
+</style>
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index fb54f24c..5ccd6ba9 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -29,7 +29,7 @@
       <img src="/src/assets/icons/arrow-right.svg" alt="overview">
       <span>尘歌壶</span>
     </div>
-    {{ recordData.homes }}
+    <TurHomeGrid v-model="recordData.homes" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -39,6 +39,7 @@ import ToLoading from "../../components/overlay/to-loading.vue";
 import TurOverviewGrid from "../../components/userRecord/tur-overview-grid.vue";
 import TurAvatarGrid from "../../components/userRecord/tur-avatar-grid.vue";
 import TurWorldGrid from "../../components/userRecord/tur-world-grid.vue";
+import TurHomeGrid from "../../components/userRecord/tur-home-grid.vue";
 // store
 import { useUserStore } from "../../store/modules/user";
 // utils