组件

src/common/scroll/scroll.js → src/common/Scroll/index.js

@@ -33,3 +33,4 @@ class Scroll extends Component {
 }
 
 export default Scroll
+

src/common/scroll/topscroll.js → src/common/Topscroll/index.js

 import React, {Component} from 'react';
 import {Carousel, WingBlank} from 'antd-mobile';
-class TopScroll extends Component {
+class Topscroll extends Component {
     state = {}
 
     render() {
@@ -45,4 +45,4 @@ class TopScroll extends Component {
     }
 }
 
-export default TopScroll
+export default Topscroll

src/common/carousel/carousel.js

-import React, {Component} from 'react';
-import './carousel.scss';
-
-class Carousel extends Component {
-    render() {
-        return (
-            <div className='scroll-box'>
-                <ul className='scroll-list'>
-                    {this.props.children}
-                </ul>
-            </div>
-        )
-    }
-
-}
-
-export default Carousel

src/common/carousel/carousel.scss

 .scroll-box {
   width: 100%;
-  height: 92px;
   overflow: auto;
   position: relative;
   margin-top: 15px;

src/common/carousel/index.js

+import React from 'react';
+import './carousel.scss'
+
+const Carousel = (props) => {
+        return (
+            <div className='scroll-box'>
+                <ul className='scroll-list'>
+                    {props.children}
+                </ul>
+            </div>
+        )
+};
+
+export default Carousel;
+

src/common/index.js

 // 底部路由
 export { default as Nav } from './Nav'
 export { default as VList } from './VList'
-export { default as Course } from './Course'
\ No newline at end of file
+export { default as Course } from './Course'  //  课程状态（试听 正在直播）+封面+标题+ 详情
+export { default as Carousel } from './Carousel' // 横向滚动
+export { default as Topscroll } from './Topscroll' // 首页头部轮播
+export { default as Scroll } from './Scroll' // 首页正常轮播图

src/components/Index/index.js

 import React, {Component} from 'react';
-import {Course, VList} from '../../common'
-import Scroll from '../../common/scroll/scroll.js';
-import TopScroll from '../../common/scroll/topscroll.js';
-import Carousel from '../../common/carousel/carousel.js';
+import {Course, Carousel,Scroll,Topscroll} from '../../common'
 import './index.scss';
 
-
 class Index extends Component {
     state = {
         dataList: [
@@ -42,8 +38,8 @@ class Index extends Component {
                 'teacher': 'wwwwww',
                 'time': '2343234',
                 'isbuy': 1,
-                'price0': 100,
-                'price1': 1000
+                'price0': 200,
+                'price1': 2000
             }
         ],
         tabdata: [
@@ -74,7 +70,7 @@ class Index extends Component {
         const top = <div>333</div>
         return (
             <div className='indexbox'>
-                <TopScroll data={this.state.dataList} height='168px'></TopScroll>
+                <Topscroll data={this.state.dataList} height='168px'></Topscroll>
                 <div className="tabbox">
                     <ul>
                         {
@@ -121,12 +117,14 @@ class Index extends Component {
                     <h2 className="title">新上好课</h2>
                     <ul className='course-detail'>
                         {this.state.dataList.map((item, index) => {
-                            const top = (
-                                <span className='audition'>
-                            <i className={'iconfont iconerji'}></i>
-                                    试听
-                                    </span>
-                            )
+                        //     const top = (
+                        //         {
+                        //             item.isbuy === '1' && <span className='audition'>
+                        //     <i className={'iconfont iconerji'}></i>
+                        //             试听
+                        //             </span>
+                        //         }
+                        // )
                             const bottom = (
                               <p className="course-price">
                                         <span className="new">¥{item.price0}</span>

src/components/Index/index.scss

 .indexbox {
   overflow: hidden;
-  background-color: #fff;
+  background-color: $bg_fff;
 }
 
 .am-wingblank {
@@ -39,7 +39,7 @@
       }
 
       span {
-        color: #606060;
+        color: $color_606;
         font-size: 13px;
         display: block;
         margin-top: 10px;
@@ -57,7 +57,7 @@
   height: 100%;
   margin-right: 20px;
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
+  background-color: $bg_fff;
   border: 1px solid rgba(0, 0, 0, .1);
   border-radius: 5px;
 
@@ -82,18 +82,18 @@
 
     .item-title {
       font-size: 15px;
-      color: #333;
+      color: $color_333;
     }
 
     .item-teacher {
       font-size: 13px;
-      color: #555;
+      color: $color_555;
       margin-top: 6px;
     }
 
     .item-time {
       font-size: 12px;
-      color: #999;
+      color: $color_999;
       margin-top: 11px;
     }
   }
@@ -121,12 +121,12 @@
 
   .title {
     font-size: 15px;
-    color: #333;
+    color: $color_333;
     display: inline-block;
   }
 
   .more {
-    color: #09f;
+    color: $active;
     font-size: 12px;
     float: right;
   }
@@ -141,13 +141,13 @@
   margin-bottom: 50px;
 
   p {
-    color: #555;
+    color: $color_555;
     font-size: 15px;
     margin-bottom: 10px;
   }
 
   span {
-    color: #999;
+    color: $color_999;
     font-size: 12px;
   }
 }
@@ -165,9 +165,9 @@
     width: 54px;
     height: 18px;
     line-height: 18px;
-    background-color: #09f;
+    background-color: $bg_active;
     font-size: 12px;
-    color: #fff;
+    color: $white;
     text-align: center;
     border-radius: 1px;
 
@@ -183,12 +183,12 @@
     margin-top: 15px;
 
     .new {
-      color: #FF2121;
+      color: $red;
       font-size: 15px;
     }
 
     .old {
-      color: #999;
+      color: $color_999;
       font-size: 12px;
       display: inline-block;
       margin-left: 15px;
@@ -201,12 +201,18 @@
     margin-top: 15px;
     width: 61px;
     height: 18px;
-    background-color: #09f;
+    background-color: $bg_active;
     border-radius: 9px;
-    color: #fff;
+    color: $white;
     font-size: 12px;
     text-align: center;
     line-height: 18px;
   }
 }
 
+/*
+横向滚动
+*/
+.scroll-box {
+  height: 92px;
+ }

src/styles/variable.scss

@@ -9,6 +9,7 @@ $color_333: #333;
 $color_555: #555;
 $color_666: #666;
 $color_999: #999;
+$color_606: #606060;
 
 
 /*
@@ -35,7 +36,7 @@ $bg_fff: #fff;
 $bg_000: #000;
 $bg_f4f4f4: #f4f4f4;
 $bg_f5f5f5: #f5f5f5;
-$body-bg: #fff;     
+$body-bg: #fff;
 
 
 /*