+
@@ -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;
diff --git a/client/src/assets/css/classify.css b/client/src/assets/css/classify.css
new file mode 100644
index 0000000..cb021dc
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/client/src/components/FilmList.vue b/client/src/components/FilmList.vue
index a5c8f4e..aa3c34f 100644
--- 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;
}
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index d6c82ef..ff7c04d 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -12,10 +12,10 @@
首页
-
电影
-
剧集
-
动漫
-
综艺
+
电影
+
剧集
+
动漫
+
综艺
diff --git a/client/src/components/Util.vue b/client/src/components/Util.vue
index 51200b7..587a741 100644
--- 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
diff --git a/client/src/router/router.ts b/client/src/router/router.ts
index fbd3306..08055e6 100644
--- 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},
diff --git a/client/src/style.css b/client/src/style.css
index dfa5205..dc31925 100644
--- 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);
+}
+
+
+
+
diff --git a/client/src/views/index/CategoryFilm.vue b/client/src/views/index/CategoryFilm.vue
index b6cf43c..acb99fe 100644
--- a/client/src/views/index/CategoryFilm.vue
+++ b/client/src/views/index/CategoryFilm.vue
@@ -4,24 +4,17 @@
-
-
@@ -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);
diff --git a/client/src/views/index/FilmClassify.vue b/client/src/views/index/FilmClassify.vue
new file mode 100644
index 0000000..11f01e4
--- /dev/null
+++ b/client/src/views/index/FilmClassify.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/client/src/views/index/FilmClassifySearch.vue b/client/src/views/index/FilmClassifySearch.vue
new file mode 100644
index 0000000..06f9e4a
--- /dev/null
+++ b/client/src/views/index/FilmClassifySearch.vue
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
{{d.search.titles[k]}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/client/src/views/index/Home.vue b/client/src/views/index/Home.vue
index bf2ea00..63bd2d4 100644
--- a/client/src/views/index/Home.vue
+++ b/client/src/views/index/Home.vue
@@ -11,8 +11,8 @@
- {{ c.name }}
- - 更多 >
+ :href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}
+ - 更多 >
diff --git a/server/controller/IndexController.go b/server/controller/IndexController.go
index 2ced4bf..8c24c80 100644
--- a/server/controller/IndexController.go
+++ b/server/controller/IndexController.go
@@ -188,6 +188,7 @@ func FilmTagSearch(c *gin.Context) {
current, _ := strconv.Atoi(currentStr)
page := model.Page{PageSize: 49, Current: current}
logic.IL.GetFilmsByTags(params, &page)
+ // 获取当前分类Title
// 返回对应信息
c.JSON(http.StatusOK, gin.H{
"status": StatusOk,
@@ -208,3 +209,29 @@ func FilmTagSearch(c *gin.Context) {
"page": page,
})
}
+
+// FilmClassify 影片分类首页数据展示
+func FilmClassify(c *gin.Context) {
+ pidStr := c.DefaultQuery("Pid", "")
+ if pidStr == "" {
+ c.JSON(http.StatusOK, gin.H{
+ "status": StatusFailed,
+ "message": "缺少分类信息",
+ })
+ return
+ }
+ // 1. 顶部Title数据
+ pid, _ := strconv.ParseInt(pidStr, 10, 64)
+ title := logic.IL.GetPidCategory(pid)
+ // 2. 设置分页信息
+ page := model.Page{PageSize: 21, Current: 1}
+ // 3. 获取当前分类下的 最新上映, 排行榜, 最近更新 影片信息
+ c.JSON(http.StatusOK, gin.H{
+ "status": StatusOk,
+ "data": gin.H{
+ "title": title,
+ "content": logic.IL.GetFilmClassify(pid, &page),
+ },
+ "page": page,
+ })
+}
diff --git a/server/logic/IndexLogic.go b/server/logic/IndexLogic.go
index 71648a4..89e7883 100644
--- a/server/logic/IndexLogic.go
+++ b/server/logic/IndexLogic.go
@@ -204,9 +204,19 @@ func (i *IndexLogic) GetFilmsByTags(st model.SearchTagsVO, page *model.Page) []m
// 获取满足条件的影片id 列表
sl := model.GetSearchInfosByTags(st, page)
// 通过key 获取对应影片的基本信息
- var list []model.MovieBasicInfo
- for _, s := range sl {
- list = append(list, model.GetBasicInfoByKey(fmt.Sprintf(config.MovieBasicInfoKey, s.Cid, s.Mid)))
- }
- return list
+ return model.GetBasicInfoBySearchInfos(sl...)
+}
+
+// GetFilmClassify 通过Pid返回当前所属分类下的首页展示数据
+func (i *IndexLogic) GetFilmClassify(pid int64, page *model.Page) map[string]interface{} {
+ res := make(map[string]interface{})
+ // 最新上映 (上映时间)
+ res["news"] = model.GetMovieListBySort(0, pid, page)
+ // 排行榜 (暂定为热度排行)
+ res["top"] = model.GetMovieListBySort(1, pid, page)
+ // 最近更新 (更新时间)
+ res["recent"] = model.GetMovieListBySort(2, pid, page)
+
+ return res
+
}
diff --git a/server/model/Movies.go b/server/model/Movies.go
index ef8a42e..e107267 100644
--- a/server/model/Movies.go
+++ b/server/model/Movies.go
@@ -232,6 +232,18 @@ func GetDetailByKey(key string) MovieDetail {
return detail
}
+// GetBasicInfoBySearchInfos 通过searchInfo 获取影片的基本信息
+func GetBasicInfoBySearchInfos(infos ...SearchInfo) []MovieBasicInfo {
+ var list []MovieBasicInfo
+ for _, s := range infos {
+ data := []byte(db.Rdb.Get(db.Cxt, fmt.Sprintf(config.MovieBasicInfoKey, s.Cid, s.Mid)).Val())
+ basic := MovieBasicInfo{}
+ _ = json.Unmarshal(data, &basic)
+ list = append(list, basic)
+ }
+ return list
+}
+
/*
对附属播放源入库时的name|dbID进行处理,保证唯一性
1. 去除name中的所有空格
diff --git a/server/model/Search.go b/server/model/Search.go
index f102250..2621a60 100644
--- a/server/model/Search.go
+++ b/server/model/Search.go
@@ -310,6 +310,14 @@ func TunCateSearchTable() {
}
}
+// GetPage 获取分页相关数据
+func GetPage(db *gorm.DB, page *Page) {
+ var count int64
+ db.Count(&count)
+ page.Total = int(count)
+ page.PageCount = int((page.Total + page.PageSize - 1) / page.PageSize)
+}
+
// ================================= API 数据接口信息处理 =================================
// GetMovieListByPid 通过Pid 分类ID 获取对应影片的数据信息
@@ -563,11 +571,28 @@ func GetSearchInfosByTags(st SearchTagsVO, page *Page) []SearchInfo {
}
-func GetPage(db *gorm.DB, page *Page) {
- var count int64
- db.Count(&count)
- page.Total = int(count)
- page.PageCount = int((page.Total + page.PageSize - 1) / page.PageSize)
+// GetMovieListBySort 通过排序类型返回对应的影片基本信息
+func GetMovieListBySort(t int, pid int64, page *Page) []MovieBasicInfo {
+ var sl []SearchInfo
+ qw := db.Mdb.Model(&SearchInfo{}).Where("pid", pid).Limit(page.PageSize).Offset((page.Current) - 10*page.PageSize)
+ // 针对不同排序类型返回对应的分页数据
+ switch t {
+ case 0:
+ // 最新上映 (上映时间)
+ qw.Order("year DESC, release_date DESC")
+ case 1:
+ // 排行榜 (暂定为热度排行)
+ qw.Order("year DESC, hits DESC")
+ case 2:
+ // 最近更新 (更新时间)
+ qw.Order("year DESC, update_stamp DESC")
+ }
+ if err := qw.Find(&sl).Error; err != nil {
+ log.Println(err)
+ return nil
+ }
+ return GetBasicInfoBySearchInfos(sl...)
+
}
// ================================= 接口数据缓存 =================================
diff --git a/server/router/router.go b/server/router/router.go
index 83fb93a..0225f9d 100644
--- a/server/router/router.go
+++ b/server/router/router.go
@@ -19,7 +19,8 @@ func SetupRouter() *gin.Engine {
r.GET(`/filmPlayInfo`, controller.FilmPlayInfo)
r.GET(`/searchFilm`, controller.SearchFilm)
r.GET(`/filmCategory`, controller.FilmCategory)
- r.GET(`/filmClassified`, controller.FilmTagSearch)
+ r.GET(`/filmClassify`, controller.FilmClassify)
+ r.GET(`/filmClassifySearch`, controller.FilmTagSearch)
// 触发spider
spiderRoute := r.Group(`/spider`)