功能：完成部分订单详情静态页面

index.html

@@ -14,4 +14,9 @@
     <div id="app"><!--app-html--></div>
     <script type="module" src="/main.js"></script>
   </body>
+  <style>
+	  /* #app{
+		  font-family: '宋体',Arial;
+	  } */
+  </style>
 </html>

pages/XDHome/technician/orderDetails/orderDetails.vue

@@ -12,16 +12,8 @@
 				</view>
 				<view class="ss-flex-1"></view>
 				<text class="textIcon icon-kefu" style="font-size: 28rpx;color: #fff;"></text>
-				<text class="textIcon icon-tongzhiguanli" style="font-size: 28rpx;color: #fff;margin-left: 25rpx;margin-right: 10rpx;"></text>
-			</view>
-			<!-- 安心购 -->
-			<view class="public-box top-box-info ss-flex-2 ss-col-center">
-				<text class="textIcon icon-anquan" style="font-size: 28rpx;color: #36AFCA;"></text>
-				<view style="font-size:24rpx;color:#4FBAD0;margin-left:5rpx;">安心购</view>
-				<view class="vertical-line"></view>
-				<view style="font-size:22rpx;color:#4FBAD0;margin-left:5rpx;">
-					未服务全额退.爽约包退.不满意重服务.全程保障
-				</view>
+				<text class="textIcon icon-tongzhiguanli"
+					style="font-size: 28rpx;color: #fff;margin-left: 25rpx;margin-right: 10rpx;"></text>
 			</view>
 			<!-- 选择地址框 -->
 			<view class="public-box top-box-info ss-flex-2 ss-col-center" style="padding:20rpx 10rpx;">
@@ -33,24 +25,98 @@
 				<view class="ss-flex=1"></view>
 				<text class="textIcon icon-gengduo" style="font-size: 32rpx;color: #333;font-weight: 750;"></text>
 			</view>
+			<!-- 安心购 -->
+			<view class="public-box top-box-info ss-flex-2 ss-col-center">
+				<text class="textIcon icon-anquan" style="font-size: 28rpx;color: #36AFCA;"></text>
+				<view style="font-size:24rpx;color:#4FBAD0;margin-left:5rpx;">安心购</view>
+				<view class="vertical-line"></view>
+				<view style="font-size:22rpx;color:#4FBAD0;margin-left:5rpx;">
+					未服务全额退.爽约包退.不满意重服务.全程保障
+				</view>
+			</view>
+			
 		</view>
 		<!-- 技师服务列表 -->
-		<view class="public-box" style="background-color:#fff;">
+		<view class="public-box giveService-box">
 			<!-- 服务详情信息 -->
-			<view class="ss-flex-2 ss-col-center">
-				<view class="">
-
+			<view class="ss-flex-2 ss-row-left" v-for="i in 3">
+				<view style="width:130rpx;height:130rpx;">
+					<image class="wh" referrerpolicy="no-referrer"
+						src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
+				</view>
+				<view class="ss-flex-1" style="margin-left:10rpx;">
+					<view class="ss-flex-2">
+						<view style="font-size:28rpx;color:#404751;padding-top: 2rpx;font-weight: 600;">精油按摩</view>
+						<view style="color:#B7B7B7;margin-left:15rpx;"><text style="font-size:22rpx;">X</text><text style="font-size:27rpx;margin-left: 2rpx;">1</text></view>
+						<view class="ss-flex-1"></view>
+						<view class="ss-flex-2 ss-col-center">
+							<text class="textIcon icon-renzheng" style="font-size: 24rpx;"></text>
+							<view style="margin-left: 5rpx;font-size: 18rpx;color:#4E555C;">160分钟</view>
+						</view>
+					</view>
+					<view class="ss-flex-2" style="margin-top: 5rpx;flex-wrap:wrap;">
+						<view class="small-items">精油按摩</view>
+						<view class="vertical-line"></view>
+						<view class="small-items">舒缓疲劳</view>
+						<view class="vertical-line"></view>
+						<view class="small-items">代金卷</view>
+						<view class="vertical-line"></view>
+						<view class="small-items">免路费</view>
+						<view class="vertical-line"></view>
+						<view class="small-items">单程免路费</view>
+						<view class="vertical-line"></view>
+						<view class="small-items">双程免路费</view>
+					</view>
+					<view class="ss-flex-2 ss-col-center">
+						<view class="ss-flex-2 ss-col-center">
+							<text class="textIcon icon-renminbi" style="font-size: 32rpx;color: red;"></text>
+							<view style="margin-left: 3rpx;font-size: 25rpx;color:red;">999.98</view>
+						</view>
+						<view class="horizontal-line">会员价：999.89</view>
+						<view class="ss-flex-1"></view>
+					</view>
+				</view>
+			</view>
+			<!-- 技师 服务时间  出行方式默认 打车 -->
+			<view class="ss-flex-2 ss-col-center" style="margin-top:20rpx;">
+				<view style="font-size:28rpx;color:#3F454F;font-weight: 650;">服务技师</view>
+				<view class="ss-flex-1"></view>
+				<view class="ss-flex-2 ss-col-center">
+					<view style="width:50rpx;height:50rpx;border-radius: 25rpx;">
+						<image class="wh" style="border-radius: 25rpx;" referrerpolicy="no-referrer"
+							src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
+					</view>
+					<view style="font-size: 23rpx;color:#444;margin-left:10rpx;margin-right: 50rpx;">王琳</view>
 				</view>
 			</view>
+			<view class="ss-flex-2 ss-col-center" style="margin-top:10rpx;">
+				<view style="font-size:28rpx;color:#3F454F;font-weight: 650;">服务时间</view>
+				<view class="ss-flex-1"></view>
+				<view style="font-size:22rpx;color:#5CBED3;">2024-07-04 10:52:00</view>
+				<view style="width: 50rpx;text-align: center;">
+					<text class="textIcon icon-gengduo" style="font-size: 32rpx;color: #333;font-weight: 700;"></text>
+				</view>
+			</view>
+			<view class="ss-flex-2 ss-col-center" style="margin-top:10rpx;">
+				<view style="font-size:28rpx;color:#3F454F;font-weight: 650;">出行方式</view>
+				<view class="ss-flex-1"></view>
+				<view style="font-size:22rpx;color:#5CBED3;">请选择出行方式</view>
+				<view style="width: 50rpx;text-align: center;">
+					<text class="textIcon icon-gengduo" style="font-size: 32rpx;color: #333;font-weight: 700;"></text>
+				</view>
+			</view>
+			<view style="font-size: 18rpx;color:#5E636B;margin-top: 10rpx;font-weight: 600;">
+				注：单程22.9公里，预计需要30分钟，当前车费预估参考滴滴快车计费标准
+			</view>
 		</view>
 		<!-- 中部 -->
 		<view class="list-wrap">
 			<scroll-view scroll-y="true" class="list">
 				<view class="list-scroll-view">
-					
-	            </view>
-	        </scroll-view>
-	    </view>
+
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -66,14 +132,14 @@
 	} from '@dcloudio/uni-app';
 	import sheep from '@/sheep';
 	import $share from '@/sheep/platform/share';
-	
+
 	// 返回上一页
-	const backTo=async()=>{
+	const backTo = async () => {
 		uni.navigateBack({
-			delta:1
+			delta: 1
 		})
 	}
-	
+
 	//获取顶部安全距离
 	const app = uni.getSystemInfoSync()
 	const bottomHeightOne = (app.statusBarHeight) + 'rpx'
@@ -81,78 +147,115 @@
 </script>
 
 <style scoped lang="scss">
-.add-message{
-	font-size:18rpx;
-	color:#A2A2A2;
-}
-.add-title{
-	font-size:23rpx;
-	color:#3E464F;
-	font-weight: 650;
-	‌letter-spacing:2px;
-}
-.vertical-line{
-	width:2rpx;
-	height:30rpx;
-	background-color:#36AFCA;
-	margin-left:15rpx;
-	margin-right:15rpx;
-}
-.top-box-info{
-	margin-top:30rpx;
-	padding:10rpx 20rpx;
-	background-color:#fff;
-	border-radius:10rpx;
-}
-.bg-box{
-	width: 100%;
-	height: 300rpx;
-	background: url('@/static/top-bg.png') no-repeat;
-	background-size: 100% 100%;
-	box-sizing: border-box;
-}
-// 上中下布局样式
-.orderDetails-body {
-	display: flex;
-	flex-direction: column;
-	height: 100vh;
-	background-color: #EEEEF0;
-}
-// 中部滚动
-.list-wrap {
-	flex-grow: 1;
-	position: relative;
-}
-.list {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
-.list-scroll-view {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	margin-left: 2vw;
-	margin-right: 2vw;
-}
-.course-card {
-	width: 47vw;
-	margin-top: 10px;
-	margin-bottom: 10px;
-}
-// 底部
-.tools {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-.tools-item {
-	width: 45px;
-	text-align: center;
-	font-size: 14px;
-	padding: 20px;
-}
-</style>
+	.horizontal-line {
+		font-size: 16rpx;
+		color: #999;
+		text-decoration: line-through;
+		margin-left: 10rpx;
+		margin-top: 5rpx;
+		
+	}
+	.vertical-line {
+		width: 2rpx;
+		background-color: #999;
+		margin-left: 10rpx;
+		margin-right: 10rpx;
+	}
+	
+	.small-items {
+		font-size: 24rpx;
+		color: #858689;
+	}
+	.giveService-box{
+		background-color:#fff;
+		padding: 15rpx;
+		margin-top:-15rpx;
+		border-radius:10rpx;
+		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, .3);
+	}
+	.add-message {
+		font-size: 18rpx;
+		color: #A2A2A2;
+	}
+
+	.add-title {
+		font-size: 23rpx;
+		color: #3E464F;
+		font-weight: 650;
+		‌letter-spacing: 2px;
+	}
+
+	.vertical-line {
+		width: 2rpx;
+		height: 30rpx;
+		background-color: #36AFCA;
+		margin-left: 15rpx;
+		margin-right: 15rpx;
+	}
+
+	.top-box-info {
+		margin-top: 30rpx;
+		padding: 10rpx 20rpx;
+		background-color: #fff;
+		border-radius: 10rpx;
+	}
+
+	.bg-box {
+		width: 100%;
+		height: 300rpx;
+		background: url('@/static/top-bg.png') no-repeat;
+		background-size: 100% 100%;
+		box-sizing: border-box;
+	}
+
+	// 上中下布局样式
+	.orderDetails-body {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background-color: #EEEEF0;
+	}
+
+	// 中部滚动
+	.list-wrap {
+		flex-grow: 1;
+		position: relative;
+	}
+
+	.list {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.list-scroll-view {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin-left: 2vw;
+		margin-right: 2vw;
+	}
+
+	.course-card {
+		width: 47vw;
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+
+	// 底部
+	.tools {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.tools-item {
+		width: 45px;
+		text-align: center;
+		font-size: 14px;
+		padding: 20px;
+	}
+</style>

sheep/scss/_tools.scss

@@ -186,6 +186,10 @@
 	font-family: iconfont;
 	color: #1B94D3;
 }
+.wh{
+	width: 100%;
+	height:100%;
+}
 /* ==================
 
     margin padding: 内外边距