From c4ecdde7f6b7b45c40f9609aae849ef5cd04e672 Mon Sep 17 00:00:00 2001
From: mubai <1609539827@qq.com>
Date: Sun, 9 Jul 2023 22:46:39 +0800
Subject: [PATCH] fix UI bug

---
 client/src/App.vue                            |   2 +-
 client/src/assets/css/film.css                | 115 +++
 client/src/components/FilmList.vue            | 297 ++++----
 client/src/components/RelateList.vue          |  34 +-
 client/src/router/router.ts                   |   4 -
 client/src/style.css                          |  13 +
 client/src/views/index/CategoryFilm.vue       | 437 ------------
 client/src/views/index/FilmClassify.vue       |   2 +-
 client/src/views/index/FilmClassifySearch.vue |  44 +-
 client/src/views/index/FilmDetails.vue        | 658 ++++++++----------
 client/src/views/index/Play.vue               | 606 ++++++++--------
 client/src/views/index/PlayV1.vue             | 357 ----------
 12 files changed, 906 insertions(+), 1663 deletions(-)
 create mode 100644 client/src/assets/css/film.css
 delete mode 100644 client/src/views/index/CategoryFilm.vue
 delete mode 100644 client/src/views/index/PlayV1.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index ba6417e..ae4803d 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -33,7 +33,7 @@ html, body, #app {
 a {
     outline: none;
     text-decoration: none;
-    color: #888888;
+    color: rgba(255,255,255,0.38);
 }
 
 a:hover {
diff --git a/client/src/assets/css/film.css b/client/src/assets/css/film.css
new file mode 100644
index 0000000..7562b40
--- /dev/null
+++ b/client/src/assets/css/film.css
@@ -0,0 +1,115 @@
+/*wrap*/
+@media (max-width: 650px) {
+    .play-link{
+        line-height: 22px;
+        min-width: calc(25% - 10px);
+    }
+    .play-list-item {
+        max-height: 240px;
+    }
+    .play-module-title{
+        display: none;
+    }
+    .play-tab-item{
+        height: 34px;
+        line-height: 34px;
+        font-size: 12px;
+        padding: 0 8px;
+    }
+    .play-list{
+        border-radius: 0 8px 8px 8px;
+    }
+}
+/*pc*/
+@media (min-width: 650px) {
+    .play-link{
+        line-height: 34px;
+        min-width: calc(16.7% - 12px);
+    }
+    .play-list-item {
+        max-height: 380px;
+    }
+
+    .play-module-title{
+        height: 45px;
+        line-height: 45px;
+        font-size: 24px;
+        color: rgba(255,255,255,0.55);
+    }
+    .play-tab-item{
+        height: 45px;
+        line-height: 45px;
+        font-size: 14px;
+        padding: 0 15px;
+    }
+    .play-list{
+        border-radius: 8px 0 8px 8px;
+    }
+
+}
+
+/*播放列表样式*/
+.play-module{
+    width: 100%;
+    border-radius: 10px;
+    margin-top: 50px;
+}
+.module-heading{
+    display: flex;
+    justify-content: space-between;
+}
+.play-module-title{
+    font-weight: 700;
+    margin: 0 0;
+}
+.play-tab-group{
+    display: flex;
+    white-space: nowrap;
+    padding: 5px 5px 0;
+    background: rgba(255,255,255,0.15);
+    border-radius: 8px 8px 0 0;
+}
+.play-tab-item{
+    display: inline-block;
+    border-radius: 6px 6px 0 0;
+    font-weight: 700;
+    box-shadow: 0 0 5px 0 rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.1)
+}
+.play-tab-item:hover{
+    color: orange;
+}
+
+.tab-active{
+    background: #2e2e2e;
+    font-weight: 700;
+    color: orange;
+}
+
+.play-list{
+    background: #2e2e2e;
+    padding: 20px;
+
+}
+.play-list-item{
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+}
+.play-link{
+    padding: 3px;
+    border: 1px solid rgba(255,255,255,0.28);
+    border-radius: 8px;
+    margin: 5px;
+    text-align: center;
+    font-size: 14px;
+    display: inline-block;
+}
+.play-link:hover {
+    color: orange;
+    background: #b36d3824;
+}
+.play-link-active {
+    color: orange;
+    background: #b36d3824;
+}
+
diff --git a/client/src/components/FilmList.vue b/client/src/components/FilmList.vue
index aa3c34f..0adb690 100644
--- a/client/src/components/FilmList.vue
+++ b/client/src/components/FilmList.vue
@@ -1,185 +1,188 @@
 <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>
-                <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 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>
+        <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'
+
 defineProps({
-    list: Array
+  list: Array
 })
 
 // 图片加载失败事件
-const handleImg =(e:Event)=>{
-    e.target.style.display = "none"
+const handleImg = (e: Event) => {
+  e.target.style.display = "none"
 }
 </script>
 
 <style scoped>
 .default_image {
-    background: url("/src/assets/image/404.png");
-    background-size: cover;
+  background: url("/src/assets/image/404.png");
+  background-size: cover;
 }
+
 /*wrap*/
 @media (max-width: 650px) {
-    /*展示区域*/
-    .c_content {
-        width: 100%;
-        display: flex;
-        flex-flow: wrap;
-        justify-content: space-between;
-    }
+  /*展示区域*/
+  .c_content {
+    width: 100%;
+    display: flex;
+    flex-flow: wrap;
+    justify-content: start;
+  }
 
-    .c_content .item {
-        flex-basis: calc(33% - 6px);
-        max-width: 33%;
-        margin-bottom: 20px;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
+  .c_content .item {
+    flex-basis: calc(33% - 7px);
+    max-width: 33%;
+    margin: 0 4px 20px 4px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
 
-    .item .link_content {
-        padding-top: 125%;
-        position: relative;
-        border-radius: 5px;
-        display: flex;
-        width: 100%;
-        background-size:cover ;
-    }
-    img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 5px;
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-    }
+  .item .link_content {
+    padding-top: 125%;
+    position: relative;
+    border-radius: 5px;
+    display: flex;
+    width: 100%;
+    background-size: cover;
+  }
 
-    .tag_group {
-        display: none;
-    }
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 5px;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
 
-    .content_text_tag {
-        font-size: 11px !important;
-        color: rgb(221, 221, 221);
-        width: 96%!important;
-        max-height: 40px;
-        line-height: 20px;
-        padding: 2px 0 2px 0 !important;
-        text-align: left;
-        display: -webkit-box!important;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-    }
+  .tag_group {
+    display: none;
+  }
 
-    .cus_remark {
-        z-index: 10;
-        position: absolute;
-        bottom: 0;
-        display: block;
-        width: 100%;
-        font-size: 12px;
-        color: #c2c2c2;
-        text-align: center;
-        background: rgba(0,0,0,0.55);
-        border-radius:  0 0 5px 5px;
-    }
+  .content_text_tag {
+    font-size: 11px !important;
+    color: rgb(221, 221, 221);
+    width: 96% !important;
+    max-height: 40px;
+    line-height: 20px;
+    padding: 2px 0 2px 0 !important;
+    text-align: left;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .cus_remark {
+    z-index: 10;
+    position: absolute;
+    bottom: 0;
+    display: block;
+    width: 100%;
+    font-size: 12px;
+    color: #c2c2c2;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.55);
+    border-radius: 0 0 5px 5px;
+  }
 }
 
 /*pc*/
 @media (min-width: 650px) {
-    .c_content {
-        width: 100%;
-        display: flex;
-        flex-flow: wrap;
-        justify-content: space-between;
-    }
+  .c_content {
+    width: 100%;
+    display: flex;
+    flex-flow: wrap;
+    justify-content: start;
+  }
 
-    .c_content .item {
-        margin-bottom: 20px;
-        box-sizing: border-box;
-    }
+  .c_content .item {
+    margin: 0 10px 20px 10px;
+    box-sizing: border-box;
+  }
 
-    .item .link_content {
-        border-radius: 5px;
-        padding-top: 125%;
-        background-size: cover;
-        width: 100%;
-        display: flex;
-        position: relative;
-        margin-bottom: 5px;
-    }
+  .item .link_content {
+    border-radius: 5px;
+    padding-top: 125%;
+    background-size: cover;
+    width: 100%;
+    display: flex;
+    position: relative;
+    margin-bottom: 5px;
+  }
 
-    img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 5px;
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-    }
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 5px;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
 
-    .tag_group {
-        position: absolute;
-        bottom: 3px;
-        display: flex;
-        width: 100%;
-        flex-wrap: wrap ;
-        overflow: hidden;
-        justify-content: start;
-        height: 18px;
-        z-index: 10;
-        line-height: 18px;
-        padding-left: 10px;
-    }
+  .tag_group {
+    position: absolute;
+    bottom: 3px;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    overflow: hidden;
+    justify-content: start;
+    height: 18px;
+    z-index: 10;
+    line-height: 18px;
+    padding-left: 10px;
+  }
 
-    .cus_tag {
-        flex-shrink: 0; /* 不缩小元素 */
-        white-space: nowrap;
-        color: rgb(255, 255, 255);
-        padding: 0 3px;
-        margin-right: 8px;
-        background: rgba(0, 0, 0, 0.55);
-        font-size: 12px;
-        border-radius: 5px;
-    }
+  .cus_tag {
+    flex-shrink: 0; /* 不缩小元素 */
+    white-space: nowrap;
+    color: rgb(255, 255, 255);
+    padding: 0 3px;
+    margin-right: 8px;
+    background: rgba(0, 0, 0, 0.55);
+    font-size: 12px;
+    border-radius: 5px;
+  }
 
-    .content_text_tag {
-        display: block;
-        font-size: 14px !important;
-        color: rgb(221, 221, 221);
-        width: 96%!important;
-        padding: 2px 10px 2px 2px !important;
-        text-align: left;
-        text-overflow: ellipsis;
+  .content_text_tag {
+    display: block;
+    font-size: 14px !important;
+    color: rgb(221, 221, 221);
+    width: 96% !important;
+    padding: 2px 10px 2px 2px !important;
+    text-align: left;
+    text-overflow: ellipsis;
 
-        white-space: nowrap;
-        overflow: hidden;
-    }
+    white-space: nowrap;
+    overflow: hidden;
+  }
 
-    .cus_remark {
-        display: block;
-        width: 100%;
-        padding-left: 3px;
-        font-size: 12px;
-        color: #999999;
-        text-align: left;
-    }
+  .cus_remark {
+    display: block;
+    width: 100%;
+    padding-left: 3px;
+    font-size: 12px;
+    color: #999999;
+    text-align: left;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/components/RelateList.vue b/client/src/components/RelateList.vue
index 24813bb..ee7959b 100644
--- a/client/src/components/RelateList.vue
+++ b/client/src/components/RelateList.vue
@@ -1,29 +1,43 @@
 <template>
-    <div class="relate_container">
-        <h2 class="title">相关推荐</h2>
-        <FilmList :list="relateList"/>
-    </div>
+  <div class="relate_container">
+    <p class="title">相关推荐</p>
+    <FilmList :list="relateList"/>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import FilmList from "./FilmList.vue";
 
 defineProps({
-    relateList: Array
+  relateList: Array
 })
 
 </script>
 
 <style scoped>
+
+@media (max-width: 650px){
+  .title {
+    font-size: 20px;
+  }
+}
+@media (min-width: 650px){
+  .title {
+    font-size: 24px;
+  }
+}
 .relate_container {
-    width: 100%;
-    margin-top: 36px;
+  width: 100%;
+  margin-top: 36px;
+
 }
 
 .title {
-    padding: 0 0 5px 10px;
-    text-align: left;
-    border-bottom: 2px solid #777777;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.55);
+  padding-bottom: 5px;
+  text-align: left;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
 }
 
 </style>
\ No newline at end of file
diff --git a/client/src/router/router.ts b/client/src/router/router.ts
index 08055e6..e532ec7 100644
--- a/client/src/router/router.ts
+++ b/client/src/router/router.ts
@@ -1,17 +1,14 @@
-
 import {
     createRouter,
     createWebHistory,
 } from "vue-router";
 
-
 // 1.定义路由组件
 import IndexHome from "../views/IndexHome.vue";
 import Home from "../views/index/Home.vue";
 import FilmDetails from "../views/index/FilmDetails.vue";
 import Play from "../views/index/Play.vue";
 import SearchFilm from "../views/index/SearchFilm.vue";
-import CategoryFilm from "../views/index/CategoryFilm.vue";
 import NotFound from '../views/error/Error404.vue'
 import FilmClassifySearch from "../views/index/FilmClassifySearch.vue";
 import FilmClassify from "../views/index/FilmClassify.vue";
@@ -28,7 +25,6 @@ const routes = [
             {path: 'filmDetail', component: FilmDetails},
             {path: 'play', component: Play},
             {path: 'search', component: SearchFilm},
-            {path: 'CategoryFilm', component: CategoryFilm},
             {path: 'filmClassify', component: FilmClassify},
             {path: 'filmClassifySearch', component: FilmClassifySearch},
         ]
diff --git a/client/src/style.css b/client/src/style.css
index dc31925..0fef3f5 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -94,6 +94,19 @@ button:focus-visible {
 }
 
 
+/*滚动条样式*/
+@media (min-width: 650px) {
+  ::-webkit-scrollbar {
+    width: 3px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    height: 10px;
+    background: rgba(255,255,255,0.25);
+  }
+}
+
+
 
 
 
diff --git a/client/src/views/index/CategoryFilm.vue b/client/src/views/index/CategoryFilm.vue
deleted file mode 100644
index acb99fe..0000000
--- a/client/src/views/index/CategoryFilm.vue
+++ /dev/null
@@ -1,437 +0,0 @@
-<template>
-  <div class="container">
-    <div class="header">
-      <div class="h_title">
-        <span class="header_t">{{ d.title.name }}</span>
-      </div>
-      <!--影片分类检索-->
-      <div class="t_container">
-        <div class="t_item" v-for="k in d.search.sortList ">
-          <div class="t_title">{{d.search.titles[k]}}</div>
-          <div class="tag_group">
-            <a href="javascript:void(false)" :class="`tag ${t['Value'] === d.searchParams[k]?'t_active':''}`" v-for="t in d.search.tags[k]" @click="handleTag(k,t['Value'])" >
-              {{t['Name']}}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!--影片列表展示-->
-    <FilmList :list="d.list"/>
-    <!--分页展示区域-->
-    <div class="pagination_container ">
-      <el-pagination background layout="prev, pager, next"
-                     v-model:current-page="d.page.current"
-                     @current-change="changeCurrent"
-                     :pager-count="5"
-                     :background="true"
-                     :page-size="d.page.pageSize"
-                     :total="d.page.total"
-                     :prev-icon="ArrowLeftBold"
-                     :next-icon="ArrowRightBold"
-                     hide-on-single-page
-                     class="pagination"/>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {onMounted, reactive, toRefs} from "vue";
-import {useRouter} from "vue-router";
-import {ApiGet} from "../../utils/request";
-import {ElMessage} from "element-plus";
-import {ArrowRightBold, ArrowLeftBold} from '@element-plus/icons-vue'
-import FilmList from "../../components/FilmList.vue";
-
-// 分类tag点击事件
-const handleTag = (k:string,v:string)=>{
-  // 设置被点击的tag属性值
-  d.searchParams[k as keyof typeof d.searchParams] = v
-  // searchTag改变, 重置 current当前页码
-  d.page.current = 1
-  handleParams()
-}
-
-const handleParams = ()=> {
-  let q = ''
-  for (let k in d.searchParams) {
-    let val = d.searchParams[k as keyof typeof d.searchParams]
-    if (val != '') {
-      q += `&${k}=${val}`
-    }
-  }
-  location.href = '/categoryFilm?'+q.slice(1)+`&current=${d.page.current}`
-}
-
-// 页面所需数据
-const d = reactive({
-  title: {},
-  list: [],
-  search: {
-    sortList:[],
-    titles: [],
-    tags: [],
-  },
-  page: {
-    current: 0,
-  },
-  searchParams:{
-    Pid: '',
-    Category: '',
-    Plot: '',
-    Area: '',
-    Language: '',
-    Year: '',
-    Sort: '',
-  },
-
-})
-// 获取路由参数查询对应数据
-const router = useRouter()
-
-// 点击分页按钮事件 current-change
-const changeCurrent = (currentVal: number) => {
-  handleParams()
-}
-
-
-const getFilmData = () => {
-  let url =  `filmClassifyHome`
-  let query = router.currentRoute.value.query
-  ApiGet(url, {...query}).then((resp: any) => {
-    if (resp.status === 'ok') {
-      d.title = resp.data.title
-      d.list = resp.data.list
-      d.page = resp.page
-      d.search = resp.data.search
-      d.searchParams = resp.data.params
-    } else {
-      ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
-    }
-  })
-}
-
-onMounted(() => {
-  getFilmData()
-  // let query = router.currentRoute.value.query
-  // getFilmData({pid: query.pid, cid: query.cid, current: query.current})
-})
-
-</script>
-
-
-<style scoped>
-.h_title {
-  display: flex;
-  justify-content: start;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #777777;
-  margin-bottom: 10px;
-}
-.h_title_active {
-  color: #212121
-}
-.header_t {
-  color: #a0a0a0;
-  font-size: 30px;
-  font-weight: 700;
-  line-height: 1.1;
-
-}
-
-
-.t_container {
-  display: block;
-  font-size: 14px;
-  padding: 20px 0;
-//background-color: rgb(117, 116, 116);
-}
-
-.t_item {
-  display: flex;
-  justify-content: start;
-  margin: 14px 0;
-}
-
-.t_title {
-  display: inline-block;
-  font-size: 17px;
-  font-weight: 700;
-  text-align: left;
-  color: rgba(255,255,255,0.35);
-  border-radius: 6px;
-  margin-right: 12px;
-  padding: 3px 0;
-}
-
-.tag_group {
-  display: flex;
-  justify-content: start;
-  flex-flow: wrap;
-
-}
-
-.tag {
-  display: inline-block;
-  border: 1px solid rgba(255,255,255,0.12);
-  margin: 0 8px;
-  border-radius: 5px;
-  text-align: center;
-  padding: 6px 12px;
-}
-
-.t_active {
-  background: rgba(255,255,255,0.12);
-  color: #ffa500cc!important;
-  border: none!important;
-}
-
-
-
-</style>
-<!--移动端修改-->
-<style scoped>
-@media (max-width: 650px) {
-  .container {
-    padding: 0 10px;
-
-  }
-
-  /*顶部内容区域*/
-  .header {
-    width: 100%;
-    margin-bottom: 100px;
-    background: none !important;
-  }
-
-  .header p {
-    text-align: left;
-    font-weight: 600;
-    font-size: 24px;
-    color: #c9c4c4;
-    margin-top: 0;
-    padding-left: 10px;
-    height: 100%;
-    /*background: rgb(34, 34, 34);*/
-  }
-
-  .c_header {
-    max-width: 100%;
-    display: flex;
-    /*justify-content: start;*/
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    margin-bottom: 20px;
-  }
-
-  .c_header a {
-    white-space: nowrap;
-    margin-right: 10px;
-    color: #000;
-    font-weight: 400;
-    background: rgba(255, 255, 255, 0.94);
-    padding: 6px 10px;
-    border-radius: 10px;
-  }
-
-  .c_header a:hover {
-    color: orange;
-  }
-
-  .nav:before {
-    width: 36px;
-    height: 4px;
-    background: orange;
-    content: '';
-    position: absolute;
-    left: 35%;
-    bottom: 12px;
-    border-radius: 50px;
-    transform: scaleX(0);
-    transition: transform 0.5s ease-out;
-  }
-
-  .nav:hover:before {
-    width: 36px;
-    height: 4px;
-    background: orange;
-    content: '';
-    position: absolute;
-    left: 35%;
-    bottom: 12px;
-    border-radius: 50px;
-    transform: scaleX(1);
-  }
-
-  .active {
-    background: rgb(249 230 195) !important;
-    color: #e52424 !important;
-  }
-
-}
-</style>
-
-<style scoped>
-.container {
-  max-width: 100vw;
-}
-
-@media (min-width: 650px) {
-
-  /*顶部内容区域*/
-  .header {
-    width: 100%;
-  }
-
-  .header p {
-    text-align: left;
-    font-weight: 800;
-    font-size: 32px;
-    color: #c9c4c4;
-    margin-top: 0;
-    /*border-bottom: 2px solid #ffffff;*/
-    /*padding-bottom: 30px;*/
-  }
-
-  .c_header {
-    width: 100%;
-    display: flex;
-    justify-content: start;
-    margin-bottom: 20px;
-  }
-
-  .c_header a {
-    flex-basis: calc(14% - 16px);
-    white-space: nowrap;
-    margin-right: 20px;
-    color: #000;
-    font-weight: 800;
-    background: rgba(255, 255, 255, 0.94);
-    padding: 1.35% 0;
-    border-radius: 10px;
-    position: relative;
-  }
-
-  .c_header a:hover {
-    color: orange;
-  }
-
-  .nav:before {
-    width: 36px;
-    height: 4px;
-    background: orange;
-    content: '';
-    position: absolute;
-    left: 35%;
-    bottom: 12px;
-    border-radius: 50px;
-    transform: scaleX(0);
-    transition: transform 0.5s ease-out;
-  }
-
-  .nav:hover:before {
-    width: 36px;
-    height: 4px;
-    background: orange;
-    content: '';
-    position: absolute;
-    left: 35%;
-    bottom: 12px;
-    border-radius: 50px;
-    transform: scaleX(1);
-  }
-
-  .active {
-    background: rgb(249 230 195) !important;
-    color: #e52424 !important;
-  }
-}
-</style>
-
-<style scoped>
-/*分页插件区域*/
-.pagination_container {
-  width: 100%;
-  margin-top: 30px;
-  /*background: deepskyblue;*/
-  text-align: center;
-  /*display: flex;*/
-}
-
-:deep(.el-pagination) {
-  width: 100% !important;
-  margin: 0 auto !important;
-  justify-content: center;
-}
-
-/*分页器样式修改*/
-:deep(.number) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-  /*margin: 0 3px!important;*/
-}
-
-:deep(.number:hover) {
-  color: #67d9e8;
-}
-
-:deep(.btn-prev) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-}
-
-:deep(.btn-next) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-}
-
-:deep(.more) {
-  font-weight: bold;
-  width: 45px;
-  height: 45px;
-  background: #2e2e2e !important;
-  color: #ffffff;
-  border-radius: 50%;
-}
-
-:deep(.is-active) {
-  background: #67d9e8 !important;
-}
-
-/*移动端缩小*/
-@media (max-width: 650px) {
-  :deep(.number) {
-    width: 35px;
-    height: 35px;
-  }
-
-  :deep(.btn-prev) {
-    width: 35px;
-    height: 35px;
-  }
-
-  :deep(.btn-next) {
-    width: 35px;
-    height: 35px;
-  }
-
-  :deep(.more) {
-    width: 35px;
-    height: 35px;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/client/src/views/index/FilmClassify.vue b/client/src/views/index/FilmClassify.vue
index af77da3..d95e86e 100644
--- a/client/src/views/index/FilmClassify.vue
+++ b/client/src/views/index/FilmClassify.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container"  v-if="d.content.news.length > 0">
     <div class="title">
       <a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
       <span class="line"/>
diff --git a/client/src/views/index/FilmClassifySearch.vue b/client/src/views/index/FilmClassifySearch.vue
index afd71ac..6164f5e 100644
--- a/client/src/views/index/FilmClassifySearch.vue
+++ b/client/src/views/index/FilmClassifySearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" v-if="d.list.length >0">
     <div class="title">
       <a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a>
       <span class="line"/>
@@ -44,26 +44,6 @@ import {ElMessage} from "element-plus";
 import {ArrowRightBold, ArrowLeftBold} from '@element-plus/icons-vue'
 import FilmList from "../../components/FilmList.vue";
 
-// 分类tag点击事件
-const handleTag = (k:string,v:string)=>{
-  // 设置被点击的tag属性值
-  d.searchParams[k as keyof typeof d.searchParams] = v
-  // searchTag改变, 重置 current当前页码
-  d.page.current = 1
-  handleParams()
-}
-
-const handleParams = ()=> {
-  let q = ''
-  for (let k in d.searchParams) {
-    let val = d.searchParams[k as keyof typeof d.searchParams]
-    if (val != '') {
-      q += `&${k}=${val}`
-    }
-  }
-  location.href = '/filmClassifySearch?'+q.slice(1)+`&current=${d.page.current}`
-}
-
 // 页面所需数据
 const d = reactive({
   title: {},
@@ -87,6 +67,7 @@ const d = reactive({
   },
 
 })
+
 // 获取路由参数查询对应数据
 const router = useRouter()
 
@@ -95,7 +76,26 @@ const changeCurrent = (currentVal: number) => {
   handleParams()
 }
 
+// 分类tag点击事件
+const handleTag = (k:string,v:string)=>{
+  // 设置被点击的tag属性值
+  d.searchParams[k as keyof typeof d.searchParams] = v
+  // searchTag改变, 重置 current当前页码
+  d.page.current = 1
+  handleParams()
+}
+const handleParams = ()=> {
+  let q = ''
+  for (let k in d.searchParams) {
+    let val = d.searchParams[k as keyof typeof d.searchParams]
+    if (val != '') {
+      q += `&${k}=${val}`
+    }
+  }
+  location.href = '/filmClassifySearch?'+q.slice(1)+`&current=${d.page.current}`
+}
 
+// 请求数据
 const getFilmData = () => {
   let query = router.currentRoute.value.query
   ApiGet(`/filmClassifySearch`, {...query}).then((resp: any) => {
@@ -115,6 +115,8 @@ onMounted(() => {
   getFilmData()
 })
 
+
+
 </script>
 
 
diff --git a/client/src/views/index/FilmDetails.vue b/client/src/views/index/FilmDetails.vue
index 88dac38..6ef302a 100644
--- a/client/src/views/index/FilmDetails.vue
+++ b/client/src/views/index/FilmDetails.vue
@@ -1,89 +1,97 @@
 <template>
-    <div class="film" v-show="data.loading">
-        <!-- hidden-sm-and-up 移动端title   -->
-        <div class="hidden-sm-and-up">
-            <div class="title_mt  ">
-                <a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
-                <div class="title_mt_right">
-                    <h3>{{ data.detail.name }}</h3>
-                    <ul class="tags">
-                        <li style="margin: 2px 0">{{
-                            data.detail.descriptor.classTag ? `${data.detail.descriptor.classTag}`.replaceAll(",", " | ") : '未知'
-                            }}
-                        </li>
-                    </ul>
-                    <p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
-                    <p><span>主演:</span> {{ handleLongText(data.detail.descriptor.actor) }}</p>
-                    <p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
-                    <p><span>地区:</span> {{ data.detail.descriptor.area }}</p>
-                    <p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</p>
-                    <!--<p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>-->
-                </div>
-            </div>
-            <div class="mt_content">
-                <p v-html="`${data.detail.descriptor.content}`.replaceAll('　　', '')"></p>
-            </div>
-        </div>
-        <!-- pc端title-->
-        <div class="title hidden-sm-and-down ">
-            <a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
-            <h2>{{ data.detail.name }}</h2>
-            <ul class="tags">
-                <li class="t_c">
-                    <a :href="`/categoryFilm?pid=${data.detail.pid}`">
-                        <el-icon>
-                            <Promotion/>
-                        </el-icon>
-                        {{ data.detail.descriptor.cName }}
-                    </a>
-                </li>
-                <li v-if="data.detail.descriptor.classTag">
-                    {{ `${data.detail.descriptor.classTag}`.replaceAll(",", "&emsp;") }}
-                </li>
-                <li>{{ data.detail.descriptor.year }}</li>
-                <li>{{ data.detail.descriptor.area }}</li>
-            </ul>
-            <p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
-            <p><span>主演:</span> {{ data.detail.descriptor.actor }}</p>
-            <p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
-            <p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</p>
-            <p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>
-            <div class="cus_wap">
-                <p style="min-width: 40px"><span>剧情:</span></p>
-                <p ref="textContent" class="text_content">
-                    <el-button v-if="`${data.detail.descriptor.content}`.length > 140" class="multi_text"
-                               style="color:#a574b7;"
-                               @click="showContent(multiBtn.state)" link>{{ multiBtn.text }}
-                    </el-button>
-                    <span class="cus_info" v-html="data.detail.descriptor.content"></span>
-                </p>
-            </div>
-            <p>
-                <el-button type="warning" class="player" size="large" @click="play({episode:0,source:0})" round>
-                    <el-icon>
-                        <CaretRight/>
-                    </el-icon>
-                    立即播放
-                </el-button>
-            </p>
-        </div>
-        <!--播放列表-->
-        <div class="play_list">
-            <h2 class="hidden-md-and-down">播放列表:(右侧切换播放源)</h2>
-            <el-tabs type="card" class="play_tabs">
-                <el-tab-pane v-for="(p,i) in data.detail.playList" :label="`播放地址${i+1}`">
-                    <div class="play_content">
-                        <a v-for="(item,index) in p" href="javascript:;"
-                           @click="play({source: i, episode: index})">{{ item.episode }}</a>
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-        <!--相关系列影片-->
-        <div class="correlation">
-            <RelateList :relate-list="data.relate"/>
+  <div class="film" v-show="data.loading">
+    <!-- hidden-sm-and-up 移动端title   -->
+    <div class="hidden-sm-and-up">
+      <div class="title_mt  ">
+        <a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
+        <div class="title_mt_right">
+          <h3>{{ data.detail.name }}</h3>
+          <ul class="tags">
+            <li style="margin: 2px 0">{{
+                data.detail.descriptor.classTag ? `${data.detail.descriptor.classTag}`.replaceAll(",", " | ") : '未知'
+              }}
+            </li>
+          </ul>
+          <p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
+          <p><span>主演:</span> {{ handleLongText(data.detail.descriptor.actor) }}</p>
+          <p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
+          <p><span>地区:</span> {{ data.detail.descriptor.area }}</p>
+          <p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</p>
+          <!--<p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>-->
         </div>
+      </div>
+      <div class="mt_content">
+        <p v-html="`${data.detail.descriptor.content}`.replaceAll('　　', '')"></p>
+      </div>
     </div>
+    <!-- pc端title-->
+    <div class="title hidden-sm-and-down ">
+      <a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
+      <h2>{{ data.detail.name }}</h2>
+      <ul class="tags">
+        <li class="t_c">
+          <a :href="`/categoryFilm?pid=${data.detail.pid}`">
+            <el-icon>
+              <Promotion/>
+            </el-icon>
+            {{ data.detail.descriptor.cName }}
+          </a>
+        </li>
+        <li v-if="data.detail.descriptor.classTag">
+          {{ `${data.detail.descriptor.classTag}`.replaceAll(",", "&emsp;") }}
+        </li>
+        <li>{{ data.detail.descriptor.year }}</li>
+        <li>{{ data.detail.descriptor.area }}</li>
+      </ul>
+      <p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
+      <p><span>主演:</span> {{ data.detail.descriptor.actor }}</p>
+      <p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
+      <p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</p>
+      <p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>
+      <div class="cus_wap">
+        <p style="min-width: 40px"><span>剧情:</span></p>
+        <p ref="textContent" class="text_content">
+          <el-button v-if="`${data.detail.descriptor.content}`.length > 140" class="multi_text"
+                     style="color:#a574b7;"
+                     @click="showContent(multiBtn.state)" link>{{ multiBtn.text }}
+          </el-button>
+          <span class="cus_info" v-html="data.detail.descriptor.content"></span>
+        </p>
+      </div>
+      <p>
+        <el-button type="warning" class="player" size="large" @click="play({episode:0,source:0})" round>
+          <el-icon>
+            <CaretRight/>
+          </el-icon>
+          立即播放
+        </el-button>
+      </p>
+    </div>
+    <!--播放列表-->
+    <div class="play-module">
+      <div class="play-module-item" >
+        <div class="module-heading">
+          <p class=" play-module-title">播放列表</p>
+          <div class="play-tab-group">
+            <a  href="javascript:;"  :class="`play-tab-item ${data.currentTabIndex ==i ? 'tab-active':''}`"
+                v-for="(item,i) in data.detail.playList" @click="changeTab(i)" >{{`播放地址${i+1}`}}</a>
+          </div>
+        </div>
+        <div class="play-list">
+          <div class="play-list-item" v-show="data.currentTabIndex == i" v-for="(l,i) in data.detail.playList">
+            <a class="play-link" v-for="(item,index) in l" href="javascript:;"
+               @click="play({source: i, episode: index})">{{ item.episode }}</a>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!--相关系列影片-->
+    <div class="correlation">
+      <RelateList :relate-list="data.relate"/>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -93,384 +101,300 @@ import {ApiGet} from "../../utils/request";
 import {ElMessage, ElLoading} from 'element-plus'
 import {Promotion, CaretRight} from "@element-plus/icons-vue";
 import RelateList from "../../components/RelateList.vue";
-
 // 获取路由对象
 const router = useRouter()
-
 const data = reactive({
-    detail: {
-        id: '',
-        cid: '',
-        pid: '',
-        name: '',
-        picture: '',
-        playFrom: [],
-        DownFrom: '',
-        playList: [[]],
-        downloadList: '',
-        descriptor: {
-            subTitle: '',
-            cName: '',
-            enName: '',
-            initial: '',
-            classTag: '',
-            actor: '',
-            director: '',
-            writer: '',
-            blurb: '',
-            remarks: '',
-            releaseDate: '',
-            area: '',
-            language: '',
-            year: '',
-            state: '',
-            updateTime: '',
-            addTime: '',
-            dbId: '',
-            dbScore: '',
-            hits: '',
-            content: '',
-        }
-    },
-    relate: [],
-    loading: false,
+  detail: {
+    id: '',
+    cid: '',
+    pid: '',
+    name: '',
+    picture: '',
+    playFrom: [],
+    DownFrom: '',
+    playList: [[]],
+    downloadList: '',
+    descriptor: {
+      subTitle: '',
+      cName: '',
+      enName: '',
+      initial: '',
+      classTag: '',
+      actor: '',
+      director: '',
+      writer: '',
+      blurb: '',
+      remarks: '',
+      releaseDate: '',
+      area: '',
+      language: '',
+      year: '',
+      state: '',
+      updateTime: '',
+      addTime: '',
+      dbId: '',
+      dbScore: '',
+      hits: '',
+      content: '',
+    }
+  },
+  relate: [],
+  loading: false,
+  currentTabIndex: 0,
 })
 
 // 对部分信息过长进行处理
 const handleLongText = (t: string): string => {
-    let res = ''
-    t.split(',').forEach((s, i) => {
-        console.log(s)
-        if (i < 3) {
-            res += `${s} `
-        }
-    })
-    return res.trimEnd()
+  let res = ''
+  t.split(',').forEach((s, i) => {
+    console.log(s)
+    if (i < 3) {
+      res += `${s} `
+    }
+  })
+  return res.trimEnd()
 }
 
 onBeforeMount(() => {
-    let link = router.currentRoute.value.query.link
-    ApiGet('/filmDetail', {id: link}).then((resp: any) => {
-        if (resp.status === "ok") {
-            data.detail = resp.data.detail
-            // 去除影视简介中的无用内容和特殊标签格式等
-            data.detail.name = data.detail.name.replace(/(～.*～)/g, '')
-            data.detail.descriptor.content = data.detail.descriptor.content.replace(/(&.*;)|( )|(　　)|(\n)|(<[^>]+>)/g, '')
-            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 {
-            ElMessage({
-                type: "error",
-                dangerouslyUseHTMLString: true,
-                message: resp.message,
-            })
-        }
-    })
+  let link = router.currentRoute.value.query.link
+  ApiGet('/filmDetail', {id: link}).then((resp: any) => {
+    if (resp.status === "ok") {
+      data.detail = resp.data.detail
+      // 去除影视简介中的无用内容和特殊标签格式等
+      data.detail.name = data.detail.name.replace(/(～.*～)/g, '')
+      data.detail.descriptor.content = data.detail.descriptor.content.replace(/(&.*;)|( )|(　　)|(\n)|(<[^>]+>)/g, '')
+      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 {
+      ElMessage({
+        type: "error",
+        dangerouslyUseHTMLString: true,
+        message: resp.message,
+      })
+    }
+  })
 
 })
 
+// 播放源切换
+const changeTab = (index:number)=>{
+  data.currentTabIndex = index
+}
+
 // 选集播放点击事件
 const play = (change: { source: number, episode: number }) => {
-    router.push({path: `/play`, query: {id: `${router.currentRoute.value.query.link}`, ...change}})
+  router.push({path: `/play`, query: {id: `${router.currentRoute.value.query.link}`, ...change}})
 }
 
 // 内容展开收起效果
 const multiBtn = ref({state: false, text: '展开'})
 const textContent = ref()
 const showContent = (flag: boolean) => {
-    if (flag) {
-        multiBtn.value = {state: !flag, text: '展开'}
-        textContent.value.style.webkitLineClamp = 2
-        return
-    }
-    multiBtn.value = {state: !flag, text: '收起'}
-    textContent.value.style.webkitLineClamp = 8
+  if (flag) {
+    multiBtn.value = {state: !flag, text: '展开'}
+    textContent.value.style.webkitLineClamp = 2
+    return
+  }
+  multiBtn.value = {state: !flag, text: '收起'}
+  textContent.value.style.webkitLineClamp = 8
 }
-
 </script>
 
+
+
 <!--移动端适配-->
 <style scoped>
 @media (max-width: 650px) {
-    .title_mt {
-        padding: 0 3px;
-        display: flex;
-        flex-direction: row;
-        flex-flow: nowrap;
-        overflow: hidden;
-    }
+  .title_mt {
+    padding: 0 3px;
+    display: flex;
+    flex-direction: row;
+    flex-flow: nowrap;
+    overflow: hidden;
+  }
 
-    .picture_mt {
-        width: 100%;
-        height: 180px;
-        margin-right: 12px;
-        border-radius: 8px;
-        background-size: cover;
-        flex: 1;
-    }
+  .picture_mt {
+    width: 100%;
+    height: 180px;
+    margin-right: 12px;
+    border-radius: 8px;
+    background-size: cover;
+    flex: 1;
+  }
 
-    .title_mt_right {
-        flex: 1.5;
-        text-align: left;
-    }
+  .title_mt_right {
+    flex: 1.5;
+    text-align: left;
+  }
 
-    .title_mt_right h3 {
-        font-size: 14px;
-        margin: 0 0 5px 0;
-    }
+  .title_mt_right h3 {
+    font-size: 14px;
+    margin: 0 0 5px 0;
+  }
 
-    .title_mt_right p {
-        font-size: 12px;
-        margin: 3px 2px;
-        white-space: nowrap;
-    }
+  .title_mt_right p {
+    font-size: 12px;
+    margin: 3px 2px;
+    white-space: nowrap;
+  }
 
-    .mt_content {
-        margin-top: 5px;
-        border-top: 1px solid #777777;
-        border-bottom: 1px solid #777777;
-        width: 100%;
-        padding: 5px;
-    }
+  .mt_content {
+    margin-top: 5px;
+    border-top: 1px solid #777777;
+    border-bottom: 1px solid #777777;
+    width: 100%;
+    padding: 5px;
+  }
 
-    .mt_content p {
-        max-width: 96%;
-        margin: 0 auto;
-        font-size: 12px;
-        text-align: left;
-        word-wrap: break-word;
-    }
+  .mt_content p {
+    max-width: 96%;
+    margin: 0 auto;
+    font-size: 12px;
+    text-align: left;
+    word-wrap: break-word;
+  }
 
-    .play_content a {
-        white-space: nowrap;
-        color: #ffffff;
-        border-radius: 6px;
-        margin: 6px 8px;
-        background: #888888;
-        min-width: calc(25% - 16px);
-        font-size: 12px;
-        padding: 6px 12px !important;
-    }
-
-    :deep(.el-tabs__item) {
-        width: 70px;
-        height: 35px !important;
-        margin: 17px 5px 0 0 !important;
-        font-size: 13px;
-    }
+  .play_content a {
+    white-space: nowrap;
+    color: #ffffff;
+    border-radius: 6px;
+    margin: 6px 8px;
+    background: #888888;
+    min-width: calc(25% - 16px);
+    font-size: 12px;
+    padding: 6px 12px !important;
+  }
 }
 </style>
 
 <style scoped>
+@import "/src/assets/css/film.css";
+
 .correlation {
-    width: 100%;
+  width: 100%;
 }
 
 .film {
-    width: 100%;
-    padding: 0 1%;
+  width: 100%;
+  padding: 0 1%;
 }
-
 /*影片播放列表信息展示*/
-.play_list {
-    width: 100%;
-    border-radius: 10px;
-    background: #2e2e2e;
-    margin-top: 50px;
-    position: relative;
-}
-
-.play_content {
-    display: flex;
-    flex-flow: row wrap;
-    padding: 20px 10px 20px 18px;
-
-}
-
-.play_list > h2 {
-    position: absolute;
-    left: 10px;
-    top: -10px;
-    z-index: 50;
-}
-
-@media (min-width: 650px) {
-    .play_content a {
-        white-space: nowrap;
-        font-size: 12px;
-        min-width: calc(10% - 24px);
-        padding: 6px 15px;
-        color: #ffffff;
-        border-radius: 6px;
-        margin: 8px 12px;
-        background: #888888;
-    }
-
-}
-
-
-.play_active {
-    color: orange !important;
-    background: #424242 !important;
-}
-
-.play_content .play_tabs {
-    background: #2e2e2e;
-}
-
-:deep(.el-tabs__nav-scroll) {
-    display: flex;
-    justify-content: end;
-}
-
-:deep(.el-tabs__header) {
-    /*border-bottom: 1px solid #888888!important;*/
-    margin-bottom: 0;
-    border-bottom: none !important;
-    background: rgb(34, 34, 34);
-    height: 50px !important;
-}
-
-:deep(.el-tabs__nav) {
-    border: none !important;
-}
-
-:deep(.el-tabs__item.is-active) {
-    color: #ee9600;
-}
-
-:deep(.el-tabs__item:hover) {
-    color: orange;
-    background: #484646;
-}
-
-:deep(.el-tabs__item) {
-    height: 50px;
-    line-height: 50px;
-    margin-left: 2px;
-    border-radius: 8px 8px 0 0;
-    border: none !important;
-    color: #ffffff;
-    background: #2e2e2e;
-}
-
 
 /*顶部影片信息显示区域*/
 
 .title {
-    width: 100%;
-    border-radius: 10px;
-    background: #2e2e2e;
-    padding: 5px 30px 30px 30px;
-    position: relative;
+  width: 100%;
+  border-radius: 10px;
+  background: #2e2e2e;
+  padding: 5px 30px 30px 30px;
+  position: relative;
 }
 
 .title > h2 {
-    text-align: left;
-    color: #888888;
+  text-align: left;
+  color: #888888;
 }
 
 .picture {
-    position: absolute;
-    width: 190px;
-    height: 270px;
-    right: 30px;
-    top: 30px;
-    border-radius: 8px;
-    background-size: cover;
+  position: absolute;
+  width: 190px;
+  height: 270px;
+  right: 30px;
+  top: 30px;
+  border-radius: 8px;
+  background-size: cover;
 
 }
 
 
 .tags {
-    list-style-type: none;
-    display: flex;
-    justify-content: left;
-    margin: 0;
-    padding: 0;
+  list-style-type: none;
+  display: flex;
+  justify-content: left;
+  margin: 0;
+  padding: 0;
 }
 
 .tags > li {
-    padding: 6px 10px;
-    border-radius: 5px;
-    background: rgba(66, 66, 66);
-    margin: 0 8px;
-    font-size: 12px;
-    color: #888888;
+  padding: 6px 10px;
+  border-radius: 5px;
+  background: rgba(66, 66, 66);
+  margin: 0 8px;
+  font-size: 12px;
+  color: #888888;
 }
 
 .tags > .t_c {
-    background: rgba(155, 73, 231, 0.72);
-    margin-left: 0;
+  background: rgba(155, 73, 231, 0.72);
+  margin-left: 0;
 }
 
 .t_c a {
-    color: #c4c2c2;
+  color: #c4c2c2;
 }
 
 .title p {
-    text-align: left;
-    font-size: 14px;
-    margin: 20px 0;
-    max-width: 60%;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  text-align: left;
+  font-size: 14px;
+  margin: 20px 0;
+  max-width: 60%;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .title p span {
-    font-size: 15px;
-    font-weight: bold;
-    color: #888888;
-    margin-right: 5px;
+  font-size: 15px;
+  font-weight: bold;
+  color: #888888;
+  margin-right: 5px;
 }
 
 #score {
-    color: #1cbeb9;
+  color: #1cbeb9;
 }
 
 .cus_wap {
-    display: flex;
+  display: flex;
 }
 
 .title .text_content {
-    max-width: 70%;
-    margin: 20px 3px;
-    line-height: 22.5px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    vertical-align: top;
-    /*margin-top: 5px;*/
+  max-width: 70%;
+  margin: 20px 3px;
+  line-height: 22.5px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  vertical-align: top;
+  /*margin-top: 5px;*/
 
 }
 
 .text_content::before {
-    content: '';
-    float: right;
-    width: 0; /*设置为0，或者不设置宽度*/
-    height: calc(100% - 20px); /*先随便设置一个高度*/
+  content: '';
+  float: right;
+  width: 0; /*设置为0，或者不设置宽度*/
+  height: calc(100% - 20px); /*先随便设置一个高度*/
 }
 
 .text_content .cus_info {
-    height: 100%;
-    margin: 0;
-    font-size: 15px !important;
-    font-weight: normal;
+  height: 100%;
+  margin: 0;
+  font-size: 15px !important;
+  font-weight: normal;
 
 }
 
-
 .multi_text {
-    float: right;
-    clear: both;
-    margin-right: 10px;
+  float: right;
+  clear: both;
+  margin-right: 10px;
 }
 
 </style>
\ No newline at end of file
diff --git a/client/src/views/index/Play.vue b/client/src/views/index/Play.vue
index 6347de5..fb30931 100644
--- a/client/src/views/index/Play.vue
+++ b/client/src/views/index/Play.vue
@@ -1,57 +1,60 @@
 <template>
-    <div class="player_area" v-show="data.loading">
-        <div class="player_p">
-            <!--preload-->
+  <div class="player_area" v-show="data.loading">
+    <div class="player_p">
+      <!--preload-->
 
-            <video-player @mounted="handleBtn" :src="data.options.src" :poster="posterImg" controls
-                          :loop="false"
-                          @keydown="handlePlay"
-                          :bufferedPercent="30"
-                          :volume="data.options.volume"
-                          crossorigin="anonymous" playsinline class="video-player"
-                          :playback-rates="[0.5, 1.0, 1.5, 2.0]"/>
-        </div>
-        <div class="current_play_info">
-            <div class="play_info_left">
-                <h3 class="current_play_title"><a :href="`/filmDetail?link=${data.detail.id}`">{{data.detail.name}}</a>{{data.current.episode}}</h3>
-                <div class="tags">
-                    <b>
-                        <el-icon>
-                            <Promotion/>
-                        </el-icon>
-                        {{ data.detail.descriptor.cName }}</b>
-                    <span>{{ data.detail.descriptor.classTag?data.detail.descriptor.classTag:'未知' }}</span>
-                    <span>{{ data.detail.descriptor.year }}</span>
-                    <span>{{ data.detail.descriptor.area }}</span>
-                </div>
-            </div>
-
-        </div>
-        <!-- 播放选集   -->
-        <div class="play_list">
-            <h2 class="hidden-md-and-down">播放列表:(右侧切换播放源)</h2>
-            <el-tabs type="card" v-model="data.currentTabName" class="plya_tabs">
-                <el-tab-pane v-for="(p,i) in data.detail.playList"
-                             :name="`tab-${i}`"
-                             :label="`播放列表${i+1}`">
-                    <div class="play_content">
-                        <a v-for="(item,index) in p" href="javascript:void(false)"
-                           @click="playChange({sourceIndex: i, episodeIndex: index, target: this})"
-                           :class="item.link == data.current.link?'play_active':''">{{ item.episode }}</a>
-
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-        <div class="correlation">
-            <RelateList :relateList="data.relate"/>
-        </div>
+      <video-player @mounted="handleBtn" :src="data.options.src" :poster="posterImg" controls
+                    :loop="false"
+                    @keydown="handlePlay"
+                    :bufferedPercent="30"
+                    :volume="data.options.volume"
+                    crossorigin="anonymous" playsinline class="video-player"
+                    :playback-rates="[0.5, 1.0, 1.5, 2.0]"/>
     </div>
+    <div class="current_play_info">
+      <div class="play_info_left">
+        <h3 class="current_play_title"><a
+            :href="`/filmDetail?link=${data.detail.id}`">{{ data.detail.name }}</a>{{ data.current.episode }}</h3>
+        <div class="tags">
+          <b>
+            <el-icon>
+              <Promotion/>
+            </el-icon>
+            {{ data.detail.descriptor.cName }}</b>
+          <span>{{ data.detail.descriptor.classTag ? data.detail.descriptor.classTag : '未知' }}</span>
+          <span>{{ data.detail.descriptor.year }}</span>
+          <span>{{ data.detail.descriptor.area }}</span>
+        </div>
+      </div>
+
+    </div>
+    <!-- 播放选集   -->
+    <div class="play-module">
+      <div class="play-module-item">
+        <div class="module-heading">
+          <p class=" play-module-title">播放列表</p>
+          <div class="play-tab-group">
+            <a href="javascript:;" :class="`play-tab-item ${data.currentTabIndex ==i ? 'tab-active':''}`"
+               v-for="(item,i) in data.detail.playList" @click="changeTab(i)">{{ `播放地址${i + 1}` }}</a>
+          </div>
+        </div>
+        <div class="play-list">
+          <div class="play-list-item" v-show="data.currentTabIndex == i" v-for="(l,i) in data.detail.playList">
+            <a :class="`play-link ${item.link == data.current.link?'play-link-active':''}`" v-for="(item,index) in l" href="javascript:;"
+               @click="playChange({sourceIndex: i, episodeIndex: index, target: this})">{{ item.episode }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--相关推荐-->
+    <div class="correlation">
+      <RelateList :relateList="data.relate"/>
+    </div>
+  </div>
 
 </template>
 
 <script lang="ts" setup>
-
 import {onBeforeMount, onMounted, reactive, ref, withDirectives} from "vue";
 import {useRouter} from "vue-router";
 import {ApiGet} from "../../utils/request";
@@ -63,265 +66,276 @@ import posterImg from '../../assets/image/play.png'
 import {VideoPlayer} from '@videojs-player/vue'
 import 'video.js/dist/video-js.css'
 
-const handlePlay = (e: any) => {
-    e.preventDefault()
-    switch (e.keyCode) {
-        case 32:
-            console.log(e.target.paused)
-            if (e.target.paused) {
-                e.target.play()
-            } else {
-                e.target.pause()
-            }
-            break
-        case 37:
-            e.target.currentTime = e.target.currentTime - 5 < 0 ? 0 : e.target.currentTime - 5
-            break
-        case 39:
-            e.target.currentTime = e.target.currentTime + 5 > e.target.duration ? e.target.duration : e.target.currentTime + 5
-            break
-        case 38:
-            data.options.volume = data.options.volume + 0.05 > 1 ? 1 : data.options.volume + 0.05
-            break
-        case 40:
-            data.options.volume = data.options.volume - 0.05 < 0 ? 0 : data.options.volume - 0.05
-            break
-    }
 
-}
-// 主动触发快捷键
-const tiggerKeyMap = (keyCode: number) => {
-    let player = document.getElementsByTagName("video")[0]
-    player.focus()
-    const event = document.createEvent('HTMLEvents');
-    event.initEvent('keydown', true, false);
-    event.keyCode = keyCode; // 设置键码
-    player.dispatchEvent(event)
-}
-const handleBtn = (e: any) => {
-    let btns = document.getElementsByClassName('vjs-button')
-    for (let el of btns) {
-        el.addEventListener('keydown', function (t: any) {
-            t.preventDefault()
-            tiggerKeyMap(t.keyCode)
-        })
 
-    }
+// 播放源切换事件
+const changeTab = (index:number)=>{
+  data.currentTabIndex = index
 }
 
-
 // 播放页所需数据
 const data = reactive({
-    loading: false,
-    detail: {
-        id: '',
-        cid: '',
-        pid: '',
-        name: '',
-        picture: '',
-        playFrom: [],
-        DownFrom: '',
-        playList: [[]],
-        downloadList: '',
-        descriptor: {
-            subTitle: '',
-            cName: '',
-            enName: '',
-            initial: '',
-            classTag: '',
-            actor: '',
-            director: '',
-            writer: '',
-            blurb: '',
-            remarks: '',
-            releaseDate: '',
-            area: '',
-            language: '',
-            year: '',
-            state: '',
-            updateTime: '',
-            addTime: '',
-            dbId: '',
-            dbScore: '',
-            hits: '',
-            content: '',
-        }
-    },
-    current: {index: 0, episode: '', link: ''},
-    currentTabName: '',
-    currentPlayFrom: 0,
-    currentEpisode: 0,
-    relate: [],
-// @videojs-player 播放属性设置
-    options: {
-        title: "", //视频名称
-        src: "", //视频源
-        volume: 0.6, // 音量
-        currentTime: 0,
+  loading: false,
+  detail: {
+    id: '',
+    cid: '',
+    pid: '',
+    name: '',
+    picture: '',
+    playFrom: [],
+    DownFrom: '',
+    playList: [[]],
+    downloadList: '',
+    descriptor: {
+      subTitle: '',
+      cName: '',
+      enName: '',
+      initial: '',
+      classTag: '',
+      actor: '',
+      director: '',
+      writer: '',
+      blurb: '',
+      remarks: '',
+      releaseDate: '',
+      area: '',
+      language: '',
+      year: '',
+      state: '',
+      updateTime: '',
+      addTime: '',
+      dbId: '',
+      dbScore: '',
+      hits: '',
+      content: '',
     }
-
+  },
+  current: {index: 0, episode: '', link: ''},
+  currentTabName: '',
+  currentPlayFrom: 0,
+  currentEpisode: 0,
+  relate: [],
+  currentTabIndex:0,
+// @videojs-player 播放属性设置
+  options: {
+    title: "", //视频名称
+    src: "", //视频源
+    volume: 0.6, // 音量
+    currentTime: 0,
+  }
 })
 
 // 获取路由信息
 const router = useRouter()
 onBeforeMount(() => {
-    let query = router.currentRoute.value.query
-    ApiGet(`/filmPlayInfo`, {id: query.id, playFrom: query.source, episode: query.episode}).then((resp: any) => {
-        if (resp.status === 'ok') {
-            data.detail = resp.data.detail
-            data.current = {index: resp.data.currentEpisode, ...resp.data.current}
-            data.currentPlayFrom = resp.data.currentPlayFrom
-            data.currentEpisode = resp.data.currentEpisode
-            data.relate = resp.data.relate
-            // 设置当前选中的播放源
-            data.currentTabName = `tab-${query.source}`
-            // 设置当前的视频播放url
-            data.options.src = data.current.link
-            data.loading = true
-        } else {
-            ElMessage.error("影片信息加载失败,请尝试刷新页面!!!")
-        }
-    })
+  let query = router.currentRoute.value.query
+  ApiGet(`/filmPlayInfo`, {id: query.id, playFrom: query.source, episode: query.episode}).then((resp: any) => {
+    if (resp.status === 'ok') {
+      data.detail = resp.data.detail
+      data.current = {index: resp.data.currentEpisode, ...resp.data.current}
+      data.currentPlayFrom = resp.data.currentPlayFrom
+      data.currentEpisode = resp.data.currentEpisode
+      data.relate = resp.data.relate
+      // 设置当前选中的播放源
+      data.currentTabName = `tab-${query.source}`
+      // 设置当前的视频播放url
+      data.options.src = data.current.link
+      data.loading = true
+    } else {
+      ElMessage.error("影片信息加载失败,请尝试刷新页面!!!")
+    }
+  })
 })
 
 // 点击播集数播放对应影片
 const playChange = (play: { sourceIndex: number, episodeIndex: number, target: any }) => {
-    let currPlay = data.detail.playList[play.sourceIndex][play.episodeIndex]
-    data.current = {index: play.episodeIndex, episode: currPlay.episode, link: currPlay.link}
-    data.options.src = currPlay.link
-    data.options.title = data.detail.name + "  " + currPlay.episode
+  let currPlay = data.detail.playList[play.sourceIndex][play.episodeIndex]
+  data.current = {index: play.episodeIndex, episode: currPlay.episode, link: currPlay.link}
+  data.options.src = currPlay.link
+  data.options.title = data.detail.name + "  " + currPlay.episode
 }
 
+// player相关事件
+const handlePlay = (e: any) => {
+  e.preventDefault()
+  switch (e.keyCode) {
+    case 32:
+      console.log(e.target.paused)
+      if (e.target.paused) {
+        e.target.play()
+      } else {
+        e.target.pause()
+      }
+      break
+    case 37:
+      e.target.currentTime = e.target.currentTime - 5 < 0 ? 0 : e.target.currentTime - 5
+      break
+    case 39:
+      e.target.currentTime = e.target.currentTime + 5 > e.target.duration ? e.target.duration : e.target.currentTime + 5
+      break
+    case 38:
+      data.options.volume = data.options.volume + 0.05 > 1 ? 1 : data.options.volume + 0.05
+      break
+    case 40:
+      data.options.volume = data.options.volume - 0.05 < 0 ? 0 : data.options.volume - 0.05
+      break
+  }
+}
+// 主动触发快捷键
+const tiggerKeyMap = (keyCode: number) => {
+  let player = document.getElementsByTagName("video")[0]
+  player.focus()
+  const event = document.createEvent('HTMLEvents');
+  event.initEvent('keydown', true, false);
+  event.keyCode = keyCode; // 设置键码
+  player.dispatchEvent(event)
+}
+const handleBtn = (e: any) => {
+  let btns = document.getElementsByClassName('vjs-button')
+  for (let el of btns) {
+    el.addEventListener('keydown', function (t: any) {
+      t.preventDefault()
+      tiggerKeyMap(t.keyCode)
+    })
+
+  }
+}
 
 </script>
 
 <style scoped>
+@import "/src/assets/css/film.css";
 /*vue3-video-play 相关设置*/
 /*//播放器控件区域大小*/
 .video-player {
-    width: 100% !important;
-    height: 100% !important;
-    position: absolute;
-    border-radius: 6px;
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute;
+  border-radius: 6px;
 
 }
 
 :deep(.vjs-big-play-button) {
-    line-height: 2em;
-    height: 2em;
-    width: 2em;
-    border-radius: 50%;
-    border: none;
-    background: rgba(0, 0, 0, 0.65);
+  line-height: 2em;
+  height: 2em;
+  width: 2em;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.65);
 }
 
 :deep(.vjs-control-bar) {
-    background: rgba(0, 0, 0, 0.32);
+  background: rgba(0, 0, 0, 0.32);
 }
 
 /*取消video被选中的白边*/
 :deep(video:focus) {
-    border: none !important;
-    outline: none;
+  border: none !important;
+  outline: none;
 }
 
 :deep(.data-vjs-player:focus) {
-    border: none !important;
-    outline: none;
+  border: none !important;
+  outline: none;
 }
 
 :deep(.vjs-tech) {
-    border-radius: 6px;
+  border-radius: 6px;
 }
 
 :deep(img) {
-    border-radius: 6px;
+  border-radius: 6px;
 }
+
 /*进度条配色*/
 :deep(.video-js .vjs-load-progress div) {
-    background: rgba(255,255,255,0.55)!important;
+  background: rgba(255, 255, 255, 0.55) !important;
 }
-:deep(.video-js .vjs-play-progress){
-    background: #44c8cf;
+
+:deep(.video-js .vjs-play-progress) {
+  background: #44c8cf;
 }
-:deep(.video-js .vjs-slider){
-background-color: hsla(0,0%,100%,.2);
+
+:deep(.video-js .vjs-slider) {
+  background-color: hsla(0, 0%, 100%, .2);
 }
 
 
 /*当前播放的影片信息展示*/
 .current_play_info {
-    width: 100%;
-    padding: 15px 5px;
-    text-align: left;
+  width: 100%;
+  padding: 15px 5px;
+  text-align: left;
 }
 
 .current_play_title {
-    font-weight: 600;
-    color: rgb(201, 196, 196);
-    margin: 0 0 12px 0;
+  font-weight: 600;
+  color: rgb(201, 196, 196);
+  margin: 0 0 12px 0;
 }
+
 .current_play_title a {
-    color: rgb(201, 196, 196);
-    font-weight: 600;
-    margin-right: 16px;
+  color: rgb(201, 196, 196);
+  font-weight: 600;
+  margin-right: 16px;
 }
+
 .current_play_title a:hover {
-    color: orange;
+  color: orange;
 }
 
 
 /* 播放区域*/
 .player_area {
-    width: 100%;
-    min-height: 100%;
+  width: 100%;
+  min-height: 100%;
 }
 
 
 @media (min-width: 650px) {
-    .player_area {
-        padding: 10px 6%;
-    }
+  .player_area {
+    padding: 10px 6%;
+  }
 
-    .tags b {
-        padding: 5px 10px;
-        background-color: rgba(155, 73, 231, 0.72);
-        font-size: 13px;
-        border-radius: 6px;
-        margin-right: 15px;
-    }
+  .tags b {
+    padding: 5px 10px;
+    background-color: rgba(155, 73, 231, 0.72);
+    font-size: 13px;
+    border-radius: 6px;
+    margin-right: 15px;
+  }
 
-    .tags span {
-        padding: 6px 12px;
-        background-color: #404042;
-        color: #b5b2b2;
-        border-radius: 5px;
-        margin: 0 8px;
-        font-size: 12px;
-    }
+  .tags span {
+    padding: 6px 12px;
+    background-color: #404042;
+    color: #b5b2b2;
+    border-radius: 5px;
+    margin: 0 8px;
+    font-size: 12px;
+  }
 
-    .play_content a {
-        white-space: nowrap;
-        font-size: 12px;
-        min-width: calc(10% - 24px);
-        padding: 6px 10px;
-        color: #ffffff;
-        border-radius: 6px;
-        margin: 8px 12px;
-        background: #888888;
-    }
+  .play_content a {
+    white-space: nowrap;
+    font-size: 12px;
+    min-width: calc(10% - 24px);
+    padding: 6px 10px;
+    color: #ffffff;
+    border-radius: 6px;
+    margin: 8px 12px;
+    background: #888888;
+  }
 
 }
 
 
 .player_p {
-    width: 100%;
-    /*height: 700px;*/
-    margin: 0;
-    padding-bottom: 56.25% !important;
-    position: relative;
-    border-radius: 6px;
-    display: flex;
+  width: 100%;
+  /*height: 700px;*/
+  margin: 0;
+  padding-bottom: 56.25% !important;
+  position: relative;
+  border-radius: 6px;
+  display: flex;
 }
 
 
@@ -329,77 +343,33 @@ background-color: hsla(0,0%,100%,.2);
 /*影片播放列表信息展示*/
 /*影片播放列表信息展示*/
 .play_list {
-    width: 100%;
-    border-radius: 10px;
-    background: #2e2e2e;
-    margin-top: 50px;
-    position: relative;
+  width: 100%;
+  border-radius: 10px;
+  background: #2e2e2e;
+  margin-top: 50px;
+  position: relative;
 }
 
 .play_content {
-    display: flex;
-    flex-flow: row wrap;
-    padding: 10px 10px 10px 10px;
+  display: flex;
+  flex-flow: row wrap;
+  padding: 10px 10px 10px 10px;
 
 }
 
 .play_list > h2 {
-    position: absolute;
-    left: 10px;
-    top: -10px;
-    z-index: 50;
+  position: absolute;
+  left: 10px;
+  top: -10px;
+  z-index: 50;
 }
 
 
-/*集数选中效果*/
-.play_active {
-    color: orange !important;
-    background: #424242 !important;
-}
 
-.play_content .play_tabs {
-    background: #2e2e2e;
-}
-
-:deep(.el-tabs__nav-scroll) {
-    display: flex;
-    justify-content: end;
-}
-
-:deep(.el-tabs__header) {
-    /*border-bottom: 1px solid #888888!important;*/
-    margin-bottom: 0;
-    border-bottom: none !important;
-    background: rgb(34, 34, 34);
-    height: 50px !important;
-}
-
-:deep(.el-tabs__nav) {
-    border: none !important;
-}
-
-:deep(.el-tabs__item.is-active) {
-    color: #ee9600;
-}
-
-:deep(.el-tabs__item:hover) {
-    color: orange;
-    background: #484646;
-}
-
-:deep(.el-tabs__item) {
-    height: 50px;
-    line-height: 50px;
-    margin-left: 2px;
-    border-radius: 8px 8px 0 0;
-    border: none !important;
-    color: #ffffff;
-    background: #2e2e2e;
-}
 
 /*推荐列表区域*/
 .correlation {
-    width: 100%;
+  width: 100%;
 }
 
 </style>
@@ -409,45 +379,45 @@ background-color: hsla(0,0%,100%,.2);
 
 /*适应小尺寸*/
 @media (max-width: 650px) {
-    .player_area {
-        padding: 5px 10px;
-    }
+  .player_area {
+    padding: 5px 10px;
+  }
 
-    .tags b {
-        padding: 5px 10px;
-        background-color: rgba(155, 73, 231, 0.72);
-        font-size: 13px;
-        border-radius: 6px;
-        margin-right: 3px;
-    }
+  .tags b {
+    padding: 5px 10px;
+    background-color: rgba(155, 73, 231, 0.72);
+    font-size: 13px;
+    border-radius: 6px;
+    margin-right: 3px;
+  }
 
 
-    .play_content a {
-        white-space: nowrap;
-        color: #ffffff;
-        border-radius: 6px;
-        margin: 6px 8px;
-        background: #888888;
-        min-width: calc(25% - 16px);
-        font-size: 12px;
-        padding: 6px 12px !important;
-    }
+  .play_content a {
+    white-space: nowrap;
+    color: #ffffff;
+    border-radius: 6px;
+    margin: 6px 8px;
+    background: #888888;
+    min-width: calc(25% - 16px);
+    font-size: 12px;
+    padding: 6px 12px !important;
+  }
 
-    .tags span {
-        padding: 6px 10px;
-        background-color: #404042;
-        color: #b5b2b2;
-        border-radius: 5px;
-        margin: 0 3px;
-        font-size: 12px;
-    }
+  .tags span {
+    padding: 6px 10px;
+    background-color: #404042;
+    color: #b5b2b2;
+    border-radius: 5px;
+    margin: 0 3px;
+    font-size: 12px;
+  }
 
-    :deep(.el-tabs__item) {
-        width: 70px;
-        height: 35px;
-        margin: 17px 5px 0 0 !important;
-        font-size: 13px;
-    }
+  :deep(.el-tabs__item) {
+    width: 70px;
+    height: 35px;
+    margin: 17px 5px 0 0 !important;
+    font-size: 13px;
+  }
 
 }
 </style>
\ No newline at end of file
diff --git a/client/src/views/index/PlayV1.vue b/client/src/views/index/PlayV1.vue
deleted file mode 100644
index a973c9c..0000000
--- a/client/src/views/index/PlayV1.vue
+++ /dev/null
@@ -1,357 +0,0 @@
-<template>
-
-    <div class="player_area">
-        <!--    视频播放区域-->
-        <div class="player_p">
-            <iframe ref="iframe" class="player" :src="data.current.link"
-                    :name="data.detail.name"
-                    marginheight="0"
-                    marginwidth="0"
-                    framespacing="0"
-                    vspale="0"
-                    allow="fullscreen"
-                    frameborder="0" scolling="no"
-                    sandbox="allow-scripts allow-same-origin allow-downloads">
-            </iframe>
-
-        </div>
-        <div class="current_play_info">
-            <div class="play_info_left">
-                <h3 class="current_play_title">{{ `${data.detail.name}&emsp;${data.current.episode}` }}</h3>
-                <div class="tags">
-                    <b>
-                        <el-icon>
-                            <Promotion/>
-                        </el-icon>
-                        {{ data.detail.descriptor.cName }}</b>
-                    <span>{{ data.detail.descriptor.classTag }}</span>
-                    <span>{{ data.detail.descriptor.year }}</span>
-                    <span>{{ data.detail.descriptor.area }}</span>
-                </div>
-            </div>
-
-        </div>
-        <!-- 播放选集   -->
-        <div class="play_list">
-            <h2 class="hidden-md-and-down">播放列表:(右侧切换播放源)</h2>
-            <el-tabs type="card" v-model="data.currentTabName" class="plya_tabs" @tab-change="changeSource">
-                <el-tab-pane v-for="(p,i) in data.detail.playList"
-                             :name="`tab-${i}`"
-                             :label="`播放地址${i+1}`">
-                    <div class="play_content">
-                        <a v-for="(item,index) in p" href="javascript:void(false)" @click="playChange(item)"
-                           :class="data.current.link.search(item.link) !== -1?'play_active':''">{{ item.episode }}</a>
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-        <div class="correlation">
-            <RelateList :relate-list="data.relate"/>
-        </div>
-    </div>
-
-</template>
-
-<script lang="ts" setup>
-
-import {onMounted, reactive, ref, withDirectives} from "vue";
-import {useRouter} from "vue-router";
-import {ApiGet} from "../../utils/request";
-import RelateList from "../../components/RelateList.vue";
-import {Promotion} from "@element-plus/icons-vue";
-
-// 播放页所需数据
-const data = reactive({
-    detail: {descriptor: {}, playList: [[{episode: '', link: ''}]]},
-    current: {episode: '', link: ''},
-    currentTabName: '',
-    currentPlayFrom: 0,
-    currentEpisode: 0,
-    relate: [],
-
-})
-
-// 获取路由信息
-const router = useRouter()
-onMounted(() => {
-    let query = router.currentRoute.value.query
-    ApiGet(`/filmPlayInfo`, {id: query.id, playFrom: query.source, episode: query.episode}).then((resp: any) => {
-        if (resp.status === 'ok') {
-            data.detail = resp.data.detail
-            resp.data.current.link = converLink(resp.data.current.link)
-            data.current = resp.data.current
-            data.currentPlayFrom = resp.data.currentPlayFrom
-            data.currentEpisode = resp.data.currentEpisode
-            data.relate = resp.data.relate
-            // 设置当前选中的播放源
-            data.currentTabName = `tab-${query.source}`
-        }
-    })
-})
-
-
-// ===============================视频播放处理=======================================
-// 视频解析接口地址, 默认使用第一个
-const resolver = [
-    // m3u8使用此解析
-    'https://jx.jsonplayer.com/player/?url=',
-    //   'https://jx.m3u8.tv/jiexi/?url=',
-
-
-    //   'https://jx.jsonplayer.com/player/?url=',
-    //   'https://vip.bljiex.com/?url=',
-    // 'https://jx.bozrc.com:4433/player/?url=',
-    // html视频使用此解析
-    'http://www.82190555.com/index/qqvod.php?url=',
-    // 'https://jx.bozrc.com:4433/player/?url=',
-    // 'https://vip.bljiex.com/?url=',
-
-    // Google上随便找的
-    'https://vip.bljiex.com/?url=',
-    'https://jx.kingtail.xyz/?url=',
-    'http://www.82190555.com/index/qqvod.php?url=',
-    'https://www.nxflv.com/?url=',
-    'http://www.wmxz.wang/video.php?url=',
-    'https://www.feisuplayer.com/m3u8/?url=',
-    // tampermonkey 脚本使用的解析
-    'https://jx.bozrc.com:4433/player/?url=',
-    'https://z1.m1907.top/?jx=',
-    'https://jx.aidouer.net/?url=',
-    'https://www.gai4.com/?url=',
-    'https://okjx.cc/?url=',
-    'https://jx.rdhk.net/?v=',
-    'https://jx.blbo.cc:4433/?url=',
-    'https://jsap.attakids.com/?url=',
-    'https://jx.dj6u.com/?url=',
-]
-
-// 添加视频解析前缀
-const converLink = (link: string): string => {
-    // 视频统一使用第三方解析
-    if (link.search("m3u8") != -1) {
-        return `${resolver[0] + link}`
-    }
-    // return `${resolver[1]+link}`
-    return `${link}`
-}
-
-// 点击播放对应影片
-const playChange = (info: { link: string, episode: string }) => {
-    // 判断是否是m3u8播放器, 如果是则添加前缀
-    data.current.link = converLink(info.link)
-    data.current.episode = info.episode
-}
-// 点击播放源标签事件
-const changeSource = (tabName: any) => {
-    data.currentTabName = tabName
-    data.detail.playList.find((item, index) => {
-        if (tabName.split("-")[1] - index == 0) {
-            item.find(i => {
-                if (i.episode == data.current.episode) {
-                    data.current.link = converLink(i.link)
-                }
-            })
-        }
-    })
-}
-
-// 测试滑动音量调节
-const iframe = ref()
-// document.querySelector('#brightnessSlider').addEventListener('change', function() {
-//     // 获取滑块的值
-//     var brightness = this.value;
-//
-//     // 设置亮度为滑块的值
-//     iframe.style.filter = 'brightness(' + brightness + '%)';
-// })
-
-</script>
-
-<style scoped>
-/*当前播放的影片信息展示*/
-.current_play_info {
-    width: 100%;
-    padding: 15px 5px;
-    text-align: left;
-}
-
-.current_play_title {
-    font-weight: 500;
-    color: rgb(201, 196, 196);
-    margin: 0 0 5px 0;
-}
-
-
-/* 播放区域*/
-.player_area {
-    width: 100%;
-    min-height: 100%;
-    /*height: 1400px;*/
-    /*background: red;*/
-
-}
-
-
-@media (min-width: 650px) {
-    .player_area {
-        padding: 10px 6%;
-    }
-
-    .tags b {
-        padding: 5px 10px;
-        background-color: rgba(155, 73, 231, 0.72);
-        font-size: 13px;
-        border-radius: 6px;
-        margin-right: 15px;
-    }
-
-    .tags span {
-        padding: 6px 12px;
-        background-color: #404042;
-        color: #b5b2b2;
-        border-radius: 5px;
-        margin: 0 8px;
-        font-size: 12px;
-    }
-
-}
-
-
-.player_p {
-    width: 100%;
-    min-height: 200px;
-    margin: 0;
-    padding-bottom: 56.25% !important;
-    /*padding-bottom: 42.25% !important;*/
-    position: relative;
-    background-image: url("/src/assets/image/play.png");
-    background-size: cover;
-    border-radius: 6px;
-}
-
-iframe {
-    border-radius: 6px;
-    left: 0;
-    width: 100%; /* 设置iframe元素的宽度为父容器的100% */
-    height: 100%; /* 设置iframe元素的高度为0，以便自适应高度 */
-    /*padding-bottom: 56.25%; !* 使用padding-bottom属性计算iframe元素的高度，这里假设视频的宽高比为16:9 *!*/
-    /*border: none; !* 去除iframe元素的边框 *!*/
-    /*transform: scale(1);*/
-    position: absolute;
-
-}
-
-/*右侧播放源选择区域*/
-/*影片播放列表信息展示*/
-/*影片播放列表信息展示*/
-.play_list {
-    width: 100%;
-    border-radius: 10px;
-    background: #2e2e2e;
-    margin-top: 50px;
-    position: relative;
-}
-
-.play_content {
-    display: flex;
-    flex-flow: row wrap;
-    padding: 10px 10px 10px 18px;
-
-}
-
-.play_list > h2 {
-    position: absolute;
-    left: 10px;
-    top: -10px;
-    z-index: 50;
-}
-
-.play_content a {
-    font-size: 12px;
-    min-width: 65px;
-    padding: 6px 15px;
-    color: #ffffff;
-    border-radius: 6px;
-    margin: 8px 8px;
-    background: #888888;
-}
-
-/*集数选中效果*/
-.play_active {
-    color: orange !important;
-    background: #424242 !important;
-}
-
-.play_content .play_tabs {
-    background: #2e2e2e;
-}
-
-:deep(.el-tabs__nav-scroll) {
-    display: flex;
-    justify-content: end;
-}
-
-:deep(.el-tabs__header) {
-    /*border-bottom: 1px solid #888888!important;*/
-    margin-bottom: 0;
-    border-bottom: none !important;
-    background: rgb(34, 34, 34);
-    height: 50px !important;
-}
-
-:deep(.el-tabs__nav) {
-    border: none !important;
-}
-
-:deep(.el-tabs__item.is-active) {
-    color: #ee9600;
-}
-
-:deep(.el-tabs__item:hover) {
-    color: orange;
-    background: #484646;
-}
-
-:deep(.el-tabs__item) {
-    height: 50px;
-    line-height: 50px;
-    margin-left: 2px;
-    border-radius: 8px 8px 0 0;
-    border: none !important;
-    color: #ffffff;
-    background: #2e2e2e;
-}
-
-/*推荐列表区域*/
-.correlation {
-    width: 100%;
-}
-
-</style>
-
-<!--移动端-->
-<style scoped>
-
-/*适应小尺寸*/
-@media (max-width: 650px) {
-    .player_area {
-        padding: 5px 10px;
-    }
-    .tags b {
-        padding: 5px 10px;
-        background-color: rgba(155, 73, 231, 0.72);
-        font-size: 13px;
-        border-radius: 6px;
-        margin-right: 3px;
-    }
-    .tags span {
-        padding: 6px 10px;
-        background-color: #404042;
-        color: #b5b2b2;
-        border-radius: 5px;
-        margin: 0 3px;
-        font-size: 12px;
-    }
-
-}
-</style>
\ No newline at end of file