sourcecode/front/project/h5/components/Block/index.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd-mobile';
import Assets from '@src/components/Assets';
import Tag from '../Tag';
import Money from '../Money';

export class Block extends Component {
  render() {
    const { className = '', children } = this.props;
    return <div className={`g-block ${className}`}>{children}</div>;
  }
}
export class TopBlock extends Component {
  render() {
    const { className = '', theme = 'default', children } = this.props;
    return <div className={`g-top-block ${className} ${theme}`}>{children}</div>;
  }
}

export class TagBlock extends Component {
  render() {
    const { className = '', theme = 'default', tag, children } = this.props;
    return (
      <div className={`g-tag-block ${className} ${theme}`}>
        <div className="g-tag-block-tag">{tag}</div>
        {children}
      </div>
    );
  }
}

export class LinkBlock extends Component {
  render() {
    const { className = '', theme = 'default', title, sub } = this.props;
    return (
      <div className={`g-link-block ${className} ${theme}`}>
        <div className="g-link-block-title">{title}</div>
        <div className="g-link-block-sub">{sub}</div>
        <div className="g-link-block-icon">
          <Icon type="right" size="xxs" color="#fff" />
        </div>
      </div>
    );
  }
}

export class CourseBlock extends Component {
  render() {
    return (
      <Block className="course-block">
        <div className="title">OG20整合刷题-语法SC</div>
        <div className="block-body">
          <Assets name="c_b" />
          <div className="info">
            <div className="teacher">
              授课老师<span>李小小</span>
            </div>
            <div className="desc">老师特别特别特别好，上课特别认真…</div>
            <div className="division" />
            <div className="data">
              <Tag size="small">适合新手</Tag>
              <div className="result">
                优质回答<span>89</span>
              </div>
            </div>
          </div>
        </div>
      </Block>
    );
  }
}

export class DataBlock extends Component {
  render() {
    return (
      <Block className="data-block">
        <Assets name="d_b" />
        <div className="info">
          <div className="title">OG16/17/18/19语法千行</div>
          <div className="desc">资料非常好，帮助复习。</div>
          <div className="division" />
          <div className="data">
            <div className="people">888人已购</div>
            <Money value="200" />
          </div>
        </div>
      </Block>
    );
  }
}