classroom/src/viewsframe/errorPage/errorPage.vue

<!--
* @FileDescription: 错误
* @Author: 黄琪勇
* @Date:2022-05-16 15:48:53
-->
<template>
   <div class="errorPage">
      <div class="error">
         <img class="img" src="@/img/loginErr/404.png" />
         <div class="errName">糟糕，页面找不到了</div>
         <div class="title">您可以通过以下方式继续访问</div>
         <div class="btnCon">
            <div class="btn" @click="handleGoHome">跳转到首页</div>
            <div class="btn" @click="handleGoBack">返回上一步</div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import "vant/lib/index.css"
import { useRouter } from "vue-router"

const router = useRouter()

function handleGoHome() {
   router.push({
      path: "/"
   })
}
function handleGoBack() {
   router.back()
}
</script>

<style lang="scss" scoped>
.errorPage {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   .error {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img {
         width: 630px;
         height: 514px;
      }
      .errName {
         margin-top: -100px;
         font-weight: 500;
         font-size: 29px;
         color: #333333;
         line-height: 41px;
      }
      .title {
         margin-top: 10px;
         font-weight: 400;
         font-size: 22px;
         color: #aaaaaa;
         line-height: 30px;
      }
      .btnCon {
         margin-top: 50px;
         display: flex;
         justify-content: center;
         .btn {
            background: url("@/img/loginErr/btn.png") no-repeat;
            width: 170px;
            height: 52px;
            background-size: 100% 100%;
            font-weight: bold;
            font-size: 22px;
            color: #ffffff;
            line-height: 52px;
            text-align: center;
            letter-spacing: 1px;
            margin-right: 25px;
            cursor: pointer;
            &:hover {
               opacity: $opacity-hover;
            }
            &:last-child {
               margin-right: 0;
            }
         }
      }
   }
}
</style>