From 78947a1affff90abf747f1a43301aaf0e5b6f4fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=9C=E6=81=92?= <2323333339@qq.com> Date: Fri, 29 Jan 2021 18:54:33 +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 | 1 + assets/css/joe.live.scss | 72 +++++++++++ assets/css/joe.video.css | 1 + assets/css/joe.video.scss | 231 ++++++++++++++++++++++++++++++++++ assets/css/joe.wallpaper.css | 2 +- assets/css/joe.wallpaper.scss | 22 +++- assets/img/play.png | Bin 0 -> 2794 bytes assets/js/joe.live.js | 6 + assets/js/joe.video.js | 97 ++++++++++++++ assets/js/joe.wallpaper.js | 11 +- core/api.php | 38 ++++++ core/core.php | 3 + functions.php | 13 ++ live.php | 40 ++++++ video.php | 45 +++++++ wallpaper.php | 20 --- 16 files changed, 568 insertions(+), 34 deletions(-) create mode 100644 assets/css/joe.live.css create mode 100644 assets/css/joe.live.scss create mode 100644 assets/css/joe.video.css create mode 100644 assets/css/joe.video.scss create mode 100644 assets/img/play.png create mode 100644 assets/js/joe.live.js create mode 100644 assets/js/joe.video.js create mode 100644 live.php create mode 100644 video.php diff --git a/assets/css/joe.live.css b/assets/css/joe.live.css new file mode 100644 index 0000000..7998341 --- /dev/null +++ b/assets/css/joe.live.css @@ -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} diff --git a/assets/css/joe.live.scss b/assets/css/joe.live.scss new file mode 100644 index 0000000..a3a0ec2 --- /dev/null +++ b/assets/css/joe.live.scss @@ -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; + } + } + } +} diff --git a/assets/css/joe.video.css b/assets/css/joe.video.css new file mode 100644 index 0000000..5d0e6b8 --- /dev/null +++ b/assets/css/joe.video.css @@ -0,0 +1 @@ +.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}.joe_video__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_video__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_video__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_video__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_video__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_video__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__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_video__list{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_video__list-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_video__list-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_video__list-item{display:grid;gap:15px;grid-template-columns:repeat(6, 1fr);border-top:1px solid var(--classC);padding-top:15px}.joe_video__list-item .item{position:relative;border-radius:var(--radius-inner);overflow:hidden}.joe_video__list-item .item .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}.joe_video__list-item .item .thumb{position:relative;height:220px}.joe_video__list-item .item .thumb .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__list-item .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_video__list-item .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_video__list-item .item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_video__list-item .item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_video__list-item .item .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}.joe_video__list-item:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_video__list-item: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%}.joe_video__pagination{display:flex;align-items:center;justify-content:flex-end}.joe_video__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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}.joe_video__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_video__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_video__pagination-item.active,.joe_video__pagination-item:hover{color:#fff;background:var(--theme)}.joe_video__pagination-item.active svg,.joe_video__pagination-item:hover svg{fill:#fff} diff --git a/assets/css/joe.video.scss b/assets/css/joe.video.scss new file mode 100644 index 0000000..a8a91da --- /dev/null +++ b/assets/css/joe.video.scss @@ -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; + } + } + } + } +} diff --git a/assets/css/joe.wallpaper.css b/assets/css/joe.wallpaper.css index 757f803..365d455 100644 --- a/assets/css/joe.wallpaper.css +++ b/assets/css/joe.wallpaper.css @@ -1 +1 @@ -.joe_wallpaper__type{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_wallpaper__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_wallpaper__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_wallpaper__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_wallpaper__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_wallpaper__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_wallpaper__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__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_wallpaper__list{display:grid;grid-template-columns:repeat(5, 1fr);margin-bottom:15px}.joe_wallpaper__list .item{display:block}.joe_wallpaper__list .item img{max-width:100%;-o-object-fit:cover;object-fit:cover}.joe_wallpaper__pagination{display:flex;align-items:center;justify-content:flex-end}.joe_wallpaper__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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}.joe_wallpaper__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_wallpaper__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_wallpaper__pagination-item.active,.joe_wallpaper__pagination-item:hover{color:#fff;background:var(--theme)}.joe_wallpaper__pagination-item.active svg,.joe_wallpaper__pagination-item:hover svg{fill:#fff}.joe_wallpaper__loading{display:none;align-items:center;justify-content:center;padding:50px 0} +.joe_wallpaper__type{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_wallpaper__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_wallpaper__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_wallpaper__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_wallpaper__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_wallpaper__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_wallpaper__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__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_wallpaper__list{display:grid;grid-template-columns:repeat(5, 1fr);margin-bottom:15px}.joe_wallpaper__list .item{display:block}.joe_wallpaper__list .item img{max-width:100%;-o-object-fit:cover;object-fit:cover}.joe_wallpaper__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_wallpaper__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%}.joe_wallpaper__pagination{display:flex;align-items:center;justify-content:flex-end}.joe_wallpaper__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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}.joe_wallpaper__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_wallpaper__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_wallpaper__pagination-item.active,.joe_wallpaper__pagination-item:hover{color:#fff;background:var(--theme)}.joe_wallpaper__pagination-item.active svg,.joe_wallpaper__pagination-item:hover svg{fill:#fff} diff --git a/assets/css/joe.wallpaper.scss b/assets/css/joe.wallpaper.scss index 43db7b6..8ef14d2 100644 --- a/assets/css/joe.wallpaper.scss +++ b/assets/css/joe.wallpaper.scss @@ -80,6 +80,22 @@ 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 { display: flex; @@ -113,10 +129,4 @@ } } } - &__loading { - display: none; - align-items: center; - justify-content: center; - padding: 50px 0; - } } diff --git a/assets/img/play.png b/assets/img/play.png new file mode 100644 index 0000000000000000000000000000000000000000..f624dcad06e7934ab297958299aa9bdefeca2a8e GIT binary patch literal 2794 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 { + console.timeEnd('Live.js执行时长'); +}); diff --git a/assets/js/joe.video.js b/assets/js/joe.video.js new file mode 100644 index 0000000..22b79cc --- /dev/null +++ b/assets/js/joe.video.js @@ -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(`
  • ${res.data}
    • `); + let htmlStr = '
  • 全部
    • '; + res.data.class.forEach(_ => (htmlStr += `
  • ${_.type_name}
    • `)); + $('.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 += ` + + ${_.vod_year} +
    + ${_.vod_name} +
    +

    ${_.vod_name}

    +     `; + }); + $('.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 += `
  • ${queryData.pg}
    • `; + htmlStr += `
  • ${queryData.pg + 1}
    • `; + if (queryData.pg != total) htmlStr += `
  • ${queryData.pg + 2}
    • `; + if (queryData.pg < total) htmlStr += `
    • `; + $('.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执行时长'); +}); diff --git a/assets/js/joe.wallpaper.js b/assets/js/joe.wallpaper.js index 6c3c70e..bb602df 100644 --- a/assets/js/joe.wallpaper.js +++ b/assets/js/joe.wallpaper.js @@ -1,4 +1,4 @@ -/* 详情页和独立页面需要用到的JS */ +/* 壁纸页面需要用到的JS */ console.time('Wallpaper.js执行时长'); document.addEventListener('DOMContentLoaded', () => { @@ -21,12 +21,11 @@ document.addEventListener('DOMContentLoaded', () => { routeType: 'wallpaper_type' }, success(res) { + if (res.code !== 1) return $('.joe_wallpaper__type-list').html('
  • 壁纸抓取失败！请联系作者！
    • '); let htmlStr = ''; - if (res.code !== 1) return (htmlStr = '
  • 壁纸抓取失败！请联系作者！
    • '); res.data.forEach(_ => (htmlStr += `
  • ${_.name}
    • `)); $('.joe_wallpaper__type-list').html(htmlStr); $('.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 */ function getList() { isLoading = true; - $('.joe_wallpaper__loading').css('display', 'flex'); $('.joe_wallpaper__list').html(''); $.ajax({ url: Joe.BASE_API, @@ -55,19 +53,18 @@ document.addEventListener('DOMContentLoaded', () => { count: queryData.count }, success(res) { - let htmlStr = ''; if (res.code !== 1) return; + let htmlStr = ''; res.data.forEach(_ => { htmlStr += ` - + 壁纸 `; }); $('.joe_wallpaper__list').html(htmlStr); new LazyLoad('.wallpaper_lazyload'); total = res.total; isLoading = false; - $('.joe_wallpaper__loading').css('display', 'none'); initPagination(); } }); diff --git a/core/api.php b/core/api.php index dd66ae4..b33b02b 100644 --- a/core/api.php +++ b/core/api.php @@ -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未填写！" + ]); + } +} diff --git a/core/core.php b/core/core.php index 3d90038..f3f2cff 100644 --- a/core/core.php +++ b/core/core.php @@ -63,6 +63,9 @@ function themeInit($self) case 'wallpaper_list': _getWallpaperList($self); break; + case 'maccms_list': + _getMaccmsList($self); + break; }; } } diff --git a/functions.php b/functions.php index b9bba7d..eb741a3 100644 --- a/functions.php +++ b/functions.php @@ -627,4 +627,17 @@ function themeConfig($form) ); $JBaiduToken->setAttribute('class', 'joe_content joe_other'); $form->addInput($JBaiduToken); + + $JMaccmsAPI = new Typecho_Widget_Helper_Form_Element_Text( + 'JMaccmsAPI', + NULL, + NULL, + '苹果CMS开放API', + '介绍：请填写苹果CMS V10开放API，用于视频页面使用
    + 例如：ok资源网提供的：https://api.okzy.tv/api.php/provide/vod/
    + 如果您搭建了苹果cms网站，那么用你自己的即可，如果没有，请去网上找API
    + ' + ); + $JMaccmsAPI->setAttribute('class', 'joe_content joe_other'); + $form->addInput($JMaccmsAPI); } ?> \ No newline at end of file diff --git a/live.php b/live.php new file mode 100644 index 0000000..fa1367e --- /dev/null +++ b/live.php @@ -0,0 +1,40 @@ + + + + + + + need('public/include.php'); ?> + + + + + + +
    + need('public/header.php'); ?> +
    +
    +
    +
    直播分类
    +
      +
    • 正在拼命加载中...
      • +
    +
    +
    + need('public/aside.php'); ?> +
    + need('public/footer.php'); ?> +
    + + + \ No newline at end of file diff --git a/video.php b/video.php new file mode 100644 index 0000000..de92f18 --- /dev/null +++ b/video.php @@ -0,0 +1,45 @@ + + + + + + + need('public/include.php'); ?> + + + + + + +
    + need('public/header.php'); ?> +
    +
    +
    +
    视频分类
    +
      +
    • 正在拼命加载中...
      • +
    +
    +
    +
    视频列表
    +
    +
    +
      +
      + need('public/aside.php'); ?> +
      + need('public/footer.php'); ?> +
      + + + \ No newline at end of file diff --git a/wallpaper.php b/wallpaper.php index e8062d9..3cab653 100644 --- a/wallpaper.php +++ b/wallpaper.php @@ -30,26 +30,6 @@
    • 正在拼命加载中...
      • -
      - - - - - - - - - - - - - - - - - - -