<template>
	<view>
		<view class="swipeservwe">
			<view class="btn les" @click="swip(-1)">
				<image class="pao-img" :src="`/static/index/newindex/states/ris.png`" style="transform: rotate(180deg);"/>
			</view>
			<view class="btn ris" @click="swip(1)">
				<image class="pao-img" :src="`/static/index/newindex/states/ris.png`" />
			</view>
			<view class="bots">
				<view v-for="(v,i) in plsbuy" :key='i' :class="current==i?'dot':''"></view>
			</view>
			<swiper class="swiper" :circular="true" :indicator-dots="false"
			easing-function="easeInOutCubic"
			 :autoplay="autoplay" :interval="3000" :duration="500" :current="current" @change="change">
				<swiper-item v-for="(indexmessage,i) in plsbuy" :key="i" class="swper">
					 <view class="photo-father" >
						 <!-- {filter: `grayscale(60%)`} -->
					 	<view class="juzhong"  :style="indexmessage?.startTime?{}:''">
					 		<donghua :width="`1300rpx`" :height="`900rpx`" :links="blueArray" :playing="photoplay" :loop="true"
					 			:interval="120" />
					 	</view>
						<view class="timedjs">
							<text>服务倒计时</text>
							<timeing ></timeing>
						</view>
					 	<view class="weight-time">
							<view>
								{{ indexmessage?.startTime.slice(11, 16)  }} 
								<text style="font-size: 1.4vw;font-weight: 400;">|&nbsp; 30分钟</text>
							</view>
					 		<view style="height: 5vw;" >
					 		</view>
					 		<view class="pao-father" >
					 			<image class="pao-img" :src="`/static/index/newindex/states/pao.png`" />
					 			<view style="z-index: 1;"  v-if="topbuttontarget==0">
					 				{{indexmessage?.izStart=='N'?'待执行':'执行中'}}
					 			</view>
					 		</view>
					 	</view>
						<view class="big-img"  v-if="indexmessage.izPackage=='Y'&&indexmessage?.izStart=='N'">
								<image :src="`/static/zlb.png`"  :style=" 'width: 450rpx' "  mode="aspectFill"/>
						</view>
						<view class="cardbox" v-if="indexmessage.izPackage=='Y'&&indexmessage?.izStart=='Y'">
							<scroll-view scroll-y="true"  class="scrollcard">
									<view class="itemcard" v-for="(v,i) in zlarr" :key='i' :class="v.flag?'act':''" @click="zldex(v)">
										<image  :src="!v.flag?`/static/index/newindex/states/xs.png`:'/static/index/newindex/states/xsz.png'" />
										<text>强直屈曲洗手</text>
										<view v-if="i>2">(大体重)</view> 
											<!-- <image :src="fwzldex!=i?v.netImmediateFile:v.netPreviewFileSmall" mode="aspectFill"></image>
											<text >{{v.directiveName?.substring(0,4)}}</text>
											<view>{{v.directiveName?.substring(4,12)}}</view> -->
									</view>
							</scroll-view>
						</view>
						<!-- https://www.focusnu.com/nursingunit101/sys/common/static/temp/1_1760592730764.png -->
						<view class="big-img"  v-if="indexmessage.izPackage=='N' ">
							<image  :style="!indexmessage?.previewFile?'width: 450rpx':'width: 650rpx'"
								:src="indexmessage?.previewFile? serverUrl + indexmessage?.previewFile: `/static/index/newindex/wendu/2.png`"
								 mode="aspectFill"/>
								<!-- <image :src="`/static/zhiniaoku.png`"
								 :style="!indexmessage?.previewFile?'width: 450rpx':'width: 650rpx'"
								 	 mode="aspectFill"/> -->
						</view>
					 	
					 	
						
						<view style="display: flex;align-items: center; ">
					 		<view class="server-name" >
					 			{{ indexmessage?.directiveName }} 
					 		</view>
							<view style="width: 6.5vw;height: 2vw;margin-left: 1vw;position: relative;" v-if="indexmessage?.categoryName">
								<image src="/static/index/newindex/wendu/bgc.png" mode="aspectFill" 
								style="width: 100%;height: 100%;position: relative;z-index: 0; margin-top: 0.4vw;"></image>
								<view class="bgc-font"  
								 style="top: 0;left: 0;padding-left:0.65vw;width: 100%;height: 100%;z-index: 2;position: absolute;line-height:2.9vw;font-size: 1.1vw;">
									{{indexmessage?.categoryName }}
								</view>
							</view>
					 	</view>
						
						
					 	<view style="display: flex;margin-top: 40rpx;" >
					 		<view style="width: 240rpx;height: 90rpx;margin-right: 40rpx;">
					 			<view :class="indexmessage?.izStart=='N'?'start-button':'end-button'"  @click="start(indexmessage)">
					 				开始服务
					 			</view>
					 		</view>
					 		<view style="width: 240rpx;height: 90rpx;">
					 			<view :class="(indexmessage?.izStart=='Y'&& indexmessage?.izFinish=='N')?'start-button':'end-button'"    @click="end(indexmessage)">
					 				结束服务
					 			</view>
					 		</view>
					 	</view>
						
						<view class="left-menu"  >
							<view  style="margin: 30rpx 0;" @click="errmsgclk(0,1)">
								<view class="left-ball" :style="indexmessage?.serviceContent!=''?'background-color: #fff;':'background-color:RGBA(228, 229, 231, 1);'">
									<image class="left-menu-img" :src="'/static/index/newindex/leftmenu/left'+0+'.png'" />
								</view>
							</view>
							<view  style="margin: 30rpx 0;" @click="errmsgclk(1,1)">
								<view class="left-ball" :style="indexmessage?.mp3File!=''?'background-color: #fff;':'background-color:RGBA(228, 229, 231, 1);'">
									<image class="left-menu-img" :src="'/static/index/newindex/leftmenu/left'+1+'.png'" />
								</view>
							</view>
							<view style="margin: 30rpx 0;" @click="errmsgclk(2,1)">
								<view class="left-ball" :style="indexmessage?.mp4File!=''?'background-color: #fff;':'background-color:RGBA(228, 229, 231, 1);'">
									<image class="left-menu-img" :src="'/static/index/newindex/leftmenu/left'+2+'.png'" />
								</view>
							</view>
							<view v-for="(item,index) in [3,4]" :key="index" style="margin: 30rpx 0;" @click="errmsgclk(item,2)">
								<view class="left-ball"  :style="indexmessage?.izStart=='Y'?'background-color: #fff;':'background-color:RGBA(228, 229, 231, 1);'">
									<image class="left-menu-img" :src="'/static/index/newindex/leftmenu/left'+item+'.png'" />
								</view>
							</view>
						</view>
						<view class="right-menu" >
							<view class="zhezhao-top" ></view>
							<view class="zhezhao-bottom" ></view>
							<image class="top-img" :src="`/static/index/newindex/rightmenu/top.png`"  />
							<view scroll-y="true" class="right-scroll"  >
								<view style="height: 20rpx;"> </view>
								
								<view style="margin: 20rpx 0;width: 110rpx;margin-left: 20rpx;" @click="zhixing(1)">
									<view class="white-circle" :style="indexmessage?.izStart=='Y'?'background-color:RGBA(228, 229, 231, 1)' : ''">
										<image class="right-menu-img" :src="'/static/index/newindex/rightmenu/1.png'" />
										<view class="right-menu-name">
											转单执行
										</view>
									</view>
								</view>
								<view style="margin: 20rpx 0;width: 110rpx;margin-left: 20rpx;" @click="zhixing(2)">
									<view class="white-circle">
										<image class="right-menu-img" :src="'/static/index/newindex/rightmenu/2.png'" />
										<view class="right-menu-name">
											协助执行
										</view>
									</view>
								</view>
								<view style="height: 30rpx;">
						
								</view>
							</view>
							<image class="top-img" :src="`/static/index/newindex/rightmenu/bottom.png`"  />
						</view>
					 		
					 </view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <tanchuang :show="zxzd>0" :font="zdcont" @back="zxzd = 0" @right="tijiaozx()"> </tanchuang> -->
		<tanchuang :show="open==3" font="是否结束服务指令？" @back="open = 0" @right="ends()"> </tanchuang>
		<view class="mengban" v-if="zdxzdex>0" @click="zdxzdex=0"></view>
		<view class="photowall" v-show="zdxzdex>0" :style="zdxzdex?{opacity:1}:{opacity:0}" v-if="zdxzdex">
			<view class="photowall-title">
				<view class="photowall-name">
					{{ zdxzdex==1?`转单执行`:`协助执行` }}
				</view>
			</view>
			<scroll-view scroll-y="true" class="photowall-other" scroll-with-animation enable-flex v-if="zdxzdex>0">
				<view class="photowall-other" >
					<view class="bottom-title" v-for="(v,k) in zdxzarr" :key='k' @click="zdwu(v,k)" 
					 style="border: 1px solid #f8f8f8;width: 16vw;margin: 0 0.8vw;;height: 17vw;border-radius: 1.1vw;background: #f8f8f8;display: flex;flex-direction: column;align-items: center;"
					 :style="v.flag?'border: 1px solid #0385FA;background: #fff !important;':''">
						 <image style="width: 9vw;height: 9vw;border-radius: 50%;margin: 1vw auto;"
						 		:src="v.headPath?serverUrl+v.headPath:'/static/shouye/xd.png'" />
						 	<view class="name-weight">
						 		{{v.name }}
						 	</view>
						 	<view class="message-view" v-if="uni.getStorageSync('NUall').elderInfo?.name">
						 		{{v.sex}}
						 		<view class="message-shu"></view>
						 		<view style="font-weight: 600;">
						 			{{ v.height}}cm
						 		</view>
						 		
						 		<view class="message-shu"></view>
						 		{{ v.weight}}Kg
						 	</view>
						 	 
						 </view>
					</view>
				
			</scroll-view>	
			<!-- <view style="position: absolute;right: 2vw;bottom: 0.8vw;height: 4vw;"  >
				<view v-if="flag" class="lanbt" @click="zhixingsub" >确定</view>
				<view v-if="!flag" class="huibt">确定</view>
			</view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch ,reactive} from 'vue';
	import { onBackPress, onShow, onHide } from "@dcloudio/uni-app"
	import timeing from '@/component/public/newgame/sxy-Timeing.vue'
	import {queryOrderList,queryOrderInfoList,startOrder,endOrder,editSubPicPath,editSubMp4,queryEmpList,transferOrder,assistOrder,generateInstant} from '../../component/doctorask/api/api.js'
	const open = ref(0)
	const donghuaopo = ref(false);
	const topbuttontarget = ref(0);
	const ilanarr = ref([]);
	const listobj = ref({});
	const photoplay = ref(false)
	const serverUrl = ref(uni.getStorageSync('imagebase') )
	const servervideoUrl = ref(uni.getStorageSync('serverUrl') + '/sys/commonVideo/staticVideo/')
	const serverpicUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const current = ref(0)
	const autoplay = ref(false)
	const init = (e)=>{
		firstgetqueryCgdList(e)
	}
	defineExpose({
		init
	})
	const change = (e)=>{
		current.value = e.detail.current
	}
	const swip = (e)=>{
		if(current.value==0&&e==-1){
			current.value = 4
			return
		}
		if(current.value==4&&e==1){
			current.value = 0
			return
		}
		current.value+=e;
	}
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		employeeId:uni.getStorageSync('userInfo').employessId, 
		nuId:uni.getStorageSync('nuId'),
		workType:5
	})
	onMounted(()=>{
		setTimeout(()=>{
			photoplay.value = true;
		},200)
	})
	const zdxzdex = ref(0)
	const zdxzarr = ref(0)
	const zhixing = (e)=>{
		if(indexmessage.value?.izStart=='Y' && e ==1){
			uni.showToast({
				title:'服务中不能转单！',
				icon:'none'
			})
			return
		}
		queryEmpList({id:uni.getStorageSync('userInfo').id}).then(res=>{
			zdxzarr.value = res.result;
			zdxzarr.value.forEach(item=>{
				item.flag = false
			})
			zdxzdex.value = e;
		})
	}
	const plsbuy = ref([])
	// const indexmessage = ref({});
	const firstgetqueryCgdList = (nuId) => {
		form.nuId = nuId;
		queryOrderList(form).then(res => {
			console.log(form)
			console.log(res.result.records)
			if(res.result.records.length>0){
				plsbuy.value = res.result.records
				// indexmessage.value = res.result.records[0]
				// clickLeftMenu(0,res.result.records[0])
			}else{
				plsbuy.value = [];
			}
		})
	}
	const submit = ()=>{
		let sub = "";
		ilanarr.value.forEach(item=>{
			sub+=item+','
		})
		if(topbuttontarget.value == 1){
			editSubPicPath({id:listobj.value.id,manuallyPicPath:sub}).then(res=>{
				if(res.success){
					topbuttontarget.value = 0;
					donghuaopo.value = false;
					firstgetqueryCgdList(form.nuId)
					// clickLeftMenu(0,{id:indexmessage.value.mainId})
				}
			})
		}else{
			editSubMp4({id:listobj.value.id,manuallyMp4Path:sub}).then(res=>{
				console.log({id:listobj.value.id,manuallyMp4Path:sub},res)
				if(res.success){
					topbuttontarget.value = 0;
					donghuaopo.value = false;
					firstgetqueryCgdList(form.nuId)
					// clickLeftMenu(0,{id:indexmessage.value.mainId})
				}
			})
		}
	}
	const previewImage = (v, i, arr) => {
		if(topbuttontarget.value == 1){
			let u = []
			arr.forEach(e => {
				u.push(serverpicUrl.value + e)
			})
			uni.previewImage({
				current: i,
				urls: u,
				showmenu: false,
				longPressActions: {
					itemList: [],
				}
			})
		}
	}
	const videoContext = ref(null)
	const play = (e,i)=>{
		 videoContext.value = uni.createVideoContext('myVideo'+i);
		 videoContext.value.play()
	}
	const sxdupld = (e) => {
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1;
		uni.uploadFile({
			url: uni.getStorageSync('serverUrl') + '/sys/common/upload',
			filePath: e,
			name: 'file',
			fileType:topbuttontarget.value==2?'video':'image',
			formData: {
				biz: year + '/' + month + (topbuttontarget.value==1?'/fwxm/manuallyPicPath':'/fwxm/manuallyMp4Path')
			},
			header: {
				'X-Access-Token': uni.getStorageSync('token')
			},
			success: res => {
				const data = JSON.parse(res.data);
				ilanarr.value.push(data.message)
				uni.hideLoading()
			},
			fail: () => {
				uni.hideLoading()
				uni.showToast({ title: '上传失败', icon: 'none' })
			}
		})
	}
	const uplod = (v) => {
		if(topbuttontarget.value==1){
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //从相册选择
				success: (e) => {
					let ar = JSON.stringify(e.tempFilePaths)
					uni.compressImage({
						src: JSON.parse(ar)[0],
						quality: 60,
						success: res => {
							sxdupld(res.tempFilePath)
							// v.picPatharr.push(res.tempFilePath);
						}
					})
				}
			});
		}else{
			uni.chooseVideo({
				sourceType: ['camera' ],
				success: (e)=> {
					uni.showLoading({
						title:'正在上传...'
					})
					uni.compressVideo({
						src: e.tempFilePath,
						quality: 'medium',
						success: res => {
							sxdupld(res.tempFilePath)
							// v.picPatharr.push(res.tempFilePath);
						}
					})
					// sxdupld(res.tempFilePath )
				}
			});
		}
	}
	const end = (v)=>{
		if(indexmessage.value.izStart=='Y'&& indexmessage.value.izFinish=='N'){
			open.value=3;
		}
	}
	const ends = ()=>{
		
			endOrder({id:indexmessage.value.id}).then(res=>{
			if(res.success){
				open.value=0;
				// severcards.value.firstgetqueryCgdList()
				firstgetqueryCgdList(uni.getStorageSync('nuId'))
			}else{
				
			}
		})
		
	}
	const errmsg = ref('')
	const openerror = ref(false);
	const errmsgclk = (e,k)=>{
		if(k==1){
			if(indexmessage.value?.izStart=='Y'){
				switch (e){
					case 0:
					if(indexmessage.value?.serviceContent==''){return}
						errmsg.value = indexmessage.value?.serviceContent
						break;
					case 1:
					if(indexmessage.value?.mp3File==''){return}
					errmsg.value = indexmessage.value?.mp3File
						break;
					case 2:
					if(indexmessage.value?.mp4File==''){return}
					errmsg.value = indexmessage.value?.mp4File
						break;
						
					default:
						break;
				}
				openerror.value = true;
			}
		}else{
			if(indexmessage.value?.izStart=='Y'){
				
				switch (e){
					case 3:
					ysptp(indexmessage.value,0,1)
						break;
					case 4:
					ysptp(indexmessage.value,0,2)
						break;
						
					default:
						break;
				}
			}
			
		}
	}
	const ysptp = (v,i,r) =>{
		// v.manuallyPicPath
		if(r == 1&&v.manuallyPicPath){
			ilanarr.value = v.manuallyPicPath.split(",");
			ilanarr.value = ilanarr.value.filter(item => item !== '');
		}else if(r == 2&&v.manuallyMp4Path){
			ilanarr.value = v.manuallyMp4Path.split(",");
			ilanarr.value = ilanarr.value.filter(item => item !== '');
		}else if(r == 3&&v.tplinkPath){
			ilanarr.value = v.tplinkPath.split(",");
			ilanarr.value = ilanarr.value.filter(item => item !== '');
		}
		else{
			ilanarr.value = [];
		}
		
		listobj.value = v;
		topbuttontarget.value = r;
		donghuaopo.value = true;
	}
	const fwzlindex = ref(0);
	const fwzldex = ref(-1);
	const fwzlarr = ref(0);
	const zlarr = ref([{flag:false},{flag:false},{flag:false},{flag:false},{flag:false},{flag:false},{flag:false},{flag:false},{flag:false}]);
	const zldex = (e) =>{
		e.flag = !e.flag
	}
	 
	const base = genPaths(
		'/static/index/newindex/curve',
		'curve_',
		9,
		'png',
		1,
		false
	)
	const blueArray = ref([
		...base,
		...[...base].reverse()   // 先拷贝一份再反转，避免修改原 base
	])
	const basesmall = genPaths(
		'/static/index/newindex/curve',
		'breathe_',
		9,
		'png',
		1,
		false
	)
	const bluesmallArray = ref([
		...basesmall,
		...[...basesmall].reverse()   // 先拷贝一份再反转，避免修改原 base
	])
	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
		return Array.from({ length: count }, (_, i) => {
			const idx = pad
				? String(i + startIndex).padStart(2, '0')
				: i + startIndex
			return `${base}/${prefix}${idx}.${ext}`
		})
	}
</script>

<style scoped lang="less">
	.swipeservwe{
		width: 65vw;
		height: 70vh;
		position: relative;
		background-color: #F2F3F8;
		.bots{
			width: 60%;
			position: absolute;
			height: 30rpx;
			bottom: 0;
			left: 20%;
			display: flex;
			justify-content: center;
			view{
				width: 1.3vw;
				height: 0.6vw;
				background: #DCDCDC;
				border-radius: 0.2vw;
				margin: 0.7vw;
			}
			.dot{
				background: #0193F4;
			}
		}
		.btn{
			width: 2.4vw;
			height:2.4vw;
			background: #E9EAED;
			border-radius: 50%;
			position: absolute;
			top: 32vh;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;
			image{
				width: 80%;
				height: 80%;
			}
		}
		.les{
			left: 0;
		}
		.ris{
			right: 0;
		}
		.swiper{
			width: 100%;
			height: 100%;
			.swper{
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
	}   
	.lanbt{
		width: 8.2vw;
		height: 3.3vw;
		background: #EDEDEF;
		border-radius: 1.6vw;
		font-weight: 400;
		font-size: 1.6vw;
		color: #888888;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #EDEDEF; 
		background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
		border: 1px solid rgba(3,133,250,0.34);
		color: #0385FA;
	}
	.huibt{
		width: 8.2vw;
		height: 3.3vw;
		background: #EDEDEF;
		border-radius: 1.6vw;
		font-weight: 400;
		font-size: 1.6vw;
		color: #888888;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #EDEDEF; 
		border: 1px solid rgba(3,133,250,0.34);
		color: #999;
	}
	
	
	
	.photo-father {
		width: 100%;
		height: 1100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-top: 0rpx;
		
		.timedjs{
			position: absolute;
			width: 7vw;
			right: 4vw;
			top: 0vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			>text{
				font-weight: 400;
				font-size: 1.3vw;
				color: #666666;
			}
		}
	}
	.juzhong {
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, -20%);
		z-index: -1;
	}
	.cardbox{
		width:40vw;
		height:34vh;
		position: relative;
		top: -5vh;
		z-index: 55;
		left: 2vw;
		.shadow{
			width: 100%;
			height: 5.5vw;
			position: absolute;
			left: 0;
			top: -1.5vw;
			border-radius:0 0 25% 25%;
			filter: blur(14rpx);
			background: linear-gradient(to bottom, RGBA(239, 240, 244, 1), RGBA(239, 240, 244, 1));
			z-index: 55;
		}
		.scrollcard{
			width:42vw;
			height:35vh;
			position: relative;
			
				.itemcard{
					width: 11.2vw;
					height: 8vw;
					background: #F8F8F8;
					border-radius: 1.6vw;
					margin: 1.2vw 1.5vw 0 0vw;
					display: inline-block;
					border: 2px solid #F8F8F8;
					text-align: center;
					image{
						width: 3.3vw;
						height: 3.3vw;
						margin: 0.8vw auto 0vw;
					}
					text{
						display: block;
						text-align: center;
						font-weight: 400;
						font-size: 1.3vw;
						color: #666666;
						white-space: nowrap;
						width: 100%;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					view{
						text-align: center;
						font-weight: 400;
						font-size: 1vw;
						color: #555;
						width: 100%;
					}
					
				}
				.act{
					background: #fff;
					border: 2px dashed rgba(1,125,233,0.43);
					text,view{
						color: #017DE9;
					}
				}
		}
	}
	.weight-time {
		font-weight: 800;
		font-size: 70rpx;
		margin-top: 2vw;
		position: relative;
		margin-left: -50rpx;
	}
	
	.big-img {
		height: 550rpx;
		z-index: 100;
		margin-top: -100rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.server-name {
		font-size: 35rpx;
		margin-right: 10rpx;
		font-weight: 600;
		margin-top: 1vw;
	}
	
	.server-bgc {
		width: 160rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	
	}
	
	.bgc-img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.bgc-font {
		color: #fff;
		z-index: 1;
	}
	
	.states-father {
		display: flex;
		margin: 0 20rpx;
	}
	
	.start-button {
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, #009DEF, #0076FF);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 1.5vw;
	
	}
	
	.end-button {
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, #FFFFFF, #C8D0D9);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		font-size: 1.5vw;
	}
	
	.pao-father {
		position: absolute;
		top: -20rpx;
		right: -110rpx;
		font-size: 22rpx;
		width: 100rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	
		.pao-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
	
		}
	}
	
	.left-menu {
		position: absolute;
		top: 45%;
		left: 100rpx;
		transform: translateY(-50%);
	}
	
	.zoom {
		transform: scale(1.2);
		transform-origin: bottom left;
		transition: transform 1s ease;
	}
	
	.left-ball {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	
		.left-menu-img {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.right-menu {
		position: absolute;
		top: 45%;
		right: 80rpx;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 140rpx;
	
		.top-img {
			width: 140rpx;
			height: 110rpx;
			padding: 0 50rpx;
		}
	
		.right-scroll {
			width: 100%;
			height: 450rpx;
		}
	
		.white-circle {
			height: 170rpx;
			border-radius: 60rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			text-align: center;
			font-size: 25rpx;
			width: 100rpx;
	
			.right-menu-img {
				width: 50rpx;
				height: 50rpx;
			}
	
			.right-menu-name {
				width: 50rpx;
			}
		}
	}
	
	.zhezhao-top {
		position: absolute;
		top: 105rpx;
		left: 0%;
		width: 120%;
		height: 120rpx;
		z-index: 4;
	}
	
	.zhezhao-bottom {
		position: absolute;
		bottom: 105rpx;
		left: 0%;
		width: 120%;
		height: 120rpx;
		z-index: 4;
	}
	
	.zhezhao-left {
		position: absolute;
		top: 0rpx;
		left: 0%;
		height: 100%;
		width: 120rpx;
		background: linear-gradient(to right,
				rgba(239, 240, 244, 1) 0%,
				/* #eff0f4 全不透明 */
				rgba(239, 240, 244, 0) 100%
				/* #eff0f4 完全透明 */
			);
		z-index: 4;
	}
	
	.zhezhao-right {
		position: absolute;
		top: 0rpx;
		right: 0%;
		height: 100%;
		width: 120rpx;
		background: linear-gradient(to left,
				rgba(239, 240, 244, 1) 0%,
				/* #eff0f4 全不透明 */
				rgba(239, 240, 244, 0) 100%
				/* #eff0f4 完全透明 */
			);
		z-index: 4;
	}
	
	.title-card-right {
		position: absolute;
		right: 0;
		top: 0;
		width: 10vw;
		height: 9.4vw;
		border-radius: 2vw;
		background-color: #E4EBF4;
		padding: 1.6vw;
		margin-right: 1.5vw;
		border: 2rpx solid #D2DFF0;
	}
	
	.title-card {
		width: 10vw;
		height: 9vw;
		border-radius: 2vw;
		background-color: #FFFFFF;
		padding: 1.6vw;
		position: relative;
		margin-right: 1.5vw;
	}
	
	.card-bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 3vw;
		display: flex;
	
		.bottom-img {
			width: 1.6vw;
			height: 1.6vw;
			margin-left: 1.8vw;
		}
	
		.bottom-font {
			color: #555555;
			font-size: 1.4vw;
			margin-left: 0.5vw;
		}
	}
	
	.card-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
	
		.card-top-left {
			font-size: 1.8vw;
			font-weight: 600;
		}
	
		.card-top-right {
			width: 2vw;
			height: 2vw;
			border-radius: 50%;
			background-color: #F1F2F3;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.right-img {
				width: 0.8vw;
				height: 0.8vw;
			}
		}
	
		.card-spec {
			position: absolute;
			top: 1.1vw;
			left: 1.6vw;
			width: 1.5vw;
			height: 2vw;
			// background-color: #0076FF;
	
			.line {
				position: absolute;
				inset: 0;
				background: linear-gradient(to bottom right,
						transparent calc(50% - 1px),
						#d5d5d5 50%,
						transparent calc(50% + 1px))
			}
	
			.line-gray {
				position: absolute;
				right: -1.1vw;
				bottom: -0.6vw;
				color: #888888;
				font-size: 1.3vw;
			}
		}
	}
	
	.title-time {
		position: absolute;
		right: 0;
		top: 0;
		width: 15vw;
		height: 9.5vw;
		border-radius: 2vw;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.time-title {
			font-weight: 600;
			font-size: 3vw;
			margin-top: 0.4vw;
		}
	
		.time-date {
			margin-top: 0.2vw;
			font-size: 1.3vw;
			color: #222222;
		}
	}
	
	.blue-button {
		margin-top: 0.5vw;
		width: 7vw;
		height: 2.5vw;
		background: linear-gradient(to bottom, #009DEF, #0076FF);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 28rpx;
		position: relative;
	}
	
	.name-weight {
		font-size: 2vw;
		font-weight: 600;
		margin: 0.2vw 0;
	}
	
	.message-view {
		display: flex;
	
		.message-shu {
			width: 3rpx;
			height: 1.5vw;
			background-color: #bcc1c7;
			margin: 0 0.4vw;
			margin-top: 0.1vw;
		}
	
		.message-img {
			width: 1.5vw;
			height: 1.5vw;
			margin-top: 0.1vw;
		}
	}
	
	.message-bottom {
		margin-top: 0.5vh;
		width: 100%;
		height: 4vh;
		display: flex;
		justify-content: center;
		.bottom-tags {
			background-color: #E7F1FF;
			color: #0084FA;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0 0.4vw;
			border-radius: 0.8vw;
			font-size: 1.2vw;
			margin: 0 0.2vw;
			white-space: nowrap;
			flex-wrap: nowrap;
		}
	}
	
	.fixed-card {
		position: fixed;
		right: 2.4vw;
		top: 5.8vh;
		width: 35vw;
		height: 28vh;
		background-color: rgba(239, 246, 255, 0.95);
		border-radius: 1.5vw;
		border: 1rpx solid #638DFF;
		box-shadow: 0 2rpx 6rpx #A0B9FF;
		display: flex;
		align-items: center;
		transition: all 0.5s ease;
		padding:0 0 0 1.5vw;
		.fixed-card-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right:1.2vw;
			.card-left-img {
				width: 12vw;
				height: 8vw;
			}
		}
	
		.big-time {
			font-weight: 600;
			font-size: 2.8vw;
		}
	
		.icon-people {
			display: flex;
			margin: 0.3vw 0;
			color: #555555;
	
			.people-img {
				width: 1.5vw;
				height: 1.5vw;
				margin-right: 0.3vw;
				margin-top: 0.1vw;
			}
		}
	
		.icon-button {
			display: flex;
			margin-top: 1vw;
			font-size: 1.5vw;
			width: 18.5vw;
			justify-content: space-around;
			.button-left {
				width: 8.5vw;
				height: 3.3vw;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.2vw;
				border: 1rpx solid #C7D2E4;
				color: #333333;
			}
	
			.button-right {
				width: 8.5vw;
				height: 3.3vw;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.2vw;
				border: 1rpx solid #5AAEFF;
				color: #249BFA;
				background: linear-gradient(to bottom, #fff, #D1EAFF);
			}
		}
	}
	
	.left-open {
		position: absolute;
		left: -1.5vw;
		top: 50%;
		transform: translateY(-50%);
		width: 3vw;
		height: 5vw;
		border: 1rpx solid #B8C4DA;
		background-color: #F2F7FD;
		z-index: 999;
		border-radius: 3vw;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.5s ease;
	
		.open-img {
			width: 3vw;
			height: 3vw;
		}
	}
	
	
	
	
	
	.noarray {
		width: 90%;
		height: 100%;
		// background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	
		.noarray-img {
			margin-top: -200rpx;
			width: 350rpx;
			height: 350rpx;
		}
	
	}
	
	.noarray-font {
		margin-top: -60rpx;
		color: #888888;
		font-size: 25rpx;
	}
	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: RGBA(239, 240, 244, 0.55);
	}
	.photowall {
		position: fixed;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80vw;
		height: 83%;
		border-radius: 30rpx;
		background-color: #fff;
		transition: all 0.3s;
		z-index: 9990;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 0 90rpx;
		.photowall-title {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 50rpx;
	
			.photowall-name {
				font-size: 38rpx;
				// font-weight: 600;
			}
	
			.photowall-left {
				color: #888888;
			}
	
			.photowall-right {
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	
		.photowall-other {
			width: 76vw;
			height: 62vh;
			display: flex;
			margin-top: 20rpx;
			flex-wrap: wrap;
			.photowall-other-one {
				width: 22vw;
				height: 430rpx;
				margin-right: 3vw;
				margin-bottom: 0%;
				border-radius: 30rpx;
				display:flex;
				position: relative;
				video{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.jsh0{
		height: 0vw !important;
		padding: 0 2vw !important;
		top: 9.4vw !important;
	}
	.jszl{
		width: 64.5vw;
		height: 44vw;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136,148,167,0.19);
		border-radius: 2.2vw;
		position: absolute;
		top: 11vw;
		right: 0;
		z-index: 200;
		padding: 2vw;
		overflow: hidden;
		.submit{
			width: 100%;
			height: 3.2vw;
			margin-top: 0.4vw;
			padding-right: 2vw;
			display: flex;
			justify-content: flex-end;
			view{
				display: flex;
				justify-content: center;
				align-items: center;
				&:nth-child(1){
					width: 7.1vw;
					height: 3.2vw;
					background: #F8F8F8;
					border-radius: 1.6vw;
					border: 1px solid #E5E5E5;
					font-weight: 400;
					font-size: 1.4vw;
					color: #555555;
				}
				&:nth-child(2){
					width: 7.1vw;
					height: 3.2vw;
					background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
					border-radius: 1.6vw;
					border: 1px solid rgba(3,133,250,0.34);
					font-weight: 400;
					font-size: 1.4vw;
					color: #1083F8;
					margin-left: 0.7vw;
				}
			}
		}
		.scrol{
			width: 110%;
			height: 29.5vw;
			display: flex;
			flex-wrap: wrap;
			
			.cdk{
				width: 6.1vw;
				height: 6.1vw;
				background: #F8F8F8;
				border-radius: 1.6vw;
				margin: 1.5vw 1.5vw 0 0vw;
				display: inline-block;
				border: 1px solid #F8F8F8;
				text-align: center;
				image{
					width: 2vw;
					height: 2vw;
					margin: 1.4vw auto 0vw;
				}
				text{
					display: block;
					text-align: center;
					font-weight: 400;
					font-size: 1.1vw;
					color: #333333;
					width: 100%;
				}
				view{
					text-align: center;
					font-weight: 400;
					font-size: 0.7vw;
					color: #555;
					width: 100%;
				}
			}
			.act{
				background: #F2F8FF;
				border: 1px solid rgba(1,125,233,0.43);
				text{
					color: #017DE9;
				}
			}
		}
		.spiw{
			width: 14vw;
			height: 2vw;
			display: flex;
			justify-content: space-around;
			margin-top: 2.5vw;
			view{
				font-weight: 400;
				font-size: 1.3vw;
				color: #555555;
				position: relative;
				line-height: 1.5vw;
			}
			.act{
				color: #222222 !important;
				font-weight: 500;
			}
			.act::after{
				width: 50%;
				height: 0.2vw;
				background: #0089FE;
				border-radius: 0.1vw;
				content: '';
				position: absolute;
				bottom: 0;
				left: 25%;
			}
		}
		.tittop{
			height: 2vw;
			font-weight: 400;
			font-size: 1.4vw;
			color: #333333;
			display: flex;
			align-items: center;
			view{
				width: 0.4vw;
				height: 1.2vw;
				background: #017DE9;
				border-radius: 0.2vw;
				margin-right: 0.8vw;
			}
		}
	}
</style>
