h5-colexiu/src/teacher/video-class/create.tsx

import ColUpload from "@/components/col-upload";
import { Button, Grid, GridItem, Icon, Sticky } from "vant";
import { defineComponent } from "vue";
import styles from './create.module.less';
import ClassInfo from "./class-info";
import ClassContent from "./class-content";

import nameActive from './images/icon_name_active.png'
import education from './images/icon_education.png'
import educationActive from './images/icon_education_active.png'
import CreateSubmit from "./create-submit";

export default defineComponent({
  name: 'Create',
  data() {
    return {
      active: 1,
    }
  },
  render() {
    return (
      <div class={styles['video-create']}>
        {this.active <= 2 ? <Grid style={{ paddingTop: '15px' }} direction="horizontal" columnNum="2">
          <GridItem v-slots={{
            default: () => (
              <>
                <Icon name={nameActive} size={38} />
                <span class={[styles.gridName, this.active >= 1 ? styles.active : null]}>课程信息</span>
              </>
            )
          }} />
          <GridItem v-slots={{
            default: () => (
              <>
                <Icon name={this.active === 2 ? educationActive : education} size={38} />
                <span class={[styles.gridName, this.active === 2 ? styles.active : null]}>课程内容</span>
              </>
            )
          }} />
        </Grid> : null}
        {/* 课程信息 */}
        {this.active === 1 ? <>
          <ClassInfo />
        </> : null}
        {/* 课程内容 */}
        {this.active === 2 ? <>
          <ClassContent />
        </> : null}
        {/* 预览 */}
        {this.active === 3 ? <>
          <CreateSubmit />
        </> : null}

      </div>
    )
  }
})