diff --git a/assets/css/joe.video.scss b/assets/css/joe.video.scss index a8a91da..2cd805d 100644 --- a/assets/css/joe.video.scss +++ b/assets/css/joe.video.scss @@ -1,231 +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; - } - } - } - } + &__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 365d455..3dd0a05 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__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} +.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{position:relative;display:block}.joe_wallpaper__list .item img{max-width:100%;-o-object-fit:cover;object-fit:cover}.joe_wallpaper__list .item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.35s;z-index:2}.joe_wallpaper__list .item::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);background-repeat:no-repeat;background-size:100% 100%;z-index:3;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s;opacity:0}.joe_wallpaper__list .item:hover::before{background:rgba(0,0,0,0.5)}.joe_wallpaper__list .item:hover::after{-webkit-transform:scale(1);transform:scale(1);opacity:1}.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 8ef14d2..5c09718 100644 --- a/assets/css/joe.wallpaper.scss +++ b/assets/css/joe.wallpaper.scss @@ -74,11 +74,48 @@ grid-template-columns: repeat(5, 1fr); margin-bottom: 15px; .item { + position: relative; display: block; img { max-width: 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.35s; + z-index: 2; + } + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 50px; + height: 50px; + margin: -25px 0 0 -25px; + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+); + background-repeat: no-repeat; + background-size: 100% 100%; + z-index: 3; + transform: scale(2); + transition: transform 0.35s, opacity 0.35s; + opacity: 0; + } + &:hover { + &::before { + background: rgba(0, 0, 0, 0.5); + } + &::after { + transform: scale(1); + opacity: 1; + } + } } &:empty { position: relative; diff --git a/assets/js/joe.video.js b/assets/js/joe.video.js index 22b79cc..fb642d7 100644 --- a/assets/js/joe.video.js +++ b/assets/js/joe.video.js @@ -1,97 +1,104 @@ /* 视频页面需要用到JS */ -console.time('Video.js执行时长'); +console.time('Video.js执行时长') document.addEventListener('DOMContentLoaded', () => { - /* 当前的分类id */ - let queryData = { - pg: 0, - t: -999 - }; + const p = new URLSearchParams(window.location.search) + /* 判断渲染详情页还是列表页 */ + if (p.get('vod_id')) { + initVideoDetail() + } else { + initVideoList() + } - /* 总页数 */ - let total = 0; + function initVideoList() { + /* 当前的分类id */ + let queryData = { + pg: 0, + t: -999 + } - /* 是否正在加载列表 */ - let isLoading = false; + /* 总页数 */ + let total = 0 - /* 获取视频分类 */ - $.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(); - } - }); + /* 是否正在加载列表 */ + let isLoading = false - /* 点击切换分类 */ - $('.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(); - }); + /* 获取视频分类 */ + $.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() + } + }) - /* 渲染视频列表 */ - 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 += ` - + /* 点击切换分类 */ + $('.joe_video__type-list').on('click', '.item', function () { + const t = $(this).attr('data-t') + if (t === queryData.t || isLoading) return + window.scrollTo({ top: 0, behavior: 'smooth' }) + $(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(); - } - }); - } + ` + }) + $('.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); - } + /* 初始化分页 */ + 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(); - }); + /* 切换分页 */ + $('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () { + const pg = $(this).attr('data-pg') + if (!pg || isLoading) return + window.scrollTo({ top: 0, behavior: 'smooth' }) + queryData.pg = Number(pg) + renderDom() + }) + } - console.timeEnd('Video.js执行时长'); -}); + function initVideoDetail() {} + + console.timeEnd('Video.js执行时长') +}) diff --git a/assets/js/joe.wallpaper.js b/assets/js/joe.wallpaper.js index bb602df..234fca8 100644 --- a/assets/js/joe.wallpaper.js +++ b/assets/js/joe.wallpaper.js @@ -33,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => { $('.joe_wallpaper__type-list').on('click', '.item', function () { const cid = $(this).attr('data-cid'); if (queryData.cid === cid || isLoading) return; + window.scrollTo({ top: 0, behavior: 'smooth' }) $(this).addClass('active').siblings().removeClass('active'); queryData.cid = cid; queryData.start = 0; @@ -84,6 +85,7 @@ document.addEventListener('DOMContentLoaded', () => { $('.joe_wallpaper__pagination').on('click', '.joe_wallpaper__pagination-item', function () { const start = $(this).attr('data-start'); if (!start || isLoading) return; + window.scrollTo({ top: 0, behavior: 'smooth' }) queryData.start = Number(start); getList(); });