classroom-app/src/components/the-vip/index.tsx

import { defineComponent } from 'vue';
import icon_bg from './icon_bg.png';
import icon_title from './icon_title.png';
import icon_btn from './icon_btn.png';
import icon_close from './icon_close.png';
import styles from './index.module.less';

export default defineComponent({
  name: 'TheVip',
  emits: ['close'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.container}>
        <img
          class={styles.close}
          src={icon_close}
          onClick={() => emit('close')}
        />
        <img class={styles.title} src={icon_title} />
        <div class={styles.content}>
          您还未领取<span style={{ color: '#FF5A56' }}>“小酷AI”</span>
          哦，如需继续使用，请领取～
        </div>
        <div class={styles.btns}>
          <img
            class={styles.btn}
            src={icon_btn}
            onClick={() => emit('close', true)}
          />
          <div onClick={() => emit('close')}>暂不领取</div>
        </div>
      </div>
    );
  }
});