♻️ 通用帖子卡片抽离出来作为组件

src/components/main/t-postcard.vue

@@ -0,0 +1,319 @@
+<template>
+  <v-card class="tpc-card" v-if="card">
+    <div class="tpc-cover">
+      <img :src="card.cover" alt="cover" @click="createPost(card)" />
+      <div v-if="isAct" class="tpc-act">
+        <div class="tpc-status" :style="{ background: card.status?.colorCss }">
+          {{ card.status?.status }}
+        </div>
+        <div class="tpc-time">
+          <v-icon>mdi-clock-time-four-outline</v-icon>
+          <span>{{ card.subtitle }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="tpc-content">
+      <div class="tpc-title" :title="card.title">{{ card.title }}</div>
+      <TpAvatar :data="card.user" position="left" />
+      <div class="tpc-data">
+        <div class="tpc-info-item" :title="`浏览数：${card.data.view}`">
+          <v-icon>mdi-eye</v-icon>
+          <span>{{ card.data.view }}</span>
+        </div>
+        <div class="tpc-info-item" :title="`收藏数：${card.data.mark}`">
+          <v-icon>mdi-star</v-icon>
+          <span>{{ card.data.mark }}</span>
+        </div>
+        <div class="tpc-info-item" :title="`回复数：${card.data.reply}`">
+          <v-icon>mdi-comment</v-icon>
+          <span>{{ card.data.reply }}</span>
+        </div>
+        <div class="tpc-info-item" :title="`点赞数：${card.data.like}`">
+          <v-icon>mdi-thumb-up</v-icon>
+          <span>{{ card.data.like }}</span>
+        </div>
+        <div class="tpc-info-item" :title="`转发数：${card.data.forward}`">
+          <v-icon>mdi-share-variant</v-icon>
+          <span>{{ card.data.forward }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="tpc-forum" :title="`频道: ${card.forum.name}`">
+      <img :src="card.forum.icon" :alt="card.forum.name" />
+      <span>{{ card.forum.name }}</span>
+    </div>
+  </v-card>
+</template>
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeMount, onMounted, ref, toRaw, watch } from "vue";
+
+import { createPost } from "../../utils/TGWindow";
+import TpAvatar from "../post/tp-avatar.vue";
+
+interface TPostCardProps {
+  modelValue: TGApp.Plugins.Mys.Post.FullData;
+}
+
+const props = defineProps<TPostCardProps>();
+const isAct = ref<boolean>(false);
+const card = ref<TGApp.Plugins.Mys.News.RenderCard>();
+
+onBeforeMount(() => {
+  card.value = getPostCard(props.modelValue);
+});
+
+/**
+ * @description 活动状态
+ * @since Alpha v0.2.1
+ * @enum {TGApp.Plugins.Mys.News.RenderStatus}
+ * @property {TGApp.Plugins.Mys.News.RenderStatus} STARTED 进行中
+ * @property {TGApp.Plugins.Mys.News.RenderStatus} FINISHED 已结束
+ * @property {TGApp.Plugins.Mys.News.RenderStatus} SELECTION 评选中
+ * @return EnumStatus
+ */
+const EnumStatus = {
+  STARTED: {
+    status: "进行中",
+    colorCss: "#1EE2BA",
+  },
+  FINISHED: {
+    status: "已结束",
+    colorCss: "#C0C5C8",
+  },
+  SELECTION: {
+    status: "评选中",
+    colorCss: "#FF983B",
+  },
+  UNKNOWN: {
+    status: "未知",
+    colorCss: "#F03F24", // 胭脂红
+  },
+};
+
+/**
+ * @description 获取活动状态
+ * @since Alpha
+ * @param {number} status 活动状态码
+ * @returns {string}
+ */
+function getActivityStatus(status: number): TGApp.Plugins.Mys.News.RenderStatus {
+  switch (status) {
+    case 1:
+      return EnumStatus.STARTED;
+    case 2:
+      return EnumStatus.SELECTION;
+    case 3:
+      return EnumStatus.FINISHED;
+    default:
+      return EnumStatus.UNKNOWN;
+  }
+}
+
+/**
+ * @description 获取封面图
+ * @since Beta v0.4.5
+ * @param {TGApp.Plugins.Mys.Post.FullData} item 咨讯列表项
+ * @returns {string} 封面图链接
+ */
+function getPostCover(item: TGApp.Plugins.Mys.Post.FullData): string {
+  // 默认封面图
+  const defaultCover = "/source/UI/defaultCover.webp";
+  let cover;
+  if (item.cover) {
+    cover = item.cover.url;
+  } else if (item.post.cover) {
+    cover = item.post.cover;
+  } else if (item.post.images.length > 0) {
+    cover = item.post.images[0];
+  }
+  if (cover === undefined) return defaultCover;
+  if (cover.endsWith(".gif")) return cover;
+  return `${cover}?x-oss-process=image/format,png`;
+}
+
+/**
+ * @description 获取公共属性
+ * @since Beta v0.4.5
+ * @param {TGApp.Plugins.Mys.Post.FullData} item 咨讯列表项
+ * @returns {TGApp.Plugins.Mys.News.RenderCard} 渲染用咨讯列表项
+ */
+function getCommonCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.News.RenderCard {
+  return {
+    title: item.post.subject,
+    cover: getPostCover(item),
+    postId: Number(item.post.post_id),
+    subtitle: item.post.post_id,
+    user: item.user,
+    forum: {
+      name: item.forum.name,
+      icon: item.forum.icon,
+    },
+    data: {
+      mark: item.stat.bookmark_num,
+      forward: item.stat.forward_num,
+      like: item.stat.like_num,
+      reply: item.stat.reply_num,
+      view: item.stat.view_num,
+    },
+  };
+}
+
+function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.News.RenderCard {
+  const commonCard = getCommonCard(item);
+  if (item.news_meta !== null && item.news_meta.start_at_sec !== "0") {
+    isAct.value = true;
+    const startTime = new Date(Number(item.news_meta.start_at_sec) * 1000).toLocaleDateString();
+    const endTime = new Date(Number(item.news_meta.end_at_sec) * 1000).toLocaleDateString();
+    const statusInfo = getActivityStatus(item.news_meta.activity_status);
+    commonCard.subtitle = `${startTime} - ${endTime}`;
+    commonCard.status = statusInfo;
+  }
+  return commonCard;
+}
+</script>
+<style lang="css" scoped>
+.tpc-card {
+  border-radius: 5px;
+  background: var(--app-page-bg);
+  color: var(--box-text-1);
+}
+
+.dark .tpc-card {
+  border: 1px solid var(--common-shadow-2);
+}
+
+.tpc-cover {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 36 / 13;
+}
+
+.tpc-cover img {
+  min-width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  transition: all 0.3s linear;
+}
+
+.tpc-content {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: 10px;
+  gap: 10px;
+}
+
+.tpc-title {
+  overflow: hidden;
+  width: 100%;
+  font-size: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tpc-forum {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  background: rgb(0 0 0/20%);
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 5px;
+  box-shadow: 0 0 10px var(--tgc-dark-1);
+  color: var(--tgc-white-1);
+}
+
+.tpc-forum img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.tpc-cover img:hover {
+  cursor: pointer;
+  transform: scale(1.1);
+  transition: all 0.3s linear;
+}
+
+.tpc-data {
+  display: flex;
+  width: 100%;
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 5px;
+  column-gap: 10px;
+}
+
+.tpc-info-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--box-text-7);
+  font-size: 12px;
+  gap: 5px;
+  opacity: 0.6;
+}
+
+.tpc-act {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  background: rgb(0 0 0/50%);
+  font-size: 12px;
+}
+
+.tpc-status {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px 30px 5px 5px;
+  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
+  color: var(--tgc-white-1);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgb(255 255 255/40%);
+    clip-path: polygon(
+      calc(100% - 25px) 0,
+      100% 0,
+      100% 100%,
+      calc(100% - 25px) 100%,
+      calc(100% - 10px) 50%
+    );
+    content: "";
+  }
+}
+
+.tpc-time {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 5px;
+  color: var(--tgc-white-1);
+  gap: 5px;
+  opacity: 0.8;
+}
+</style>

src/pages/common/News.vue

@@ -28,58 +28,12 @@
   <v-window v-model="tab">
     <v-window-item v-for="(value, index) in tabValues" :key="index" :value="value">
       <div class="news-grid">
-        <v-card v-for="item in postData[value]" :key="item.postId" class="news-card">
-          <div class="news-cover">
-            <img :src="item.cover" alt="cover" @click="createPost(item)" />
-            <div v-if="value === 'activity'" class="news-card-act">
-              <div
-                class="nca-status"
-                :style="{
-                  background: item.status?.colorCss,
-                }"
-              >
-                {{ item.status?.status }}
-              </div>
-              <div class="nca-time">
-                <v-icon>mdi-clock-time-four-outline</v-icon>
-                <span>{{ item.subtitle }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="news-content">
-            <div class="news-card-title" :title="item.title">{{ item.title }}</div>
-            <TpAvatar :data="item.user" position="left" />
-            <div class="news-card-data">
-              <div class="ncd-item" :title="`浏览数：${item.data.view}`">
-                <v-icon>mdi-eye</v-icon>
-                <span>{{ item.data.view }}</span>
-              </div>
-              <div class="ncd-item" :title="`收藏数：${item.data.mark}`">
-                <v-icon>mdi-star</v-icon>
-                <span>{{ item.data.mark }}</span>
-              </div>
-              <div class="ncd-item" :title="`回复数：${item.data.reply}`">
-                <v-icon>mdi-comment</v-icon>
-                <span>{{ item.data.reply }}</span>
-              </div>
-              <div class="ncd-item" :title="`点赞数：${item.data.like}`">
-                <v-icon>mdi-thumb-up</v-icon>
-                <span>{{ item.data.like }}</span>
-              </div>
-              <div class="ncd-item" :title="`转发数：${item.data.forward}`">
-                <v-icon>mdi-share-variant</v-icon>
-                <span>{{ item.data.forward }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="news-card-forum" :title="`频道: ${item.forum.name}`">
-            <img :src="item.forum.icon" :alt="item.forum.name" />
-            <span>{{ item.forum.name }}</span>
-          </div>
-        </v-card>
+        <div v-for="item in postData[value]" :key="item.post.post_id">
+          <TPostCard :model-value="item" />
+        </div>
       </div>
       <div class="load-news">
-        <v-btn :loading="loadingSub" @click="loadMore(value)">
+        <v-btn class="news-switch-btn" rounded :loading="loadingSub" @click="loadMore(value)">
           已加载：{{ rawData[value].lastId }}，加载更多
         </v-btn>
       </div>
@@ -93,9 +47,9 @@ import { nextTick, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import showSnackbar from "../../components/func/snackbar";
+import TPostCard from "../../components/main/t-postcard.vue";
 import ToChannel from "../../components/overlay/to-channel.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
-import TpAvatar from "../../components/post/tp-avatar.vue";
 import Mys from "../../plugins/Mys";
 import { useAppStore } from "../../store/modules/app";
 import TGLogger from "../../utils/TGLogger";
@@ -110,7 +64,7 @@ enum NewsType {
 
 type NewsKey = keyof typeof NewsType;
 type PostData = {
-  [key in NewsKey]: TGApp.Plugins.Mys.News.RenderCard[];
+  [key in NewsKey]: TGApp.Plugins.Mys.Post.FullData[];
 };
 type RawData = {
   [key in NewsKey]: {
@@ -186,7 +140,7 @@ async function firstLoad(key: NewsKey): Promise<void> {
   const getData = await Mys.News.get(gid, NewsType[key]);
   rawData.value[key].isLast = getData.is_last;
   rawData.value[key].lastId = getData.list.length;
-  postData.value[key] = Mys.News.card[key](getData);
+  postData.value[key] = getData.list;
   loadingTitle.value = `正在渲染${rawData.value[key].name}数据...`;
   await nextTick(() => {
     loading.value = false;
@@ -215,8 +169,7 @@ async function loadMore(key: NewsKey): Promise<void> {
   const getData = await Mys.News.get(gid, NewsType[key], 20, rawData.value[key].lastId);
   rawData.value[key].lastId = rawData.value[key].lastId + getData.list.length;
   rawData.value[key].isLast = getData.is_last;
-  const getCard = Mys.News.card[key](getData);
-  postData.value[key] = postData.value[key].concat(getCard);
+  postData.value[key] = postData.value[key].concat(getData.list);
   if (rawData.value[key].isLast) {
     showSnackbar({
       text: "已经是最后一页了",
@@ -283,154 +236,6 @@ function searchPost(): void {
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 }
 
-.news-card {
-  border-radius: 5px;
-  background: var(--app-page-bg);
-  color: var(--box-text-1);
-}
-
-/* 增加辨识度 */
-.dark .news-card {
-  border: 1px solid var(--common-shadow-2);
-}
-
-.news-cover {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 36 / 13;
-}
-
-.news-cover img {
-  min-width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  transition: all 0.3s linear;
-}
-
-/* news item info */
-.news-content {
-  position: relative;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  padding: 10px;
-  gap: 10px;
-}
-
-.news-card-title {
-  overflow: hidden;
-  width: 100%;
-  font-size: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.news-card-forum {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 5px;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: rgb(0 0 0/20%);
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-  box-shadow: 0 0 10px var(--tgc-dark-1);
-  color: var(--tgc-white-1);
-}
-
-.news-card-forum img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.news-cover img:hover {
-  cursor: pointer;
-  transform: scale(1.1);
-  transition: all 0.3s linear;
-}
-
-.news-card-data {
-  display: flex;
-  width: 100%;
-  height: 20px;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 5px;
-  column-gap: 10px;
-}
-
-.ncd-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--box-text-7);
-  font-size: 12px;
-  gap: 5px;
-  opacity: 0.6;
-}
-
-/* 活动页 */
-.news-card-act {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: rgb(0 0 0/50%);
-  font-size: 12px;
-}
-
-.nca-status {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 5px 30px 5px 5px;
-  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
-  color: var(--tgc-white-1);
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(255 255 255/40%);
-    clip-path: polygon(
-      calc(100% - 25px) 0,
-      100% 0,
-      100% 100%,
-      calc(100% - 25px) 100%,
-      calc(100% - 10px) 50%
-    );
-    content: "";
-  }
-}
-
-.nca-time {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin: 5px;
-  color: var(--tgc-white-1);
-  gap: 5px;
-  opacity: 0.8;
-}
-
 /* load more */
 .load-news {
   display: flex;
@@ -440,10 +245,4 @@ function searchPost(): void {
   font-family: var(--font-title);
   transition: all 0.3s linear;
 }
-
-.load-news button {
-  border-radius: 5px;
-  background: var(--tgc-btn-1);
-  color: var(--btn-text);
-}
 </style>

src/pages/common/Posts.vue

@@ -34,7 +34,7 @@
         @click:append="searchPost"
         @keyup.enter="searchPost"
       />
-      <v-btn class="post-fresh-btn" @click="freshPostData()">
+      <v-btn rounded class="post-fresh-btn" @click="freshPostData()">
         <v-icon>mdi-refresh</v-icon>
         <span>刷新</span>
       </v-btn>
@@ -46,41 +46,9 @@
       </div>
     </div>
     <div class="posts-grid">
-      <v-card v-for="post in posts" :key="post.postId" class="post-card">
-        <div class="post-cover" @click="createPost(post)">
-          <img :src="post.cover" alt="cover" />
-        </div>
-        <div class="post-content">
-          <div class="post-card-title" :title="post.title">{{ post.title }}</div>
-          <TpAvatar :data="post.user" position="left" />
-          <div class="post-card-data">
-            <div class="pcd-item" :title="`浏览数：${post.data.view}`">
-              <v-icon>mdi-eye</v-icon>
-              <span>{{ post.data.view }}</span>
-            </div>
-            <div class="pcd-item" :title="`收藏数：${post.data.mark}`">
-              <v-icon>mdi-star</v-icon>
-              <span>{{ post.data.mark }}</span>
-            </div>
-            <div class="pcd-item" :title="`回复数：${post.data.reply}`">
-              <v-icon>mdi-comment</v-icon>
-              <span>{{ post.data.reply }}</span>
-            </div>
-            <div class="pcd-item" :title="`点赞数：${post.data.like}`">
-              <v-icon>mdi-thumb-up</v-icon>
-              <span>{{ post.data.like }}</span>
-            </div>
-            <div class="pcd-item" :title="`转发数：${post.data.forward}`">
-              <v-icon>mdi-share-variant</v-icon>
-              <span>{{ post.data.forward }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="post-card-forum" :title="`频道: ${post.forum.name}`">
-          <img :src="post.forum.icon" :alt="post.forum.name" />
-          <span>{{ post.forum.name }}</span>
-        </div>
-      </v-card>
+      <div v-for="post in posts" :key="post.post.post_id">
+        <TPostCard :model-value="post" v-if="post" />
+      </div>
     </div>
   </div>
 </template>
@@ -89,8 +57,8 @@ import { nextTick, onMounted, ref, watch } from "vue";
 
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
+import TPostCard from "../../components/main/t-postcard.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
-import TpAvatar from "../../components/post/tp-avatar.vue";
 import Mys from "../../plugins/Mys";
 import TGClient from "../../utils/TGClient";
 import TGLogger from "../../utils/TGLogger";
@@ -178,10 +146,10 @@ const curGameLabel = ref<keyof typeof gameList>("原神");
 const gameItem = ref<string[]>([
   "原神",
   "崩坏：星穹铁道",
+  "绝区零",
   "崩坏3",
   "崩坏2",
   "未定事件簿",
-  "绝区零",
   "大别野",
 ]);
 const curGid = ref<number>(2);
@@ -192,7 +160,7 @@ const sortItem = ref<string[]>(["默认排序", "最新回复", "最新发布"])
 const curSortType = ref<number>(0);
 
 // 渲染数据
-const posts = ref<TGApp.Plugins.Mys.Forum.RenderCard[]>([]);
+const posts = ref<TGApp.Plugins.Mys.Post.FullData[]>([]);
 const nav = ref<TGApp.BBS.Navigator.Navigator[]>([]);
 const search = ref<string>();
 
@@ -241,6 +209,7 @@ async function toNav(item: TGApp.BBS.Navigator.Navigator): Promise<void> {
     "https://webstatic.mihoyo.com",
     "https://bbs.mihoyo.com",
     "https://qaa.miyoushe.com",
+    "https://mhyurl.cn",
   ];
   if (link.protocol != "https:") {
     toBBS(link);
@@ -299,7 +268,7 @@ async function freshPostData(): Promise<void> {
   loading.value = true;
   loadingTitle.value = `正在加载 ${curGameLabel.value}-${curForumLabel.value}-${curSortLabel.value} 的数据`;
   const postsGet = await Mys.Posts.get(curForum.value, curSortType.value);
-  posts.value = Mys.Posts.card(postsGet);
+  posts.value = postsGet.list;
   await nextTick();
   loading.value = false;
 }
@@ -404,98 +373,4 @@ function searchPost(): void {
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 }
-
-.post-card {
-  border-radius: 5px;
-  background: var(--app-page-bg);
-  color: var(--box-text-1);
-}
-
-.dark .post-card {
-  border: 1px solid var(--common-shadow-2);
-}
-
-.post-cover {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 36 / 13;
-}
-
-.post-cover img {
-  min-width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  transition: all 0.3s linear;
-}
-
-.post-content {
-  position: relative;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  padding: 10px;
-  gap: 10px;
-}
-
-.post-card-title {
-  overflow: hidden;
-  width: 100%;
-  font-size: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.post-card-forum {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 5px;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  background: rgb(0 0 0/20%);
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-  box-shadow: 0 0 10px var(--tgc-dark-1);
-  color: var(--tgc-white-1);
-}
-
-.post-card-forum img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.post-cover img:hover {
-  cursor: pointer;
-  transform: scale(1.1);
-  transition: all 0.3s linear;
-}
-
-.post-card-data {
-  display: flex;
-  width: 100%;
-  height: 20px;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 5px;
-  column-gap: 10px;
-}
-
-.pcd-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--box-text-7);
-  font-size: 12px;
-  gap: 5px;
-  opacity: 0.6;
-}
 </style>