优化遮罩导航兼容小屏幕
This commit is contained in:
许红梅
parent
53deeeda51
commit
8fc7d9393d
|
|
@ -1,21 +1,23 @@
|
|||
.mouseMenu {
|
||||
.menuBody {
|
||||
min-width: 40%;
|
||||
margin-left: 320px;
|
||||
// height: 400px;
|
||||
width: 60vw;
|
||||
margin-left: 287px;
|
||||
background: #f1f2f3;
|
||||
position: relative;
|
||||
.first_menu {
|
||||
display: flex;
|
||||
width: 60vw;
|
||||
>div {
|
||||
width: 140px;
|
||||
.menu_items{
|
||||
// justify-content: flex-start;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
&:hover{
|
||||
background: #f2f4f7;
|
||||
background: #f00;
|
||||
color: #296bef;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default class App extends Component {
|
|||
}
|
||||
state = {
|
||||
visible: false,
|
||||
mouseMenuMask:false,
|
||||
mouseMenuMask: false,
|
||||
setrender: 1,
|
||||
linkshow: "系统管理",
|
||||
isShowSub: true,
|
||||
|
|
@ -157,14 +157,14 @@ export default class App extends Component {
|
|||
currentTime: new Date().getTime(),
|
||||
timeOut: 15 * 60 * 1000, //设置超时时间： 1分
|
||||
};
|
||||
//打开菜单移入遮罩
|
||||
openMouseMask(){
|
||||
this.setState({mouseMenuMask:true});
|
||||
}
|
||||
//打开菜单移入遮罩
|
||||
openMouseMask() {
|
||||
this.setState({ mouseMenuMask: true });
|
||||
}
|
||||
componentDidMount(e) {
|
||||
Bus.addListener('closeMask', (prop) => {
|
||||
console.log(161,this);
|
||||
this.setState({mouseMenuMask:prop});
|
||||
console.log(161, this);
|
||||
this.setState({ mouseMenuMask: prop });
|
||||
})
|
||||
if (this.state.noShowSubMenu.indexOf(this.props.location.pathname) > -1) {
|
||||
this.setState({ isShowSub: false });
|
||||
|
|
@ -172,7 +172,7 @@ export default class App extends Component {
|
|||
this.setState({ isShowSub: true });
|
||||
}
|
||||
}
|
||||
componentWillUnmount() {}
|
||||
componentWillUnmount() { }
|
||||
|
||||
//获取用户信息
|
||||
getUserInfuFn() {
|
||||
|
|
@ -185,17 +185,17 @@ export default class App extends Component {
|
|||
self.setState({ userInfo: response });
|
||||
sessionStorage.setItem("userInfo", JSON.stringify(response));
|
||||
},
|
||||
(err) => {}
|
||||
(err) => { }
|
||||
);
|
||||
})
|
||||
.catch((err) => {});
|
||||
.catch((err) => { });
|
||||
}
|
||||
//修改密码
|
||||
modifyFn() {
|
||||
this.setState({ visible: true });
|
||||
}
|
||||
//修改密码
|
||||
modifyPwdFn() {}
|
||||
modifyPwdFn() { }
|
||||
//退出登录
|
||||
exitFn() {
|
||||
let self = this;
|
||||
|
|
@ -216,7 +216,7 @@ export default class App extends Component {
|
|||
}, 1000);
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
.catch((err) => { });
|
||||
},
|
||||
onCancel: this.onCancel,
|
||||
className: "questModal",
|
||||
|
|
@ -251,7 +251,7 @@ export default class App extends Component {
|
|||
sessionStorage.setItem("updatetime", Date.now());
|
||||
sessionStorage.setItem("productsList", JSON.stringify(req.data));
|
||||
},
|
||||
(err) => {}
|
||||
(err) => { }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
@ -309,7 +309,7 @@ export default class App extends Component {
|
|||
throw "终止循环";
|
||||
}
|
||||
});
|
||||
} catch (e) {}
|
||||
} catch (e) { }
|
||||
sessionStorage.setItem(
|
||||
"menulinklist",
|
||||
JSON.stringify(item[0].children)
|
||||
|
|
@ -325,10 +325,10 @@ export default class App extends Component {
|
|||
<Router>
|
||||
<div className="start dflexajc">
|
||||
|
||||
{
|
||||
this.state.mouseMenuMask?<div className="maskMenu"></div>:null
|
||||
}
|
||||
<div className="header dflexaj boxs">
|
||||
{
|
||||
this.state.mouseMenuMask ? <div className="maskMenu"></div> : null
|
||||
}
|
||||
<div className="header boxs">
|
||||
{/* logo */}
|
||||
<div className="log">
|
||||
<img
|
||||
|
|
@ -349,94 +349,81 @@ export default class App extends Component {
|
|||
openMouseMask={this.openMouseMask.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
<div className="navicon">
|
||||
{" "}
|
||||
<img
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logs.svg"
|
||||
alt=""
|
||||
/>{" "}
|
||||
<a
|
||||
href="https://shimo.im/docs/dPkpKZYV7yfNpqOy/"
|
||||
target="_blank"
|
||||
className="help"
|
||||
>
|
||||
更新日志
|
||||
</a>
|
||||
</div>
|
||||
<div className="navicon">
|
||||
{" "}
|
||||
<img
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/help.svg"
|
||||
alt=""
|
||||
/>{" "}
|
||||
<a
|
||||
href="https://shimo.im/docs/wV3VVQP5W6I1nz3y/"
|
||||
target="_blank"
|
||||
className="help"
|
||||
>
|
||||
帮助中心
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* 用户头像信息 */}
|
||||
<div className="userImg dflexa">
|
||||
{/* <Link to="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link> */}
|
||||
|
||||
{/* {!this.state.userInfo.head? <Avatar size="large"
|
||||
src={this.state.userInfo.head}/>:
|
||||
<Avatar size="large"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"/>}
|
||||
*/}
|
||||
</div>
|
||||
<Pop
|
||||
className="exitPop"
|
||||
trigger="hover"
|
||||
position="bottom-right"
|
||||
content={
|
||||
<div>
|
||||
<div className="exit-box">
|
||||
<p className="exit-header dflexacsa">
|
||||
{this.state.userInfo.head ? (
|
||||
<Avatar size="large" src={this.state.userInfo.head} />
|
||||
) : (
|
||||
<Avatar
|
||||
size="large"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"
|
||||
/>
|
||||
)}
|
||||
<p className="exit-userInfo dflexacs">
|
||||
<span> 姓名:{this.state.userInfo.real_name}</span>
|
||||
<span> 账号:{this.state.userInfo.user_name}</span>
|
||||
</p>
|
||||
</p>
|
||||
<p className="dflexaj">
|
||||
<span
|
||||
onClick={() => {
|
||||
this.exitFn();
|
||||
}}
|
||||
className="exit-btn"
|
||||
>
|
||||
退出
|
||||
</span>
|
||||
<span
|
||||
onClick={() => {
|
||||
this.modifyFn();
|
||||
}}
|
||||
className="modify-btn"
|
||||
>
|
||||
修改密码
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* */}
|
||||
<div className="nameItem">
|
||||
{this.state.userInfo.real_name}
|
||||
<Icon type="down" className="exitIcon" />
|
||||
<div className="nav-person">
|
||||
<div className="navicon">
|
||||
<img
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logs.svg"
|
||||
alt=""
|
||||
/>
|
||||
<a href="https://shimo.im/docs/dPkpKZYV7yfNpqOy/"
|
||||
target="_blank"
|
||||
className="help">
|
||||
更新日志
|
||||
</a>
|
||||
</div>
|
||||
</Pop>
|
||||
<div className="navicon">
|
||||
<img
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/help.svg"
|
||||
alt=""
|
||||
/>
|
||||
<a
|
||||
href="https://shimo.im/docs/wV3VVQP5W6I1nz3y/"
|
||||
target="_blank"
|
||||
className="help"
|
||||
>
|
||||
帮助中心
|
||||
</a>
|
||||
</div>
|
||||
<Pop
|
||||
className="exitPop"
|
||||
trigger="hover"
|
||||
position="bottom-right"
|
||||
content={
|
||||
<div>
|
||||
<div className="exit-box">
|
||||
<p className="exit-header dflexacsa">
|
||||
{this.state.userInfo.head ? (
|
||||
<Avatar size="large" src={this.state.userInfo.head} />
|
||||
) : (
|
||||
<Avatar
|
||||
size="large"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"
|
||||
/>
|
||||
)}
|
||||
<p className="exit-userInfo dflexacs">
|
||||
<span> 姓名:{this.state.userInfo.real_name}</span>
|
||||
<span> 账号:{this.state.userInfo.user_name}</span>
|
||||
</p>
|
||||
</p>
|
||||
<p className="dflexaj">
|
||||
<span
|
||||
onClick={() => {
|
||||
this.exitFn();
|
||||
}}
|
||||
className="exit-btn"
|
||||
>
|
||||
退出
|
||||
</span>
|
||||
<span
|
||||
onClick={() => {
|
||||
this.modifyFn();
|
||||
}}
|
||||
className="modify-btn"
|
||||
>
|
||||
修改密码
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* */}
|
||||
<div className="nameItem">
|
||||
{this.state.userInfo.real_name}
|
||||
<Icon type="down" className="exitIcon" />
|
||||
</div>
|
||||
</Pop>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
visible={this.state.visible}
|
||||
|
|
@ -561,7 +548,7 @@ export default class App extends Component {
|
|||
exact={true}
|
||||
component={distributoradd}
|
||||
/>
|
||||
<Route
|
||||
<Route
|
||||
path="/home/distributor-edit"
|
||||
exact={true}
|
||||
component={distributorEdit}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@
|
|||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 33;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.start .log{
|
||||
|
|
@ -35,7 +38,6 @@
|
|||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #313233;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -46,12 +48,21 @@
|
|||
}
|
||||
.start .log span{
|
||||
padding-left: 15px;
|
||||
width: 200px;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
.nav{
|
||||
height: 100%;
|
||||
min-width: 300px;
|
||||
flex:1;
|
||||
width: 60vw;
|
||||
// min-width: 300px;
|
||||
// flex:1;
|
||||
}
|
||||
//导航栏个人信息
|
||||
.nav-person{
|
||||
display: flex;
|
||||
min-width: 130px;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.start .helpcenter{
|
||||
color: #666;
|
||||
|
|
|
|||
Loading…
Reference in New Issue