+
- )
+ );
}
}
diff --git a/src/components/footer/index.scss b/src/components/footer/index.scss
new file mode 100644
index 0000000..87ce690
--- /dev/null
+++ 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
index 65155d3..4f01a1b 100644
--- 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
index 42908f6..4e4f45d 100644
--- 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 (
+
+
+
+ -
+
- 首页 +
- 课程体系 +
- AI课 +
- 火花知识 +
- 常见问题 +
- 软件下载 +
- 关于我们 +
+
+ 客服：10109909
+工作时间：周一至周日9:00-21:00
+
+ 教师招聘 - ls@huohua.cn
+
+
+ 商务合作 - BD@huohua.cn
+
+
+ 
+
+ 微信服务号
+
+
Copyright © 2019 北京心更远科技发展有限公司 版权所有京ICP备16037757号-2
+京公网安备 11010502036019号网络文化经营许可证京网文[2018]7814-639号
+
diff --git a/src/pages/common/index.scss b/src/pages/common/index.scss
index cba9856..c9443cc 100644
--- 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
new file mode 100644
index 0000000..0bbda89
--- /dev/null
+++ 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 (
+
+
+ )
+ }
+}
diff --git a/src/pages/course/index.scss b/src/pages/course/index.scss
new file mode 100644
index 0000000..ef597f3
--- /dev/null
+++ 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;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
index bc72e10..34d4dc6 100644
--- a/src/pages/home/index.js
+++ b/src/pages/home/index.js
@@ -3,12 +3,25 @@ import Swiper from "react-id-swiper";
import { Link } from "react-router-dom";
import "react-id-swiper/lib/styles/css/swiper.css";
import "./index.scss";
+
+import img1 from "../../static/images/youshi1.jpg";
+import img2 from "../../static/images/youshi2.jpg";
+import img3 from "../../static/images/youshi3.jpg";
+import img4 from "../../static/images/youshi4.jpg";
+import img5 from "../../static/images/youshi5.jpg";
+import img6 from "../../static/images/youshi6.jpg";
+import rightarrow from "../../static/images/right-arrow.png";
+
export default class Home extends Component {
+ constructor(props) {
+ super(props);
+ }
+
render() {
return (
+
+
+
-
-
+
+
-
diff --git a/src/static/images/code.png b/src/static/images/code.png
new file mode 100644
index 0000000..8d1f9a5
Binary files /dev/null and b/src/static/images/code.png differ
diff --git a/src/static/images/right-arrow.png b/src/static/images/right-arrow.png
new file mode 100644
index 0000000..b7f83fa
Binary files /dev/null and b/src/static/images/right-arrow.png differ
diff --git a/src/static/images/youshi1.jpg b/src/static/images/youshi1.jpg
new file mode 100644
index 0000000..1286cce
Binary files /dev/null and b/src/static/images/youshi1.jpg differ
diff --git a/src/static/images/youshi2.jpg b/src/static/images/youshi2.jpg
new file mode 100644
index 0000000..f552282
Binary files /dev/null and b/src/static/images/youshi2.jpg differ
diff --git a/src/static/images/youshi3.jpg b/src/static/images/youshi3.jpg
new file mode 100644
index 0000000..13dc946
Binary files /dev/null and b/src/static/images/youshi3.jpg differ
diff --git a/src/static/images/youshi4.jpg b/src/static/images/youshi4.jpg
new file mode 100644
index 0000000..82091ac
Binary files /dev/null and b/src/static/images/youshi4.jpg differ
diff --git a/src/static/images/youshi5.jpg b/src/static/images/youshi5.jpg
new file mode 100644
index 0000000..e2d0cfe
Binary files /dev/null and b/src/static/images/youshi5.jpg differ
diff --git a/src/static/images/youshi6.jpg b/src/static/images/youshi6.jpg
new file mode 100644
index 0000000..6e2af81
Binary files /dev/null and b/src/static/images/youshi6.jpg differ
diff --git a/src/styles/common.scss b/src/styles/common.scss
index afd0d79..2df63c6 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,10 +1,14 @@
@import "styles/default.scss";
+body {
+ font: 14px/1.5 Hiragino Sans GB, Microsoft YaHei, \\5fae\8f6f\96c5\9ed1, arial,
+ \5b8b\4f53, sans-serif;
+}
+
.w {
width: 1080px;
height: 100%;
margin: 0 auto;
- overflow: hidden;
}
.fl {
@@ -125,4 +129,4 @@
.align-items-end {
align-items: flex-end;
-}
\ No newline at end of file
+}
diff --git a/src/utils/prototype.js b/src/utils/prototype.js
new file mode 100644
index 0000000..a7f6d49
--- /dev/null
+++ b/src/utils/prototype.js
@@ -0,0 +1,100 @@
+//=====================================Array==============================
+
+/**
+ * 查找指定的元素在数组中的位置
+ */
+Array.prototype.indexOf = function(val) {
+ for (var i = 0; i < this.length; i++) {
+ if (this[i] == val) return i;
+ }
+ return -1;
+};
+/*
+ * 方法:Array.remove(obj)
+ * 功能:删除数组元素.
+ * 参数:要删除的对象.
+ * 返回:在原数组上修改数组
+ */
+Array.prototype.remove = function(obj) {
+ if (null == obj) {
+ return;
+ }
+ for (var i = 0, n = 0; i < this.length; i++) {
+ if (this[i] != obj) {
+ this[n++] = this[i];
+ }
+ }
+ this.length -= 1;
+};
+/*
+ * 方法:Array.removeAt(Index)
+ * 功能:删除数组元素.
+ * 参数:Index删除元素的下标.
+ * 返回:在原数组上修改数组
+ */
+Array.prototype.removeAt = function(Index) {
+ if (isNaN(Index) || Index > this.length) {
+ return false;
+ }
+ for (var i = 0, n = 0; i < this.length; i++) {
+ if (this[i] != this[Index]) {
+ this[n++] = this[i];
+ }
+ }
+ this.length -= 1;
+};
+
+/*
+ * 方法:Array.Contains(obj)
+ * 功能:确定某个元素是否在数组中.
+ * 参数:要查找的Object对象
+ * 返回:找到返回true,否则返回false;
+ */
+Array.prototype.contains = function(obj) {
+ if (null == obj) {
+ return;
+ }
+ for (var i = 0, n = 0; i < this.length; i++) {
+ if (this[i] == obj) {
+ return true;
+ }
+ }
+
+ return false;
+};
+
+/*
+ * 方法:Array.Clear()
+ * 功能:消空数组元素.
+ * 参数:无.
+ * 返回:空数组
+ */
+Array.prototype.clear = function() {
+ this.length = 0;
+};
+
+//=====================================Date==============================
+
+Date.prototype.format = function(fmt) {
+ var o = {
+ "M+": this.getMonth() + 1, //月份
+ "d+": this.getDate(), //日
+ "h+": this.getHours(), //小时
+ "m+": this.getMinutes(), //分
+ "s+": this.getSeconds(), //秒
+ "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+ S: this.getMilliseconds() //毫秒
+ };
+ if (/(y+)/.test(fmt))
+ fmt = fmt.replace(
+ RegExp.$1,
+ (this.getFullYear() + "").substr(4 - RegExp.$1.length)
+ );
+ for (var k in o)
+ if (new RegExp("(" + k + ")").test(fmt))
+ fmt = fmt.replace(
+ RegExp.$1,
+ RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
+ );
+ return fmt;
+};
@@ -62,15 +75,189 @@ export default class Home extends Component {
-
+
);
}
+
+ goNext = () => {
+ if (this.swiper !== null) {
+ this.swiper.slideNext();
+ }
+ };
+
+ goPrev = () => {
+ if (this.swiper !== null) {
+ this.swiper.slidePrev();
+ }
+ };
}
-const params = {
+const homeSwiperParams = {
loop: true,
pagination: {
el: ".swiper-pagination",
@@ -81,3 +268,13 @@ const params = {
delay: 3000
}
};
+const homeDynamicParams = {
+ slidesPerView: 3,
+ spaceBetween: 50,
+ centeredSlides: true,
+ loop: true,
+
+ autoplay: {
+ delay: 3000
+ }
+};
diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
index 4a0309e..ef97509 100644
--- a/src/pages/home/index.scss
+++ b/src/pages/home/index.scss
@@ -1,11 +1,10 @@
@import "styles/default.scss";
.home {
- .swiper {
-
+ background: #f9fafc;
+ .home-swiper {
.slider-item {
height: 640px;
-
.w {
padding-top: 153px;
padding: 153px 80px 0 80px;
@@ -70,7 +69,7 @@
background: url(https://asset.txqn.huohua.cn/image/803e2e53-6b2b-4833-8b0f-3959cb97a621.jpg)
no-repeat top;
background-size: auto 100%;
-
+
.mfst {
background-color: $color-theme-red !important;
color: #fff !important;
@@ -84,8 +83,235 @@
border-radius: 4px;
}
}
- .two{
- height: 640px;
- background-color: red;
+
+ .youshi-title,
+ .bihuan-title {
+ width: 100%;
+ text-align: center;
+ font-size: 50px;
+ font-weight: 550;
+ color: #4a4a4a;
+ margin-top: 100px;
+ }
+ .youshi-subtitle,
+ .bihuan-subtitle {
+ width: 100%;
+ text-align: center;
+ height: 50px;
+ line-height: 50px;
+ color: #999;
+ font-size: 24px;
+ padding: 20px 0 50px 0;
+ }
+ .home-youshi {
+ .youshi-list {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ .list-item {
+ text-align: center;
+ background-color: #fff;
+ margin: 15px;
+ border-radius: 20px;
+ &:hover {
+ box-shadow: 0 5px 45px rgba(29, 29, 29, 0.1);
+ transition: all 0.6s;
+ }
+ img {
+ width: 100%;
+ height: auto;
+ }
+ p {
+ height: 60px;
+ line-height: 60px;
+ color: #666;
+ font-size: 20px;
+ }
+ }
+ }
+ }
+ .home-bihuan {
+ .bihuan-content {
+ .content-left {
+ border-radius: 10px;
+ overflow: hidden;
+
+ .left-item {
+ height: 120px;
+ color: #fff;
+ line-height: 120px;
+ text-align: center;
+ position: relative;
+ &:not(:first-child) {
+ border-top: 4px solid #fff;
+ }
+
+ p {
+ font-size: 18px;
+ }
+ span {
+ font-size: 24px;
+ }
+ }
+
+ @mixin aftercontent($color) {
+ &::after {
+ content: "";
+ background-color: $color;
+ position: absolute;
+ bottom: -32px;
+ z-index: 99;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 40px;
+ height: 40px;
+ transform: rotate(45deg);
+ transform-origin: top center;
+ border-right-width: 4px;
+ border-right-color: #fff;
+ border-right-style: solid;
+ border-bottom-width: 4px;
+ border-bottom-color: #fff;
+ border-bottom-style: solid;
+ }
+ }
+
+ .one {
+ @include aftercontent(#ffc200);
+ background-color: #ffc200;
+ }
+ .two {
+ @include aftercontent(#ffa241);
+ background-color: #ffa241;
+ }
+ .three {
+ @include aftercontent(#ff6f4c);
+ background-color: #ff6f4c;
+ }
+ .four {
+ background-color: #ff4355;
+ }
+ }
+ .content-right {
+ .one {
+ .item {
+ width: 25%;
+ height: 100px;
+ text-align: center;
+ line-height: 100px;
+ background-color: #f4f4f4;
+ border-left: 5px solid #fff;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ font-size: 24px;
+ color: #666;
+ position: relative;
+ &:not(:first-child) {
+ border-bottom: 4px solid #fff;
+ }
+ &:first-child {
+ background-color: #ededed;
+ ::after {
+ content: "";
+ display: block;
+ width: 175px+20px;
+ height: 10px;
+ background-color: #ededed;
+ position: absolute;
+ bottom: -4px;
+ right: -20px;
+ }
+ }
+ &:nth-child(2) {
+ border-bottom-left-radius: 15px;
+ }
+ }
+ }
+ .two,
+ .three,
+ .four {
+ width: 100%;
+ background-color: #ededed;
+ height: 125px;
+ line-height: 125px;
+ border-left: 5px solid #fff;
+ font-size: 20px;
+ color: #666;
+ padding-left: 30px;
+ box-sizing: border-box;
+ i {
+ display: block;
+ width: 37px;
+ height: 12px;
+ background: url(../../static/images/right-arrow.png) no-repeat;
+ background-size: 37px 12px;
+ margin: 0 10px;
+ }
+ }
+ .two {
+ height: 145px;
+ }
+ .two,
+ .three {
+ border-bottom: 5px solid #fff;
+ }
+ .four {
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ height: 120px;
+ }
+ }
+ }
+ .bihuan-process {
+ margin: 50px 30px;
+ .process {
+ width: 100%;
+ height: 5px;
+ background:linear-gradient(to right,#ffc003,#ff4753);
+ border-radius: 5px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ li{
+ display: block;
+ width: 20px;
+ height: 20px;
+ background-color: #ffc003;
+ border: 5px solid #fff;
+ border-radius: 50%;
+ box-shadow: 5px 5px 10px rgba(255,105,120,.36);
+ &:not(:first-child){
+ margin-left: 95px;
+ }
+ }
+
+ }
+ }
+ }
+ .home-dynamic{
+ height: 200px;
+ .w{
+ position: relative;
+ .swiper-container{
+ margin: 0 100px;
+ }
+ .slider-item{
+ width: 245px;
+ height: 175px;
+ border-radius: 10px;
+ overflow: hidden;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .swiper-button-prev{
+ position: absolute;
+ top: 50%;
+ left: 20px;
+ transform: translateY(-50%);
+ }
+ }
}
}
diff --git a/src/router/index.js b/src/router/index.js
index 4d04653..b25acb0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,8 @@ import Login from "@/pages/login";
import Common from "@/pages/common";
import Home from "@/pages/home";
import Nomatch from "@/pages/nomatch";
+import Course from "@/pages/course"
+
export default class Rouer extends Component {
render() {
return (
@@ -18,6 +20,7 @@ export default class Rouer extends Component {
+
+ 火花思维课程的六大优势
+深厚积累 匠心创新
+
+
+
+
+
+ 
+
+ 十年沉淀 一线团队创新打造
+
+
+
+ 
+
+ 在线直播沉浸式课堂体验
+
+
+
+ 
+
+ 1对4/6 小班授课
+
+
+
+ 
+
+ 1对4/6 小班授课
+
+
+
+ 
+
+ 1对4/6 小班授课
+
+
+
+ 
+
+ 1对4/6 小班授课
+
+
+ 科学学习闭环
++ 每个级别 4个阶段 5大模块 20个专题 循环巩固 螺旋上升 +
+
+
+
+
+
+
+
+
+ + 每个年级 四个阶段{" "} +
+
+
+ + 每个阶段 五个专题{" "} +
+
+
+ + 每个专题 四节课程{" "} +
+
+
+ + 每一节课 五大环节{" "} +
+
+
+
+
+
+
+ A阶段
+
+
+ B阶段
+
+
+ C阶段
+
+
+ D阶段
+
+
+ 数感运用
+ +图形空间
+ +逻辑推理
+ +生活应用
+ +益智游戏
+
+
+ 数感运用
+ +图形空间
+ +逻辑推理
+ +生活应用
+ +益智游戏
+
+
+ 数感运用
+ +图形空间
+ +逻辑推理
+ +生活应用
+ +益智游戏
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+ (this.swiper = swiper)}
+ {...homeDynamicParams}
+ >
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+