Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 665faee

Browse files
bodynobodyno
committed
Version 5
1 parent 6add309 commit 665faee

File tree

3 files changed

+78
-15845
lines changed

3 files changed

+78
-15845
lines changed

‎src/layouts/CoreLayout/CoreLayout.js

Lines changed: 46 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import logoImg from './logo.png'
66
import { Menu, Breadcrumb, Icon } from 'antd'
77
import 'antd/dist/antd.css'
88

9-
import { Link } from 'react-router'
9+
import { IndexLink, Link } from 'react-router'
1010

1111
class CoreLayout extends Component {
1212
constructor(props) {
@@ -35,50 +35,57 @@ class CoreLayout extends Component {
3535
<span className="logo-user">Alice...</span>童书馆
3636
</span>
3737
</div>
38-
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
39-
<Menu.Item key="home">
40-
<Link to='/'>
41-
<Icon type="home" /><span className="nav-text">首页</span>
42-
</Link>
43-
</Menu.Item>
44-
<Menu.Item key="tag">
45-
<Link to='/list' activeClassName='ant-menu-item-selected'>
46-
<Icon type="tag" /><span className="nav-text">团购</span>
47-
</Link>
48-
</Menu.Item>
49-
<Menu.Item key="book">
50-
<i className="iconfont icon-book"></i><span className="nav-text">自定义书单</span>
51-
</Menu.Item>
52-
<Menu.Item key="notification">
53-
<Icon type="notification" /><span className="nav-text">童书</span>
54-
</Menu.Item>
55-
<Menu.Item key="text">
56-
<Icon type="file-text" /><span className="nav-text">订单</span>
57-
</Menu.Item>
58-
<Menu.Item key="reward">
59-
<Icon type="pay-circle" /><span className="nav-text">奖励</span>
60-
</Menu.Item>
61-
<Menu.Item key="team">
62-
<Icon type="team" /><span className="nav-text">推广伙伴</span>
63-
</Menu.Item>
64-
<Menu.Item key="family">
65-
<Icon type="file-text" /><span className="nav-text">阅读家庭</span>
66-
</Menu.Item>
67-
<Menu.Item key="chart">
68-
<Icon type="file-text" /><span className="nav-text">统计</span>
69-
</Menu.Item>
70-
<Menu.Item key="setting">
71-
<Icon type="setting" /><span className="nav-text">设置</span>
72-
</Menu.Item>
73-
</Menu>
38+
<div className="ant-menu ant-menu-inline ant-menu-dark ant-menu-root">
39+
<IndexLink to='/' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
40+
<i className="anticon anticon-home"/><span class="nav-text">首页</span>
41+
</IndexLink>
42+
<Link to='/list' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
43+
<i className="anticon anticon-tag"/><span class="nav-text">团购</span>
44+
</Link>
45+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
46+
<i className="iconfont icon-logo"/><span class="nav-text">自定义书单</span>
47+
</Link>
48+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
49+
<i className="iconfont icon-book"/><span class="nav-text">童书</span>
50+
</Link>
51+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
52+
<i className="anticon anticon-file-text"/><span class="nav-text">订单</span>
53+
</Link>
54+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
55+
<i className="anticon anticon-pay-circle"/><span class="nav-text">奖励</span>
56+
</Link>
57+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
58+
<i className="anticon anticon-team"/><span class="nav-text">推广伙伴</span>
59+
</Link>
60+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
61+
<i className="iconfont icon-family"/><span class="nav-text">阅读家庭</span>
62+
</Link>
63+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
64+
<i className="anticon anticon-line-chart"/><span class="nav-text">统计</span>
65+
</Link>
66+
<Link to='/a' className="ant-menu-item" activeClassName='ant-menu-item-selected'>
67+
<i className="anticon anticon-setting"/><span class="nav-text">设置</span>
68+
</Link>
69+
</div>
7470
<div className={classes.service}>在线客服</div>
7571
<div className="ant-aside-action" onClick={this.onCollapseChange.bind(this)}>
7672
{collapse ? <Icon type="right" /> : <Icon type="left" />}
7773
</div>
7874
</aside>
7975
<div className="ant-layout-main">
80-
<div className="ant-layout-header">
81-
<div className="ant-title">童书馆管理中心</div>
76+
<div className="ant-layout-header clearfix">
77+
<div class={classes.header_left}>
78+
<div className="ant-title">童书馆管理中心</div>
79+
<div className={classes.spa}></div>
80+
<div className={classes.header_qr}>
81+
<i className="iconfont icon-qr"/>
82+
</div>
83+
</div>
84+
<div class={classes.header_right}>
85+
<div class={classes.header_icon}>
86+
87+
</div>
88+
</div>
8289
</div>
8390
<div className="ant-layout-container">
8491
<div className="ant-layout-content">

‎src/layouts/CoreLayout/CoreLayout.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@
187187
font-size: 18px;
188188
padding-left: 40px;
189189
padding-top: 20px;
190+
float: left;
190191
}
191192

192193
.ant-table-body {
@@ -198,5 +199,36 @@
198199
.ant-table th {
199200
border-bottom: 1px solid #e7e7eb;
200201
}
202+
}
203+
204+
.spa {
205+
height: 24px;
206+
width: 1px;
207+
background: #e9e9e9;
208+
float: left;
209+
margin-left:22px;
210+
margin-top: 23px;
211+
}
212+
213+
.header_qr {
214+
float: left;
215+
margin-left: 22px;
216+
margin-top: 16px;
217+
218+
& i{
219+
font-size: 24px;
220+
}
221+
}
222+
223+
.header_left {
224+
float: left;
225+
}
226+
227+
.header_right {
228+
float: right;
229+
}
201230

231+
.header_icon {
232+
position: relative;
233+
border-radius: 5px;
202234
}

0 commit comments

Comments
 (0)