diff --git a/pages.json b/pages.json
index 722f957..48a7a8f 100644
--- a/pages.json
+++ b/pages.json
@@ -196,6 +196,13 @@
 		{
 			"navigationBarTitleText" : ""
 		}
+	},
+	{
+		"path" : "pages/syy",
+		"style" : 
+		{
+			"navigationBarTitleText" : ""
+		}
 	}
 	],
 	"globalStyle": {
diff --git a/pages/Shopping-cart/component/addProduct.vue b/pages/Shopping-cart/component/addProduct.vue
index 89a3ec3..a648c86 100644
--- a/pages/Shopping-cart/component/addProduct.vue
+++ b/pages/Shopping-cart/component/addProduct.vue
@@ -1,235 +1,261 @@
 <template>
 	<view class="flex-col page">
-	  <view class="flex-row group">
-	    <view class=" ">
-				<image
-				  class="flex-col justify-start items-end shrink-0 self-start image-wrapper"
-				  :src="productBrief.goodImg"
-				/>
-	    </view>
-	    <view class="flex-row flex-1 ml-23">
-	      <view class="flex-col flex-1 self-start group_2">
-	        <view class="self-start group_3">
-	          <text class="text_2">￥</text>
-	          <text class="text">{{ productBrief.price }}</text>
-	        </view>
-	        <view class="mt-14 flex-col items-start self-stretch">
-	          <text class="text_3">{{productBrief.name}}</text>
-	          <!-- <text class="text_4 mt-9">{{已选：蓝色发簪}}</text> -->
-	        </view>
-	      </view>
-	      <view class="flex-col shrink-0 ml-5">
-	        <image
-	          class="self-end image"
-	          src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FxSHTnKhk-close.png"
-						@click="close()"
-					/>
-	        <view class="flex-row self-stretch mt-104">
-	          <view class="flex-col justify-start items-center image-wrapper_2">
-	            <image
-	              class="image_3"
-	              src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FosWvYyNx-short1.png"
-								@click="decrease"
-	            />
-	          </view>
-	          <view class="ml-2 flex-col justify-start items-center text-wrapper"><text class="text_5">{{ quantity }}</text></view>
-	          <view class="ml-2 flex-col justify-start items-center image-wrapper_3">
-	            <image
-	              class="image_3"
-	              src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGbdSQDul-add1.png"
-								@click="increase"
-	            />
-	          </view>
-	        </view>
-	      </view>
-	    </view>
-	  </view>
-	  <view class="flex-col justify-start items-center text-wrapper_2" @click="addCart"><text class="text_6">加入购物车</text></view>
+		<view class="flex-row group">
+			<view class=" ">
+				<image class="flex-col justify-start items-end shrink-0 self-start image-wrapper"
+					:src="productBrief.goodImg" />
+			</view>
+			<view class="flex-row flex-1 ml-23">
+				<view class="flex-col flex-1 self-start group_2">
+					<view class="self-start group_3">
+						<text class="text_2">￥</text>
+						<text class="text">{{ productBrief.price }}</text>
+					</view>
+					<view class="mt-14 flex-col items-start self-stretch">
+						<text class="text_3">{{productBrief.name}}</text>
+						<!-- <text class="text_4 mt-9">{{已选：蓝色发簪}}</text> -->
+					</view>
+				</view>
+				<view class="flex-col shrink-0 ml-5">
+					<image class="self-end image"
+						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FxSHTnKhk-close.png"
+						@click="close()" />
+					<view class="flex-row self-stretch mt-104">
+						<view class="flex-col justify-start items-center image-wrapper_2">
+							<image class="image_3"
+								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FosWvYyNx-short1.png"
+								@click="decrease" />
+						</view>
+						<view class="ml-2 flex-col justify-start items-center text-wrapper"><text
+								class="text_5">{{ quantity }}</text></view>
+						<view class="ml-2 flex-col justify-start items-center image-wrapper_3">
+							<image class="image_3"
+								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGbdSQDul-add1.png"
+								@click="increase" />
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="flex-col justify-start items-center text-wrapper_2" @click="addCart"><text
+				class="text_6">加入购物车</text></view>
 	</view>
 </template>
 
 <script setup>
-import { onMounted , ref } from 'vue';
-import emitter from '../../../utils/emitter';
-import { onLoad , onShow } from "@dcloudio/uni-app"; 
-import { baseUrl , testUrl ,suiUrl} from '../../../api/request';
-const productBrief = ref({}) //商品简要对象
-const quantity = ref(1)
-const userInfo = ref({})
-onMounted(()=>{
-	emitter.on('product',(val)=>{
-		// console.log(val);
-		productBrief.value = val
+	import {
+		onMounted,
+		ref
+	} from 'vue';
+	import emitter from '../../../utils/emitter';
+	import {
+		onLoad,
+		onShow
+	} from "@dcloudio/uni-app";
+	import {
+		baseUrl,
+		testUrl,
+		suiUrl
+	} from '../../../api/request';
+	const productBrief = ref({}) //商品简要对象
+	const quantity = ref(1)
+	const userInfo = ref({})
+	onMounted(() => {
+		emitter.on('product', (val) => {
+			// console.log(val);
+			productBrief.value = val
+		})
 	})
-})
-onShow(()=>{ 
-	userInfo.value = wx.getStorageSync('userInfo')  //获取用户信息
-})
-const close =()=>{
-	emitter.emit('close')
-}
-const addCart = async()=>{
-	console.log('商品brief-->',productBrief.value);
-	console.log('用户信息-->',userInfo.value);
-	const res = await uni.request({
-		url: baseUrl + '/cart/add',
-		method: 'POST',
-		header: {
-			cookie: wx.getStorageSync('cookie')
-		},
-		data: {
-			userId: userInfo.value.id,
-			goodId: productBrief.value.id,
-			quantity: quantity.value,
-			subtotal: productBrief.value.price * quantity.value,
-			isGoodType: productBrief.value.isGoodType
+	onShow(() => {
+		userInfo.value = wx.getStorageSync('userInfo') //获取用户信息
+	})
+	const close = () => {
+		emitter.emit('close')
+	}
+	const addCart = async () => {
+		console.log('商品brief-->', productBrief.value);
+		console.log('用户信息-->', userInfo.value);
+		const res = await uni.request({
+			url: baseUrl + '/cart/add',
+			method: 'POST',
+			header: {
+				cookie: wx.getStorageSync('cookie')
+			},
+			data: {
+				userId: userInfo.value.id,
+				goodId: productBrief.value.id,
+				quantity: quantity.value,
+				subtotal: productBrief.value.price * quantity.value,
+				isGoodType: productBrief.value.isGoodType
+			}
+		})
+		if (res.data.code === 1) {
+			uni.showToast({
+				icon: 'success',
+				title: "加入购物车成功"
+			})
+			close()
+		} else {
+			console.log('失败原因-->', res.data);
+			uni.showToast({
+				icon: 'error',
+				title: "请求失败"
+			})
+			return;
 		}
-	})
-	if(res.data.code === 1) {
-		uni.showToast({
-			icon: 'success',
-			title: "加入购物车成功"
-		})
-		close()
-	}else{
-		console.log('失败原因-->',res.data);
-		uni.showToast({
-			icon: 'error',
-			title: "请求失败"
-		})
-		return;
 	}
-}
-//减少商品
-const decrease =()=>{
-	// console.log('index-->',index);
-	if(quantity.value > 0) {
-		quantity.value -= 1
+	//减少商品
+	const decrease = () => {
+		// console.log('index-->',index);
+		if (quantity.value > 0) {
+			quantity.value -= 1
+		}
 	}
-}
-//这里应该结合库存有多少  11.8
-const increase = () =>{
-	if(quantity.value <= productBrief.value.inventory) {
-		quantity.value += 1
+	//这里应该结合库存有多少  11.8
+	const increase = () => {
+		if (quantity.value <= productBrief.value.inventory) {
+			quantity.value += 1
+		}
 	}
-}
 </script>
 
 <style lang="scss" scoped>
-.ml-23 {
-  margin-left: 43.13rpx;
-}
-.mt-9 {
-  margin-top: 16.88rpx;
-}
-.ml-5 {
-  margin-left: 9.38rpx;
-}
-.mt-104 {
-  margin-top: 195rpx;
-}
-.page {
-  padding: 0 31.88rpx 31.88rpx 45rpx;
-  background-color: #fffef8;
-  border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-}
-.group {
-  padding: 28.13rpx 0 37.5rpx 11.25rpx;
-}
-.image-wrapper {
-  margin-top: 76.88rpx;
-  // padding-bottom: 151.88rpx;
-  border-radius: 5.63rpx;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  width: 191.25rpx;
-  height: 189.38rpx;
-}
-.image_2 {
-  border-radius: 5.63rpx;
-  width: 37.5rpx;
-  height: 37.5rpx;
-}
-.group_2 {
-  margin-top: 112.5rpx;
-}
-.group_3 {
-  margin-left: 3.75rpx;
-}
-.text_2 {
-  color: #ff0000;
-  font-size: 26.25rpx;
-  font-family: STZhongsong;
-  line-height: 18.13rpx;
-}
-.text {
-  color: #ff0000;
-  font-size: 37.5rpx;
-  font-family: STZhongsong;
-  line-height: 26.92rpx;
-}
-.text_3 {
-  color: #000000;
-  font-size: 28.13rpx;
-  font-family: Open Sans;
-  line-height: 26.21rpx;
-}
-.text_4 {
-  color: #000000;
-  font-size: 26.25rpx;
-  font-family: Open Sans;
-  line-height: 24.34rpx;
-}
-.image {
-  width: 52.5rpx;
-  height: 52.5rpx;
-}
-.image-wrapper_2 {
-  padding: 11.25rpx 0;
-  background-color: #f5f5dc;
-  border-radius: 5.63rpx 0rpx 0rpx 5.63rpx;
-  width: 52.5rpx;
-  height: 52.5rpx;
-}
-.image_3 {
-  width: 33.75rpx;
-  height: 33.75rpx;
-}
-.text-wrapper {
-  padding: 15rpx 0 11.25rpx;
-  background-color: #f5f5dc;
-  width: 52.5rpx;
-  height: 52.5rpx;
-}
-.text_5 {
-  color: #000000;
-  font-size: 30rpx;
-  font-family: Open Sans;
-  line-height: 21.41rpx;
-}
-.image-wrapper_3 {
-  padding: 11.25rpx 0;
-  background-color: #f5f5dc;
-  border-radius: 0rpx 5.63rpx 5.63rpx 0rpx;
-  width: 52.5rpx;
-  height: 52.5rpx;
-}
-.text-wrapper_2 {
-  margin-right: 15rpx;
-  padding: 22.5rpx 0;
-  background-color: #ffd45a;
-  border-radius: 93.75rpx;
-}
-.text_6 {
-  color: #ffffff;
-  font-size: 30rpx;
-  font-family: Inter;
-  font-weight: 700;
-  line-height: 28.2rpx;
-}
+	.ml-23 {
+		margin-left: 43.13rpx;
+	}
+
+	.mt-9 {
+		margin-top: 16.88rpx;
+	}
+
+	.ml-5 {
+		margin-left: 9.38rpx;
+	}
+
+	.mt-104 {
+		margin-top: 195rpx;
+	}
+
+	.page {
+		padding: 0 31.88rpx 31.88rpx 45rpx;
+		background-color: #fffef8;
+		border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
+		width: 100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+		height: 100%;
+	}
+
+	.group {
+		padding: 28.13rpx 0 37.5rpx 11.25rpx;
+	}
+
+	.image-wrapper {
+		margin-top: 76.88rpx;
+		// padding-bottom: 151.88rpx;
+		border-radius: 5.63rpx;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		width: 191.25rpx;
+		height: 189.38rpx;
+	}
+
+	.image_2 {
+		border-radius: 5.63rpx;
+		width: 37.5rpx;
+		height: 37.5rpx;
+	}
+
+	.group_2 {
+		margin-top: 112.5rpx;
+	}
+
+	.group_3 {
+		margin-left: 3.75rpx;
+	}
+
+	.text_2 {
+		color: #ff0000;
+		font-size: 26.25rpx;
+		font-family: STZhongsong;
+		line-height: 18.13rpx;
+	}
+
+	.text {
+		color: #ff0000;
+		font-size: 37.5rpx;
+		font-family: STZhongsong;
+		line-height: 26.92rpx;
+	}
+
+	.text_3 {
+		color: #000000;
+		font-size: 28.13rpx;
+		font-family: Open Sans;
+		line-height: 26.21rpx;
+	}
+
+	.text_4 {
+		color: #000000;
+		font-size: 26.25rpx;
+		font-family: Open Sans;
+		line-height: 24.34rpx;
+	}
+
+	.image {
+		width: 52.5rpx;
+		height: 52.5rpx;
+	}
+
+	.image-wrapper_2 {
+		padding: 11.25rpx 0;
+		background-color: #f5f5dc;
+		border-radius: 5.63rpx 0rpx 0rpx 5.63rpx;
+		width: 52.5rpx;
+		height: 52.5rpx;
+	}
+
+	.image_3 {
+		width: 33.75rpx;
+		height: 33.75rpx;
+	}
+
+	.text-wrapper {
+		padding: 15rpx 0 11.25rpx;
+		background-color: #f5f5dc;
+		width: 52.5rpx;
+		height: 52.5rpx;
+	}
+
+	.text_5 {
+		color: #000000;
+		font-size: 30rpx;
+		font-family: Open Sans;
+		line-height: 21.41rpx;
+	}
+
+	.image-wrapper_3 {
+		padding: 11.25rpx 0;
+		background-color: #f5f5dc;
+		border-radius: 0rpx 5.63rpx 5.63rpx 0rpx;
+		width: 52.5rpx;
+		height: 52.5rpx;
+	}
+
+	.text-wrapper_2 {
+		margin-right: 15rpx;
+		padding: 22.5rpx 0;
+		background-color: #ffd45a;
+		border-radius: 93.75rpx;
+	}
+
+	.text_6 {
+		color: #ffffff;
+		font-size: 30rpx;
+		font-family: Inter;
+		font-weight: 700;
+		line-height: 28.2rpx;
+	}
+
 	@import url(../../../common/css/global.css);
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/booking/respectable/respectable.vue b/pages/booking/respectable/respectable.vue
index 91a9245..af476f6 100644
--- a/pages/booking/respectable/respectable.vue
+++ b/pages/booking/respectable/respectable.vue
@@ -1,803 +1,561 @@
 <template>
 	<!-- 弹窗 -->
 	<uni-popup ref="popup1" v-if="showPopup1" :mask-click="false" background-color="white">
-			  <view style="text-align: center;margin: 10px;font-size: 18px;">预约须知</view>
-			  	<view style="margin: 0 20px;">1.成功预约的顾客需按照预定时间前往店内挑选相应级别的服装。
-			  	为确保衣物在体验过程中的完好无损，顾客需根据所选服装的级别补缴尾款以及相应的押金。
-			  	拍摄结束后，店铺将依据衣物的实际状况评估是否扣除押金。</view>
-			  	<view style="margin: 0 20px;">
-			  				2.其中部分物品商家可提供，属于增值服务（如一次性隐形眼镜、
-			  				 一次性粉扑等属于服务费以外的赠送服务，买家可选择自带用品，不影响服务价格），
-			  				 需要买家自己准备的，客服需要提前告诉买家（如胸贴等贴身物品）
-			  			</view>
-			  	<button @click="close1" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
-				margin-bottom: 20px;">我知道了</button>  
+		<view style="text-align: center;margin: 10px;font-size: 18px;">预约须知</view>
+		<view style="margin: 0 20px;">1.成功预约的顾客需按照预定时间前往店内挑选相应级别的服装。
+			为确保衣物在体验过程中的完好无损，顾客需根据所选服装的级别补缴尾款以及相应的押金。
+			拍摄结束后，店铺将依据衣物的实际状况评估是否扣除押金。</view>
+		<view style="margin: 0 20px;">
+			2.其中部分物品商家可提供，属于增值服务（如一次性隐形眼镜、
+			一次性粉扑等属于服务费以外的赠送服务，买家可选择自带用品，不影响服务价格），
+			需要买家自己准备的，客服需要提前告诉买家（如胸贴等贴身物品）
+		</view>
+		<button @click="close1" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
+				margin-bottom: 20px;">我知道了</button>
 	</uni-popup>
 	<uni-popup ref="popup2" v-if="showPopup2" :mask-click="false" background-color="white">
-		 <scroll-view style="height: 400px;width: 100%;" scroll-y="true">
-		    <view style="text-align: center;margin: 10px;font-size: 18px;">费用说明</view>
-		    <view style="margin: 10px;"> 一、费用支付流程</view>
-		    <view style="margin: 0 20px;">
-		      <view>1.确定等级：您将根据个人需求选择合适的服装价位区间，并完成预约操作。</view>
-		      <view>2.预约成功：预约成功后，您需前往店铺挑选对应等级的服装。</view>
-		      <view>3.补缴尾款及押金：在挑选服装时，您需要补缴尾款（扣除已支付定金后的剩余服务或商品费用）以及押金（用于保障服装归还时的完好）。</view>
-		    </view>
-		    <view style="margin: 10px;"> 二、尾款具体事项</view>
-		    <view style="margin: 0 20px;">
-		      <view>1.租赁服装：若您选择租赁我们店铺没有的服装，租赁费用将在您支付尾款时一并结算。无论拍摄是否进行，租赁费用均不予退还。</view>
-		      <view>2.购买服装：如您希望购买我们店铺的服装，且我们同意购买，将按照服装的稀有程度分等级定价。您需按照所选等级支付尾款。</view>
-		      <view>3.定制服务：若您自带衣服，我们提供妆发及摄影服务。若需我们额外购买服装，将按照上述等级定价，您需支付相应的尾款。</view>
-		    </view>
-		    <view style="margin: 10px;"> 三、定金与押金说明</view>
-		    <view style="margin: 0 20px;">
-		      <view>1.定金：预约时支付的定金用于确认您的预约意向，定金不予退还。</view>
-		      <view>2.押金：拍摄完成后，我们将根据服装的归还情况决定是否扣除押金。若服装无损坏，押金将全额退还。</view>
-		    </view>
-		    <view style="margin: 10px;"> 四、特殊情况处理</view>
-		    <view style="margin: 0 20px;">
-		      <view> 若因特殊情况您需要取消预约，请及时与我们联系。未拍摄情况下，定金不予退还，已支付的租赁费用亦不退还。</view>
-		    </view>
-		  </scroll-view>
-	      <button @click="close2" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
+		<scroll-view style="height: 400px;width: 100%;" scroll-y="true">
+			<view style="text-align: center;margin: 10px;font-size: 18px;">费用说明</view>
+			<view style="margin: 10px;"> 一、费用支付流程</view>
+			<view style="margin: 0 20px;">
+				<view>1.确定等级：您将根据个人需求选择合适的服装价位区间，并完成预约操作。</view>
+				<view>2.预约成功：预约成功后，您需前往店铺挑选对应等级的服装。</view>
+				<view>3.补缴尾款及押金：在挑选服装时，您需要补缴尾款（扣除已支付定金后的剩余服务或商品费用）以及押金（用于保障服装归还时的完好）。</view>
+			</view>
+			<view style="margin: 10px;"> 二、尾款具体事项</view>
+			<view style="margin: 0 20px;">
+				<view>1.租赁服装：若您选择租赁我们店铺没有的服装，租赁费用将在您支付尾款时一并结算。无论拍摄是否进行，租赁费用均不予退还。</view>
+				<view>2.购买服装：如您希望购买我们店铺的服装，且我们同意购买，将按照服装的稀有程度分等级定价。您需按照所选等级支付尾款。</view>
+				<view>3.定制服务：若您自带衣服，我们提供妆发及摄影服务。若需我们额外购买服装，将按照上述等级定价，您需支付相应的尾款。</view>
+			</view>
+			<view style="margin: 10px;"> 三、定金与押金说明</view>
+			<view style="margin: 0 20px;">
+				<view>1.定金：预约时支付的定金用于确认您的预约意向，定金不予退还。</view>
+				<view>2.押金：拍摄完成后，我们将根据服装的归还情况决定是否扣除押金。若服装无损坏，押金将全额退还。</view>
+			</view>
+			<view style="margin: 10px;"> 四、特殊情况处理</view>
+			<view style="margin: 0 20px;">
+				<view> 若因特殊情况您需要取消预约，请及时与我们联系。未拍摄情况下，定金不予退还，已支付的租赁费用亦不退还。</view>
+			</view>
+		</scroll-view>
+		<button @click="close2" style="width: 50%;background-color:#f2b600;border-radius: 30px;margin-top: 20px;
 	      margin-bottom: 20px;">我知道了</button>
-	    </uni-popup>
-	<view class="flex-col page" >
-		<view class="flex-col justify-start items-start relative group" @click="goToContact()"> <!-- @click="goToContact()" -->
-			<view class="section"></view>
-			<text class="font text pos">填写预约信息</text>
-			<view class="flex-col section_2 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=672dbef4c471750012de4bf6&name=8bde7b2f7a6da1a009b89295a48cc8ec.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=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.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=672dbef4c471750012de4bf6&name=c6dac3074d9c4e4d6286c07f0ea03db5.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>
+	</uni-popup>
+
+	<view class="flex-col justify-start relative page">
+		<view class="section"></view>
+		<text class="font text pos">选择预约类别</text>
+		<view class="flex-row equal-division group">
+			<view class="flex-col equal-division-item section_2" @click="showWhole('0')">
+				<image class="self-start image"
+					src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=e29908fd7c3623fbb6854b38b828c5b8.png" />
+				<text class="self-center font mt-7">整套约拍</text>
+			</view>
+			<view class="ml-48 flex-col equal-division-item section_3" @click="showWhole('1')">
+				<image class="self-start image"
+					src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=ca4da1e3507e3276bd2cf0946c8322bd.png" />
+				<text class="mt-8 self-center font text_2">自带服装</text>
+			</view>
+		</view>
+		<template v-if="zhi === '0'">
+			<text class="font text_3 pos_2">选择服装类别</text>
+			<view class="flex-col section_4 pos_3">
+				<view class="flex-col list">
+					<view class="flex-row justify-between section_5" v-for="(item,index) in Whole" :key="item"
+						@click="goToText(index)">
+						<view class="flex-row items-end self-center">
+							<image class="image_2" :src="item.image" />
+							<view class="ml-20 flex-col group_2">
+								<text class="self-start font_2 text_4">{{item.clothesType}}</text>
+								<view class="flex-row items-center self-stretch group_3">
+									<view class="group_4">
+										<text class="font_2">价位</text>
+										<text class="font_4">：</text>
+									</view>
+									<text class="ml-6 font_3 text_5">￥{{item.minPrice}}-{{item.maxPrice}}</text>
+								</view>
+								<text class="self-stretch font_5 text_6">{{item.brief}}</text>
+							</view>
 						</view>
-					</view>
-					<image class="image_2"
-						src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.png" />
-				</view>
-			</view>
-		</view>
-		<view class="flex-col group_4">
-			<text class="self-start font text_4">选择预约类别</text>
-			<view class="mt-14 flex-col justify-start self-stretch section_3">
-				<view class="flex-row equal-division">
-					<view class=" clickable-item " @click="showWhole('0')">
-						<image class="image_3"
-							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQdGvHpRx-paishe.png" />
-						<text class="mt-2 font_4 text_5">整套约拍</text>
-					</view>
-					<view class=" ml-23 clickable-item" @click="showOwn('1')">
-						<image class="image_3"
-							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FWJdpNSbl-000.png" />
-						<text class="mt-2 font_4">自带服装</text>
+						<image class="self-start image_3 image_4"
+							src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=eee721f36de3196113485ea7e5c6b5ad.png" />
 					</view>
 				</view>
 			</view>
-		</view>
-	<template v-if="zhi === '0'" > 
-		<view class="flex-col section_7" >
-			<view class="flex-col group_5">
-				<text class="self-start font text_6">选择服装价位</text>
-				<view class="flex-row items-center self-stretch section_8 view" v-for="(item,index) in Whole" :key="item" @click="goToText(index)" >
-					<image :src="item.image" class="shrink-0 image_4"></image>
-					<view class="flex-col flex-1 ml-13">
-						<view class="self-start font_2 text_7">{{item.clothesType}}</view>
-						<view class="flex-row items-baseline self-stretch mt-11">
-							<text class="font_2">价位：</text>
-							<view class="font_6 text_8 ml-1">￥{{item.minPrice}}-{{item.maxPrice}}</view>
+		</template>
+		<template v-if="zhi === '1'">
+			<text class="font text_3 pos_2">选择服务</text>
+			<view class="flex-col section_4 pos_3">
+				<view class="flex-col list">
+					<view class="flex-row justify-between section_5"v-for="(item,index) in Own" :key="item">
+						<view class="flex-row items-end self-center">
+							<image class="image_2" :src="item.img" />
+							<view class="ml-20 flex-col group_2">
+								<text class="self-start font_2 text_4">{{item.name}}</text>
+								<text class="font_33 text_55">{{item.title}}</text>
+							</view>
 						</view>
-						<view class="self-stretch font_7 text_9 mt-11">{{item.brief}}</view>
-					</view>
-					<view class="flex-row shrink-0 ml-21">
-						<view class="flex-col justify-start items-center button"><text class="font_5">选择</text></view>
-						<image class="ml-8 image_5"
-							src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=7d16fc8dfa328fc97ff273ebeab9bc18.png" />
+						<!-- <view style="background-color: #f2b600;width: 200rpx;"> -->
+							<view class="flex-row self-stretch mt-104"  style="width: 150rpx;">
+								<view class="flex-col justify-start items-center image-wrapper_2" @click="add(index)">
+										-
+								</view>
+								<view class="ml-2 flex-col justify-start items-center text-wrapper-6" style="margin-left: 8px;margin-right: 8px;">
+										{{  item.num }}</view>
+								<view class="ml-2 flex-col justify-start items-center image-wrapper_3" @click="jian(index)">
+										+
+								</view>
+							</view>
+						<!-- </view> -->
 					</view>
 				</view>
 			</view>
-			<view class="flex-col">
-				<view class="flex-col group_6">
-					<view class="flex-col">
-						<text class="self-start font text_15">选择拍摄场景</text>
-						    <view class="flex-row self-stretch mt-15">
-						        <radio-group class="flex-row justify-center items-center section_9" @change="handleLocationChange">
-						            <image class="image_7"
-						                   src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDSCeqARd-shinei.png" />
-						            <text class="ml-16 font_8 text_16">室内</text>
-						            <radio name="location" value="室内"></radio>
-						            <image class="image_7"
-									       style="margin-left: 20px"
-						                   src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgfjDWgWY-shiwai.png" />
-						            <text class="ml-16 font_8 text_17">室外</text>
-						            <radio name="location" value="室外"></radio>
-						        </radio-group>
-						    </view>
-					</view>
-					<view class="mt-26 flex-row justify-center items-center"  @click="openPopup1">
-						<image class="badge"
-							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FkWvkHOaM-0e7d6a68aaa19d61293070fa98a3ae13.png" />
-						<text class="ml-4 font_7 text_18">预约须知</text>
+		</template>
+			<view class="mt-22 flex-row justify-between items-center section_9">
+				<view class="flex-row">
+					<image class="shrink-0 self-center image_9"
+						src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=0ed6323496056f793bd3c25b3dcd9eb6.png" />
+					<text class="self-start text_15">88.</text>
+					<text class="self-center font_2 text_14">定金：</text>
+					<text class="self-center text_17">00</text>
+					<view class="flex-row shrink-0 section_10" @click="openPopup2">
+						<text class="text_18">费用说明</text>
+						<image class="shrink-0 image_10 ml-3"
+							src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=0455b173571a47fdc438588e788f26c5.png" />
 					</view>
 				</view>
+				<view class="flex-col justify-start items-center text-wrapper"><text class="font text_16">确定预约</text>
+				</view>
 			</view>
 		</view>
-	</template>
-	<template v-if="zhi === '1'" >
-		<view class="flex-col section_7">
-			<view class="flex-col group_5">
-				<text class="self-start font text_6">选择服务</text>
-				<view class="flex-row items-center self-stretch section_8 view" v-for="item in Own" :key="item" >
-					<image :src="item.img" class="shrink-0 image_4"></image>
-					<view class="flex-col flex-1 ml-13">
-						<view class="self-start font_2 text_7">{{item.name}}</view>
-						<view class="flex-row items-baseline self-stretch mt-11">
-							<text class="font_2">价位：</text>
-							<view class="font_6 text_8 ml-1">￥{{item.price}}</view>
-						</view>
-						<view class="self-stretch font_7 text_9 mt-11">{{item.title}}</view>
-					</view>
-					<view class="flex-row shrink-0 ml-21">
-					   <checkbox></checkbox>
-					</view>
-				</view>
-			</view>
-			<view class="flex-col">
-				<view class="flex-col group_6">
-					<view class="flex-col">
-						<text class="self-start font text_15">选择拍摄场景</text>
-					    <view class="flex-row self-stretch mt-15">
-					        <radio-group class="flex-row justify-center items-center section_9" @change="handleLocationChange">
-					            <image class="image_7"
-					                   src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDSCeqARd-shinei.png" />
-					            <text class="ml-16 font_8 text_16">室内</text>
-					            <radio name="location" value="室内"></radio>
-					            <image class="image_7"
-								       style="margin-left: 20px"
-					                   src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgfjDWgWY-shiwai.png" />
-					            <text class="ml-16 font_8 text_17">室外</text>
-					            <radio name="location" value="室外"></radio>
-					        </radio-group>
-					    </view>
-					</view>
-					<view class="flex-row self-stretch section_12">
-						<image class="shrink-0 self-center image_66"
-							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FbtvtZqGC-kefu.png" />
-						<view class="flex-col shrink-0 self-start group_10">
-							<text class="self-start font_2 text_12">联系客服</text>
-							<text class="mt-10 self-stretch font_66">请提供详细的问题描述，以便我们更快地为您解决问题。</text>
-						</view>
-						<image class="shrink-0 self-center image image_77"
-							src="https://ide.code.fun/api/image?token=67303857c471750012de63be&name=136eb7cb0ccc86c9685bc319ce005613.png" />
-					</view>
-					<view class="mt-26 flex-row justify-center items-center"  @click="openPopup1">
-						<image class="badge"
-							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FkWvkHOaM-0e7d6a68aaa19d61293070fa98a3ae13.png" />
-						<text class="ml-4 font_7 text_18">预约须知</text>
-					</view>
-				</view>
-			</view>
-		</view>
-	</template>
-		<view class="flex-row justify-between items-center section_11">
-			<view class="flex-row items-center group_7">
-				<view class="flex-col justify-start items-start shrink-0 relative">
-					<text class="font_8">定金：</text>
-					<image class="image_2 pos_4"
-						src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=3393d3563afcfe7dedbadba1ea5328a0.png" />
-				</view>
-				<text class="font_6 text_19">88.</text>
-				<text class="text_21">00</text>
-			</view>
-			<view class="flex-row items-center">
-				<view class="flex-row button_3" @click="openPopup2">
-					<text class="text_22">费用说明</text>
-					<image class="shrink-0 image_8 ml-3"
-						src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=0455b173571a47fdc438588e788f26c5.png" />
-				</view>
-				<view class="ml-10 flex-col justify-start items-center button_2">
-					<text class="font_4 text_20">确定预约</text>
-				</view>
-			</view>
-		</view>
-	</view>
 </template>
 
 <script setup>
 	import {
-		ref,onMounted
+		ref,
+		onMounted
 	} from 'vue'
-import { baseUrl } from '@/api/request'
-
-onMounted(()=>{
-	getWhole()
-})
-const displayItem = ref([])
-const Whole = ref([{}])
-const getWhole = async()=>{
-	const res = await uni.request({
-		url: baseUrl + '/clothesGrade/list',
-		method:'POST',
-		header:{
-			cookie:wx.getAccountInfoSync('cookie')
-		},
-		data:{
-			
-		}
+	import {
+		baseUrl
+	} from '@/api/request'
+	const items = ref([null, null, null, null]);
+	onMounted(() => {
+		getWhole()
 	})
-	if(res.data.code === 1){
-		Whole.value=res.data.data
-	}else{
-		uin.showtoast({
-			icon:'error',
-			title:'获取失败'
+	const displayItem = ref([])
+	const Whole = ref([{}])
+	const getWhole = async () => {
+		const res = await uni.request({
+			url: baseUrl + '/clothesGrade/list',
+			method: 'POST',
+			header: {
+				cookie: wx.getAccountInfoSync('cookie')
+			},
+			data: {
+
+			}
 		})
+		if (res.data.code === 1) {
+			Whole.value = res.data.data
+		} else {
+			uin.showtoast({
+				icon: 'error',
+				title: '获取失败'
+			})
+		}
 	}
-}
-const Own = ref([{
+	const Own = ref([{
 			img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FObQGBPnJ-zhuangfa.png',
 			name: '妆发预约',
-			price: '20',
+			num:0,
 			title: '包括底妆，眉毛，眼妆，腮红和唇妆，根据您的肤色和服装风格进行个性化设计'
 		},
 		{
 			img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDFNymmCN-sheying.png',
 			name: '摄影服务',
-			price: '15',
+			num:0,
 			title: '提供专业的摄影棚和灯光设备，为客户打造舒适的拍摄环境'
 		}
 	])
-const zhi = ref('0')
+	const zhi = ref('0')
 
-const showWhole = (zhiValue) => {
-  zhi.value = zhiValue
-  // console.log(zhi.value)
-}
+	const showWhole = (zhiValue) => {
+		zhi.value = zhiValue
+		// console.log(zhi.value)
+	}
 
-const showOwn = (zhiValue) => {
-  zhi.value = zhiValue
-  // console.log(zhi.value)
-}
+	const showOwn = (zhiValue) => {
+		zhi.value = zhiValue
+		// console.log(zhi.value)
+	}
 
-const close1 = () => {
-  popup1.value.close()
-}
-const close2 = () => {
-  popup2.value.close()
-}
+	const close1 = () => {
+		popup1.value.close()
+	}
+	const close2 = () => {
+		popup2.value.close()
+	}
 
-const popup1 = ref(null)
-const popup2 = ref(null)
-const showPopup1 = ref(false)
-const showPopup2 = ref(false)
+	const popup1 = ref(null)
+	const popup2 = ref(null)
+	const showPopup1 = ref(false)
+	const showPopup2 = ref(false)
 
-const openPopup1 = () => {
-  showPopup1.value = true;
-  popup1.value.open('center');
-}
+	const openPopup1 = () => {
+		showPopup1.value = true;
+		popup1.value.open('center');
+	}
 
-const openPopup2 = () => {
-  showPopup2.value = true;
-  popup2.value.open('center');
-}
+	const openPopup2 = () => {
+		showPopup2.value = true;
+		popup2.value.open('center');
+	}
 
-const closePopup1 = () => {
-  showPopup1.value = false;
-}
+	const closePopup1 = () => {
+		showPopup1.value = false;
+	}
 
-const closePopup2 = () => {
-  showPopup2.value = false;
-}
-const selectedLocation = ref(null)
-const handleFormSubmit = () => {
-    selectedLocation.value = null
-}
-//室内室外
-const handleLocationChange = (e) => {
-    selectedLocation.value = e.detail.value
-    console.log( selectedLocation.value)
-}
-const goToText = (index) => {
-	console.log(index)
-    uni.navigateTo({
-        url: "/pages/booking/CostumeDisplay/CostumeDisplay?info=" + JSON.stringify(Whole.value[index].id)
-    });
-    console.log(Whole.value[index].id)
-}
-const goToContact = ()=>{
-	uni.navigateTo({
-		url:'/pages/mine/Contact/Contact'
-	})
-}
+	const closePopup2 = () => {
+		showPopup2.value = false;
+	}
+	const selectedLocation = ref(null)
+	const handleFormSubmit = () => {
+		selectedLocation.value = null
+	}
+	//室内室外
+	const handleLocationChange = (e) => {
+		selectedLocation.value = e.detail.value
+		console.log(selectedLocation.value)
+	}
+	const goToText = (index) => {
+		console.log(index)
+		uni.navigateTo({
+			url: "/pages/booking/CostumeDisplay/CostumeDisplay?info=" + JSON.stringify(Whole.value[index].id)
+		});
+		console.log(Whole.value[index].id)
+	}
+	const goToContact = () => {
+		uni.navigateTo({
+			url: '/pages/mine/Contact/Contact'
+		})
+	}
+	//计步器
+	const add = (index) => {
+			if(Own.value[index].num >0){
+				Own.value[index].num -= 1
+			}
+	}
+	const jian = (index) => {
+			Own.value[index].num += 1
+	}
 </script>
 
 <style lang="scss" scoped>
-	.ml-7 {
-		margin-left: 13.13rpx;
+	.mt-104 {
+		margin-top: 60rpx;
+		margin-right: 10rpx;
 	}
-
-	.ml-9 {
-		margin-left: 16.88rpx;
+	.image-wrapper_2 {
+		padding: 11.25rpx 0;
+		background-color: #f8dedf;
+		border-radius: 5.63rpx 0rpx 0rpx 5.63rpx;
+		width: 52.5rpx;
+		height: 52.5rpx;
 	}
-
-	.ml-13 {
-		margin-left: 24.38rpx;
+	.text-wrapper_6 {
+		padding: 15rpx 0 11.25rpx;
+		background-color: #f5f5dc;
+		width: 52.5rpx;
+		height: 52.5rpx;
 	}
-
-	.ml-21 {
-		margin-left: 39.38rpx;
+	.image-wrapper_3 {
+		padding: 11.25rpx 0;
+		background-color: #f8dedf;
+		border-radius: 0rpx 5.63rpx 5.63rpx 0rpx;
+		width: 52.5rpx;
+		height: 52.5rpx;
 	}
-
-	.ml-1 {
-		margin-left: 1.88rpx;
+	.image_33 {
+		width: 33.75rpx;
+		height: 33.75rpx;
 	}
-
-	.mt-15 {
-		margin-top: 28.13rpx;
-	}
-
-	.ml-23 {
-		margin-left: 43.13rpx;
-	}
-
-	.mt-11 {
-		margin-top: 20.63rpx;
+	.mt-7 {
+		margin-top: 13.13rpx;
 	}
 
 	.ml-3 {
 		margin-left: 5.63rpx;
 	}
-
+	.font_33 {
+	  font-size: 22.5rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 25.13rpx;
+	  color: #8a8a8a;
+	}
+	.text_55 {
+	  margin-top: 26.25rpx;
+	  line-height: 26.25rpx;
+	  width: 280rpx;
+	}
+    .font_7 {
+    	font-size: 22.5rpx;
+    	font-family: Open Sans;
+    	line-height: 20.72rpx;
+    	color: #8a8a8a;
+    }
+	.text_9 {
+		line-height: 21.36rpx;
+	}
+	.mt-11 {
+		margin-top: 20.63rpx;
+	}
 	.page {
-		padding-top: 45rpx;
-		background-color: #f5f5dc;
+		background-color: #ffffff;
+		background-image: url('https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=17e1ca160ffb13e8723517aa1cebf07e.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
 		width: 100%;
 		overflow-y: auto;
 		overflow-x: hidden;
 		height: 100%;
 	}
-    .font_66 {
-    	font-size: 22.5rpx;
-    	font-family: Open Sans;
-    	line-height: 26.25rpx;
-    	color: #898989;
-    }
-	.group {
-		padding-top: 11.25rpx;
-	}
 
 	.section {
-		margin-left: 71.25rpx;
-		background-color: #ffffff00;
+		background-image: url('https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=17e1ca160ffb13e8723517aa1cebf07e.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		width: 750rpx;
+		height: 1728.75rpx;
+	}
+
+	.equal-division {
+		position: absolute;
+		left: 50%;
+		top: 136.88rpx;
+		transform: translateX(-50%);
+	}
+
+	.group {
+		width: 650.63rpx;
+	}
+
+	.image {
+		width: 192rpx;
+		height: 192rpx;
+	}
+
+	.equal-division-item {
+		flex: 1 1 279.38rpx;
+	}
+
+	.section_2 {
+		padding: 7.5rpx 26.25rpx 41.25rpx;
+		opacity: 0.85;
+		background-color: #ffffff;
+		border-radius: 18.75rpx;
+		height: 281.25rpx;
+	}
+
+	.section_3 {
+		padding: 7.5rpx 22.5rpx 41.25rpx;
+		background-color: #ffffffcc;
 		border-radius: 18.75rpx;
-		width: 281.25rpx;
 		height: 281.25rpx;
 	}
 
 	.font {
 		font-size: 30rpx;
-		font-family: Open Sans;
-		line-height: 27.75rpx;
+		font-family: FZSongKeBenXiuKaiS-R-GB;
+		line-height: 28.59rpx;
 		color: #323232;
 	}
 
 	.text {
-		line-height: 27.96rpx;
+		line-height: 27.69rpx;
 	}
 
 	.pos {
 		position: absolute;
-		left: 21.62rpx;
-		top: 0;
+		left: 31.35rpx;
+		top: 49.84rpx;
 	}
 
-	.section_2 {
-		padding-left: 33.75rpx;
-		padding-right: 28.13rpx;
-		background-color: #fffef8;
-		border-radius: 18.75rpx;
+	.text_2 {
+		line-height: 29.42rpx;
+	}
+
+	.text_3 {
+		line-height: 28.84rpx;
 	}
 
 	.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: 24.3rpx;
-		color: #323232;
-	}
-
-	.text_2 {
-		line-height: 24rpx;
-	}
-
-	.text_3 {
-		line-height: 24rpx;
-	}
-
-	.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_4 {
-		line-height: 27.69rpx;
-	}
-
-	.section_3 {
-		padding: 31.88rpx 0;
-		background-color: #fffef8;
-		border-radius: 18.75rpx;
-	}
-
-	.equal-division {
-		margin: 0 41.25rpx;
+		left: 48.06rpx;
+		top: 537.66rpx;
 	}
 
 	.section_4 {
-		flex: 1 1 281.25rpx;
-	}
-
-	.image_3 {
-		width: 192rpx;
-		height: 192rpx;
-	}
-
-	.font_4 {
-		font-size: 30rpx;
-		font-family: Inter;
-		line-height: 27.75rpx;
-		color: #323232;
-	}
-
-	.text_5 {
-		line-height: 27.99rpx;
-	}
-
-	.section_5 {
-		position: relative;
-		flex: 1 1 281.25rpx;
-	}
-
-.clickable-item {
-  padding: 15rpx 0 41.25rpx;
-  background-color: white;
-  border-radius: 18.75rpx;
-  height: 281.25rpx;
-  flex: 1 1 281.25rpx;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-.clickable-item.selected {
-  background-color: #f08b00;
-}
-
-.clickable-item.selected::after {
-  background-color: #f08b00;
-}
-	.section_6 {
-		background-color: #ffffff99;
-		border-radius: 18.75rpx;
-		width: 281.25rpx;
-		height: 281.25rpx;
+		background-color: #ffffff6c;
+		border-radius: 37.5rpx 37.5rpx 0 0;
 	}
 
 	.pos_3 {
 		position: absolute;
 		left: 0;
 		right: 0;
-		top: 0;
-		bottom: 0;
+		top: 581.25rpx;
 	}
 
-	.section_7 {
-		margin-top: 30rpx;
-		padding-bottom: 46.88rpx;
-		background-color: #fff3c3;
+	.list {
+		padding: 50.63rpx 45rpx;
 	}
 
-	.group_5 {
-		padding: 30rpx 30rpx 37.5rpx;
-	}
-
-	.text_6 {
-		line-height: 27.86rpx;
-	}
-
-	.section_8 {
-		margin-top: 16.88rpx;
-		padding: 26.25rpx 26.25rpx 26.25rpx 39.38rpx;
-		background-color: #fffef8;
+	.section_5 {
+		margin-right: 15rpx;
+		padding: 13.13rpx 3.75rpx 37.5rpx 43.13rpx;
+		background-color: #ffffff;
 		border-radius: 18.75rpx;
+		margin: 5px;
 	}
 
-	.view {
-		margin-top: 41.25rpx;
-	}
-
-	.image_4 {
+	.image_2 {
 		border-radius: 9.38rpx;
 		width: 118.13rpx;
 		height: 151.88rpx;
 	}
 
-	.text_7 {
-		line-height: 24.26rpx;
+	.group_2 {
+		margin-bottom: 3.75rpx;
 	}
-	.text_77 {
-		line-height: 24.96rpx;
+
+	.font_2 {
+		font-size: 26.25rpx;
+		font-family: FZSongKeBenXiuKaiS-R-GB;
+		line-height: 24.3rpx;
+		color: #323232;
 	}
-	.font_6 {
-		font-size: 33.75rpx;
+
+	.text_4 {
+		line-height: 25.43rpx;
+	}
+
+	.group_3 {
+		margin-top: 26.25rpx;
+	}
+
+	.group_4 {
+		line-height: 24.3rpx;
+		height: 24.3rpx;
+	}
+
+	.font_4 {
+		font-size: 26.25rpx;
 		font-family: Open Sans;
+		line-height: 16.8rpx;
+		color: #323232;
+	}
+
+	.font_3 {
+		font-size: 33.75rpx;
+		font-family: FZSongKeBenXiuKaiS-R-GB;
 		line-height: 24.3rpx;
 		color: #ff3c3c;
 	}
 
-	.text_8 {
-		line-height: 24.81rpx;
+	.text_5 {
+		line-height: 22.54rpx;
 	}
 
-	.button {
-		padding: 7.5rpx 0;
-		background-color: #fbb612;
-		border-radius: 9.38rpx;
-		width: 75rpx;
+	.image_3 {
+		width: 35.63rpx;
 		height: 37.5rpx;
 	}
-    .button2 {
-    	padding: 7.5rpx 0;
-		background-color: #f5f5dc;
-    	border-radius: 50rpx;
-    	width: 37.5rpx;
-    	height: 37.5rpx;
-    }
+
+	.image_4 {
+		margin-top: 67.5rpx;
+	}
+
 	.font_5 {
 		font-size: 22.5rpx;
-		font-family: Open Sans;
-		line-height: 20.72rpx;
-		color: #ffffff;
+		font-family: FZSongKeBenXiuKaiS-R-GB;
+		line-height: 21.98rpx;
+		color: #898989;
 	}
 
-	.image_5 {
-		width: 37.5rpx;
-		height: 37.5rpx;
-	}
-
-	.text_10 {
-		line-height: 24.15rpx;
-	}
-
-	.text_12 {
-		line-height: 24.81rpx;
-	}
-
-	.text-wrapper {
-		padding: 7.5rpx 0;
-		background-color: #d9d9d9;
-		border-radius: 9.38rpx;
-		width: 75rpx;
-		height: 37.5rpx;
-	}
-
-	.text_11 {
-		line-height: 20.61rpx;
-	}
-
-	.image_6 {
-		width: 118.13rpx;
-		height: 151.88rpx;
-	}
-    .image_66 {
-    		border-radius: 9.38rpx;
-    		width: 93.75rpx;
-    		height: 118.13rpx;
-    	}
-	.text_14 {
-		line-height: 24.23rpx;
-	}
-
-	.divider {
-		margin: 0 22.5rpx;
-		background-color: #ff8550;
-		height: 1.88rpx;
-	}
-
-	.group_6 {
-		padding: 22.5rpx 30rpx 0;
-	}
-
-	.text_15 {
-		line-height: 27.64rpx;
+	.text_6 {
+		margin-top: 7.5rpx;
+		line-height: 22.24rpx;
 	}
 
 	.section_9 {
-		flex: 1 1 322.5rpx;
-		padding: 26.25rpx 0;
-		background-color: #fffef8;
-		border-radius: 18.75rpx;
-		height: 153.75rpx;
-	}
-
-	.image_7 {
-		border-radius: 9.38rpx;
-		width: 123.75rpx;
-		height: 101.25rpx;
-	}
-	.image_77 {
-		margin-left: 48.75rpx;
-	}
-
-	.font_8 {
-		font-size: 26.25rpx;
-		font-family: Inter;
-		line-height: 24.3rpx;
-		color: #000000;
-	}
-    .group_10 {
-    	margin-left: 22.5rpx;
-    	margin-top: 15rpx;
-    	width: 405rpx;
-    }
-	.text_16 {
-		line-height: 24.21rpx;
-	}
-
-	.section_10 {
+		padding: 39.38rpx 30rpx 13.13rpx;
 		background-color: #ffffff;
-		border-radius: 50%;
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+	}
+
+	.image_9 {
+		margin-left: 67.5rpx;
 		width: 33.75rpx;
 		height: 33.75rpx;
-		border-left: solid 1.88rpx #c4c4c4;
-		border-right: solid 1.88rpx #c4c4c4;
-		border-top: solid 1.88rpx #c4c4c4;
-		border-bottom: solid 1.88rpx #c4c4c4;
 	}
 
-	.text_17 {
-		line-height: 24.09rpx;
-	}
-
-	.badge {
-		width: 28.13rpx;
-		height: 28.13rpx;
-	}
-
-	.font_7 {
-		font-size: 22.5rpx;
+	.text_15 {
+		color: #fb1212;
+		font-size: 33.75rpx;
 		font-family: Open Sans;
-		line-height: 20.72rpx;
-		color: #8a8a8a;
-	}
-
-	.text_13 {
-		line-height: 21.38rpx;
-	}
-
-	.text_9 {
-		line-height: 21.36rpx;
-	}
-
-	.text_18 {
-		color: #000000;
-		line-height: 20.77rpx;
-	}
-
-	.section_11 {
-		margin-top: 48.75rpx;
-		padding: 15rpx 22.5rpx;
-		background-color: #fffef8;
-	}
-
-	.group_7 {
-		width: 180.06rpx;
-	}
-	.group_77{
-		margin-left: 37.5rpx;
-	}
-
-	.pos_4 {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-	}
-
-	.text_19 {
-		color: #fbb612;
 		font-weight: 700;
 		line-height: 24.84rpx;
 	}
 
-	.text_21 {
-		color: #fbb612;
+	.text_14 {
+		margin-left: -146.25rpx;
+		color: #000000;
+		line-height: 24.09rpx;
+	}
+
+	.text_17 {
+		margin-left: 75rpx;
+		color: #fb1212;
 		font-size: 26.25rpx;
 		font-family: Open Sans;
 		font-weight: 700;
 		line-height: 19.29rpx;
 	}
 
-	.button_3 {
-		padding: 9.38rpx 11.25rpx;
+	.section_10 {
+		margin-left: 26.25rpx;
+		padding: 7.5rpx 11.25rpx;
 		background-color: #d9d9d9;
 		border-radius: 9.38rpx;
 		height: 37.5rpx;
 	}
 
-	.text_22 {
+	.text_18 {
 		color: #323232;
 		font-size: 18.75rpx;
-		font-family: Inter;
-		line-height: 17.36rpx;
+		font-family: FZSongKeBenXiuKaiS-R-GB;
+		line-height: 18.32rpx;
 	}
 
-	.image_8 {
+	.image_10 {
 		width: 18.75rpx;
 		height: 18.75rpx;
 	}
 
-	.button_2 {
+	.text-wrapper {
 		padding: 26.25rpx 0;
-		background-color: #fbb612;
+		background-color: #e79ea1;
 		border-radius: 75rpx;
 		width: 238.13rpx;
 		height: 82.5rpx;
 	}
-	.text_20 {
+
+	.text_16 {
 		color: #ffffff;
+		line-height: 28.01rpx;
 	}
-    
-    .section_12 {
-    	margin: 26.25rpx 16.88rpx 0 11.25rpx;
-    	padding: 15rpx 26.25rpx;
-    	background-color: #fffef8;
-    	border-radius: 18.75rpx;
-    }
-@import url(/common/css/global.css);
+  
+	@import url(/common/css/global.css);
 </style>
\ No newline at end of file
diff --git a/pages/text.vue b/pages/text.vue
index fb97dca..cc0add1 100644
--- a/pages/text.vue
+++ b/pages/text.vue
@@ -1,440 +1,67 @@
-<template>
-<uni-popup ref="popup" :mask-click="false" background-color="white" borderRadius="10px" class="pop" type="dialog">
-    <input placeholder="联系人姓名" v-model="newContacts.name" />
-    <input placeholder="联系方式" v-model="newContacts.phone" />
-       <checkbox   @click="handleIsDefaultChanges()" :key="newContacts.id">设置为默认联系人</checkbox>
-    <button @click="addContact">添加</button>
-    <button @click="close">取消</button>
-</uni-popup>
-	<uni-popup ref="popup1" :mask-click="false" background-color="white" borderRadius="10px" class="pop">
-		<input placeholder="联系人姓名" v-model="newContact.name" />
-		<input placeholder="联系方式" v-model="newContact.phone" />
-		 <checkbox  @click="handleIsDefaultChange" :key="newContact.id">设置为默认联系人</checkbox>
-		<button @click="saveModifiedContact">保存</button>
-		<button @click="close1">取消</button>
-	</uni-popup>
-	<view class="flex-col page">
-		<view class="flex-col">
-			<view class="flex-row justify-center items-center relative group">
-				<text class="text">联系人信息</text>
-				<image class="image pos"
-					src="https://ide.code.fun/api/image?token=673329a3c471750012deb1ec&name=888e11f2c452b3d64f79a5136a779376.png" />
-			</view>
-			<view class="mt-16 flex-col">
-				<view class="flex-row justify-between items-center list-item mt-5"
-					v-for="(item, index) in filteredContacts" :key="index">
-					<view class="flex-row items-center">
-						<text class="font ml-9">{{item.name}}</text>
-						<text class="font_2 ml-9">{{item.phone}} -{{item.id}}</text>
-					</view>
-					  <text v-if="item.isDefault === 1" class="font_3 ml-12">默认联系人</text>
-					<view class="flex-row group_2">
-						<image class="image_2"
-							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEclWfXMx-bj.png"
-							@click="editContact(index)" />
-						<image class="ml-12 image_2"
-							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FzgFMedLP-sc.png"
-							@click="deleteContact(index)" />
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="flex-col justify-start items-center section mt-431" @click="open">
-			<view class="flex-col justify-start items-center text-wrapper"><text class="text_2">添加新联系人</text></view>
-		</view>
-	</view>
-</template>
-
-<script setup>
-import {
-    ref,
-    onMounted,
-    watch,
-    set
-} from 'vue'
-import {
-    baseUrl
-} from '../../../api/request'
-
-
-onMounted(() => {
-    getContacts()
-})
-
-const newContact = ref({
-    name: '',
-    phone: '',
-    isDefault: 0,
-    id: 0
-})
-const newContacts = ref({
-    name: '',
-    phone: '',
-    isDefault: 0,
-    id: 0
-})
-
-const editContact = async (index) => {
-    popup1.value.open('center')
-    const contact = filteredContacts.value[index]
-    newContact.value = {
-        name: contact.name,
-        id: contact.id,
-        phone: contact.phone,
-        isDefault: contact.isDefault
-    }
-}
-
-const handleIsDefaultChanges = (e) => {
-	let currentValue = newContact.value.isDefault
-	 let updatedValue = currentValue === 0 ? 1 : 0
-	 newContact.value.isDefault = updatedValue
-	console.log(updatedValue)
-}
-const handleIsDefaultChange = (e) => {
-	//console.log(newContact.value.isDefault)
-	 let currentValue = newContact.value.isDefault
-	 let updatedValue = currentValue === 0 ? 1 : 0
-	 newContact.value.isDefault = updatedValue
-	console.log(updatedValue)
-
-}
-// 获取联系人列表
-const getContacts = async () => {
-    const res = await uni.request({
-        url: baseUrl + '/contacts/list',
-        method: 'POST',
-        header: {
-            cookie: wx.getStorageSync('cookie')
-        }
-    })
-    // console.log(res)
-    if (res.data.code === 1) {
-        const correctContacts = []
-        let defaultContact = null
-        res.data.data.forEach((contact) => {
-            if (contact.isDefault === 1) {
-                if (!defaultContact) {
-                    defaultContact = contact
-                } else {
-                    contact.isDefault = 0
-                }
-            }
-            correctContacts.push(contact)
-        })
-        filteredContacts.value = correctContacts
-        if (defaultContact) {
-            const index = filteredContacts.value.findIndex(
-                c => c.id === defaultContact.id
-            );
-            if (index!== -1) {
-                filteredContacts.value[index].isDefault = 1
-            }
-        }
-    } else {
-        uni.showToast({
-            icon: 'error',
-            title: '获取失败'
-        })
-    }
-}
-
-const searchText = ref('')
-const filteredContacts = ref([])
-
-watch(searchText, () => {
-    if (searchText.value === '') {
-        filteredContacts.value = contacts.value;
-    } else {
-        filteredContacts.value = contacts.value.filter(contact => {
-            return contact.name.includes(searchText.value) || contact.phone.includes(
-                searchText.value)
-        })
-    }
-})
-// 添加联系人
-const addContact = async () => {
-    popup.value.close();
-    // 清除之前默认联系人
-    if (newContacts.value.isDefault) {
-        for (let i = 0; i < filteredContacts.value.length; i++) {
-            if (filteredContacts.value[i].isDefault === 1) {
-                filteredContacts.value[i].isDefault = 0
-            }
-        }
-    }
-    const res = await uni.request({
-        url: baseUrl + '/contacts/add',
-        method: 'POST',
-        header: {
-            cookie: wx.getStorageSync('cookie')
-        },
-        data: {
-            name: newContacts.value.name,
-            phone: newContacts.value.phone,
-            isDefault: newContacts.value.isDefault
-        }
-    });
-    if (res.data.code === 1) {
-        console.log('添加成功')
-        newContacts.value = {
-            name: '',
-            phone: '',
-            isDefault: 0,
-            id: 0
-        };
-    } else {
-        uni.showToast({
-            icon: 'error',
-            title: '添加失败'
-        });
-    }
-    getContacts()
-}
-
-// 删除联系人
-const deleteContact = async (index) => {
-    const res = await uni.request({
-        url: baseUrl + '/contacts/delete',
-        method: 'POST',
-        header: {
-            cookie: wx.getStorageSync('cookie')
-        },
-        data: {
-            id: filteredContacts.value[index].id,
-        }
-    })
-    console.log(res, '1111111111111');
-    if (res.data.code === 1) {
-        console.log('删除成功')
-    } else {
-        uni.showToast({
-            icon: 'error',
-            title: '删除失败'
-        });
-    }
-    getContacts()
-}
-
-const contactToModify = ref({})
-const indexToModify = ref(null)
-
-// 更新联系人
-const saveModifiedContact = async () => {
-    popup1.value.close();
-    if (!newContact.value.name ||!newContact.value.phone) {
-        uni.showToast({
-            icon: 'error',
-            title: '不能为空'
-        })
-        return
-    }
-    if (newContact.value.isDefault) {
-        for (let i = 0; i < filteredContacts.value.length; i++) {
-            if (filteredContacts.value[i].isDefault === 1) {
-                filteredContacts.value[i].isDefault = 0
-            }
-        }
-    }
-    const res = await uni.request({
-        url: baseUrl + '/contacts/update',
-        method: 'POST',
-        header: {
-            cookie: wx.getStorageSync('cookie')
-        },
-        data: {
-            name: newContact.value.name,
-            phone: newContact.value.phone,
-            id: newContact.value.id,
-            isDefault: newContact.value.isDefault
-        }
-    })
-    if (res.data.code === 1) {
-        console.log('更新成功')
-		console.log(newContact.value.isDefault,'000000000000000000000000 ')
-    } else {
-        uni.showToast({
-            icon: 'error',
-            title: '更新失败'
-        })
-    }
-    getContacts()
-}
-
-const popup = ref(null)
-const popup1 = ref(null)
-const open = () => {
-    popup.value.open('center')
-}
-const open1 = () => {
-    popup1.value.open('center')
-}
-const close = () => {
-    popup.value.close()
-}
-const close1 = () => {
-    popup1.value.close()
-}
-</script>
-
-<style lang="scss" scoped>
-	.font_3 {
-	    color: #007aff; 
-	    font-size: 14px;
-	}
-	.mt-5 {
-		margin-top: 9.38rpx;
-	}
-
-	.ml-9 {
-		margin-left: 16.88rpx;
-	}
-
-	.mt-431 {
-		margin-top: 808.13rpx;
-	}
-
-	.page {
-		padding-top: 18.75rpx;
-		background-color: #f5f5dc;
-		border-radius: 28.13rpx 28.13rpx 0rpx 0rpx;
-		width: 100%;
-		overflow-y: auto;
-		overflow-x: hidden;
-		height: 100%;
-	}
-
-	.group {
-		padding: 11.25rpx 24.38rpx 7.5rpx;
-	}
-
-	.text {
-		color: #323232;
-		font-size: 37.5rpx;
-		font-family: Open Sans;
-		line-height: 35.21rpx;
-	}
-
-	.image {
-		width: 52.5rpx;
-		height: 52.5rpx;
-	}
-
-	.pos {
-		position: absolute;
-		right: 24.38rpx;
-		top: 50%;
-		transform: translateY(-50%);
-	}
-
-	.list-item {
-		padding: 52.5rpx 15rpx;
-		background-color: #fffef8;
-		border-bottom: solid 1.88rpx #c8c8c8;
-	}
-
-	.list-item:first-child {
-		margin-top: 0;
-	}
-
-	.image_3 {
-		width: 33.75rpx;
-		height: 33.75rpx;
-	}
-
-	.font {
-		font-size: 30rpx;
-		font-family: Open Sans;
-		line-height: 27.19rpx;
-		color: #323232;
-	}
-
-	.font_2 {
-		font-size: 30rpx;
-		font-family: Open Sans;
-		line-height: 22.05rpx;
-		color: #323232;
-	}
-
-	.group_2 {
-		margin-right: 11.25rpx;
-	}
-
-	.image_2 {
-		width: 39.38rpx;
-		height: 39.38rpx;
-	}
-
-	.section {
-		margin-left: 16.88rpx;
-		padding: 22.5rpx 0 15rpx;
-		background-color: #fffef8;
-	}
-
-	.text-wrapper {
-		padding: 30rpx 0;
-		background-color: #fbb612;
-		border-radius: 75rpx;
-		width: 639.38rpx;
-	}
-
-	.text_2 {
-		color: #ffffff;
-		font-size: 33.75rpx;
-		font-family: Open Sans;
-		line-height: 31.22rpx;
-	}
-    .pop{
-          height: 300px;
-		  width: 400px;
-		  padding: 20px;
-        /* 输入框的通用样式 */
-        input {
-			margin-left: 10%;
-            width: 80%; // 占满弹窗宽度，可按需调整
-            margin-bottom: 15px;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-    
-        /* 复选框的通用样式 */
-        checkbox {
-            margin-bottom: 15px;
-        }
-    
-        /* 按钮的通用样式 */
-        button {
-            width: 45%; // 按钮宽度占比，可根据实际调整布局
-            padding: 8px 0;
-            border: none;
-            border-radius: 5px;
-            font-size: 14px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-    }
-    
-    /* 第一个弹窗添加联系人的特定按钮样式 */
-    .pop:first-child button:first-child {
-        background-color: #007aff;
-        color: white;
-    }
-    
-    .pop:first-child button:last-child {
-        background-color: #ccc;
-        color: #333;
-    }
-    
-    /* 第二个弹窗修改联系人的特定按钮样式 */
-    .pop:last-child button:first-child {
-        background-color: #4caf50;
-        color: white;
-    }
-    
-    .pop:last-child button:last-child {
-        background-color: #ccc;
-        color: #333;
-    }
-	@import url(/common/css/global.css)
-</style>
+<view class="flex-col justify-start relative page">
+  <view class="section"></view>
+  <text class="font text pos">选择预约类别</text>
+  <view class="flex-row equal-division group">
+    <view class="flex-col equal-division-item section_2">
+      <image
+        class="self-start image"
+        src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=e29908fd7c3623fbb6854b38b828c5b8.png"
+      />
+      <text class="self-center font mt-7">整套约拍</text>
+    </view>
+    <view class="ml-48 flex-col equal-division-item section_3">
+      <image
+        class="self-start image"
+        src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=ca4da1e3507e3276bd2cf0946c8322bd.png"
+      />
+      <text class="mt-8 self-center font text_2">自带服装</text>
+    </view>
+  </view>
+  <text class="font text_3 pos_2">选择服装类别</text>
+  <view class="flex-col section_4 pos_3">
+    <view class="flex-col list">
+      <view class="flex-row justify-between section_5" v-for="(item, index) in items" :key="index">
+        <view class="flex-row items-end self-center">
+          <image
+            class="image_2"
+            src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=72dc2b1fa62db33ed73692af7f65cb9b.png"
+          />
+          <view class="ml-20 flex-col group_2">
+            <text class="self-start font_2 text_4">简约风尚</text>
+            <view class="flex-row items-center self-stretch group_3">
+              <view class="group_4">
+                <text class="font_2">价位</text>
+                <text class="font_4">：</text>
+              </view>
+              <text class="ml-6 font_3 text_5">￥100-200</text>
+            </view>
+            <text class="self-stretch font_5 text_6">传承非遗之美，简约演绎经典</text>
+          </view>
+        </view>
+        <image
+          class="self-start image_3 image_4"
+          src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=eee721f36de3196113485ea7e5c6b5ad.png"
+        />
+      </view>
+    </view>
+    <view class="mt-22 flex-row justify-between items-center section_9">
+      <view class="flex-row">
+        <image
+          class="shrink-0 self-center image_9"
+          src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=0ed6323496056f793bd3c25b3dcd9eb6.png"
+        />
+        <text class="self-start text_15">88.</text>
+        <text class="self-center font_2 text_14">定金：</text>
+        <text class="self-center text_17">00</text>
+        <view class="flex-row shrink-0 section_10">
+          <text class="text_18">费用说明</text>
+          <image
+            class="shrink-0 image_10 ml-3"
+            src="https://ide.code.fun/api/image?token=675fbf94797f850011f2bedf&name=0455b173571a47fdc438588e788f26c5.png"
+          />
+        </view>
+      </view>
+      <view class="flex-col justify-start items-center text-wrapper"><text class="font text_16">确定预约</text></view>
+    </view>
+  </view>
+</view>
\ No newline at end of file