💄 增大搜索悬浮窗面积

src/components/app/t-postcard.vue

@@ -1,3 +1,4 @@
+<!-- 帖子卡片组件 -->
 <template>
   <div
     v-if="card"
@@ -88,9 +89,6 @@
     </div>
     <div
       v-if="card.forum !== null && card.forum.name !== ''"
-      :style="{
-        background: str2Color(`${card.forum.id}${card.forum.name}`, -60),
-      }"
       :title="`频道: ${card.forum.name}`"
       class="tpc-forum"
       @click="toForum(card.forum)"
@@ -105,13 +103,7 @@
       data-html2canvas-ignore
       @click.stop="trySelect()"
     />
-    <div
-      v-else
-      :style="{
-        background: str2Color(`${props.modelValue.post.post_id}`, 0),
-      }"
-      class="tpc-info-id"
-    >
+    <div v-else class="tpc-info-id">
       <span>{{ props.modelValue.post.post_id }}</span>
       <template v-if="isDevEnv">
         <span data-html2canvas-ignore>[{{ props.modelValue.post.view_type }}]</span>
@@ -177,6 +169,10 @@ const cardBg = computed<string>(() => {
   if (card.value && card.value.status) return card.value.status.color;
   return "none";
 });
+const forumBg = computed<string>(() =>
+  str2Color(`${props.modelValue.forum?.id}${props.modelValue.forum?.name}`, -60),
+);
+const idBg = computed<string>(() => str2Color(`${props.modelValue.post.post_id}`, 0));
 
 onMounted(async () => (card.value = getPostCard(props.modelValue)));
 
@@ -308,7 +304,6 @@ function onUserClick(): void {
 
   position: relative;
   display: flex;
-  overflow: hidden;
   width: 100%;
   height: 100%;
   flex-direction: column;
@@ -328,10 +323,13 @@ function onUserClick(): void {
 
 .tpc-top {
   display: flex;
+  overflow: hidden;
   width: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
   row-gap: 4px;
 }
 
@@ -347,8 +345,11 @@ function onUserClick(): void {
   cursor: pointer;
 
   img {
+    overflow: hidden;
     width: 100%;
     height: 100%;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
     object-fit: cover;
     object-position: center;
     transition: all 0.3s linear;
@@ -421,7 +422,9 @@ function onUserClick(): void {
   padding: 4px;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
+  background: v-bind(forumBg); /* stylelint-disable-line value-keyword-case */
   border-bottom-left-radius: 4px;
+  border-top-right-radius: 4px;
   box-shadow: 0 0 10px var(--tgc-dark-1);
   color: var(--tgc-white-1);
   cursor: pointer;
@@ -548,13 +551,15 @@ function onUserClick(): void {
   top: 0;
   left: 0;
   display: flex;
+  overflow: hidden;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
-  background: var(--tgc-od-orange);
+  background: v-bind(idBg); /* stylelint-disable-line value-keyword-case */
   border-bottom-right-radius: 4px;
+  border-top-left-radius: 4px;
   box-shadow: 1px 1px 6px var(--tgc-dark-1);
   color: var(--tgc-white-1);
   font-size: 12px;

src/components/viewPost/vp-overlay-search.vue

@@ -6,27 +6,28 @@
       <div class="tops-act">
         <div class="tops-game">
           <span>分区：{{ label }}</span>
+          <span>加载帖子：{{ results.length }}</span>
         </div>
         <div class="tops-sort">
           <v-select
-            density="compact"
             v-model="sortType"
+            :disabled="load"
             :items="sortOrderList"
+            density="compact"
             item-title="text"
             item-value="value"
-            variant="outlined"
             label="排序"
-            :disabled="load"
+            variant="outlined"
           />
         </div>
       </div>
       <div class="tops-divider" />
-      <div class="tops-list" ref="listRef">
+      <div ref="listRef" class="tops-list">
         <TPostCard
-          class="tops-item"
-          :model-value="item"
           v-for="item in results"
           :key="item.post.post_id"
+          :model-value="item"
+          class="tops-item"
         />
       </div>
     </div>
@@ -164,15 +165,15 @@ async function searchPosts(): Promise<void> {
 .tops-box {
   position: relative;
   display: flex;
-  width: 400px;
-  height: 500px;
+  width: 1080px;
+  height: 600px;
   box-sizing: border-box;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 10px;
-  border-radius: 5px;
-  background-color: var(--box-bg-1);
+  padding: 8px;
+  border-radius: 4px;
+  background-color: var(--app-page-bg);
   row-gap: 8px;
 }
 
@@ -193,10 +194,18 @@ async function searchPosts(): Promise<void> {
   position: relative;
   display: flex;
   width: 100%;
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
 }
 
+.tops-game {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 8px;
+}
+
 .tops-sort {
   width: 100px;
   height: 40px;
@@ -211,19 +220,12 @@ async function searchPosts(): Promise<void> {
 
 .tops-list {
   position: relative;
-  display: flex;
+  display: grid;
   width: 100%;
-  height: 100%;
   box-sizing: border-box;
-  flex-direction: column;
-  padding-right: 8px;
-  padding-bottom: 8px;
+  padding-right: 4px;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   overflow-y: auto;
-  row-gap: 10px;
-}
-
-.tops-item {
-  height: fit-content;
-  flex-shrink: 0;
 }
 </style>