feat: add preview style change

This commit is contained in:
seaheart
2023-08-12 14:33:20 +08:00
parent 2787c95916
commit 35b0c8194b
2 changed files with 32 additions and 24 deletions
@@ -1,16 +1,22 @@
.browser-previewer {
.browser-previewer-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 24px;
background: rgba(0,0,0,0.3);
z-index: 1000;
background: white;
display: flex;
flex-direction: column;
.browser-previewer {
height: 100%;
background: white;
display: flex;
flex-direction: column;
}
.title-bar {
height: 40px;
+21 -19
View File
@@ -51,28 +51,30 @@ export default class BrowserPreviewer extends React.Component<IProps, IState> {
render() {
return (
<div className="browser-previewer">
<div className="title-bar">
<div className="left-part"></div>
<div className="browser-previewer-wrapper">
<div className="browser-previewer">
<div className="title-bar">
<div className="left-part"></div>
<div className="middle-part">
{this.props.name}({FileUtil.humanFileSize(this.props.size)})
</div>
<div className="middle-part">
{this.props.name}({FileUtil.humanFileSize(this.props.size)})
</div>
<div className="right-part">
<span className="close btn-action">
<CloseOutlined
onClick={() => {
this.props.onClose();
}}
/>
</span>
<div className="right-part">
<span className="close btn-action">
<CloseOutlined
onClick={() => {
this.props.onClose();
}}
/>
</span>
</div>
</div>
<div className="frame-area">
<iframe width="100%" height="100%" src={this.props.url}>
iframe may not supported.
</iframe>
</div>
</div>
<div className="frame-area">
<iframe width="100%" height="100%" src={this.props.url}>
iframe may not supported.
</iframe>
</div>
</div>
);