sourcecode/front/project/www/routes/course/main/page.js

import React from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import Footer from '../../../components/Footer';
import { CommentFalls, AnswerCarousel, Consultation, Contact } from '../../../components/Other';
import Button from '../../../components/Button';

export default class extends Page {
  initState() {
    return {};
  }

  renderView() {
    return (
      <div>
        <div className="block-1">
          <div className="body">
            <Assets name="" />
            <div className="main-title">Waste Less, Learn More.</div>
            <div className="btn-list">
              <Button width={100} size="lager">
                查看套餐
              </Button>
              <Button className="t-4" width={100} theme="default" size="lager">
                试听课程
              </Button>
            </div>
          </div>
        </div>
        <div className="block-2">
          <div className="main-title">找到你的Style</div>
          <div className="video-list">
            <div className="video-item">
              <Assets width={70} height={70} name="play" className="play" />
              <div className="name">在线课程 ></div>
            </div>
            <div className="video-item">
              <Assets width={70} height={70} name="play" className="play" />
              <div className="name">1v1私教 ></div>
            </div>
          </div>
          <div className="class-list">
            <div className="class-item">
              <Assets width={55} height={52} className="new" name="noviciate" />
              <div className="t-s-22 t-4 m-b-5 f-w-b">基础刷题 </div>
              <div className="t-8 m-b-1">包含最新 XXXXXXX 的全部课程XXXXX；机经券×1+VIP×3 月+模考×1</div>
              <div className="t-1 t-s-12">包含课程</div>
              <div className="m-b-5">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-1 t-s-12">配套服务</div>
              <div className="m-b-5">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-1 t-s-12">赠送服务</div>
              <div className="m-b-2">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-8">
                总价值: <span className="t-d-l-t">¥18888</span>
              </div>
              <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥8888</div>
              <div className="m-b-5">
                <Button size="lager">立即购买</Button>
              </div>
            </div>
            <div className="class-item">
              <div className="t-s-22 t-11 m-b-5 f-w-b">系统授课 </div>
              <div className="t-8 m-b-1">包含最新 XXXXXXX 的全部课程XXXXX；机经券×1+VIP×3 月+模考×1</div>
              <div className="t-1 t-s-12">包含课程</div>
              <div className="m-b-5">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-1 t-s-12">配套服务</div>
              <div className="m-b-5">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-1 t-s-12">赠送服务</div>
              <div className="m-b-2">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-8">
                总价值: <span className="t-d-l-t">¥18888</span>
              </div>
              <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥8888</div>
              <div className="m-b-5">
                <Button size="lager">立即购买</Button>
              </div>
            </div>
            <div className="class-item">
              <div className="t-s-22 t-12 m-b-5 f-w-b">思维提升 </div>
              <div className="t-8 m-b-1">包含最新 XXXXXXX 的全部课程XXXXX；机经券×1+VIP×3 月+模考×1</div>
              <div className="t-1 t-s-12">包含课程</div>
              <div className="m-b-5">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-1 t-s-12">配套服务</div>
              <div className="m-b-5">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-1 t-s-12">赠送服务</div>
              <div className="m-b-2">
                <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题（7课时）</div>
              </div>
              <div className="t-8">
                总价值: <span className="t-d-l-t">¥18888</span>
              </div>
              <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥8888</div>
              <div className="m-b-5">
                <Button size="lager">立即购买</Button>
              </div>
            </div>
          </div>
        </div>
        <Consultation />
        <div className="block-4">
          <div className="main-title">You will always find the answers</div>
          <Assets name="" />
          <div className="list">
            <div className="item">
              <div className="t-1 t-s-20 m-b-2">
                <Assets className="m-r-5" name="self_paced" /> Self-Paced
              </div>
              <div className="t-8">随时随地学习；不限听课次数；支持停课申请。</div>
            </div>
            <div className="item">
              <div className="t-1 t-s-20 m-b-2">
                <Assets className="m-r-5" name="teacher" /> 实力导师
              </div>
              <div className="t-8">从业8年，考取700+成绩10次。</div>
              <div className="t-4 ">
                <div className="link d-i-b">查看成绩单 ></div>
              </div>
            </div>
            <div className="item">
              <div className="t-1 t-s-20 m-b-2">
                <Assets className="m-r-5" name="excitation" /> 激励机制
              </div>
              <div className="t-8">保持听课频率，赠送课程时效。</div>
            </div>
          </div>
        </div>
        <CommentFalls />
        <AnswerCarousel
          list={[
            {
              question: '如果视频课程到期了却没有听完，没听的课程可以退款么',
              answer: '不可以的，视频课程为虚拟商品，购买成功后不接受退换。',
            },
            {
              question: '学习过程中可以申请停课么？',
              answer: '每个商品均有1次申请停课的机会，最长停课30天，停课时间不计入使用有效期内。',
            },
            {
              question: '我需要一个整体的GMAT备考计划，报课程的话可以提供么？',
              answer:
                '报语文全科“系统授课”的同学会赠送价值900元课前辅导，老师语音一对一与同学交流沟通，为同学提供针对性建议和详细的备考计划。',
            },
            {
              question: '如果视频课程到期了却没有听完，没听的课程可以退款么',
              answer: '不可以的，视频课程为虚拟商品，购买成功后不接受退换。',
            },
          ]}
        />
        <Contact />
        <Footer />
      </div>
    );
  }
}