update docker deploy

client/src/components/FilmList.vue

@@ -1,32 +1,63 @@
 <template>
-  <div class="c_content">
-    <div class="item" v-for="item in list" :style="{width: `calc(${ list.length <= 12 ? 16 : 14}% - 16px)`}">
-      <a :href="`/filmDetail?link=${item.id}`" class="default_image link_content">
-        <div class="tag_group">
-          <span class="cus_tag ">{{ item.year ? item.year.slice(0, 4) : '未知' }}</span>
-          <span class="cus_tag ">{{ item.cName }}</span>
-          <span class="cus_tag ">{{ item.area.split(',')[0] }}</span>
+  <div class="c_content" v-if="true">
+    <div class="item" v-for="item in d.list" :style="{width: `calc(${d.width-1}%)`}">
+        <div v-if="item.id != -99">
+          <a :href="`/filmDetail?link=${item.id}`" class="default_image link_content">
+            <div class="tag_group">
+              <span class="cus_tag ">{{ item.year ? item.year.slice(0, 4) : '未知' }}</span>
+              <span class="cus_tag ">{{ item.cName }}</span>
+              <span class="cus_tag ">{{ item.area.split(',')[0] }}</span>
+            </div>
+            <span class="cus_remark hidden-md-and-up">{{ item.remarks }}</span>
+            <img :src="item.picture" :alt="item.name?.split('[')[0]" @error="handleImg">
+          </a>
+          <a :href="`/filmDetail?link=${item.id}`" class="content_text_tag">{{ item.name.split("[")[0] }}</a>
+          <span class="cus_remark hidden-md-and-down">{{ item.remarks }}</span>
         </div>
-        <span class="cus_remark hidden-md-and-up">{{ item.remarks }}</span>
-        <img :src="item.picture" :alt="item.name.split('[')[0]" @error="handleImg">
-      </a>
-      <a :href="`/filmDetail?link=${item.id}`" class="content_text_tag">{{ item.name.split("[")[0] }}</a>
-      <span class="cus_remark hidden-md-and-down">{{ item.remarks }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {defineProps} from 'vue'
+import {defineProps, onMounted, reactive, watch, watchEffect} from 'vue'
 
-defineProps({
-  list: Array
+const props = defineProps({
+  list: Array,
+  col: Number,
+})
+const d = reactive({
+  col: 0,
+  list: Array,
+  width: 0,
 })
 
 // 图片加载失败事件
 const handleImg = (e: Event) => {
   e.target.style.display = "none"
 }
+
+// 监听父组件传递的参数的变化
+watchEffect(()=>{
+  // 首先获取当前设备类型
+  const userAgent = navigator.userAgent.toLowerCase();
+  let isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
+  // 如果是PC, 为防止flex布局最后一行元素不足出现错位, 使用空元素补齐list
+  let c = isMobile ? 3 : props.col? props.col: 0
+  let l:any= props.list
+  let len = l.length
+  d.width = isMobile ? 31 : Math.floor(100 / c)
+  if (len % c !=0) {
+    for (let i = 0; i < c - len %c ; i++) {
+      let temp:any = {...l[0] as any}
+      temp.id = -99
+      l.push(temp)
+    }
+  }
+  d.list = l
+})
+
+
+
 </script>
 
 <style scoped>
@@ -42,12 +73,12 @@ const handleImg = (e: Event) => {
     width: 100%;
     display: flex;
     flex-flow: wrap;
-    justify-content: start;
+    justify-content: space-between;
   }
 
   .c_content .item {
-    flex-basis: calc(33% - 7px);
-    max-width: 33%;
+  /*  flex-basis: calc(33% - 7px);
+    max-width: 33%;*/
     margin: 0 4px 20px 4px;
     box-sizing: border-box;
     overflow: hidden;
@@ -110,11 +141,11 @@ const handleImg = (e: Event) => {
     width: 100%;
     display: flex;
     flex-flow: wrap;
-    justify-content: start;
+    justify-content: space-between;
   }
 
   .c_content .item {
-    margin: 0 10px 20px 10px;
+    margin-bottom: 20px;
     box-sizing: border-box;
   }
 

client/src/components/RelateList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relate_container">
     <p class="title">相关推荐</p>
-    <FilmList :list="relateList"/>
+    <FilmList :col="7" :list="relateList"/>
   </div>
 </template>
 

client/src/views/index/FilmClassify.vue

@@ -11,23 +11,23 @@
       <div class="news">
         <div class="c_nav">
           <span class="c_nav_text silver">最新上映</span>
-          <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
+          <a :href="`/filmClassifySearch?Pid=${d.title.id}&Sort=release_stamp`" class="c_nav_more ">更多<b class="iconfont icon-more"/></a>
         </div>
-        <FilmList :list="d.content.news"/>
+        <FilmList :col="7" :list="d.content.news"/>
       </div>
       <div class="news">
         <div class="c_nav">
           <span class="c_nav_text silver">排行榜</span>
-          <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
+          <a :href="`/filmClassifySearch?Pid=${d.title.id}&Sort=hits`" class="c_nav_more ">更多<b class="iconfont icon-more"/></a>
         </div>
-        <FilmList :list="d.content.top"/>
+        <FilmList :col="7" :list="d.content.top"/>
       </div>
       <div class="news">
         <div class="c_nav">
           <span class="c_nav_text silver">最近更新</span>
-          <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
+          <a :href="`/filmClassifySearch?Pid=${d.title.id}&Sort=update_stamp`" class="c_nav_more ">更多<b class="iconfont icon-more"/></a>
         </div>
-        <FilmList :list="d.content.recent"/>
+        <FilmList :col="7" :list="d.content.recent"/>
       </div>
     </div>
 
@@ -61,7 +61,7 @@ const getFilmData = () => {
       d.title = resp.data.title
       d.content = resp.data.content
     } else {
-      ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
+      ElMessage.error({message: "影片分类首页数据获取失败,请稍后刷新重试", duration: 1000})
     }
   })
 }
@@ -87,9 +87,7 @@ onMounted(() => {
 }
 
 .c_nav_more {
-  //font-size: 14px;
   background: #25252b;
-
   border-radius: 8px;
 }
 

client/src/views/index/FilmClassifySearch.vue

@@ -18,7 +18,7 @@
     </div>
 
     <!--影片列表展示-->
-    <FilmList :list="d.list"/>
+    <FilmList :col="7" :list="d.list"/>
     <!--分页展示区域-->
     <div class="pagination_container ">
       <el-pagination background layout="prev, pager, next"
@@ -106,7 +106,7 @@ const getFilmData = () => {
       d.search = resp.data.search
       d.searchParams = resp.data.params
     } else {
-      ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
+      ElMessage.error({message: "影片搜索结果异常,请稍后刷新重试", duration: 1000})
     }
   })
 }
@@ -164,7 +164,6 @@ onMounted(() => {
   color: rgba(255,255,255,0.35);
   border-radius: 6px;
   margin-right: 12px;
-  //padding: 3px 0;
 }
 .t_title b{
   color: rgba(255,255,255,0.15);

client/src/views/index/FilmDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="film" v-show="data.loading">
-    <!-- hidden-sm-and-up 移动端title   -->
+    <!-- 移动端title   -->
     <div class="hidden-sm-and-up">
       <div class="title_mt  ">
         <a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
@@ -30,7 +30,7 @@
       <h2>{{ data.detail.name }}</h2>
       <ul class="tags">
         <li class="t_c">
-          <a :href="`/categoryFilm?pid=${data.detail.pid}`">
+          <a :href="`/filmClassifySearch?Pid=${data.detail.pid}&Category=${data.detail.cid}`">
             <el-icon>
               <Promotion/>
             </el-icon>
@@ -98,7 +98,7 @@
 import {useRouter} from "vue-router";
 import {onBeforeMount, reactive, ref,} from "vue";
 import {ApiGet} from "../../utils/request";
-import {ElMessage, ElLoading} from 'element-plus'
+import {ElMessage} from 'element-plus'
 import {Promotion, CaretRight} from "@element-plus/icons-vue";
 import RelateList from "../../components/RelateList.vue";
 // 获取路由对象
@@ -147,7 +147,6 @@ const data = reactive({
 const handleLongText = (t: string): string => {
   let res = ''
   t.split(',').forEach((s, i) => {
-    console.log(s)
     if (i < 3) {
       res += `${s} `
     }
@@ -166,7 +165,6 @@ onBeforeMount(() => {
       data.relate = resp.data.relate
       // 处理过长数据
       data.detail.descriptor.actor = handleLongText(data.detail.descriptor.actor)
-      console.log(handleLongText(data.detail.descriptor.actor))
       data.detail.descriptor.director = handleLongText(data.detail.descriptor.director)
       data.loading = true
     } else {

client/src/views/index/Home.vue

@@ -17,9 +17,9 @@
                     </el-col>
                 </el-row>
                 <el-row class="cus_content">
-                    <el-col :md="24" :lg="20" :xl="20" class="cus_content">
+                    <el-col  :md="24" :lg="20" :xl="20" class="cus_content">
                         <!--影片列表-->
-                        <FilmList :list="item.movies.slice(0,12)"/>
+                        <FilmList :col="6" :list="item.movies.slice(0,12)"/>
                     </el-col>
                     <el-col :md="0" :lg="4" :xl="4" class="hidden-md-and-down content_right">
                         <h3 class="hot_title">🔥热播{{item.nav.name}}</h3>
@@ -128,6 +128,7 @@ a {
 
 .content_right {
     width: 100%;
+    padding-left: 18px;
 }
 
 .content_right_item {