menduner/src/views/login/forgotPassword.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">
          {{ route.query.forgot ? '密码不安全，请重置密码' : '修改密码' }}
        </div>
      </div>
      <editPasswordPage class="mt-5" :showCancelBtn="false" :isReset="true" @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>
</template>

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

const router = useRouter()
const route = useRoute()

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)
})
</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: 450px;
  height: 450px;
  background-color: #fff;
  border-radius: 10px;
}
</style>