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

Skip to content

Commit 6add309

Browse files
bodynobodyno
committed
Version 4
1 parent 8401a01 commit 6add309

File tree

5 files changed

+43
-38
lines changed

5 files changed

+43
-38
lines changed

‎src/layouts/CoreLayout/CoreLayout.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,30 +27,32 @@ class CoreLayout extends Component {
2727
return (
2828
<div className={collapse ? "ant-layout-aside ant-layout-aside-collapse" : "ant-layout-aside"}>
2929
<aside className="ant-layout-sider">
30-
<div className="ant-layout-logo">
31-
<img src={logoImg} />
32-
</div>
33-
<span class="logo-name">
30+
<div className="ant-name-con">
31+
<div className="ant-layout-logo">
32+
<img src={logoImg} />
33+
</div>
34+
<span class="logo-name">
3435
<span className="logo-user">Alice...</span>童书馆
3536
</span>
37+
</div>
3638
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
3739
<Menu.Item key="home">
3840
<Link to='/'>
3941
<Icon type="home" /><span className="nav-text">首页</span>
4042
</Link>
4143
</Menu.Item>
4244
<Menu.Item key="tag">
43-
<Link to='/list'>
45+
<Link to='/list' activeClassName='ant-menu-item-selected'>
4446
<Icon type="tag" /><span className="nav-text">团购</span>
4547
</Link>
4648
</Menu.Item>
47-
<Menu.Item key="test1">
49+
<Menu.Item key="book">
4850
<i className="iconfont icon-book"></i><span className="nav-text">自定义书单</span>
4951
</Menu.Item>
50-
<Menu.Item key="test2">
52+
<Menu.Item key="notification">
5153
<Icon type="notification" /><span className="nav-text">童书</span>
5254
</Menu.Item>
53-
<Menu.Item key="test3">
55+
<Menu.Item key="text">
5456
<Icon type="file-text" /><span className="nav-text">订单</span>
5557
</Menu.Item>
5658
<Menu.Item key="reward">

‎src/layouts/CoreLayout/CoreLayout.scss

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,21 @@
2323
display: inline-block;
2424
}
2525

26+
.ant-name-con {
27+
overflow: hidden;
28+
height: 69px;
29+
}
30+
2631
.ant-layout-aside.ant-layout-aside-collapse .logo-name {
2732
position: absolute;
2833
left: 61px;
2934
width: 100px;
30-
display: none;
35+
opacity: 0;
36+
transition: none;
3137
}
32-
/*
33-
3438
.ant-layout-aside .logo-name {
35-
transition: 1s .2s;
36-
}*/
39+
transition: .4s .2s;
40+
}
3741

3842
.logo-name {
3943
display: inline-block;
@@ -62,7 +66,7 @@
6266
.ant-layout-aside .ant-layout-sider {
6367
width: 224px;
6468
background: #404040;
65-
position: fixed;
69+
position: absolute;
6670
overflow: visible;
6771
padding-bottom: 24px;
6872
height: 100%;

‎src/routes/List/components/ListView.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,18 @@ export default class ListView extends Component {
4848
console.log(dateString)
4949
}
5050

51+
const pagination = {
52+
total: data.length,
53+
showSizeChanger: true,
54+
showQuickJumper: true,
55+
onShowSizeChange(current, pageSize) {
56+
console.log('Current: ', current, '; PageSize: ', pageSize);
57+
},
58+
onChange(current) {
59+
console.log('Current: ', current);
60+
}
61+
}
62+
5163
return (
5264
<div>
5365
<TopTab></TopTab>
@@ -88,7 +100,7 @@ export default class ListView extends Component {
88100
<button type="button" className="button blue">消费记录</button>
89101
</div>
90102
</div>
91-
<Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
103+
<Table columns={columns} dataSource={data} pagination={pagination}/>
92104
</div>
93105
</div>
94106
)

‎src/routes/index.js

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// We only need to import the modules necessary for initial render
1+
// 只需要导入必要的模块在初始化加载
22
import CoreLayout from '../layouts/CoreLayout/CoreLayout'
33
import Home from './Home'
44
import CounterRoute from './Counter'
@@ -9,9 +9,6 @@ import PageNotFound from './PageNotFound'
99
import Redirect from './PageNotFound/redirect'
1010
import ListRoute from './List'
1111

12-
/* Note: Instead of using JSX, we recommend using react-router
13-
PlainRoute objects to build route definitions. */
14-
1512
export const createRoutes = (store) => ({
1613
path: '/',
1714
component: CoreLayout,
@@ -27,22 +24,4 @@ export const createRoutes = (store) => ({
2724
]
2825
})
2926

30-
/* Note: childRoutes can be chunked or otherwise loaded programmatically
31-
using getChildRoutes with the following signature:
32-
33-
getChildRoutes (location, cb) {
34-
require.ensure([], (require) => {
35-
cb(null, [
36-
// Remove imports!
37-
require('./Counter').default(store)
38-
])
39-
})
40-
}
41-
42-
However, this is not necessary for code-splitting! It simply provides
43-
an API for async route definitions. Your code splitting should occur
44-
inside the route `getComponent` function, since it is only invoked
45-
when the route exists and matches.
46-
*/
47-
4827
export default createRoutes

‎src/styles/core.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
}
1717

1818
body{
19-
font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", sans-serif;
19+
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
2020
color: #333;
2121
font-size: 14px;
2222
}
@@ -70,10 +70,18 @@
7070
border: none;
7171
outline: none;
7272
cursor: pointer;
73+
74+
&:hover {
75+
background: #FAD95B;
76+
}
7377
}
7478

7579
.blue {
7680
background: #00b9fb !important;
81+
82+
&:hover {
83+
background: #31D3FB !important;
84+
}
7785
}
7886

7987
.mr12 {

0 commit comments

Comments
 (0)