index.js

import React, { Component } from "react"
import "./index.scss"

export default class Experience extends Component {
  render() {
    const { isOnline, tryLearn } = this.props
    return (
      <div className={"experience_container"}>
        <p className={"title"}>试 / 学 / 体 / 验</p>

        {isOnline ? (
          <>
            <div className={"experience"}>
              <img
                src="https://cdn.julyedu.com/h5_python_class/L%402x.png"
                alt=""
              />
              <div>
                <p>限时福利免费试学</p>
                <p>开始颠覆你想象的学习</p>
              </div>
              <img
                src="https://cdn.julyedu.com/h5_python_class/r%402x.png"
                alt=""
              />
            </div>
            <div className={"btn"} onClick={tryLearn}>
              立即体验
            </div>
          </>
        ) : (
          <>
            <div className={"experience"}>
              <img
                src="https://cdn.julyedu.com/h5_python_class/L%402x.png"
                alt=""
              />
              <div>
                <p>上架后可免费试学</p>
                <p>体验颠覆你想象的学习</p>
              </div>
              <img
                src="https://cdn.julyedu.com/h5_python_class/r%402x.png"
                alt=""
              />
            </div>
            <div className={"btn btn--online"}>即将上架敬请期待</div>
          </>
        )}
      </div>
    )
  }
}