更新

assets/css/joe.global.min.scss

@@ -2054,45 +2054,8 @@
 			height: 2px;
 			background-size: 80px;
 		}
-
-		/* 以下未测试 */
-		&-protected {
-			display: flex;
-			justify-content: center;
-			background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
-			padding: 20px 0;
-			margin-bottom: 18px;
-			.contain {
-				position: relative;
-				box-shadow: var(--box-shadow);
-				border-radius: 20px;
-				overflow: hidden;
-				.icon {
-					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
-					left: 15px;
-				}
-				.password {
-					width: 250px;
-					height: 40px;
-					border: none;
-					color: var(--routine);
-					padding-left: 50px;
-					background: var(--background);
-				}
-				.submit {
-					position: absolute;
-					top: 50%;
-					right: 15px;
-					transform: translateY(-50%);
-					color: var(--main);
-					border: none;
-					background: none;
-				}
-			}
-		}
 		&-message {
+			display: block;
 			position: relative;
 			border-left-width: 4px;
 			border-left-style: solid;
@@ -2168,10 +2131,9 @@
 					}
 				}
 			}
-		}
-		&-copy {
-			cursor: pointer;
-			user-select: none;
+			.content {
+				display: block;
+			}
 		}
 		&-video {
 			margin-bottom: 18px;
@@ -2252,6 +2214,48 @@
 				}
 			}
 		}
+
+		/* 以下未测试 */
+		&-protected {
+			display: flex;
+			justify-content: center;
+			background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
+			padding: 20px 0;
+			margin-bottom: 18px;
+			.contain {
+				position: relative;
+				box-shadow: var(--box-shadow);
+				border-radius: 20px;
+				overflow: hidden;
+				.icon {
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+					left: 15px;
+				}
+				.password {
+					width: 250px;
+					height: 40px;
+					border: none;
+					color: var(--routine);
+					padding-left: 50px;
+					background: var(--background);
+				}
+				.submit {
+					position: absolute;
+					top: 50%;
+					right: 15px;
+					transform: translateY(-50%);
+					color: var(--main);
+					border: none;
+					background: none;
+				}
+			}
+		}
+		&-copy {
+			cursor: pointer;
+			user-select: none;
+		}
 	}
 	&__agree {
 		display: flex;

assets/js/joe.short.js

@@ -163,10 +163,27 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-card-default', JoeCardDefault);
+	class JoeMessage extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
+				content: this.getAttribute('content') || '消息内容'
+			};
+			this.innerHTML = `
+				<span class="joe_detail__article-message ${this.options.type}">
+					<span class="icon"></span>
+					<span class="content">${this.options.content}</span>
+				</span>
+			`;
+		}
+	}
+	window.customElements.define('joe-message', JoeMessage);
 
 	const article = document.querySelector('.joe_detail__article');
 	if (article) article.innerHTML = article.innerHTML.replace(/<p><\/p>/g, '');
 
+
 	/* 
 	------------------------以下未测试------------------------------------------
 	*/
@@ -193,27 +210,4 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-copy', JoeCopy);
-	/* 消息提示 */
-	class JoeMessage extends HTMLElement {
-		constructor() {
-			super();
-			this.options = {
-				type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
-				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '提示内容'
-			};
-			this.render();
-		}
-		get template() {
-			return `
-				<div class="joe_detail__article-message ${this.options.type}">
-					<div class="icon"></div>
-					<div class="content">${this.options.content}</div>
-				</div>
-			`;
-		}
-		render() {
-			this.innerHTML = this.template;
-		}
-	}
-	window.customElements.define('joe-message', JoeMessage);
 });