This commit is contained in:
杜恒 2021-01-29 18:54:33 +08:00
parent 623311c45d
commit 78947a1aff
16 changed files with 568 additions and 34 deletions

1
assets/css/joe.live.css Normal file
View File

@ -0,0 +1 @@
.joe_live__type{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_live__type-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_live__type-title::before{content:'';position:absolute;border-style:solid;border-width:10px;bottom:-20px;left:0;z-index:-1;border-color:var(--theme) transparent transparent}.joe_live__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_live__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_live__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_live__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_live__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

72
assets/css/joe.live.scss Normal file
View File

@ -0,0 +1,72 @@
.joe_live {
&__type {
position: relative;
background: var(--background);
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
padding: 60px 15px 15px;
margin-bottom: 15px;
&-title {
position: absolute;
top: 15px;
left: -10px;
background: var(--theme);
color: #fff;
font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px;
line-height: 30px;
padding: 0 12px;
border-radius: 2px 2px 2px 0;
user-select: none;
&::before {
content: '';
position: absolute;
border-style: solid;
border-width: 10px;
bottom: -20px;
left: 0;
z-index: -1;
border-color: var(--theme) transparent transparent;
}
}
&-list {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border-top: 1px solid var(--classC);
padding-top: 15px;
.item {
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: var(--classD);
height: 28px;
line-height: 28px;
border-radius: 14px;
cursor: pointer;
color: var(--routine);
font-size: 12px;
padding: 0 15px;
text-align: center;
transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;
&.active {
transform: translateY(-2px);
color: #fff;
background: var(--theme);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
}
.error {
text-align: center;
color: var(--routine);
user-select: none;
}
}
}
}

1
assets/css/joe.video.css Normal file

File diff suppressed because one or more lines are too long

231
assets/css/joe.video.scss Normal file
View File

@ -0,0 +1,231 @@
.joe_video {
&__type {
position: relative;
background: var(--background);
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
padding: 60px 15px 15px;
margin-bottom: 15px;
&-title {
position: absolute;
top: 15px;
left: -10px;
background: var(--theme);
color: #fff;
font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px;
line-height: 30px;
padding: 0 12px;
border-radius: 2px 2px 2px 0;
user-select: none;
&::before {
content: '';
position: absolute;
border-style: solid;
border-width: 10px;
bottom: -20px;
left: 0;
z-index: -1;
border-color: var(--theme) transparent transparent;
}
}
&-list {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border-top: 1px solid var(--classC);
padding-top: 15px;
.item {
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: var(--classD);
height: 28px;
line-height: 28px;
border-radius: 14px;
cursor: pointer;
color: var(--routine);
font-size: 12px;
padding: 0 15px;
text-align: center;
transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;
&.active {
transform: translateY(-2px);
color: #fff;
background: var(--theme);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
}
.error {
text-align: center;
color: var(--routine);
user-select: none;
}
}
}
&__list {
position: relative;
background: var(--background);
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
padding: 60px 15px 15px;
margin-bottom: 15px;
&-title {
position: absolute;
top: 15px;
left: -10px;
background: var(--theme);
color: #fff;
font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px;
line-height: 30px;
padding: 0 12px;
border-radius: 2px 2px 2px 0;
user-select: none;
&::before {
content: '';
position: absolute;
border-style: solid;
border-width: 10px;
bottom: -20px;
left: 0;
z-index: -1;
border-color: var(--theme) transparent transparent;
}
}
&-item {
display: grid;
gap: 15px;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid var(--classC);
padding-top: 15px;
.item {
position: relative;
border-radius: var(--radius-inner);
overflow: hidden;
.year {
position: absolute;
top: 8px;
right: 8px;
padding: 2px 5px;
border-radius: 2px;
font-size: 12px;
font-style: normal;
background: #ff6800;
color: #fff;
z-index: 3;
}
.thumb {
position: relative;
height: 220px;
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease-out;
z-index: 2;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
opacity: 0;
background: url(../img/play.png) no-repeat;
transform: scale(2);
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
z-index: 3;
}
&:hover {
&::before {
background: rgba(0, 0, 0, 0.5);
}
&::after {
opacity: 0.8;
transform: scale(1);
}
}
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
text-align: center;
color: var(--routine);
background: var(--classD);
height: 32px;
line-height: 32px;
font-size: 12px;
}
}
&:empty {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 180px;
&::after {
content: '';
display: block;
width: 70px;
height: 70px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
&__pagination {
display: flex;
align-items: center;
justify-content: flex-end;
&-item {
user-select: none;
cursor: pointer;
margin-left: 5px;
height: 32px;
line-height: 32px;
padding: 0 15px;
background: var(--background);
color: var(--main);
border-radius: 2px;
transition: background 0.35s, color 0.35s;
svg {
fill: var(--routine);
transition: fill 0.35s;
}
.next {
transform: rotate(180deg);
}
&.active,
&:hover {
color: #fff;
background: var(--theme);
svg {
fill: #fff;
}
}
}
}
}

File diff suppressed because one or more lines are too long

View File

@ -80,6 +80,22 @@
object-fit: cover; object-fit: cover;
} }
} }
&:empty {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 180px;
&::after {
content: '';
display: block;
width: 70px;
height: 70px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
} }
&__pagination { &__pagination {
display: flex; display: flex;
@ -113,10 +129,4 @@
} }
} }
} }
&__loading {
display: none;
align-items: center;
justify-content: center;
padding: 50px 0;
}
} }

BIN
assets/img/play.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

6
assets/js/joe.live.js Normal file
View File

@ -0,0 +1,6 @@
/* 直播页面需要用到JS */
console.time('Live.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
console.timeEnd('Live.js执行时长');
});

97
assets/js/joe.video.js Normal file
View File

@ -0,0 +1,97 @@
/* 视频页面需要用到JS */
console.time('Video.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
/* 当前的分类id */
let queryData = {
pg: 0,
t: -999
};
/* 总页数 */
let total = 0;
/* 是否正在加载列表 */
let isLoading = false;
/* 获取视频分类 */
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: {
routeType: 'maccms_list'
},
success(res) {
if (res.code !== 1) return $('.joe_video__type-list').html(`<li class="error">${res.data}</li>`);
let htmlStr = '<li class="item" data-t="">全部</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 .item').first().click();
}
});
/* 点击切换分类 */
$('.joe_video__type-list').on('click', '.item', function () {
const t = $(this).attr('data-t');
if (t === queryData.t || isLoading) return;
$(this).addClass('active').siblings().removeClass('active');
queryData.pg = 0;
queryData.t = t;
renderDom();
});
/* 渲染视频列表 */
function renderDom() {
isLoading = true;
$('.joe_video__list-item').html('');
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: {
routeType: 'maccms_list',
t: queryData.t,
pg: queryData.pg,
ac: 'videolist'
},
success(res) {
if (res.code !== 1) return;
let htmlStr = '';
res.data.list.forEach(_ => {
htmlStr += `
<a class="item" 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>
<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}">
</div>
<p class="title">${_.vod_name}</p>
</a>`;
});
$('.joe_video__list-item').html(htmlStr);
new LazyLoad('.video_lazyload');
isLoading = false;
total = res.data.pagecount;
initPagination();
}
});
}
/* 初始化分页 */
function initPagination() {
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>`;
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}"><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').on('click', '.joe_video__pagination-item', function () {
const pg = $(this).attr('data-pg');
if (!pg || isLoading) return;
queryData.pg = Number(pg);
renderDom();
});
console.timeEnd('Video.js执行时长');
});

View File

@ -1,4 +1,4 @@
/* 详情页和独立页面需要用到的JS */ /* 壁纸页面需要用到的JS */
console.time('Wallpaper.js执行时长'); console.time('Wallpaper.js执行时长');
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -21,12 +21,11 @@ document.addEventListener('DOMContentLoaded', () => {
routeType: 'wallpaper_type' routeType: 'wallpaper_type'
}, },
success(res) { success(res) {
if (res.code !== 1) return $('.joe_wallpaper__type-list').html('<li class="error">壁纸抓取失败!请联系作者!</li>');
let htmlStr = ''; let htmlStr = '';
if (res.code !== 1) return (htmlStr = '<li class="error">壁纸抓取失败!请联系作者!</li>');
res.data.forEach(_ => (htmlStr += `<li class="item" data-cid="${_.id}">${_.name}</li>`)); res.data.forEach(_ => (htmlStr += `<li class="item" data-cid="${_.id}">${_.name}</li>`));
$('.joe_wallpaper__type-list').html(htmlStr); $('.joe_wallpaper__type-list').html(htmlStr);
$('.joe_wallpaper__type-list .item').first().click(); $('.joe_wallpaper__type-list .item').first().click();
queryData.cid = $('.joe_wallpaper__type-list .item').first().attr('data-cid');
} }
}); });
@ -43,7 +42,6 @@ document.addEventListener('DOMContentLoaded', () => {
/* 渲染DOM */ /* 渲染DOM */
function getList() { function getList() {
isLoading = true; isLoading = true;
$('.joe_wallpaper__loading').css('display', 'flex');
$('.joe_wallpaper__list').html(''); $('.joe_wallpaper__list').html('');
$.ajax({ $.ajax({
url: Joe.BASE_API, url: Joe.BASE_API,
@ -55,19 +53,18 @@ document.addEventListener('DOMContentLoaded', () => {
count: queryData.count count: queryData.count
}, },
success(res) { success(res) {
let htmlStr = '';
if (res.code !== 1) return; if (res.code !== 1) return;
let htmlStr = '';
res.data.forEach(_ => { res.data.forEach(_ => {
htmlStr += ` htmlStr += `
<a class="item animated bounceIn" data-fancybox="gallery" href="${_.url}"> <a class="item animated bounceIn" data-fancybox="gallery" href="${_.url}">
<img class="wallpaper_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.img_1024_768}"> <img onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" class="wallpaper_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.img_1024_768}" alt="壁纸">
</a>`; </a>`;
}); });
$('.joe_wallpaper__list').html(htmlStr); $('.joe_wallpaper__list').html(htmlStr);
new LazyLoad('.wallpaper_lazyload'); new LazyLoad('.wallpaper_lazyload');
total = res.total; total = res.total;
isLoading = false; isLoading = false;
$('.joe_wallpaper__loading').css('display', 'none');
initPagination(); initPagination();
} }
}); });

View File

@ -216,3 +216,41 @@ function _getWallpaperList($self)
]); ]);
} }
} }
/* 抓取苹果CMS视频分类 */
function _getMaccmsList($self)
{
header("HTTP/1.1 200 OK");
$cms_api = Helper::options()->JMaccmsAPI;
$ac = $self->request->ac ? $self->request->ac : '';
$ids = $self->request->ids ? $self->request->ids : '';
$t = $self->request->t ? $self->request->t : '';
$pg = $self->request->pg ? $self->request->pg : '';
$wd = $self->request->wd ? $self->request->wd : '';
if ($cms_api) {
$arrContextOptions = ['ssl' => ['verify_peer' => false, 'verify_peer_name' => false,]];
$json = file_get_contents(
$cms_api . '?ac=' . $ac . '&ids=' . $ids . '&t=' . $t . '&pg=' . $pg . '&wd=' . $wd,
false,
stream_context_create($arrContextOptions)
);
$res = json_decode($json, TRUE);
if ($res['code'] === 1) {
$self->response->throwJson([
"code" => 1,
"data" => $res,
]);
} else {
$self->response->throwJson([
"code" => 0,
"data" => "抓取失败!请联系作者!"
]);
}
} else {
$self->response->throwJson([
"code" => 0,
"data" => "后台苹果CMS API未填写"
]);
}
}

View File

@ -63,6 +63,9 @@ function themeInit($self)
case 'wallpaper_list': case 'wallpaper_list':
_getWallpaperList($self); _getWallpaperList($self);
break; break;
case 'maccms_list':
_getMaccmsList($self);
break;
}; };
} }
} }

View File

@ -627,4 +627,17 @@ function themeConfig($form)
); );
$JBaiduToken->setAttribute('class', 'joe_content joe_other'); $JBaiduToken->setAttribute('class', 'joe_content joe_other');
$form->addInput($JBaiduToken); $form->addInput($JBaiduToken);
$JMaccmsAPI = new Typecho_Widget_Helper_Form_Element_Text(
'JMaccmsAPI',
NULL,
NULL,
'苹果CMS开放API',
'介绍请填写苹果CMS V10开放API用于视频页面使用<br />
例如ok资源网提供的https://api.okzy.tv/api.php/provide/vod/ <br />
如果您搭建了苹果cms网站那么用你自己的即可如果没有请去网上找API <br />
'
);
$JMaccmsAPI->setAttribute('class', 'joe_content joe_other');
$form->addInput($JMaccmsAPI);
} ?> } ?>

40
live.php Normal file
View File

@ -0,0 +1,40 @@
<?php
/**
* 直播
*
* @package custom
*
**/
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<?php $this->need('public/include.php'); ?>
<!-- 直播页面需要用到的CSS及JS -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.live.css'); ?>">
<script src="<?php $this->options->themeUrl('assets/js/joe.live.js'); ?>"></script>
</head>
<body>
<div id="Joe">
<?php $this->need('public/header.php'); ?>
<div class="joe_container">
<div class="joe_main">
<div class="joe_live__type">
<div class="joe_live__type-title">直播分类</div>
<ul class="joe_live__type-list">
<li class="error">正在拼命加载中...</li>
</ul>
</div>
</div>
<?php $this->need('public/aside.php'); ?>
</div>
<?php $this->need('public/footer.php'); ?>
</div>
</body>
</html>

45
video.php Normal file
View File

@ -0,0 +1,45 @@
<?php
/**
* 视频
*
* @package custom
*
**/
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<?php $this->need('public/include.php'); ?>
<!-- 视频页面需要用到的CSS及JS -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.video.css'); ?>">
<script src="<?php $this->options->themeUrl('assets/js/joe.video.js'); ?>"></script>
</head>
<body>
<div id="Joe">
<?php $this->need('public/header.php'); ?>
<div class="joe_container">
<div class="joe_main">
<div class="joe_video__type">
<div class="joe_video__type-title">视频分类</div>
<ul class="joe_video__type-list">
<li class="error">正在拼命加载中...</li>
</ul>
</div>
<div class="joe_video__list">
<div class="joe_video__list-title">视频列表</div>
<div class="joe_video__list-item"></div>
</div>
<ul class="joe_video__pagination"></ul>
</div>
<?php $this->need('public/aside.php'); ?>
</div>
<?php $this->need('public/footer.php'); ?>
</div>
</body>
</html>

View File

@ -30,26 +30,6 @@
<li class="error">正在拼命加载中...</li> <li class="error">正在拼命加载中...</li>
</ul> </ul>
</div> </div>
<div class="joe_wallpaper__loading">
<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="#409eff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle cx="5" cy="50" r="5">
<animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite" />
<animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite" />
</circle>
<circle cx="27" cy="5" r="5">
<animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite" />
<animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite" />
</circle>
<circle cx="49" cy="50" r="5">
<animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite" />
<animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
</div>
<div class="joe_wallpaper__list"></div> <div class="joe_wallpaper__list"></div>
<ul class="joe_wallpaper__pagination"></ul> <ul class="joe_wallpaper__pagination"></ul>
</div> </div>