Commit c3e62f2b by wangshuo

公共弹窗

parent 6533f7fe
import React, { Component } from 'react';
import './index.scss';
export default class index extends Component {
constructor(props) {
super(props);
}
computedStyle = () => {
return {
'top': `${this.props.top}px`,
'width': `${this.props.width}px`
}
}
// 控制点击空白处是否关闭弹窗 需要传递一个boolean属性 mark
closePopup = () => {
if(this.props.mark) {
this.props.closePopup();
}
}
render() {
return (
<div className='popup__container' onClick={this.closePopup}>
<div className='content__container' style={this.computedStyle()}>
<img className="close__btn" onClick={this.props.closePopup} src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png' alt="" />
{
React.Children.map(this.props.children, function (child) {
return <>{child}</>;
})
}
</div>
</div>
)
}
}
.popup__container {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.content__container {
width: 320px;
min-height: 240px;
border-radius: 5px;
background: rgba(255,255,255,1);
position: absolute;
left: 50%;
transform: translateX(-50%);
.close__btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 33px;
height: 33px;
bottom: -57px
}
}
}
\ No newline at end of file
...@@ -3,6 +3,7 @@ import './index.scss'; ...@@ -3,6 +3,7 @@ import './index.scss';
import { Toast } from 'antd-mobile'; import { Toast } from 'antd-mobile';
import { http } from '@/utils'; import { http } from '@/utils';
import CommonContainer from './../../common/commonContainer/index' import CommonContainer from './../../common/commonContainer/index'
import CommonPopup from './../../common/commonPopup/index';
export default class index extends Component { export default class index extends Component {
constructor(props) { constructor(props) {
...@@ -13,7 +14,7 @@ export default class index extends Component { ...@@ -13,7 +14,7 @@ export default class index extends Component {
} }
componentDidMount() { componentDidMount() {
http.get(`${API.home}/sys/get_live_info`).then(res => { http.get(`${API.home}/activity/get_live_info`).then(res => {
const { code, data, msg } = res.data; const { code, data, msg } = res.data;
if (code === 200) { if (code === 200) {
this.setState({ this.setState({
...@@ -62,6 +63,7 @@ export default class index extends Component { ...@@ -62,6 +63,7 @@ export default class index extends Component {
const { list } = this.state; const { list } = this.state;
return ( return (
<div className='live__container'> <div className='live__container'>
<CommonPopup top={50}/>
<CommonContainer title='大咖直播'> <CommonContainer title='大咖直播'>
<ul className='live__list'> <ul className='live__list'>
{ {
......
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