pref: 演示引导页添加 介绍视频

src/pages/bootpage/template/demonstration/components/VideoModal/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2025-03-28 11:18:55
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import { Modal } from 'antd';
+
+import classNames from 'classnames';
+import styles from './index.less';
+const videoUrl = 'https://panda-water.cn/video/companyIntroduction.mp4';
+const IframeContainer = props => {
+  const { loading, isVideoModal, setIsVideoModal } = props;
+  const videoRef = useRef(null);
+
+  const width = 1400;
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (isVideoModal) {
+        videoRef.current.paused && videoRef.current.play();
+      } else {
+        !videoRef.current.paused && videoRef.current.pause();
+      }
+    }
+  }, [isVideoModal]);
+  return (
+    <>
+      <Modal
+        style={{ top: '60px' }}
+        wrapClassName={classNames(styles.videoModal, 'demonstration_video_modal')}
+        title={null}
+        visible={isVideoModal}
+        open={isVideoModal}
+        footer={null}
+        width={width}
+        onCancel={() => {
+          setIsVideoModal(false);
+        }}
+      >
+        <video ref={videoRef} width={width} autoPlay="autoPlay" muted controls src={videoUrl} loop />
+      </Modal>
+    </>
+  );
+};
+
+export default IframeContainer;

src/pages/bootpage/template/demonstration/components/VideoModal/index.less

+:global {
+    .demonstration_video_modal {
+        .@{ant-prefix}-modal-content {
+            background: transparent;
+        }
+
+        .@{ant-prefix}-modal-body {
+            border-radius: 10px;
+            overflow: hidden;
+            padding: 0;
+        }
+
+        .@{ant-prefix}-modal-close {
+            top: -40px;
+            right: -40px;
+            color: #fff;
+            transition: all 0.2s;
+
+        }
+
+        .@{ant-prefix}-modal-close:hover {
+            color: #fff;
+            transform: scale(1.5);
+            transform-origin: center center;
+        }
+    }
+}
\ No newline at end of file

src/pages/bootpage/template/demonstration/index.js

@@ -29,6 +29,7 @@ import Iframe from './components/Iframe';
 import RightItem from './components/Right';
 import BottomItem from './components/Bottom';
 import { platformData } from './components/configData';
+import VideoModal from './components/VideoModal';
 const boxWidth = 1920;
 const boxHeight = 910;
 
@@ -50,6 +51,7 @@ const Demonstration = props => {
   const [projectConfig, setProjectConfig] = useState({}); // 项目案例是否可免密跳转
   const [showContent, setShowContent] = useState(false);
   const [jumpLoading, setJumpLoading] = useState(false);
+  const [isVideoModal, setIsVideoModal] = useState(false);
   const [selectKey, setSelectKey] = useState('供水产品');
   const [boxSize, setBoxSize] = useState({
     scale: 1,
@@ -500,6 +502,10 @@ const Demonstration = props => {
   const onendLoading = () => {
     jumpProgressEnd();
   };
+  const onOpenVideo = () => {
+    // if (!productConfig?.['熊猫武汉研发中心']) return message.warning('该账号没有权限，请联系管理员');
+    setIsVideoModal(true);
+  };
   const iframeItem = useMemo(() => {
     if (!linkUrl) return null;
     return (
@@ -646,7 +652,7 @@ const Demonstration = props => {
             <div className={styles.top_c_title}>熊猫智慧水务一体化解决方案</div>
           </div>
           <div className={styles.top_r}>
-            <div className={styles.top_r_text}>- 引领中国智慧水务 -</div>
+            <div className={styles.top_r_text} onClick={onOpenVideo} />
           </div>
         </div>
 
@@ -716,6 +722,7 @@ const Demonstration = props => {
         </div>
       ) : null}
       {iframeItem}
+      <VideoModal isVideoModal={isVideoModal} setIsVideoModal={setIsVideoModal} />
     </div>
   );
 };

src/pages/bootpage/template/demonstration/index.less

@@ -196,18 +196,20 @@
     .top_r {
       width: 376px;
       height: 35px;
-      display: flex;
-      justify-content: flex-end;
+      position: relative;
 
       .top_r_text {
-        width: 281px;
-        height: 35px;
-        line-height: 35px;
-        padding-left: 60px;
-        background: url('@{imgSrc}/引领中国智慧水务.png') no-repeat center center;
+        width: 218px;
+        height: 62px;
+        background: url('@{imgSrc}/武汉研发中心.png') no-repeat center center;
         background-size: 100% 100%;
-        font-size: 15px;
-        letter-spacing: 3px;
+        cursor: pointer;
+        position: absolute;
+        right: 42px;
+        top: -12px;
+      }
+      .top_r_text:active{
+        opacity: 0.8;
       }
     }