HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化遮罩导航兼容小屏幕

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/mouseMenu/main.less
View File

@ -1,21 +1,23 @@
.mouseMenu { .mouseMenu {
.menuBody { .menuBody {
min-width: 40%; width: 60vw;
margin-left: 320px; margin-left: 287px;
// height: 400px;
background: #f1f2f3; background: #f1f2f3;
position: relative; position: relative;
.first_menu { .first_menu {
display: flex; display: flex;
width: 60vw;
>div { >div {
width: 140px;
.menu_items{ .menu_items{
// justify-content: flex-start; // justify-content: flex-start;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
width: 100%;
line-height: 40px; line-height: 40px;
&:hover{ &:hover{
background: #f2f4f7; background: #f00;
color: #296bef; color: #296bef;
} }

199
src/pages/home/home.js
View File

@ -68,7 +68,7 @@ export default class App extends Component {
} }
state = { state = {
visible: false, visible: false,
mouseMenuMask:false, mouseMenuMask: false,
setrender: 1, setrender: 1,
linkshow: "系统管理", linkshow: "系统管理",
isShowSub: true, isShowSub: true,
@ -157,14 +157,14 @@ export default class App extends Component {
currentTime: new Date().getTime(), currentTime: new Date().getTime(),
timeOut: 15 * 60 * 1000, //设置超时时间： 1分 timeOut: 15 * 60 * 1000, //设置超时时间： 1分
}; };
//打开菜单移入遮罩 //打开菜单移入遮罩
openMouseMask(){ openMouseMask() {
this.setState({mouseMenuMask:true}); this.setState({ mouseMenuMask: true });
} }
componentDidMount(e) { componentDidMount(e) {
Bus.addListener('closeMask', (prop) => { Bus.addListener('closeMask', (prop) => {
console.log(161,this); console.log(161, this);
this.setState({mouseMenuMask:prop}); this.setState({ mouseMenuMask: prop });
}) })
if (this.state.noShowSubMenu.indexOf(this.props.location.pathname) > -1) { if (this.state.noShowSubMenu.indexOf(this.props.location.pathname) > -1) {
this.setState({ isShowSub: false }); this.setState({ isShowSub: false });
@ -172,7 +172,7 @@ export default class App extends Component {
this.setState({ isShowSub: true }); this.setState({ isShowSub: true });
} }
} }
componentWillUnmount() {} componentWillUnmount() { }
//获取用户信息 //获取用户信息
getUserInfuFn() { getUserInfuFn() {
@ -185,17 +185,17 @@ export default class App extends Component {
self.setState({ userInfo: response }); self.setState({ userInfo: response });
sessionStorage.setItem("userInfo", JSON.stringify(response)); sessionStorage.setItem("userInfo", JSON.stringify(response));
}, },
(err) => {} (err) => { }
); );
}) })
.catch((err) => {}); .catch((err) => { });
} }
//修改密码 //修改密码
modifyFn() { modifyFn() {
this.setState({ visible: true }); this.setState({ visible: true });
} }
//修改密码 //修改密码
modifyPwdFn() {} modifyPwdFn() { }
//退出登录 //退出登录
exitFn() { exitFn() {
let self = this; let self = this;
@ -216,7 +216,7 @@ export default class App extends Component {
}, 1000); }, 1000);
} }
}) })
.catch((err) => {}); .catch((err) => { });
}, },
onCancel: this.onCancel, onCancel: this.onCancel,
className: "questModal", className: "questModal",
@ -251,7 +251,7 @@ export default class App extends Component {
sessionStorage.setItem("updatetime", Date.now()); sessionStorage.setItem("updatetime", Date.now());
sessionStorage.setItem("productsList", JSON.stringify(req.data)); sessionStorage.setItem("productsList", JSON.stringify(req.data));
}, },
(err) => {} (err) => { }
); );
}); });
} }
@ -309,7 +309,7 @@ export default class App extends Component {
throw "终止循环"; throw "终止循环";
} }
}); });
} catch (e) {} } catch (e) { }
sessionStorage.setItem( sessionStorage.setItem(
"menulinklist", "menulinklist",
JSON.stringify(item[0].children) JSON.stringify(item[0].children)
@ -325,10 +325,10 @@ export default class App extends Component {
<Router> <Router>
<div className="start dflexajc"> <div className="start dflexajc">
{ {
this.state.mouseMenuMask?<div className="maskMenu"></div>:null this.state.mouseMenuMask ? <div className="maskMenu"></div> : null
} }
<div className="header dflexaj boxs"> <div className="header boxs">
{/* logo */} {/* logo */}
<div className="log"> <div className="log">
<img <img
@ -349,94 +349,81 @@ export default class App extends Component {
openMouseMask={this.openMouseMask.bind(this)} openMouseMask={this.openMouseMask.bind(this)}
/> />
</div> </div>
<div className="navicon"> <div className="nav-person">
{" "} <div className="navicon">
<img <img
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logs.svg" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logs.svg"
alt="" alt=""
/>{" "} />
<a <a href="https://shimo.im/docs/dPkpKZYV7yfNpqOy/"
href="https://shimo.im/docs/dPkpKZYV7yfNpqOy/" target="_blank"
target="_blank" className="help">
className="help" 更新日志
> </a>
更新日志
</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> </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> </div>
<Dialog <Dialog
visible={this.state.visible} visible={this.state.visible}
@ -561,7 +548,7 @@ export default class App extends Component {
exact={true} exact={true}
component={distributoradd} component={distributoradd}
/> />
<Route <Route
path="/home/distributor-edit" path="/home/distributor-edit"
exact={true} exact={true}
component={distributorEdit} component={distributorEdit}

17
src/pages/home/home.less
View File

@ -28,6 +28,9 @@
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 33; z-index: 33;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20px; padding: 0 20px;
} }
.start .log{ .start .log{
@ -35,7 +38,6 @@
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: #313233; color: #313233;
width: 300px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -46,12 +48,21 @@
} }
.start .log span{ .start .log span{
padding-left: 15px; padding-left: 15px;
width: 200px;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
.nav{ .nav{
height: 100%; height: 100%;
min-width: 300px; width: 60vw;
flex:1; // min-width: 300px;
// flex:1;
}
//导航栏个人信息
.nav-person{
display: flex;
min-width: 130px;
flex: 1;
justify-content: flex-end;
} }
.start .helpcenter{ .start .helpcenter{
color: #666; color: #666;