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

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

export default class extends Page {
  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="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>
                <div className="item m-l-2">
                  <div className="title">
                    参与课程<span className="sub">With DUKB24</span>
                  </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">
                    内容全⾯<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">
                    指导专业<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">
                    ⼈⼈会⽤<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>
                </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>
                </div>
                <div className="item m-l-1-5">
                  <div className="title" style={{ color: '#F36565' }}>
                    680
                  </div>
                  <div className="desc">学员均分</div>
                </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" />
                <div className="list">
                  <div className="tab">
                    语法SC
                    <div className="place place-1">
                      <span className="right-arrow" />
                    </div>
                  </div>
                  <div className="tab">
                    阅读RC
                    <div className="place place-2">
                      <span className="right-arrow" />
                    </div>
                  </div>
                  <div className="tab">
                    逻辑CR
                    <div className="place place-3">
                      <span className="right-arrow" />
                    </div>
                  </div>
                  <div className="tab">
                    数学Quant
                    <div className="place place-4">
                      <span className="right-arrow" />
                    </div>
                  </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 }}>
                  <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 }}>
                  <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 }}>
                  <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 className="block block-4">
          <div className="title-1">⼀个⼈⾛的更快，⼀群⼈⾛的更远</div>
          <div className="title-2">加⼊“千⼈千⾏”，⾛的⼜快⼜远！</div>
          <div className="title-2">——</div>
        </div>
        <div className="block block-5">5</div>
        <div className="block block-6">
          <div className="body">
            <div className="m-title">发展历程</div>
            <div className="step-list">
              <div className="step">
                <div className="title">2012</div>
                <div className="desc">“OG12语法千行”首次与大家见面，下载量过万，成为当年最热门的备考资料。</div>
              </div>
              <div className="step">
                <div className="title">2015</div>
                <div className="desc">
                  正式成立“广州多少教育咨询有限公司”，致力于帮助GMAT考生花更少的时间，取得更高的成绩，"Waste Less, Learn
                  More." 同时发行“PREP0708语法千行”、“GMAT数学千行”。
                </div>
              </div>
              <div className="step">
                <div className="title">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>
              </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>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}