优化导航，制作首页功能

a395027720 · Aug 5, 2019 · 22395bc · 22395bc
1 parent 7e2c7b3
commit 22395bc
Show file tree

Hide file tree

Showing 24 changed files with 669 additions and 26 deletions.
diff --git a/config/paths.js b/config/paths.js
@@ -85,6 +85,7 @@ module.exports = {
   servedPath: getServedPath(resolveApp('package.json')),
   stylesPath: resolveApp('src/styles'),
   utilsPath: resolveApp('src/utils'),
+  imagesPath: resolveApp('src/static/images'),
 };
 
 

diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -274,7 +274,8 @@ module.exports = function(webpackEnv) {
         'react-native': 'react-native-web',
         '@': paths.appSrc,
         'utils':paths.utilsPath,
-        'styles':paths.stylesPath
+        'styles':paths.stylesPath,
+        'images':paths.imagesPath
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding

diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,11 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-
+    <meta name="format-detection" content="telephone=no">
+    <meta name="apple-touch-fullscreen" content="yes">
+    <meta name="description" content="【火花思维】-儿童数理思维启蒙和专注力训练在线教育平台,资深教研教师团队,100%原创课程寓教于乐,提升孩子数理逻辑等成长关键能力。" />
+    <meta name="keywords" content="注意力训练,儿童专注力训练" />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -20,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>儿童数理思维在线教育平台-火花思维</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

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

diff --git a/src/components/footer/index.js b/src/components/footer/index.js
@@ -1,11 +1,42 @@
-import React, { Component } from 'react'
-
+import React, { Component } from "react";
+import "./index.scss";
+import code from "images/code.png"
 export default class Footer extends Component {
   render() {
     return (
-      <div>
-        Footer
+      <div className="footer">
+        <div className="w flex-row">
+          <div className="footer-left flex-4">
+            <ul className="flex-column">
+              <li>首页</li>
+              <li>课程体系</li>
+              <li>AI课</li>
+              <li>火花知识</li>
+              <li>常见问题</li>
+              <li>软件下载</li>
+              <li>关于我们</li>
+            </ul>
+          </div>
+          <div className="footer-center flex-5 flex-column">
+            <p>客服：10109909</p>
+            <p style={{ marginTop: 15 }}>工作时间：周一至周日9:00-21:00</p>
+            <div className="zhaopin">
+              <span>教师招聘 - [email protected]</span>
+            </div>
+            <div className="hezuo">
+              <span>商务合作 - [email protected]</span>
+            </div>
+          </div>
+          <div className="footer-right flex-3">
+            <p>微信服务号</p>
+            <img className="code-img" src={code} alt=""/>
+          </div>
+        </div>
+        <div className="footer-bottom flex-column align-items-center">
+            <p>Copyright © 2019 北京心更远科技发展有限公司 版权所有京ICP备16037757号-2</p>
+            <p>京公网安备 11010502036019号网络文化经营许可证京网文[2018]7814-639号</p>
+          </div>
       </div>
-    )
+    );
   }
 }
diff --git a/src/components/footer/index.scss b/src/components/footer/index.scss
@@ -0,0 +1,44 @@
+.footer {
+  background-color: #3c3c3c;
+  color: #fff;
+  font-size: 16px;
+  padding: 50px 0 0 0;
+  .footer-left {
+    ul {
+      li {
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+  }
+  .footer-center {
+    .zhaopin,
+    .hezuo {
+      margin-top: 10px;
+      span {
+        display: inline-block;
+        background-color: #2f2f2f;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 20px;
+        border-radius: 20px;
+      }
+    }
+
+  }
+  .footer-right{
+    .code-img{
+      width: 258px;
+      height: 258px;
+      margin-top: 20px;
+    }
+
+  }
+  .footer-bottom{
+    font-size: 13px;
+    line-height: 25px;
+    background-color: #2f2f2f;
+    padding: 30px 0 30px 0;
+    color: #cdcdcd;
+  }
+}
diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -14,6 +14,10 @@ export default class Header extends Component {
 
   componentDidMount() {
     window.addEventListener("scroll", this.handleWindowScroll.bind(this));
+    let activeTab = tabs.findIndex(
+      item => item.path === window.location.pathname
+    );
+    this.setState({ activeTab });
   }
   componentWillUnmount() {
     window.removeEventListener("scroll", this.handleWindowScroll.bind(this));
@@ -69,11 +73,11 @@ export default class Header extends Component {
 const tabs = [
   {
     title: "首页",
-    path: "/"
+    path: "/home"
   },
   {
     title: "课程体系",
-    path: "/system"
+    path: "/course"
   },
   {
     title: "AI课",

diff --git a/src/pages/common/index.js b/src/pages/common/index.js
@@ -11,6 +11,9 @@ export default class Common extends Component {
     dhzxShow: false,
   };
 
+
+
+
   render() {
     return (
       <div className="common">

diff --git a/src/pages/common/index.scss b/src/pages/common/index.scss
@@ -2,7 +2,7 @@
 
 .common {
   position: relative;
-
+background-color: #e7ecf3;
   .float-btns {
     position: fixed;
     right: 0;

diff --git a/src/pages/course/index.js b/src/pages/course/index.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import "./index.scss"
+export default class Course extends Component {
+  render() {
+    return (
+      <div className="course">
+        <div className="banner-image">
+
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/pages/course/index.scss b/src/pages/course/index.scss
@@ -0,0 +1,12 @@
+.course{
+  position: relative;
+
+  background-color: red;
+  .banner-image{
+    width: 100%;
+    height: 416px;
+    background: url(https://asset.txqn.huohua.cn/image/113ae1e6-3ac6-44cb-8157-b424558b05f5.jpg) no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+}