refactor travel

miniprogram/pages/main/travel/index.less

@@ -1,25 +1,119 @@
-/* pages/main/travel/travel.wxss */
+// pages/main/travel/index.less
 
-.travel {
+.filter-menu {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+	position: fixed;
+	background: var(--theme-bg-overlay);
 
-	.collapse {
+	.content {
+		z-index: 1000;
+		position: fixed;
+		background: var(--theme-bg-menu);
+		box-shadow: 0 0 12px var(--theme-shadow-medium);
+		border-radius: 8rpx;
+	}
+}
 
-		.panel {
+.travel-list {
+	width: 100vw;
+	padding: 16rpx;
+	min-height: 100vh;
+	box-sizing: border-box;
+	padding-bottom: 120rpx;
 
-			.images {
-				column-gap: .25rem;
-				column-count: 3;
-				padding-bottom: 2rem;
+	.travel-card {
+		background: var(--theme-bg-card);
+		margin-bottom: 24rpx;
+		border-radius: 16rpx;
+		overflow: hidden;
+		box-shadow: 0 2px 12px var(--theme-shadow-light);
+		transition: all .3s;
 
-				.image {
-					width: 100%;
-					display: block;
-					overflow: hidden;
-					background: var(--theme-bg-card);
-					break-inside: avoid;
-					margin-bottom: .25rem;
+		&:active {
+			transform: scale(.98);
+			box-shadow: 0 2px 8px var(--theme-shadow-light);
+		}
+
+		.card-header {
+			padding: 24rpx;
+			border-bottom: 1px solid var(--theme-border-light);
+		}
+
+		.card-body {
+			padding: 24rpx;
+
+			.title {
+				color: var(--theme-text-primary);
+				font-size: 32rpx;
+				font-weight: bold;
+				margin-bottom: 16rpx;
+				line-height: 1.5;
+			}
+
+			.content {
+				color: var(--theme-text-secondary);
+				font-size: 28rpx;
+				line-height: 1.6;
+				margin-bottom: 24rpx;
+				display: -webkit-box;
+				overflow: hidden;
+				-webkit-line-clamp: 2;
+				text-overflow: ellipsis;
+				-webkit-box-orient: vertical;
+			}
+
+			.meta {
+				gap: 16rpx;
+				display: flex;
+				flex-wrap: wrap;
+
+				.meta-item {
+					gap: 8rpx;
+					display: flex;
+					align-items: center;
+
+					.icon {
+						color: var(--theme-text-secondary);
+					}
+
+					.text {
+						color: var(--theme-text-secondary);
+						font-size: 24rpx;
+					}
 				}
 			}
 		}
 	}
-}
+
+	.finished {
+		color: var(--theme-text-secondary);
+		padding: 32rpx 0;
+		font-size: 24rpx;
+		text-align: center;
+	}
+}
+
+.fab {
+	right: 32rpx;
+	width: 112rpx;
+	bottom: 120rpx;
+	height: 112rpx;
+	display: flex;
+	z-index: 9999;
+	position: fixed;
+	background: var(--theme-wx);
+	align-items: center;
+	border-radius: 50%;
+	justify-content: center;
+	box-shadow: 0 8px 24px rgba(102, 126, 234, .4);
+	transition: all .3s ease;
+
+	&:active {
+		transform: scale(.9);
+		box-shadow: 0 4px 12px rgba(102, 126, 234, .3);
+	}
+}