sourcecode/front/project/www/routes/page/home/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Button from '../../../components/Button';
import Footer from '../../../components/Footer';

export default class extends Page {
  constructor(props) {
    super(props);
    this.state = { index: 0 };
  }

  initData() {
    setTimeout(() => {
      this.createLayout();
    }, 1);
  }

  createLayout() {
    const msnry = new Masonry('.grid', {
      itemSelector: '.grid-item',
    });
    msnry.layout();
  }

  renderView() {
    return (
      <div>
        <div className="block block-1">
          <div className="body">
            <div className="title">PREPARE THE GMAT LIKE A PRO.</div>
            <div className="desc">我们相信每位考生独一无二，但科学的备考方法本质相通；</div>
            <div className="desc">我们知道考取高分并非易事，但千行的专业指导让难度下降25%;</div>
            <div className="desc">我们清楚GMAT只是留学生涯的起点，但千行努力让您收获更多。</div>
          </div>
        </div>
        <div className="block block-2">
          <div className="body">
            <div className="title">完善备考信息，赢VIP权限</div>
            <div className="desc">知己知彼，百战不殆！</div>
            <Button theme="white" className="btn">
              立即填写
            </Button>
          </div>
        </div>
        <div className="block block-3">
          <div className="bg">
            <div className="bg-1" />
            <div className="bg-2" />
            <div className="bg-3" />
            <div className="bg-4" />
          </div>
          <div className="fixed">
            <div className="body">
              <div className="step step-1">
                <div className="m-title">备考攻略</div>
                <div className="list">
                  <div className="item m-r-2">
                    <div className="title">
                      自学指南<span className="sub">Self-guided</span>
                    </div>
                    <div className="btn">
                      <Button className="btn-shadow" size="lager">
                        从零开始
                      </Button>
                      <Button className="btn-shadow" theme="white" size="lager">
                        继续学习
                      </Button>
                    </div>
                  </div>
                  <div className="item m-l-2">
                    <div className="title">
                      参与课程<span className="sub">With DUKB24</span>
                    </div>
                    <div className="btn">
                      <Button theme="error" size="lager" radius>
                        从零开始
                      </Button>
                      <Button theme="warn" size="lager" radius>
                        继续学习
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
              <div className="step step-2">
                <div className="m-title">WHY 千行</div>
                <div className="list">
                  <div className="item m-r-1-5">
                    <div className="title">
                      <Assets name="planet" />
                      内容全⾯<span className="sub">360° Support</span>
                    </div>
                    <div className="desc">
                      网站涵盖考试介绍、方法引导、技巧点拨、练习、课程、机经、模考、心经分享等，从入门到出分，一应俱全，满足各阶段考生的备考需求。
                    </div>
                  </div>
                  <div className="item m-r-1-5 m-l-1-5">
                    <div className="title">
                      <Assets name="expert" />
                      指导专业<span className="sub">We are Pro.</span>
                    </div>
                    <div className="desc">专注GMAT备考8年 出分周期高于行业平均水平26% 学员均分高于行业18%</div>
                  </div>
                  <div className="item m-l-1-5">
                    <div className="title">
                      <Assets name="userfriendly" />
                      ⼈⼈会⽤<span className="sub">User-frriendly</span>
                    </div>
                    <div className="desc">
                      除提供有用的数据信息外，网站多处设置信息导，提供必要的解释和原理说明，从源头规避误区，协助考生做出更加明智的决策，提高备考效率。
                    </div>
                  </div>
                </div>
              </div>
              <div className="step step-3">
                <div className="list">
                  <div className="item m-r-1-5">
                    <div className="title" style={{ color: '#4292F0' }}>
                      123342
                    </div>
                    <div className="desc">注册用户</div>
                    <Assets className="foot-1" name="foot1" />
                  </div>
                  <div className="item m-r-1-5 m-l-1-5">
                    <div className="title" style={{ color: '#FFB676' }}>
                      2234
                    </div>
                    <div className="desc">700+分学员</div>
                    <Assets className="foot-2" name="foot2" />
                  </div>
                  <div className="item m-l-1-5">
                    <div className="title" style={{ color: '#F36565' }}>
                      680
                    </div>
                    <div className="desc">学员均分</div>
                    <Assets className="foot-3" name="foot1" />
                  </div>
                </div>
              </div>
              <div className="step step-4">
                <div className="m-title">
                  千⾏课程<span className="sub">Waste Less, Learn More</span>
                </div>
                <div className="box">
                  <div className="detail">
                    <Assets name="class_img1" />
                  </div>
                  <div className="list">
                    <div
                      className={`tab ${this.state.index === 0 ? 'active' : ''}`}
                      onMouseEnter={() => this.setState({ index: 0 })}
                    >
                      <Assets name="grammar" />
                      语法SC
                      <div className="place place-1">
                        <span className="right-arrow" />
                      </div>
                      <i className="left-arrow" />
                    </div>
                    <div
                      className={`tab ${this.state.index === 1 ? 'active' : ''}`}
                      onMouseEnter={() => this.setState({ index: 1 })}
                    >
                      <Assets name="read" />
                      阅读RC
                      <div className="place place-2">
                        <span className="right-arrow" />
                      </div>
                      <i className="left-arrow" />
                    </div>
                    <div
                      className={`tab ${this.state.index === 2 ? 'active' : ''}`}
                      onMouseEnter={() => this.setState({ index: 2 })}
                    >
                      <Assets name="logic" />
                      逻辑CR
                      <div className="place place-3">
                        <span className="right-arrow" />
                      </div>
                      <i className="left-arrow" />
                    </div>
                    <div
                      className={`tab ${this.state.index === 3 ? 'active' : ''}`}
                      onMouseEnter={() => this.setState({ index: 3 })}
                    >
                      <Assets name="math" />
                      数学Quant
                      <div className="place place-4">
                        <span className="right-arrow" />
                      </div>
                      <i className="left-arrow" />
                    </div>
                  </div>
                </div>
              </div>
              <div className="step step-5">
                <div className="m-title">独家服务</div>
                <div className="list">
                  <div className="item m-r-1-5" style={{ height: 210 }}>
                    <Assets className="sun" name="sun_blue" />
                    <div className="title" style={{ color: '#4292F0' }}>
                      千⾏CAT模考<span className="sub">></span>
                    </div>
                    <div className="desc">采⽤CAT出题机制、排名制算分⽅法</div>
                    <div className="desc">独家题源，排除重题⼲扰</div>
                    <div className="desc">模考报告提供具体考点分析，明确提升 ⽅向</div>
                  </div>
                  <div className="item m-r-1-5 m-l-1-5" style={{ height: 250 }}>
                    <Assets className="sun" name="sun_red" />
                    <div className="title" style={{ color: '#FFB676' }}>
                      机经服务<span className="sub">></span>
                    </div>
                    <div className="desc">⾼效整理：梳理逻辑结构，⽆“反吞 噬”⻛险</div>
                    <div className="desc">轻松获取：⾃动更新⾄邮箱代替⼿动 领取</div>
                    <div className="desc">随时查阅：⼿机查看、在线浏览、在 线做题</div>
                  </div>
                  <div className="item m-l-1-5" style={{ height: 185 }}>
                    <Assets className="sun" name="sun_yello" />
                    <div className="title" style={{ color: '#F36565' }}>
                      VIP服务<span className="sub">></span>
                    </div>
                    <div className="desc">⾃由组卷，练你想练</div>
                    <div className="desc">独家解析，专业报告</div>
                    <div className="desc">提问特权，1VS1答疑</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="block block-4" />
        <div className="block block-5">
          <div className="grid">
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。
                  真的是太推荐了。掌握了学习方法以后法以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后过关
                  了。 真的是太推荐了。掌握了学习方法以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦过关了。掌握了 学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关 了。
                  真的是太推荐了。掌握了学习方法以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻</div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
                  再加上刻苦勤奋的练习，第一次考试就过关了。掌握了 学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
                  再加上刻苦勤奋的练习，第一次以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">第一次考试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻</div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">了。 真的是太推荐了。掌握了学习方法以后，再加上刻</div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦第一次考试就过关了。掌握了
                  学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
                  再加上刻苦勤奋的练习，第一次考试就过关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习关 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第 了。 真的是太推荐了。掌握了学习方法以后，再加上刻
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
                </div>
              </div>
            </div>
            <div className="grid-item">
              <div className="item">
                <div className="item-header">
                  <Assets name="" />
                  <div className="name">好想去旅行</div>
                  <div className="date">2018年11月2日</div>
                </div>
                <div className="item-body">
                  掌握了学习方法以后，再加上刻苦勤奋的练习，第一次 考试就过关了。 真的是太推荐了。掌握了学习方法以后，
                  再加上刻苦勤奋的练习，第一次考试就过关了。掌握了 学习方法以后，再加上刻苦勤奋的练习，第一次考试就过关
                  了。 真的是太推荐了。掌握了学习方法以后，再加上刻
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="block block-6">
          <div className="body">
            <div className="m-title">发展历程</div>
            <div className="step-list">
              <div className="step">
                <div className="title">
                  <Assets name="dot1" />
                  2012
                </div>
                <div className="desc">“OG12语法千行”首次与大家见面，下载量过万，成为当年最热门的备考资料。</div>
              </div>
              <div className="step">
                <div className="title">
                  <Assets name="dot2" />
                  2015
                </div>
                <div className="desc">
                  正式成立“广州多少教育咨询有限公司”，致力于帮助GMAT考生花更少的时间，取得更高的成绩，"Waste Less, Learn
                  More." 同时发行“PREP0708语法千行”、“GMAT数学千行”。
                </div>
              </div>
              <div className="step">
                <div className="title">
                  <Assets name="dot3" />
                  2019
                </div>
                <div className="desc">
                  发行“千行GMAT长难句”； 每4位GMAT考生中有3位使用“千行资料”； “千行”网站上线，我们希望为您做得更多。
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="block block-7">
          <div className="body">
            <div className="step-list">
              <div className="step">
                <div className="title">工作机会</div>
                <Assets name="logo2" />
              </div>
              <div className="step" style={{ paddingLeft: 80 }}>
                <div className="title">联系我们</div>
                <div className="desc">(400) - 800 8888</div>
                <div className="desc">service@cat.com</div>
                <div className="desc">catgmat</div>
              </div>
              <div className="step" style={{ paddingLeft: 140 }}>
                <div className="title">关注我们</div>
                <div className="qrcode">
                  <Assets name="qrcode" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}