fix

src/pages/launchSystemNew/components/newsModal/videoNews.tsx

@@ -18,7 +18,7 @@ const VideoNews: React.FC<Props> = ({ preview = false, src, maskBodyStyle, maskI
     /*****************************/
 
     return <>
-        <div className={`${style.imgNews} imgNews`} onClick={(e) => { e.stopPropagation(); }}>
+        <div className={`${style.imgNews} imgNews`}>
             <Image src={src ? getVideoImgUrl(src) : 'error'} preview={false} {...data} className={style.img}/>
             <div className={style.mask} style={maskBodyStyle}>
                 <img src={play} style={maskImgStyle} onClick={(e) => { e.stopPropagation(); e.preventDefault(); setToPlay(true) }} />
@@ -29,7 +29,7 @@ const VideoNews: React.FC<Props> = ({ preview = false, src, maskBodyStyle, maskI
             bodyStyle={{ backgroundColor: 'rgba(0,0,0,0.8)', overflow: 'hidden', borderRadius: 6 }}
             footer={null}
             closeIcon={<CloseOutlined style={{ color: '#FFF' }}/>}
-            onCancel={() => setToPlay(false)}
+            onCancel={(e) => {e.stopPropagation(); setToPlay(false)}}
         >
             <video className={style.video} style={{ borderRadius: 6 }} src={src} autoPlay controls>您的浏览器不支持 video 标签。</video>
         </Modal>}

src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/index.less

@@ -50,7 +50,8 @@
     border-radius: 5px;
 
     /* TWEENER - IE 10 */
-    >p {
+    >p,
+    .p {
         display: flex;
         align-items: center;
         flex-flow: column;
@@ -68,6 +69,14 @@
             height: 100%;
         }
     }
+
+    >.p>div {
+        height: 100%;
+
+        >div {
+            height: 100%;
+        }
+    }
 }
 
 .image_list {
@@ -119,12 +128,14 @@
 
 .groups {
     height: 25px;
+
     .otherGroup {
         height: 100%;
         display: flex;
         justify-content: flex-start;
         gap: 4px;
     }
+
     .group {
         height: 100%;
         display: flex;

src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/material.tsx

@@ -8,6 +8,7 @@ import { useModel } from "umi"
 import styles from './index.less'
 import { getVideoImgUrl } from "@/utils/utils"
 import VideoFrame from "@/pages/launchSystemNew/components/videoFrame"
+import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews"
 
 interface Props {
     value?: any[]
@@ -157,7 +158,7 @@ const Material: React.FC<Props> = (props) => {
             return item
         })
         form.setFieldsValue({ materials })
-    }   
+    }
 
     return <>
         <span onClick={() => { setVisible(true) }}>{value && value?.length > 0 ? '编辑' : '添加'}</span>
@@ -235,12 +236,13 @@ const Material: React.FC<Props> = (props) => {
                                                     set_selectVideoVisible(true)
                                                 }, 100)
                                             }}>
-                                                <p>
-                                                    {materials?.length > 0 && materials[num] && Object.keys(materials[num])?.includes(item.name) ? <video src={materials[num][item.name]} controls /> : <>
+                                                <div className={styles.p}>
+                                                    {/* <video src={materials[num][item.name]} controls /> */}
+                                                    {materials?.length > 0 && materials[num] && Object.keys(materials[num])?.includes(item.name) ? <VideoNews src={materials[num][item.name]} style={{ display: 'block', width: 'auto', margin: 0, height: '100%' }} maskImgStyle={{ position: 'absolute', top: '50%', left: '50%', width: 40, height: 40, transform: 'translate(-50%, -50%)', zIndex: 10 }}/> : <>
                                                         <span>{`推荐尺寸（${adcreativeTemplateId === 1708 ? 1280 : item.restriction.videoRestriction.minWidth} x ${adcreativeTemplateId === 1708 ? 720 : item.restriction.videoRestriction.minHeight}）`}</span>
                                                         <span>{`${item.restriction.videoRestriction.fileFormat?.map((str: any) => str?.replace('MEDIA_TYPE_', ''))};< ${item.restriction.videoRestriction.fileSize / 1024}M;时长 ≥ ${item.restriction.videoRestriction.minDuration}s,≤ ${item.restriction.videoRestriction.maxDuration}s,必须带有声音`}</span>
                                                     </>}
-                                                </p>
+                                                </div>
                                             </div>
                                         </Form.Item>
                                     }
@@ -274,7 +276,7 @@ const Material: React.FC<Props> = (props) => {
                                                     </p>
                                                 </div>
                                                 {videoUploads && Object.keys(videoUploads)?.length > 0 && <div style={{ width: 32 }}>
-                                                    {materials?.length > 0 && materials[num] && (Object.keys(materials[num])?.includes('video') || Object.keys(materials[num])?.includes('short_video1')) && <VideoFrame onChange={(e) => setFrame(e, num, item.name)} url={materials[num]?.video || materials[num]?.short_video1}/>}
+                                                    {materials?.length > 0 && materials[num] && (Object.keys(materials[num])?.includes('video') || Object.keys(materials[num])?.includes('short_video1')) && <VideoFrame onChange={(e) => setFrame(e, num, item.name)} url={materials[num]?.video || materials[num]?.short_video1} />}
                                                 </div>}
                                             </Space>
                                         </Form.Item>