✨ 完成尘歌壶数据渲染

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>

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>

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