Jingde-town-wechat-uniapp/pages_order/order/orderSubscribe.vue

<template>
	<view class="page">
		<navbar title="提交预约" leftClick @leftClick="$utils.navigateBack" />
		<view class="box">
			<view class="info">
				<view class="title">
					遗产讲述
				</view>
				<view class="tips">
					开放时间：06:00-21:00
				</view>
				<view class="tips">
					开放时间：06:00-21:00
				</view>
			</view>
			<view class="form-time">
				
				<!-- 预约日期 -->
				<view class="title">
					预约日期
				</view>
				<view class="line">
					<view class="">
						2024年
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
					<view class="">
						9月
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
					<view class="">
						9日
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
				</view>
				
				<!-- 预约日期 -->
				<view class="title">
					预约日期
				</view>
				<view class="line">
					<view class="">
						08:00
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
					至
					<view class="">
						14:00
						<view class="icon">
							<uv-icon
							name="arrow-down"
							size="26rpx">
							</uv-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="form-input">
				<view class="title">
					游客信息
				</view>
				<view class="input">
					<view class="label">
						
					</view>
					<input type="text" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.page{
	.box{
		border-radius: 20rpx;
		margin: 20rpx;
		background-color: #fff;
		box-shadow: 0 0 16rpx 6rpx #00000011;
		.info{
			padding: 40rpx;
			border-bottom: 1rpx dashed #000;
			.title{
				font-size: 34rpx;
				font-weight: 900;
				padding-bottom: 20rpx;
			}
			.tips{
				font-size: 26rpx;
				color: #666666;
				padding: 10rpx 0;
			}
		}
		.form-time{
			padding: 40rpx;
			.title{
				font-weight: 900;
				padding-bottom: 20rpx;
				margin-top: 10rpx;
			}
			.line{
				display: flex;
				align-items: center;
				>view{
					border: 1rpx solid #333;
					padding: 6rpx 20rpx;
					margin: 10rpx;
					border-radius: 10rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon{
						padding: 0 10rpx;
					}
				}
			}
		}
		.form-input{
			padding: 40rpx;
		}
	}
}
</style>