ui optimize

2026-06-24 07:03:09 +08:00 · 2026-04-19 14:23:29 +08:00
parent f539091ea8
commit 3e6db8b5d6
24 changed files with 737 additions and 500 deletions
--- a/client/components.d.ts
+++ b/client/components.d.ts
@@ -23,6 +23,7 @@ declare module 'vue' {
    ElContainer: typeof import('element-plus/es')['ElContainer']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
--- a/client/index.html
+++ b/client/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -9,8 +9,8 @@
    <meta name="HandheldFriendly" content="true">
    <meta name="referrer" content="never">
    <meta charset="UTF-8"/>
-    <title>(╥﹏╥)</title>
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d9xdu8zk04f.css">
+    <title>o(^▽^)o</title>
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d1lr2rjk376.css">
 </head>
 <body>
    <div id="app"></div>
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,6 +1,6 @@
 <template>
  <el-config-provider :locale="zhCn">
-    <div class="main" >
+    <div class="main dark" >
      <router-view></router-view>
      <Util/>
    </div>
@@ -40,4 +40,90 @@ a {
 a:hover {
    color: #888888;
 }
+
+/*明暗主题背景设置*/
+.dark {
+  background: #16161a;
+
+  .is-drawer .cus-drawer {
+    background-color: rgba(0, 0, 0, 0.55)!important;
+  }
+  .el-drawer__header{
+    border-bottom: 1px solid var(--border-color-highlight);
+  }
+  .el-drawer__close-btn{
+    color: #ddddddbf;
+  }
+  .drawer-nav a {
+    color: #ddd;
+  }
+  .drawer-nav a:before{
+    color: #79bbff;
+  }
+}
+.light{
+  background: linear-gradient(45deg, #356697, rgb(105, 68, 140), rgb(151, 109, 133), rgb(92 104 149));
+
+  .is-drawer .cus-drawer {
+    background: linear-gradient(315deg, #fcb8e2ad 0.000%, #ffc8edcf 20.000%, #fbe8f9d4 40.000%, #e8f9ffde 60.000%, #d0ecffd6 80.000%, #b8cdfadb 100.000%);
+  }
+  .el-drawer__header{
+    border-bottom: 1px solid var(--border-gray-color);
+  }
+  .el-drawer__close-btn{
+    color: #2222223d;
+  }
+  .drawer-nav a {
+    color: #222222c7;
+  }
+  .drawer-nav a:before{
+    color: #3A9AFF;
+  }
+}
+
+
+/*wrap侧边栏菜单样式*/
+.drawer-nav{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 10%;
+}
+.el-drawer__header{
+  margin-left: 8px;
+  margin-right: 8px;
+  border-bottom: 1px solid var(--border-gray-color);
+}
+.el-drawer__header .drawer-title {
+  margin: 20px 0;
+  padding-left: 15px;
+  text-align: start !important;
+}
+.el-drawer__close-btn{
+  color: #2222223d;
+  padding-right: 0;
+}
+.drawer-nav a {
+  width: 100%;
+  color: #22222296;
+  text-align: start;
+  padding: 6px 10px;
+  margin-bottom: 15px;
+  transition: transform 0.3s ease;
+}
+.drawer-nav a:before{
+  font-size: 20px;
+  color: #3A9AFF;
+  margin-right: 6px;
+}
+.el-drawer__body .drawer-nav a:hover, .el-drawer__body .drawer-nav a:hover a:active{
+  color: var(--active--color);
+  transform: translateY(-4px);
+}
+
+
+
+
+
+
 </style>
--- a/client/src/assets/image/managebg.png
+++ b/client/src/assets/image/managebg.png
--- a/client/src/assets/image/play.png
+++ b/client/src/assets/image/play.png
--- a/client/src/components/index/FilmList.vue
+++ b/client/src/components/index/FilmList.vue
@@ -53,9 +53,9 @@
 </template>

 <script setup lang="ts">
-
 import {inject, reactive, watchEffect} from 'vue'
 import {Discount} from "@element-plus/icons-vue";
+import notFoundImg from '/src/assets/image/404.png'

 const props = defineProps({
  list: Array,
@@ -63,7 +63,7 @@ const props = defineProps({
 })
 const d = reactive({
  col: 0,
-  list: Array,
+  list: [],
  width: 0,
 })

@@ -71,7 +71,7 @@ const global = inject('global')
 // 图片加载失败事件
 const handleImg = (e: Event) => {
  // e.target.style.display = "none"
-  e.target.src = '/src/assets/image/404.png'
+  e.target.src = notFoundImg
 }
 // 图片加载完成事件
 const handLoadImg = (e: Event) => {
@@ -95,6 +95,9 @@ watchEffect(() => {
  let isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
  // 如果是PC, 为防止flex布局最后一行元素不足出现错位, 使用空元素补齐list
  let c = isMobile ? 3 : props.col ? props.col : 0
+  if (!props.list) {
+    return;
+  }
  let l: any = props.list
  let len = l.length
  d.width = isMobile ? 31 : Math.floor(100 / c)
--- a/client/src/components/index/Header.vue
+++ b/client/src/components/index/Header.vue
@@ -1,67 +1,97 @@
 <template>
  <div class="header">
-    <!-- 左侧logo以及搜索 -->
-    <div class="nav_left">
-      <!--        <img class="logo" src="/src/assets/logo.png">-->
-      <!--<el-avatar class="logo" :size="45" :src="data.site.logo" alt="GoFilm"/>-->
+    <!-- pc -->
+    <template v-if="!global.isMobile">
+      <!-- 左侧logo以及搜索 -->
+      <div class="nav_left">
+        <!--        <img class="logo" src="/src/assets/logo.png">-->
+        <!--<el-avatar class="logo" :size="45" :src="data.site.logo" alt="GoFilm"/>-->
+        <a href="/" class="site">{{ data.site.siteName }}</a>
+        <div class="search_group">
+          <input v-model="keyword" @keydown="(e)=>{e.keyCode == 13 && searchFilm()}" placeholder="搜索 动漫,剧集,电影 "
+                 class="search"/>
+          <el-button @click="searchFilm" :icon="Search"/>
+        </div>
+      </div>
+      <!--右侧顶级分类导航 -->
+      <div class="nav_right">
+        <div class="nav_link">
+          <a href="/">首页</a>
+          <template v-for="n in data.nav">
+            <a :href="`/filmClassify?Pid=${n.id}`">{{ n.name }}</a>
+          </template>
+        </div>
+        <div class="history-link" v-on:mouseenter="handleHistory(true)"
+             v-on:mouseleave="handleHistory(false)">
+          <a :href="`/filmClassify?Pid=${nav.variety.id}`">
+            <b style="font-size: 22px;" class="iconfont icon-history"/>
+          </a>
+          <Transition name="fade-slide" duration="300">
+            <div v-if="data.historyFlag"  class="dropdown-container" >
+              <div class="history-h">
+                <b class="iconfont icon-record history-h-icon"/>
+                <span class="history-h-title">历史观看记录</span>
+                <a v-if="data.historyList.length > 0" class="iconfont icon-clear1 history-del" @click="clearHistory"/>
+              </div>
+              <div v-if="data.historyList.length > 0" class="history-c">
+                <a :href="h.link" class="history-c-item" v-for="h in data.historyList">
+                  <span class="history-c-item-t">{{ h.name }}</span>
+                  <span class="history-c-item-e">{{ h.episode }}</span>
+                </a>
+              </div>
+              <el-empty style="padding: 10px 0;" v-else description="暂无观看记录"/>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </template>
+    <!-- wrap -->
+    <template v-else>
      <a href="/" class="site">{{ data.site.siteName }}</a>
-      <div class="search_group">
-        <input v-model="keyword" @keydown="(e)=>{e.keyCode == 13 && searchFilm()}" placeholder="搜索 动漫,剧集,电影 "
-               class="search"/>
-        <el-button @click="searchFilm" :icon="Search"/>
+      <div class="menu-group">
+        <div class="search_group">
+          <input v-model="keyword" @keydown="(e)=>{e.keyCode == 13 && searchFilm()}" placeholder="搜索 动漫,电影 "
+                 class="search"/>
+          <el-button @click="searchFilm" :icon="Search"/>
+        </div>
+<!--        <a href="/search" class="iconfont icon-search2"/>-->
+        <b class="iconfont icon-caidan" @click="data.drawer = !data.drawer" />
      </div>
-    </div>
-    <!--右侧顶级分类导航 -->
-    <div class="nav_right">
-      <div class="nav_link">
-        <a href="/">首页</a>
-        <template v-for="n in data.nav">
-          <a :href="`/filmClassify?Pid=${n.id}`">{{ n.name }}</a>
+      <el-drawer v-model="data.drawer" title="I am the title" direction="ltr" :append-to="el" size="65%" :show-close="false"
+                 class="cus-drawer" @opened="handleDrawer(0)" @closed="handleDrawer(1)" >
+        <template #header>
+          <a href="/" class="drawer-title site">{{ data.site.siteName }}</a>
        </template>
-      </div>
-      <div class="history-link hidden-md-and-down" v-on:mouseenter="handleHistory(true)"
-           v-on:mouseleave="handleHistory(false)">
-        <a :href="`/filmClassify?Pid=${nav.variety.id}`">
-          <b style="font-size: 22px;" class="iconfont icon-history"/>
-        </a>
-        <Transition name="fade-slide" duration="300">
-          <div v-if="data.historyFlag"  class="dropdown-container" >
-            <div class="history-h">
-              <b class="iconfont icon-record history-h-icon"/>
-              <span class="history-h-title">历史观看记录</span>
-              <a v-if="data.historyList.length > 0" class="iconfont icon-clear1 history-del" @click="clearHistory"/>
-            </div>
-            <div v-if="data.historyList.length > 0" class="history-c">
-              <a :href="h.link" class="history-c-item" v-for="h in data.historyList">
-                <span class="history-c-item-t">{{ h.name }}</span>
-                <span class="history-c-item-e">{{ h.episode }}</span>
-              </a>
-            </div>
-            <el-empty style="padding: 10px 0;" v-else description="暂无观看记录"/>
-          </div>
-        </Transition>
-      </div>
-      <!--        <span style="color:#777; font-weight: bold">|</span>-->
-      <a href="/search" class="hidden-md-and-up">
-        <el-icon style="font-size: 18px">
-          <Search/>
-        </el-icon>
-      </a>
-
-
-    </div>
+        <div class="drawer-nav">
+          <a href="/" class="iconfont icon-home">首页&emsp;</a>
+          <a v-for="n in data.nav" :href="`/filmClassify?Pid=${n.id}`" :class="`iconfont ${n.name.search('电影') != -1?'icon-film':n.name.search('剧') != -1?'icon-tv':n.name.search('动漫')!= -1?'icon-cartoon':'icon-variety'}`">{{ n.name }}</a>
+        </div>
+      </el-drawer>
+    </template>
    <!--弹窗模块,显示按钮对应信息-->
  </div>
 </template>

 <script lang="ts" setup>
-import {onMounted, reactive, ref, watch} from "vue";
+import {inject, onMounted, reactive, ref, watch} from "vue";
 import {useRouter} from "vue-router";
-import {Search, CircleClose} from '@element-plus/icons-vue'
+import {Search, CircleClose, CircleCloseFilled } from '@element-plus/icons-vue'
 import {ElMessage} from "element-plus";
 import {ApiGet} from "../../utils/request";
 import {cookieUtil, COOKIE_KEY_MAP} from "../../utils/cookie";

+const handleDrawer = (model:number) => {
+  switch (model) {
+    case 0:
+      document.body.style.overflow="hidden";
+      return
+    case 1:
+      document.body.style.overflow="auto";
+      return
+  }
+}
+// 获取全局属性
+const global = inject('global')
 // 搜索关键字
 const keyword = ref<string>('')
 // 弹窗隐藏显示
@@ -70,8 +100,12 @@ const data = reactive({
  historyList: [{}],
  nav: Array,
  site: Object,
+  drawer: false,
 })

+// 获取侧边菜单的挂载元素
+const el = document.getElementsByClassName('main')[0]
+
 // 加载观看历史记录信息
 const handleHistory = (flag: boolean) => {
  data.historyFlag = flag
@@ -138,62 +172,103 @@ onMounted(() => {
 </script>


-<!--移动端适配-->
-<style>
-/*小尺寸时隐藏状态栏*/
-@media (max-width: 768px) {
-  .nav_right {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    height: 40px;
-  }
-
-  .nav_link {
-    display: flex;
-    justify-content: space-between;
-    height: 40px;
-    width: 90%;
-    overflow-y: scroll;
-  }
-
-  .nav_link a {
-    white-space: nowrap;
-    color: #ffffff;
-    flex-basis: calc(19% - 5px);
-    padding: 0 10px;
-    line-height: 40px;
-
-  }
-
-  .nav_right .hidden-md-and-up {
-    color: #ffffff;
-    flex-basis: calc(19% - 5px);
-    padding: 0 10px;
-    line-height: 40px;
-  }
-
-  .nav_right a:hover {
-    color: #ffffff;
-    /*background-color: transparent;*/
-  }
-
-  .header {
-    width: 100% !important;
-    height: 40px;
-/*    background: radial-gradient(circle, #d275cd, rgba(155, 73, 231, 0.72), #4ad1e5);*/
-    background: radial-gradient(circle, #d275cd91, rgb(155 73 231 / 65%), #4ad1e5c2);;
-  }
-
-  .nav_left {
-    display: none !important;
-    width: 90% !important;
-    margin: 0 auto;
-  }
-}
-</style>
-
+<!--双端适配-->
 <style scoped>
+/*wrap*/
+@media (max-width: 768px) {
+  .header {
+    width: 100%;
+    z-index: 0;
+    max-height: 40px;
+    margin: 0 auto;
+    display: flex;
+    padding: 0 6%;
+    height: 40px;
+    background: rgb(0, 0, 0, 0.25);
+/*    background: radial-gradient(circle, #d275cd91, rgb(155 73 231 / 65%), #4ad1e5c2);*/
+    justify-content: space-between;
+  }
+  .site {
+    font-weight: 600;
+    font-style: italic;
+    font-size: 24px;
+    margin-right: 5px;
+    text-align: center;
+    background: linear-gradient(118deg, #e91a90, #c965b3, #988cd7, #00acfd);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .menu-group{
+    display: flex;
+    flex: 1;
+    justify-content: end;
+  }
+  .menu-group .iconfont{
+    margin-left: 10px;
+    line-height: 40px;
+    color: #F3F2EC;
+  }
+  .icon-caidan{
+    font-size: 22px;
+  }
+  .icon-caidan:active{
+    color: #EBD6FB;
+  }
+  .icon-search2{
+    font-size: 26px;
+  }
+
+  .search_group {
+    width: 60%;
+    display: flex;
+    justify-content: start;
+    padding-top: 5px;
+  }
+
+  .search {
+    width: 80%;
+    background-color: transparent;
+    border: 1px solid #ffffff40;
+    height: 30px;
+    border-radius: 15px 0 0 15px;
+    padding-left: 12px;
+    color: #F9F6C4;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 40px;
+  }
+
+  .search::placeholder {
+    flex: 1;
+    font-size: 12px;
+    color: #999999;
+  }
+
+  .search:focus {
+    outline: none;
+  }
+
+  .search_group button {
+    flex: 1;
+    margin: 0;
+    background-color: transparent;
+    border:  1px solid #ffffff40;
+    border-left: none;
+    color: #F9F6C4;
+    height: 30px;
+    padding: 0 6px;
+    border-radius: 0 15px 15px 0;
+    font-size: 20px;
+  }
+  .search_group button:active {
+    background: rgb(0 0 0 / 0.1);
+    border:  1px solid #ffffff40;
+  }
+
+}
+
+/*pc*/
@media (min-width: 768px) {
  .header {
    width: 78%;
@@ -264,7 +339,8 @@ onMounted(() => {
    font-size: 20px;
  }
  .search_group button:hover {
-    background: rgb(0 0 0 / 0.15);
+    background: rgb(0 0 0 / 0.1);
+    border:  1px solid #ffffff1a;
  }

  .nav_right {
@@ -455,4 +531,4 @@ onMounted(() => {
    transform: translate3d(-50%, -10px, 0);
  }
 }
-</style>
+</style>
--- a/client/src/components/index/Util.vue
+++ b/client/src/components/index/Util.vue
@@ -64,12 +64,15 @@ const changeStyle = (type: string) => {
    case 'light':
      control.darkTheme = false
      localStorage.setItem("theme", 'light')
-      document.getElementsByClassName('main')[0].style.background = `linear-gradient(45deg, #356697, rgb(105, 68, 140), rgb(151, 109, 133), rgb(92 104 149))`
+      document.getElementsByClassName('main')[0].classList.remove('dark')
+      document.getElementsByClassName('main')[0].classList.add('light')
+
      break
    case  'dark':
      control.darkTheme = true
      localStorage.setItem("theme", 'dark')
-      document.getElementsByClassName('main')[0].style.background = `#16161a`
+      document.getElementsByClassName('main')[0].classList.remove('light')
+      document.getElementsByClassName('main')[0].classList.add('dark')
      break
    case 'more':
      control.show = !control.show
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -23,13 +23,12 @@
    --text-content-color-highlight: rgb(255, 255, 255);

    /*公共颜色*/
-
-
    --bg-light: #ffffff;
    --bg-dark: #21252b;

    --active--text-color: #ffb22cd6;
    --active--bg-color: #ffb22c0d;
+    --active--color: #FFBB64;

    --text-color-primary: #ffffff;
    --content-text-color: #888888;
--- a/client/src/views/Login.vue
+++ b/client/src/views/Login.vue
@@ -55,7 +55,7 @@ const login = ()=>{
  width: 100vw;
  height: 100vh;
  color: #343333;
-  background: url("../assets/image/managebg.png");
+  background: url("https://pic1.imgdb.cn/item/69e4378a3c746ca9770a0364.png");
 }
 .container-bg {
  background-color: #b07ada;
--- a/client/src/views/index/CustomPlay.vue
+++ b/client/src/views/index/CustomPlay.vue
@@ -19,9 +19,6 @@
 </template>

 <script setup lang="ts">
-import {Search} from "@element-plus/icons-vue";
-import posterImg from "../../assets/image/play.png";
-// import {VideoPlayer} from "@videojs-player/vue";
 import {onMounted, reactive, ref} from "vue";
 import {ElMessage} from "element-plus";
 import Player from "xgplayer"
@@ -52,7 +49,7 @@ onMounted(() => {
  playerInstance.value = new Player({
    el: playerContainer.value,
    url: data.options.url,
-    poster: posterImg,
+    poster: 'https://pic1.imgdb.cn/item/69e4378a3c746ca9770a0363.jpg',
    width: "",
    height: "",
    autoplay: data.options.autoplay,
@@ -133,26 +130,35 @@ const play = () => {
  font-size: 16px;
  width: 100%;
  padding: 0  40px;
-  border: none;
  outline-style: none;
-  border-radius: 16px 0 0 16px;
+  border-radius: 50px 0 0 50px;
  min-height: 40px;
-  background: rgba(255,255,255,0.8);
+  background: rgba(255,255,255,0.1);
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
+  color: #ffffffbd;
+  border: 1px solid var(--border-color-highlight);
+  border-right: none;
 }
 .cus-input:focus{
  border: 0;
 }

+.cus-input::placeholder{
+  color: rgb(255 255 255 / 0.53);
+}
 .icon-play {
  height: 100%;
  font-size: 16px;
-  border-radius: 0 16px 16px 0;
-  background: deeppink;
+  border-radius: 0 50px 50px 0;
+  background: #f56c6ca3;
  color: rgba(255,255,255,0.8);
  outline-style: none;
+  border: 1px solid var(--border-color-highlight);
 }
-.icon-play:hover {
-  background: hotpink;
+.icon-play:hover, .icon-play:active {
+  background: #FF69B4A6;
+  outline-style: none;
+  border: none;
 }

 /*播放器样式.*/
--- a/client/src/views/index/FilmClassifySearch.vue
+++ b/client/src/views/index/FilmClassifySearch.vue
@@ -10,9 +10,9 @@
      <div class="t_item" v-for="k in d.search.sortList ">
        <div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-triangle"/> </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'])" >
+          <span :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>
+          </span>
        </div>
      </div>
    </div>
@@ -144,7 +144,7 @@ onMounted(() => {
  display: block;
  font-size: 14px;
  padding-bottom: 10px;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255, 0.12);
 }

@@ -177,15 +177,22 @@ onMounted(() => {

 .tag {
  display: inline-block;
+  cursor: pointer;
+  color: var(--text-content-color-light);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  text-align: center;
 }

+.tag:hover, .tag:active{
+  color: #F7C85C;
+}
+
 .t_active {
  background: rgba(255,255,255,0.12);
-  color: #ffa500cc!important;
-  border: none!important;
+  color: #F7C85C;
+
+  vertical-align: top;   /* 或 middle，消除基线影响 */
 }


--- a/client/src/views/index/FilmDetails.vue
+++ b/client/src/views/index/FilmDetails.vue
@@ -1,9 +1,11 @@
 <template>
  <div class="film" v-show="data.loading">
    <!-- 移动端title   -->
-    <div class="hidden-sm-and-up">
+    <div v-if="global.isMobile">
      <div class="title_mt  ">
-        <a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
+        <a class="picture_mt" href="" >
+          <img class="picture-c" :src="data.detail.picture" alt="load error" @error="handleImg" />
+        </a>
        <div class="title_mt_right">
          <h3>{{ data.detail.name }}</h3>
          <ul class="tags">
@@ -25,8 +27,10 @@
      </div>
    </div>
    <!-- pc端title-->
-    <div class="title hidden-sm-and-down ">
-      <a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"><span class="full-c" /></a>
+    <div v-else class="title" >
+      <a href="" class="picture">
+        <img class="pic" :src="data.detail.picture" alt="load error" @error="handleImg" >
+      </a>
      <h2>{{ data.detail.name }}</h2>
      <ul class="tags">
        <li class="t_c">
@@ -101,11 +105,12 @@

 <script setup lang="ts">
 import {useRouter} from "vue-router";
-import {onBeforeMount, reactive, ref,} from "vue";
+import {inject, onBeforeMount, reactive, ref,} from "vue";
 import {ApiGet} from "../../utils/request";
 import {ElMessage} from 'element-plus'
 import {Promotion, CaretRight, Star} from "@element-plus/icons-vue";
 import RelateList from "../../components/index/RelateList.vue";
+import notFoundImg from '/src/assets/image/404.png'

 // 获取路由对象
 const router = useRouter()
@@ -148,6 +153,9 @@ const data = reactive({
  currentTabId: '',
 })

+// 获取全局属性
+const global = inject('global')
+
 // 对部分信息过长进行处理
 const handleLongText = (t: string): string => {
  let res = ''
@@ -159,6 +167,10 @@ const handleLongText = (t: string): string => {
  return res.trimEnd()
 }

+// 图片加载失败事件
+const handleImg = (e: Event) =>{
+  e.target && (e.target.src = notFoundImg)
+}

 // 播放源切换
 const changeTab = (id: string) => {
@@ -225,7 +237,7 @@ onBeforeMount(() => {

  .picture_mt {
    min-width: 35%;
-    aspect-ratio: 3/4;
+    max-width: 35%;
    margin-right: 12px;
    border-radius: 5px;
    background-size: cover;
@@ -235,6 +247,12 @@ onBeforeMount(() => {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  }

+  .picture-c {
+    width: 100%;
+    aspect-ratio: 3/4;
+    border-radius: 5px;
+  }
+
  .title_mt_right {
    flex: 1;
    text-align: left;
@@ -257,8 +275,8 @@ onBeforeMount(() => {

  .mt_content {
    margin-top: 5px;
-    border-top: 1px solid #777777;
-    border-bottom: 1px solid #777777;
+    border-top: 1px solid var(--border-color-highlight);
+    border-bottom: 1px solid  var(--border-color-highlight);
    width: 100%;
    padding: 5px;
  }
@@ -322,38 +340,33 @@ onBeforeMount(() => {
  top: 30px;
  border-radius: 8px;
  background-size: cover;
+  overflow: hidden;
 }

 .picture:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
 }

-.picture .full-c {
-  display: block;
+.picture .pic {
  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
+  aspect-ratio: 3/4;
+
 }

-.full-c::before {
+
+.picture::before {
  content: '';
  position: absolute;
  top: 0;
-  left: -30%;
-  width: 30%;
+  left: -60%;
+  width: 25%;
  height: 100%;
-  opacity: 0;
-  background: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255, 0.5) 50%,
-      rgba(255, 255, 255, 0) 100%
-  );
+  opacity: 1;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
 }

-.full-c:hover::before {
+.picture:hover::before {
  left: 130%;
  transition: all 0.6s ease-in-out;
  opacity: 1;
--- a/client/src/views/index/Home.vue
+++ b/client/src/views/index/Home.vue
@@ -42,7 +42,7 @@
          </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">
            <!--影片列表-->
            <FilmList v-if="item.movies" :col="6" :list="item.movies.slice(0,12)"/>
          </el-col>
--- a/client/src/views/index/Play.vue
+++ b/client/src/views/index/Play.vue
@@ -72,7 +72,6 @@ import {ApiGet} from "@/utils/request";
 import {ElMessage} from "element-plus";
 import RelateList from "../../components/index/RelateList.vue";
 import {Promotion} from "@element-plus/icons-vue";
-import posterImg from '../../assets/image/play.png'
 import {cookieUtil, COOKIE_KEY_MAP} from '@/utils/cookie'
 // 引入视频播放器组件
 import Player, {Events, Plugin} from "xgplayer"
@@ -233,7 +232,7 @@ onBeforeMount(() => {
    mPlayer = new Player({
      el: playerContainer.value,
      url: data.options.url,
-      poster: posterImg,
+      poster: 'https://pic1.imgdb.cn/item/69e4378a3c746ca9770a0363.jpg',
      width: "100%",
      height: "100%",
      fluid: true,
--- a/client/src/views/index/SearchFilm.vue
+++ b/client/src/views/index/SearchFilm.vue
@@ -1,44 +1,46 @@
 <template>
  <div class="container">
-    <div class="search_group">
-      <div class="InputContainer">
-        <input  class="input" placeholder="输入关键字搜索 动漫,剧集,电影" v-model="data.search" @keydown="e=>{e.keyCode==13 && searchMovie()}" />
-        <div class="border" />
-        <button class="micButton" @click="searchMovie">
-          <svg viewBox="0 0 512 512" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
-          </svg>
-        </button>
-      </div>
+    <div class="InputContainer">
+      <input class="input" placeholder="输入关键字搜索 动漫,剧集,电影" v-model="data.search"
+             @keydown="e=>{e.keyCode==13 && searchMovie()}"/>
+      <div class="border"/>
+      <button class="micButton" @click="searchMovie">
+        <svg viewBox="0 0 512 512" class="searchIcon">
+          <path
+              d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
+        </svg>
+      </button>
    </div>
    <div class="header-container">
-        <h3>{{ data.oldSearch }}</h3>
-        <span>共找到<b>{{ data.page.total }}</b>部与"<b>{{ data.oldSearch }}</b>"相关的影视作品</span>
+      <h3>{{ data.oldSearch }}</h3>
+      <span>共找到<b>{{ data.page.total }}</b>部与"<b>{{ data.oldSearch }}</b>"相关的影视作品</span>
    </div>
    <div class="card-group" v-if="data.list && data.list.length > 0">
-      <div class="card"  v-for="(m,i) in data.list" >
+      <div class="card" v-for="(m,i) in data.list" @click="play(m.id)" >
        <div class="card-left">
-          <div class="loader" v-if="m.loading" />
-          <img v-show="!m.loading && !m.error" :src="m.picture" @load="()=>{data.list[i].loading=false}" @error="()=>{data.list[i].error=true}"/>
+          <div class="loader" v-if="m.loading"/>
+          <img v-show="!m.loading && !m.error" :src="m.picture" @load="()=>{data.list[i].loading=false}"
+               @error="()=>{data.list[i].error=true}"/>
          <!-- 失败占位 -->
-          <img v-if="m.error" src="/src/assets/image/404.png" @load="()=>{data.list[i].loading=false}" />
+          <img v-if="m.error" src="/src/assets/image/404.png" @load="()=>{data.list[i].loading=false}"/>
        </div>
        <div class="card-right">
          <h3>{{ m.name }}</h3>
          <p class="tags">
-            <span class="tag_c">{{ `${m.cName?m.cName:'暂未分类'}` }}</span>
-            <span>{{  `${m.year?m.year:'未知'}` }}</span>
-            <span class="tag-area">{{  `${m.area?m.area:'未知'}`  }}</span>
+            <span class="tag_c">{{ `${m.cName ? m.cName : '暂未分类'}` }}</span>
+            <span>{{ `${m.year ? m.year : '未知'}` }}</span>
+            <span class="tag-area">{{ `${m.area ? m.area : '未知'}` }}</span>
          </p>
-          <p><em>导演:</em>{{ `${m.director?m.director:'未知'}` }}</p>
-          <p><em>主演:</em>{{ `${m.actor?m.actor:'未知'}` }}</p>
-          <p class="blurb"><em>剧情:</em>{{ `${m.blurb.trim()?m.blurb.replace(/\s/g, ''):'暂无简介'}` }}</p>
+          <p><em>导演:</em>{{ `${m.director ? m.director : '未知'}` }}</p>
+          <p><em>主演:</em>{{ `${m.actor ? m.actor : '未知'}` }}</p>
+          <p class="blurb"><em>剧情:</em>{{ `${m.blurb.trim() ? m.blurb.replace(/\s/g, '') : '暂无简介'}` }}</p>
          <el-button :icon="CaretRight" @click="play(m.id)">立即播放</el-button>
        </div>
      </div>
    </div>
    <el-empty v-if="data.oldSearch != '' && (!data.list || data.list.length == 0) " description="未查询到对应影片"/>

-    <div class="pagination_container" v-if="data.list && data.list.length > 0" >
+    <div class="pagination_container" v-if="data.list && data.list.length > 0">
      <el-pagination background layout="prev, pager, next"
                     v-model:current-page="data.page.current"
                     @current-change="changeCurrent"
@@ -139,70 +141,90 @@ const changeCurrent = (currentVal: number) => {
  .InputContainer {
    width: 40%;
  }
+
  .input {
    width: 90%;
  }
+
  .micButton {
    width: 10%;
  }
+
  .card-group {
    justify-content: space-between;
  }
+
  .card {
    width: calc(50% - 4%);
    min-height: 230px;
  }
-  .card-left{
+
+  .card-left {
    width: 23%;
  }
-  .card-right{
+
+  .card-right {
    width: 70%;
  }
-  .card-right h3{
+
+  .card-right h3 {
    font-size: 20px;
  }
+
  .card-right p {
    font-size: 15px;
    margin-bottom: 5px;
  }
+
  .card-right span {
    font-size: 12px;
  }
 }
+
 /*-------------------------wrap------------------------------*/
@media (max-width: 768px) {
  .InputContainer {
    width: 80%;
  }
+
  .input {
    width: 80%;
  }
+
  .micButton {
    width: 20%;
  }
+
  .card-group {
    justify-content: center;
  }
+
  .card {
    width: calc(100% - 10%);
    min-height: 185px;
  }
-  .card-left{
+
+  .card-left {
    width: 38%;
  }
-  .card-right{
+
+  .card-right {
    width: 60%;
  }
-  .card-right h3{
+
+  .card-right h3 {
    font-size: 16px;
  }
+
  .card-right p {
    font-size: 10px;
  }
+
  .card-right span {
    font-size: 10px;
  }
 }
+
 /*--------------------Search---------------------------*/
 .InputContainer {
  height: 40px;
@@ -227,9 +249,11 @@ const changeCurrent = (currentVal: number) => {
  color: #ffffffbd;
  caret-color: #ffffff;
 }
+
 .input::placeholder {
  color: rgb(255 255 255 / 0.69);
 }
+
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
@@ -268,21 +292,25 @@ input:-webkit-autofill:active {
  background-color: #fde2e245;
  transition-duration: .3s;
 }
+
 /*-----------------------header-container-------------------------------------------*/
-.header-container{
+.header-container {
  margin: 20px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
-  border-bottom: 1px solid rgba(255,255,255, 0.15);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }
+
 .header-container b {
  color: #FFC570;
 }
+
 .header-container h3 {
  margin: 0 auto;
 }
+
 /*-----------------------card style---------------------------------*/
 .card-group {
  width: 100%;
@@ -290,6 +318,7 @@ input:-webkit-autofill:active {
  flex-wrap: wrap
  /*  aspect-ratio: 9/16;*/
 }
+
 .card {
  display: flex;
  justify-content: start;
@@ -305,23 +334,28 @@ input:-webkit-autofill:active {
  overflow: hidden;
  transform: translateY(0%);
 }
-.card:active {
+
+.card:active, .card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-3%);
  transition: 0.5s;
 }
+
 .card-left {
  height: 100%;
 }
+
 .card img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
 }
+
 .card-right {
  text-align: start;
  padding-left: 2%;
 }
+
 .card-right h3 {
  color: #FFC570;
  max-width: 100%;
@@ -329,6 +363,7 @@ input:-webkit-autofill:active {
  white-space: nowrap;
  text-overflow: ellipsis;
 }
+
 .card-right .tags {
  display: flex;
  width: 90%;
@@ -344,6 +379,7 @@ input:-webkit-autofill:active {
  white-space: nowrap;
  overflow: hidden;
 }
+
 .card-right span {
  margin-right: 8px;
  border-radius: 3px;
@@ -351,15 +387,18 @@ input:-webkit-autofill:active {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
 }
-.card-right .tag_c{
+
+.card-right .tag_c {
  background: rgba(155, 73, 231, 0.72);
 }
+
 .card-right p:not(.blurb) {
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
+
 .card-right .blurb {
  max-width: 90%;
  display: -webkit-box;
@@ -367,11 +406,13 @@ input:-webkit-autofill:active {
  -webkit-line-clamp: 2;
  overflow: hidden;
 }
+
 .card-right p em {
  font-weight: bold;
  color: #fff;
  margin-right: 5px;
 }
+
 .card-right button {
  background-color: orange;
  border-radius: 20px;
@@ -382,9 +423,11 @@ input:-webkit-autofill:active {
  margin-bottom: 10px;
  bottom: 0;
 }
+
 .card-right h3, span, p {
  margin: 3px 0;
 }
+
 /*--------------------------image loading----------------------------------------------*/
 /* 容器样式 */
 .loader {
@@ -393,19 +436,20 @@ input:-webkit-autofill:active {
  background-color: transparent;
  background-image: linear-gradient(
      45deg,
-      rgba(255,255,255,0.1) 25%,
-      rgba(255,255,255,0.3) 25%,
-      rgba(255,255,255,0.3) 50%,
-      rgba(255,255,255,0.1) 50%,
-      rgba(255,255,255,0.1) 75%,
-      rgba(255,255,255,0.3) 75%,
-      rgba(255,255,255,0.3) 100%
+      rgba(255, 255, 255, 0.1) 25%,
+      rgba(255, 255, 255, 0.3) 25%,
+      rgba(255, 255, 255, 0.3) 50%,
+      rgba(255, 255, 255, 0.1) 50%,
+      rgba(255, 255, 255, 0.1) 75%,
+      rgba(255, 255, 255, 0.3) 75%,
+      rgba(255, 255, 255, 0.3) 100%
  );
  /* 3. 设置条纹的大小 (宽和高相等即为正方形条纹) */
  background-size: 20px 20px;
  /* 4. 应用动画 */
  animation: stripes-move 1.5s linear infinite;
 }
+
 /* --- 动画定义 --- */
@keyframes stripes-move {
  0% {
--- a/film/data/nginx/html/assets/index-DFwizkwH.js
+++ b/film/data/nginx/html/assets/index-DFwizkwH.js
--- a/film/data/nginx/html/assets/index-DtI_fGXi.js
+++ b/film/data/nginx/html/assets/index-DtI_fGXi.js
--- a/film/data/nginx/html/assets/index-SMpFt5Co.css
+++ b/film/data/nginx/html/assets/index-SMpFt5Co.css
--- a/film/data/nginx/html/assets/index-hjx10UP7.css
+++ b/film/data/nginx/html/assets/index-hjx10UP7.css
--- a/film/data/nginx/html/assets/managebg-B29u3SDN.png
+++ b/film/data/nginx/html/assets/managebg-B29u3SDN.png
--- a/film/data/nginx/html/assets/play-D0YwKogF.png
+++ b/film/data/nginx/html/assets/play-D0YwKogF.png
--- a/film/data/nginx/html/index.html
+++ b/film/data/nginx/html/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -9,10 +9,10 @@
    <meta name="HandheldFriendly" content="true">
    <meta name="referrer" content="never">
    <meta charset="UTF-8"/>
-    <title>(╥﹏╥)</title>
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d9xdu8zk04f.css">
-  <script type="module" crossorigin src="/assets/index-DtI_fGXi.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-SMpFt5Co.css">
+    <title>o(^▽^)o</title>
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d1lr2rjk376.css">
+  <script type="module" crossorigin src="/assets/index-DFwizkwH.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-hjx10UP7.css">
 </head>
 <body>
    <div id="app"></div>
--- a/server/plugin/SystemInit/WebSiteInit.go
+++ b/server/plugin/SystemInit/WebSiteInit.go
@@ -26,10 +26,10 @@ func BasicConfigInit() {

 func BannersInit() {
 	var bl = system.Banners{
-		system.Banner{Id: util.GenerateSalt(), Name: "樱花庄的宠物女孩", Year: 2020, CName: "日韩动漫", Poster: "https://s2.loli.net/2024/02/21/Wt1QDhabdEI7HcL.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
-		system.Banner{Id: util.GenerateSalt(), Name: "从零开始的异世界生活", Year: 2020, CName: "日韩动漫", Poster: "https://s2.loli.net/2024/02/21/UkpdhIRO12fsy6C.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
-		system.Banner{Id: util.GenerateSalt(), Name: "五等分的花嫁", Year: 2020, CName: "日韩动漫", Poster: "https://s2.loli.net/2024/02/21/wXJr59Zuv4tcKNp.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
-		system.Banner{Id: util.GenerateSalt(), Name: "我的青春恋爱物语果然有问题", Year: 2020, CName: "日韩动漫", Poster: "https://s2.loli.net/2024/02/21/oMAGzSliK2YbhRu.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
+		system.Banner{Id: util.GenerateSalt(), Name: "樱花庄的宠物女孩", Year: 2020, CName: "日韩动漫", Poster: "https://pic1.imgdb.cn/item/69e441783c746ca9770a03ce.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
+		system.Banner{Id: util.GenerateSalt(), Name: "从零开始的异世界生活", Year: 2020, CName: "日韩动漫", Poster: "https://pic1.imgdb.cn/item/69e441793c746ca9770a03d1.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
+		system.Banner{Id: util.GenerateSalt(), Name: "五等分的花嫁", Year: 2020, CName: "日韩动漫", Poster: "https://pic1.imgdb.cn/item/69e441793c746ca9770a03d0.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
+		system.Banner{Id: util.GenerateSalt(), Name: "我的青春恋爱物语果然有问题", Year: 2020, CName: "日韩动漫", Poster: "https://pic1.imgdb.cn/item/69e441793c746ca9770a03cf.jpg", Picture: "https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg", Remark: "已完结"},
 	}
 	_ = system.SaveBanners(bl)
 }