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>
      </div>
    );
  }
});