pc tag search finish

2026-02-03 22:44:47 +08:00 · 2023-07-08 00:10:58 +08:00
parent 92a853a196
commit 21e1a00bd4
17 changed files with 630 additions and 42 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -10,7 +10,7 @@
    <meta name="referrer" content="never">
    <meta charset="UTF-8"/>
    <title>(╥﹏╥)</title>
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_aj8j1lxiqyw.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_vmyr7my0yje.css">
 </head>
 <body>
    <div id="app"></div>
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="main">
+    <div class="main" >
        <router-view></router-view>
        <Util/>
    </div>
@@ -26,7 +26,7 @@ html, body, #app {
    min-height: 100vh;
    /*background: #222;*/
    color: rgb(221, 221, 221);
-    background: rgb(34, 34, 34);
+    //background: rgb(34, 34, 34);
 }


@@ -37,7 +37,6 @@ html, body, #app {

 /*全局a标签默认样式去除*/
 a {
-    color: #2d2e2f;
    outline: none;
    text-decoration: none;
    color: #888888;
--- a/client/src/assets/css/classify.css
+++ b/client/src/assets/css/classify.css
@@ -0,0 +1,96 @@
+.header {
+    display: flex;
+    justify-content: start;
+    padding-bottom: 20px;
+    margin-top: 20px;
+    margin-bottom: 35px;
+    border-bottom: 2px solid rgba(255,255,255, 0.15);
+}
+.header a {
+    color: rgba(255,255,255,0.15);
+    font-size: 30px;
+    font-weight: 700;
+    line-height: 1.1;
+}
+.header a:hover {
+    color: rgba(255,255,255,0.65)!important;
+}
+
+
+.h_active {
+    color: rgba(255,255,255,0.65)!important;
+    position: relative;
+}
+.h_active::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    background: orangered;
+    bottom: -60%;
+    height: 3px;
+    border-radius: 16px 16px 0 0;
+}
+
+.line{
+    width: 3px;
+    background: rgba(255,255,255,0.15);
+    display: inline-block;
+    margin: 5px 15px;
+    border-radius: 2px;
+}
+
+
+/*Category Tag style*/
+.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;
+}
--- a/client/src/components/FilmList.vue
+++ b/client/src/components/FilmList.vue
@@ -40,13 +40,13 @@ const handleImg =(e:Event)=>{
        width: 100%;
        display: flex;
        flex-flow: wrap;
-        justify-content: start;
+        justify-content: space-between;
    }

    .c_content .item {
        flex-basis: calc(33% - 6px);
        max-width: 33%;
-        margin: 0 3px 20px 3px;
+        margin-bottom: 20px;
        box-sizing: border-box;
        overflow: hidden;
    }
@@ -107,11 +107,11 @@ const handleImg =(e:Event)=>{
        width: 100%;
        display: flex;
        flex-flow: wrap;
-        justify-content: start;
+        justify-content: space-between;
    }

    .c_content .item {
-        margin: 0 8px 20px 8px;
+        margin-bottom: 20px;
        box-sizing: border-box;
    }

--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -12,10 +12,10 @@
        <!--右侧顶级分类导航 -->
        <div class="nav_right">
            <el-link :underline="false" href="/">首页</el-link>
-            <el-link :underline="false" :href="`/categoryFilm?Pid=${nav.film.id}`">电影</el-link>
-            <el-link :underline="false" :href="`/categoryFilm?Pid=${nav.tv.id}`">剧集</el-link>
-            <el-link :underline="false" :href="`/categoryFilm?Pid=${nav.cartoon.id}`">动漫</el-link>
-            <el-link :underline="false" :href="`/categoryFilm?Pid=${nav.variety.id}`">综艺</el-link>
+            <el-link :underline="false" :href="`/filmClassify?Pid=${nav.film.id}`">电影</el-link>
+            <el-link :underline="false" :href="`/filmClassify?Pid=${nav.tv.id}`">剧集</el-link>
+            <el-link :underline="false" :href="`/filmClassify?Pid=${nav.cartoon.id}`">动漫</el-link>
+            <el-link :underline="false" :href="`/filmClassify?Pid=${nav.variety.id}`">综艺</el-link>
            <!--        <span style="color:#777; font-weight: bold">|</span>-->
            <el-link href="/search" class="hidden-md-and-up" :underline="false">
                <el-icon style="font-size: 18px">
--- a/client/src/components/Util.vue
+++ b/client/src/components/Util.vue
@@ -36,7 +36,6 @@ const control = reactive({
    darkTheme: true,
 })

-//
 onMounted(()=>{

    changeStyle(localStorage.getItem("theme")+'')
@@ -65,7 +64,7 @@ const changeStyle = (type:string)=>{
      case  'dark':
          control.darkTheme = true
          localStorage.setItem("theme", 'dark')
-          document.getElementsByClassName('main')[0].style.background = `rgb(34,34,34)`
+          document.getElementsByClassName('main')[0].style.background = `#16161a`
          break
      case 'more':
          control.show = !control.show
--- a/client/src/router/router.ts
+++ b/client/src/router/router.ts
@@ -13,6 +13,8 @@ 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";


 // 2. 定义一个路由
@@ -27,6 +29,8 @@ const routes = [
            {path: 'play', component: Play},
            {path: 'search', component: SearchFilm},
            {path: 'CategoryFilm', component: CategoryFilm},
+            {path: 'filmClassify', component: FilmClassify},
+            {path: 'filmClassifySearch', component: FilmClassifySearch},
        ]
    },
    {path: `/:pathMatch(.*)*`, component: NotFound},
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -79,4 +79,21 @@ button:focus-visible {
  }
 }

+/*通用样式*/
+.primary{
+  color: #99DBF5;
+}
+.dark {
+  color: rgba(0,0,0,0.68);
+}
+.light {
+  color: rgba(255,255,255,0.68);
+}
+.silver{
+  color: rgba(255,255,255,0.75);
+}
+
+
+
+

--- a/client/src/views/index/CategoryFilm.vue
+++ b/client/src/views/index/CategoryFilm.vue
@@ -4,24 +4,17 @@
      <div class="h_title">
        <span class="header_t">{{ d.title.name }}</span>
      </div>
-      <div v-if="false" class="c_header">
-        <!--默认全部-->
-        <a :class="`nav ${d.cid == -1?'active':''}`"
-           :href="`/categoryFilm?pid=${d.category.id}`">全部{{ d.category.name }}</a>
-        <!--子分类-->
-        <a :class="`nav ${d.cid == c.id?'active':''}`" :href="`/categoryFilm?pid=${c.pid}&cid=${c.id}&current=1`"
-           v-for="c in d.category.children">{{ c.name }}</a>
-      </div>
      <!--影片分类检索-->
      <div class="t_container">
        <div class="t_item" v-for="k in d.search.sortList ">
-          <span class="t_title">{{d.search.titles[k]}}</span>
-          <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 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>

    <!--影片列表展示-->
@@ -104,8 +97,9 @@ const changeCurrent = (currentVal: number) => {


 const getFilmData = () => {
+  let url =  `filmClassifyHome`
  let query = router.currentRoute.value.query
-  ApiGet('/filmClassified', {...query}).then((resp: any) => {
+  ApiGet(url, {...query}).then((resp: any) => {
    if (resp.status === 'ok') {
      d.title = resp.data.title
      d.list = resp.data.list
@@ -158,7 +152,6 @@ onMounted(() => {
  display: flex;
  justify-content: start;
  margin: 14px 0;
-  flex-flow: wrap;
 }

 .t_title {
@@ -172,6 +165,13 @@ onMounted(() => {
  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);
--- a/client/src/views/index/FilmClassify.vue
+++ b/client/src/views/index/FilmClassify.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="container">
+    <div class="header">
+        <a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
+        <span class="line"/>
+        <a :href="`/filmClassifySearch?Pid=${d.title.id}`" >{{ `${d.title.name}库` }}</a>
+    </div>
+
+    <!--影片列表展示-->
+    <div class="content">
+      <div class="news">
+        <div class="c_nav">
+          <span class="c_nav_text silver">最新上映</span>
+          <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
+        </div>
+        <FilmList :list="d.content.news"/>
+      </div>
+      <div class="news">
+        <div class="c_nav">
+          <span  class="c_nav_text silver">排行榜</span>
+          <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
+        </div>
+        <FilmList :list="d.content.top"/>
+      </div>
+      <div class="news">
+        <div class="c_nav">
+          <span  class="c_nav_text silver">最近更新</span>
+          <span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
+        </div>
+        <FilmList :list="d.content.recent"/>
+      </div>
+    </div>
+
+    <!--分页展示区域-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ApiGet} from "../../utils/request";
+import {ElMessage} from "element-plus";
+import {onMounted, reactive} from "vue";
+import {useRouter} from "vue-router";
+import FilmList from "../../components/FilmList.vue";
+import {Bottom} from "@element-plus/icons-vue";
+
+const d = reactive({
+  title: {},
+  content: {
+    news: [],
+    top: [],
+    recent: [],
+  }
+
+})
+
+const router = useRouter()
+const getFilmData = () => {
+  let query = router.currentRoute.value.query
+  ApiGet(`/filmClassify`, {Pid: query.Pid}).then((resp: any) => {
+    if (resp.status === 'ok') {
+      d.title = resp.data.title
+      d.content = resp.data.content
+    } else {
+      ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
+    }
+  })
+}
+
+onMounted(() => {
+  getFilmData()
+})
+</script>
+
+<style scoped>
+@import "/src/assets/css/classify.css";
+
+.c_nav {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding: 6px;
+}
+.c_nav_text {
+ font-size: 28px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+.c_nav_more{
+  font-size: 14px;
+  background: #25252b;
+  padding: 0 15px;
+  line-height: 32px;
+  border-radius: 8px;
+}
+.content>div {
+  padding-bottom: 20px;
+}
+
+/**/
+
+
+</style>
--- a/client/src/views/index/FilmClassifySearch.vue
+++ b/client/src/views/index/FilmClassifySearch.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="container">
+    <div class="header">
+      <a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a>
+      <span class="line"/>
+      <a :href="`/filmClassifySearch?Pid=${d.title.id}`" class="h_active">{{ `${d.title.name}库` }}</a>
+    </div>
+    <!--影片分类检索-->
+    <div class="t_container">
+      <div class="t_item" v-for="k in d.search.sortList ">
+        <div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-yousanjiao"/> </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>
+
+    <!--影片列表展示-->
+    <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 = '/filmClassifySearch?'+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 query = router.currentRoute.value.query
+  ApiGet(`/filmClassifySearch`, {...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()
+})
+
+</script>
+
+
+<style scoped>
+@import "/src/assets/css/classify.css";
+
+
+
+.t_container {
+  display: block;
+  font-size: 14px;
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid rgba(255,255,255, 0.12);
+}
+
+.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;
+  }
+
+
+}
+</style>
+
+<style scoped>
+.container {
+  max-width: 100vw;
+}
+
+@media (min-width: 650px) {
+
+  /*顶部内容区域*/
+  .header {
+    width: 100%;
+  }
+
+
+
+
+}
+</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>
--- a/client/src/views/index/Home.vue
+++ b/client/src/views/index/Home.vue
@@ -11,8 +11,8 @@
                    <el-col :span="12">
                        <ul class="nav_ul">
                            <li v-for="c in item.nav.children" class="nav_category hidden-md-and-down"><a
-                                    :href="`/categoryFilm?pid=${c.pid}&cid=${c.id}`">{{ c.name }}</a></li>
-                            <li class="nav_category hidden-md-and-down"><a :href="`/categoryFilm?pid=${item.nav.id}`">更多 ></a></li>
+                                    :href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}</a></li>
+                            <li class="nav_category hidden-md-and-down"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
                        </ul>
                    </el-col>
                </el-row>