From 7a7dacd66aef05564991d23afe0efb8f4a4aaac0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=9C=E6=81=92?= <2323333339@qq.com> Date: Tue, 2 Feb 2021 18:25:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/joe.live.css | 2 +- assets/css/joe.live.scss | 151 +++++++++++++++++++++++++++++++++++++- assets/js/joe.live.js | 103 ++++++++++++++++++++++++++ assets/json/joe.live.json | 61 +++++++++++++++ core/api.php | 21 ++++++ core/core.php | 3 + live.php | 12 ++- video.php | 1 - 8 files changed, 345 insertions(+), 9 deletions(-) create mode 100644 assets/json/joe.live.json diff --git a/assets/css/joe.live.css b/assets/css/joe.live.css index 7998341..8d5c1fc 100644 --- a/assets/css/joe.live.css +++ b/assets/css/joe.live.css @@ -1 +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} +.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{display:flex;align-items:center;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 8px 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 .icon{width:15px;height:15px;fill:#fff;margin-left:5px;cursor:pointer}.joe_live__type-title::before{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.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}.joe_live__list{display:grid;grid-template-columns:repeat(4, 1fr);gap:15px}.joe_live__list-item{display:block;width:100%;overflow:hidden;border-radius:8px}.joe_live__list-item .thumb{position:relative;width:100%;height:140px}.joe_live__list-item .thumb .screenshot{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_live__list-item .thumb .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}.joe_live__list-item .thumb::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}.joe_live__list-item .thumb::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;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;z-index:3}.joe_live__list-item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_live__list-item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_live__list-item .description{background:var(--background);padding:10px}.joe_live__list-item .description .introduction{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--main);margin-bottom:10px}.joe_live__list-item .description .meta{display:flex;align-items:center;justify-content:space-between}.joe_live__list-item .description .meta .user{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_live__list-item .description .meta .user img{width:22px;height:22px;-o-object-fit:cover;object-fit:cover;border-radius:50%;margin-right:3px}.joe_live__list-item .description .meta .user span{color:var(--routine);font-size:12px}.joe_live__list-item .description .meta .game{font-size:12px;display:flex;align-items:center}.joe_live__list-item .description .meta .game .icon{width:13px;height:13px;margin-right:3px}.joe_live__list-item .description .meta .game .total{color:var(--minor);margin-right:8px}.joe_live__list-item .description .meta .game .name{color:#f90}.joe_live__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_live__list:empty::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%} diff --git a/assets/css/joe.live.scss b/assets/css/joe.live.scss index a3a0ec2..c2b61d2 100644 --- a/assets/css/joe.live.scss +++ b/assets/css/joe.live.scss @@ -7,6 +7,8 @@ padding: 60px 15px 15px; margin-bottom: 15px; &-title { + display: flex; + align-items: center; position: absolute; top: 15px; left: -10px; @@ -16,18 +18,25 @@ box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15); height: 30px; line-height: 30px; - padding: 0 12px; + padding: 0 8px 0 12px; border-radius: 2px 2px 2px 0; user-select: none; + .icon { + width: 15px; + height: 15px; + fill: #fff; + margin-left: 5px; + cursor: pointer; + } &::before { content: ''; position: absolute; + bottom: -10px; + left: -10px; border-style: solid; border-width: 10px; - bottom: -20px; - left: 0; - z-index: -1; border-color: var(--theme) transparent transparent; + transform: rotate(90deg); } } &-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%; + } + } + } } diff --git a/assets/js/joe.live.js b/assets/js/joe.live.js index 3c6ea21..2156e55 100644 --- a/assets/js/joe.live.js +++ b/assets/js/joe.live.js @@ -2,5 +2,108 @@ console.time('Live.js执行时长'); 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 = '
${_.introduction}
+ +