menduner/src/views/register/select.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="handleToRegister('/register/company')">
          <v-icon color="primary" size="100">mdi-home-city-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="handleToRegister('/register/person')">
          <v-icon color="primary" size="100">mdi-account-plus-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-select'})
import { useRouter } from 'vue-router'
import { ref, onMounted } 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 router = useRouter()

const handleToRegister = (path) => {
  router.push({ path, query: { type: 'noLoginToRegister' } })
}
</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>