classroom-instruments/src/views/login/index.tsx

import { defineComponent, reactive, ref } from 'vue';
import loginStyles from './images/login_styles.png';
import loginLeft from './images/login-left.png';
import loginRight from './images/loginright.png';
import colLogo from './images/colLogo.png';
import CodeLogin from './components/codeLogin';
import PwdLogin from './components/pwdLogin';
import { NTabs, NTabPane } from 'naive-ui';
import styles from './index.module.less';

export default defineComponent({
  name: 'login-page',
  setup() {
    return () => (
      <div class={styles['view-account']}>
        <div class={styles['view-account-container']}>
          <img src={loginLeft} class={styles.loginLeft} alt="" />
          <img src={loginRight} class={styles.loginRight} alt="" />
          <div class={styles['stylesWrap']}>
            <img src={loginStyles} alt="" />
          </div>
        </div>
        <div class={styles['view-account-form']}>
          <img class={styles.colLogo} src={colLogo}></img>
          <NTabs
            default-value="pwdLogin"
            class={styles.loginTabs}
            justify-content="center">
            <NTabPane name="pwdLogin" tab="密码登录">
              <PwdLogin></PwdLogin>
            </NTabPane>
            <NTabPane name="codeLogin" tab="短信验证">
              <CodeLogin></CodeLogin>
            </NTabPane>
          </NTabs>
        </div>
      </div>
    );
  }
});