From 9e9ba53d99b0b6c727814a5564519f08ab36b9e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Sat, 17 Aug 2024 16:14:48 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E5=88=86=E4=BA=AB=E6=88=AA=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tp-vod.vue | 58 ++++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/components/post/tp-vod.vue b/src/components/post/tp-vod.vue
index c9bc4fec..567c79ff 100644
--- a/src/components/post/tp-vod.vue
+++ b/src/components/post/tp-vod.vue
@@ -5,10 +5,17 @@
       data-html2canvas-ignore
       :id="`tp-vod-${props.data.insert.vod.id}`"
     ></div>
-    <div class="tp-vod-cover">
-      <img alt="cover" :src="props.data.insert.vod.cover" />
-      <img src="/source/UI/video_play.svg" alt="icon" />
-      <span>{{ getVodTime() }}</span>
+    <div class="tp-vod-share">
+      <img alt="cover" :src="props.data.insert.vod.cover" class="tp-vod-cover" />
+      <img src="/source/UI/video_play.svg" alt="icon" class="tp-vod-icon" />
+      <div class="tp-vod-time">
+        <v-icon size="12">mdi-clock-time-four-outline</v-icon>
+        <span>{{ getVodTime() }}</span>
+      </div>
+      <div class="tp-vod-view">
+        <v-icon size="12">mdi-eye</v-icon>
+        <span>{{ props.data.insert.vod.view_num ?? 0 }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -153,7 +160,7 @@ function getVodTime(): string {
   aspect-ratio: v-bind(vodAspectRatio);
 }
 
-.tp-vod-cover {
+.tp-vod-share {
   position: absolute;
   z-index: -1;
   top: 0;
@@ -167,28 +174,51 @@ function getVodTime(): string {
   aspect-ratio: v-bind(vodAspectRatio);
 }
 
-.tp-vod-cover :first-child {
+.tp-vod-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   object-fit: cover;
 }
 
-.tp-vod-cover :nth-child(2) {
+.tp-vod-icon {
   position: absolute;
-  top: calc(50% - 40px);
-  left: calc(50% - 40px);
-  width: 80px;
-  height: 80px;
+  top: 50%;
+  left: 50%;
+  width: 50px;
+  height: 50px;
+  opacity: 0.8;
+  transform: translate(-50%, -50%);
 }
 
-.tp-vod-cover :nth-child(3) {
+.tp-vod-time {
   position: absolute;
-  right: 10px;
   bottom: 10px;
-  padding: 0 5px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: rgb(0 0 0/50%);
+  color: var(--tgc-white-4);
+  font-family: var(--font-title);
+  font-size: 12px;
+  gap: 5px;
+}
+
+.tp-vod-view {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  padding: 2px 5px;
   border-radius: 5px;
   background: rgb(0 0 0/50%);
   color: var(--tgc-white-4);
   font-family: var(--font-title);
   font-size: 12px;
+  gap: 5px;
 }
 </style>