tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 修复错误页样式问题

Browse Source
This commit is contained in:
cshaptx4869
2024-07-04 16:40:13 +08:00
parent 7345b4dd66
commit aa1a6e70f4
2 changed files with 56 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/error-page/401.vue
View File

@@ -2,15 +2,12 @@
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { defineComponent } from "vue";
defineComponent({
defineOptions({
name: "Page401",
});
const state = reactive({
errGif: new URL(`../../assets/images/401.gif`, import.meta.url).href,
ewizardClap:
"https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",
dialogVisible: false,
@@ -26,7 +23,7 @@ function back() {
</script>
<template>
<div class="errPage-container">
<div class="page-container">
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
返回
</el-button>
@@ -65,10 +62,9 @@ function back() {
</template>
<style lang="scss" scoped>
.errPage-container {
width: 800px;
max-width: 100%;
margin: 100px auto;
.page-container {
width: 100%;
padding: 100px;
.pan-back-btn {
color: #fff;

114
src/views/error-page/404.vue
View File

@@ -1,76 +1,68 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: "Page404",
};
</script>
<script setup lang="ts">
function message() {
return "The webmaster said that you can not enter this page...";
import { useRouter } from "vue-router";
defineOptions({
name: "Page404",
});
const router = useRouter();
function back() {
router.back();
}
</script>
<template>
<div class="wscn-http404-container">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" src="@/assets/images/404.png" alt="404" />
<img
class="pic-404__child left"
src="@/assets/images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child mid"
src="@/assets/images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child right"
src="@/assets/images/404_cloud.png"
alt="404"
/>
<div class="page-container">
<div class="pic-404">
<img class="pic-404__parent" src="@/assets/images/404.png" alt="404" />
<img
class="pic-404__child left"
src="@/assets/images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child mid"
src="@/assets/images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child right"
src="@/assets/images/404_cloud.png"
alt="404"
/>
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">
All rights reserved
<a
style="color: #20a0ff"
href="https://wallstreetcn.com"
target="_blank"
>wallstreetcn</a
>
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">
All rights reserved
<a
style="color: #20a0ff"
href="https://wallstreetcn.com"
target="_blank"
>wallstreetcn</a
>
</div>
<div class="bullshit__headline">{{ message() }}</div>
<div class="bullshit__info">
Please check that the URL you entered is correct, or click the button
below to return to the homepage.
</div>
<a href="" class="bullshit__return-home">Back to home</a>
<div class="bullshit__headline">
The webmaster said that you can not enter this page...
</div>
<div class="bullshit__info">
Please check that the URL you entered is correct, or click the button
below to return to the homepage.
</div>
<a href="#" class="bullshit__return-home" @click.prevent="back">
Back to home
</a>
</div>
</div>
</template>
<style lang="scss" scoped>
.wscn-http404-container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.page-container {
display: flex;
padding: 100px;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
@@ -79,8 +71,6 @@ function message() {
}
&__child {
position: absolute;
&.left {
top: 17px;
left: 220px;
@@ -198,8 +188,6 @@ function message() {
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;