menduner/src/views/register/select.vue

<template>
  <div class="register-box">
    <div class="register-content">
      <h2 style="color: #666; font-weight: 400;">请选择您当前注册的身份</h2>
      <div class="d-flex mt-16">
        <div style="width: 50%;" class="cursor-pointer item pa-3" @click="handleToRegister('/recruit/enterprise/register')">
          <v-icon color="primary" size="100">mdi-home-city-outline</v-icon>
          <div class="color-primary" style="font-size: 24px">企业用户</div>
        </div>
        <div style="width: 50%; border-left: 1px solid #ccc;" class="cursor-pointer item pa-3" @click="handleToRegister('/register/person')">
          <v-icon color="primary" size="100">mdi-account-plus-outline</v-icon>
          <div class="color-primary" style="font-size: 24px">个人用户</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'register-select'})
import { useRouter } from 'vue-router'

const router = useRouter()

const handleToRegister = (path) => {
  router.push({ path, query: { type: 'login' } })
}
</script>

<style scoped lang="scss">
.register-box {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://www.mendunerhr.com/images/userfiles/92d7e4a755e2428b94aab3636d5047f3/images/recruitment/adImages/2018/11/1920x940.jpg');
  background-size: cover;
}
.register-content {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 660px;
  height: 453px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
  padding: 90px 62px;
}
.item:hover {
  color: #00897B;
  text-decoration: underline;
}
</style>