add title component

src/components/blessingPreheat/courseList/index.js

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { http } from '@/utils';
 import listFrame from './../listFrame/index';
 import CourseItem from './../courseItem/index';
+import ListHeader from './../listHeader';
 import './index.scss';
 
 class CourseList extends Component {
@@ -191,7 +192,7 @@ class CourseList extends Component {
     const { basic, advanced, higher, expand, group, training } = this.state;
     return (
       <div>
-        
+        <ListHeader text="集训营、就业班" size="middle" styles={{margin: '20px 0 15px'}} />
         {/* 集训营、就业班 */}
         {
           (group.course && group.course.length > 0) &&
@@ -211,6 +212,7 @@ class CourseList extends Component {
           </>
         }
 
+        <ListHeader text="AI特训营" size="middle" styles={{margin: '0 0 15px'}} />
         {/* AI特训营 */}
         {
           (training.course && training.course.length > 0) &&

src/components/blessingPreheat/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import RulePopup from './rulePopup/index'
 import CoursePopup from './coursePopup/index'
 import CourseList from './courseList/index';
+import ListHeader from './listHeader/index';
 import './index.scss'
 import { Popup } from '@/common'
 import {CopyToClipboard} from 'react-copy-to-clipboard'
@@ -16,7 +17,7 @@ class BlessingPreheat extends Component {
       isCourse: false,
       inviteVisible: false,
       joinLotteryVisible: false,
-      timelineShareVisible: true
+      timelineShareVisible: false
     }
   }
 
@@ -37,8 +38,9 @@ class BlessingPreheat extends Component {
     return (
       <div id={'blessing-preheat'}>
 
-        22222
-        4444
+       
+        {/* 精品课程特惠专区 */}
+        <ListHeader text="精品课程特惠专区" styles={{margin: '0 0 15px'}} />
         <CourseList></CourseList>
         {
           isRule &&

src/components/blessingPreheat/listHeader/index.js

+import React, { Component } from 'react';
+import classnames from 'classnames';
+import './index.scss';
+
+class ListHeader extends Component {
+  render() {
+    const { text, size, styles } = this.props;
+    const cls = size? `list-header--${size}` : '';
+    return (
+      <div className={classnames("list-header", cls)} style={styles}>
+        <i className="list-header__decorate" data-position="left"></i>
+        {
+          text
+          ? <h2 className="list-header__content">{text}</h2>
+          : this.props.children
+        }
+        <i className="list-header__decorate" data-position="right"></i>
+      </div>
+    )
+  }
+}
+
+export default ListHeader;
\ No newline at end of file

src/components/blessingPreheat/listHeader/index.scss

+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.list-header--middle {
+
+  .list-header__decorate {
+    width: 25px;
+    height: 12px;
+  }
+
+  .list-header__content {
+    padding: 0 12px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+}
+
+.list-header__decorate {
+  display: inline-block;
+  width: 37px;
+  height: 18px;
+  background-size: cover;
+
+  &[data-position="left"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/list-header-l.png');
+  }
+
+  &[data-position="right"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/list-header-r.png');
+  }
+}
+
+.list-header__content {
+  margin: 0;
+  padding: 0 15px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #FFF604;
+}
\ No newline at end of file