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

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Continue from '../../../components/Continue';
import Tabs from '../../../components/Tabs';
import Module from '../../../components/Module';
import Division from '../../../components/Division';
import Panel, { BuyPanel, WaitPanel, SmallPanel, SmallWaitPanel, SmallBuyPanel } from '../../../components/Panel';
import Card, { Card1 } from '../../../components/Card';
import List from '../../../components/List';
import ListTable from '../../../components/ListTable';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import Step from '../../../components/Step';
import OtherAnswer from '../../../components/OtherAnswer';
import QAList from '../../../components/QAList';
import Select from '../../../components/Select';
import Video from '../../../components/Video';

export default class extends Page {
  renderView() {
    return (
      <div>
        <Video src="/01.mp4" />
        <Continue date={'2019-04-29 16:30'} data={{}} />
        <div className="content">
          <Select list={[{ title: '123' }, { title: '321' }]} />
          <Select theme="white" list={[{ title: '123' }, { title: '321' }]} />
          <Select theme="default" list={[{ title: '123' }, { title: '321' }]} />
          <Division col="3" type="compact">
            <SmallPanel
              title="千行 CAT"
              lock
              data={{ info: [{ title: '123', number: '123', unit: '1' }, { title: '123', number: '123', unit: '1' }] }}
            />
            <SmallWaitPanel title="千行 CAT" />
            <SmallBuyPanel title="千行 CAT" />
          </Division>
          <Division col="2">
            <WaitPanel
              title="OG"
              col="3"
              data={{
                info: [
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                ],
                desc: ['最近换库：2019-07-20 ，已换库10天', '最后更新：2019-07-28 00:28:49'],
                children: [
                  { progress: 10, title: '测试' },
                  { progress: 10, title: '测试' },
                  { progress: 0, title: '测试' },
                ],
              }}
            />
            <Panel
              title="OG"
              col="3"
              data={{
                info: [
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                ],
                desc: ['最近换库：2019-07-20 ，已换库10天', '最后更新：2019-07-28 00:28:49'],
                children: [
                  { progress: 10, title: '测试' },
                  { progress: 10, title: '测试' },
                  { progress: 0, title: '测试' },
                ],
              }}
            />
            <BuyPanel title="OG" />
          </Division>
          <QAList data={[]} />
          <Tabs
            type="tag"
            active="main"
            space={5}
            tabs={[
              { key: 'main', name: '首页', path: '/' },
              { key: 'ready', name: 'GetReady', path: '/' },
              { key: 'exercise', name: '练习', path: '/' },
              { key: 'cat', name: 'CAT模考', path: '/' },
              { key: 'item', name: '题库', path: '/' },
              { key: 'machine', name: '换库&机经', path: '/' },
            ]}
          />
          <Module className="m-t-2">
            <Tabs
              type="card"
              active="main"
              tabs={[
                { key: 'main', name: '首页', path: '/' },
                { key: 'ready', name: 'GetReady', path: '/' },
                { key: 'exercise', name: '练习', path: '/' },
                { key: 'cat', name: 'CAT模考', path: '/' },
                { key: 'item', name: '题库', path: '/' },
                { key: 'machine', name: '换库&机经', path: '/' },
              ]}
            />
            <Tabs
              active="main"
              tabs={[
                { key: 'main', name: '首页', path: '/' },
                { key: 'ready', name: 'GetReady', path: '/' },
                { key: 'exercise', name: '练习', path: '/' },
                { key: 'cat', name: 'CAT模考', path: '/' },
                { key: 'item', name: '题库', path: '/' },
              ]}
            />
          </Module>
          <Module>
            <Tabs
              active="main"
              border
              width="180px"
              space="0"
              tabs={[
                { key: 'main', name: '首页', path: '/' },
                { key: 'ready', name: 'GetReady', path: '/' },
                { key: 'exercise', name: '练习', path: '/' },
                { key: 'cat', name: 'CAT模考', path: '/' },
                { key: 'item', name: '题库', path: '/' },
              ]}
            />
            <Tabs
              active="main"
              type="text"
              tabs={[
                { key: 'main', name: '首页', path: '/' },
                { key: 'ready', name: 'GetReady', path: '/' },
                { key: 'exercise', name: '练习', path: '/' },
                { key: 'cat', name: 'CAT模考', path: '/' },
                { key: 'item', name: '题库', path: '/' },
              ]}
            />
          </Module>
          <Module>
            <Step
              list={[
                '「1」前言',
                '「2」重新认识',
                '「3」基本元素',
                '「4」简单变长',
                '「5」练习',
                '「6」翻译',
                '「7」附录',
              ]}
              step="4"
            />
          </Module>
          <Division col="2">
            <Panel
              title="OG"
              col="3"
              data={{
                info: [
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                  { title: '123', number: 123, unit: '%' },
                ],
                desc: ['最近换库：2019-07-20 ，已换库10天', '最后更新：2019-07-28 00:28:49'],
                children: [
                  { progress: 10, title: '测试' },
                  { progress: 10, title: '测试' },
                  { progress: 0, title: '测试' },
                ],
              }}
            />
            <Panel
              title="OG"
              col="4"
              data={{
                info: [
                  { title: '123', number: 123 },
                  { title: '123', number: 123 },
                  { title: '123', number: 123 },
                  { title: '123', number: 123 },
                ],
                children: [
                  { progress: 10, title: '测试' },
                  { progress: 10, title: '测试' },
                  { progress: 0, title: '测试' },
                ],
              }}
            />
          </Division>
          <Division col="3">
            <Card1 title="句改 SC" data={{ status: 'open', qrCode: '123' }} />
            <Card1 title="句改 SC" tag="视频课程" data={{ status: 'stop' }} />
            <Card1 title="句改 SC" tag="视频课程" data={{ status: 'open' }} />
            <Card1
              title="句改 SC"
              tag="视频课程"
              data={{
                status: 'ing',
                list: [
                  { progress: 30, title: '课时5:掌握语法结构', status: 'start' },
                  { progress: 40, title: '课时5:掌握语法结构', status: 'ing' },
                ],
              }}
            />
            <Card1 title="句改 SC" tag="视频课程" data={{ status: 'ing', list: [] }} />
            <Card1 title="句改 SC" tag="视频课程" data={{ status: 'end' }} />
          </Division>
          <Division col="3">
            <Card title="句改 SC" data={{ status: 'buy', desc: ['名师讲解', '精进学习', '提升成绩'] }} />
            <Card title="句改 SC" data={{ status: 'open' }} />
            <Card
              title="句改 SC"
              data={{
                status: 'ing',
                list: [
                  { progress: 30, date: '2019-04-22', status: 'start' },
                  { progress: 40, date: '2019-04-22', status: 'ing' },
                ],
              }}
            />
            <Card title="句改 SC" data={{ status: 'ing', list: [] }} />
            <Card title="句改 SC" data={{ status: 'end' }} />
          </Division>
          <List
            position="Chapter4"
            title="简单句如何变长难句"
            list={[{ progress: 30, title: '什么样的句子叫长难句，长难句的基本特征。', position: 'Part 1' }]}
          />
          <ListTable
            position="Chapter5"
            title="练习"
            filters={[
              { type: 'radio', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
              { type: 'select', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
            ]}
            data={[{}]}
            columns={[
              {
                title: '练习册',
                width: 250,
                align: 'left',
                render: () => {
                  return (
                    <div className="table-row">
                      <div className="night f-s-16">OG18 综合：第1-20题</div>
                      <div>
                        <ProgressText progress="30" size="small" />
                      </div>
                    </div>
                  );
                },
              },
              {
                title: '正确率',
                width: 150,
                align: 'left',
                render: () => {
                  return (
                    <div className="table-row">
                      <div className="night f-s-16 f-w-b">--</div>
                      <div className="f-s-12">全站55%</div>
                    </div>
                  );
                },
              },
              {
                title: '全站用时',
                width: 150,
                align: 'left',
                render: () => {
                  return (
                    <div className="table-row">
                      <div className="night f-s-16 f-w-b">55%</div>
                      <div className="f-s-12">全站56s</div>
                    </div>
                  );
                },
              },
              {
                title: '最近做题',
                width: 150,
                align: 'left',
                render: () => {
                  return (
                    <div className="table-row">
                      <div>2019-04-28</div>
                      <div>07:30</div>
                    </div>
                  );
                },
              },
              {
                title: '操作',
                width: 180,
                align: 'left',
                render: () => {
                  return (
                    <div className="table-row p-t-1">
                      <IconButton className="m-r-2" type="continue" tip="Continue" />
                      <IconButton type="restart" tip="Restart" />
                    </div>
                  );
                },
              },
              {
                title: '报告',
                width: 30,
                align: 'right',
                render: () => {
                  return (
                    <div className="table-row p-t-1">
                      <IconButton type="report" tip="Report" />
                    </div>
                  );
                },
              },
            ]}
          />
          <OtherAnswer data={{ content: '123123', answer: '123123123' }} />
        </div>
      </div>
    );
  }
}