更新

assets/css/joe.global.min.scss

@@ -1765,7 +1765,7 @@
 	border-radius: var(--radius-inner);
 	overflow: hidden;
 	&-item {
-		padding: 12px 15px;
+		padding: 12px;
 		border-bottom: 1px solid var(--classC);
 		&:last-child {
 			border-bottom: none;
@@ -1868,6 +1868,33 @@
 	width: 100%;
 	height: 500px;
 }
+.joe_card__describe {
+	position: relative;
+	border: 1px dashed var(--classB);
+	&-title {
+		position: absolute;
+		top: 0;
+		left: 8px;
+		transform: translateY(-50%);
+		background: var(--background);
+		padding: 0 5px;
+		color: var(--main);
+		font-weight: 500;
+        max-width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+	}
+	&-content {
+		color: var(--routine);
+		padding: 18px 15px 15px;
+		*:last-child {
+			margin-bottom: 0 !important;
+		}
+	}
+}
+
+
 
 .joe_detail {
 	background: var(--background);

assets/js/joe.short.js

@@ -261,6 +261,32 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-callout', JoeCallout);
+	class JoeCardDescribe extends HTMLElement {
+		constructor() {
+			super();
+			const _temp = getChildren(this, '_temp');
+			this.options = {
+				title: this.getAttribute('title') || '卡片描述',
+				content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
+			};
+			const htmlStr = `
+				<div class="joe_card__describe">
+					<div class="joe_card__describe-title">${this.options.title}</div>
+					<div class="joe_card__describe-content">${this.options.content}</div>
+				</div>
+			`;
+			if (getChildren(this, '_content')) {
+				getChildren(this, '_content').innerHTML = htmlStr;
+			} else {
+				const span = document.createElement('span');
+				span.style.display = 'block';
+				span.className = '_content';
+				span.innerHTML = htmlStr;
+				this.appendChild(span);
+			}
+		}
+	}
+	window.customElements.define('joe-card-describe', JoeCardDescribe);
 	class JoeCardList extends HTMLElement {
 		constructor() {
 			super();