优化遮罩导航兼容小屏幕
This commit is contained in:
parent
53deeeda51
commit
8fc7d9393d
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -328,7 +328,7 @@ export default class App extends Component {
|
||||||
{
|
{
|
||||||
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,26 +349,23 @@ export default class App extends Component {
|
||||||
openMouseMask={this.openMouseMask.bind(this)}
|
openMouseMask={this.openMouseMask.bind(this)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="nav-person">
|
||||||
<div className="navicon">
|
<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>
|
||||||
<div className="navicon">
|
<div className="navicon">
|
||||||
{" "}
|
|
||||||
<img
|
<img
|
||||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/help.svg"
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/help.svg"
|
||||||
alt=""
|
alt=""
|
||||||
/>{" "}
|
/>
|
||||||
<a
|
<a
|
||||||
href="https://shimo.im/docs/wV3VVQP5W6I1nz3y/"
|
href="https://shimo.im/docs/wV3VVQP5W6I1nz3y/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
@ -377,17 +374,6 @@ export default class App extends Component {
|
||||||
帮助中心
|
帮助中心
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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
|
<Pop
|
||||||
className="exitPop"
|
className="exitPop"
|
||||||
trigger="hover"
|
trigger="hover"
|
||||||
|
@ -438,6 +424,7 @@ export default class App extends Component {
|
||||||
</div>
|
</div>
|
||||||
</Pop>
|
</Pop>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<Dialog
|
<Dialog
|
||||||
visible={this.state.visible}
|
visible={this.state.visible}
|
||||||
className="questModal"
|
className="questModal"
|
||||||
|
|
|
@ -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;
|
||||||
|
// min-width: 300px;
|
||||||
|
// flex:1;
|
||||||
|
}
|
||||||
|
//导航栏个人信息
|
||||||
|
.nav-person{
|
||||||
|
display: flex;
|
||||||
|
min-width: 130px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
.start .helpcenter{
|
.start .helpcenter{
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
Loading…
Reference in New Issue