From e79ce1ee89a611836f729b28e48fe1f70c3ab79f Mon Sep 17 00:00:00 2001
From: root <3234374354@qq.com>
Date: Thu, 6 Feb 2025 23:58:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(index):=20=E4=BC=98=E5=8C=96=20404=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=92=8C=E8=A7=86=E9=A2=91=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重新设计了 404 页面布局和样式，增加了返回按钮
- 在视频模板中添加了返回按钮
- 优化了按钮样式，增加了hover效果
- 调整了页面结构，提高了可读性和用户体验
---
 index/404.html                   | 65 +++++++++++++++++++++++++++++---
 index/videos/template-video.html | 29 +++++++++++++-
 2 files changed, 88 insertions(+), 6 deletions(-)
diff --git a/index/404.html b/index/404.html
index d75ed781..3b6236db 100755
--- a/index/404.html
+++ b/index/404.html
@@ -1,6 +1,61 @@
-<html>
-<head><title>404 Not Found</title></head>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 Not Found</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #ffecec;
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .error-container {
+            text-align: center;
+            background-color: #ffffff77;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+        }
+
+        p {
+            color: #666;
+            margin-bottom: 20px;
+        }
+
+        .back-button {
+            padding: 10px 20px;
+            background-color: #ff3434;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .back-button:hover {
+            background-color: #990000;
+        }
+    </style>
+</head>
+
 <body>
-<center><h1>404 Not Found</h1></center>
-<hr><center>nginx</center>
-</body>
\ No newline at end of file
+    <div class="error-container">
+        <h1>404 Not Found</h1>
+        <p>您访问的页面不存在。</p>
+        <button class="back-button" onclick="window.history.back()">返回</button>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index/videos/template-video.html b/index/videos/template-video.html
index e06c8108..57f42826 100644
--- a/index/videos/template-video.html
+++ b/index/videos/template-video.html
@@ -45,13 +45,34 @@
         button:hover {
             background-color: #0056b3;
         }
+
+        .back-button {
+            padding: 10px 20px;
+            background-color: #6c757d;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .back-button:hover {
+            background-color: #545b62;
+        }
     </style>
+    <!-- Import style -->
+    <!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
+    <script src="//unpkg.com/vue@3"></script>
+    <script src="//unpkg.com/element-plus"></script> -->
 </head>
 
 <body>
     <div class="header">
         <h1 id="videoTitle">视频播放</h1>
-        <button onclick="downloadVideo()">下载</button>
+        <div>
+            <button onclick="downloadVideo()">下载</button>
+            <button class="back-button" onclick="window.history.back()">返回</button>
+        </div>
     </div>
     <div class="artplayer-app"></div>
     <script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
@@ -98,6 +119,12 @@
         });
 
         function downloadVideo() {
+            // ElNotification({
+            //     title: '提示',
+            //     message: '开始下载，请稍后',
+            //     type: 'success',
+            // });
+
             fetch(videoUrl)
                 .then(response => response.blob())
                 .then(blob => {
