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 { reactive, toRefs } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { defineComponent } from "vue"; defineOptions({
defineComponent({
name: "Page401", name: "Page401",
}); });
const state = reactive({ const state = reactive({
errGif: new URL(`../../assets/images/401.gif`, import.meta.url).href, errGif: new URL(`../../assets/images/401.gif`, import.meta.url).href,
ewizardClap: ewizardClap:
"https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646", "https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",
dialogVisible: false, dialogVisible: false,
@@ -26,7 +23,7 @@ function back() {
</script> </script>
<template> <template>
<div class="errPage-container"> <div class="page-container">
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back"> <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
返回 返回
</el-button> </el-button>
@@ -65,10 +62,9 @@ function back() {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.errPage-container { .page-container {
width: 800px; width: 100%;
max-width: 100%; padding: 100px;
margin: 100px auto;
.pan-back-btn { .pan-back-btn {
color: #fff; 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"> <script setup lang="ts">
function message() { import { useRouter } from "vue-router";
return "The webmaster said that you can not enter this page...";
defineOptions({
name: "Page404",
});
const router = useRouter();
function back() {
router.back();
} }
</script> </script>
<template> <template>
<div class="wscn-http404-container"> <div class="page-container">
<div class="wscn-http404"> <div class="pic-404">
<div class="pic-404"> <img class="pic-404__parent" src="@/assets/images/404.png" alt="404" />
<img class="pic-404__parent" src="@/assets/images/404.png" alt="404" /> <img
<img class="pic-404__child left"
class="pic-404__child left" src="@/assets/images/404_cloud.png"
src="@/assets/images/404_cloud.png" alt="404"
alt="404" />
/> <img
<img class="pic-404__child mid"
class="pic-404__child mid" src="@/assets/images/404_cloud.png"
src="@/assets/images/404_cloud.png" alt="404"
alt="404" />
/> <img
<img class="pic-404__child right"
class="pic-404__child right" src="@/assets/images/404_cloud.png"
src="@/assets/images/404_cloud.png" alt="404"
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>
<div class="bullshit"> <div class="bullshit__headline">
<div class="bullshit__oops">OOPS!</div> The webmaster said that you can not enter this page...
<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> </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>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.wscn-http404-container { .page-container {
position: absolute; display: flex;
top: 40%; padding: 100px;
left: 50%;
transform: translate(-50%, -50%);
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 { .pic-404 {
position: relative;
float: left;
width: 600px; width: 600px;
overflow: hidden; overflow: hidden;
@@ -79,8 +71,6 @@ function message() {
} }
&__child { &__child {
position: absolute;
&.left { &.left {
top: 17px; top: 17px;
left: 220px; left: 220px;
@@ -198,8 +188,6 @@ function message() {
} }
.bullshit { .bullshit {
position: relative;
float: left;
width: 300px; width: 300px;
padding: 30px 0; padding: 30px 0;
overflow: hidden; overflow: hidden;