首页分类头部

src/common/Carousel/carousel.scss

-.scroll-box {
-  width: 100%;
-  overflow: auto;
-  position: relative;
-  margin-top: 15px;
-  .scroll-list {
-    height: 100%;
-    display: flex;
-    overflow: hidden;
-    position: absolute;
-  }
-}::-webkit-scrollbar{
-   display:none;
- }

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/VList/index.js

@@ -6,6 +6,7 @@ const VList = (props) => {
         <li className='v-list-item'>
             <div className="content">
                 <div className="cover" onClick={props.handleClick}>
+                    {props.status}
                     <img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt=""/>
                 </div>
                 {props.info}

src/common/VList/index.scss

@@ -11,14 +11,24 @@
         .cover {
             flex: 1 0 auto;
             margin-right: 16px;
-
+            position: relative;
             img {
                 width: 150px;
                 height: 108px;
                 border-radius: 3px;
             }
         }
-
+        .course-status {
+            width: 100%;
+            height: 24px;
+            position: absolute;
+            bottom: -1px;
+            border-radius: 0 0 3px 3px;
+            text-align: center;
+            line-height: 24px;
+            color: $white;
+            font-size: 13px;
+        }
 
     }
 }
\ No newline at end of file

src/common/index.js

@@ -2,7 +2,4 @@
 export { default as Nav } from './Nav'
 export { default as VList } from './VList'
 export { default as Course } from './Course'  //  课程状态（试听 正在直播）+封面+标题+ 详情
-export { default as Carousel } from './Carousel' // 横向滚动
-export { default as Topscroll } from './Topscroll' // 首页头部轮播
-export { default as Scroll } from './Scroll' // 首页正常轮播图
 export { default as Tag } from './CategoryTag'

src/components/Index/index.js

 import React, {Component} from 'react';
-import {Course, Carousel, Scroll, Topscroll} from '../../common'
+import {Course} from '../../common'
+import Scroll from './scroll'
+import Topscroll from './topscroll'
 import './index.scss';
 
 class Index extends Component {
@@ -65,10 +67,18 @@ class Index extends Component {
             }
         ]
     }
-
+    toSearch() {
+        window.location.href ='/search'
+    }
     render() {
         return (
             <div className='index-box'>
+                <div className='header'>
+                    <img className="logo" src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" alt="" />
+                    <button className='to-app'>在APP打开</button>
+                    <i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i>
+                </div>
+
                 <Topscroll data={this.state.dataList} height='155px' actheight='168px'></Topscroll>
 
                 <div className="tabbox">
@@ -87,7 +97,8 @@ class Index extends Component {
                 </div>
                 <div className='category'>
                     <h2 className="title">近期直播</h2>
-                    <Carousel>
+                    <div className='scroll-box'>
+                        <ul className='scroll-list'>
                             {
                                 this.state.dataList.map((item, index) => {
                                     return (
@@ -104,7 +115,9 @@ class Index extends Component {
                                     )
                                 })
                             }
-                    </Carousel>
+                        </ul>
+                    </div>
+
                     <div className="category-vip">
                         <a href="/#">
                             <img

src/components/Index/index.scss

 .index-box {
   overflow: hidden;
   background-color: $bg_fff;
-}
 
-.top-scroll {
-  margin-top: 15px;
+  .header {
+    width: 100%;
+    height: 44px;
+    background-color: $bg_fff;
+    padding: 10px 15px;
+
+    .logo {
+      width: 78px;
+      height: 20px;
+    }
+
+    .to-app {
+      margin-left: 10px;
+      width: 88px;
+      height: 22px;
+      border: 1px solid $bg_active;
+      border-radius: 11px;
+      background-color: $bg_fff;
+      font-size: 12px;
+      color: $active;
+      vertical-align: top;
+    }
+
+    .search {
+      font-size: 22px!important;
+      float: right;
+      margin-top: -6px;
+    }
+  }
+
+  .top-scroll {
+    touch-action: pan-y;
+    margin-top: 7px;
     height: 168px;
     position: relative;
 
@@ -19,25 +49,28 @@
     .slider-decorator-0 {
       position: absolute;
       top: 125px;
+
       .am-carousel-wrap {
         text-align: right;
         padding-right: 50px;
       }
     }
-}
+  }
+
+  /*热门推荐轮播*/
 
-/*热门推荐轮播*/
-.scroll {
+  .scroll {
     width: 100%;
     margin-left: 0 !important;
     margin-top: 12px;
     margin-bottom: 5px;
-}
+    touch-action: pan-y;
+  }
 
-/*
-页面tab
-*/
-.tabbox {
+  /*
+  页面tab
+  */
+  .tabbox {
     width: 100%;
     height: 103px;
     padding: 20px 17px;
@@ -58,18 +91,28 @@
 
         span {
           color: $color_606;
-        font-size: 13px;
+          font-size: 14px;
           display: block;
           margin-top: 10px;
         }
       }
     }
-}
+  }
 
-/*
-近期直播
-*/
-.scroll-item {
+  /*
+  近期直播
+  */
+  .scroll-box {
+    width: 100%;
+    overflow: auto;
+    position: relative;
+    margin-top: 15px;
+    .scroll-list {
+      height: 100%;
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      .scroll-item {
         display: inline-block;
         width: 301px;
         height: 100%;
@@ -99,12 +142,12 @@
           }
 
           .item-title {
-      font-size: 15px;
+            font-size: 16px;
             color: $color_333;
           }
 
           .item-teacher {
-      font-size: 13px;
+            font-size: 14px;
             color: $color_555;
             margin-top: 6px;
           }
@@ -115,9 +158,14 @@
             margin-top: 11px;
           }
         }
-}
+      }
+    }
+  }::-webkit-scrollbar{
+     display:none;
+   }
+
 
-.category-vip {
+  .category-vip {
     width: 100%;
     height: 106px;
     border-radius: 5px;
@@ -128,17 +176,17 @@
       height: 106px;
       border-radius: 5px;
     }
-}
+  }
 
 
-/*课程公共样式*/
-.category {
+  /*课程公共样式*/
+  .category {
     width: 100%;
     border-top: 8px solid #F3F4F8;
     padding: 20px 15px 15px 15px;
 
     .title {
-    font-size: 15px;
+      font-size: 16px;
       color: $color_333;
       display: inline-block;
     }
@@ -148,9 +196,9 @@
       font-size: 12px;
       float: right;
     }
-}
+  }
 
-.course-detail {
+  .course-detail {
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -181,7 +229,7 @@
 
       .new {
         color: $red;
-      font-size: 15px;
+        font-size: 16px;
       }
 
       .old {
@@ -205,27 +253,27 @@
       text-align: center;
       line-height: 18px;
     }
-}
+  }
 
-/*
-横向滚动
-*/
-.scroll-box {
+  /*
+  横向滚动
+  */
+  .scroll-box {
     height: 92px;
-}
+  }
 
 
-/*
-底部查看所有课程
-*/
-.all-course {
+  /*
+  底部查看所有课程
+  */
+  .all-course {
     text-align: center;
     padding-bottom: 30px;
     margin-bottom: 50px;
 
     p {
       color: $color_555;
-    font-size: 15px;
+      font-size: 16px;
       margin-bottom: 10px;
     }
 
@@ -233,5 +281,6 @@
       color: $color_999;
       font-size: 12px;
     }
-}
+  }
 
+}
\ No newline at end of file

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

 import React, {Component} from 'react';
 import { Carousel, WingBlank } from 'antd-mobile';
-class Scroll extends Component {
+export default class Scroll extends Component {
     render() {
         return (
             <WingBlank className='scroll'>
@@ -32,5 +32,5 @@ class Scroll extends Component {
     }
 }
 
-export default Scroll
+
 

src/common/Topscroll/index.js → src/components/Index/topscroll.js

 import React, {Component} from 'react';
 import {Carousel, WingBlank} from 'antd-mobile';
-class Topscroll extends Component {
+export default class Topscroll extends Component {
     state = {
         slideIndex:0
     }
@@ -53,4 +53,3 @@ class Topscroll extends Component {
     }
 }
 
-export default Topscroll

src/components/classify/courselist.scss

 .class-child {
+  .search-nav {
+    height: 44px;
+    line-height: 44px;
+    padding: 0 15px;
+    background-color: $bg_f7f9fc;
+    display: flex;
+    justify-content: space-between;
+
+    .am-search {
+      width: 81%;
+      background-color: $bg_f7f9fc;
+    }
+
+    .am-search-input,.am-search-synthetic-ph,.am-search-value{
+      text-align: left;
+      padding-left: 15px;
+      height: 26px;
+      line-height: 26px;
+    }
+
+    .am-search-input {
+      background-color: $bg_EBEFF5;
+      border-radius: 13px;
+    }
+
+    .shopping-cart,.return {
+      font-size: 18px !important;
+    }
+  }
+
+  .class-content {
     padding: 0 12px;
     position: relative;
+
     .v-list-item {
       padding: 10px 0 0;
 
@@ -14,12 +46,18 @@
           img {
             width: 100%;
           }
+
+          .course-status {
+            background-color: rgba(224, 46, 36, 0.6);
+
+          }
         }
       }
 
       .info {
         width: 52.3%;
         position: relative;
+        display: block;
 
         .title {
           font-size: 16px;
@@ -42,7 +80,7 @@
           .course-price {
             .new {
               color: $red;
-            font-size: 15px;
+              font-size: 16px;
             }
 
             .old {
@@ -72,24 +110,49 @@
     .tabs {
       display: flex;
       margin-top: 10px;
+      margin-bottom: 50px;
     }
 
     .pull-down {
       width: 32px;
       position: absolute;
-    top: 12px;
+      top: 4px;
       right: 0;
       z-index: 2;
       background-color: $bg_fff;
       color: $color_666;
     }
+    .am-tabs-tab-bar-wrap {
+      padding-right: 20px;
+    }
+
+    .am-tabs-default-bar-tab {
+      width: auto !important;
+      margin-right: 20px;
+    }
+
+    .am-tabs-default-bar-tab-active {
+      color: $active;
+      border-bottom: 2px solid $active !important;
+    }
+
+    .am-tabs-default-bar-underline {
+      display: none;
+    }
+
+    .am-whitespace.am-whitespace-md {
+      height: 0 !important;
+    }
+  }
+
   .mbc-box {
     position: fixed;
     left: 0;
-    top: 53px;
+    top: 88px;
     right: 0;
     bottom: 0;
-    background-color: rgba(0,0,0,.6);
+    background-color: rgba(0, 0, 0, .6);
+
     .tabcontent {
       width: 100%;
       height: 303px;
@@ -97,13 +160,14 @@
       background-color: $bg_fff;
       border-top: 1px solid $sp_ddd;
       padding-bottom: 30px;
+
       .class-course {
         width: 100%;
         margin-top: 20px;
         padding: 0 15px;
 
         .course-items-title {
-          font-size: 13px;
+          font-size: 14px;
           color: $color_333;
 
         }
@@ -142,11 +206,8 @@
       }
     }
   }
-
 }
+
 html:not([data-scale]) .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
   background-color: $bg_fff;
 }
-.am-tabs-tab-bar-wrap {
-  padding-right: 30px;
-}
\ No newline at end of file

src/components/classify/index.scss

@@ -18,7 +18,7 @@
   padding: 0 15px;
 
   .course-items-title {
-    font-size: 13px;
+    font-size: 14px;
     color: $color_333;
 
     img {

src/styles/variable.scss

@@ -37,6 +37,7 @@ $bg_000: #000;
 $bg_f4f4f4: #f4f4f4;
 $bg_f5f5f5: #f5f5f5;
 $bg_f7f9fc: #f7f9fc;
+$bg_EBEFF5: #EBEFF5;
 
 
 /*