更新

assets/css/joe.global.scss

@@ -2044,6 +2044,85 @@
 			cursor: pointer;
 			user-select: none;
 		}
+		&-video {
+			margin-bottom: 15px;
+			.play,
+			.episodes {
+				position: relative;
+				background: var(--classD);
+				padding: 60px 15px 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;
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: -10px;
+						left: -10px;
+						border-style: solid;
+						border-width: 10px;
+						border-color: var(--theme) transparent transparent;
+						transform: rotate(90deg);
+					}
+				}
+				.box {
+					border-top: 1px solid var(--classB);
+					padding-top: 15px;
+				}
+			}
+			.play {
+				margin-bottom: 15px;
+				.box {
+					iframe {
+						background: #000;
+						width: 100%;
+						height: 520px;
+					}
+				}
+			}
+			.episodes {
+				.box {
+					display: grid;
+					grid-template-columns: repeat(6, 1fr);
+					gap: 15px;
+					.item {
+						height: 30px;
+						line-height: 30px;
+						border-radius: 15px;
+						background: var(--background);
+						color: var(--routine);
+						cursor: pointer;
+						text-align: center;
+						font-size: 12px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						transition: transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;
+						padding: 0 10px;
+						&.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);
+						}
+					}
+				}
+			}
+		}
 	}
 	&__agree {
 		display: flex;

assets/css/joe.responsive.scss

@@ -77,6 +77,12 @@ html {
 		.joe_video__list-item .item .thumb {
 			height: 200px;
 		}
+		.joe_detail__article-video .play .box iframe {
+			height: 420px;
+		}
+		.joe_detail__article-video .episodes .box {
+			grid-template-columns: repeat(5, 1fr);
+		}
 	}
 	@media (max-width: 992px) {
 		.joe_aside {
@@ -115,6 +121,12 @@ html {
 		.joe_header__above-searchicon {
 			display: block;
 		}
+		.joe_detail__article-video .play .box iframe {
+			height: 420px;
+		}
+		.joe_detail__article-video .episodes .box {
+			grid-template-columns: repeat(5, 1fr);
+		}
 	}
 	@media (max-width: 768px) {
 		.joe_header {
@@ -270,7 +282,7 @@ html {
 			}
 			&__loading {
 				.item {
-					.thumbnail{
+					.thumbnail {
 						width: 120px;
 						min-width: 120px;
 						height: 80px;
@@ -369,6 +381,20 @@ html {
 				pre[class*='language-'] {
 					font-size: 13px;
 				}
+				&-video {
+					.play {
+						.box {
+							iframe {
+								height: 220px;
+							}
+						}
+					}
+					.episodes {
+						.box {
+							grid-template-columns: repeat(3, 1fr);
+						}
+					}
+				}
 			}
 		}
 		.joe_comment {
@@ -381,10 +407,10 @@ html {
 				position: absolute;
 				top: 15px;
 				right: 15px;
-				.item:first-child{
+				.item:first-child {
 					border-bottom-left-radius: var(--radius-inner);
 				}
-				.item:last-child{
+				.item:last-child {
 					border-bottom-right-radius: var(--radius-inner);
 				}
 			}
@@ -473,6 +499,12 @@ html .noaside {
 	.joe_index__hot-list .item .link .inner .image {
 		height: 140px;
 	}
+	.joe_detail__article-video .play .box iframe {
+		height: 600px;
+	}
+	.joe_detail__article-video .episodes .box {
+		grid-template-columns: repeat(8, 1fr);
+	}
 	@media (max-width: 1400px) {
 		.joe_video__list-item {
 			grid-template-columns: repeat(6, 1fr);
@@ -483,6 +515,12 @@ html .noaside {
 		.joe_list__item.single .thumbnail {
 			height: 270px;
 		}
+		.joe_detail__article-video .play .box iframe {
+			height: 550px;
+		}
+		.joe_detail__article-video .episodes .box {
+			grid-template-columns: repeat(7, 1fr);
+		}
 	}
 	@media (max-width: 1200px) {
 		.joe_wallpaper__list {
@@ -506,6 +544,12 @@ html .noaside {
 		.joe_index__banner-recommend .item {
 			height: 180px;
 		}
+		.joe_detail__article-video .play .box iframe {
+			height: 500px;
+		}
+		.joe_detail__article-video .episodes .box {
+			grid-template-columns: repeat(6, 1fr);
+		}
 	}
 	@media (max-width: 992px) {
 		.joe_wallpaper__list {
@@ -538,6 +582,12 @@ html .noaside {
 		.joe_list__item.multiple .thumbnail {
 			grid-template-rows: 130px;
 		}
+		.joe_detail__article-video .play .box iframe {
+			height: 400px;
+		}
+		.joe_detail__article-video .episodes .box {
+			grid-template-columns: repeat(5, 1fr);
+		}
 	}
 	@media (max-width: 768px) {
 		.joe_wallpaper {
@@ -549,6 +599,22 @@ html .noaside {
 			&__friends {
 				grid-template-columns: repeat(1, 1fr);
 			}
+			&__article {
+				&-video {
+					.play {
+						.box {
+							iframe {
+								height: 220px;
+							}
+						}
+					}
+					.episodes {
+						.box {
+							grid-template-columns: repeat(3, 1fr);
+						}
+					}
+				}
+			}
 		}
 		.joe_video {
 			&__list-item {

assets/css/joe.video.scss

@@ -326,7 +326,7 @@
 			.item {
 				height: 30px;
 				line-height: 30px;
-				border-radius: 14px;
+				border-radius: 15px;
 				background: var(--classD);
 				color: var(--routine);
 				cursor: pointer;