sourcecode/front/project/www/components/Item/index.js

import React, { Component } from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import Button from '../Button';

export class SingleItem extends Component {
  render() {
    const { show } = this.props;
    return (
      <div className="single-item">
        <div className="img">
          <div className="title">
            <div className="tag">新手</div>OG20整合刷题-语法SC
          </div>
          <div className="left">
            <span>课时数: 20</span>
            <span>133h32min</span>
          </div>
          <div className="right">
            <span>234234次观看</span>
          </div>
        </div>
        <div className="name">
          <span>授课老师:李小小</span>
          <span>优质问答: 999</span>
          <span>有效期: 3个月</span>
        </div>
        <div className="money">¥ 15000</div>
        {!show && (
          <div className="action">
            <Button radius size="lager">
              立即购买
            </Button>
            <Button className="f-r" theme="default" radius size="lager">
              查看课程
            </Button>
            <Button className="f-r" theme="default" radius size="lager">
              <Assets name="add" />
            </Button>
          </div>
        )}
        {!show && <Assets className="buyed" width={75} height={75} name="Purchased" />}
      </div>
    );
  }
}

export class PackageItem extends Component {
  render() {
    return (
      <div className="package-item">
        <div className="block m-b-1">
          <div className="title t-1 m-b-5 f-w-b">
            <div className="tag f-w-d">新手</div>OG20整合刷题-语法SC
          </div>
          <div className="t-1 t-s-12 m-b-5">授课老师 李小小</div>
          <div className="t-1 t-s-12 m-b-2">包含最新 XXXXXXX 的全部课程XXXXX；机经券×1+VIP×3 月+模考×1</div>
          <div className="t-1 t-s-12">包含课程</div>
          <div className="p-t-5">
            <div className="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5">OG20阅读刷题（7课时）</div>
          </div>
          <div className="t-1 t-s-12">配套服务</div>
          <div className="p-t-5">
            <div className="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5">OG20阅读刷题（7课时）</div>
          </div>
          <div className="t-1 t-s-12">赠送服务</div>
          <div className="p-t-5">
            <div className="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5">OG20阅读刷题（7课时）</div>
          </div>
        </div>
        <div className="t-1 t-s-12">
          原价: <span className="t-d-l-t">¥18888</span>
        </div>
        <div className="t-7 t-s-18 f-w-b m-b-1">套餐价: ¥8888</div>
        <div className="action">
          <Button radius size="lager">
            立即购买
          </Button>
          <Button className="f-r" theme="default" radius size="lager">
            查看课程
          </Button>
          <Button className="f-r" theme="default" radius size="lager">
            <Assets name="add" />
          </Button>
        </div>
      </div>
    );
  }
}

export class DataItem extends Component {
  render() {
    return (
      <div className="data-item">
        <Assets name="" />
        <div className="m-b-1">
          <span className="t-7 t-s-24 f-w-b">¥8888</span>
          <span className="f-r t-8 t-s-20">888人</span>
        </div>
        <div className="action">
          <Button radius size="lager">
            立即购买
          </Button>
          <Button className="f-r" theme="default" radius size="lager">
            查看资料
          </Button>
          <Button className="f-r" theme="default" radius size="lager">
            <Assets name="add" />
          </Button>
        </div>
      </div>
    );
  }
}