首页制作，增减banner

a395027720 · Jul 27, 2019 · 8361c86 · 8361c86
1 parent e14dc4a
commit 8361c86
Show file tree

Hide file tree

Showing 21 changed files with 13,403 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,11 +47,13 @@
     "react-app-polyfill": "^1.0.1",
     "react-dev-utils": "^9.0.1",
     "react-dom": "^16.8.6",
+    "react-id-swiper": "^2.3.1",
     "react-router-dom": "^5.0.1",
     "resolve": "1.10.0",
     "sass-loader": "^7.1.0",
     "semver": "6.0.0",
     "style-loader": "0.23.1",
+    "swiper": "^4.5.0",
     "terser-webpack-plugin": "1.2.3",
     "ts-pnp": "1.1.2",
     "url-loader": "1.1.2",

diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,8 @@
 import React, { Component } from "react";
-
-import "styles/common.css";
+import "styles/iconfont/iconfont.css";
+import "styles/common.scss";
 import "styles/reset.css";
+
 export default class App extends Component {
   componentDidMount() {}
   render() {

diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -1,14 +1,79 @@
-import React, { Component } from 'react'
-import "./index.scss"
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import "./index.scss";
+
 export default class Header extends Component {
+  constructor(props) {
+    super(props);
+  }
+  state = {
+    activeTab: 0
+  };
   render() {
     return (
-      <div className="header">
-        <div className="header-center w">
-          123
+      <div className="header ">
+        <div className="w flex-row">
+          <div className="flex-2 flex-row align-items-center">
+            <a className="logo" href="/" />
+          </div>
+          <div className="flex-9 navi flex-row align-items-center">
+            <ul className="flex-row">{this.renderTabs()}</ul>
+          </div>
+          <div className="flex-1 login flex-row align-items-center">
+            <a className="btn" href="#">
+              登录
+            </a>
+          </div>
         </div>
-
       </div>
-    )
+    );
+  }
+
+  renderTabs() {
+    return tabs.map((item, index) => {
+      return (
+        <li key={index} onClick={this.handleClickTab.bind(this, index)}>
+          <NavLink to={item.path}>{item.title}</NavLink>
+          <i className={this.state.activeTab === index ? "active" : ""} />
+        </li>
+      );
+    });
+  }
+
+  handleClickTab(index) {
+    this.setState({
+      activeTab: index
+    });
   }
 }
+
+const tabs = [
+  {
+    title: "首页",
+    path: "/"
+  },
+  {
+    title: "课程体系",
+    path: "/system"
+  },
+  {
+    title: "AI课",
+    path: "/aicourse"
+  },
+  {
+    title: "火花知识",
+    path: "/knowledge"
+  },
+  {
+    title: "常见问题",
+    path: "/problem"
+  },
+  {
+    title: "软件下载",
+    path: "/download"
+  },
+  {
+    title: "关于我们",
+    path: "/about"
+  }
+];
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
@@ -1,11 +1,69 @@
-.header{
+@import "styles/default.scss";
+
+.header {
   height: 86px;
-  background-color: red;
+  z-index: 999;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
-  .header-center{
+
+  .w {
     height: 100%;
+    display: flex;
+
+    .logo {
+      display: block;
+      width: 135px;
+      height: 40px;
+      background: url(../../assets/images/logo.png) no-repeat center;
+      background-size: contain;
+    }
+
+    .navi {
+      li {
+        position: relative;
+
+        a {
+          display: block;
+          height: 50px;
+          line-height: 50px;
+          padding: 0 20px;
+          color: white;
+          font-size: 16px;
+        }
+
+        i {
+          display: block;
+          height: 3px;
+          width: 32px;
+          background-color: transparent;
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+
+          &.active {
+            background-color: #fff;
+          }
+        }
+
+
+      }
+    }
+
+    .login {
+      .btn {
+        display: block;
+        width: 92px;
+        height: 32px;
+        font-size: 14px;
+        line-height: 32px;
+        text-align: center;
+        color: $color-theme-red;
+        background-color: #fff;
+        border-radius: 16px;
+      }
+    }
   }
 }
diff --git a/src/pages/common/index.js b/src/pages/common/index.js
@@ -1,14 +1,35 @@
 import React, { Component } from "react";
+import {Link} from "react-router-dom"
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import "./index.scss"
+import "./index.scss";
 export default class Common extends Component {
   render() {
     return (
       <div className="common">
         <Header />
-          {this.props.children}
-          <Footer />
+        {this.props.children}
+        <Footer />
+        <div className="float-btns ">
+          <ul>
+            <li>
+              <Link to="/" className="mfst" href="#">
+                <i className="iconfont">&#xe60d;</i>
+                免费试听
+              </Link>
+            </li>
+            <li>
+              <Link to="/" className="zxzx" href="#">
+                <i className="iconfont">&#xe711;</i>在线咨询
+              </Link>
+            </li>
+            <li>
+              <Link to="/" className="dhzx" href="#">
+                <i className="iconfont">&#xe6f4;</i>电话咨询
+              </Link>
+            </li>
+          </ul>
+        </div>
       </div>
     );
   }

diff --git a/src/pages/common/index.scss b/src/pages/common/index.scss
@@ -1,6 +1,45 @@
+@import "styles/default.scss";
+
 .common {
     position: relative;
-    //width: 1080px;
-    //margin: 0 auto;
-    //overflow: hidden;
-}
+
+    .float-btns {
+        position: fixed;
+        right: 0;
+        bottom: 100px;
+        z-index: 999;
+
+        li {
+            margin-bottom: 15px;
+            font-size: 18px;
+            a {
+                display: block;
+                width: 144px;
+                height: 60px;
+                line-height: 60px;
+                border-radius: 30px 0 0 30px;
+                color: white;
+                box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
+                .iconfont {
+                    margin-left: 10px;
+                    margin-right: 10px;
+                }
+
+
+            }
+
+            .mfst {
+                background-color: $color-theme-red;
+            }
+
+            .zxzx {
+                background-color: #ff7c21;
+            }
+
+            .dhzx {
+                background-color: #ffb51a;
+            }
+        }
+
+    }
+}
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -1,13 +1,80 @@
-import React, { Component } from 'react'
-import "./index.scss"
+import React, { Component } from "react";
+import Swiper from "react-id-swiper";
+import { Link } from "react-router-dom";
+import "react-id-swiper/lib/styles/css/swiper.css";
+import "./index.scss";
 export default class Home extends Component {
   render() {
     return (
       <div className="home">
-        <div className="home-banner">
-
+        <div className="swiper">
+          <Swiper {...params}>
+            <div className="slider-item  live-lesson">
+              <div className="w flex-row">
+                <div className="left flex-6">
+                  <h2 className="title">在线少儿</h2>
+                  <h2 className="subtitle">数理思维直播课</h2>
+                  <p className="desc">
+                    全面提升儿童数理思维能力和专注力 <br />
+                    教育行业一线团队专注十年积累打造
+                    <br />
+                    高品质小班直播教学，科技推动教育公平
+                    <br />
+                    100%原创课件，全程专属辅导老师跟进服务
+                  </p>
+                  <div className="btns">
+                    <Link className="mfst" to="/">
+                      免费试听
+                    </Link>
+                    <Link className="ljwm" to="/">
+                      了解我们
+                    </Link>
+                  </div>
+                </div>
+                <div className="right flex-6">
+                  <img
+                    src="https://asset.txqn.huohua.cn/image/f08c5162-411a-41c3-baf7-53a27012d186.png?imageView2/2/w/640/format/png/"
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="slider-item huohua-ai">
+              <div className="w flex-row">
+                <div className="left flex-6">
+                  <h2 className="title">在线少儿</h2>
+                  <h2 className="subtitle">数理思维直播课</h2>
+                  <p className="desc">
+                    全面提升儿童数理思维能力和专注力 <br />
+                    教育行业一线团队专注十年积累打造
+                    <br />
+                    高品质小班直播教学，科技推动教育公平
+                    <br />
+                    100%原创课件，全程专属辅导老师跟进服务
+                  </p>
+                  <div className="btns">
+                    <Link className="mfst" to="/">
+                      马上了解
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Swiper>
         </div>
       </div>
-    )
+    );
   }
 }
+
+const params = {
+  loop: true,
+  pagination: {
+    el: ".swiper-pagination",
+    type: "bullets",
+    clickable: true
+  },
+  autoplay: {
+    delay: 3000
+  }
+};