调整评阅查看图片交互

courseware
杨树明 5 years ago
parent 3480de8929
commit 963bb9063c

@ -46,7 +46,7 @@ debugType = "admin";
// 老师
// debugType="teacher";
// 学生
debugType="student";
// debugType="student";

@ -41,7 +41,7 @@ function ImageLayer2(props) {
})
return (
<ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>
showImage?<ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>:""
)
}

@ -1,10 +1,27 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { Button,Icon} from 'antd';
import './TaskResultLayer.css'
class ImageLayer extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
previewImage: '',
current: 90,
transStyle: ''
}
}
translate = () => {
this.setState({
current:(this.state.current+90)%360,
transStyle:'rotate('+this.state.current+'deg)'
});
}
render() {
let { showImage, imageSrc, onImageLayerClose } = this.props;
@ -13,10 +30,34 @@ class ImageLayer extends Component {
return ReactDOM.createPortal(
<div>
{showImage ?
<div className="taskResultLayer" onClick={onImageLayerClose} style={{overflow: 'auto'}}>
<div className="passContent">
<img src={ imageSrc } className="passImg" unselectable="on" alt=""/>
</div>
<div className="taskResultLayer">
<div className={"ImageLayerbutton mt20"}>
<Button
className={"fr"}
onClick={()=>this.props.onImageLayerClose()}
>
关闭<Icon type="close" />
</Button>
<Button
href={imageSrc}
className={"fr mr10"}
>
下载<Icon type="vertical-align-bottom" />
</Button>
<Button
onClick = {()=>this.translate()}
className={"fr mr10"}
>
旋转<Icon type="reload" theme="outlined" />
</Button>
</div>
<div className="passContent" style={{ transform:this.state.transStyle}}>
<img src={imageSrc} className="passImg" unselectable="on" alt=""/>
</div>
</div>
:
<div></div>

@ -40,7 +40,7 @@
justify-content: center;
align-items: center;
display: -webkit-flex;
height: 100%;
height: 90%;
text-align: center;
}
.passImg{
@ -138,3 +138,10 @@
.vertical4{
vertical-align: -4px;
}
.ImageLayerbutton{
position: absolute;
top: 0px;
right: 10px;
z-index: 10;
}
Loading…
Cancel
Save