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

import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { asyncSMessage } from '@src/services/AsyncTools';
import { PcUrl } from '../../../../Constant';
import { Main } from '../../../stores/main';

export default class extends Page {
  initData() {
    Main.getIndex().then(result => {
      this.setState(result);
    });
  }

  renderView() {
    const { user = {} } = this.state;
    const { info = {} } = this.props.user;
    return (
      <div>
        <div className="block-1">
          <div className="title">加入“千行GMAT”</div>
          <div className="sub">一起Waste Less，Learn More.</div>
          <div className="line" />
          <div className="copy-title">复制下方地址至浏览器打开</div>
          <div className="input">
            <div className="prefix">http://</div>
            <div className="value">{PcUrl.replace('http://', '')}/id/{info.inviteCode}</div>
            <CopyToClipboard
              text={`${PcUrl}/id/${info.inviteCode}`}
              onCopy={() => asyncSMessage('已复制')}>
              <Assets name="copy" />
            </CopyToClipboard>
          </div>
        </div>
        <div className="block-2">
          <div className="bg">
            <div className="bg-1" />
            <div className="bg-2" />
            <div className="bg-3" />
            <div className="bg-4" />
            <div className="bg-5" />
          </div>
          <div className="fixed">
            <div className="h-title">PREPARE THE GMAT LIKE A PRO.</div>
            <div className="line" />
            <div className="title">Why 千行</div>
            <div className="block-2-1">
              <div className="block-2-1-h">
                <Assets name="planet" />
                <div className="block-2-1-h-t">内容全⾯</div>
                <div className="block-2-1-h-s">360° Support</div>
              </div>
              <div className="block-2-1-d">
                网站涵盖考试介绍、方法引导、技巧点拨、练习、课程、机经、模考、心经分享等，从入门到出分，一应俱全，满足各阶段考生的备考需求。
              </div>
            </div>
            <div className="block-2-1">
              <div className="block-2-1-h">
                <Assets name="expert" />
                <div className="block-2-1-h-t">指导专业</div>
                <div className="block-2-1-h-s">We are Pro.</div>
              </div>
              <div className="block-2-1-d">
                专注GMAT备考8年
                <br /> 出分周期高于行业平均水平26%
                <br /> 学员均分高于行业18%
              </div>
            </div>
            <div className="block-2-1">
              <div className="block-2-1-h">
                <Assets name="userfriendly" />
                <div className="block-2-1-h-t">⼈⼈会⽤</div>
                <div className="block-2-1-h-s">User-frriendly</div>
              </div>
              <div className="block-2-1-d">
                除提供有用的数据信息外，网站多处设置信息导，提供必要的解释和原理说明，从源头规避误区，协助考生做出更加明智的决策，提高备考效率。
              </div>
            </div>
            <div className="block-2-2">
              <div className="block-2-2-i">
                <div className="block-2-2-i-t blue">{user.numberOffline}</div>
                <div className="block-2-2-i-d">注册用户</div>
              </div>
              <div className="block-2-2-i">
                <div className="block-2-2-i-t yellow">{user.number700}</div>
                <div className="block-2-2-i-d">700+分学员</div>
              </div>
              <div className="block-2-2-i">
                <div className="block-2-2-i-t red">{user.numberScore}</div>
                <div className="block-2-2-i-d">学员均分</div>
              </div>
            </div>
            <div className="title">独家服务</div>
            <div className="block-2-3">
              <Assets name="sun_blue" />
              <div className="block-2-3-t blue">千⾏CAT模考</div>
              <div className="block-2-3-d">采⽤CAT出题机制、排名制算分⽅法</div>
              <div className="block-2-3-d">独家题源，排除重题⼲扰</div>
              <div className="block-2-3-d">模考报告提供具体考点分析，明确提升⽅向。</div>
            </div>
            <div className="block-2-3">
              <Assets name="sun_red" />
              <div className="block-2-3-t red">机经服务</div>
              <div className="block-2-3-d">⾼效整理：梳理逻辑结构，⽆“反吞噬”⻛险</div>
              <div className="block-2-3-d">轻松获取：⾃动更新⾄邮箱代替⼿动领取</div>
              <div className="block-2-3-d">随时查阅：⼿机查看、在线浏览、在线做题</div>
            </div>
            <div className="block-2-3">
              <Assets name="sun_yello" />
              <div className="block-2-3-t yellow">VIP服务</div>
              <div className="block-2-3-d">⾃由组卷，练你想练</div>
              <div className="block-2-3-d">独家解析，专业报告</div>
              <div className="block-2-3-d">提问特权，1VS1答疑</div>
            </div>
          </div>
        </div>
      </div >
    );
  }
}