wzhqwq/inMyHeartFrontEnd
1
0
Fork 0
程式碼 問題 1 合併請求 專案 版本發布 Wiki 動態

添加主页拉取逻辑，改善主页结构，加入简易的媒体查询

瀏覽代碼
此提交包含在：
wzhqwq
2021-07-31 17:50:48 +08:00
父節點 bbfc03f947
當前提交 a1386d8870
共有 7 個檔案被更改，包括 165 行新增 和 55 行删除
下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案

40
src/components/UploadUnit/UploadUnit.js
查看文件

@@ -162,15 +162,18 @@ export default class UploadUnit extends Component {
return (
<div className="upload-wrap">
<div className={this.state.status === -1 ? 'upload-unit' : 'upload-unit open'} style={{ width: this.state.status <= 1 ? '' : `${this.state.width}px` }}>
{this.state.src
{
this.state.src
? <img src={this.state.src} alt="压缩后的图片" style={{ filter: this.state.status === -1 ? 'opacity(0)' : '' }} ref={this.imgRef} />
: null
}
{this.state.status >= 0
{
this.state.status >= 0
? (
<Fragment>
<div className={this.state.status === 2 ? 'upload-unit-mask hide' : 'upload-unit-mask'}>
{this.state.status === 3
{
this.state.status === 3
? (
<div className="upload-unit-progress">
<div className="progress-circle">
@@ -184,9 +187,11 @@ export default class UploadUnit extends Component {
上传中
</div>
</div>
) : null
)
: null
}
{this.state.status <= 1
{
this.state.status <= 1
? (
<div className="upload-unit-progress">
<Spinner />
@@ -194,34 +199,43 @@ export default class UploadUnit extends Component {
{this.state.status === 0 ? '加载中' : '压缩中'}
</div>
</div>
) : null
)
: null
}
{this.state.status === 4
{
this.state.status === 4
? (
<div style={{ color: '#FFF', fontSize: '16px' }}>上传成功</div>
) : null}
)
: null
}
</div>
<div className="upload-btns">
{this.state.status === 2
{
this.state.status === 2
? (
<button className="btn btn-circle btn-ok" onClick={this.upload}>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M939.717 106.665l-304.049 324.529-78.769 85.071-225.28 240.246-123.668-115.003-129.182-121.305-78.769 84.283 129.969 121.305 33.083 31.508 129.969 121.305 44.111 40.96 304.049-324.529 78.769-85.071 304.049-324.529-84.283-78.769z" fill="#ffffff"></path></svg>
</button>
) : null
)
: null
}
{this.state.status === 2 || this.state.status === 4
{
this.state.status === 2 || this.state.status === 4
? (
<button className="btn btn-circle btn-primary" onClick={this.scale}>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path></svg>
</button>
) : null
)
: null
}
<button className="btn btn-circle btn-gray" onClick={this.handleCancel}>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.333333 512l284.444445 284.444444c2.929778 3.328 2.929778 22.357333 0 28.444445l-56.888889 56.888889c-6.087111 2.929778-25.116444 2.929778-28.444445 0L512 597.333333 227.555556 881.777778c-3.328 2.929778-22.328889 2.929778-28.444445 0l-56.888889-56.888889c-2.929778-6.087111-2.929778-25.116444 0-28.444445l284.444445-284.444444L142.222222 227.555556c-2.929778-3.328-2.929778-22.328889 0-28.444445l56.888889-56.888889c6.115556-2.929778 25.116444-2.929778 28.444445 0l284.444444 284.444445L796.444444 142.222222c3.328-2.929778 22.357333-2.929778 28.444445 0l56.888889 56.888889c2.929778 6.115556 2.929778 25.116444 0 28.444445L597.333333 512z" fill="#4a4a4a"></path></svg>
</button>
</div>
</Fragment>
) : null
)
: null
}
</div>
<div className={this.state.isScaled ? 'scaled-wrap open' : 'scaled-wrap'} onClick={this.unscale}>