perf: 详情页样式调整

src/views/creative-generation-workshop/manuscript/detail/index.vue

@@ -1,7 +1,5 @@
 <script lang="jsx">
 import { Button, Message as AMessage } from '@arco-design/web-vue';
-import icon1 from '@/assets/img/creative-generation-workshop/icon-play.png';
-import icon2 from '@/assets/img/creative-generation-workshop/icon-play-hover.png';
 import { useRouter, useRoute } from 'vue-router';
 
 export default {
@@ -12,16 +10,36 @@ export default {
 
     // 视频播放相关状态
     const isPlaying = ref(false);
-    const isHovered = ref(false);
     const videoRef = ref(null);
-    const videoUrl = ref(''); // 视频URL，实际项目中可能从API获取
-    const coverImageUrl = ref(''); // 封面图URL，实际项目中可能从API获取
-    const isVideoLoaded = ref(false); // 视频是否已加载
+    const videoUrl = ref(''); 
+    const coverImageUrl = ref(''); 
+    const isVideoLoaded = ref(false); 
+    const contentType = ref('video');
+
+    const isVideo = computed(() => contentType.value === 'video');
 
     const onBack = () => {
       router.push({ name: 'ManuscriptList' });
     };
 
+    const renderMainImg = () => {
+      if (isVideo.value) {
+        return (
+          <div class="main-img-box mb-16px relative overflow-hidden cursor-pointer" onClick={togglePlay}>
+            <video ref={videoRef} class="w-100% h-100% object-cover" onEnded={onVideoEnded}></video>
+            <img src={coverImageUrl.value} class="w-100% h-100% object-cover absolute z-0 top-0 left-0" />
+            <div v-show={!isPlaying.value} class="play-icon"></div>
+          </div>
+        );
+      } else {
+        return (
+          <div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
+            <img src={coverImageUrl.value} class="w-100% h-100% object-cover absolute z-0 top-0 left-0" />
+          </div>
+        );
+      }
+    };
+
     const togglePlay = () => {
       if (!videoRef.value) return;
 
@@ -41,29 +59,6 @@ export default {
     const onVideoEnded = () => {
       isPlaying.value = false;
     };
-    const onMouseEnter = () => {
-      isHovered.value = true;
-    };
-    const onMouseLeave = () => {
-      isHovered.value = false;
-    };
-    let containerRef = null;
-
-    onMounted(() => {
-      containerRef = document.querySelector('.main-img-box');
-      if (containerRef) {
-        containerRef.addEventListener('mouseenter', onMouseEnter);
-        containerRef.addEventListener('mouseleave', onMouseLeave);
-      }
-    });
-
-    onUnmounted(() => {
-      if (containerRef) {
-        containerRef.removeEventListener('mouseenter', onMouseEnter);
-        containerRef.removeEventListener('mouseleave', onMouseLeave);
-        containerRef = null;
-      }
-    });
 
     const renderFooterRow = () => {
       return (
@@ -86,6 +81,7 @@ export default {
       );
     };
 
+    // 4. 修改模板部分，根据contentType条件渲染
     return () => (
       <>
         <div class="manuscript-detail-wrap">
@@ -102,38 +98,29 @@ export default {
                 挖到宝了！这个平价好物让我素颜出门都自信✨挖到宝了！这个平价
               </p>
               <p class="cts !text-12px !color-#737478 mb-32px w-full text-left">6月26日修改</p>
+              {renderMainImg()}
 
-              <div class="main-img-box mb-16px relative overflow-hidden cursor-pointer" onClick={togglePlay}>
-                <video ref={videoRef} class="w-100% h-100% object-cover" onEnded={onVideoEnded}></video>
-
-                <img
-                  v-show={!isPlaying.value}
-                  src={coverImageUrl.value}
-                  class="w-100% h-100% object-cover absolute inset-0"
-                />
-
-                <div v-show={!isPlaying.value} class="absolute inset-0 flex items-center justify-center">
-                  <img src={isHovered.value ? icon2 : icon1} class="w-64px h-64px transition-all duration-300" />
-                </div>
-              </div>
-
-              <p class="cts !color-#211F24 mb-40px">
+              <p class="cts !color-#211F24 ">
                 谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 ——
                 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
                 最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3
                 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
                 （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
               </p>
-              <div class="desc-img-wrap">
-                {new Array(5).fill(0).map((item, index) => (
-                  <div class="desc-img-box" key={index}>
+
+              {/* 仅图片类型显示图片列表 */}
+              {!isVideo.value && (
+                <div class="desc-img-wrap mt-40px">
+                  {new Array(5).fill(0).map((item, index) => (
+                    <div class="desc-img-box" key={index}>
+                      <img src="" class="w-100% h-100%" />
+                    </div>
+                  ))}
+                  <div class="desc-img-box">
                     <img src="" class="w-100% h-100%" />
                   </div>
-                ))}
-                <div class="desc-img-box">
-                  <img src="" class="w-100% h-100%" />
                 </div>
-              </div>
+              )}
             </div>
           </div>
         </div>

src/views/creative-generation-workshop/manuscript/detail/style.scss

@@ -33,6 +33,24 @@ $footer-height: 68px;
       aspect-ratio: 3/4;
     }
   }
+  .play-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 222;
+    width: 64px;
+    height: 64px;
+    background-image: url('@/assets/img/creative-generation-workshop/icon-play.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: background-image 0.3s ease;
+  }
+
+  .play-icon:hover {
+    background-image: url('@/assets/img/creative-generation-workshop/icon-play-hover.png');
+  }
 }
 .footer-row {
   position: fixed;