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

export default class extends Page {
  init() {}

  renderView() {
    return (
      <div>
        <div className="title">OG16/17/18/19语法千行OG16/17/18/19语法千 行</div>
        <div className="tags">
          <Tag size="small">适合新手</Tag>
        </div>
        <div className="detail-title">授课老师</div>
        <div className="name">
          <Avatar name="scan1" />
          <span>李奕都(DUKB24)</span>
        </div>
        <div className="detail-title">课程介绍</div>
        <div className="desc">
          本商品仅限购买者本人使用，不可商用和传播。 若在购买过程中 遇到问题，请联系千行小助手协助解决。
        </div>
        <div className="detail-title">包含课程</div>
        <div className="detail-tags">
          <Tag theme="border">OG20阅读刷题（7课时）</Tag>
          <Tag theme="border">OOG20逻辑刷题（8课时）</Tag>
          <Tag theme="border">OG20语法SC刷题（10 课时）</Tag>
        </div>
        <div className="detail-title">配套服务</div>
        <div className="detail-tags">
          <Tag theme="border">预习作业</Tag>
          <Tag theme="border">课后答疑</Tag>
        </div>
        <div className="detail-title">赠送服务</div>
        <div className="detail-tags">
          <Tag theme="border">机经对折券×1</Tag>
          <Tag theme="border">VIP 权限×6个月</Tag>
        </div>
        <div className="fixed">
          <div className="fee">
            总额: <Money value="1200" size="lager" />
          </div>
          <Button width={110} className="f-r" radius>
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}