From 61ae8ba350beef81b49c4cd415783001398cfcb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E5=87=A1?= <2508779859@qq.com>
Date: Thu, 27 Mar 2025 00:01:44 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=8C=88=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=EF=BC=8C=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E8=B7=9F=E9=9A=8F=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylelintrc.cjs                         |   8 +-
 src/layout/components/Settings/index.vue |   2 +-
 src/styles/index.scss                    |  11 +-
 src/views/error/401.vue                  |  84 ++-----------
 src/views/error/404.vue                  | 149 +++++++----------------
 5 files changed, 63 insertions(+), 191 deletions(-)

diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 62bd59cf..5eb86831 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -32,11 +32,7 @@ module.exports = {
       },
     ],
     // 允许使用未知伪元素
-    "at-rule-no-unknown": [
-      true,
-      {
-        ignoreAtRules: ["apply", "use", "forward", "extend"],
-      },
-    ],
+    "at-rule-no-unknown": null, // 禁用默认的未知 at-rule 检查
+    "scss/at-rule-no-unknown": true, // 启用 SCSS 特定的 at-rule 检查
   },
 };
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index f3fe8436..b86b8994 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -74,9 +74,9 @@ import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 // 颜色预设
 const colorPresets = [
   "#4080FF",
+  "#626AEF",
   "#ff4500",
   "#ff8c00",
-  "#90ee90",
   "#00ced1",
   "#1e90ff",
   "#c71585",
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 349c84fd..654335ac 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -17,12 +17,7 @@
   padding: calc(var(--el-card-padding) - 8px) var(--el-card-padding);
 }
 
-.link-type,
-.link-type:focus {
-  color: #337ab7;
-  cursor: pointer;
-
-  &:hover {
-    color: rgb(32 160 255);
-  }
+// 进度条颜色
+#nprogress .bar {
+  background-color: var(--el-color-primary);
 }
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index cb7231d9..e91f37bb 100644
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@@ -1,85 +1,25 @@
 <template>
-  <div class="page-container">
-    <el-button icon="arrow-left" @click="back">返回</el-button>
+  <div class="p-5 pb-0 sm:p-10 lg:p-20 w-full">
+    <el-button icon="arrow-left" @click="router.back()">返回</el-button>
     <el-row>
-      <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+      <el-col :xs="24" :span="12">
+        <h1 class="text-6xl font-bold text-[#484848]">Oops!</h1>
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>
-        <ul class="list-unstyled">
-          <li>或者你可以去:</li>
-          <li class="link-type">
-            <router-link to="/dashboard">回首页</router-link>
-          </li>
-          <li class="link-type">
-            <a href="https://www.youlai.tech/">随便看看</a>
-          </li>
-        </ul>
+        <div class="flex flex-col items-start gap-1.5 text-sm">
+          <span>或者你可以去:</span>
+          <el-link type="primary" @click="router.push('/dashboard')">回首页</el-link>
+          <el-link type="primary" href="https://www.youlai.tech/">随便看看</el-link>
+        </div>
       </el-col>
-      <el-col :span="12">
-        <img src="@/assets/images/401.svg" width="400" height="500" />
+      <el-col :xs="24" :span="12">
+        <img src="@/assets/images/401.svg" class="w-full" />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useRouter } from "vue-router";
-
-defineOptions({
-  name: "Page401",
-});
-
+defineOptions({ name: "Page401" });
 const router = useRouter();
-
-function back() {
-  router.back();
-}
 </script>
-
-<style lang="scss" scoped>
-.page-container {
-  width: 100%;
-  padding: 100px;
-
-  .pan-back-btn {
-    color: #fff;
-    background: #008489;
-    border: none !important;
-  }
-
-  .pan-gif {
-    display: block;
-    margin: 0 auto;
-  }
-
-  .pan-img {
-    display: block;
-    width: 100%;
-    margin: 0 auto;
-  }
-
-  .text-jumbo {
-    font-size: 60px;
-    font-weight: 700;
-    color: #484848;
-  }
-
-  .list-unstyled {
-    font-size: 14px;
-
-    li {
-      padding-bottom: 5px;
-    }
-
-    a {
-      color: #008489;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index efd7e393..28138d5e 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -1,123 +1,64 @@
 <template>
-  <div class="page-container">
-    <div class="pic-404">
-      <img class="pic-404__parent" src="@/assets/images/404.svg" alt="404" />
-    </div>
-    <div class="bullshit">
-      <div class="bullshit__oops">OOPS！</div>
-      <div class="bullshit__info">
+  <div class="wh-full mx-auto flex-center flex-col lg:flex-row">
+    <img class="min-w-[23.4375rem] sm:w-150" src="@/assets/images/404.svg" alt="404" />
+    <div class="w-75">
+      <div class="oops mb-5 text-[2rem] font-bold">OOPS！</div>
+      <div class="info text-gray mb-7 text-[0.8125rem]">
         该页面无法访问。
-        <a style="color: #20a0ff" href="https://www.youlai.tech.com" target="_blank">
+        <el-link type="primary" href="https://www.youlai.tech.com" target="_blank">
           有来开源官网
-        </a>
+        </el-link>
       </div>
-      <div class="bullshit__headline">抱歉，您访问的页面不存在。</div>
-      <div class="bullshit__info">请确认您输入的网址是否正确，或者点击下方按钮返回首页。</div>
-      <a href="#" class="bullshit__return-home" @click.prevent="back">返回首页</a>
+      <div class="headline mb-2.5 text-xl font-bold text-[#222]">抱歉，您访问的页面不存在。</div>
+      <div class="info text-gray mb-7 text-[0.8125rem]">
+        请确认您输入的网址是否正确，或者点击下方按钮返回首页。
+      </div>
+      <el-button round type="primary" class="btn h-9 w-28 mb-10" @click="back">返回首页</el-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useRouter } from "vue-router";
-
-defineOptions({
-  name: "Page404",
-});
-
+defineOptions({ name: "Page404" });
 const router = useRouter();
-
-function back() {
-  router.back();
-}
+const back = () => router.push("/");
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  display: flex;
-  padding: 100px;
+@mixin slide-up-animation($delay: 0s) {
+  opacity: 0;
+  animation-name: slideUp;
+  animation-duration: 0.5s;
+  animation-delay: $delay;
+  animation-fill-mode: forwards;
+}
 
-  .pic-404 {
-    width: 600px;
-    overflow: hidden;
-
-    &__parent {
-      width: 100%;
-    }
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(60px);
   }
 
-  .bullshit {
-    width: 300px;
-    padding: 50px 0;
-    overflow: hidden;
-
-    &__oops {
-      margin-bottom: 20px;
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 40px;
-      color: #1482f0;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-
-    &__headline {
-      margin-bottom: 10px;
-      font-size: 20px;
-      font-weight: bold;
-      line-height: 24px;
-      color: #222;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-    }
-
-    &__info {
-      margin-bottom: 30px;
-      font-size: 13px;
-      line-height: 21px;
-      color: grey;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
-    }
-
-    &__return-home {
-      float: left;
-      display: block;
-      width: 110px;
-      height: 36px;
-      font-size: 14px;
-      line-height: 36px;
-      color: #fff;
-      text-align: center;
-      cursor: pointer;
-      background: #1482f0;
-      border-radius: 100px;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;
-    }
-
-    @keyframes slideUp {
-      0% {
-        opacity: 0;
-        transform: translateY(60px);
-      }
-
-      100% {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
+
+.oops {
+  color: var(--el-color-primary);
+  @include slide-up-animation(0s);
+}
+
+.headline {
+  @include slide-up-animation(0.1s);
+}
+
+.info {
+  @include slide-up-animation(0.2s);
+}
+
+.btn {
+  @include slide-up-animation(0.3s);
+}
 </style>