Skip to content

Commit fef6abe

Browse files
author
苗园园
committed
fix(fix style): fix style
fix style fix style
1 parent 3344d9b commit fef6abe

File tree

8 files changed

+97
-86
lines changed

8 files changed

+97
-86
lines changed

‎src/components/Nav/Nav.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
float: left; }
77

88
.app-header {
9-
position: 'fixed';
10-
width: '100%';
11-
background: #fff; }
9+
position: fixed;
10+
width: 100%;
11+
background: #fff;
12+
z-index: 1; }
1213
.app-header .login-out {
1314
position: absolute;
1415
right: 40px;

‎src/components/Nav/Nav.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
float: left;
99
}
1010
.app-header{
11-
position: 'fixed';
12-
width: '100%';
11+
position: fixed;
12+
width: 100%;
1313
background: #fff;
14+
z-index: 1;
1415
.login-out{
1516
position: absolute;
1617
right: 40px;

‎src/containers/Home/Home.css

+26-19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
.Home {
2+
position: absolute;
3+
width: 100%;
24
height: 100%;
3-
overflow-y: scroll; }
5+
padding-top: 64px;
6+
overflow-y: scroll;
7+
display: flex;
8+
flex-direction: column; }
49
.Home .slick-initialized .slick-slide img {
510
width: 100%;
611
height: 2rem; }
@@ -25,21 +30,23 @@
2530
text-align: center;
2631
border-radius: 50%;
2732
background: pink; }
28-
.Home .main-list {
29-
flex: 1;
30-
flex-direction: column;
31-
padding: 0 20px 20px 20px;
32-
overflow-y: scroll; }
33-
.Home .main-list li {
34-
height: 44px;
35-
line-height: 44px;
36-
text-align: center;
37-
display: flex;
38-
background: gainsboro;
39-
border-bottom: 1px solid #000; }
40-
.Home .main-list li .tit {
41-
width: 44px;
42-
height: 44px; }
43-
.Home .main-list li .discript {
44-
flex: 1;
45-
background: #666; }
33+
.Home .wrapper {
34+
overflow: hidden;
35+
flex: 1; }
36+
.Home .wrapper .main-list {
37+
flex: 1;
38+
flex-direction: column;
39+
padding: 0 20px 20px 20px; }
40+
.Home .wrapper .main-list li {
41+
height: 44px;
42+
line-height: 44px;
43+
text-align: center;
44+
display: flex;
45+
background: gainsboro;
46+
border-bottom: 1px solid #000; }
47+
.Home .wrapper .main-list li .tit {
48+
width: 44px;
49+
height: 44px; }
50+
.Home .wrapper .main-list li .discript {
51+
flex: 1;
52+
background: #666; }

‎src/containers/Home/Home.js

+37-44
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
import React, { Component } from 'react';
22
import Slider from 'react-slick';
3+
import BScroll from 'better-scroll'
34
import './Home.css';
45

56
export class Home extends Component {
7+
constructor(props) {
8+
super(props);
9+
}
10+
componentDidMount(){
11+
// 初始化 better-scroll
12+
let scroll = new BScroll('.wrapper')
13+
}
614
render() {
15+
const arr=[];
16+
arr.length=20;
17+
arr.fill('2');
718
const settings = {
819
dots: true,
920
infinite: true,
@@ -14,50 +25,32 @@ export class Home extends Component {
1425
return (
1526
<div className="Home">
1627
<Slider {...settings}>
17-
<div><img src={require("./img/banner.png")} alt=""/></div>
18-
<div><img src={require("./img/banner.png")} alt=""/></div>
19-
<div><img src={require("./img/banner.png")} alt=""/></div>
20-
<div><img src={require("./img/banner.png")} alt=""/></div>
21-
<div><img src={require("./img/banner.png")} alt=""/></div>
22-
<div><img src={require("./img/banner.png")} alt=""/></div>
23-
</Slider>
24-
<ul className='manu'>
25-
<li><span>1</span></li>
26-
<li><span>2</span></li>
27-
<li><span>3</span></li>
28-
<li><span>4</span></li>
29-
<li><span>5</span></li>
30-
</ul>
31-
<ul className='main-list'>
32-
<li>
33-
<div className="tit">1</div>
34-
<div className="discript"></div>
35-
</li>
36-
<li>
37-
<div className="tit">2</div>
38-
<div className="discript"></div>
39-
</li>
40-
<li>
41-
<div className="tit">3</div>
42-
<div className="discript"></div>
43-
</li>
44-
<li>
45-
<div className="tit">4</div>
46-
<div className="discript"></div>
47-
</li>
48-
<li>
49-
<div className="tit">5</div>
50-
<div className="discript"></div>
51-
</li>
52-
<li>
53-
<div className="tit">6</div>
54-
<div className="discript"></div>
55-
</li>
56-
<li>
57-
<div className="tit">7</div>
58-
<div className="discript"></div>
59-
</li>
60-
</ul>
28+
<div><img src={require("./img/banner.png")} alt=""/></div>
29+
<div><img src={require("./img/banner1.png")} alt=""/></div>
30+
<div><img src={require("./img/banner.png")} alt=""/></div>
31+
<div><img src={require("./img/banner1.png")} alt=""/></div>
32+
<div><img src={require("./img/banner.png")} alt=""/></div>
33+
<div><img src={require("./img/banner1.png")} alt=""/></div>
34+
</Slider>
35+
<div className="manu-con">
36+
<ul className='manu'>
37+
<li><span>1</span></li>
38+
<li><span>2</span></li>
39+
<li><span>3</span></li>
40+
<li><span>4</span></li>
41+
<li><span>5</span></li>
42+
</ul>
43+
</div>
44+
<div className="wrapper">
45+
<ul className='main-list'>
46+
{ arr.map((item,index)=>{
47+
return <li key={index}>
48+
<div className="tit">{index}</div>
49+
<div className="discript"></div>
50+
</li>
51+
}) }
52+
</ul>
53+
</div>
6154
</div>
6255
);
6356
}

‎src/containers/Home/Home.scss

+27-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1+
@import '../../style/_config.scss';
12
.Home{
3+
position: absolute;
4+
width: 100%;
25
height: 100%;
6+
padding-top: $nav-height;
37
overflow-y: scroll;
8+
display: flex;
9+
flex-direction: column;
410
.slick-initialized .slick-slide{
511
img{
612
width: 100%;
@@ -32,25 +38,28 @@
3238
}
3339
}
3440
}
35-
.main-list{
36-
flex: 1;
37-
flex-direction:column;
38-
padding: 0 20px 20px 20px;
39-
overflow-y:scroll;
40-
li{
41-
height: 44px;
42-
line-height: 44px;
43-
text-align: center;
44-
display: flex;
45-
background: gainsboro;
46-
border-bottom: 1px solid #000;
47-
.tit{
48-
width: 44px;
41+
.wrapper{
42+
overflow: hidden;
43+
flex:1;
44+
.main-list{
45+
flex: 1;
46+
flex-direction:column;
47+
padding: 0 20px 20px 20px;
48+
li{
4949
height: 44px;
50-
}
51-
.discript{
52-
flex: 1;
53-
background: #666;
50+
line-height: 44px;
51+
text-align: center;
52+
display: flex;
53+
background: gainsboro;
54+
border-bottom: 1px solid #000;
55+
.tit{
56+
width: 44px;
57+
height: 44px;
58+
}
59+
.discript{
60+
flex: 1;
61+
background: #666;
62+
}
5463
}
5564
}
5665
}

‎src/containers/Home/img/banner1.png

386 KB
Loading

‎src/style/_media-queries.scss

Whitespace-only changes.

‎src/style/media-queries.css

Whitespace-only changes.

0 commit comments

Comments
 (0)