xiangcunwang_web/error.vue

<template>
  <div class="errorBox">
    <img src="./public/error/404.png" alt="">
    <div @click="goHome" class="goHome">
      返回网站首页
    </div>
  </div>
</template>

<script setup>
//import { ElButton } from 'element-plus'

const router = useRouter()
//跳转回到首页
const goHome = () => {
  router.push('/')
}
</script>

<style lang="less" scoped>
  .errorBox {
    width: 100%;
    text-align: center;
    padding-top: 150px;
    img {
      width: 532px;
      height: 440px;
      margin: 0 auto;
    }
    .goHome {
      width: 152px;
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      margin: 0 auto;
      background: #a01c0e;
      border-radius: 8px;
      margin-top: 70px;
      cursor: pointer;
    }
  }
</style>