From 2bbe0cf3bd0fd5a7939a38acf5d41ae484dfabfc Mon Sep 17 00:00:00 2001
From: Huangzhe <huang.ze@ebiz-digits.com>
Date: Wed, 21 May 2025 19:43:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(ad)=20:=20=E7=BB=99=E5=B9=BF=E5=91=8A?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9C=86=E8=A7=92=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AD/Index.vue | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/views/AD/Index.vue b/src/views/AD/Index.vue
index 94a5295..8e8420e 100644
--- a/src/views/AD/Index.vue
+++ b/src/views/AD/Index.vue
@@ -8,19 +8,20 @@ import { bannerInfo } from '@/views/AD/hooks/useAD';
       <h3>{{ bannerInfo?.title }}</h3>
       <el-space spacer="|">
         <!-- <el-text type="success">{{ bannerInfo.characters }}</el-text> -->
-        <el-text>{{ bannerInfo.publish_time.split('-').join('.') }} 发布</el-text>
+        <el-text>{{ bannerInfo?.publish_time.split('-').join('.') }} 发布</el-text>
       </el-space>
     </section>
+    <!-- banner内容 -->
     <article>
       <!-- 根据banner的类型使用不同的方式渲染 -->
-      <section v-if="bannerInfo?.type === 0">
+      <section class="banner-text" v-if="bannerInfo?.type === 0">
         <p>{{ bannerInfo.synopsis }}</p>
       </section>
-      <section v-else-if="bannerInfo?.type === 1">
-        <el-image :src="bannerInfo.file_address"></el-image>
-      </section>
-      <section v-else-if="bannerInfo?.type === 2">
-        <video width="320" height="240" controls>
+      <div class="banner-image" v-else-if="bannerInfo?.type === 1">
+        <el-image fit="cover" loading="lazy" :src="bannerInfo.file_address" />
+      </div>
+      <section class="banner-video" v-else-if="bannerInfo?.type === 2">
+        <video width="100%" height="auto" controls>
           <source :src="bannerInfo.file_address" type="video/mp4" />
         </video>
       </section>
@@ -47,8 +48,11 @@ import { bannerInfo } from '@/views/AD/hooks/useAD';
 </template>
 
 <style lang="scss" scoped>
+@use '@/assets/css/theme' as *;
+
 .banner-container {
-  padding: 20px;
+  padding: $gap * 2;
+  margin-bottom: $gap * 6;
 
   .msg-info {
     font-family: PingFangSC-Medium;
@@ -58,5 +62,14 @@ import { bannerInfo } from '@/views/AD/hooks/useAD';
       font-weight: 500;
     }
   }
+
+  .banner-text,
+  .banner-image,
+  .banner-video {
+    margin-top: $gap;
+    border-radius: $card-radius;
+    overflow: hidden;
+    line-height: 0;
+  }
 }
 </style>