init

src/pages/HomePage/HomePage.tsx

@@ -28,6 +28,7 @@ import { SvgaPlayer } from "@grace/svgaplayer";
 
 import lightSvga from "@/assets/svga/5光点飘散.svga";
 import API from "@/api";
+import VideoPanel from "@/panels/VideoPanel/VideoPanel.tsx";
 
 
 @observer
@@ -42,7 +43,7 @@ class HomePage extends React.Component<any, any> {
     //   store.doAssist()
     // }
 
-    // ModalCtrl.showModal(Fail_challenge);
+    ModalCtrl.showModal(VideoPanel);
   }
 
   clickPrize = () => {

src/panels/VideoPanel/VideoPanel.module.less

+@import "../../res.less";
+
+.VideoPanel {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .video {
+    border: solid rgba(255, 255, 255, 0.4) 3px;
+    border-radius: 60px;
+    background-color: rgb(0, 0, 0);
+    position: absolute;
+    left: 45px;
+    top: 86px;
+    width: 648px;
+    height: 1148px;
+  }
+
+  .close {
+    position: absolute;
+    left: 336px;
+    top: 1283px;
+    width: 79px;
+    height: 79px;
+    .webpBg("common/close.png");
+  }
+
+}

src/panels/VideoPanel/VideoPanel.tsx

+import React from "react";
+import { observer } from "mobx-react";
+import styles from "./VideoPanel.module.less";
+import { Button } from "@grace/ui";
+import { _asyncThrottle } from "@/utils/utils.ts";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import { SvgaPlayer } from "@grace/svgaplayer";
+
+import bgEffectSvga from "@/assets/svga/2输出签到成功弹窗.svga";
+import classNames from "classnames";
+
+export interface IVideoPanelProps {
+  signCredits: number;
+  extraCredits: number;
+  boolLimit: boolean;
+  multipleValue: number;
+  url: string;
+  taskId: string;
+  newLuckCreditsNum: number;
+}
+
+@observer
+class VideoPanel extends React.Component<IVideoPanelProps> {
+
+  componentDidMount() {
+  }
+
+  clickClose = () => {
+    ModalCtrl.closeModal();
+  };
+
+  clickVideo = _asyncThrottle(async () => {
+    const { signCredits, extraCredits, boolLimit, multipleValue, url, taskId, newLuckCreditsNum } = this.props;
+
+    ModalCtrl.closeModal();
+  });
+
+  render() {
+
+    const { signCredits, extraCredits, multipleValue } = this.props;
+
+    return <div className={classNames(styles.VideoPanel, "modal_center")}>
+      <video
+        id="my-player"
+        className={styles.video}
+        controls
+        preload="auto"
+        poster="//yun.duiba.com.cn/polaris/001_WC-EditVideo_1(1).dccd6a9094aedb735c584900034c13aad52dd45e.mp4?x-oss-process=video/snapshot,t_1000,f_jpg,w_648,h_1148,m_fast"
+      >
+        <source
+          src="//yun.duiba.com.cn/polaris/001_WC-EditVideo_1(1).dccd6a9094aedb735c584900034c13aad52dd45e.mp4"
+          type="video/mp4"
+        />
+        <p className="vjs-no-js">
+          To view this video please enable JavaScript, and consider upgrading to a
+          web browser that
+          <a href="https://videojs.com/html5-video-support/" target="_blank">
+            supports HTML5 video
+          </a>
+        </p>
+      </video>
+
+      <div className="com_banner"/>
+
+      <Button className={styles.close} onClick={this.clickClose}/>
+    </div>;
+  }
+}
+
+export default VideoPanel;