From 7abe383744db1d4da7643f29432d6b07b0d44552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Sat, 27 Jan 2024 10:27:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E5=B8=96?=
 =?UTF-8?q?=E5=AD=90=E7=BB=84=E4=BB=B6=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tp-villaCard.vue   | 39 +++++++++-----------------
 src/components/post/tpo-collection.vue | 17 ++++++-----
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/components/post/tp-villaCard.vue b/src/components/post/tp-villaCard.vue
index 3f1aef31..a9d02ad7 100644
--- a/src/components/post/tp-villaCard.vue
+++ b/src/components/post/tp-villaCard.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- todo 样式优化 47041934-->
   <div
     class="tp-villa-card-box"
     :style="{
@@ -12,25 +11,25 @@
         <span class="tp-villa-card-name">{{ props.data.insert.villa_card.villa_name }}</span>
         <span class="tp-villa-card-owner">
           <img alt="topIcon" :src="props.data.insert.villa_card.owner_avatar_url" />
-          <span>{{ props.data.insert.villa_card.owner_nickname }} 创建</span>
+          <span>{{ props.data.insert.villa_card.owner_nickname }}</span>
         </span>
       </div>
     </div>
     <div class="tp-villa-card-tags">
       <div class="tp-villa-card-tag">
-        {{ props.data.insert.villa_card.villa_member_num }} 人在聊
+        <v-icon>mdi-account-group</v-icon>
+        <span>{{ props.data.insert.villa_card.villa_member_num }}</span>
       </div>
       <div
         v-for="(tag, index) in props.data.insert.villa_card?.tag_list"
         :key="index"
         class="tp-villa-card-tag"
       >
-        {{ tag }}
+        <v-icon>mdi-tag</v-icon>
+        <span>{{ tag }}</span>
       </div>
     </div>
-    <div class="tp-villa-card-desc">
-      {{ props.data.insert.villa_card.villa_introduce }}
-    </div>
+    <div class="tp-villa-card-desc">{{ props.data.insert.villa_card.villa_introduce }}</div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -102,6 +101,7 @@ console.log(
 .tp-villa-card-content img {
   width: 80px;
   height: 80px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
 }
 
@@ -117,10 +117,7 @@ console.log(
 .tp-villa-card-name {
   padding: 0 5px;
   border-radius: 5px;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: var(--common-shadow-t-2);
-  box-shadow: 0 0 5px var(--common-shadow-8);
+  background: var(--box-bg-1);
   color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
@@ -131,10 +128,7 @@ console.log(
   align-items: center;
   padding: 5px;
   border-radius: 20px 5px 5px 20px;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: var(--common-shadow-t-2);
-  box-shadow: 0 0 5px var(--common-shadow-8);
+  background: var(--box-bg-1);
   color: var(--common-text-title);
   column-gap: 5px;
 }
@@ -162,13 +156,11 @@ console.log(
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5px 10px;
+  padding: 0 5px;
   border-radius: 5px;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: var(--common-shadow-t-2);
-  box-shadow: 0 0 5px var(--common-shadow-8);
+  background: var(--box-bg-2);
   color: var(--tgc-pink-1);
+  column-gap: 2px;
   font-family: var(--font-title);
   font-size: 12px;
 }
@@ -177,13 +169,10 @@ console.log(
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 10px;
+  padding: 0 5px;
   border-radius: 5px;
   margin-right: auto;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: var(--common-shadow-t-2);
-  box-shadow: 0 0 5px var(--common-shadow-8);
+  background: var(--box-bg-2);
   color: var(--box-text-1);
 }
 </style>
diff --git a/src/components/post/tpo-collection.vue b/src/components/post/tpo-collection.vue
index 5aab7955..286a1dd8 100644
--- a/src/components/post/tpo-collection.vue
+++ b/src/components/post/tpo-collection.vue
@@ -6,12 +6,17 @@
         <span>合集ID：{{ props.collection.collection_id }}</span>
       </div>
       <div class="tpoc-list">
-        <!-- todo 加上封面 -->
         <div
           class="tpoc-item"
           v-for="(item, index) in posts"
           :key="index"
-          @click="toPost(item.postId)"
+          @click="toPost(item.postId, index)"
+          :style="{
+            backgroundColor:
+              index === props.collection.cur - 1 ? 'var(--box-bg-2)' : 'var(--box-bg-1)',
+            color: index === props.collection.cur - 1 ? 'var(--box-text-2)' : 'var(--box-text-1)',
+            cursor: index === props.collection.cur - 1 ? 'default' : 'pointer',
+          }"
         >
           <div class="tpoc-item-title" :title="item.title">{{ item.title }}</div>
           <div class="tpoc-item-info">
@@ -103,15 +108,15 @@ function getDate(date: number): string {
   return new Date(date * 1000).toLocaleString().replace(/\//g, "-").split(" ")[0];
 }
 
-function toPost(postId: string) {
-  if (router.currentRoute.value.params.post_id === postId) {
+async function toPost(postId: string, index: number): Promise<void> {
+  if (index === props.collection.cur - 1) {
     showSnackbar({
       text: "已经在当前帖子",
       color: "warn",
     });
     return;
   }
-  router.push({
+  await router.push({
     name: "帖子详情",
     params: {
       post_id: postId,
@@ -162,8 +167,6 @@ function toPost(postId: string) {
   padding: 10px;
   border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  background: var(--box-bg-2);
-  color: var(--box-text-2);
   cursor: pointer;
 }