''

src/components/VideoPlay.js

-import React from 'react';
-import { Icon } from 'antd';
-import { Player } from 'video-react';
-import componentStyle from './VideoPlay.less';
-import { ossVideofy } from '../utils/index';
-class VideoPlay extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-    };
-  }
-  componentDidMount() {
-  }
-  componentWillUpdate() {
-  }
-  cancelCropper = () => {
-  }
-  sureCropper = () => {
-  }
-  rotateLeft = () => {
-  }
-  rotateRight = () => {
-  }
-  closeImgPreview = () => {
-  }
-  render() {
-    const { src, closeVideoPlay } = this.props;
-    return (
-      <div className={`${componentStyle.VideoPlayBox} VideoPlayBox`}>
-        <Icon type="close-circle" className={componentStyle.closeIcon} onClick={closeVideoPlay} />
-        <Player className={componentStyle.videoitem}>
-          <source src={ossVideofy(src)} />
-        </Player>
-      </div>
-    );
-  }
-}
-export default VideoPlay;

src/pages/newtheme/ThemeEditor.less

-.textWrap {
-  width: 560px;
-  height: auto;
-  position: relative;
-  margin-bottom:10px;
-  :global {
-    .ant-input {
-      padding: 6px 15px 20px;
-    }
-  }
-  .sizeNumber {
-    position: absolute;
-    bottom: 8px;
-    right: 10px;
-  }
-}
-
-.editorwrap {
-  width: 563px;
-  margin-top: 15px;
-  .videowrap {
-    width: 100%;
-    height: 200px;
-    position: relative;
-    margin-bottom: 10px;
-    .videoPoster {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .videowrap:hover {
-    cursor: pointer;
-    .videohide {
-      opacity: 1;
-      background-color: rgba(0,0,0,0.5);
-      transition: all .3s;
-      z-index: 1;
-      color: #fff;
-    }
-  }
-  .videohide {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    color: #fff;
-    z-index: -1;
-    a {
-      color: #fff;
-    }
-  }
-  .uploadimgbox {
-    display: flex;
-    align-items: flex-end;
-    margin-bottom: 18px;
-    flex-wrap: wrap;
-    .imgwrap {
-      width: 100%;
-      // height: 120px;
-      border-radius: 4px;
-      margin-right: 6px;
-      position: relative;
-      .uploadimgwrap {
-        width: 100%;
-        // height: 120px;
-        overflow: hidden;
-      }
-    }
-    .imgwrap:hover {
-      cursor: pointer;
-      .imghide {
-        opacity: 1;
-        background-color: rgba(0,0,0,0.5);
-        transition: all .3s;
-        z-index: 1;
-        color: #fff;
-      }
-    }
-    .imghide {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      opacity: 0;
-      color: #fff;
-      z-index: -1;
-      a {
-        color: #fff;
-      }
-    }
-    .teacheruploadimg {
-      object-fit: contain;
-      border-radius: 4px;
-      width: 100%;
-    }
-    .teacheruploadimg:nth-child(4n){
-      margin-right: 0;
-    }
-  }
-}
-
-.uploadflex {
-  display: flex;
-  align-items: center;
-  .uploadimg {
-    cursor: pointer;
-    width: 106px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    border: 1px solid #D9D9D9;
-    border-radius: 4px;
-    color: rgba(0,0,0,0.65);
-    position: relative;
-    margin-right: 30px;
-    .fileuploadinput {
-      cursor: pointer;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      opacity: 0;
-      left: 0;
-      top: 0;
-    }
-  }
-}
-.toolList {
-  position: absolute;
-  right: -30px;
-  top: 0;
-  width: 30px;
-  height: 90px;
-  display: flex;
-  flex-direction: column;
-  background-color: #D3D3D3;
-  opacity: 0;
-  border-radius: 2px;
-  z-index: -1;
-  div {
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 14px;
-    cursor: pointer;
-  }
-  div>img {
-    width: 14px;
-    height: 14px;
-  }
-  .up:hover {
-    background-color: #1890FF;
-  }
-  .down,.nodown {
-    transform: rotate(180deg);
-  }
-  .nodown,.noup {
-    cursor: not-allowed;
-  }
-  .down:hover {
-    background-color: #1890FF;
-  }
-  .delete:hover {
-    background-color: #FF6060;
-  }
-}
-.textWrap:hover,.imgwrap:hover,.videowrap:hover {
-  .toolList {
-    opacity: 1;
-    z-index: 1;
-  }
-}