menduner/src/views/register/selectedPersonRole.vue

<template>
  <div class="register-box" :style="{'background-image': 'url(' + webContent.loginBgUrl + ')'}">
    <navBar v-if="!isMobile" :showLoginBtn="false" class="navBar"></navBar>
    <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 d-flex flex-column justify-center align-center" @click="handleClickRole(0)">
          <v-icon color="primary" size="100">mdi-account-circle-outline</v-icon>
          <span class="color-primary" style="font-size: 24px">普通用户</span>
        </div>
        <div style="width: 50%; border-left: 1px solid #ccc;" class="cursor-pointer item d-flex flex-column justify-center align-center" @click="handleClickRole(1)">
          <v-icon color="primary" size="100">mdi-account-school-outline</v-icon>
          <span class="color-primary" style="font-size: 24px">学生用户</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import navBar from '@/layout/personal/navBar.vue'
defineOptions({ name: 'register-selectedPersonRole'})
// import { useRouter } from 'vue-router'; const router = useRouter()
import { ref, onMounted, nextTick } from 'vue'
import { webContentStore } from '@/store/webContent'

const webContent = webContentStore()
const isMobile = ref(false)
onMounted(async () => {
  await webContent.getSystemWebContent()
  const userAgent = navigator.userAgent
  isMobile.value = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(userAgent)
})

const handleClickRole = (type) => {
  // localStorage.removeItem('chooseRole')
  if (type) {
    // 学生用户
    localStorage.setItem('chooseRole', 'student') // 校验是否完善人才必填信息
  } else {
    // 普通用户
    localStorage.removeItem('chooseRole')
  }
  nextTick(() => {
    window.location.href = '/recruitHome'
  })
}
</script>

<style scoped lang="scss">
.register-box {
  position: relative;
  width: 100%;
  height: 100%;
  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 {
  span {
    border-bottom: 1px solid #00897B;
  }
}
.navBar {
  position: absolute;
  top: 0;
}
</style>