更新

assets/css/joe.global.min.scss

@@ -2221,6 +2221,58 @@
 			}
 		}
 	}
+	&__related {
+		padding-top: 15px;
+		&-title {
+			position: relative;
+			font-size: 18px;
+			font-weight: 500;
+			color: var(--main);
+			padding-left: 15px;
+			margin-bottom: 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				width: 4px;
+				border-radius: 2px;
+				background: var(--theme);
+			}
+		}
+		&-content {
+			display: grid;
+			gap: 15px;
+			grid-template-columns: repeat(4, 1fr);
+			.item {
+				overflow: hidden;
+				border-radius: var(--radius-inner);
+				transition: transform 0.25s, box-shadow 0.25s;
+				&:hover {
+					transform: translateY(-5px);
+					box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+				}
+				img {
+					width: 100%;
+					height: 120px;
+					object-fit: cover;
+				}
+				h6 {
+					height: 32px;
+					line-height: 32px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					background: var(--classD);
+					text-align: center;
+					font-size: 13px;
+					color: var(--minor);
+					padding: 0 12px;
+				}
+			}
+		}
+	}
 	&__friends {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);

assets/css/joe.responsive.min.scss

@@ -61,6 +61,15 @@ html {
 						height: 450px;
 					}
 				}
+				&__related {
+					&-content {
+						.item {
+							img {
+								height: 100px;
+							}
+						}
+					}
+				}
 			}
 			&_owo {
 				&__contain {
@@ -110,6 +119,15 @@ html {
 						height: 400px;
 					}
 				}
+				&__related {
+					&-content {
+						.item {
+							img {
+								height: 90px;
+							}
+						}
+					}
+				}
 			}
 			&_video {
 				&__list {
@@ -261,6 +279,15 @@ html {
 						height: 350px;
 					}
 				}
+				&__related {
+					&-content {
+						.item {
+							img {
+								height: 90px;
+							}
+						}
+					}
+				}
 			}
 			&_index {
 				&__hot {
@@ -592,6 +619,20 @@ html {
 						}
 					}
 				}
+				&__related {
+					&-content {
+						grid-template-columns: repeat(2, 1fr);
+						gap: 10px;
+						.item {
+							img {
+								height: 80px;
+							}
+							h6 {
+								font-size: 12px;
+							}
+						}
+					}
+				}
 			}
 			&_video {
 				&__list {