Commit 7c0cc5f5 authored by wangxuelai's avatar wangxuelai

''

parent 26a3fe9e
......@@ -18,6 +18,6 @@
</head>
<body>
<div id="root"></div>
<script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/main.js?1576506486966" charset="utf-8"></script>
<script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/main.js?157650sss6486966" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
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;
.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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment