fix ui bug

2026-02-03 22:44:47 +08:00 · 2023-08-05 20:36:01 +08:00
parent efda64887d
commit 04e5848596
16 changed files with 101 additions and 53 deletions
--- 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;
    }
--- 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);
--- 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;
--- 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;
--- 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;
--- 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;
  }
--- 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;
  }
--- 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;
--- 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>
--- 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;
  }
--- 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 {
--- 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;
--- 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;
--- 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;
  }
--- 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%;
--- 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/,'')
    //         }