banner

src/components/blessingPreheat/banner/index.js

+import React, { Component } from 'react'
+import './index.scss'
+
+class Banner extends Component {
+  state = {
+    navs: [
+      {
+        text: '积福气'
+      },
+      {
+        text: '幸运大抽奖'
+      },
+      {
+        text: '预付定金'
+      },
+      {
+        text: '精品特惠'
+      },
+      {
+        text: 'AI测试'
+      },
+      {
+        text: '大咖直播'
+      },
+    ]
+  }
+  render() {
+    const {navs} = this.state
+    return (
+      <div id={'main-banner'}>
+        <div className="banner"></div>
+        <nav id={'main-nav'}>
+          <ul>
+            {
+              navs.map((item, index) => {
+                return (
+                  <li key={index}>{item.text}</li>
+                )
+              })
+            }
+          </ul>
+        </nav>
+      </div>
+    )
+  }
+}
+
+export default Banner

src/components/blessingPreheat/banner/index.scss

+#main-banner{
+    .banner{
+        width: 375px;
+        height: 183px;
+        background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/banner.png") no-repeat;
+        background-size: contain;
+    }
+    #main-nav{
+        margin-bottom:30px;
+        ul{
+            background: #3900C9;
+            display: flex;
+        }
+        li{
+            width: 63px;
+            height: 30px;
+            font-size: 11px;
+            color: #fff;
+            text-align: center;
+            line-height: 30px;
+        }
+    }
+}

src/components/blessingPreheat/index.js

@@ -17,6 +17,7 @@ import { Popup } from '@/common'
 import {CopyToClipboard} from 'react-copy-to-clipboard'
 import { Toast } from "antd-mobile"
 import Live from './live'
+import Banner from './banner'
 
 
 class BlessingPreheat extends Component {
@@ -147,6 +148,7 @@ class BlessingPreheat extends Component {
     const { userInfo, isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, isSign, showRecordList, shareMark} = this.state
     return (
       <div id={'blessing-preheat'}>
+        <Banner/>
         {/* 积福气 */}
         <ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
         <CollectBlessing