traveler/LaneTexture/unpackage/dist/dev/mp-weixin/pages/planning/index.wxss

.content {
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom, #dbf0ff 0%, #e3f4ff 40%, #f0f9ff 100%);
		min-height: 100vh;
		padding: 30rpx;
		position: relative;
		overflow: hidden;
}

	/* 背景装饰 */
.bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		overflow: hidden;
}
.bg-circle {
		position: absolute;
		border-radius: 50%;
		opacity: 0.1;
}
.bg-circle-1 {
		top: -300rpx;
		right: -200rpx;
		width: 800rpx;
		height: 800rpx;
		background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
.bg-circle-2 {
		bottom: -400rpx;
		left: -300rpx;
		width: 1000rpx;
		height: 1000rpx;
		background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}
.header {
		margin-bottom: 40rpx;
		position: relative;
		z-index: 1;
}
.header-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
.header-subtitle {
		font-size: 28rpx;
		color: #666;
		font-style: italic;
}

	/* 行程规划选项样式 */
.planning-options {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;
		position: relative;
		z-index: 1;
}
.option-card {
		width: 48%;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
}
.card-hover {
		transform: translateY(-10rpx);
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
}
.custom-plan {
		background: linear-gradient(to bottom right, #ffffff, #f8f8f8);
		border: 1rpx solid #eaeaea;
}
.ai-plan {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.ai-plan .option-title,
	.ai-plan .option-desc,
	.ai-plan .arrow-text,
	.ai-plan .arrow-icon {
		color: #fff;
}
.option-icon-wrap {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #f0f8ff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
		box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.05);
}
.ai-icon-wrap {
		background-color: rgba(255, 255, 255, 0.2);
}
.option-icon {
		width: 60rpx;
		height: 60rpx;
}
.option-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
}
.option-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
}
.option-arrow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
}
.arrow-text {
		font-size: 26rpx;
		color: #3a9eeb;
}
.arrow-icon {
		font-size: 30rpx;
		color: #3a9eeb;
}

	/* 待出发行程样式 */
.upcoming-trips {
		margin-top: 20rpx;
		position: relative;
		z-index: 1;
}
.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
}
.section-title-wrap {
		position: relative;
}
.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		position: relative;
		z-index: 1;
}
.title-underline {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 80rpx;
		height: 10rpx;
		background: linear-gradient(to right, #4facfe, #00f2fe);
		border-radius: 10rpx;
}
.section-more {
		display: flex;
		align-items: center;
}
.more-text {
		font-size: 26rpx;
		color: #3a9eeb;
}
.more-icon {
		margin-left: 5rpx;
		font-size: 26rpx;
		color: #3a9eeb;
}
.trip-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
}
.trip-card {
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		overflow: hidden;
		position: relative;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
}

	/* 行程卡片背景图片 */
.trip-background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
}
.trip-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
		z-index: 2;
}
.card-shadow {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 8rpx;
		background: linear-gradient(to right, #4facfe, #00f2fe);
		border-radius: 0 0 20rpx 20rpx;
		z-index: 5;
}
.trip-info {
		flex: 1;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		z-index: 3;
}
.trip-location {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
}
.location-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
		margin-top: 6rpx;
}
.trip-main-info {
		flex: 1;
}
	
	/* 修改文本颜色以适应图片背景 */
.trip-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 15rpx;
		line-height: 1.4;
		text-shadow: 1rpx 1rpx 3rpx rgba(0, 0, 0, 0.5);
}
.trip-date {
		font-size: 28rpx;
		color: #f0f0f0;
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
}
.trip-date-wrap {
		display: flex;
		align-items: center;
}
.trip-date-label {
		font-size: 26rpx;
		color: #e0e0e0;
		margin-right: 10rpx;
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
}
.trip-date-value {
		font-size: 26rpx;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 4rpx 16rpx;
		border-radius: 100rpx;
}
.trip-members {
		display: flex;
		align-items: center;
}
.member-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
}
.member-count {
		font-size: 26rpx;
		color: #f0f0f0;
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
}
.trip-stats {
		width: 200rpx;
		background: linear-gradient(to bottom, rgba(182, 230, 255, 0.9), rgba(132, 212, 255, 0.9));
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 3;
}
.trip-tag {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
}
.tag-title {
		font-size: 24rpx;
		font-weight: bold;
		color: #333;
}
.tag-subtitle {
		font-size: 24rpx;
		font-weight: bold;
		color: #333;
}
.globe-icon {
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
}
.trip-divider {
		width: 80%;
		height: 2rpx;
		background-color: rgba(51, 51, 51, 0.2);
		margin: 15rpx 0;
}
.trip-duration,
	.trip-distance {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: 10rpx;
}
.stat-label {
		font-size: 24rpx;
		color: #333;
		text-align: right;
}
.stat-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		text-align: right;
}



	/* 热门目的地推荐 */
.recommendations {
		margin-top: 60rpx;
		position: relative;
		z-index: 1;
		padding: 0 10rpx;
}
.recommendation-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
}
.recommendation-title::before {
		content: "";
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(to bottom, #4facfe, #00f2fe);
		margin-right: 16rpx;
		border-radius: 4rpx;
}
.recommendation-scroll {
		width: 100%;
}
.recommendation-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 10rpx 0;
}
.recommendation-item {
		width: 100%;
		height: 220rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
		transition: all 0.3s ease;
}
.recommendation-item:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
}
.recommendation-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.recommendation-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
}
.recommendation-info {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		z-index: 2;
}
.recommendation-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 6rpx;
		text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.recommendation-desc {
		font-size: 24rpx;
		color: rgba(255,255,255,0.9);
		text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
	
	/* 加载中样式 */
.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200rpx;
		background-color: #f2f2f2;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
}
.loading-text {
		font-size: 30rpx;
		color: #999;
}
	
	/* 空数据样式 */
.empty-trip {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f9f9f9;
		border-radius: 20rpx;
		padding: 60rpx 0;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}
.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
}
.empty-text {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 10rpx;
}
.empty-subtext {
		font-size: 26rpx;
		color: #999;
}
.empty-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200rpx;
		background-color: #f2f2f2;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
}
.empty-text {
		font-size: 30rpx;
		color: #999;
}

	/* 测试按钮样式 */
.test-btn {
		background-color: #ff9500;
		color: #fff;
		padding: 15rpx 30rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
		align-self: center;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

	/* 热门目的地样式 */
.spots-grid {
		display: flex;
		justify-content: space-between;
		padding: 0 10rpx;
		gap: 30rpx;
}
.spot-card {
		width: 320rpx;
		height: 280rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
		margin-bottom: 20rpx;
}
.spot-image {
		width: 100%;
		height: 180rpx;
		border-radius: 20rpx 20rpx 0 0;
}
.spot-tag {
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		background-color: #ff6b35;
		color: white;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		font-weight: bold;
		z-index: 1;
}
.spot-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		padding: 16rpx 16rpx 8rpx;
}
.spot-location {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
		padding: 0 16rpx;
}
.location-dot {
		color: #ff4f81;
		font-size: 24rpx;
		margin-right: 6rpx;
}