mirror of
https://github.com/unilei/aipan-netdisk-search.git
synced 2024-11-25 16:32:42 +08:00
update css.
This commit is contained in:
xuliulei
parent
06ddf0cdec
commit
ad2bc975c9
16
app.vue
16
app.vue
@ -30,4 +30,20 @@ h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Douyin Meihao";
|
||||
src: url('./assets/fonts/抖音美好体.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
font-weight: 100 200 300 400 500 600 700 800 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fangzheng Kaiti Jian";
|
||||
src: url("./assets/fonts/方正楷体简体.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
font-weight: 100 200 300 400 500 600 700 800 900;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
BIN
assets/fonts/抖音美好体.ttf
Normal file
BIN
assets/fonts/抖音美好体.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/方正楷体简体.ttf
Normal file
BIN
assets/fonts/方正楷体简体.ttf
Normal file
Binary file not shown.
BIN
assets/tvstatic.gif
Normal file
BIN
assets/tvstatic.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
@ -1,85 +1,92 @@
|
||||
<script setup>
|
||||
const searchSiteData = ref([
|
||||
{
|
||||
id:1,
|
||||
name:'谷歌',
|
||||
url:'https://www.google.com/search',
|
||||
s_key:'q'
|
||||
id: 1,
|
||||
name: '谷歌',
|
||||
url: 'https://www.google.com/search',
|
||||
s_key: 'q'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:'必应[国际]',
|
||||
url:'https://www.bing.com/search',
|
||||
s_key:'q'
|
||||
id: 2,
|
||||
name: '必应[国际]',
|
||||
url: 'https://www.bing.com/search',
|
||||
s_key: 'q'
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name:'必应[国内]',
|
||||
url:'https://cn.bing.com/',
|
||||
s_key:'q'
|
||||
id: 3,
|
||||
name: '必应[国内]',
|
||||
url: 'https://cn.bing.com/',
|
||||
s_key: 'q'
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
name:'百度',
|
||||
url:'https://www.baidu.com/s',
|
||||
s_key:'q'
|
||||
id: 4,
|
||||
name: '百度',
|
||||
url: 'https://www.baidu.com/s',
|
||||
s_key: 'q'
|
||||
}
|
||||
|
||||
])
|
||||
const searchSite = ref({
|
||||
id:4,
|
||||
name:'百度',
|
||||
url:'https://www.baidu.com/s',
|
||||
s_key:'wd'
|
||||
id: 4,
|
||||
name: '百度',
|
||||
url: 'https://www.baidu.com/s',
|
||||
s_key: 'wd'
|
||||
})
|
||||
const searchKeyword = ref('')
|
||||
const search = ()=>{
|
||||
let str = searchSite.value.url + '?'+ searchSite.value.s_key+'=' + searchKeyword.value
|
||||
const search = () => {
|
||||
let str = searchSite.value.url + '?' + searchSite.value.s_key + '=' + searchKeyword.value
|
||||
window.open(str, '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-[100%] md:w-[800px] border border-slate-300 font-mono overflow-hidden rounded-[50px]">
|
||||
<client-only>
|
||||
<el-input class="h-[50px]" v-model="searchKeyword" placeholder="请输入关键词" @keydown.enter="search()" >
|
||||
<template #prepend>
|
||||
<el-select class="w-[40px] md:w-[100px] h-[50px]" placeholder="搜索引擎" value-key="id" v-model="searchSite">
|
||||
<el-option class="h-[50px]" v-for="(item,i) in searchSiteData" :key="i" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button icon="search" @click="search()"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</client-only>
|
||||
<div class="w-[100%] md:w-[800px] border border-slate-300 overflow-hidden rounded-[50px]">
|
||||
<client-only>
|
||||
<el-input class="h-[50px]" v-model="searchKeyword" placeholder="请输入关键词" @keydown.enter="search()">
|
||||
<template #prepend>
|
||||
<el-select class="w-[40px] md:w-[100px] h-[50px]" placeholder="搜索引擎" value-key="id" v-model="searchSite">
|
||||
<el-option class="h-[50px]" v-for="(item, i) in searchSiteData" :key="i" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button icon="search" @click="search()"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</client-only>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-input__inner) {
|
||||
height: 48px;
|
||||
}
|
||||
:deep(.el-input__wrapper){
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
}
|
||||
:deep(.el-input-group__prepend){
|
||||
|
||||
:deep(.el-input-group__prepend) {
|
||||
box-shadow: none;
|
||||
}
|
||||
:deep(.el-input){
|
||||
--el-input-focus-border:transparent;
|
||||
--el-input-border-color:transparent;
|
||||
--el-input-focus-border-color:transparent;
|
||||
--el-input-hover-border-color:transparent;
|
||||
|
||||
:deep(.el-input) {
|
||||
--el-input-focus-border: transparent;
|
||||
--el-input-border-color: transparent;
|
||||
--el-input-focus-border-color: transparent;
|
||||
--el-input-hover-border-color: transparent;
|
||||
}
|
||||
:deep(.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper){
|
||||
|
||||
:deep(.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__inner){
|
||||
|
||||
:deep(.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__inner) {
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.el-select .el-input__wrapper.is-focus){
|
||||
|
||||
:deep(.el-select .el-input__wrapper.is-focus) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -21,19 +21,19 @@ defineProps({
|
||||
<div class="bg-white dark:bg-gray-600 shadow p-3 rounded-[6px]
|
||||
flex flex-col sm:flex-row justify-between items-center
|
||||
hover:bg-[#f5f5f5] dark:hover:bg-gray-700 hover:shadow-lg transition duration-300 ease-in-out"
|
||||
v-for="(item, i) in sources.flat(Infinity)" :key="i"
|
||||
>
|
||||
<p class="text-sm text-slate-600 font-inter font-[600] truncate text-wrap dark:text-white" v-html="item.name"></p>
|
||||
v-for="(item, i) in sources.flat(Infinity)" :key="i">
|
||||
<p class="text-sm text-slate-600 font-semibold truncate text-wrap dark:text-white" v-html="item.name"></p>
|
||||
<div class="text-[12px] text-slate-600 mt-1 flex flex-row gap-3">
|
||||
<div v-for="(link,i) in item.links" :key="i">
|
||||
<nuxt-link class="flex flex-row items-center p-1 bg-slate-200 rounded gap-2 hover:bg-slate-300 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
:to="link.link"
|
||||
target="_blank">
|
||||
<div v-for="(link, i) in item.links" :key="i">
|
||||
<nuxt-link
|
||||
class="flex flex-row items-center p-1 bg-slate-200 rounded gap-2 hover:bg-slate-300 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
:to="link.link" target="_blank">
|
||||
<img class="w-[20px]" v-if="link.service === 'ALIYUN'" src="@/assets/netdisk/aliyun.png" alt="aliyun">
|
||||
<img class="w-[20px]" v-if="link.service === 'QUARK'" src="@/assets/netdisk/quark.png" alt="quark">
|
||||
<img class="w-[20px]" v-if="link.service === 'BAIDU'" src="@/assets/netdisk/baidu.png" alt="baidu">
|
||||
<img class="w-[20px]" v-if="link.service === 'XUNLEI'" src="@/assets/netdisk/xunlei.png" alt="xunlei">
|
||||
<img class="w-[20px]" v-if="link.service === 'OTHER'" src="@/assets/netdisk/xunlei.png" alt="xunlei">
|
||||
<img class="w-[20px]" v-else-if="link.service === 'QUARK'" src="@/assets/netdisk/quark.png" alt="quark">
|
||||
<img class="w-[20px]" v-else-if="link.service === 'BAIDU'" src="@/assets/netdisk/baidu.png" alt="baidu">
|
||||
<img class="w-[20px]" v-else-if="link.service === 'XUNLEI'" src="@/assets/netdisk/xunlei.png" alt="xunlei">
|
||||
<img class="w-[20px]" v-else-if="link.service === 'OTHER'" src="@/assets/netdisk/xunlei.png" alt="xunlei">
|
||||
<a class="truncate-3-lines" v-else>AIPAN</a>
|
||||
<span class="dark:text-white" v-if="link.pwd">提取码：{{ link.pwd }}</span>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="py-[20px] dark:bg-slate-800">
|
||||
<p class="font-mono text-[12px] text-center text-gray-400">
|
||||
<p class="text-[12px] text-center text-gray-400">
|
||||
爱盼-网盘资源搜索
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -48,7 +48,7 @@ onMounted(async () => {
|
||||
<div class="bg-[#ffffff] dark:bg-gray-800 min-h-screen py-[60px]">
|
||||
<div class="flex flex-row items-center justify-center gap-3 mt-[80px]">
|
||||
<img class="w-[40px] h-[40px] sm:w-[60px] sm:h-[60px]" src="@/assets/my-logo.png" alt="logo">
|
||||
<h1 class="text-[18px] sm:text-[22px] font-serif font-bold dark:text-white ">爱盼-网盘资源搜索</h1>
|
||||
<h1 class="text-[18px] sm:text-[22px] font-bold dark:text-white ">爱盼-网盘资源搜索</h1>
|
||||
</div>
|
||||
<div class="max-w-[1240px] mx-auto mt-[20px]">
|
||||
<div class="w-[80%] md:w-[700px] mx-auto flex flex-row items-center gap-2 relative">
|
||||
@ -67,9 +67,10 @@ onMounted(async () => {
|
||||
<h1 class="text-[12px] sm:text-sm text-slate-600 font-bold dark:text-white mt-[20px]">豆瓣热门影视榜单</h1>
|
||||
<div class="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-8 gap-3 mt-[10px]">
|
||||
<div
|
||||
class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2 transition-transform duration-300 hover:scale-105"
|
||||
class="mx-1 cursor-pointer truncate text-xs font-bold dark:bg-slate-700 dark:text-slate-100 rounded-[5px] p-2 overflow-hidden"
|
||||
v-for="(movie, index) in doubanData" :key="index" type="info" @click="goDouban(movie)">
|
||||
<img class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover"
|
||||
<img
|
||||
class="w-full h-[180px] lg:h-[220px] xl:h-[161px] rounded-[5px] object-cover transition-transform duration-300 hover:scale-105"
|
||||
:src="'https://images.weserv.nl/?url=' + movie.cover" alt="" referrerpolicy="never">
|
||||
<p class="mt-1 text-center truncate">
|
||||
{{ movie.title }}
|
||||
|
||||
@ -118,7 +118,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dark:bg-gray-400 min-h-screen ">
|
||||
<div class="dark:bg-gray-400 min-h-screen">
|
||||
<search-header :keyword="keyword" @search="search"></search-header>
|
||||
<div class="max-w-[1240px] mx-auto grid grid-cols-1 pb-8">
|
||||
<div class="w-full p-3">
|
||||
|
||||
@ -12,7 +12,7 @@ const videoSrc = ref('');
|
||||
const modalShow = ref(false);
|
||||
const videoPlayStatus = ref(false);
|
||||
const videoLoading = ref(false);
|
||||
const videoMuted = ref(true);
|
||||
const videoMuted = ref(false);
|
||||
|
||||
let hls = null; // 缓存 HLS 实例
|
||||
let currentEffectIndex = 0;
|
||||
@ -23,7 +23,7 @@ const getTvSources = async () => {
|
||||
const res = await $fetch('https://r2cf.aipan.me/tv.json');
|
||||
if (videoSrc.value === '') {
|
||||
videoSrc.value = res[0].url;
|
||||
loadHLS(videoSrc.value); // 初始化第一个视频源
|
||||
// loadHLS(videoSrc.value); // 初始化第一个视频源
|
||||
}
|
||||
tvSources.value = res;
|
||||
} catch (error) {
|
||||
@ -33,20 +33,36 @@ const getTvSources = async () => {
|
||||
|
||||
// 加载 HLS 视频
|
||||
const loadHLS = (url) => {
|
||||
if (!hls && Hls.isSupported()) {
|
||||
hls = new Hls();
|
||||
hls.attachMedia(videoPlayer.value);
|
||||
}
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
hls.loadSource(url);
|
||||
videoPlayer.value.play();
|
||||
videoPlayer.value.muted = videoMuted.value;
|
||||
videoPlayStatus.value = true;
|
||||
videoLoading.value = false;
|
||||
modalShow.value = false;
|
||||
} else if (videoPlayer.value.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
// 判断是否是 m3u8 格式
|
||||
if (url.endsWith('.m3u8')) {
|
||||
if (!hls && Hls.isSupported()) {
|
||||
hls = new Hls();
|
||||
hls.attachMedia(videoPlayer.value);
|
||||
}
|
||||
if (Hls.isSupported()) {
|
||||
hls.loadSource(url);
|
||||
videoPlayer.value.play();
|
||||
videoPlayer.value.muted = videoMuted.value;
|
||||
videoPlayStatus.value = true;
|
||||
videoLoading.value = false;
|
||||
modalShow.value = false;
|
||||
} else if (videoPlayer.value.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
// 对于 Safari 或其他原生支持 HLS 的浏览器
|
||||
videoPlayer.value.src = url;
|
||||
videoPlayer.value.play();
|
||||
videoPlayer.value.muted = videoMuted.value;
|
||||
videoPlayStatus.value = true;
|
||||
videoLoading.value = false;
|
||||
modalShow.value = false;
|
||||
}
|
||||
} else {
|
||||
// 如果不是 m3u8，直接将 URL 赋值给 videoPlayer 的 src
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
hls = null; // 确保 HLS 实例不再被使用
|
||||
}
|
||||
videoPlayer.value.src = url;
|
||||
videoPlayer.value.load(); // 加载新视频
|
||||
videoPlayer.value.play();
|
||||
videoPlayer.value.muted = videoMuted.value;
|
||||
videoPlayStatus.value = true;
|
||||
@ -58,10 +74,17 @@ const loadHLS = (url) => {
|
||||
// 视频切换处理
|
||||
const handleSwithcSource = (url) => {
|
||||
videoLoading.value = true;
|
||||
|
||||
// 在切换视频源之前，停止当前视频播放，并清除旧的src
|
||||
if (videoPlayer.value) {
|
||||
videoPlayer.value.pause();
|
||||
videoPlayer.value.removeAttribute('src'); // 清空旧视频源
|
||||
videoPlayer.value.load(); // 重置 <video> 标签
|
||||
}
|
||||
|
||||
videoSrc.value = url;
|
||||
loadHLS(url);
|
||||
};
|
||||
|
||||
// 视频播放和暂停
|
||||
const handleSwitchVideoStatus = () => {
|
||||
if (videoPlayer.value.paused) {
|
||||
@ -145,6 +168,10 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
hls = null; // 确保不再引用该实例
|
||||
}
|
||||
if (videoPlayer.value) {
|
||||
videoPlayer.value.removeEventListener('waiting', handleWaiting);
|
||||
videoPlayer.value.removeEventListener('playing', handlePlaying);
|
||||
@ -156,21 +183,29 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<div class="pt-20 dark:bg-slate-800 min-h-screen bg-no-repeat bg-cover bg-center"
|
||||
:style="{ 'background-image': `url(${bgImage})` }">
|
||||
<!-- Loading text -->
|
||||
<div v-if="videoLoading"
|
||||
class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black/50 z-50">
|
||||
<div class="text-white text-lg font-semibold">正在加载视频，请稍候... <button
|
||||
class="ml-2 bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
@click="videoLoading = !videoLoading">关闭</button></div>
|
||||
</div>
|
||||
<div class="fixed bottom-10 left-0 right-0 w-full h-ful">
|
||||
<div class="bg-black w-full sm:max-w-screen-md 2xl:max-w-screen-lg mx-auto px-10 pt-10 pb-4 rounded-xl">
|
||||
<video ref="videoPlayer" id="video" class="w-full relative shadow-md"></video>
|
||||
<div class="relative">
|
||||
<video ref="videoPlayer" id="video" class="w-full relative shadow-md"></video>
|
||||
<div v-if="!videoPlayStatus"
|
||||
class="absolute top-0 left-0 right-0 bottom-0 video-mask shadow-xl rounded-md flex items-center justify-center">
|
||||
<button class="bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
@click="handleSwithcSource(videoSrc)">开机</button>
|
||||
</div>
|
||||
<div v-if="videoLoading"
|
||||
class="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black/50 z-50 bg-[url('@/assets/tvstatic.gif')]">
|
||||
<div class="text-white text-lg font-semibold">
|
||||
<button class="ml-2 bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
@click="videoLoading = !videoLoading">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-12">
|
||||
<div class="col-span-4 space-x-2">
|
||||
<button class="bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md" type="button"
|
||||
<button class="bg-gray-500 text-white px-2 py-1 rounded-md text-xs hover:text-md" type="button"
|
||||
@click="modalShow = !modalShow">频道</button>
|
||||
<button class="bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md" type="button"
|
||||
<button class="bg-gray-500 text-white px-2 py-1 rounded-md text-xs hover:text-md" type="button"
|
||||
@click="handleMute">{{ !videoMuted ? '静音' : '取消静音' }}</button>
|
||||
</div>
|
||||
<div class="col-span-4">
|
||||
@ -180,22 +215,22 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
<div class="col-span-4 flex justify-end">
|
||||
<button type="button"
|
||||
class=" ml-2 bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
class=" ml-2 bg-gray-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
@click="handleSwitchVideoStatus">
|
||||
{{ !videoPlayStatus ? '播放' : '暂停' }}
|
||||
</button>
|
||||
<button type="button"
|
||||
class=" ml-2 bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
class=" ml-2 bg-gray-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
@click="handleSwitchVideoTheme">
|
||||
换肤
|
||||
</button>
|
||||
<button type="button"
|
||||
class=" ml-2 bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
class=" ml-2 bg-gray-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
@click="handleResetTheme">
|
||||
重置
|
||||
</button>
|
||||
<button type="button"
|
||||
class=" ml-2 bg-red-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
class=" ml-2 bg-gray-500 text-white px-2 py-1 rounded-md text-xs hover:text-md"
|
||||
@click="handleFullscreen">
|
||||
全屏
|
||||
</button>
|
||||
@ -234,6 +269,10 @@ onBeforeUnmount(() => {
|
||||
|
||||
</template>
|
||||
<style scoped>
|
||||
.video-mask {
|
||||
background: repeating-linear-gradient(0deg, #000, #302e2e 4px, #000);
|
||||
}
|
||||
|
||||
.nostalgia-video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
export const theme = {
|
||||
darkMode: 'class',
|
||||
extend: {
|
||||
fontFamily: {
|
||||
'inter': ['Inter', 'sans-serif'],
|
||||
'poetsen-one': ['Poetsen One', 'sans-serif'],
|
||||
'sedan-sc': ['Sedan SC', 'sans-serif'],
|
||||
'breiem-hand': ['Briem Hand', 'sans-serif'],
|
||||
'noto-sans-cn': ['Noto Sans Simplified Chinese', 'sans-serif']
|
||||
}
|
||||
}
|
||||
};
|
||||
darkMode: "class",
|
||||
extend: {
|
||||
fontFamily: {
|
||||
inter: ["Inter", "sans-serif"],
|
||||
"poetsen-one": ["Poetsen One", "sans-serif"],
|
||||
"sedan-sc": ["Sedan SC", "sans-serif"],
|
||||
"breiem-hand": ["Briem Hand", "sans-serif"],
|
||||
"noto-sans-cn": ["Noto Sans Simplified Chinese", "sans-serif"],
|
||||
"douyin-meihao": ["Douyin Meihao", "sans-serif"],
|
||||
"fangzheng-kaiti-jian": ["Fangzheng Kaiti Jian", "sans-serif"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user