caojiezi2003/Jony
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
haoouba 2021-01-29 20:30:12 +08:00
parent 7a10ee84cb
commit e1a2bf3fed
5 changed files with 357 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/joe.wallpaper.css
View File

File diff suppressed because one or more lines are too long

37
assets/css/joe.wallpaper.scss
View File

@ -74,11 +74,48 @@
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
margin-bottom: 15px; margin-bottom: 15px;
.item { .item {
position: relative;
display: block; display: block;
img { img {
max-width: 100%; max-width: 100%;
object-fit: cover; object-fit: cover;
} }
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.35s;
z-index: 2;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
transform: scale(2);
transition: transform 0.35s, opacity 0.35s;
opacity: 0;
}
&:hover {
&::before {
background: rgba(0, 0, 0, 0.5);
}
&::after {
transform: scale(1);
opacity: 1;
}
}
} }
&:empty { &:empty {
position: relative; position: relative;

111
assets/js/joe.video.js
View File

@ -1,97 +1,104 @@
/* 视频页面需要用到JS */ /* 视频页面需要用到JS */
console.time('Video.js执行时长'); console.time('Video.js执行时长')
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const p = new URLSearchParams(window.location.search)
/* 判断渲染详情页还是列表页 */
if (p.get('vod_id')) {
initVideoDetail()
} else {
initVideoList()
}
function initVideoList() {
/* 当前的分类id */ /* 当前的分类id */
let queryData = { let queryData = {
pg: 0, pg: 0,
t: -999 t: -999
}; }
/* 总页数 */ /* 总页数 */
let total = 0; let total = 0
/* 是否正在加载列表 */ /* 是否正在加载列表 */
let isLoading = false; let isLoading = false
/* 获取视频分类 */ /* 获取视频分类 */
$.ajax({ $.ajax({
url: Joe.BASE_API, url: Joe.BASE_API,
type: 'POST', type: 'POST',
data: { data: { routeType: 'maccms_list' },
routeType: 'maccms_list'
},
success(res) { success(res) {
if (res.code !== 1) return $('.joe_video__type-list').html(`<li class="error">${res.data}</li>`); if (res.code !== 1) return $('.joe_video__type-list').html(`<li class="error">${res.data}</li>`)
let htmlStr = '<li class="item" data-t="">全部</li>'; let htmlStr = '<li class="item" data-t="">全部</li>'
res.data.class.forEach(_ => (htmlStr += `<li class="item" data-t="${_.type_id}">${_.type_name}</li>`)); res.data.class.forEach(_ => (htmlStr += `<li class="item" data-t="${_.type_id}">${_.type_name}</li>`))
$('.joe_video__type-list').html(htmlStr); $('.joe_video__type-list').html(htmlStr)
$('.joe_video__type-list .item').first().click(); $('.joe_video__type-list .item').first().click()
} }
}); })
/* 点击切换分类 */ /* 点击切换分类 */
$('.joe_video__type-list').on('click', '.item', function () { $('.joe_video__type-list').on('click', '.item', function () {
const t = $(this).attr('data-t'); const t = $(this).attr('data-t')
if (t === queryData.t || isLoading) return; if (t === queryData.t || isLoading) return
$(this).addClass('active').siblings().removeClass('active'); window.scrollTo({ top: 0, behavior: 'smooth' })
queryData.pg = 0; $(this).addClass('active').siblings().removeClass('active')
queryData.t = t; queryData.pg = 0
renderDom(); queryData.t = t
}); renderDom()
})
/* 渲染视频列表 */ /* 渲染视频列表 */
function renderDom() { function renderDom() {
isLoading = true; isLoading = true
$('.joe_video__list-item').html(''); $('.joe_video__list-item').html('')
$.ajax({ $.ajax({
url: Joe.BASE_API, url: Joe.BASE_API,
type: 'POST', type: 'POST',
data: { data: { routeType: 'maccms_list', t: queryData.t, pg: queryData.pg, ac: 'videolist' },
routeType: 'maccms_list',
t: queryData.t,
pg: queryData.pg,
ac: 'videolist'
},
success(res) { success(res) {
if (res.code !== 1) return; if (res.code !== 1) return
let htmlStr = ''; let htmlStr = ''
res.data.list.forEach(_ => { res.data.list.forEach(_ => {
htmlStr += ` htmlStr += `
<a class="item" href="${window.location.href + '?vod_id=' + _.vod_id}" target="_blank" rel="noopener noreferrer nofollow"> <a class="item animated bounceIn" href="${window.location.href + '?vod_id=' + _.vod_id}" target="_blank" rel="noopener noreferrer nofollow">
<i class="year" style="display: ${_.vod_year ? 'block' : 'none'}">${_.vod_year}</i> <i class="year" style="display: ${_.vod_year ? 'block' : 'none'}">${_.vod_year}</i>
<div class="thumb"> <div class="thumb">
<img onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" class="pic video_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.vod_pic}" alt="${_.vod_name}"> <img onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" class="pic video_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.vod_pic}" alt="${_.vod_name}">
</div> </div>
<p class="title">${_.vod_name}</p> <p class="title">${_.vod_name}</p>
</a>`; </a>`
}); })
$('.joe_video__list-item').html(htmlStr); $('.joe_video__list-item').html(htmlStr)
new LazyLoad('.video_lazyload'); new LazyLoad('.video_lazyload')
isLoading = false; isLoading = false
total = res.data.pagecount; total = res.data.pagecount
initPagination(); initPagination()
} }
}); })
} }
/* 初始化分页 */ /* 初始化分页 */
function initPagination() { function initPagination() {
let htmlStr = ''; let htmlStr = ''
if (queryData.pg !== 0) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li><li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">${queryData.pg}</li>`; if (queryData.pg !== 0) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li><li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">${queryData.pg}</li>`
htmlStr += `<li class="active joe_video__pagination-item">${queryData.pg + 1}</li>`; htmlStr += `<li class="active joe_video__pagination-item">${queryData.pg + 1}</li>`
if (queryData.pg != total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}">${queryData.pg + 2}</li>`; if (queryData.pg != total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}">${queryData.pg + 2}</li>`
if (queryData.pg < total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}"><svg class="next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li>`; if (queryData.pg < total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}"><svg class="next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li>`
$('.joe_video__pagination').html(htmlStr); $('.joe_video__pagination').html(htmlStr)
} }
/* 切换分页 */ /* 切换分页 */
$('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () { $('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () {
const pg = $(this).attr('data-pg'); const pg = $(this).attr('data-pg')
if (!pg || isLoading) return; if (!pg || isLoading) return
queryData.pg = Number(pg); window.scrollTo({ top: 0, behavior: 'smooth' })
renderDom(); queryData.pg = Number(pg)
}); renderDom()
})
}
console.timeEnd('Video.js执行时长'); function initVideoDetail() {}
});
console.timeEnd('Video.js执行时长')
})

2
assets/js/joe.wallpaper.js
View File

@ -33,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
$('.joe_wallpaper__type-list').on('click', '.item', function () { $('.joe_wallpaper__type-list').on('click', '.item', function () {
const cid = $(this).attr('data-cid'); const cid = $(this).attr('data-cid');
if (queryData.cid === cid || isLoading) return; if (queryData.cid === cid || isLoading) return;
window.scrollTo({ top: 0, behavior: 'smooth' })
$(this).addClass('active').siblings().removeClass('active'); $(this).addClass('active').siblings().removeClass('active');
queryData.cid = cid; queryData.cid = cid;
queryData.start = 0; queryData.start = 0;
@ -84,6 +85,7 @@ document.addEventListener('DOMContentLoaded', () => {
$('.joe_wallpaper__pagination').on('click', '.joe_wallpaper__pagination-item', function () { $('.joe_wallpaper__pagination').on('click', '.joe_wallpaper__pagination-item', function () {
const start = $(this).attr('data-start'); const start = $(this).attr('data-start');
if (!start || isLoading) return; if (!start || isLoading) return;
window.scrollTo({ top: 0, behavior: 'smooth' })
queryData.start = Number(start); queryData.start = Number(start);
getList(); getList();
}); });