<!-- 技师详情 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<!-- 展图 -->
		<view class="preview-image" style="margin-top: 10rpx">
			<view style="width: 100%; height: 450rpx" @click="previewImageInfo">
				<image class="icon-image" referrerpolicy="no-referrer"
					src="/static/lanhu_shouye/pszi35kdgsf3i6jobpzdylr9ge44ptvsr8600fdbdf-7ea4-42ee-9cba-c4712696f803.png" />
			</view>
			<!-- 左上角查看形象照 -->
			<view class="left-just-box ss-flex-2 ss-col-center" @click="previewImageInfo">
				<text class="textIcon icon-yanjing" style="font-size: 32rpx; color: #fff"></text>
				<view style="font-size: 22rpx; color: #777881; margin-left: 5rpx;">点击可查看形象照</view>
			</view>
			<!-- 可预约时间 -->
			<!-- 底部标签 -->
			<view class="bottom-flag-box ss-flex-2 ss-row-around">
				<view class="ss-flex-2 ss-col-center">
					<text class="textIcon icon-kefujingli-" style="font-size: 30rpx; color: #fff"></text>
					<view style="margin-left: 5rpx; font-size: 22rpx; color: #fff">实名认证</view>
				</view>
				<view class="ss-flex-2 ss-col-center">
					<text class="textIcon icon-zhuanyefuwu" style="font-size: 32rpx; color: #fff"></text>
					<view style="margin-left: 5rpx; font-size: 22rpx; color: #fff">专业服务</view>
				</view>
				<view class="ss-flex-2 ss-col-center">
					<text class="textIcon icon-renzheng" style="font-size: 30rpx; color: #fff"></text>
					<view style="margin-left: 5rpx; font-size: 22rpx; color: #fff">资质认证</view>
				</view>
				<view class="ss-flex-2 ss-col-center">
					<text class="textIcon icon-manager" style="font-size: 32rpx; color: #fff"></text>
					<view style="margin-left: 5rpx; font-size: 22rpx; color: #fff">全程保障</view>
				</view>
			</view>
		</view>
		<view class="title-box">她的推荐</view>
		<view class="recommend-list">
			<XD-swiper :current="1" :interval="5000" :duration="1000" :multipleItems="5" :height="'130rpx'"
				:imageHeight="'130rpx'" :imageWidth="'130rpx'" :swiperList="swiperListOne">
			</XD-swiper>
		</view>
		<view style="width: 100%; height: 5rpx"> </view>
		<!-- 添加滑动 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<!-- 详情信息 -->
				<view class="technicianDetails-box">
					<view class="ss-flex-2">
						<view class="technician-name">王&nbsp;琳</view>
						<view class="ss-flex-1 flags-box">
							<view class="flag-box ss-flex-2 ss-col-center">
								<text class="textIcon icon-dianpu" style="font-size: 22rpx; color: #fff"></text>
								<view style="margin-left: 5rpx">秋水伊人</view>
							</view>
							<view class="flag-box" v-for="i in 5" :key="i * 5"> 新人 </view>
						</view>
						<!-- 收藏 -->
						<view class="ss-flex-2 ss-col-center" style="font-size: 20rpx">
							NO.19985625
						</view>
					</view>
					<!-- 技师信息 -->
					<uni-tooltip style="margin-top: 5rpx"
						content="哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈" placement="bottom">
						<view class="text-info-box">
							正规绿色服务。从业六年有余，精通推拿spa,希望给你带来舒适
							正规绿色服务。从业六年有余，精通推拿spa,希望给你带来舒适
						</view>
					</uni-tooltip>
					<!-- 评价 -->
					<view class="ss-flex-2" style="margin-top: 5rpx; font-size: 26rpx">
						<view class="ss-flex-2 ss-col-center">
							<text class="textIcon icon-tuijian-xuanzhong" style="color: #d51517"></text>
							<view style="margin-left: 5rpx; font-size: 18rpx; color: #6c7177"><text
									style="color: #1b94d3">80%</text>认为形象优秀</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-left: 30rpx">
							<text class="textIcon icon-tuijian-xuanzhong" style="color: #d51517"></text>
							<view style="margin-left: 5rpx; font-size: 18rpx; color: #6c7177"><text
									style="color: #1b94d3">80%</text>认为态度很好</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-left: 30rpx">
							<text class="textIcon icon-tuijian-xuanzhong" style="color: #d51517"></text>
							<view style="margin-left: 5rpx; font-size: 18rpx; color: #6c7177"><text
									style="color: #1b94d3">80%</text>认为手法专业</view>
						</view>
					</view>
					<!-- 综合信息 -->
					<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;flex-wrap: wrap; padding: 5rpx">
						<view class="ss-flex-2 ss-col-center">
							<text class="textIcon icon-shoucang"></text>
							<view style="margin-left: 5rpx; font-size: 20rpx; color: #1b94d3">4.8</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-left: 20rpx">
							<text class="textIcon icon-fill_xiaohuomiao"></text>
							<view style="margin-left: 5rpx; font-size: 20rpx">已接<text style="color: #1b94d3">99+</text>单
							</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-left: 30rpx">
							<text class="textIcon icon-ditu"></text>
							<view style="margin-left: 5rpx; font-size: 22rpx; color: #1b94d3">16.68km</view>
						</view>
						<view style="font-size: 18rpx; margin-left: 10rpx; margin-top: 10rpx; color: #4e555c">芝罘区哈哈
						</view>
						<view class="ss-flex-1"></view>
					</view>
				</view>
				<!-- 中部 -->
				<view class="switch-info ss-flex-2">
					<view class="switch-item-box" :style="
              switchIndex == 1
                ? 'color:#3C4652;font-size:27rpx;font-weight:650;'
                : 'padding-top:5rpx;'
            " @click="onSwitch(1)">服务项目</view>
					<view class="switch-item-box" :style="
              switchIndex == 2
                ? 'color:#3C4652;font-size:27rpx;font-weight:650;'
                : 'padding-top:5rpx;'
            " @click="onSwitch(2)">客户评价(5555)</view>
					<view class="ss-flex-1"> </view>
					<view v-if="switchIndex == 2"
						style="font-size: 17rpx; margin-right: 10rpx; color: #535e67; margin-top: 12rpx">
						查看全部15条评价
					</view>
				</view>
				<!-- 服务项目列表 -->
				<view class="list-wrap2" v-show="switchIndex == 1">
					<!-- <scroll-view scroll-y="true" class="list"> -->
					<view class="list-scroll-view" style="padding: 10rpx; margin-top: 10rpx; border-radius: 5rpx"
						v-for="item in listData" :key="item.id">
						<view class="juedui-box" @tap="jumpPackage"></view>
						<!-- 左右布局 -->
						<view style="width: 180rpx;height:180rpx;" class="ss-flex">
							<image class="icon-image" referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
						</view>
						<view class="ss-flex-1" style="padding-left: 10rpx">
							<!-- 服务大项 -->
							<view class="ss-flex-2 ss-col-center">
								<view class="major-items">精油按摩</view>
								<view class="ss-flex-1"></view>
								<view class="ss-flex-2 ss-col-center">
									<text class="textIcon icon-shijian" style="font-size: 26rpx;color: #009fe8;"></text>
									<view style="margin-left: 5rpx; font-size: 18rpx; color: #4e555c">80分钟</view>
								</view>
								<view style="font-size: 16rpx; color: #85888B; margin-left: 30rpx">
									已预约1167+
								</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-1" style="min-height: 40rpx"> </view>
							<view class="ss-flex-2 ss-col-center">
								<view class="ss-flex-2 ss-col-center">
									<text class="textIcon icon-renminbi1688" style="font-size: 32rpx; color: red;font-weight:650;"></text>
									<view style="margin-left: 3rpx; font-size: 25rpx; color: red;font-weight:650;">999.98</view>
								</view>
								<view class="horizontal-line">会员价：999.89</view>
								<view class="ss-flex-1"></view>
								<!-- 加减 -->
								<!-- 加减 -->
								<view class="ss-flex-2">
									<view class="ss-flex-1"></view>
									<!-- 手写一个加减计算器 -->
									<view class="ss-flex-2 ss-col-center">
										<view @click="minusNumber($event, item)">
											<text class="textIcon icon-jianhao- count-icon"></text>
										</view>
										<view class="count-number">{{ item.number }}</view>
										<view @click="addNumber($event, item)">
											<text class="textIcon icon-jiahao- count-icon"
												style="color: #2dafd1"></text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
				</view>
				<!-- 技师评价列表 -->
				<view class="list-wrap2" v-show="switchIndex == 2" style="background-color: #fff; border-radius: 10rpx">
					<view class="list-scroll-view" style="padding: 10rpx; margin-top: 10rpx; flex-wrap: wrap"
						v-for="i in 5">
						<view class="ss-flex-2">
							<view style="width: 50rpx; height: 50rpx">
								<image class="icon-image" referrerpolicy="no-referrer"
									src="/static/lanhu_shouye/0ec6b37287b9470080da66761c7acb4a_mergeImage.png" />
							</view>
							<view style="margin-left: 20rpx">
								<view class="ss-flex-2">
									<view style="font-size: 25rpx; font-weight: 650"> 用户898989 </view>
									<view class="ss-flex-2 ss-col-center" style="margin-left: 20rpx">
										<text class="textIcon icon-shoucang" style="font-size: 28rpx"></text>
										<view
											style="margin-left: 5rpx; font-size: 23rpx; color: #009fe8; font-weight: 700">
											5.0</view>
									</view>
									<view class="ss-flex-1"></view>
								</view>
								<view style="font-size: 21rpx; color: #a0a1a1"> 11-18 凌晨 01:35 泰式SPA </view>
							</view>
						</view>
						<!-- 评价语 -->
						<view class="ss-flex-2" style="margin-top: 20rpx; font-size: 26rpx; margin-left: 70rpx">
							<view class="ss-flex-2 ss-col-center radius-box">
								<text class="textIcon icon-tuijian-xuanzhong" style="color: #d51517"></text>
								<view style="margin-left: 5rpx; font-size: 18rpx; color: #777">认为形象优秀</view>
							</view>
							<view class="ss-flex-2 ss-col-center radius-box" style="margin-left: 30rpx">
								<text class="textIcon icon-tuijian-xuanzhong" style="color: #d51517"></text>
								<view style="margin-left: 5rpx; font-size: 18rpx; color: #777">认为态度很好</view>
							</view>
							<view class="ss-flex-2 ss-col-center radius-box" style="margin-left: 30rpx">
								<text class="textIcon icon-tuijian-xuanzhong" style="color: #d51517"></text>
								<view style="margin-left: 5rpx; font-size: 18rpx; color: #777">认为手法专业</view>
							</view>
						</view>
						<!-- 客户打分 -->
						<view style="font-size: 24rpx; color: #605a58; margin-top: 20rpx; margin-left: 70rpx">
							客户打了【<text>5.0</text>分】，但是没留下文字评价
						</view>
						<!-- 评价语 -->
						<view class="ss-flex-2" style="flex-wrap: wrap; margin-left: 70rpx; margin-top: 10rpx">
							<text class="text-info-box-two"> 本人比照片好看 </text>
							<view class="text-info-box-two"> 本人比照片好看234 </view>
							<view class="text-info-box-two"> 本人比照片好看3424 </view>
							<view class="text-info-box-two"> 本人比照片好看4243 </view>
							<view class="text-info-box-two"> 本人比照 </view>
						</view>
						<!-- 横线 -->
						<view style="height: 2rpx; background-color: #939396; margin-top: 20rpx; width: 100%">
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="ss-flex-2" style="background-color: #eeeeef; width: 100%">
			<view class="ss-row-around topAndbootom" style="margin-left: 10rpx" @click="backInfo">
				<view style="text-align: center">
					<text class="textIcon icon-bangzhuzhongxin" style="font-size: 38rpx; color: #fff"></text>
				</view>
				<view style="font-size: 22rpx; color: #888888">附近技师</view>
			</view>
			<view class="ss-row-around topAndbootom" style="margin-left: 40rpx">
				<view style="text-align: center">
					<text class="textIcon icon-shoucang1" style="font-size: 38rpx; color: #fff"></text>
				</view>
				<view style="font-size: 22rpx; color: #888888">收藏</view>
			</view>
			<view class="ss-row-around topAndbootom" style="margin-left: 40rpx">
				<view style="text-align: center">
					<text class="textIcon icon-kefu" style="font-size: 38rpx; color: #fff"></text>
				</view>
				<view style="font-size: 22rpx; color: #888888">客服</view>
			</view>
			<view class="ss-row-around topAndbootom" style="margin-left: 40rpx; margin-right: 40rpx">
				<view style="text-align: center">
					<text class="textIcon icon-discuss" style="font-size: 38rpx; color: #fff"></text>
				</view>
				<view style="font-size: 22rpx; color: #888888">通知</view>
			</view>
			<view class="ss-flex-2 ss-flex-1 ss-col-center ss-row-center"
				style="background-color: #1b94d3; font-size: 28rpx; color: #fff" @click="placeOrder">
				立即下单
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';

	const swiperListOne = ref([{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 1,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 2,
			name: '王琳',
			flag: false,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 3,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 4,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 5,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 6,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 7,
			name: '王琳',
			flag: true,
		},
	]);

	// 每个项目的加减
	const minusNumber = async (e, item) => {
		item.number--;
		if (item.number <= 0) {
			item.number = 0;
		}
	};
	const addNumber = async (e, item) => {
		item.number++;
		if (item.number >= 5) {
			item.number = 5;
		}
	};
	//服务项目和客户评价功能
	const switchIndex = ref(1);
	const onSwitch = async (num) => {
		console.log(num, 'iiiiiiiiiiiii');
		switchIndex.value = num;
	};
	const listData = ref([{
			id: 1,
			price: 240,
			allManey: 0,
			number: 0,
		},
		{
			id: 2,
			price: 220,
			allManey: 0,
			number: 0,
		},
		{
			id: 3,
			price: 270,
			allManey: 0,
			number: 0,
		},
		{
			id: 4,
			price: 499,
			allManey: 0,
			number: 0,
		},
	]);
	const onNumberChange = async (e, listItem) => {
		console.log(e, listItem, 'fffffffff');
	};

	// 预览图片
	const urlw = ref([
		// 需要预览的图片链接列表
		'https://www.baidu.com/link?url=8cEPzke9onGTBA2ZWTUbkzKwPv5Y6C6HQpYtP9xWrhtFrdpR9ot3IaDtEdn_-loYphiC0rJlFMWKkbrd2zi2hWyH5Agrl2Jwanxs2yCXv-5w8GlYBkTR6IPU-rVjMHD_XNaSlh4S6rRmcjAnrdMMWZmKQg1cS3aJhQPtPQAjxOIDa0rkpssWq2N0L_2n434QnVo0zAL_q6tTzQDqirJE4D95_FdsEnDIefD6tEOnSChKcgcXMWKIjGjEBaWwECzahg2VYf_fmr2LF4438OzM3ZbsvDbTIyfDc0q3X7x-5qQmhNDoM_WzaZId2-R8eK-9UwUKExZypFZCp-JQ4LhIaMqVgFzyCkmF57SDRRApQoITrTwBFTWW-xace5U6Xp9Mz3j9OyrsvVl1nstSC43mfVtxOLXgmqvmjU3-88fchxkPhi0lBdqBxDVDP5eIiKqRETu8H1iPUhF_3N_f6gWfdC84E97G6NASLG7VDKaHKGpfXj_2716d3h3GUqoBv-qSgFvqqOfm8xf9HCqlKIKMCremQd68HUhj9D6Tg8oB_FPbyrkdqoTsnl4Y3uRBAS4TKDHCEW4Zlp3zTcZviGigjQBdC1M-qJibwVEIex-uSrcWmx5ZW-MQMElGny4GClsuLlwcQ3vHU3rlFUg4HL5-KUm5s7SKkU-tW-H7coehVvDESekeU_uSpLDAb8NVBIu0WRQf1c15tiwtkGBpejAgz-Eb4BGytJXbpRuAnM-Kbepz09X-rHkfknzWZKlSXMhLXQrLqzaaEjHI2LfyvIS1zRkjHvovv-EbN7k97WhN0Ta&wd=&eqid=b520cb760063b2d10000000266ce800c',
		'https://www.baidu.com/link?url=MiESB-K4vnga6d6Ok1rP17gWCJJdM9Gx3hsmG74NeWnxE5guq02SorvPc741hEWLAES9Brl1sXDBJSWbmgqRDLC3VnR4TWiUDmtnALTuYHPFtm36GuqSKn1Oo9VDvT5lwPttN715KPW4I4wwPSQ2mC7E76kSQxQvefieRuYoGX0MAF9fQBkfsVn2518tRfkecEyUoTrUMF3_Gbl3fCd_IFjM1xLCB7Il6NNNmfHDUbpq_j7_Wlm8FIxbJ2c-6FDfDbxKfUB4bPhMWSykGguYdduWJRQPue4nKEBVDRkj3E3QkL8-iBOG3pr7MlI17pa45DNy2XjHRyVvf2mW26EpmE_My7uBJbHsbG5V2ume8BXexmt-7-ilrJRuBaiidCmT1aBvfj7Vw_-SwX4RA4cCAptMIAu6RofEPSbk6fAXQB4iQJwe6oLQ-YgznLMEKMD9amFO_c1q1t5pO80ooGmcuUj2h1scyHzyp5jHxpPU_WLySwYRhEOMycmjNLu8XeFETrwXP7qZgMHWB5jTHcwzDQnA4AgkUf3Zh7a9-nI_UBcVsp8QbRjj8uzX4-zAGsXdSIIFbWyymFY6f6nZjmxGkh19Q7B6YwtZRZy7nU1U9Wd_C2TsqLd_DrRsqJOVo55TbzzYDNa4s2c_GjucAQ57x8ALkr0IV9FcPJqlzNitOrENd_I8aNHwxjQOo-p_EFyrnkMcsyqGJePpZUnCiAt61D-7kgWZKW020k5OglEEXRO75RYoJ_eAqjjtakXTze9-KSuSLWjV5eIr8E1mqFSWYMqL7wSF5sKmKKDqsv4iURO&wd=&eqid=b520cb760063b2d10000000266ce800c',
	]);
	const previewImageInfo = async () => {
		uni.previewImage({
			urls: urlw.value,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				},
			},
		});
	};

	// 返回上一级
	const backInfo = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/technicianList/technicianList',
		});
	};
	//跳转到套餐详情
	const jumpPackage = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/Packages/Packages',
		});
	}
	// 立即下单
	const placeOrder = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/orderDetails/orderDetails',
		});
	};

	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	const bottomHeight = ref(bottomHeightOne);
</script>

<style scoped lang="scss">
	.juedui-box {
		position: absolute;
		top: 10rpx;
		left: 150rpx;
		width: 440rpx;
		height: 200rpx;
		z-index: 9;
	}

	.maney-number-box {
		font-size: 30rpx;
		color: #e60012;
		margin-left: 5rpx;
		padding-top: 5rpx;
		font-weight: 650;
	}

	.count-number {
		font-size: 24rpx;
		color: #555;
		padding-left: 10rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
	}

	.count-icon {
		font-size: 30rpx;
		color: #999;
	}

	// 加减号
	.text-info-box-two {
		font-size: 22rpx;
		padding: 5rpx 15rpx;
		border-radius: 15rpx;
		background-color: #efefef;
		color: #717477;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.radius-box {
		background-color: #efefef;
		border-radius: 15rpx;
		padding: 5rpx 15rpx;
	}

	.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;
	}

	.major-items {
		font-size: 28rpx;
		color: #3e4651;
		letter-spacing: 2rpx;
	}

	.switch-item-box {
		font-size: 24rpx;
		color: #7b7c7e;
		box-sizing: border-box;
		margin-left: 20rpx;
	}

	.switch-info {
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.title-box {
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #212c3b;
		padding-left: 5rpx;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.recommend-list {
		width: 95%;
		margin-left: 2.5%;
		white-space: nowrap;
		overflow-x: auto;
		background-color: #fff;
		padding: 10rpx 5rpx;
		box-sizing: border-box;
		border-radius: 5rpx;
		margin-top: 10rpx;
	}

	.text-info-box {
		width: 100%;
		font-size: 23rpx;
		color: #494f56;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		min-height: 60rpx;
	}

	.flag-box {
		font-size: 16rpx !important;
		height: 22rpx;
		line-height: 22rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		box-sizing: border-box;
		color: #fff;
		background-color: #e57f3a;
		border-radius: 10rpx;
		margin-right: 10rpx;
		margin-top: 5rpx;
	}

	.flags-box {
		display: flex;
		flex-wrap: wrap;
		margin-left: 10rpx;
	}

	.technician-name {
		font-size: 50rpx;
		color: #192332;
		font-weight: 650;
	}

	.technicianDetails-box {
		position: realtive;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 20rpx;
		min-height: 200rpx;
		padding: 15rpx;
	}

	.bottom-flag-box {
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		width: 100%;
		height: 70rpx;
		background-color: #5eb9c8;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}

	.left-just-box {
		position: absolute;
		left: 20rpx;
		top: 10rpx;
		width: 80%;
		height: 40rpx;
	}

	.preview-image {
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.icon-image {
		width: 100%;
		height: 100%;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 3px);
		background: linear-gradient(to bottom, #08a3e9, #fff);
		box-sizing: border-box;
		letter-spacing: 2rpx;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		margin-top: 5rpx;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list-wrap2 {
		flex-grow: 1;
		position: relative;
		margin-top: 5rpx;
		width: 100%;
		box-sizing: border-box;
	}

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

	.list-scroll-view {
		position: relative;
		display: flex;
		background-color: #fff;
	}

	.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>