首页优化完

src/common/Topscroll/index.js

 import React, {Component} from 'react';
 import {Carousel, WingBlank} from 'antd-mobile';
 class Topscroll extends Component {
-    state = {}
+    state = {
+        slideIndex:0
+    }
 
     render() {
         return (
-            <WingBlank>
-                <Carousel className="space-carousel"
-                          frameOverflow="visible"
-                          cellSpacing={12}
-                          slideWidth={0.9}
-                          autoplay
-                          infinite
-                          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
-                          afterChange={index => this.setState({slideIndex: index})}
-                >
-                    {this.props.data.map((val, index) => (
-                        <a
-                            key={val}
-                            href="http://www.alipay.com"
-                            style={{
-                                display: 'block',
-                                position: 'relative',
-                                top: this.state.slideIndex === index ? -10 : 0,
-                                height: this.props.height,
-                                boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
-                            }}
-                        >
-                            <img
-                                src={val.src}
-                                alt=""
-                                style={{width: '100%', verticalAlign: 'top'}}
-                                onLoad={() => {
-                                    // fire window resize event to change height
-                                    window.dispatchEvent(new Event('resize'));
-                                    this.setState({imgHeight: this.props.height});
-                                }}
-                            />
-                        </a>
-                    ))}
-                </Carousel>
-            </WingBlank>
+           <div className='top-scroll'>
+               <WingBlank>
+                   <Carousel className="space-carousel"
+                             frameOverflow="visible"
+                             cellSpacing={10}
+                             slideWidth={0.8}
+                             autoplay
+                             infinite
+                             dotActiveStyle={{
+                                 width: '18px',
+                                 height: '8px',
+                                 background: '#fff',
+                                 borderRadius: '4px',
+                             }}
+                             beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
+                             afterChange={index => this.setState({ slideIndex: index })}
+                   >
+                       {this.props.data.map((val, index) => (
+                           <a
+                               key={val}
+                               href="http://www.alipay.com"
+                               style={{
+                                   display: 'block',
+                                   position: 'relative',
+                                   top: this.state.slideIndex === index ? -6 : 0,
+                                   height: this.state.slideIndex === index ? this.props.actheight : this.props.height,
+                               }}
+                           >
+                               <img
+                                   src={val.src}
+                                   alt=""
+                                   style={{ width: '100%', verticalAlign: 'top', height: '100%' }}
+                                   onLoad={() => {
+                                       // fire window resize event to change height
+                                       window.dispatchEvent(new Event('resize'));
+                                       // this.setState({ imgHeight: 'auto' });
+                                   }}
+                               />
+                           </a>
+                       ))}
+                   </Carousel>
+               </WingBlank>
+           </div>
         );
     }
 }

src/components/Index/index.js

@@ -68,8 +68,8 @@ class Index extends Component {
 
     render() {
         return (
-            <div className='indexbox'>
-                <Topscroll data={this.state.dataList} height='168px'></Topscroll>
+            <div className='index-box'>
+                <Topscroll data={this.state.dataList} height='155px' actheight='168px'></Topscroll>
 
                 <div className="tabbox">
                     <ul>

src/components/Index/index.scss

-.indexbox {
+.index-box {
   overflow: hidden;
   background-color: $bg_fff;
 }
 
-.am-wingblank {
+.top-scroll {
   margin-top: 15px;
+  height: 168px;
+  position: relative;
+
+  .am-wingblank.am-wingblank-lg {
+    margin: 0;
+  }
+
+  img {
+    border-radius: 6px;
+  }
+
+  .slider-decorator-0 {
+    position: absolute;
+    top: 125px;
+    .am-carousel-wrap {
+      text-align: right;
+      padding-right: 50px;
+    }
+  }
 }
 
 /*热门推荐轮播*/
@@ -22,7 +41,6 @@
   width: 100%;
   height: 103px;
   padding: 20px 17px;
-  margin-top: 50px;
 
   ul {
     display: flex;
@@ -132,27 +150,6 @@
   }
 }
 
-/*
-底部查看所有课程
-*/
-.all-course {
-  text-align: center;
-  padding-bottom: 30px;
-  margin-bottom: 50px;
-
-  p {
-    color: $color_555;
-    font-size: 15px;
-    margin-bottom: 10px;
-  }
-
-  span {
-    color: $color_999;
-    font-size: 12px;
-  }
-}
-
-
 .course-detail {
   width: 100%;
   display: flex;
@@ -215,4 +212,26 @@
 */
 .scroll-box {
   height: 92px;
- }
+}
+
+
+/*
+底部查看所有课程
+*/
+.all-course {
+  text-align: center;
+  padding-bottom: 30px;
+  margin-bottom: 50px;
+
+  p {
+    color: $color_555;
+    font-size: 15px;
+    margin-bottom: 10px;
+  }
+
+  span {
+    color: $color_999;
+    font-size: 12px;
+  }
+}
+

src/components/classify/index.js

 import React, { Component } from 'react';
+import './index.scss';
 
 class Classify extends Component {
 
     render() {
         return(
-            <div>
-               分类
+            <div className='class-box'>
+                <div className="class-title">分类</div>
+                <div class="class-course">
+                    <p>集训营</p>
+                    <a href=""></a><a href=""></a><a href=""></a>
+                </div>
             </div>
         )
     }

src/components/classify/index.scss

+.class-box {
+  background-color: $bg_fff;
+}
+
+.class-title {
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  background-color: #F7F9FC;
+  font-size: 16px;
+  color: $color_333;
+}
\ No newline at end of file