UI update

This commit is contained in:
mubai
2025-02-10 23:17:23 +08:00
parent ab5a737fa3
commit 86bd33aaf5
17 changed files with 408 additions and 354 deletions

View File

@@ -55,7 +55,6 @@ declare module '@vue/runtime-core' {
FilmList: typeof import('./src/components/index/FilmList.vue')['default']
Footer: typeof import('./src/components/index/Footer.vue')['default']
Header: typeof import('./src/components/index/Header.vue')['default']
History: typeof import('./src/components/index/History.vue')['default']
ImageViewer: typeof import('./src/components/Global/ImageViewer.vue')['default']
Loading: typeof import('./src/components/Loading/Loading.vue')['default']
ManageHeader: typeof import('./src/components/Manage/ManageHeader.vue')['default']

View File

@@ -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_s6heb1d6gt.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d9xdu8zk04f.css">
</head>
<body>
<div id="app"></div>

View File

@@ -66,7 +66,9 @@
display: flex;
white-space: nowrap;
padding: 5px 5px 0;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: none;
background: rgba(255,255,255,0.1);
border-radius: 8px 8px 0 0;
}
.play-tab-item{
@@ -80,15 +82,16 @@
}
.tab-active{
background: #2e2e2e;
background: linear-gradient(#00000015, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 700;
color: orange;
}
.play-list{
background: #2e2e2e;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(#ffffff14, transparent);
padding: 20px;
}
.play-list-item{
overflow-y: auto;
@@ -97,7 +100,7 @@
}
.play-link{
padding: 6px 3px 0 3px;
border: 1px solid rgba(255,255,255,0.28);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 8px;
margin: 5px;
text-align: center;

View File

@@ -4,7 +4,7 @@
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
color: rgba(255, 255, 255, 0.35);
background-color: #242424;
font-synthesis: none;
@@ -19,6 +19,7 @@
--text-font-content: 12px;
--text-title-color: #FBA518;
--text-content-color: #9499a0;
--text-content-color-light: rgba(255, 255, 255, 0.6);
/*公共颜色*/

View File

@@ -22,7 +22,7 @@ import {provide} from "vue";
// 在全局注入一个当前是pc还是wrap的状态
const userAgent = navigator.userAgent.toLowerCase()
let isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
let isMobile = /Mobile|Tablet|Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(userAgent)
// 传递一个全局状态对象
provide('global', {isMobile: isMobile})

View File

@@ -212,6 +212,7 @@ onBeforeMount(() => {
<style scoped>
@media (max-width: 768px) {
.title_mt {
width: 100%;
padding: 0 3px;
display: flex;
flex-direction: row;
@@ -220,16 +221,15 @@ onBeforeMount(() => {
}
.picture_mt {
width: 100%;
height: 180px;
max-height: 180px;
min-width: 30%;
margin-right: 12px;
border-radius: 8px;
border-radius: 5px;
background-size: cover;
flex: 1;
}
.title_mt_right {
flex: 1.5;
flex: 1;
text-align: left;
}
@@ -290,15 +290,16 @@ onBeforeMount(() => {
.title {
width: 100%;
border-radius: 10px;
background: #2e2e2e;
background: linear-gradient(#fff2, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 5px 30px 30px 30px;
position: relative;
}
.title > h2 {
text-align: left;
color: #888888;
color: var(--text-content-color-light);
}
.picture {
@@ -324,10 +325,11 @@ onBeforeMount(() => {
.tags > li {
padding: 6px 10px;
border-radius: 5px;
background: rgba(66, 66, 66);
background: linear-gradient(#ffffff14, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
margin: 0 8px;
font-size: 12px;
color: #888888;
color: var(--text-content-color-light);
}
.tags > .t_c {
@@ -344,6 +346,7 @@ onBeforeMount(() => {
font-size: 14px;
margin: 20px 0;
max-width: 60%;
color: var(--text-content-color-light);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@@ -353,7 +356,7 @@ onBeforeMount(() => {
.title p span {
font-size: 15px;
font-weight: bold;
color: #888888;
color: var(--text-content-color-light);
margin-right: 5px;
}

View File

@@ -8,11 +8,13 @@
<h5 class="card-title"> {{ h.name }}</h5>
<div class="card-content">
<p class="card-episode">{{ `已观看: ${h.progress}` }}</p>
<p class="card-time "><b :class="`iconfont ${h.devices?'icon-mobile':'icon-pc1'}`" />{{ h.time }}</p>
<p class="card-time "><b :class="`iconfont ${h.devices?'icon-mobile':'icon-pc1'}`"/>{{ h.time }}</p>
<p class="card-episode">{{ h.episode }}</p>
</div>
</div>
<a @click="cleanHistory(h.id)" class="iconfont icon-cancel1"/>
</div>
<el-empty v-if="data.historyList && data.historyList.length <= 0" style="padding: 10px 0;" description="暂无观看记录"/>
</div>
</template>
@@ -26,7 +28,20 @@ const data = reactive({
const global = inject<any>('global')
onMounted(() => {
// 清除对应的历史记录
const cleanHistory = (id: number) => {
console.log(id)
// 获取cookie中的filmHistory
let history = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : null
// 删除 cookie 中的对应记录
delete history[id]
// 将需改后的历史记录存储到cookie中
cookieUtil.setCookie(COOKIE_KEY_MAP.FILM_HISTORY, JSON.stringify(history))
// 更新记录数据
getHistory()
}
const getHistory = () => {
// 获取cookie中的filmHistory
let historyMap = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : null
let arr = []
@@ -37,12 +52,18 @@ onMounted(() => {
arr.sort((item1, item2) => item2.timeStamp - item1.timeStamp)
}
data.historyList = arr
console.log(arr)
}
onMounted(() => {
getHistory()
})
</script>
<style scoped>
.container {
padding: 0 5px;
}
.card {
width: 100%;
@@ -52,19 +73,20 @@ onMounted(() => {
flex-direction: row;
background: linear-gradient(#fff2, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
/* border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
/* border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
margin: 5px auto;
border-radius: 5px;
}
.card-left {
flex-basis: 27%;
min-width: 27%;
display: flex;
}
.card-right {
flex-basis: 73%;
max-width: 73%;
flex-basis: 68%;
max-width: 68%;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -101,10 +123,34 @@ onMounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.iconfont {
vertical-align: bottom;
margin-right: 10px;
}
.icon-cancel1 {
flex-basis: 5%;
margin-right: 0;
color: var(--text-content-color);
}
:deep(.el-empty) {
--el-empty-fill-color-1: rgba(155, 73, 231, 0.72);
--el-empty-fill-color-2: #67d9e891;
--el-empty-fill-color-3: rgb(106 19 187 / 72%);
--el-empty-fill-color-4: #67d9e8;
--el-empty-fill-color-5: #5abcc9;
--el-empty-fill-color-6: #9fb2d9;
--el-empty-fill-color-7: #61989f;
--el-empty-fill-color-8: #697dc5;
--el-empty-fill-color-9: rgb(43 51 63 / 44%);
margin-top: 20vh;
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div class="container">
<div v-if="true" class="hidden-sm-and-up banner_wrap" @touchstart="touchS" @touchend="touchE" @click="skipLink" >
<div v-if="global.isMobile" class=" banner_wrap" @touchstart="touchS" @touchend="touchE" @click="skipLink" >
<el-carousel v-model="data.banner.current" ref="wrap" :pause-on-hover="false" :interval="5000" trigger="hover" height="200px" arrow="never" @change="carousel" >
<el-carousel-item v-for="item in data.info.banners" :key="item" >
<el-image style="width: 100%; height: 100%;" :src="item.poster" fit="fill"/>
@@ -8,7 +8,7 @@
</el-carousel-item>
</el-carousel>
</div>
<div v-if="true" class="banner hidden-sm-and-down"
<div v-if="!global.isMobile" class="banner"
:style="{background:`url(${data.banner.current.poster})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover'}" @click="skipLink">
<div class="preview">
<el-carousel @change="carousel" :interval="5000" height="240px" arrow="always">
@@ -33,12 +33,12 @@
<a :href="`/filmClassify?Pid=${item.nav.id}`">{{ item.nav.name }}</a>
</el-col>
<el-col :span="12">
<ul class="nav_ul">
<ul v-if="!global.isMobile" class="nav_ul">
<template v-for="(c,i) in item.nav.children">
<li class="nav_category hidden-md-and-down" v-if="c.show && i < 6"><a
<li class="nav_category" v-if="c.show && i < 6"><a
:href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}</a></li>
</template>
<li class="nav_category hidden-md-and-down"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
<li class="nav_category"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
</ul>
</el-col>
</el-row>
@@ -47,7 +47,7 @@
<!--影片列表-->
<FilmList v-if="item.movies" :col="6" :list="item.movies.slice(0,12)"/>
</el-col>
<el-col :md="0" :lg="4" :xl="4" class="hidden-md-and-down content_right">
<el-col v-if="!global.isMobile" :md="0" :lg="4" :xl="4" class="content_right hidden-sm-and-down">
<h3 class="hot_title">🔥热播{{ item.nav.name }}</h3>
<template v-for="(m,i) in item.hot.slice(0,12)">
<div class="content_right_item">
@@ -65,7 +65,7 @@
<script lang="ts" setup>
// 顶部轮播图
import 'element-plus/theme-chalk/display.css'
import {onBeforeMount, reactive, ref} from "vue";
import {inject, onBeforeMount, reactive, ref} from "vue";
import {ApiGet} from "../../utils/request";
import FilmList from "../../components/index/FilmList.vue";
import {ElMessage} from "element-plus";
@@ -79,8 +79,7 @@ const data = reactive({
}
})
const router = useRouter()
const global = inject<any>('global')
// pc 背景图同步响应
const carousel = (index: number) => {

View File

@@ -257,12 +257,13 @@ const saveFilmHisroy = () => {
if (data.options.src.length > 0) {
// 处理播放历史要记录的影片相关信息
let player = document.getElementsByTagName("video")[0]
let historys = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : {}
let history = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : {}
let link = `/play?id=${data.detail.id}&source=${data.currentTabId}&episode=${data.current.index}&currentTime=${player.currentTime}`
// 处理播放时长
let timeStamp = new Date().getTime()
let time = fmt.dateFormat(timeStamp)
let progress = `${fmt.secondToTime(player.currentTime)} / ${fmt.secondToTime(player.duration)}`
historys[data.detail.id] = {
history[data.detail.id] = {
id: data.detail.id,
name: data.detail.name,
picture: data.detail.picture,
@@ -276,10 +277,8 @@ const saveFilmHisroy = () => {
progress: progress,
devices: global.isMobile
}
// 处理播放时长
cookieUtil.setCookie(COOKIE_KEY_MAP.FILM_HISTORY, JSON.stringify(historys))
// 将历史记录添加到cookie中
cookieUtil.setCookie(COOKIE_KEY_MAP.FILM_HISTORY, JSON.stringify(history))
}
}
@@ -421,7 +420,8 @@ onBeforeMount(() => {
.tags a {
padding: 5px 10px;
background-color: rgba(155, 73, 231, 0.72);
/* background-color: rgba(155, 73, 231, 0.72);*/
background: linear-gradient( #9B49E7B8, #9B49E799);
color: #c4c2c2;
font-size: 13px;
border-radius: 6px;
@@ -430,7 +430,9 @@ onBeforeMount(() => {
.tags span {
padding: 6px 12px;
background-color: #404042;
/*background-color: #404042;*/
background: linear-gradient(#fff2, #ffffff1a);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #b5b2b2;
border-radius: 5px;
margin: 0 8px;
@@ -511,7 +513,7 @@ onBeforeMount(() => {
.tags a {
padding: 5px 10px;
color: #c4c2c2;
background-color: rgba(155, 73, 231, 0.72);
background: linear-gradient( #9B49E7B8, #9B49E799);
font-size: 13px;
border-radius: 6px;
margin-right: 3px;
@@ -531,7 +533,7 @@ onBeforeMount(() => {
.tags span {
padding: 6px 10px;
background-color: #404042;
background: linear-gradient(#fff2, #ffffff1a);
color: #b5b2b2;
border-radius: 5px;
margin: 0 3px;

View File

@@ -12,8 +12,8 @@ export default defineConfig({
port: 3600,
proxy: {
"/api": {
target: `http://127.0.0.1:3601`,
// target: `http://1.94.30.26:3601`,
// target: `http://127.0.0.1:3601`,
target: `http://113.44.5.201:3601`,
changeOrigin: true, // 允许跨域
rewrite: path => path.replace(/^\/api/, '')
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -10,9 +10,9 @@
<meta name="referrer" content="never">
<meta charset="UTF-8"/>
<title>(╥﹏╥)</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_cesmizkmqka.css">
<script type="module" crossorigin src="/assets/index-34def5c2.js"></script>
<link rel="stylesheet" href="/assets/index-a1e7ed01.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d9xdu8zk04f.css">
<script type="module" crossorigin src="/assets/index-e0322266.js"></script>
<link rel="stylesheet" href="/assets/index-d4eecbac.css">
</head>
<body>
<div id="app"></div>

View File

@@ -7,11 +7,12 @@ import (
"server/plugin/SystemInit"
"server/plugin/db"
"server/router"
"time"
)
func init() {
// 执行初始化前等待20s , 让mysql服务完成初始化指令
//time.Sleep(time.Second * 20)
time.Sleep(time.Second * 20)
//初始化redis客户端
err := db.InitRedisConn()
if err != nil {

View File

@@ -21,19 +21,19 @@ func FilmSourceInit() {
return
}
var l []system.FilmSource = []system.FilmSource{
{Id: util.GenerateSalt(), Name: "HD(LZ)", Uri: `https://cj.lziapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(BF)", Uri: `https://bfzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true, Interval: 2500},
{Id: util.GenerateSalt(), Name: "HD(FF)", Uri: `http://cj.ffzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(OK)", Uri: `https://okzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(HM)", Uri: `https://json.heimuer.xyz/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(LY)", Uri: `https://360zy.com/api.php/provide/vod/at/json`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(YZ)", Uri: `https://api.1080zyku.com/inc/apijson.php`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(kk)", Uri: `https://kuaikan-api.com/api.php/provide/vod/from/kuaikan/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(SN)", Uri: `https://suoniapi.com/api.php/provide/vod/from/snm3u8/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true, Interval: 2000},
//{Id: util.GenerateSalt(), Name: "HD(LZ)", Uri: `https://cj.lziapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
//{Id: util.GenerateSalt(), Name: "HD(lzBk)", Uri: `https://cj.lzcaiji.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
//{Id: util.GenerateSalt(), Name: "HD(fs)", Uri: `https://www.feisuzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
//{Id: util.GenerateSalt(), Name: "HD(bfApp)", Uri: `http://app.bfzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: true},
{Id: util.GenerateSalt(), Name: "HD(LZ)", Uri: `https://cj.lziapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
{Id: util.GenerateSalt(), Name: "HD(BF)", Uri: `https://bfzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false, Interval: 2500},
{Id: util.GenerateSalt(), Name: "HD(FF)", Uri: `http://cj.ffzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
{Id: util.GenerateSalt(), Name: "HD(OK)", Uri: `https://okzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
{Id: util.GenerateSalt(), Name: "HD(HM)", Uri: `https://json.heimuer.xyz/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
{Id: util.GenerateSalt(), Name: "HD(LY)", Uri: `https://360zy.com/api.php/provide/vod/at/json`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
{Id: util.GenerateSalt(), Name: "HD(YZ)", Uri: `https://api.1080zyku.com/inc/apijson.php`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
{Id: util.GenerateSalt(), Name: "HD(kk)", Uri: `https://kuaikan-api.com/api.php/provide/vod/from/kuaikan/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
{Id: util.GenerateSalt(), Name: "HD(SN)", Uri: `https://suoniapi.com/api.php/provide/vod/from/snm3u8/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false, Interval: 2000},
//{Id: util.GenerateSalt(), Name: "HD(LZ)", Uri: `https://cj.lziapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
//{Id: util.GenerateSalt(), Name: "HD(lzBk)", Uri: `https://cj.lzcaiji.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
//{Id: util.GenerateSalt(), Name: "HD(fs)", Uri: `https://www.feisuzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
//{Id: util.GenerateSalt(), Name: "HD(bfApp)", Uri: `http://app.bfzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false, CollectType: system.CollectVideo, State: false},
//Id: util.GenerateSalt(), {Name: "HD(bfBk)", Uri: `http://by.bfzyapi.com/api.php/provide/vod/`, ResultModel: system.JsonResult, Grade: system.SlaveCollect, SyncPictures: false,CollectType:system.CollectVideo, State: false},
}
err := system.SaveCollectSourceList(l)