This commit is contained in:
杜恒 2021-02-02 18:25:32 +08:00
parent 1de54fa2bb
commit 7a7dacd66a
8 changed files with 345 additions and 9 deletions

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,8 @@
padding: 60px 15px 15px; padding: 60px 15px 15px;
margin-bottom: 15px; margin-bottom: 15px;
&-title { &-title {
display: flex;
align-items: center;
position: absolute; position: absolute;
top: 15px; top: 15px;
left: -10px; left: -10px;
@ -16,18 +18,25 @@
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15); box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding: 0 12px; padding: 0 8px 0 12px;
border-radius: 2px 2px 2px 0; border-radius: 2px 2px 2px 0;
user-select: none; user-select: none;
.icon {
width: 15px;
height: 15px;
fill: #fff;
margin-left: 5px;
cursor: pointer;
}
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -10px;
left: -10px;
border-style: solid; border-style: solid;
border-width: 10px; border-width: 10px;
bottom: -20px;
left: 0;
z-index: -1;
border-color: var(--theme) transparent transparent; border-color: var(--theme) transparent transparent;
transform: rotate(90deg);
} }
} }
&-list { &-list {
@ -69,4 +78,138 @@
} }
} }
} }
&__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
&-item {
display: block;
width: 100%;
overflow: hidden;
border-radius: 8px;
.thumb {
position: relative;
width: 100%;
height: 140px;
.screenshot {
width: 100%;
height: 100%;
object-fit: cover;
}
.recommendTagName {
position: absolute;
top: 8px;
left: 8px;
background: #f90;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 2px;
font-style: normal;
z-index: 4;
}
&::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);
}
}
}
.description {
background: var(--background);
padding: 10px;
.introduction {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--main);
margin-bottom: 10px;
}
.meta {
display: flex;
align-items: center;
justify-content: space-between;
.user {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
img {
width: 22px;
height: 22px;
object-fit: cover;
border-radius: 50%;
margin-right: 3px;
}
span {
color: var(--routine);
font-size: 12px;
}
}
.game {
font-size: 12px;
display: flex;
align-items: center;
.icon {
width: 13px;
height: 13px;
margin-right: 3px;
}
.total {
color: var(--minor);
margin-right: 8px;
}
.name {
color: #f90;
}
}
}
}
}
&: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%;
}
}
}
} }

View File

@ -2,5 +2,108 @@
console.time('Live.js执行时长'); console.time('Live.js执行时长');
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const p = new URLSearchParams(window.location.search);
const gameId = p.get('gameId');
if (gameId) {
} else {
initLiveList();
}
/* 初始化直播列表 */
function initLiveList() {
let queryData = {
page: 1,
gameId: '',
index: 0,
isLoading: false
};
/* 点击切换分类 */
$('.joe_live__type-title .icon').on('click', function () {
if (queryData.isLoading) return;
if (queryData.index === 3) queryData.index = 0;
queryData.index++;
renderLiveType();
});
/* 分类列表点击事件 */
$('.joe_live__type-list').on('click', '.item', function () {
if (queryData.isLoading) return;
$(this).addClass('active').siblings().removeClass('active');
queryData.page = 1;
queryData.gameId = $(this).attr('data-gameId');
renderLiveList();
});
/* 渲染分类 */
renderLiveType();
function renderLiveType() {
$.ajax({
url: '/usr/themes/joe/assets/json/joe.live.json',
success(res) {
const item = res[queryData.index];
$('.joe_live__type-title .text').html(item.name);
let htmlStr = '<li class="item animated swing" data-gameId="">全部</li>';
item.list.forEach(_ => (htmlStr += `<li class="item animated swing" data-gameId="${_.gameId}">${_.name}</li>`));
$('.joe_live__type-list').html(htmlStr);
$('.joe_live__type-list .item').first().click();
}
});
}
/* 渲染列表 */
function renderLiveList() {
queryData.isLoading = true;
$('.joe_live__list').html('');
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: {
routeType: 'huya_list',
page: queryData.page,
gameId: queryData.gameId
},
success(res) {
if (res.code !== 1) return;
let htmlStr = '';
res.data.datas.forEach(_ => {
htmlStr += `
<a target="_blank" rel="noopener noreferrer nofollow" class="joe_live__list-item animated bounceIn" href="#">
<div class="thumb">
<i class="recommendTagName" style="display: ${_.recommendTagName ? '' : 'none'}">${_.recommendTagName}</i>
<img class="screenshot screenshot_lazyload" onerror="javascript: this.src = '${Joe.LAZY_LOAD}';" src="${Joe.LAZY_LOAD}" data-original="${_.screenshot}" alt="${_.introduction}" />
</div>
<div class="description">
<p class="introduction">${_.introduction}</p>
<div class="meta">
<div class="user">
<img src="${_.avatar180}" alt="${_.nick}"/>
<span>${_.nick}</span>
</div>
<div class="game">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="13" height="13">
<path d="M859.9104 609.92512l0 45.6c-0.67968 2.21952-1.5104 4.4352-1.9648 6.70464-4.66048 24.09984-7.28448 48.82944-14.31552 72.22016-20.84992 69.02016-59.92064 126.53952-114.6944 173.50016-42.24512 36.2496-89.7856 62.36544-144.1344 75.22048-17.87008 4.23552-36.19456 6.73024-54.32064 10.0352l-45.5744 0c-2.21952-0.6848-4.49024-1.72032-6.75456-1.87008-48.12544-2.9952-93.72544-15.52512-136.50048-37.38496-80.86528-41.18528-139.19488-102.5152-165.83552-190.74048-5.67424-18.8544-8.03968-38.62016-11.9744-57.97504l0-43.50976c1.7152-10.69056 3.2-21.47456 5.21984-32.16 8.61952-46.68544 29.36576-88.0256 56.83968-126.19008 25.91488-35.92064 53.44-70.70464 78.016-107.53536 26.56896-39.95008 39.424-84.2944 31.88992-132.9152-1.4848-9.60512-2.87488-19.20896-4.33536-28.76416 0.98048-0.25088 1.9648-0.45056 2.9504-0.73088 59.31008 62.16064 68.96512 138.46528 60.49408 220.92032 2.17088-2.31936 3.98592-3.93472 5.37088-5.79968 50.33984-68.08448 71.96416-143.29984 55.55456-227.54688-10.42944-53.58976-32.99456-101.76512-70.32448-141.81504C369.3056 61.84576 349.69472 47.65568 331.61984 32l18.65472 0c1.536 0.62976 2.976 1.7152 4.53504 1.86496 32.82048 2.81984 63.65056 12.95488 93.02016 27.2 67.17056 32.51584 121.62048 80.58496 167.17056 139.22048 66.9504 86.27968 110.48448 181.99424 119.10528 292.19968 3.30496 42.06976-0.9856 82.95552-12.19968 123.2896-4.23552 15.27552-10.21056 30.04544-15.68 45.94944 21.72544-9.25056 38.24-23.38944 50.9952-41.7152 38.04032-54.77504 48.67456-115.85536 40.05504-183.38048 2.80064 3.24992 4.23552 4.53504 5.21472 6.14528 22.91456 36.19968 40.05504 74.81472 49.0048 116.78464C855.05024 576.17024 857.11488 593.1648 859.9104 609.92512M501.56544 529.61536c-0.85504 0.60544-1.79072 1.2352-2.67008 1.84064-1.18528 16.64-2.06976 33.30048-3.68 49.93536-2.37056 25.38496-8.44544 49.85984-20.32 72.62464-14.52032 27.87968-38.7904 45.21984-65.69088 59.01056-29.00992 14.9696-47.28448 36.34944-49.65504 70.10048-2.46912 34.70976 7.96544 63.86944 35.94496 85.20064 26.21568 19.96032 56.84096 26.4704 89.3056 25.38496 51.82976-1.6896 90.4448-26.32064 105.92512-78.1952 11.11552-37.23008 9.30048-74.71488 1.86496-112.19456-10.16064-51.37536-28.76544-99.26528-60.60032-141.2352C523.04512 550.36032 511.7504 540.40448 501.56544 529.61536" fill="#fc6528"></path>
</svg>
<span class="total">${parseNum(_.totalCount)}</span>
<span class="name">${_.gameFullName}</span>
</div>
</div>
</div>
</a>
`;
});
$('.joe_live__list').html(htmlStr);
new LazyLoad('.screenshot_lazyload');
},
complete: () => (queryData.isLoading = false)
});
}
function parseNum(num = 0) {
if (num >= 10000) return Math.round(num / 1000) / 10 + '万';
return num;
}
}
console.timeEnd('Live.js执行时长'); console.timeEnd('Live.js执行时长');
}); });

61
assets/json/joe.live.json Normal file
View File

@ -0,0 +1,61 @@
[
{
"name": "娱乐天地",
"list": [
{ "name": "星秀", "gameId": 1663 },
{ "name": "户外", "gameId": 2165 },
{ "name": "二次元", "gameId": 2633 },
{ "name": "一起看", "gameId": 2135 },
{ "name": "美食", "gameId": 2752 },
{ "name": "颜值", "gameId": 2168 },
{ "name": "交友", "gameId": 4079 },
{ "name": "音乐", "gameId": 3793 },
{ "name": "体育", "gameId": 2356 }
]
},
{
"name": "网游竞技",
"list": [
{ "name": "英雄联盟", "gameId": 1 },
{ "name": "LOL云顶之弈", "gameId": 5485 },
{ "name": "穿越火线", "gameId": 4 },
{ "name": "DNF", "gameId": 2 },
{ "name": "魔兽世界", "gameId": 8 },
{ "name": "炉石传说", "gameId": 393 },
{ "name": "DOTA2", "gameId": 7 },
{ "name": "坦克世界", "gameId": 802 },
{ "name": "CS:GO", "gameId": 862 },
{ "name": "魔兽争霸3", "gameId": 4615 },
{ "name": "问道", "gameId": 107 },
{ "name": "使命召唤", "gameId": 100137 }
]
},
{
"name": "单机热游",
"list": [
{ "name": "绝地求生", "gameId": 2793 },
{ "name": "主机游戏", "gameId": 100032 },
{ "name": "我的世界", "gameId": 1732 },
{ "name": "方舟", "gameId": 1997 },
{ "name": "怪物猎人", "gameId": 3519 },
{ "name": "逃离塔科夫", "gameId": 3493 },
{ "name": "怀旧游戏", "gameId": 100125 },
{ "name": "骑马与砍杀", "gameId": 4783 },
{ "name": "拾遗记", "gameId": 4913 }
]
},
{
"name": "手游休闲",
"list": [
{ "name": "王者荣耀", "gameId": 2336 },
{ "name": "和平精英", "gameId": 3203 },
{ "name": "综合手游", "gameId": 100029 },
{ "name": "狼人杀", "gameId": 100049 },
{ "name": "QQ飞车", "gameId": 2928 },
{ "name": "CF手游", "gameId": 2413 },
{ "name": "跑跑手游", "gameId": 2620 },
{ "name": "皇室战争", "gameId": 2439 },
{ "name": "火影手游", "gameId": 2429 }
]
}
]

View File

@ -241,3 +241,24 @@ function _getMaccmsList($self)
]); ]);
} }
} }
/* 获取虎牙视频列表 */
function _getHuyaList($self)
{
header("HTTP/1.1 200 OK");
$gameId = $self->request->gameId;
$page = $self->request->page;
$json = _curl("https://www.huya.com/cache.php?m=LiveList&do=getLiveListByPage&gameId={$gameId}&tagAll=0&page={$page}");
$res = json_decode($json, TRUE);
if ($res['status'] === 200) {
$self->response->throwJson([
"code" => 1,
"data" => $res['data'],
]);
} else {
$self->response->throwJson([
"code" => 0,
"data" => "抓取失败!请联系作者!"
]);
}
}

View File

@ -66,6 +66,9 @@ function themeInit($self)
case 'maccms_list': case 'maccms_list':
_getMaccmsList($self); _getMaccmsList($self);
break; break;
case 'huya_list':
_getHuyaList($self);
break;
}; };
} }
} }

View File

@ -25,11 +25,17 @@
<div class="joe_container"> <div class="joe_container">
<div class="joe_main"> <div class="joe_main">
<div class="joe_live__type"> <div class="joe_live__type">
<div class="joe_live__type-title">直播分类</div> <div class="joe_live__type-title">
<ul class="joe_live__type-list"> <div class="text">直播分类</div>
<li class="error">正在拼命加载中...</li> <svg class="icon" viewBox="0 0 1229 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
</ul> <path d="M292.64896 475.648a51.4048 51.4048 0 1 1-72.704 72.704l-204.8-204.8a51.2 51.2 0 0 1 0-72.704l204.8-204.8a51.4048 51.4048 0 1 1 72.704 72.704L123.68896 307.2l168.96 168.448zM51.49696 358.4a51.2 51.2 0 0 1 0-102.4h614.4a51.2 51.2 0 0 1 0 102.4h-614.4z m885.248 189.952a51.4048 51.4048 0 1 1 72.704-72.704l204.8 204.8a51.2 51.2 0 0 1 0 72.704l-204.8 204.8a51.4048 51.4048 0 1 1-72.704-72.704L1105.70496 716.8l-168.96-168.448zM1177.89696 665.6a51.2 51.2 0 1 1 0 102.4h-614.4a51.2 51.2 0 0 1 0-102.4h614.4z" p-id="12828"></path>
</svg>
</div> </div>
<div class="joe_live__type-list">
<li class="error">正在拼命加载中...</li>
</div>
</div>
<div class="joe_live__list"></div>
</div> </div>
<?php $this->need('public/aside.php'); ?> <?php $this->need('public/aside.php'); ?>
</div> </div>

View File

@ -24,7 +24,6 @@
<?php $this->need('public/header.php'); ?> <?php $this->need('public/header.php'); ?>
<div class="joe_container"> <div class="joe_container">
<div class="joe_main"> <div class="joe_main">
<?php if (isset($_GET['vod_id'])) : ?> <?php if (isset($_GET['vod_id'])) : ?>
<div class="joe_video__detail joe_video__contain"> <div class="joe_video__detail joe_video__contain">
<div class="joe_video__contain-title">影片简介</div> <div class="joe_video__contain-title">影片简介</div>