添加服务弹窗

pages/index/index.rpx.css

@@ -201,10 +201,9 @@
 }
 .addService{
     width: 750rpx;
-    height: 724rpx;
+    height: 1012rpx;
     background: #FFFFFF;
     border-radius: 24rpx 24rpx 0rpx 0rpx;
-    padding-top: 24rpx;
 }
 .popupTitle{
     height: 44rpx;
@@ -219,15 +218,60 @@
     margin-top: 34rpx;
     margin-bottom: 24rpx;
 }
+
+.scrollY1{
+    height: 870rpx;
+    margin-top: 34rpx;
+    margin-bottom: 24rpx;
+    padding-top: 24rpx;
+}
+.serviceItems{
+    width: 684rpx;
+    margin-top: 20rpx;
+}
 .serviceItem{
-    width: 686rpx;
-    height: 152rpx;
+    width: 210rpx;
+    height: 100rpx;
     background: #FAFAFA;
-    border-radius: 8rpx;
-    margin-left: 32rpx;
+    border-radius: 16rpx;
+    text-align: center;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #111111;
+    line-height: 100rpx;
+    float: left;
+}
+.marginTop24{
     margin-top: 24rpx;
+}
+.marginLeft16{
+    margin-left: 16rpx;
+}
+.marginLeft28{
+    margin-left: 28rpx;
+}
+.serviceTeach{
+    width: 148rpx;
+    height: 206rpx;
+    float: left;
     position: relative;
 }
+.serviceTeachImg{
+    width: 148rpx;
+    height: 148rpx;
+    border-radius: 74rpx;
+}
+.serviceTeachName{
+    width: 148rpx;
+    height: 40rpx;
+    font-size: 24rpx;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 40rpx;
+    text-align: center;
+    margin-top: 16rpx;
+}
 .vImage{
     position: absolute;
     top: 0;
@@ -235,9 +279,7 @@
     width: 32rpx;
     height: 32rpx;
 }
-.serviceItem:first-child{
-    margin-top: 0rpx;
-}
+
 .serviceName{
     font-size: 32rpx;
     font-weight: 600;

pages/index/index.vue

@@ -124,26 +124,43 @@
 		<uni-popup ref="addServicePopup" @change="popupChange" type="bottom">
 			<view class="addService">
 
-				<view class="popupTitle">
-					<text>添加服务项目</text>
-				</view>
 
-				<scroll-view class="scrollY" scroll-y>
-					<view class="serviceItem" :class="{'vBackGround': serviceProjectListIndex === index}" v-for="(item,index) in serviceProjectList" :key="index" @click="serviceProjectListIndex = index">
-						<view class="serviceName">
-							<text>{{item.serviceName}}</text>
+
+				<scroll-view class="scrollY1 " scroll-y>
+					<view class="flex-col">
+						<view class="popupTitle">
+							<text>选择服务项目</text>
+						</view>
+						<view class="flex-row justify-center">
+							<view class="serviceItems ">
+								<view class="serviceItem "  :class="{vBackGround: serviceProjectListIndex === index,marginLeft16: (index+3) % 3!==0,marginTop24:index>2}" v-for="(item,index) in 10" :key="index" @click="serviceProjectListIndex = index">
+									<text>单间造型服务</text>
+								</view>
+							</view>
 						</view>
-						<view class="flex-row servicePrice">
-							<u-icon name="rmb-circle" color="#666666"></u-icon>
-							<text class="servicePriceKey">预约费用：</text>
-							<text class="servicePricePrice">￥{{item.standardPrice}}</text>
+						<view class="popupTitle marginTop24">
+							<text>选择服务技师</text>
 						</view>
-						<image v-if="serviceProjectListIndex === index" class="vImage" src="/static/index/xuanzhong.png"></image>
+
+						<view class="flex-row justify-center">
+							<view class="serviceItems ">
+								<view class="flex-col serviceTeach "  :class="{marginLeft28: (index+4) % 4!==0,marginTop24:index>3}" v-for="(item,index) in 10" :key="index" @click="serviceProjectListIndex = index">
+									<image class="serviceTeachImg"  src="/static/mm.webp" :class="{vBackGround: serviceProjectListIndex === index}"></image>
+									<view class="serviceTeachName">
+										<text>庞启俊</text>
+									</view>
+									<image v-if="serviceProjectListIndex === index" class="vImage" src="/static/index/xuanzhong.png"></image>
+								</view>
+							</view>
+						</view>
+
 					</view>
+
+
 				</scroll-view>
 
 				<view class="flex-row justify-around">
-					<view class="cancelButton" @click="closeAddServicePopup">
+					<view class="cancelButton " @click="closeAddServicePopup">
 						<text>取消</text>
 					</view>
 					<view class="confirmButton" @click="addServiceProject">