refactor journal-detail-popup

2025-12-11 12:02:01 +08:00
parent 0379a1d3b5
commit 1bf655c0dc
13 changed files with 238 additions and 352 deletions
--- a/miniprogram/components/journal-detail-popup/index.less
+++ b/miniprogram/components/journal-detail-popup/index.less
@ -0,0 +1,177 @@
+/* components/journal-detail-panel/index.less */
+.detail-panel {
+	width: 100%;
+	height: 70vh;
+	display: flex;
+	border-radius: 16rpx 16rpx 0 0;
+	flex-direction: column;
+
+	.detail-content {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+		flex-direction: column;
+
+		> .header {
+			display: flex;
+			padding: 32rpx 32rpx 0 32rpx;
+			flex-shrink: 0;
+			align-items: flex-start;
+			margin-bottom: 24rpx;
+			justify-content: space-between;
+
+			.info {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+
+				.title {
+					display: flex;
+					font-size: 32rpx;
+					font-weight: 600;
+					align-items: center;
+
+					.icon {
+						color: var(--theme-wx);
+						font-size: 48rpx;
+						margin-right: 8rpx;
+					}
+
+					.text {
+						width: calc(100% - 90rpx);
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+				}
+			}
+
+			.actions {
+				gap: 16rpx;
+				display: flex;
+				flex-shrink: 0;
+				align-items: center;
+
+				.indicator {
+					color: var(--theme-wx);
+					padding: 4rpx 12rpx;
+					font-size: 24rpx;
+					font-weight: bold;
+					background: var(--theme-bg-journal);
+					border-radius: 12rpx;
+				}
+			}
+		}
+
+		.journals-swiper {
+			flex: 1;
+			height: 100%;
+
+			.swiper-item-wrapper {
+				height: 100%;
+
+				.journal-item {
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+
+					.header {
+						gap: 16rpx;
+						display: flex;
+						padding: 0 32rpx;
+						flex-shrink: 0;
+						align-items: center;
+						margin-bottom: 16rpx;
+
+						.portfolio {
+							color: #FFF;
+							width: 52rpx;
+							padding: 4rpx 8rpx;
+							font-size: 24rpx;
+							background: var(--theme-wx);
+							text-align: center;
+							font-weight: bold;
+							border-radius: 8rpx;
+						}
+
+						.location {
+							gap: 8rpx;
+							display: flex;
+							font-size: 24rpx;
+							flex-basis: 100%;
+							align-items: center;
+
+							.icon {
+								color: var(--theme-wx);
+								font-size: 32rpx;
+							}
+
+							.text {
+								font-size: 24rpx;
+							}
+						}
+
+						.datetime {
+							font-size: 28rpx;
+							font-weight: bold;
+						}
+					}
+
+					.idea {
+						display: block;
+						padding: 0 32rpx;
+						font-size: 28rpx;
+						line-height: 1.6;
+						flex-shrink: 0;
+						margin-bottom: 16rpx;
+					}
+
+					.items-scroll {
+						flex: 1;
+						height: 100%;
+
+						.items {
+							padding: 0 32rpx 128rpx 32rpx;
+							
+							.wrapper {
+								column-gap: 8rpx;
+								column-count: 3;
+								padding-bottom: 128rpx;
+
+								.item {
+									overflow: hidden;
+									background: var(--theme-bg-card);
+									break-inside: avoid;
+									margin-bottom: 8rpx;
+
+									&.thumbnail {
+										width: 100%;
+										display: block;
+									}
+
+									&.video {
+										position: relative;
+
+										&::after {
+											content: "";
+											top: 50%;
+											left: 53%;
+											width: 0;
+											height: 0;
+											position: absolute;
+											transform: translate(-50%, -50%);
+											border-top: 16px solid transparent;
+											border-left: 24px solid var(--theme-video-play);
+											border-bottom: 16px solid transparent;
+											pointer-events: none;
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}