fazyqjczx_org_cn/404.vue

<template>
  <div class="errorBox">
    <img src="https://img.bjzxtw.org.cn/pre/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>
@media screen and (min-width: 1401px) {
  .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: #028E21;
      border-radius: 8PX;
      margin-top: 70PX;
      cursor: pointer;
    }
  }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
  .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: #028E21;
      border-radius: 8PX;
      margin-top: 70PX;
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 800px) {
  .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: #028E21;
      border-radius: 8px;
      margin-top: 70px;
      cursor: pointer;
    }
  }
}
</style>