yudao-mall-uniapp/pages/XDHome/technician/technicianDetails/technicianDetails.vue

<!-- 技师详情 -->
<template>
	<view class="body" :style="'padding-top:'+bottomHeight">
		<!-- 头部 -->
		<view style="margin-top: 20rpx;padding: 10rpx;">
			<!-- 导航标题 -->
			<view class="ss-flex ss-w-100">
				<view class="ss-flex">
					<view style="width:40rpx;height:40rpx;">
						<image referrerpolicy="no-referrer"
							src="/static/lanhu_shouye/6461e1be91dd49c48afbbacf664a38ec_mergeImage.png"
							class="icon-image"></image>
					</view>
					<view style="font-size:26rpx;color:#fff;margin-left:15rpx;">
						技师详情
					</view>
				</view>
				<view class="ss-flex-1"></view>
				<view style="width:40rpx;height:40rpx;">
					<image referrerpolicy="no-referrer"
						src="/static/lanhu_shouye/61f5a7931f9d41caafd7d60ec1efadb4_mergeImage.png"
						class="icon-image"></image>
				</view>
				<view style="width:40rpx;height:40rpx;margin-left:15rpx;margin-right:15rpx;">
					<image referrerpolicy="no-referrer"
						src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
						class="icon-image"></image>
				</view>
			</view>
		</view>
		<!-- 展图 -->
		<view class="preview-image">
			<view style="width: 100%;height: 450rpx;">
				<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">
				<view style="width:25rpx;height:25rpx;" @click="previewImageInfo">
					<image referrerpolicy="no-referrer"
						src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
						class="icon-image"></image>
				</view>
				<view style="font-size: 20rpx;color:#777881;margin-left:5rpx;margin-top: 15rpx;">点击可查看形象照</view>
			</view>
			<!-- 可预约时间 -->
			<!-- 底部标签 -->
			<view class="bottom-flag-box ss-flex-2 ss-row-around">
				<view class="ss-flex-2 ss-col-center" v-for="item in 4" :key="item">
					<text class="textIcon icon-shoucang1" style="font-size: 28rpx;color: #fff;"></text>
					<view style="margin-left: 5rpx;font-size: 20rpx;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'" :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">
							<text class="textIcon icon-shoucang1" style="font-size: 34rpx;color: #777;"></text>
							<view style="margin-left: 5rpx;font-size: 24rpx;">收藏</view>
						</view>
					</view>
					<!-- 技师信息 -->
					<uni-tooltip style="margin-top: 5rpx;" content="哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈" placement="bottom">
						<view class="text-info-box">
							正规绿色服务。从业六年有余，精通推拿spa,希望给你带来舒适轻松的体验。请放心下单。
						</view>
					</uni-tooltip>
					<!-- 评价 -->
					<view class="ss-flex-2" style="margin-top: 20rpx;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" style="margin-top: 20rpx;font-size: 26rpx;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: 20rpx;">
							<text class="textIcon icon-ditu"></text>
							<view style="margin-left: 5rpx;font-size: 22rpx;color:#1B94D3;">1.68km</view>
						</view>
						<view style="font-size:18rpx;margin-left:10rpx;margin-top:10rpx;color: #4E555C;">芝罘区哈</view>
						<view class="ss-flex-1"></view>
						<view class="ss-flex-2 ss-col-center">
							<text class="textIcon icon-renzheng" style="font-size: 20rpx;"></text>
							<view style="margin-left: 5rpx;font-size: 18rpx;color:#4E555C;">点击查看资格认证</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'" :swiperList="swiperListOne">
					</XD-swiper>
				</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 style="width:168rpx;height:168rpx;" 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-renzheng" style="font-size: 24rpx;"></text>
										<view style="margin-left: 5rpx;font-size: 16rpx;color:#4E555C;">80分钟</view>
									</view>
									<view style="font-size: 16rpx;color: #BFBFBF;margin-left: 30rpx;">
										已预约1167+
									</view>
								</view>
								<!-- 服务小项 -->
								<view class="ss-flex-2" style="margin-top: 5rpx;">
									<view class="small-items">精油按摩</view>
									<view class="vertical-line"></view>
									<view class="small-items">舒缓疲劳</view>
								</view>
								<!-- 预留位置 -->
								<view class="ss-flex-1" style="min-height:60rpx;">
									
								</view>
								<view class="ss-flex-2 ss-col-center">
									<view class="ss-flex-2 ss-col-center">
										<text class="textIcon icon-renzheng" 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>
										<su-number-box :min="0" :max="10" :step="1" v-model="item.number" @change="onNumberChange($event, item)" />
									</view>
								</view>
							</view>
				        </view>
				    <!-- </scroll-view> -->
				</view>
				<!-- 技师评价列表 -->
				<view class="list-wrap2" v-show="switchIndex==2" style="background-color: #fff;border-radius: 10rpx;">
					<!-- <scroll-view scroll-y="true" class="list" 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>
					<!-- </scroll-view> -->
				</view>
			</scroll-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 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);
				}
			}
		});
		// uni.chooseImage({
		// 	count: 6,
		// 	sizeType: ['original', 'compressed'],
		// 	sourceType: ['album'],
		// 	success: function(res) {
		// 		console.log(res,'iiiiiiiiiiiiiiiii')
		// 		// 预览图片
		// 		uni.previewImage({
		// 			urls: res.tempFilePaths,
		// 			longPressActions: {
		// 				itemList: ['发送给朋友', '保存图片', '收藏'],
		// 				success: function(data) {
		// 					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
		// 				},
		// 				fail: function(err) {
		// 					console.log(err.errMsg);
		// 				}
		// 			}
		// 		});
		// 	}
		// 	});
	}
			
	
	
	//获取顶部安全距离
	const app = uni.getSystemInfoSync()
	const bottomHeightOne = (app.statusBarHeight) + 'rpx'
	const bottomHeight = ref(bottomHeightOne)
</script>

<style scoped lang="scss">
.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;
	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: 300rpx;
	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%;
}
// 上中下布局样式
.textIcon{
	font-family:iconfont;
	color:#1B94D3;
}
.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 {
	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>