course list start

src/components/blessingPrehead/index.js

-import React, { Component } from 'react';
-import RulePopup from './rulePopup/index';
-import CoursePopup from './coursePopup/index';
-import './index.scss';
-
-class BlessingPrehead extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isRule: false,
-      isCourse: true
-    };
-  }
-
-  handleToHide = (key) => {
-    let obj = {};
-    obj[key] = false;
-    this.setState({
-      ...obj
-    });
-  }
-
-  render() {
-    const { isRule, isCourse } = this.state;
-    return (
-      <div>
-        22222
-        
-        {
-          isRule && 
-          <RulePopup handleToHide={() => this.handleToHide('isRule')} />
-        }
-        {
-          isCourse &&
-          <CoursePopup handleToHide={() => this.handleToHide('isCourse')} />
-        }
-      </div>
-    );
-  }
-}
-
-export default BlessingPrehead;
\ No newline at end of file

src/components/blessingPreheat/courseItem/index.js

+import React, { Component } from 'react';
+import './index.scss';
+
+class CourseItem extends Component {
+  render() {
+    const { image } = this.props;
+    return (
+      <div className="course-container">
+        <div className="course__cover">
+          <img src={image} alt="cover"/>
+        </div>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default CourseItem;
\ No newline at end of file

src/components/blessingPreheat/courseItem/index.scss

+.course-container {
+  width: 168px;
+  // height: 156px;
+  margin: 0 4px 15px;
+  border-radius: 2px;
+  background-color: #fff;
+}
+
+.course__cover {
+  height: 108px;
+  padding: 4px 4px 0;
+  overflow: hidden;
+
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
\ No newline at end of file

src/components/blessingPreheat/courseList/index.scss

+.group-course__footer {
+  padding: 10px 0;
+}
+
+.course-button {
+  display: block;
+  width: 138px;
+  height: 24px;
+  margin: 0 auto;
+  border-radius: 2px;
+  font-size: 12px;
+  color: #fff;
+  text-align: center;
+  line-height: 24px;
+  background:linear-gradient(90deg,rgba(255,140,27,1) 0%,rgba(255,59,5,1) 100%);
+}
+
+.coupon-course__footer {
+  padding: 10px 0;
+}
+
+.coupon-course__button {
+  display: flex;
+  align-items: center;
+  width: 138px;
+  height: 34px;
+  margin: 0 auto;
+  font-size: 12px;
+  color: #fff;
+  text-align: center;
+  line-height: 1;
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/coupon-bg-0.png');
+  
+}
+
+.coupon-course__button--receive {
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/coupon-bg-1.png');
+}
+
+.coupon-course__button-price {
+  flex: 1;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    font-size: 8px;
+    font-style: normal;
+  }
+}
+
+.coupon-course__button-label {
+  width: 86px;
+}
+
+.more-button {
+  display: block;
+  width: 100px;
+  height: 27px;
+  margin: 0 auto 15px;
+  border: 1px solid #fff;
+  border-radius: 14px;
+  font-size: 13px;
+  font-weight: 300;
+  color: #fff;
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+.ai-course__subtitle {
+  width: 83px;
+  height: 24px;
+  margin: 0 auto 15px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  text-align: center;
+  line-height: 24px;
+  background: linear-gradient(-90deg,rgba(46,206,240,1) 0%,rgba(45,86,240,1) 100%);
+}
+
+[data-layout="row"] {
+  display: flex;
+  flex-wrap: wrap;
+}
\ No newline at end of file

src/components/blessingPreheat/index.js

 import React, { Component } from 'react'
 import RulePopup from './rulePopup/index'
 import CoursePopup from './coursePopup/index'
+import CourseList from './courseList/index';
 import './index.scss'
 import { Popup } from '@/common'
 
@@ -10,7 +11,7 @@ class BlessingPreheat extends Component {
     this.state = {
       isRule: false,
       isCourse: false,
-      inviteVisible: true
+      inviteVisible: false
     }
   }
 
@@ -26,7 +27,10 @@ class BlessingPreheat extends Component {
     const {isRule, isCourse, inviteVisible} = this.state
     return (
       <div id={'blessing-preheat'}>
+
         22222
+        4444
+        <CourseList></CourseList>
         {
           isRule &&
           <RulePopup handleToHide={() => this.handleToHide('isRule')}/>

src/components/blessingPreheat/listFrame/index.js

+import React, { Component } from 'react';
+import './index.scss';
+
+
+function ListFrame(WrappedComponent) {
+  return class extends Component {
+    render() {
+      return (
+        <div className="list-frame">
+          <div className="list-frame__content">
+            <WrappedComponent />
+            33333
+          </div>
+        </div>
+      )
+    }
+  };
+}
+
+export default ListFrame;

src/components/blessingPreheat/listFrame/index.scss

+.list-frame {
+  margin: 0 10px;
+  border: 1px solid #5970FF;
+  border-radius: 5px;
+  background-color: #3900C9;
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/frame-bg-top.png');
+  background-repeat: no-repeat;
+}
+
+.list-frame__content {
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/frame-bg-bottom.png');
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}
\ No newline at end of file