限时免费首页页面

src/components/Index/index.js

-import React, { Component } from 'react'
-import { Course, CallApp } from '../../common'
+import React, {Component} from 'react'
+import {Course, CallApp} from '../../common'
 import './index.scss'
-import { WithTab } from '@/HOCs'
+import {WithTab} from '@/HOCs'
 // import Swiper from 'react-mobile-swiper'
 // import createStyle from './createStyle'
 import LazyLoad from 'react-lazy-load'
-import { http } from '@/utils'
+import {http} from '@/utils'
 import LiveRoom from './liveRoom'
-import { Link } from "react-router-dom"
-import { Toast } from 'antd-mobile'
-import { connect } from "react-redux";
+import {Link} from "react-router-dom"
+import {Toast} from 'antd-mobile'
+import {connect} from "react-redux";
 import TopSwiper from './TopSwiper'
 import ExpandActiveToast from './expandActiveToast'
+import CourseBase from '@/common/course-base'
 
 
 // const animateTypes = Swiper.animateTypes
@@ -55,6 +56,44 @@ class Index extends Component {
           'name': '社区',
           'href': 'https://ask.julyedu.com'
         }
+      ],
+      limitFree: [
+        {
+          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
+          title: '集训营就业优秀学员面试分享',
+          status: 1,
+          count: 1000,
+          price: '1000',
+          price1: '1000',
+          id: 1,
+        },
+        {
+          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
+          title: '集训营就业优秀学员面试分享',
+          status: 2,
+          count: 1000,
+          price: '1000',
+          price1: '1000',
+          id: 15,
+        },
+        {
+          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
+          title: '集训营就业优秀学员面试分享',
+          status: 3,
+          count: 1000,
+          price: '1000',
+          price1: '1000',
+          id: 13,
+        },
+        {
+          img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
+          title: '集训营就业优秀学员面试分享',
+          status: 1,
+          count: 1000,
+          price: '1000',
+          price1: '1000',
+          id: 2,
+        },
       ]
     }
   }
@@ -117,7 +156,12 @@ class Index extends Component {
     // }));
   }
 
+  handleLimitFreeClick = () => {
+
+  }
+
   render() {
+    const {limitFree} = this.state
     return (
       <div className='index-box'>
         <div className='header'>
@@ -179,6 +223,19 @@ class Index extends Component {
         }
 
         {
+          limitFree && limitFree.length &&
+          <div className="limit-free">
+            <h2 className="limit-free-title">
+              限时免费
+              <span className={'hot'}>hot</span>
+            </h2>
+            <LimitFree courses={limitFree}
+                       handleClick={this.handleLimitFreeClick}
+            />
+          </div>
+        }
+
+        {
           (this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
             return (
               <div key={index}>
@@ -393,5 +450,47 @@ function ScrollBox(props) {
   )
 }
 
+//限时免费
+function LimitFree({courses, handleClick}) {
+  return (
+    <div className="courses">
+      <ul>
+        {
+          courses.map(course => {
+            let Status
+            switch (course.status) {
+              case 1:
+                Status = <span className={'free'}>免费领取</span>
+                break
+              case 2:
+                Status = <button>已购买</button>
+                break
+              default:
+                Status = <span className={'current-price'}>¥{course.price}</span>
+            }
+            const Bottom = (
+              <div className={'bottom'}>
+                {Status}
+                <span className={'origin-price'}>¥{course.price1}</span>
+                <span className={'count'}>{course.count}人学过</span>
+              </div>
+            )
+            return (
+              <CourseBase
+                img={course.img}
+                title={course.title}
+                id={course.id}
+                handleClick={handleClick}
+                key={course.id}
+                bottom={Bottom}
+              />
+            )
+          })
+        }
+      </ul>
+    </div>
+  )
+}
+
 
 export default WithTab(Index);

src/components/Index/index.scss

 #chatBtn {
-  bottom: 60px!important;
+  bottom: 60px !important;
 }
+
 .index-box {
   overflow: hidden;
   background-color: $bg_fff;
@@ -511,7 +512,7 @@
         text-align: center;
         height: 47px;
 
-        button,a {
+        button, a {
           width: 60px;
           height: 27px;
           background-color: $bg_active;
@@ -524,7 +525,8 @@
           margin-left: -30px;
           bottom: 10px;
         }
-        a{
+
+        a {
           width: 90px;
           line-height: 27px;
           margin-left: -45px;
@@ -740,9 +742,89 @@
   //  //.is-visible {
   //  //  background-image: none;
   //  //}
+
+  .limit-free {
+    padding: 0 15px;
+    color: #333;
+
+    h2 {
+      display: flex;
+      align-items: center;
+      margin: 15px 0;
+      font-size: 15px;
+    }
+
+    .hot {
+      display: inline-block;
+      width: 25px;
+      height: 14px;
+      margin-left: 5px;
+      background: rgba(255, 64, 0, 1);
+      border-radius: 7px 7px 7px 0;
+      color: #fff;
+      text-align: center;
+      line-height: 14px;
+      font-size: 12px;
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+
+      li {
+        margin-right: 15px;
+        margin-top: 0;
+        margin-bottom: 20px;
+      }
+
+      & li:nth-child(2n) {
+        margin-right: 0;
+      }
+    }
+
+    .origin-price {
+      color: #999;
+      font-size: 12px;
+      text-decoration: line-through;
+    }
+
+    .bottom {
+      margin-top: 5px;
+      span{
+        margin-right: 5px;
+      }
+      span:nth-child(3){
+        margin-right: 0;
+      }
+    }
+
+    $red: #FF2121;
+
+    .bottom span:nth-child(1), .bottom button:nth-child(1) {
+      margin-right: 6px;
+    }
+
+    .current-price, .free {
+      color: $red;
+      font-size: 15px;
+    }
+
+    button {
+      width: 61px;
+      height: 18px;
+      background: rgba(0, 153, 255, 1);
+      border-radius: 9px;
+      text-align: center;
+      color: #fff;
+      font-size: 12px;
+      -webkit-appearance: none;
+      outline: 0;
+      border: 0;
+    }
+  }
 }
 
-.index-box + .nav-bar + .year19-index{
+.index-box + .nav-bar + .year19-index {
   display: none;
 }