<template>
	<view class="flex-col justify-start page">
	  <view class="flex-col section">
	    <view class="flex-col justify-start items-start relative group">
	      <view class="section_2"></view>
	      <text class="font text pos">填写预约信息</text>
	      <view class="flex-col section_3 pos_2">
	        <view class="flex-row justify-between items-center group_2">
	          <view class="flex-row items-center">
	            <image
	              class="shrink-0 image"
	              src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=bb513bb96b7e8c5705f06c4bfc640618.png"
	            />
	            <text class="font_2 ml-7">联系人：张三</text>
	            <text class="font_2 ml-7">15888610253</text>
	          </view>
	          <image
	            class="image_2"
	            src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=6a472e2ad5dc2aec534bd3b852a38986.png"
	          />
	        </view>
	        <view class="flex-row justify-between items-center group_3">
	          <view class="flex-row items-center">
	            <image
	              class="image"
	              src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=62c3ebe2e0dfac0ba2ddec26fdcb54ec.png"
	            />
	            <view class="flex-col items-start ml-9">
	              <text class="font_3">到店日期：2024-10-15</text>
	              <text class="mt-2 font_3">具体场次：上午场（09:30-12:00）</text>
	            </view>
	          </view>
	          <image
	            class="image_2"
	            src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=6a472e2ad5dc2aec534bd3b852a38986.png"
	          />
	        </view>
	      </view>
	    </view>
	    <view class="flex-col group_4">
	      <view class="flex-col self-stretch">
	        <text class="self-start font text_2">选择预约类别</text>
	        <view class="mt-14 flex-col justify-start self-stretch section_4">
	          <view class="flex-row equal-division">
	            <view class="flex-col items-center section_5 equal-division-item">
	              <image
	                class="image_3"
	                src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=b5db39327852641a550d033d1026764f.png"
	              />
	              <text class="font_4 text_3 mt-11">租赁服装</text>
	            </view>
	            <view class="flex-col items-center section_6 equal-division-item ml-23">
	              <image
	                class="image_3"
	                src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=ee3cc136b2309fda20df9a345ce1ef05.png"
	              />
	              <text class="font_4 text_3 text_4">自带服装</text>
	              <view class="section_7 pos_3"></view>
	            </view>
	          </view>
	        </view>
	      </view>
	      <text class="self-start font text_5 mt-23">提供免费的服务</text>
	    </view>
	    <view class="flex-col section_8">
	      <view class="flex-row items-center section_9">
	        <image
	          class="shrink-0 image_4"
	          src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=0ee5b9f55ce6aef46d889234d99afe33.png"
	        />
	        <view class="flex-col flex-1 ml-7">
	          <text class="self-start font_2 text_6">妆发服务</text>
	          <text class="mt-6 self-stretch font_5">
	            包括底妆、眉毛、眼妆、腮红和唇妆，根据您的肤色和服装风格进行个性化设计。
	          </text>
	          <text class="mt-6 self-stretch font_5">
	            根据您的脸型和服装风格，提供合适的发型设计，包括但不限于编发、盘发、吹风造型等。
	          </text>
	        </view>
	      </view>
	      <view class="flex-row items-center section_10">
	        <image
	          class="shrink-0 image_4"
	          src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=e853d682e2b7bbba7c02051808f75a0b.png"
	        />
	        <view class="flex-col flex-1 ml-7">
	          <text class="self-start font_2 text_7">摄影服务</text>
	          <text class="mt-6 self-stretch font_5">
	            提供专业的摄影棚和灯光设备，为客户打造舒适的拍摄环境。
	            <br />
	          </text>
	          <text class="mt-6 self-stretch font_5">
	            拍摄完成后，摄影师将精选照片进行后期处理，包括色彩调整、亮度优化、瑕疵去除等。
	          </text>
	        </view>
	      </view>
	      <view class="divider"></view>
	      <view class="flex-row section_11">
	        <image
	          class="shrink-0 self-center image_5"
	          src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=ca917a0e9fb6b228f113a8850988a754.png"
	        />
	        <view class="flex-col shrink-0 self-start group_5">
	          <text class="self-start font_2 text_8">联系客服</text>
	          <text class="mt-10 self-stretch font_5">请提供详细的问题描述，以便我们更快地为您解决问题。</text>
	        </view>
	        <image
	          class="shrink-0 self-center image image_6"
	          src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=a36c51a83d47fe9c04ecc0b3af4443ad.png"
	        />
	      </view>
	      <view class="flex-row justify-center items-center group_6">
	        <image
	          class="image_7"
	          src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=7857ecaca482cebbdd382382920634a0.png"
	        />
	        <text class="ml-4 font_5 text_9">预约须知</text>
	      </view>
	    </view>
	    <view class="flex-row items-center section_12">
	      <view class="flex-row items-center shrink-0 group_7">
	        <view class="flex-col justify-start items-start shrink-0 relative">
	          <text class="text_10">预约费用：</text>
	        </view>
	        <text class="text_11">￥88.</text>
	        <text class="text_13">00</text>
	      </view>
	      <view class="flex-row items-center flex-1 ml-51">
	        <view class="flex-row shrink-0 section_13">
	          <text class="text_14">费用说明</text>
	          <image
	            class="shrink-0 image_8 ml-3"
	            src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=1a5714d6e445a76940d6217416bffd25.png"
	          />
	        </view>
	        <view class="ml-10 flex-col justify-start items-center flex-1 text-wrapper">
	          <text class="font_4 text_12">确定预约</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
	
	
</script>

<style lang="scss" scoped>
.ml-7 {
  margin-left: 13.13rpx;
}
.ml-9 {
  margin-left: 16.88rpx;
}
.mt-11 {
  margin-top: 20.63rpx;
}
.ml-23 {
  margin-left: 43.13rpx;
}
.mt-23 {
  margin-top: 43.13rpx;
}
.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 {
  padding-top: 45rpx;
  background-color: #f5f5dc;
}
.group {
  padding-top: 11.25rpx;
}
.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: 26.25rpx;
  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_2 {
  padding: 31.88rpx 0 15rpx;
  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: 24rpx;
  color: #323232;
}
.image_2 {
  width: 33.75rpx;
  height: 33.75rpx;
}
.group_3 {
  padding: 22.5rpx 0 37.5rpx;
}
.font_3 {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 31.88rpx;
  color: #323232;
}
.group_4 {
  margin-top: 26.25rpx;
  padding: 0 30rpx;
}
.text_2 {
  line-height: 27.69rpx;
}
.section_4 {
  padding: 31.88rpx 0;
  background-color: #fffef8;
  border-radius: 18.75rpx;
}
.equal-division {
  margin: 0 41.25rpx;
}
.section_5 {
  flex: 1 1 281.25rpx;
}
.image_3 {
  width: 159.99rpx;
  height: 159.99rpx;
}
.font_4 {
  font-size: 30rpx;
  font-family: Inter;
  line-height: 26.25rpx;
  color: #323232;
}
.text_3 {
  line-height: 27.75rpx;
}
.section_6 {
  position: relative;
  flex: 1 1 281.25rpx;
}
.equal-division-item {
  padding: 30rpx 0 41.25rpx;
  background-color: #fff291;
  border-radius: 18.75rpx;
  height: 281.25rpx;
}
.text_4 {
  margin-top: 18.75rpx;
}
.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_5 {
  line-height: 27.79rpx;
}
.section_8 {
  margin: 26.25rpx 0 100rpx 0;
  
  padding: 28.13rpx 24.38rpx 0;
  background-color: #fff3c3;
}
.section_9 {
  margin: 0 7.5rpx;
  padding: 33.75rpx 30rpx 26.25rpx;
  background-color: #fffef8;
  border-radius: 18.75rpx;
}
.image_4 {
  border-radius: 9.38rpx;
  width: 129.38rpx;
  height: 166.88rpx;
}
.text_6 {
  line-height: 24.3rpx;
}
.section_10 {
  margin: 18.75rpx 7.5rpx 0;
  padding: 30rpx;
  background-color: #fffef8;
  border-radius: 18.75rpx;
}
.text_7 {
  line-height: 24.23rpx;
}
.divider {
  margin-top: 39.38rpx;
  background-color: #e3e3e3;
  height: 1.88rpx;
}
.section_11 {
  margin: 31.88rpx 7.5rpx 0;
  padding: 15rpx 26.25rpx;
  background-color: #fffef8;
  border-radius: 18.75rpx;
}
.image_5 {
  border-radius: 9.38rpx;
  width: 93.75rpx;
  height: 118.13rpx;
}
.group_5 {
  margin-left: 22.5rpx;
  margin-top: 15rpx;
  width: 405rpx;
}
.text_8 {
  line-height: 24.36rpx;
}
.image_6 {
  margin-left: 48.75rpx;
}
.group_6 {
  margin-top: 37.5rpx;
  padding: 22.5rpx 0;
}
.image_7 {
  width: 28.13rpx;
  height: 28.13rpx;
}
.font_5 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 26.25rpx;
  color: #898989;
}
.text_9 {
  color: #000000;
  line-height: 20.77rpx;
}
.section_12 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15rpx 22.5rpx;
  background-color: #fffef8;
}
.group_7 {
  width: 236.23rpx;
}
.text_10 {
  color: #000000;
  font-size: 26.25rpx;
  font-family: Inter;
  line-height: 24.28rpx;
}
.pos_4 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.text_11 {
  color: #fbb612;
  font-size: 33.75rpx;
  font-family: Open Sans;
  font-weight: 700;
  line-height: 24.84rpx;
}
.text_13 {
  color: #fbb612;
  font-size: 26.25rpx;
  font-family: Open Sans;
  font-weight: 700;
  line-height: 19.29rpx;
}
.section_13 {
  padding: 9.38rpx 11.25rpx;
  background-color: #d9d9d9;
  border-radius: 9.38rpx;
  height: 37.5rpx;
}
.text_14 {
  color: #323232;
  font-size: 18.75rpx;
  font-family: Inter;
  line-height: 17.36rpx;
}
.image_8 {
  width: 18.75rpx;
  height: 18.75rpx;
}
.text-wrapper {
  padding: 26.25rpx 0;
  background-color: #fbb612;
  border-radius: 75rpx;
  height: 82.5rpx;
}
.text_12 {
  color: #ffffff;
  line-height: 27.75rpx;
}
@import url(../../../common/css/global.css);
</style>