menduner/src/views/login/forgotPasswordEnt.vue

<template>
  <div class="box">
    <navBar v-if="!isMobile" :showLoginBtn="false" class="navBar"></navBar>
    <div class="content pa-10">
      <div class="resume-header">
        <div class="resume-title">企业修改密码</div>
      </div>
      <editPasswordPage class="mt-5" :showCancelBtn="false" :captchaVerification="captchaVerification" @getCode="getCode"  @cancel="router.push('/login')">
        <template #custom>
          <div class="font-size-14 text-end">
            <span class="color-primary cursor-pointer" @click="router.push('/login')">回到登录页</span>
          </div>
        </template>
      </editPasswordPage>
    </div>
  </div>
  <Verify
    ref="verify"
    captchaType="blockPuzzle"
    :imgSize="{ width: '400px', height: '200px' }"
    mode="pop"
    @success="verifySuccess"
  />
</template>

<script setup>
defineOptions({ name: 'forgotPasswordEnt'})
import { useRouter } from 'vue-router'
import navBar from '@/layout/personal/navBar.vue'
import editPasswordPage from '@/views/login/components/editPasswordEnt.vue'
import Verify from '@/components/Verifition'
import { ref, onMounted } from 'vue'

const router = useRouter()

const isMobile = ref(false)
onMounted(() => {
  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 verify = ref()

// 获取验证码
const getCode = async () => {
  // 弹出验证码 // 已开启：则展示验证码；只有完成验证码的情况，才进行登录
  verify.value.show()
}

const captchaVerification = ref(false)
const verifySuccess = (params) => {
  captchaVerification.value = params.captchaVerification
}
</script>

<style scoped lang="scss">
.navBar {
  position: absolute;
  top: 0;
  z-index: 2;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://minio.menduner.com/dev/menduner/login-banner.png');
  background-size: cover;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 500px;
  height: 450px;
  background-color: #fff;
  border-radius: 10px;
}
</style>