/* 容器样式 */ .preview-container { width: 100%; height: 100vh; background-image: url('https://klmybwg.4dage.com/mini/wxImg/bg.png'); overflow: auto; } /* 预约列表容器 */ .reservation-list { width: 100%; height: 100vh; padding: 40rpx 30rpx; box-sizing: border-box; } /* 预约卡片样式 */ .reservation-card { position: relative; width: 100%; height: 736rpx; margin-bottom: 40rpx; border-radius: 20rpx; overflow: hidden; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); } /* 卡片背景图 */ .card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /* 预约信息区域 */ .reservation-info { position: absolute; top: 10rpx; width: 90%; z-index: 1; padding: 40rpx 0 0 40rpx; display: flex; justify-content: space-between; align-items: flex-start; } /* 日期时间区域 */ .date-time-section { flex: 1; } /* 信息行 */ .info-row { display: flex; align-items: center; margin-bottom: 20rpx; } .info-row:last-child { margin-bottom: 0; } /* 标签样式 */ .label { font-size: 32rpx; color: #584735; font-weight: bold; margin-right: 10rpx; } /* 值样式 */ .value { font-size: 32rpx; color: #B1967B; } /* 取消按钮 */ .cancel-btn { display: flex; justify-content: center; align-items: center; width: 80px; height: 40px; border-radius: 6rpx; border: 1px solid #B1967B; color: #B1967B; font-size: 32rpx; } /* 印章图标 */ .stamp-icon { width: 136rpx; height: 136rpx; } .stamp-icon image { width: 100%; height: 100%; } /* 参观人信息区域 */ .visitors-section { position: absolute; top: 240rpx; z-index: 1; padding: 0 40rpx 20rpx; max-height: 440rpx; overflow-y: auto; } /* 区域标题 */ .section-title { font-size: 28rpx; color: #333; font-weight: 600; margin-bottom: 20rpx; margin-top: 30rpx; } .section-title:first-child { margin-top: 0; } /* 参观人信息 */ .visitor-info { margin-bottom: 20rpx; } /* 参观人详情 */ .visitor-detail { display: flex; align-items: center; margin-bottom: 15rpx; } .visitor-detail:last-child { margin-bottom: 0; } /* 参观人标签 */ .visitor-label { font-size: 32rpx; color: #584735; margin-right: 10rpx; min-width: 140rpx; } /* 参观人值 */ .visitor-value { font-size: 32rpx; color: #B1967B; flex: 1; } /* 加载更多样式 */ .load-more { display: flex; justify-content: center; align-items: center; padding: 30rpx 0; } .load-more-text { font-size: 28rpx; color: #999; } .loading-text { font-size: 28rpx; color: #666; } /* 没有更多数据样式 */ .no-more { display: flex; justify-content: center; align-items: center; padding: 30rpx 0; } .no-more-text { font-size: 28rpx; color: #ccc; } /* 首次加载样式 */ .first-loading { display: flex; justify-content: center; align-items: center; height: 400rpx; margin-top: 100rpx; } /* 空状态样式 */ .empty-state { display: flex; justify-content: center; align-items: center; height: 400rpx; margin-top: 100rpx; } .empty-text { font-size: 32rpx; color: #999; text-align: center; } /* 滚动条样式 */ ::-webkit-scrollbar { width: 0; background: transparent; }