Skip to content

Commit d5f6624

Browse files
290352095290352095
committed
添加首页轮播图，优秀项目推荐，下载客户端部分，屏蔽无效路由，进行404重定向
1 parent 6616568 commit d5f6624

File tree

20 files changed

+513
-110
lines changed

20 files changed

+513
-110
lines changed

‎.umirc.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ export default {
1313
dynamicImport: true,
1414
title: 'umi-ts',
1515
dll: true,
16-
// routes: {
17-
// exclude: [],
18-
// },
16+
routes: {
17+
exclude: [/models/, /service/],
18+
},
1919
// hardSource: true,
2020
},
2121
],
2222
],
2323
history: 'hash',
2424
cssLoaderOptions: {},
2525
alias: {
26-
component: path.resolve(__dirname, './src/component')
26+
component: path.resolve(__dirname, './src/component'),
2727
},
2828
chainWebpack(config, { webpack }) {
2929
// config.plugin('analyzer').use(

‎src/assets/css/common/index.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
@header-nav-color: #40aea8;
22
@footer-border-color: #40aea8;
3+
@theme-color: #40aea8;
4+
5+
p {
6+
margin: 0;
7+
line-height: 1;
8+
}

src/assets/images/home/bg@2x(1).png renamed to src/assets/images/home/bg@2x-1.png

File renamed without changes.

‎src/assets/images/home/dlbg.png‎

264 KB
Loading

‎src/assets/images/home/ep.png‎

296 KB
Loading

‎src/assets/images/home/qr.png‎

251 KB
Loading

‎src/component/common/BasicHeader/index.less‎

Lines changed: 61 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,70 @@
11
@import '../../../assets/css/common/index';
2-
.cr-header {
2+
.header-box {
3+
position: fixed;
34
width: 100%;
4-
display: flex;
5-
height: 80px;
5+
top: 0;
6+
box-shadow: 0 0 16px 0 #ccc;
7+
background-color: #ffffff;
8+
z-index: 10;
69
:global {
7-
.cr-logo {
8-
flex-shrink: 0;
9-
img {
10-
width: 214px;
11-
height: 50px;
12-
margin: 10px 20px 20px;
10+
.cr-header {
11+
width: 1220px;
12+
margin: 0 auto;
13+
display: flex;
14+
height: 80px;
15+
.cr-logo {
16+
flex-shrink: 0;
17+
18+
img {
19+
width: 214px;
20+
height: 50px;
21+
margin: 10px 20px 20px;
22+
}
1323
}
14-
}
15-
.cr-nav {
16-
flex: 1;
17-
margin-bottom: 8px;
18-
align-self: center;
19-
overflow: hidden;
20-
}
21-
.cr-user {
22-
flex-shrink: 0;
23-
font-size: 20px;
24-
line-height: 80px;
25-
> span,
26-
> i {
27-
margin: 0 15px;
24+
25+
.cr-nav {
26+
flex: 1;
27+
margin-bottom: 8px;
28+
align-self: center;
29+
overflow: hidden;
2830
}
29-
> i {
30-
font-weight: bold;
31+
32+
.cr-user {
33+
flex-shrink: 0;
34+
font-size: 20px;
35+
line-height: 80px;
36+
37+
> span,
38+
> i {
39+
margin: 0 15px;
40+
}
41+
42+
> i {
43+
font-weight: bold;
44+
}
45+
}
46+
47+
.ant-menu-item {
48+
font-size: 20px;
49+
color: #000;
50+
line-height: 68px;
51+
margin: 0 10px;
52+
border-bottom: 4px solid transparent;
53+
}
54+
55+
.ant-menu-item-selected,
56+
.ant-menu-item:hover {
57+
border-bottom: 4px solid @header-nav-color;
58+
color: #000000;
59+
}
60+
61+
.ant-menu-item-active .ant-menu-item-selected {
62+
border-bottom: 4px solid @header-nav-color;
63+
}
64+
65+
.ant-menu-horizontal {
66+
border: none;
3167
}
32-
}
33-
.ant-menu-item {
34-
font-size: 20px;
35-
color: #000;
36-
line-height: 68px;
37-
margin: 0 10px;
38-
border-bottom: 4px solid transparent;
39-
}
40-
.ant-menu-item-selected,
41-
.ant-menu-item:hover {
42-
border-bottom: 4px solid @header-nav-color;
43-
color: #000000;
44-
}
45-
.ant-menu-item-active .ant-menu-item-selected {
46-
border-bottom: 4px solid @header-nav-color;
47-
}
48-
.ant-menu-horizontal {
49-
border: none;
5068
}
5169
}
5270
}

‎src/component/common/BasicHeader/index.tsx‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,40 +19,42 @@ export default class BasicHeader extends Component {
1919
};
2020

2121
render() {
22-
// const Nav = props => (
23-
// <Menu onClick={props.handleClick} selectedKeys={[props.current]} mode="horizontal">
24-
// <Menu.Item key="home">首页</Menu.Item>
25-
// <Menu.Item key="project-center">项目中心</Menu.Item>
26-
// <Menu.Item key="talent-plaza">人才广场</Menu.Item>
27-
// </Menu>
28-
// );
22+
const Nav = props => (
23+
<Menu onClick={props.handleClick} selectedKeys={[props.current]} mode="horizontal">
24+
<Menu.Item key="home">首页</Menu.Item>
25+
<Menu.Item key="project-center">项目中心</Menu.Item>
26+
<Menu.Item key="talent-plaza">人才广场</Menu.Item>
27+
</Menu>
28+
);
2929
return (
30-
<header className={styles['cr-header']}>
31-
<div className={'cr-logo'}>
32-
<img src={logo} alt="" />
33-
</div>
34-
<div className={'cr-nav'}>
35-
{/* <Nav handleClick={this.handleClick} current={this.state.current} /> */}
36-
<Nav />
37-
</div>
38-
<div className={'cr-user'}>
39-
<Search style={{ width: 30, height: 30, verticalAlign: 'middle' }} />
40-
<span
41-
onClick={() => {
42-
router.push('/user');
43-
}}
44-
>
45-
登录
46-
</span>
47-
<span
48-
onClick={() => {
49-
router.push('/user/register');
50-
}}
51-
>
52-
注册
53-
</span>
54-
</div>
55-
</header>
30+
<div className={styles['header-box']}>
31+
<header className={'cr-header'}>
32+
<div className={'cr-logo'}>
33+
<img src={logo} alt="" />
34+
</div>
35+
<div className={'cr-nav'}>
36+
<Nav handleClick={this.handleClick} current={this.state.current} />
37+
{/* <Nav /> */}
38+
</div>
39+
<div className={'cr-user'}>
40+
<Search style={{ width: 30, height: 30, verticalAlign: 'middle' }} />
41+
<span
42+
onClick={() => {
43+
router.push('/user');
44+
}}
45+
>
46+
登录
47+
</span>
48+
<span
49+
onClick={() => {
50+
router.push('/user/register');
51+
}}
52+
>
53+
注册
54+
</span>
55+
</div>
56+
</header>
57+
</div>
5658
);
5759
}
5860
}

‎src/component/home/Banner/index.less‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import '../../../assets/css/common/index';
2+
.home-banner {
3+
height: 560px;
4+
:global {
5+
.home-banner-box {
6+
position: relative;
7+
height: 560px;
8+
background-image: url('/src/assets/images/home/bg@2x-1.png');
9+
.home-banner-box-img {
10+
width: 100%;
11+
height: 100%;
12+
overflow: hidden;
13+
text-align: left;
14+
p {
15+
font-size: 64px;
16+
margin: 0;
17+
line-height: 1;
18+
}
19+
p:nth-child(1) {
20+
color: #4688f1;
21+
margin-top: 100px;
22+
}
23+
p:nth-child(2) {
24+
color: #000;
25+
margin-top: 30px;
26+
}
27+
.banner-button-group {
28+
margin-top: 60px;
29+
button {
30+
width: 150px;
31+
height: 50px;
32+
background-color: transparent;
33+
font-size: 20px;
34+
&:focus {
35+
outline: none;
36+
opacity: 0.6;
37+
}
38+
}
39+
button:nth-child(1) {
40+
border: 2px solid #000000;
41+
color: #000000;
42+
}
43+
button:nth-child(2) {
44+
border: 2px solid @theme-color;
45+
color: @theme-color;
46+
margin-left: 20px;
47+
}
48+
}
49+
}
50+
}
51+
52+
.ant-carousel .slick-dots {
53+
bottom: 30px;
54+
li {
55+
margin: 0 6px;
56+
button {
57+
width: 10px;
58+
height: 10px;
59+
border-radius: 100%;
60+
background-color: rgba(0, 0, 0, 0.2);
61+
opacity: 1;
62+
}
63+
64+
.slick-slide {
65+
text-align: center;
66+
height: 560px;
67+
line-height: 160px;
68+
background: #364d79;
69+
overflow: hidden;
70+
h3 {
71+
color: #fff;
72+
}
73+
}
74+
&.slick-active button {
75+
background-color: rgba(70, 136, 241, 0.8);
76+
}
77+
}
78+
}
79+
}
80+
}

‎src/component/home/Banner/index.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from 'react';
2+
import { Carousel } from 'antd';
3+
import styles from './index.less';
4+
import bgimg from 'assets/images/home/bg@2x-1.png';
5+
6+
export default function Banner(props) {
7+
const onChange = (a = 0, b = 0, c = 0): void => {
8+
console.log(a, b, c);
9+
};
10+
return (
11+
<div className={styles['home-banner']}>
12+
<Carousel afterChange={onChange}>
13+
<div>
14+
<div className={'home-banner-box'}>
15+
<div
16+
className={'home-banner-box-img'}
17+
style={{
18+
backgroundImage: `url(${bgimg})`,
19+
backgroundSize: 'cover',
20+
backgroundPosition: '56%',
21+
}}
22+
>
23+
<p>近23万优秀开发者</p>
24+
<p>您的专属云端开发团队</p>
25+
<div className={'banner-button-group'}>
26+
<button>新建项目</button>
27+
<button>快速组队</button>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
<div>
33+
<div className={'home-banner-box'}>
34+
<div
35+
className={'home-banner-box-img'}
36+
style={{
37+
backgroundImage: `url(${bgimg})`,
38+
backgroundSize: 'cover',
39+
backgroundPosition: '56%',
40+
}}
41+
>
42+
<p>近23万优秀开发者</p>
43+
<p>您的专属云端开发团队</p>
44+
<div className={'banner-button-group'}>
45+
<button>新建项目</button>
46+
<button>快速组队</button>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
<div>
52+
<div className={'home-banner-box'}>
53+
<div
54+
className={'home-banner-box-img'}
55+
style={{
56+
backgroundImage: `url(${bgimg})`,
57+
backgroundSize: 'cover',
58+
backgroundPosition: '56%',
59+
}}
60+
>
61+
<p>近23万优秀开发者</p>
62+
<p>您的专属云端开发团队</p>
63+
<div className={'banner-button-group'}>
64+
<button>新建项目</button>
65+
<button>快速组队</button>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
<div>
71+
<div className={'home-banner-box'}>
72+
<div
73+
className={'home-banner-box-img'}
74+
style={{
75+
backgroundImage: `url(${bgimg})`,
76+
backgroundSize: 'cover',
77+
backgroundPosition: '56%',
78+
}}
79+
>
80+
<p>近23万优秀开发者</p>
81+
<p>您的专属云端开发团队</p>
82+
<div className={'banner-button-group'}>
83+
<button>新建项目</button>
84+
<button>快速组队</button>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</Carousel>
90+
</div>
91+
);
92+
}

0 commit comments

Comments
 (0)