优化遮罩导航兼容小屏幕

This commit is contained in:
许红梅 2022-05-18 16:09:19 +08:00
parent 53deeeda51
commit 8fc7d9393d
3 changed files with 114 additions and 114 deletions

View File

@ -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;
}

View File

@ -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)
@ -324,11 +324,11 @@ export default class App extends Component {
return (
<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}&nbsp;
<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}&nbsp;
<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}

View File

@ -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;