jiangchengfeiyi-xiaochengxu/pages/booking/AppointmentHome.vue

<template>
	<view class="flex-col justify-start page">
		<view class="flex-col section">
			<view class="flex-col group">
				<view class="flex-col justify-start items-start relative group_2">
					<view class="section_2"></view>
					<text class="font text pos">填写预约信息</text>
					<view class="flex-col section_3 pos_2">
						<navigator url="/pages/booking/ContactInformation">
							<view class="flex-row justify-between items-center group_3">
								<view class="flex-row items-center">
									<image class="shrink-0 image"
										src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=31a410ede6797f73e60922316e512a5e.png" />
									<text class="font_2 text_2 ml-7">联系人：张三</text>
									<text class="font_2 text_3 ml-7">15888610253</text>
								</view>
								<image class="image_2"
									src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=6f325d022e16b19acc81dad350dbd524.png" />
							</view>
						</navigator>
						<navigator url="/pages/booking/date">
						<view class="flex-row justify-between items-center group_4">
								<view class="flex-row items-center">
									<image class="image"
										src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=c6dac3074d9c4e4d6286c07f0ea03db5.png" />
									<view class="flex-col items-start ml-9">
										<text class="font_3">到店日期：2024-10-15</text>
										<text class="font_3 mt-2">具体场次：上午场（09:30-12:00）</text>
									</view>
								</view>
								<image class="image_2"
									src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=6f325d022e16b19acc81dad350dbd524.png" />
						</view>
						</navigator>
					</view>
				</view>
				<view class="flex-col group_5 mt-14">
					<view class="flex-col self-stretch">
						<text class="self-start font text_4">选择预约类别</text>
						<view class="flex-col justify-start self-stretch section_4 mt-14">
							<view class="flex-row equal-division">
								<view class="flex-col items-center equal-division-item_1 section_5">
									<image class="image_3"
										src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=b6725d0c7dfe22679472bb9a47e9e39b.png" />
									<text class="font_4 mt-11">租赁服装</text>
								</view>
								<view class="flex-col items-center equal-division-item_2 equal-division-item ml-23">
									<image class="image_3"
										src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=81f08e7f1a4104921b651e672383b3d9.png" />
									<text class="font_4 text_5">自带服装</text>
									<view class="section_7 pos_3"></view>
								</view>
							</view>
						</view>
					</view>
					<text class="self-start font text_6 mt-23">选择服装价位</text>
				</view>
				<view class="flex-col section_8 mt-14">
					<view class="flex-col">
						<view class="flex-row justify-between items-center section_1">
							<view class="flex-row items-center">
								<image class="image_4"
									src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=c58ffae9f1ef4340291223163c7a8297.png" />
								<view class="flex-col ml-13">
									<text class="self-start font_2 text_7">简约风尚</text>
									<view class="flex-row items-baseline self-stretch mt-11">
										<text class="font_2">价位：</text>
										<text class="font_5 text_1 ml-1">￥100-200</text>
									</view>
									<text class="self-stretch font_6 mt-11">传承非遗之美，简约演绎经典</text>
								</view>
							</view>
							<image class="image_5"
								src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=7d16fc8dfa328fc97ff273ebeab9bc18.png" />
						</view>
						<view class="flex-row items-center section_13 mt-9">
							<image class="shrink-0 image_4"
								src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=bc0e955304da0a2ccafe3a66ac1f3aca.png" />
							<view class="flex-col flex-1 group_6">
								<text class="self-start font_2 text_9">时尚精选</text>
								<view class="flex-row items-baseline self-stretch mt-11">
									<text class="font_2">价位：</text>
									<text class="font_5 text_10 ml-1">￥200-400</text>
								</view>
								<text class="self-stretch font_6 text_11 mt-11">融合时尚与传统，精选非遗华章</text>
							</view>
							<image class="shrink-0 image_5 image_6"
								src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=7d16fc8dfa328fc97ff273ebeab9bc18.png" />
						</view>
						<view class="flex-row justify-between items-center section_13 mt-9">
							<view class="flex-row items-center">
								<image class="image_7"
									src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=4c1c758fda92536b923ec745cb077f5a.png" />
								<view class="flex-col ml-13">
									<text class="self-start font_2 text_12">奢华专属</text>
									<view class="flex-row items-baseline self-stretch mt-11">
										<text class="font_2">价位：</text>
										<text class="font_5 text_20 ml-1">￥400-800</text>
									</view>
									<text class="self-stretch font_6 mt-11">非遗匠心独运，奢华专属定制</text>
								</view>
							</view>
							<image class="image_5"
								src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=7d16fc8dfa328fc97ff273ebeab9bc18.png" />
						</view>
					</view>
					<view class="flex-row justify-center items-center mt-15">
						<image class="image_8"
							src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=18dd2fa44538df4392850f46b9b3550e.png" />
						<text class="font_6 text_13 ml-4">预约须知</text>
					</view>
				</view>
			</view>
			<view class="flex-row items-center section_9 mt-19">
				<view class="flex-row items-center shrink-0 group_7">
					<view class="flex-col justify-start items-start shrink-0 relative group_8">
						<text class="text_14">预约费用：</text>
						<image class="image_2 pos_4"
							src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=3393d3563afcfe7dedbadba1ea5328a0.png" />
					</view>
					<text class="font_5 text_15">88.</text>
					<text class="text_17">00</text>
				</view>
				<view class="flex-row items-center flex-1 ml-51">
			<!-- 		<navigator url="../booking/BillingOfFees/BillingOfFees"> -->
						<view class="flex-row shrink-0 section_10" @click="goto">
							<text class="text_18">费用说明</text>
							<image class="shrink-0 image_9 ml-3"
								src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=0455b173571a47fdc438588e788f26c5.png" />
						</view>
					<!-- </navigator> -->
					<view class="flex-col justify-start items-center flex-1 text-wrapper ml-10">
						<text class="font_4 text_16">确定预约</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	// import { ref} from 'vue';
	const goto=()=>{
		uni.navigateTo({
			url:'/pages/booking/BillingOfFees/BillingOfFees'
		})
	}
</script>

<style lang="scss" scoped>
	.ml-7 {
		margin-left: 13.13rpx;
	}

	.ml-9 {
		margin-left: 16.88rpx;
	}

	.ml-23 {
		margin-left: 43.13rpx;
	}

	.mt-23 {
		margin-top: 43.13rpx;
	}

	.ml-13 {
		margin-left: 24.38rpx;
	}

	.mt-9 {
		margin-top: 16.88rpx;
	}

	.mt-11 {
		margin-top: 20.63rpx;
	}

	.ml-1 {
		margin-left: 1.88rpx;
	}

	.mt-15 {
		margin-top: 28.13rpx;
	}

	.mt-19 {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.ml-51 {
		margin-left: 95.63rpx;
	}

	.ml-3 {
		margin-left: 5.63rpx;
	}

	.page {
		background-color: #ffffff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		background-color: #f5f5dc;
	}

	.group {
		padding: 45.75rpx 0;
	}

	.group_2 {
		padding-top: 12.38rpx;
	}

	.section_2 {
		margin-left: 71.25rpx;
		background-color: #ffffff00;
		border-radius: 18.75rpx;
		width: 281.25rpx;
		height: 281.25rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 27.75rpx;
		color: #323232;
	}

	.text {
		line-height: 27.96rpx;
	}

	.pos {
		position: absolute;
		left: 21.62rpx;
		top: 0;
	}

	.section_3 {
		padding-left: 33.75rpx;
		padding-right: 28.13rpx;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.pos_2 {
		position: absolute;
		left: 20.63rpx;
		right: 20.63rpx;
		top: 53.63rpx;
	}

	.group_3 {
		padding: 31.88rpx 0 15.94rpx;
		border-bottom: solid 1.88rpx #e2e0e0;
	}

	.image {
		width: 43.13rpx;
		height: 43.13rpx;
	}

	.font_2 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 24.3rpx;
		color: #323232;
	}

	.text_2 {
		line-height: 24rpx;
	}

	.text_3 {
		line-height: 24rpx;
	}

	.image_2 {
		width: 33.75rpx;
		height: 33.75rpx;
	}

	.group_4 {
		padding: 22.97rpx 0 36.51rpx;
	}

	.font_3 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 31.88rpx;
		color: #323232;
	}

	.group_5 {
		padding: 0 30rpx;
	}

	.text_4 {
		line-height: 27.69rpx;
	}

	.section_4 {
		padding: 31.88rpx 0;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.equal-division {
		margin-left: 41.25rpx;
		margin-right: 41.27rpx;
	}

	.equal-division-item_1 {
		flex: 1 1 281.25rpx;
	}

	.section_5 {
		padding: 31.57rpx 0 40.58rpx;
		background-color: #fff291;
		border-radius: 18.75rpx;
		height: 281.25rpx;
	}

	.image_3 {
		width: 159.99rpx;
		height: 159.99rpx;
	}

	.font_4 {
		font-size: 30rpx;
		font-family: Inter;
		line-height: 27.75rpx;
		color: #323232;
	}

	.equal-division-item_2 {
		position: relative;
		flex: 1 1 281.25rpx;
	}

	.equal-division-item {
		padding: 31.56rpx 0 42.49rpx;
		background-color: #fff291;
		border-radius: 18.75rpx;
		height: 281.25rpx;
	}

	.text_5 {
		margin-top: 19.46rpx;
	}

	.section_7 {
		background-color: #ffffff99;
		border-radius: 18.75rpx;
		width: 281.25rpx;
		height: 281.25rpx;
	}

	.pos_3 {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.text_6 {
		line-height: 27.86rpx;
	}

	.section_8 {
		padding: 30rpx 30rpx 26.25rpx;
		background-color: #fff3c3;
	}

	.section_1 {
		padding: 24.38rpx 26.25rpx 26.25rpx 39.38rpx;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.image_4 {
		border-radius: 9.38rpx;
		width: 118.13rpx;
		height: 151.88rpx;
	}

	.text_7 {
		line-height: 24.26rpx;
	}

	.font_5 {
		font-size: 33.75rpx;
		font-family: Open Sans;
		line-height: 24.3rpx;
		color: #ff3c3c;
	}

	.text_1 {
		line-height: 24.81rpx;
	}

	.font_6 {
		font-size: 22.5rpx;
		font-family: Open Sans;
		line-height: 21.36rpx;
		color: #898989;
	}

	.image_5 {
		width: 37.5rpx;
		height: 37.5rpx;
	}

	.section_13 {
		padding: 26.27rpx 26.25rpx 24.36rpx 39.38rpx;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.group_6 {
		margin-left: 24.77rpx;
	}

	.text_9 {
		line-height: 24.15rpx;
	}

	.text_10 {
		line-height: 24.81rpx;
	}

	.text_11 {
		line-height: 21.38rpx;
	}

	.image_6 {
		margin-left: 39.99rpx;
	}

	.image_7 {
		width: 118.13rpx;
		height: 151.88rpx;
	}

	.text_12 {
		line-height: 24.23rpx;
	}

	.text_20 {
		line-height: 24.81rpx;
	}

	.image_8 {
		width: 28.13rpx;
		height: 28.13rpx;
	}

	.text_13 {
		color: #000000;
		line-height: 20.77rpx;
	}

	.section_9 {
		padding: 16.88rpx 20.63rpx 15rpx 21.6rpx;
		background-color: #fffef8;
	}

	.group_7 {
		width: 236.23rpx;
	}

	.group_8 {
		padding: 4.22rpx 0 5.25rpx;
	}

	.text_14 {
		color: #000000;
		font-size: 26.25rpx;
		font-family: Inter;
		line-height: 24.28rpx;
	}

	.pos_4 {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.text_15 {
		color: #fbb612;
		font-weight: 700;
		line-height: 24.84rpx;
	}

	.text_17 {
		margin-left: 3.52rpx;
		color: #fbb612;
		font-size: 26.25rpx;
		font-family: Open Sans;
		font-weight: 700;
		line-height: 19.29rpx;
	}

	.section_10 {
		padding: 9.38rpx 9.38rpx 9.38rpx 10.18rpx;
		background-color: #d9d9d9;
		border-radius: 9.38rpx;
		height: 37.5rpx;
	}

	.text_18 {
		color: #323232;
		font-size: 18.75rpx;
		font-family: Inter;
		line-height: 17.36rpx;
	}

	.image_9 {
		width: 18.75rpx;
		height: 18.75rpx;
	}

	.text-wrapper {
		padding: 27.3rpx 0 27.45rpx;
		background-color: #fbb612;
		border-radius: 75rpx;
		height: 82.5rpx;
	}

	.text_16 {
		color: #ffffff;
	}

	@import url(../../common/css/global.css);
</style>