更新
This commit is contained in:
haoouba
parent
7a10ee84cb
commit
e1a2bf3fed
@ -1,231 +1,231 @@
|
|||||||
.joe_video {
|
.joe_video {
|
||||||
&__type {
|
&__type {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
border-radius: var(--radius-wrap);
|
border-radius: var(--radius-wrap);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
padding: 60px 15px 15px;
|
padding: 60px 15px 15px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
&-title {
|
&-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
background: var(--theme);
|
background: var(--theme);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
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 12px;
|
||||||
border-radius: 2px 2px 2px 0;
|
border-radius: 2px 2px 2px 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
border-color: var(--theme) transparent transparent;
|
border-color: var(--theme) transparent transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-list {
|
&-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||||
border-top: 1px solid var(--classC);
|
border-top: 1px solid var(--classC);
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
.item {
|
.item {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--classD);
|
background: var(--classD);
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--routine);
|
color: var(--routine);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
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;
|
||||||
&.active {
|
&.active {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: var(--theme);
|
background: var(--theme);
|
||||||
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.error {
|
.error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--routine);
|
color: var(--routine);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__list {
|
&__list {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
border-radius: var(--radius-wrap);
|
border-radius: var(--radius-wrap);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
padding: 60px 15px 15px;
|
padding: 60px 15px 15px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
&-title {
|
&-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
background: var(--theme);
|
background: var(--theme);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
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 12px;
|
||||||
border-radius: 2px 2px 2px 0;
|
border-radius: 2px 2px 2px 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
border-color: var(--theme) transparent transparent;
|
border-color: var(--theme) transparent transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-item {
|
&-item {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
grid-template-columns: repeat(6, 1fr);
|
grid-template-columns: repeat(6, 1fr);
|
||||||
border-top: 1px solid var(--classC);
|
border-top: 1px solid var(--classC);
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
.item {
|
.item {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: var(--radius-inner);
|
border-radius: var(--radius-inner);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.year {
|
.year {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
background: #ff6800;
|
background: #ff6800;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
.thumb {
|
.thumb {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
.pic {
|
.pic {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: rgba(0, 0, 0, 0);
|
background: rgba(0, 0, 0, 0);
|
||||||
transition: background 0.3s ease-out;
|
transition: background 0.3s ease-out;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
margin: -25px 0 0 -25px;
|
margin: -25px 0 0 -25px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background: url(../img/play.png) no-repeat;
|
background: url(../img/play.png) no-repeat;
|
||||||
transform: scale(2);
|
transform: scale(2);
|
||||||
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
|
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
&::before {
|
&::before {
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--routine);
|
color: var(--routine);
|
||||||
background: var(--classD);
|
background: var(--classD);
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:empty {
|
&:empty {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
|
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__pagination {
|
&__pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
&-item {
|
&-item {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--main);
|
color: var(--main);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
transition: background 0.35s, color 0.35s;
|
transition: background 0.35s, color 0.35s;
|
||||||
svg {
|
svg {
|
||||||
fill: var(--routine);
|
fill: var(--routine);
|
||||||
transition: fill 0.35s;
|
transition: fill 0.35s;
|
||||||
}
|
}
|
||||||
.next {
|
.next {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
&.active,
|
&.active,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: var(--theme);
|
background: var(--theme);
|
||||||
svg {
|
svg {
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -74,11 +74,48 @@
|
|||||||
grid-template-columns: repeat(5, 1fr);
|
grid-template-columns: repeat(5, 1fr);
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
.item {
|
.item {
|
||||||
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
object-fit: cover;
|
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 {
|
&:empty {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -1,97 +1,104 @@
|
|||||||
/* 视频页面需要用到JS */
|
/* 视频页面需要用到JS */
|
||||||
console.time('Video.js执行时长');
|
console.time('Video.js执行时长')
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
/* 当前的分类id */
|
const p = new URLSearchParams(window.location.search)
|
||||||
let queryData = {
|
/* 判断渲染详情页还是列表页 */
|
||||||
pg: 0,
|
if (p.get('vod_id')) {
|
||||||
t: -999
|
initVideoDetail()
|
||||||
};
|
} else {
|
||||||
|
initVideoList()
|
||||||
|
}
|
||||||
|
|
||||||
/* 总页数 */
|
function initVideoList() {
|
||||||
let total = 0;
|
/* 当前的分类id */
|
||||||
|
let queryData = {
|
||||||
|
pg: 0,
|
||||||
|
t: -999
|
||||||
|
}
|
||||||
|
|
||||||
/* 是否正在加载列表 */
|
/* 总页数 */
|
||||||
let isLoading = false;
|
let total = 0
|
||||||
|
|
||||||
/* 获取视频分类 */
|
/* 是否正在加载列表 */
|
||||||
$.ajax({
|
let isLoading = false
|
||||||
url: Joe.BASE_API,
|
|
||||||
type: 'POST',
|
|
||||||
data: {
|
|
||||||
routeType: 'maccms_list'
|
|
||||||
},
|
|
||||||
success(res) {
|
|
||||||
if (res.code !== 1) return $('.joe_video__type-list').html(`<li class="error">${res.data}</li>`);
|
|
||||||
let htmlStr = '<li class="item" data-t="">全部</li>';
|
|
||||||
res.data.class.forEach(_ => (htmlStr += `<li class="item" data-t="${_.type_id}">${_.type_name}</li>`));
|
|
||||||
$('.joe_video__type-list').html(htmlStr);
|
|
||||||
$('.joe_video__type-list .item').first().click();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 点击切换分类 */
|
/* 获取视频分类 */
|
||||||
$('.joe_video__type-list').on('click', '.item', function () {
|
$.ajax({
|
||||||
const t = $(this).attr('data-t');
|
url: Joe.BASE_API,
|
||||||
if (t === queryData.t || isLoading) return;
|
type: 'POST',
|
||||||
$(this).addClass('active').siblings().removeClass('active');
|
data: { routeType: 'maccms_list' },
|
||||||
queryData.pg = 0;
|
success(res) {
|
||||||
queryData.t = t;
|
if (res.code !== 1) return $('.joe_video__type-list').html(`<li class="error">${res.data}</li>`)
|
||||||
renderDom();
|
let htmlStr = '<li class="item" data-t="">全部</li>'
|
||||||
});
|
res.data.class.forEach(_ => (htmlStr += `<li class="item" data-t="${_.type_id}">${_.type_name}</li>`))
|
||||||
|
$('.joe_video__type-list').html(htmlStr)
|
||||||
|
$('.joe_video__type-list .item').first().click()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
/* 渲染视频列表 */
|
/* 点击切换分类 */
|
||||||
function renderDom() {
|
$('.joe_video__type-list').on('click', '.item', function () {
|
||||||
isLoading = true;
|
const t = $(this).attr('data-t')
|
||||||
$('.joe_video__list-item').html('');
|
if (t === queryData.t || isLoading) return
|
||||||
$.ajax({
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
url: Joe.BASE_API,
|
$(this).addClass('active').siblings().removeClass('active')
|
||||||
type: 'POST',
|
queryData.pg = 0
|
||||||
data: {
|
queryData.t = t
|
||||||
routeType: 'maccms_list',
|
renderDom()
|
||||||
t: queryData.t,
|
})
|
||||||
pg: queryData.pg,
|
|
||||||
ac: 'videolist'
|
/* 渲染视频列表 */
|
||||||
},
|
function renderDom() {
|
||||||
success(res) {
|
isLoading = true
|
||||||
if (res.code !== 1) return;
|
$('.joe_video__list-item').html('')
|
||||||
let htmlStr = '';
|
$.ajax({
|
||||||
res.data.list.forEach(_ => {
|
url: Joe.BASE_API,
|
||||||
htmlStr += `
|
type: 'POST',
|
||||||
<a class="item" href="${window.location.href + '?vod_id=' + _.vod_id}" target="_blank" rel="noopener noreferrer nofollow">
|
data: { routeType: 'maccms_list', t: queryData.t, pg: queryData.pg, ac: 'videolist' },
|
||||||
|
success(res) {
|
||||||
|
if (res.code !== 1) return
|
||||||
|
let htmlStr = ''
|
||||||
|
res.data.list.forEach(_ => {
|
||||||
|
htmlStr += `
|
||||||
|
<a class="item animated bounceIn" href="${window.location.href + '?vod_id=' + _.vod_id}" target="_blank" rel="noopener noreferrer nofollow">
|
||||||
<i class="year" style="display: ${_.vod_year ? 'block' : 'none'}">${_.vod_year}</i>
|
<i class="year" style="display: ${_.vod_year ? 'block' : 'none'}">${_.vod_year}</i>
|
||||||
<div class="thumb">
|
<div class="thumb">
|
||||||
<img onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" class="pic video_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.vod_pic}" alt="${_.vod_name}">
|
<img onerror="javascript: this.src = '${Joe.LAZY_LOAD}'" class="pic video_lazyload" src="${Joe.LAZY_LOAD}" data-original="${_.vod_pic}" alt="${_.vod_name}">
|
||||||
</div>
|
</div>
|
||||||
<p class="title">${_.vod_name}</p>
|
<p class="title">${_.vod_name}</p>
|
||||||
</a>`;
|
</a>`
|
||||||
});
|
})
|
||||||
$('.joe_video__list-item').html(htmlStr);
|
$('.joe_video__list-item').html(htmlStr)
|
||||||
new LazyLoad('.video_lazyload');
|
new LazyLoad('.video_lazyload')
|
||||||
isLoading = false;
|
isLoading = false
|
||||||
total = res.data.pagecount;
|
total = res.data.pagecount
|
||||||
initPagination();
|
initPagination()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 初始化分页 */
|
/* 初始化分页 */
|
||||||
function initPagination() {
|
function initPagination() {
|
||||||
let htmlStr = '';
|
let htmlStr = ''
|
||||||
if (queryData.pg !== 0) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li><li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">${queryData.pg}</li>`;
|
if (queryData.pg !== 0) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li><li class="joe_video__pagination-item" data-pg="${queryData.pg - 1}">${queryData.pg}</li>`
|
||||||
htmlStr += `<li class="active joe_video__pagination-item">${queryData.pg + 1}</li>`;
|
htmlStr += `<li class="active joe_video__pagination-item">${queryData.pg + 1}</li>`
|
||||||
if (queryData.pg != total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}">${queryData.pg + 2}</li>`;
|
if (queryData.pg != total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}">${queryData.pg + 2}</li>`
|
||||||
if (queryData.pg < total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}"><svg class="next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li>`;
|
if (queryData.pg < total) htmlStr += `<li class="joe_video__pagination-item" data-pg="${queryData.pg + 1}"><svg class="next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg></li>`
|
||||||
$('.joe_video__pagination').html(htmlStr);
|
$('.joe_video__pagination').html(htmlStr)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 切换分页 */
|
/* 切换分页 */
|
||||||
$('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () {
|
$('.joe_video__pagination').on('click', '.joe_video__pagination-item', function () {
|
||||||
const pg = $(this).attr('data-pg');
|
const pg = $(this).attr('data-pg')
|
||||||
if (!pg || isLoading) return;
|
if (!pg || isLoading) return
|
||||||
queryData.pg = Number(pg);
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
renderDom();
|
queryData.pg = Number(pg)
|
||||||
});
|
renderDom()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
console.timeEnd('Video.js执行时长');
|
function initVideoDetail() {}
|
||||||
});
|
|
||||||
|
console.timeEnd('Video.js执行时长')
|
||||||
|
})
|
||||||
|
|||||||
@ -33,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
$('.joe_wallpaper__type-list').on('click', '.item', function () {
|
$('.joe_wallpaper__type-list').on('click', '.item', function () {
|
||||||
const cid = $(this).attr('data-cid');
|
const cid = $(this).attr('data-cid');
|
||||||
if (queryData.cid === cid || isLoading) return;
|
if (queryData.cid === cid || isLoading) return;
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
$(this).addClass('active').siblings().removeClass('active');
|
$(this).addClass('active').siblings().removeClass('active');
|
||||||
queryData.cid = cid;
|
queryData.cid = cid;
|
||||||
queryData.start = 0;
|
queryData.start = 0;
|
||||||
@ -84,6 +85,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
$('.joe_wallpaper__pagination').on('click', '.joe_wallpaper__pagination-item', function () {
|
$('.joe_wallpaper__pagination').on('click', '.joe_wallpaper__pagination-item', function () {
|
||||||
const start = $(this).attr('data-start');
|
const start = $(this).attr('data-start');
|
||||||
if (!start || isLoading) return;
|
if (!start || isLoading) return;
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
queryData.start = Number(start);
|
queryData.start = Number(start);
|
||||||
getList();
|
getList();
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user