修改

pages/meetingList/index.vue

@@ -6,16 +6,11 @@
 
 			<!-- 会议室列表 -->
 			<view class="room-list" v-if="currentTab === 0">
-				11111111111111
 				<view v-if="meetingRoomList.length === 0" class="empty-container">
 				    <text>暂无会议室数据 ({{ meetingRoomList }})</text>
 				  </view>
 				<view class="room-item" v-for="(item, index) in meetingRoomList" :key="index">
-					<image class="room-img" 
+	               <image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]">
-					       :src="item.imgs && item.imgs.length > 0 ? `${IMAGE_BASE_URL}${item.imgs[0]}` : '/static/default-room.jpg'"
-					       mode="aspectFill"
-					       @error="handleImageError"
-					       @click="goDetail(item)">
 					</image>
 					<view class="room-info">
 						<view class="room-header">
@@ -41,46 +36,41 @@
 				<view class="order-item" v-for="(item, index) in orderList" :key="index">
 					<view class="order-header" @click="goDetail(item.roomInfo || item)">
 						<view class="order-name">{{ item.roomInfo ? item.roomInfo.title : '会议室' }}</view>
-						<view class="order-status" :class="getStatusClass(item.status)">
+						<view class="order-status" :class="item.status == 0 ? 'available':''">
 							{{ getStatusText(item.status) }}
 						</view>
 					</view>
 
 					<view class="order-content">
-						<image class="room-img" 
+						<!-- <image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]"></image> -->
-							   :src="item.imgs && item.imgs.length > 0 ? `${IMAGE_BASE_URL}${item.imgs[0]}` : '/static/default-room.jpg'"
-							   mode="aspectFill"
-							   @error="handleImageError"
-							   @click="goDetail(item)">
-						</image>
 
 						<view class="order-details">
 							<view class="detail-item">
-								<u-icon name="account" size="16" color="#666" class="detail-icon"></u-icon>
+								<u-icon name="account" size="36" color="#666" class="detail-icon"></u-icon>
 								<text>联系人: {{ item.concatName }} ({{ item.concatPhone }})</text>
 							</view>
 
 							<view class="detail-item">
-								<u-icon name="calendar" size="16" color="#666" class="detail-icon"></u-icon>
+								<u-icon name="calendar" size="36" color="#666" class="detail-icon"></u-icon>
 								<text>预约日期: {{ formatDate(item.startAt) }}</text>
 							</view>
 
 							<view class="detail-item">
-								<u-icon name="clock" size="16" color="#666" class="detail-icon"></u-icon>
+								<u-icon name="clock" size="30" color="#666" class="detail-icon"></u-icon>
 								<text>时间段: {{ formatTimeRange(item.startAt, item.endAt) }}</text>
 							</view>
 
 							<view class="detail-item" v-if="item.remark">
-								<u-icon name="edit-pen" size="16" color="#666" class="detail-icon"></u-icon>
+								<u-icon name="edit-pen" size="36" color="#666" class="detail-icon"></u-icon>
 								<text>备注: {{ item.remark }}</text>
 							</view>
 						</view>
 					</view>
 
 					<view class="order-actions">
-						<u-button type="primary" size="mini" plain
+						<u-button type="primary"  plain
 							@click="goDetail(item.roomInfo || item)">查看详情</u-button>
-						<u-button type="error" size="mini" plain v-if="item.status === 0" @click="cancelOrder(item.id)">
+						<u-button type="error"  plain v-if="item.status === 0" @click="cancelOrder(item.id)">
 							取消预约
 						</u-button>
 					</view>
@@ -330,8 +320,8 @@
 	$light-text-color: #999;
 	$border-color: #f0f0f0;
 	$bg-color: #f8f8f8;
-	$card-radius: 12px;
+	$card-radius: 24rpx;
-	$tag-radius: 4px;
+	$tag-radius: 8rpx;
 
 	.container {
 		padding: 0;
@@ -346,32 +336,32 @@
 			height: 70vh;
 
 			.loading-text {
-				margin-top: 16px;
+				margin-top: 32rpx;
-				font-size: 15px;
+				font-size: 30rpx;
 				color: $sub-text-color;
 			}
 		}
 
 		.room-list {
-			padding: 15px;
+			padding: 30rpx;
 
 			.room-item {
 				display: flex;
-				margin-bottom: 20px;
+				margin-bottom: 40rpx;
 				border-radius: $card-radius;
 				overflow: hidden;
 				background-color: #fff;
-				box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
+				box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
 
 				.room-img {
-					width: 120px;
+					width: 240rpx;
-					height: 120px;
+					height: 240rpx;
 					flex-shrink: 0;
 				}
 
 				.room-info {
 					flex: 1;
-					padding: 12px 15px;
+					padding: 24rpx 30rpx;
 					display: flex;
 					flex-direction: column;
 
@@ -379,18 +369,18 @@
 						display: flex;
 						justify-content: space-between;
 						align-items: center;
-						margin-bottom: 8px;
+						margin-bottom: 16rpx;
 
 						.room-name {
-							font-size: 16px;
+							font-size: 32rpx;
 							font-weight: bold;
 							color: $text-color;
 						}
 
 						.room-status {
-							font-size: 12px;
+							font-size: 24rpx;
-							padding: 2px 8px;
+							padding: 4rpx 16rpx;
-							border-radius: 10px;
+							border-radius: 20rpx;
 
 							&.available {
 								background-color: rgba($success-color, 0.1);
@@ -411,17 +401,17 @@
 
 					.room-meta {
 						display: flex;
-						margin: 8px 0 12px;
+						margin: 16rpx 0 24rpx;
 
 						.meta-item {
 							display: flex;
 							align-items: center;
-							margin-right: 15px;
+							margin-right: 30rpx;
-							font-size: 13px;
+							font-size: 26rpx;
 							color: $sub-text-color;
 
 							u-icon {
-								margin-right: 4px;
+								margin-right: 8rpx;
 							}
 						}
 					}
@@ -432,10 +422,10 @@
 						margin-top: auto;
 
 						.facility-tag {
-							font-size: 11px;
+							font-size: 22rpx;
-							padding: 2px 8px;
+							padding: 4rpx 16rpx;
-							margin-right: 8px;
+							margin-right: 16rpx;
-							margin-bottom: 5px;
+							margin-bottom: 10rpx;
 							border-radius: $tag-radius;
 							background-color: #f0f7ff;
 							color: $primary-color;
@@ -446,31 +436,36 @@
 		}
 
 		.order-list {
-			padding: 15px;
+			padding: 30rpx;
 
 			.order-item {
-				margin-bottom: 20px;
+				margin-bottom: 40rpx;
 				border-radius: $card-radius;
 				overflow: hidden;
 				background-color: #fff;
-				padding: 16px;
+				padding: 32rpx;
-				box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
+				box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
 
 				.order-header {
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
-					padding-bottom: 12px;
+					padding-bottom: 24rpx;
-					border-bottom: 1px solid #f5f5f5;
+					border-bottom: 2rpx solid #f5f5f5;
 
 					.order-name {
-						font-size: 16px;
+						font-size: 32rpx;
 						font-weight: bold;
 						color: $text-color;
 					}
 
 					.order-status {
-						font-size: 13px;
+						font-size: 26rpx;
+						
+						&.available {
+							background-color: rgba($success-color, 0.1);
+							color: $success-color;
+						}
 
 						&.pending {
 							color: $warning-color;
@@ -483,29 +478,32 @@
 				}
 
 				.order-details {
-					padding: 15px 0;
+					padding: 30rpx 0;
 
 					.detail-item {
 						display: flex;
 						align-items: center;
-						margin-bottom: 10px;
+						margin-bottom: 20rpx;
-						font-size: 14px;
+						font-size: 28rpx;
 						color: $sub-text-color;
+						text{
+							padding-left: 30rpx;
+						}
 
 						.item-icon {
 							width: 50rpx;
 							height: 50rpx;
 							text-align: center !important;
-							padding-top: 10rpx;
+							padding-top: 20rpx;
 						}
 
 						.detail-icon {
 							display: flex;
 							align-items: center;
 							justify-content: center;
-							width: 20px;
+							width: 40rpx;
-							height: 20px;
+							height: 40rpx;
-							margin-right: 8px;
+							margin-right: 16rpx;
 						}
 
 						.detail-text {
@@ -521,9 +519,9 @@
 				.order-actions {
 					display: flex;
 					justify-content: flex-end;
-					gap: 10px;
+					gap: 20rpx;
-					padding-top: 10px;
+					padding-top: 20rpx;
-					border-top: 1px solid #f5f5f5;
+					border-top: 2rpx solid #f5f5f5;
 				}
 			}
 		}
@@ -534,100 +532,100 @@
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
-			padding: 40px 0;
+			padding: 80rpx 0;
 
 			.empty-icon {
-				font-size: 48px;
+				font-size: 96rpx;
 				color: #ccc;
-				margin-bottom: 15px;
+				margin-bottom: 30rpx;
 			}
 
 			.empty-text {
-				font-size: 15px;
+				font-size: 30rpx;
 				color: $sub-text-color;
 			}
 		}
 		
-			.order-content {
+		.order-content {
-				display: flex;
+			display: flex;
-				padding: 15px 0;
+			padding: 30rpx 0;
-				border-bottom: 1px solid #f5f5f5;
+			border-bottom: 2rpx solid #f5f5f5;
+		}
+		
+		.order-img {
+			width: 240rpx;
+			height: 180rpx;
+			border-radius: 12rpx;
+			margin-right: 30rpx;
+			flex-shrink: 0;
+		}
+		
+		.order-details {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+		
+		.detail-item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 16rpx;
+			font-size: 28rpx;
+			color: #666;
+			
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+		
+		.detail-icon {
+			margin-right: 16rpx;
+		}
+		
+		/* 状态样式补充 */
+		.order-status {
+			font-size: 26rpx;
+			padding: 4rpx 16rpx;
+			border-radius: 20rpx;
+			
+			&.pending {
+				background-color: rgba(#ff976a, 0.1);
+				color: #ff976a;
 			}
 			
-			.order-img {
+			&.confirmed {
-				width: 120px;
+				background-color: rgba(#07c160, 0.1);
-				height: 90px;
+				color: #07c160;
-				border-radius: 6px;
-				margin-right: 15px;
-				flex-shrink: 0;
 			}
 			
-			.order-details {
+			&.cancelled, &.rejected {
-				flex: 1;
+				background-color: rgba(#ee0a24, 0.1);
-				display: flex;
+				color: #ee0a24;
-				flex-direction: column;
-				justify-content: space-between;
 			}
 			
-			.detail-item {
+			&.completed {
-				display: flex;
+				background-color: rgba(#1989fa, 0.1);
-				align-items: center;
+				color: #1989fa;
-				margin-bottom: 8px;
+			}
-				font-size: 14px;
+		}
-				color: #666;
 		
-				&:last-child {
+		.empty-container {
-					margin-bottom: 0;
+			display: flex;
-				}
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 120rpx 0;
+			
+			.empty-icon {
+				color: #ccc;
+				margin-bottom: 30rpx;
 			}
 			
-			.detail-icon {
+			.empty-text {
-				margin-right: 8px;
+				font-size: 30rpx;
-			}
+				color: #999;
-			
-			/* 状态样式补充 */
-			.order-status {
-				font-size: 13px;
-				padding: 2px 8px;
-				border-radius: 10px;
-				
-				&.pending {
-					background-color: rgba(#ff976a, 0.1);
-					color: #ff976a;
-				}
-				
-				&.confirmed {
-					background-color: rgba(#07c160, 0.1);
-					color: #07c160;
-				}
-				
-				&.cancelled, &.rejected {
-					background-color: rgba(#ee0a24, 0.1);
-					color: #ee0a24;
-				}
-				
-				&.completed {
-					background-color: rgba(#1989fa, 0.1);
-					color: #1989fa;
-				}
-			}
-			
-			.empty-container {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				padding: 60px 0;
-				
-				.empty-icon {
-					color: #ccc;
-					margin-bottom: 15px;
-				}
-				
-				.empty-text {
-					font-size: 15px;
-					color: #999;
-				}
 			}
+		}
 	}
 </style>