fix(ad) : 给广告添加圆角功能

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>