web/src/views/login/examSelect/index.vue

<template>
  <div class="exam-select">
    <h1>请选择考试批次</h1>

    <t-form
      ref="form"
      :data="formData"
      :label-width="0"
      class="form"
      :rules="rules"
    >
      <t-form-item name="examId">
        <t-select
          v-model="formData.examId"
          placeholder="请选择考试"
          :options="options"
          filterable
          :onChange="examChange"
        />
      </t-form-item>
    </t-form>
    <div class="btns">
      <a class="confirm" @click="confirm">确 定</a>
      <a class="cancel" @click="cancel">退 出</a>
    </div>
  </div>
</template>

<script setup name="Login">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const form = ref(null);
const router = useRouter();
const { replace } = router;
const formData = reactive({
  examId: '',
});
const examChange = () => {};
const rules = {
  examId: [
    { required: true, message: '请选择考试', type: 'error', trigger: 'change' },
  ],
};
const options = ref([]);
const confirm = () => {
  form.value.validate().then(async (result) => {
    if (result === true) {
    }
    setTimeout(() => {
      router.push('/');
    }, 100);
  });
};
const cancel = () => {
  replace('/login');
};
</script>
<style lang="less" scoped>
.exam-select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 95px 130px;
  z-index: 10;
  .btns {
    margin-top: 40px;
  }
  .btns a {
    display: inline-block;
    width: 160px;
    height: 54px;
    text-align: center;
    line-height: 54px;
    border-radius: 26px;

    font-size: 20px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    &.confirm {
      background-image: linear-gradient(to right, #88d3fc, #66ade8);
    }
    &.cancel {
      background: #c7cacc;
      margin-left: 5px;
    }
  }
  .form {
    margin-top: 40px;
  }
  & > h1 {
    font-size: 23px;
    text-align: center;
  }
}
</style>