From 04e5848596f9e75223ae785a272ac25544db735a Mon Sep 17 00:00:00 2001
From: mubai <1609539827@qq.com>
Date: Sat, 5 Aug 2023 20:36:01 +0800
Subject: [PATCH] fix ui bug

---
 client/src/assets/css/classify.css            |  4 +-
 client/src/assets/css/film.css                |  4 +-
 client/src/assets/css/pagination.css          |  2 +-
 client/src/components/FilmList.vue            |  4 +-
 client/src/components/Header.vue              |  4 +-
 client/src/components/RelateList.vue          |  4 +-
 client/src/style.css                          |  2 +-
 client/src/views/IndexHome.vue                |  4 +-
 client/src/views/error/Error404.vue           | 96 ++++++++++++++-----
 client/src/views/index/FilmClassify.vue       |  4 +-
 client/src/views/index/FilmClassifySearch.vue |  8 +-
 client/src/views/index/FilmDetails.vue        |  2 +-
 client/src/views/index/Home.vue               |  6 +-
 client/src/views/index/Play.vue               |  4 +-
 client/src/views/index/SearchFilm.vue         |  4 +-
 client/vite.config.ts                         |  2 +-
 16 files changed, 101 insertions(+), 53 deletions(-)

diff --git a/client/src/assets/css/classify.css b/client/src/assets/css/classify.css
index e453314..70ad279 100644
--- a/client/src/assets/css/classify.css
+++ b/client/src/assets/css/classify.css
@@ -40,7 +40,7 @@
 }
 
 
-@media (min-width: 650px) {
+@media (min-width: 768px) {
     .title{
         margin-bottom: 35px;
         margin-top: 20px;
@@ -55,7 +55,7 @@
         margin: 5px 15px;
     }
 }
-@media (max-width: 650px) {
+@media (max-width: 768px) {
     .title{
         margin-bottom: 20px;
     }
diff --git a/client/src/assets/css/film.css b/client/src/assets/css/film.css
index 7562b40..a109f75 100644
--- a/client/src/assets/css/film.css
+++ b/client/src/assets/css/film.css
@@ -1,5 +1,5 @@
 /*wrap*/
-@media (max-width: 650px) {
+@media (max-width: 768px) {
     .play-link{
         line-height: 22px;
         min-width: calc(25% - 10px);
@@ -21,7 +21,7 @@
     }
 }
 /*pc*/
-@media (min-width: 650px) {
+@media (min-width: 768px) {
     .play-link{
         line-height: 34px;
         min-width: calc(16.7% - 12px);
diff --git a/client/src/assets/css/pagination.css b/client/src/assets/css/pagination.css
index 2ba1aa1..c014942 100644
--- a/client/src/assets/css/pagination.css
+++ b/client/src/assets/css/pagination.css
@@ -58,7 +58,7 @@
 }
 
 /*移动端缩小*/
-@media (max-width: 650px) {
+@media (max-width: 768px) {
     :deep(.number) {
         width: 35px;
         height: 35px;
diff --git a/client/src/components/FilmList.vue b/client/src/components/FilmList.vue
index 22458e3..92bded9 100644
--- a/client/src/components/FilmList.vue
+++ b/client/src/components/FilmList.vue
@@ -67,7 +67,7 @@ watchEffect(()=>{
 }
 
 /*wrap*/
-@media (max-width: 650px) {
+@media (max-width: 768px) {
   /*展示区域*/
   .c_content {
     width: 100%;
@@ -136,7 +136,7 @@ watchEffect(()=>{
 }
 
 /*pc*/
-@media (min-width: 650px) {
+@media (min-width: 768px) {
   .c_content {
     width: 100%;
     display: flex;
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index ff7c04d..aa367a4 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -77,7 +77,7 @@ onMounted(() => {
 <!--移动端适配-->
 <style>
 /*小尺寸时隐藏状态栏*/
-@media (max-width: 650px) {
+@media (max-width: 768px) {
     .nav_right {
         display: flex;
         justify-content: space-between;
@@ -116,7 +116,7 @@ onMounted(() => {
 <style scoped>
 
 
-@media (min-width: 650px) {
+@media (min-width: 768px) {
     .header {
         width: 78%;
         z-index: 0;
diff --git a/client/src/components/RelateList.vue b/client/src/components/RelateList.vue
index d6ad4e1..876c704 100644
--- a/client/src/components/RelateList.vue
+++ b/client/src/components/RelateList.vue
@@ -16,12 +16,12 @@ defineProps({
 
 <style scoped>
 
-@media (max-width: 650px){
+@media (max-width: 768px){
   .title {
     font-size: 20px;
   }
 }
-@media (min-width: 650px){
+@media (min-width: 768px){
   .title {
     font-size: 24px;
   }
diff --git a/client/src/style.css b/client/src/style.css
index 0fef3f5..a59b3b0 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -95,7 +95,7 @@ button:focus-visible {
 
 
 /*滚动条样式*/
-@media (min-width: 650px) {
+@media (min-width: 768px) {
   ::-webkit-scrollbar {
     width: 3px;
   }
diff --git a/client/src/views/IndexHome.vue b/client/src/views/IndexHome.vue
index 4a07d31..28543ff 100644
--- a/client/src/views/IndexHome.vue
+++ b/client/src/views/IndexHome.vue
@@ -38,7 +38,7 @@ import Footer from "../components/Footer.vue";
 }
 
 
-@media (min-width: 650px) {
+@media (min-width: 768px) {
     .el-main {
         margin: 0 auto;
         padding: 100px 0;
@@ -46,7 +46,7 @@ import Footer from "../components/Footer.vue";
     }
 }
 
-@media (max-width: 650px) {
+@media (max-width: 768px) {
     .el-main {
         /*margin: 0 auto;*/
         padding: 55px 0!important;
diff --git a/client/src/views/error/Error404.vue b/client/src/views/error/Error404.vue
index f7f5489..4afdb18 100644
--- a/client/src/views/error/Error404.vue
+++ b/client/src/views/error/Error404.vue
@@ -1,13 +1,22 @@
 <template>
   <div class="container">
-      <el-empty style="height: 100%; line-height: 100%; font-size: 20px" :image-size="400"
-                :image="notFoundImg">
-          <template #description>
-              <p style="font-size: 32px;width: 100%;color: #a574b7;margin-bottom: 20px">你好像走错地方了哦!!!</p>
-              <button @click="handleError('home')" >主页</button>
-              <button @click="handleError('back')">返回</button>
-          </template>
-      </el-empty>
+
+    <el-empty v-if="false" style="height: 100%; line-height: 100%; font-size: 20px" :image-size="400"
+              :image="notFoundImg">
+      <template #description>
+        <p style="font-size: 32px;width: 100%;color: #a574b7;margin-bottom: 20px">你好像走错地方了哦!!!</p>
+        <button @click="handleError('home')">主页</button>
+        <button @click="handleError('back')">返回</button>
+      </template>
+    </el-empty>
+
+
+    <img :src="notFoundImg" alt="404" class="notfound-img"/>
+    <p class="warning-txt">你好像走错地方了哦!!!</p>
+    <div class="btn-group">
+      <button @click="handleError('home')">主页</button>
+      <button @click="handleError('back')">返回</button>
+    </div>
   </div>
 </template>
 
@@ -16,30 +25,69 @@ import {useRouter} from "vue-router";
 import notFoundImg from '../../assets/image/404.png'
 
 const router = useRouter()
-const handleError = (t:string) =>{
-    switch (t) {
-        case 'home':
-            router.push('/')
-            break
-        case 'back':
-            router.go(-1)
-            break
-    }
+const handleError = (t: string) => {
+  switch (t) {
+    case 'home':
+      router.push('/')
+      break
+    case 'back':
+      router.go(-1)
+      break
+  }
 }
 </script>
 
 <style scoped>
+@media (min-width: 768px) {
+  .container {
+    padding: 50px 0!important;
+  }
+  .notfound-img {
+    margin: 0 auto;
+    max-height: 76vh;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 80px 0;
+  }
+
+  .notfound-img {
+    max-width: 96%;
+    margin: 0 auto;
+  }
+}
+
+.notfound-img {
+  max-width: 90%;
+  margin: 0 auto;
+}
+
 .container {
-    height: 100vh;
+  width: 100vw;
+  height: 100vh;
 }
+
+.warning-txt {
+  font-size: 32px;
+  color: #79bbff;
+  margin: 5px;
+}
+
+.btn-group {
+  margin: 0 auto;
+}
+
 button {
-    margin: 5px 15px;
-    background: rgb(103, 217, 232);
-    color: #ffffff;
-    width: 120px;
-    border-radius: 36px;
+  margin: 5px 15px;
+  background: rgb(103, 217, 232);
+  color: #ffffff;
+  width: 120px;
+  border-radius: 36px;
 }
+
 button:hover {
-    border: none;
+  border: none;
 }
 </style>
\ No newline at end of file
diff --git a/client/src/views/index/FilmClassify.vue b/client/src/views/index/FilmClassify.vue
index f8ceea5..1160d9e 100644
--- a/client/src/views/index/FilmClassify.vue
+++ b/client/src/views/index/FilmClassify.vue
@@ -96,7 +96,7 @@ onMounted(() => {
 }
 
 /**/
-@media (min-width: 650px) {
+@media (min-width: 768px) {
   .c_nav{
     margin-bottom: 15px;
   }
@@ -111,7 +111,7 @@ onMounted(() => {
 
 }
 
-@media (max-width: 650px) {
+@media (max-width: 768px) {
   .c_nav{
     margin-bottom: 10px;
   }
diff --git a/client/src/views/index/FilmClassifySearch.vue b/client/src/views/index/FilmClassifySearch.vue
index 019b15a..6cf746c 100644
--- a/client/src/views/index/FilmClassifySearch.vue
+++ b/client/src/views/index/FilmClassifySearch.vue
@@ -124,7 +124,7 @@ onMounted(() => {
 @import "/src/assets/css/classify.css";
 @import "/src/assets/css/pagination.css";
 
-@media (min-width: 650px) {
+@media (min-width: 768px) {
   .tag {
     margin: 0 8px;
     padding: 6px 12px;
@@ -133,7 +133,7 @@ onMounted(() => {
     padding: 3px 0;
   }
 }
-@media (max-width: 650px) {
+@media (max-width: 768px) {
   .tag {
     margin: 0 5px;
     padding: 4px 10px;
@@ -193,7 +193,7 @@ onMounted(() => {
 </style>
 <!--移动端修改-->
 <style scoped>
-@media (max-width: 650px) {
+@media (max-width: 768px) {
 
   /*顶部内容区域*/
   .header {
@@ -211,7 +211,7 @@ onMounted(() => {
   max-width: 100vw;
 }
 
-@media (min-width: 650px) {
+@media (min-width: 768px) {
 
   /*顶部内容区域*/
   .header {
diff --git a/client/src/views/index/FilmDetails.vue b/client/src/views/index/FilmDetails.vue
index e7f2d5c..eea61b8 100644
--- a/client/src/views/index/FilmDetails.vue
+++ b/client/src/views/index/FilmDetails.vue
@@ -206,7 +206,7 @@ const showContent = (flag: boolean) => {
 
 <!--移动端适配-->
 <style scoped>
-@media (max-width: 650px) {
+@media (max-width: 768px) {
   .title_mt {
     padding: 0 3px;
     display: flex;
diff --git a/client/src/views/index/Home.vue b/client/src/views/index/Home.vue
index f0eb6ff..c6b1468 100644
--- a/client/src/views/index/Home.vue
+++ b/client/src/views/index/Home.vue
@@ -6,7 +6,7 @@
                     <el-col :span="12" class="title">
                         <span :class="`iconfont ${item.nav.name.search('电影') != -1?'icon-film':item.nav.name.search('剧') != -1?'icon-tv':'icon-cartoon'}`"
                               style="color: #79bbff;font-size: 32px;margin-right: 10px; line-height: 130%"/>
-                        <a :href="`/categoryFilm?pid=${item.nav.id}`">{{ item.nav.name }}</a>
+                        <a :href="`/filmClassify?Pid=${item.nav.id}`">{{ item.nav.name }}</a>
                     </el-col>
                     <el-col :span="12">
                         <ul class="nav_ul">
@@ -170,7 +170,7 @@ a {
 
 <!--移动端修改-->
 <style scoped>
-@media (min-width: 650px) {
+@media (min-width: 768px) {
     .cus_content_item {
         padding: 10px;
         overflow: hidden;
@@ -178,7 +178,7 @@ a {
     }
 }
 
-@media (max-width: 650px) {
+@media (max-width: 768px) {
     .cus_content_item {
         padding: 0 6px 0 0;
         margin-bottom: 10px;
diff --git a/client/src/views/index/Play.vue b/client/src/views/index/Play.vue
index fb30931..534f576 100644
--- a/client/src/views/index/Play.vue
+++ b/client/src/views/index/Play.vue
@@ -292,7 +292,7 @@ const handleBtn = (e: any) => {
 }
 
 
-@media (min-width: 650px) {
+@media (min-width: 768px) {
   .player_area {
     padding: 10px 6%;
   }
@@ -378,7 +378,7 @@ const handleBtn = (e: any) => {
 <style scoped>
 
 /*适应小尺寸*/
-@media (max-width: 650px) {
+@media (max-width: 768px) {
   .player_area {
     padding: 5px 10px;
   }
diff --git a/client/src/views/index/SearchFilm.vue b/client/src/views/index/SearchFilm.vue
index 3fe16af..9bda178 100644
--- a/client/src/views/index/SearchFilm.vue
+++ b/client/src/views/index/SearchFilm.vue
@@ -111,7 +111,7 @@ const changeCurrent = (currentVal: number) => {
 <!--移动端-->
 <style scoped>
 @import "/src/assets/css/pagination.css";
-@media (max-width: 650px) {
+@media (max-width: 768px) {
     .title h2 {
         margin: 8px auto;
     }
@@ -254,7 +254,7 @@ const changeCurrent = (currentVal: number) => {
 }
 
 
-@media (min-width: 650px) {
+@media (min-width: 768px) {
     .film_item {
         flex-basis: calc(50% - 18px);
         max-width: 50%;
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 5010932..361e552 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -25,7 +25,7 @@ export default defineConfig({
     //     port: 3600,
     //     proxy: {
     //         "/api": {
-    //             target: `http://localhost`,
+    //             // target: `http://localhost`,
     //             changeOrigin: true, // 允许跨域
     //             rewrite: path => path.replace(/^\/api/,'')
     //         }