<template>
	<view>
		<view class="swipeservwe">
			<view class="swper" v-if="plsbuy.length==0">
				<view class="photo-father" style="margin-top: 200rpx;">
					<image class="big-img" style="width: 250rpx;height: 250rpx;margin-top: 0;"
						:src="`/static/index/noorder1.png`" mode="aspectFill" />
					<view class="big-img-text">
						暂无服务指令
					</view>
				</view>
			</view>
			<view class="btn les" @click="swip(-1)" v-if="plsbuy.length>1">
				<image class="pao-img" :src="`/static/index/newindex/states/ris.png`"
					style="transform: rotate(180deg);" />
			</view>
			<view class="btn ris" @click="swip(1)" v-if="plsbuy.length>1">
				<image class="pao-img" :src="`/static/index/newindex/states/ris.png`" />
			</view>
			<view class="bots" v-if="plsbuy.length>1">
				<view v-for="(v,i) in plsbuy" :key='i' :class="current==i?'dot':''" 
					@click="change({'detail':{'current':i}})">
					<view class="bots-red" v-if="v?.chaoshitime"></view>
				</view>
				<!-- :style="v?.chaoshitime?'background:red':''" -->
			</view>
			<swiper class="swiper" :circular="true" :indicator-dots="false" :autoplay="autoplay" :interval="3000"
				:duration="500" :current="current2" @change="change">
				<swiper-item v-for="(indexmessage,i) in plsbuy" :key="i" class="swper">
					<view class="photo-father">
						<view class="juzhong">
							<donghua :width="`1200rpx`" :height="`600rpx`" :links="blueArray" :playing="current==i"
								:loop="true" :interval="500" />
						</view>
						<view class="timedjs" v-if="current==i&&indexmessage?.izStart=='Y'">
							<text>服务倒计时</text>
							<timeing v-if="indexmessage?.serviceDuration !==`0`" :initTime="djstinme"
								:timeoutDuration="Number(indexmessage.timeoutDuration)*60" @timeend="timeend"></timeing>
							<view class="no-time-all" v-else>
								<view class="no-time-view">
									<image class="no-time" src="/static/index/newindex/states/always.png" />
									<view class="no-text">
										MIN
									</view>
								</view>
								<text style="color: #959595;font-size: 1.9vw;padding: 0 5rpx;">:</text>
								<view class="no-time-view">
									<image class="no-time" src="/static/index/newindex/states/always.png" />
									<view class="no-text">
										SEC
									</view>
								</view>
							</view>

						</view>
						<view class="weight-time">
							<view>
								{{ indexmessage?.startTime.slice(11, 16)  }}
								<text style="font-size: 1.8vw;font-weight: 500;" v-if="indexmessage?.serviceDuration">
									|&nbsp;
									{{indexmessage?.serviceDuration!==`0` ?indexmessage?.serviceDuration: `∞`}}分钟
								</text>
							</view>
							<view style="height: 4vw;"> </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'&&!indexmessage.flag"
							@click="indexmessage.flag = true">
							<image :src="`/static/zlb.png`" :style=" 'width: 420rpx' " mode="aspectFill" />
						</view>

						<view class="cardbox"
							v-if="indexmessage.izPackage=='Y'&&indexmessage?.izStart=='Y'||indexmessage.flag">
							<scroll-view scroll-y="true" class="scrollcard" @touchmove.stop>
								<view class="itemcard" v-for="(v,s) in indexmessage.servebao"
									:class="{'act':v.flag,'last':v.last}" :key='s'
									@click="zldex(v,indexmessage.servebao,s)">
									<view class="brcard">
										<view class="bgs" v-if="v.last">
											<image src="/static/index/newtarget.png" mode=""></image>
										</view>
									</view>

									<image
										:src="!v.flag? (v.immediateFile?serverUrl + v.immediateFile:'/static/logo.png'): ( v.immediateFileFocus?serverUrl + v.immediateFileFocus:'/static/logotarget.png')" />
									<text>{{v.match[0]}}</text>
									<view v-if="v.match[1]" style="position: relative;z-index: 2;">({{v.match[1]}})
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="big-img" v-if="indexmessage.izPackage=='N'&&indexmessage?.previewFile ">
							<image
								:style="!indexmessage?.previewFile?'width: 420rpx':' width:550rpx;height:550rpx;marginTop:-60rpx'"
								:src="indexmessage?.previewFile? serverUrl + indexmessage?.previewFile: `/static/index/noorder1.png`"
								mode="heightFix" />
						</view>
						<view class="big-img" v-if="indexmessage.izPackage=='N'&&!indexmessage?.previewFile ">
							<image :style="!indexmessage?.previewFile?'width: 320rpx;height: 320rpx;':' '"
								:src="indexmessage?.previewFile? serverUrl + indexmessage?.previewFile: `/static/index/noorder1.png`"
								mode="heightFix" />
						</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 @click="errmsgclk(0,1,indexmessage)">
								<view class="left-ball" :style="indexmessage?.serviceContent!=''?' ':'opacity: 0.4'">
									<image class="left-menu-img"
										:src="'/static/index/newindex/leftmenu/left'+0+'.png'" />
								</view>
							</view>
							<view @click="errmsgclk(1,1,indexmessage)">
								<view class="left-ball"
									:style="indexmessage?.mp3File!=''&&indexmessage.izPackage!='Y'?' ':'opacity: 0.4'">
									<image class="left-menu-img"
										:src="'/static/index/newindex/leftmenu/left'+1+'.png'" />
								</view>
							</view>
							<view @click="errmsgclk(2,1,indexmessage)">
								<view class="left-ball"
									:style="indexmessage?.mp4File!=''&&indexmessage.izPackage!='Y'?' ':'opacity: 0.4'">
									<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" @click="errmsgclk(item,2,indexmessage)">
								<view class="left-ball" :style="indexmessage?.izStart=='Y'?' ':'opacity: 0.4'">
									<image class="left-menu-img"
										:src="'/static/index/newindex/leftmenu/left'+item+'.png'" />
								</view>
							</view>
						</view>
						<view class="right-menu">
							<view class="right-scroll">
								<view style="margin:1.5vw 0;width: 4vw;margin-left: 20rpx;"
									@click="zhixing(1,indexmessage)">
									<view class="white-circle" :style="indexmessage?.izStart=='Y'?'opacity: 0.4' : ''">
										<image class="right-menu-img" :src="'/static/index/newindex/rightmenu/1.png'" />
										<view class="right-menu-name">
											转单执行
										</view>
									</view>
								</view>
								<view style="margin:1.5vw 0;width:4vw;margin-left: 20rpx;"
									@click="zhixing(2,indexmessage)">
									<view class="white-circle" :style="indexmessage?.izStart=='Y'?'opacity: 0.4' : ''">
										<image class="right-menu-img" :src="'/static/index/newindex/rightmenu/2.png'" />
										<view class="right-menu-name">
											协助执行
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
				</swiper-item>
			</swiper>
		</view>
		<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 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="v.flag?{borderColor: `rgba(1, 125, 233, 0.3)`}:''">
						<image
							style="width: 5.5vw;height: 5.5vw;border-radius: 50%;margin: 0 auto;margin-bottom: 1.5vw;margin-top: 2.2vw;"
							:src="v.headPath?serverpicUrl+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>
							{{ Number(v.weight).toFixed(1) }}Kg
						</view>

					</view>
				</view>
			</scroll-view>
		</view>

		<view class="mengban" v-if="topbuttontarget>0" @click="topbuttontarget=0"></view>
		<view class="photowall" v-show="topbuttontarget>0" :style="donghuaopo?{opacity:1}:{opacity:0}">
			<view class="photowall-title">
				<view class="photowall-name">
					{{ topbuttontarget==1?`照片`:`录像` }}
				</view>
			</view>
			<scroll-view scroll-y="true" class="photowall-other" style="height: 65vh;" scroll-with-animation enable-flex
				v-if="topbuttontarget>0">
				<view class="photowall-other">
					<view class="photowall-other-one" v-for="(item,index) in ilanarr" :key="index"
						@click="previewImage(item,index,ilanarr)">
						<view v-if="topbuttontarget==1"
							style="width: 100%;height: 100%;border-radius: 30rpx;position: relative;">
							<image style="width: 100%;height: 100%;border-radius: 20rpx;"
								:src="item?serverpicUrl + item:'/static/ceshiyaoshan.png'" mode="aspectFill"
								:lazy-load="true" />
							<view @click.stop="open=1;del(item,index)" class="del"
								v-if="topbuttontarget>0&&(listobj?.izStart=='Y'&& listobj?.izFinish=='N')">
								<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill" style="width: 1.4vw;
						height: 1.4vw;"></image>
							</view>
						</view>
						<view v-if="topbuttontarget==2"
							style="width: 100%;height: 100%;border-radius: 30rpx ;position: relative;">
							<video style="width: 100%;height: 100%;border-radius: 30rpx;" :id="'myVideo'+index"
								:src="servervideoUrl+item" direction="180" mode="aspectFill"></video>
							<view @click.stop="ilanarr.splice(index,1)"
								v-if="topbuttontarget>0&&(listobj?.izStart=='Y'&& listobj?.izFinish=='N')" class="del">
								<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill" style="width: 1.4vw;
						height: 1.4vw;"></image>
							</view>
						</view>
					</view>
					<view class="photowall-other-one" style="border-color: #78B1EB;"
						v-if="topbuttontarget>0&&(listobj?.izStart=='Y'&& listobj?.izFinish=='N')">
						<view class="uplods" @click="uplod(1)">
							<view class="uplods-info">
								<image style="width: 70rpx;height: 70rpx;margin-bottom: 5rpx;"
									src="/static/index/warehouse/procurement/picking/addphoto.png" />
								<view style="color: #78B1EB;">
									点击上传{{topbuttontarget==1?'图片':'录像'}}
								</view>
							</view>

						</view>
					</view>
				</view>
			</scroll-view>
			<view style="position: absolute;right: 2vw;bottom: 0.8vw;height: 4vw;"
				v-if="topbuttontarget>0&&(listobj?.izStart=='Y'&& listobj?.izFinish=='N')">
				<view class="subnt" @click="submit">确定</view>

			</view>
		</view>
		<tanchuang :show="open==1" font="是否删除此图片" @back="open = 0" @right="del1()"> </tanchuang>
		<errorshow :show="openerror" :font="errmsg" @close="openerror=false" style="left: 44%;" />
		<severcard ref="severcards"></severcard>
	</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 './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 font = ref('')
	const donghuaopo = ref(false);
	const topbuttontarget = ref(0);
	const ilanarr = ref([]);
	const listobj = ref({});

	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(-1)
	const current2 = ref(0)
	const autoplay = ref(false)
	const severcards = ref<InstanceType<typeof ChildComponent>>()
	const init = (e) => {

		firstgetqueryCgdList(e);
		setTimeout(() => {
			severcards.value.firstgetqueryCgdList()
		}, 120)
	}
	defineExpose({
		init
	})
	const change = (e) => {
		// return
		current.value = e.detail.current;
		let a = e.detail.current;
		plsbuy.value.forEach((v, i) => {
			if (i != a && v.izPackage == 'Y') {
				v.flag = false
			}
		})
		if (plsbuy.value[a]?.izStart == 'Y' && plsbuy.value[a]?.izFinish == 'N') {
			timeacde()
		}
	}
	const djstinme = ref(0)
	const timeacde = () => {
		let obj = plsbuy.value[current.value];
		let timestampMs = new Date(obj.endTime).getTime();
		let times = new Date().getTime();
		let djs = timestampMs - times;

		djstinme.value = Math.round(djs / 1000);
		if (djstinme.value < 0) {
			plsbuy.value[current.value].chaoshitime = true
		}
	}
	const timeend = () => {
		// 结束超时
		plsbuy.value.splice(current.value, 1)
		firstgetqueryCgdList(form.nuId)
	}

	const swip = (e) => {
		if (current.value == 0 && e == -1) {
			current.value = plsbuy.value.length - 1;
			current2.value = current.value
			return
		}
		if (current.value == plsbuy.value.length - 1 && e == 1) {
			current.value = 0;
			current2.value = current.value
			return
		}
		current.value += e;
		current2.value = current.value

	}
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		employeeId: uni.getStorageSync('userInfo').employeesId,
		nuId: uni.getStorageSync('nuId'),
		workType: 5
	})
	onMounted(() => {
		setTimeout(() => {
			current.value = 0;
		}, 500)
	})
	const zdxzdex = ref(0)
	const zdxzarr = ref(0)
	const zhixing = (e, indexmessage) => {
		if (indexmessage?.izStart == 'Y') {
			errmsg.value = (e == 1 ? "服务中不能转单执行！" : '服务中不能协助执行！')
			openerror.value = true
			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 flag = ref(false)
	const zdwu = (e, k) => {
		if (zdxzdex.value == 1) {
			e.flag = !e.flag;
			zdxzarr.value.forEach((item, i) => {
				if (i != k) {
					item.flag = false
				}
			})
			flag.value = e.flag
		}
		if (zdxzdex.value == 2) {
			e.flag = !e.flag;
			let arr = [];
			zdxzarr.value.forEach((item, i) => {
				if (item.flag) {
					arr.push(1)
				}
			})
			if (arr.length == 0) {
				flag.value = false;
			} else {
				flag.value = true;
			}
		}
	}
	const zhixingsub = () => {
		zxzd.value = zdxzdex.value
		if (zdxzdex.value == 1) {
			zdcont.value = "确认转单执行？"
		}
		if (zdxzdex.value == 2) {
			zdcont.value = "确认协助执行？"
		}
	}
	const zxzd = ref(0);
	const zdcont = ref('');
	const tijiaozx = () => {
		if (zxzd.value == 1) {
			let s = {}
			zdxzarr.value.forEach((item, i) => {
				if (item.flag) {
					s = item;
				}
			})
			let obj = {
				mainId: indexmessage.value.mainId,
				employeeId: s.id,
				employeeName: s.name,
				beforeBy: indexmessage.value.employeeId,
				beforeByName: indexmessage.value.employeeName
			}
			let nuId = uni.getStorageSync('nuId');
			transferOrder(obj).then(res => {
				if (res.success) {
					firstgetqueryCgdList(nuId);
					flag.value = false;
					zxzd.value = 0;
					zdxzdex.value = 0;
				}
			})
		}
		if (zxzd.value == 2) {
			let userinfo = uni.getStorageSync('userInfo')
			let id = userinfo.id + ',';
			let name = userinfo.realname + ',';
			zdxzarr.value.forEach((item, i) => {
				if (item.flag) {
					id += item.id + ','
					name += item.name + ','
				}
			})
			id = id.slice(0, -1);
			name = name.slice(0, -1);
			let obj = {
				mainId: indexmessage.value.mainId,
				optIds: id,
				optNames: name,
				beforeBy: indexmessage.value.employeeId,
				beforeByName: indexmessage.value.employeeName
			}
			assistOrder(obj).then(res => {
				if (res.success) {
					firstgetqueryCgdList(form.nuId)
					// clickLeftMenu(0,{id:indexmessage.value.mainId})
					flag.value = false;
					zxzd.value = 0;
					zdxzdex.value = 0;
				}
			})
		}
	}
	function splitString(str) {
		let result = [];
		let remainingStr = str;
		let regex = /([^（(]*)[（(]([^）)]+)[）)]/;
		while (regex.test(remainingStr)) {
			let match = remainingStr.match(regex);
			if (match) {
				// 添加括号前的部分（去掉空白）
				if (match[1]?.trim()) {
					result.push(match[1].trim());
				}
				if (match[2]?.trim()) {
					result.push(match[2].trim());
				}
				remainingStr = remainingStr.replace(match[0], '')?.trim();
			}
		}
		if (remainingStr?.trim()) {
			result.push(remainingStr?.trim());
		}
		return result;
	}
	const clickLeftMenu = (index : any, item : object) => {
		queryOrderInfoList({ mainId: item.id }).then(res => {
			if (res.result.length > 0) {
				res.result.forEach((item, i) => {
					item.flag = false;
					item.match = splitString(item.directiveName)
				})
				plsbuy.value[index].servebao = res.result
			}
		})
	}
	// const indexmessage = ref({});
	const firstgetqueryCgdList = (nuId) => {
		form.nuId = nuId;
		// console.log("wtf")
		queryOrderList(form).then(res => {
			// console.log(`这啥啊啊啊啊啊`,form, res)
			if (res.result.records.length > 0) {
				res.result.records.forEach((item, l) => {
					item.flag = false;
					item.servebao = [];
					let timestampMs = new Date(item.endTime).getTime();
					let times = new Date().getTime();
					let djs = timestampMs - times;
					if (djs < 0) {
						item.chaoshitime = true
					}
					if (item.izPackage == 'Y') {
						clickLeftMenu(l, item)
					}
				})
				plsbuy.value = res.result.records;
				change({ detail: { current: current.value } })
			} 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 pici = ref(0);
	const del = (v, i) => {
		console.log("?????", i)
		pici.value = i;
	}
	const del1 = () => {
		ilanarr.value.splice(pici.value, 1);
		open.value = 0
	}
	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 cshigb = () => {
		let obj = plsbuy.value[current.value];
		// console.log("啥啊",current.value)
		let timestampMs = new Date(obj.endTime).getTime();
		let times = new Date().getTime();
		let djs = timestampMs - times;
		// let timeendamp = timestampMs + (Number(plsbuy.value[current.value].timeoutDuration)*60);
		// console.log(timestampMs, '结束时间戳')
		// console.log(times, '当前时间戳')
		// console.log(Math.round(djs / 1000), '倒计时时间戳')
		djstinme.value = Math.round(djs / 1000);
		let timeoutDuration = Number(obj.timeoutDuration) * 60
		// console.log("看看走哪了",times > timestampMs + (timeoutDuration * 1000))
		if (times > timestampMs + (timeoutDuration * 1000)) {
			return false
		} else {
			return true
		}

	}
	const start = (v) => {
		if (!cshigb()) {

			errmsg.value = "服务已超时，不能开始服务！"
			openerror.value = true;
			firstgetqueryCgdList(form.nuId);
			return
		}
		if (v.izStart != 'N') { return }
		startOrder({ id: v.id }).then(res => {
			console.log(res)
			if (res.success) {
				v.izStart = "Y";
				severcards.value.firstgetqueryCgdList()
				timeacde()
			} else {


			}
		})
	}
	const endobj = ref({})
	const end = (v) => {
		// console.log("走着了吗?2",v.izStart,v.izFinish)
		if (!cshigb()) {

			errmsg.value = "服务已超时，不能结束服务指令！"
			// console.log("走着了吗?1")
			openerror.value = true;
			firstgetqueryCgdList(form.nuId);

			return
		}
		if (v.izStart == 'Y' && v.izFinish == 'N') {
			// console.log("aaaaa",v)
			endobj.value = v;
			open.value = 3;
		} else {
			errmsg.value = "服务尚未开始！"
			openerror.value = true;
		}

	}
	const ends = () => {
		// console.log("看看传的", { id: endobj.value.id })
		endOrder({ id: endobj.value.id }).then(res => {
			// console.log(res)
			if (res.success) {
				open.value = 0;
				endobj.value = {};
				severcards.value.firstgetqueryCgdList()
				firstgetqueryCgdList(uni.getStorageSync('nuId'))
			} else {

			}
		})

	}
	const errmsg = ref('')
	const openerror = ref(false);
	const errmsgclk = (e, k, indexmessage) => {
		// font.value = '敬请期待~'
		// open.value = 3
		// return
		// 打包过不了校验
		// console.log(e, k, indexmessage)
		if (k == 1) {
			// if(indexmessage.izPackage=='Y'&&e==0){

			// 	if(indexmessage.flag||indexmessage.izStart == 'Y'){
			// 			let last = indexmessage.servebao.find(item => item.last === true);
			// 			console.log(last)
			// 			if(!!last){
			// 				errmsg.value = last?.serviceContent==''?'暂无数据':last?.serviceContent
			// 				openerror.value = true;
			// 			}else{
			// 				errmsg.value = indexmessage?.serviceContent
			// 				openerror.value = true;
			// 			}
			// 	}else{
			// 		errmsg.value = indexmessage?.serviceContent
			// 		openerror.value = true;
			// 	}

			// }

			// if (indexmessage?.izStart == 'Y'&&indexmessage.izPackage!='Y') {
			// 	switch (e) {
			// 		case 0:
			// 			if (indexmessage?.serviceContent == '') { return }
			// 			errmsg.value = indexmessage?.serviceContent
			// 			break;
			// 		case 1:
			// 			if (indexmessage?.mp3File == '') { return }
			// 			errmsg.value = indexmessage?.mp3File
			// 			break;
			// 		case 2:
			// 			if (indexmessage?.mp4File == '') { return }
			// 			errmsg.value = indexmessage?.mp4File
			// 			break;

			// 		default:
			// 			break;
			// 	}
			// 	openerror.value = true;
			// }
		} else {
			if (indexmessage?.izStart == 'Y') {

				switch (e) {
					case 3:
						ysptp(indexmessage, 0, 1)
						break;
					case 4:
						ysptp(indexmessage, 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;
		// console.log(listobj.value)
		// console.log(topbuttontarget.value)
	}
	const fwzlindex = ref(0);
	const fwzldex = ref(-1);
	const fwzlarr = ref(0);
	const fwzlbobj = ref({})
	const zldex = (e, f, k) => {
		e.flag = !e.flag
		if (e.flag) {
			e.last = true;
			f.forEach((item, i) => {
				if (k != i) {
					item.last = false;
				}
			})
		} else {
			if (e.last == false) { return }
			e.last = false;
			let arr = []
			f.forEach((item, i) => {
				if (item.flag) {
					arr.push(i)
				}
			})
			if (arr.length == 0) {

			} else {
				f[arr[arr.length - 1]].last = true;
				fwzlbobj.value = f[arr.length - 1]
			}
		}

	}

	const base = genPaths(
		'/static/index/newindex/curve',
		'curve_',
		9,
		'png',
		1,
		false
	)
	const blueArray = ref([
		...base,
		...[...base].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">
	.del {
		width: 2.5vw;
		height: 2.5vw;
		z-index: 20;
		position: absolute;
		right: -2vw;
		top: -2vw;
		background: #f6f6f6;
		display: flex;
		justify-content: center;
		border-radius: 50%;
		align-items: center;
	}

	.uplods {
		width: 100%;
		height: 100%;
		top: 0vw;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.uplods-info {
			width: 90%;
			height: 85%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			background-color: #fafdff;
			border-radius: 35rpx;
		}
	}

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

	.swipeservwe {
		width: 65.35vw;
		height: 47.2vw;
		position: relative;
		background-color: #fff;
		border-radius: 1.6vw;
		margin-top: 0.5vw;
		padding: 3vw 0 0;

		.bots {
			width: 60%;
			position: absolute;
			height: 30rpx;
			bottom: 2.2vw;
			left: 20%;
			display: flex;
			justify-content: center;

			view {
				width: 1.3vw;
				height: 0.6vw;
				background: #DCDCDC;
				border-radius: 0.2vw;
				margin: 0.7vw;
				position: relative;
				.bots-red{
					position: absolute;
					left: 0.2vw;
					bottom: -0.4vw;
					background-color: red;
					width: 0.6vw;
					height: 0.6vw;
					border-radius: 50%;
				}
			}

			.dot {
				background: #0193F4;
			}
		}

		.btn {
			width: 2.4vw;
			height: 2.4vw;
			background: #F8F8F8;
			border-radius: 50%;
			position: absolute;
			top: 36vh;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;

			image {
				width: 60%;
				height: 60%;
			}
		}

		.les {
			left: 1.5vw;
		}

		.ris {
			right: 1.5vw;
		}



	}

	.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: 5.2vw;
			top: 0vw;
			display: flex;
			flex-direction: column;
			align-items: center;

			>text {
				font-weight: 400;
				font-size: 1.3vw;
				color: #666666;
			}
		}
	}

	.juzhong {
		position: absolute;
		top: 5%;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: -1;
		opacity: 0.3;
	}

	.cardbox {
		width: 40vw;
		height: 30vh;
		position: relative;
		top: -3vh;
		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: 30vh;
			position: relative;

			.itemcard {
				width: 11.2vw;
				height: 8vw;
				margin: 1.2vw 1.5vw 0 0vw;
				display: inline-block;
				text-align: center;
				position: relative;
				overflow: hidden;

				image {
					width: 3.3vw;
					height: 3.3vw;
					margin: 0.8vw auto 0vw;
					position: relative;
					z-index: 2;
				}

				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;
					position: relative;
					z-index: 2;
				}

				view {
					text-align: center;
					font-weight: 400;
					font-size: 1vw;
					color: #555;
					width: 100%;
				}

			}

			.brcard {
				width: 11.2vw;
				height: 8vw;
				border-radius: 1.6vw;
				border: 2rpx solid #DCDCDC;
				position: absolute;
				top: 0vw;
				bottom: 0vw;
				background: rgba(255, 255, 255, 0.5);
				z-index: 0;
			}

			.bgs {
				width: 11.2vw;
				height: 8vw;
				position: absolute;
				top: -1.05vw;
				left: -0.15vw;

				image {
					width: 103%;
					height: 105%;
				}
			}

			.act {
				.brcard {
					background: rgba(255, 255, 255, 0.6);
					border: 2rpx dashed #0089FE;
				}

				text,
				view {
					color: #017DE9;
				}
			}
		}
	}

	.weight-time {
		font-weight: 800;
		font-size: 3.4vw;
		margin-top: 2vw;
		position: relative;
		margin-left: -50rpx;
	}

	.big-img {
		height: 420rpx;
		z-index: 100;
		margin-top: -50rpx;
		// background-color: red;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.big-img-text {
		text-align: center;
		font-size: 32rpx;
		color: #838383;
	}

	.server-name {
		font-size: 35rpx;
		margin-right: 10rpx;
		font-weight: 600;
		margin-top: 1vw;
		z-index: 1;
	}

	.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: -12rpx;
		right: -99rpx;
		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: 37%;
		left: 5.3vw;
		transform: translateY(-50%);

		>view {
			margin: 0.8vw 0;
		}
	}

	.zoom {
		transform: scale(1.2);
		transform-origin: bottom left;
		transition: transform 1s ease;
	}

	.left-ball {
		width: 3.6vw;
		height: 3.6vw;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F1F2F3;


		.left-menu-img {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.right-menu {
		position: absolute;
		top: 40%;
		right: 6vw;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 140rpx;

		.top-img {
			width: 4.9vw;
			height: 4.9vw;
			padding: 0 50rpx;
		}

		.right-scroll {
			width: 100%;
			height: 400rpx;
		}

		.white-circle {
			height: 7.2vw;
			border-radius: 60rpx;
			background: #F7F7F9;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			text-align: center;
			font-size: 1vw;
			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: 1.6vw;
		font-weight: 600;
		// margin: 0.2vw 0;
		margin-bottom: 1.2vw;
		// margin-top: 0.2vw;
	}

	.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: 50%;
		left: 49.5%;
		transform: translate(-50%, -50%);
		width: 79.5vw;
		height: 83%;
		border-radius: 40rpx;
		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: 20rpx;

			.photowall-name {
				font-size: 35rpx;
				// 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: 300rpx;
				margin-right: 2.3vw;
				margin-bottom: 2.3vw;
				border-radius: 35rpx;
				display: flex;
				position: relative;
				border: 2rpx solid #dedede;
				padding: 1vw;
				// background-color: #f9f9f9;


				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: 35rpx;
			color: #333333;
			display: flex;
			align-items: center;

			view {
				width: 0.4vw;
				height: 1.2vw;
				background: #017DE9;
				border-radius: 0.2vw;
				margin-right: 0.8vw;
			}
		}
	}

	.no-time-all {
		display: flex;
		align-items: center;

		.no-time-view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 110rpx;
			height: 100rpx;
			background-color: #eaeaea;
			position: relative;
			border-radius: 10rpx;

			.no-text {
				position: absolute;
				bottom: 2rpx;
				left: 50%;
				transform: translateX(-50%);
				// font-size: 23rpx;
				font-size: 0.7vw;
				font-weight: 600;
				// color: #666;
			}

			.no-time {
				width: 70%;
				height: 70%;
			}
		}
	}

	.swipeservwe-bgc {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.bottom-title {
		border: 2px solid #f8f8f8;
		width: 16.5vw;
		margin-right: 1.6vw;
		;
		margin-bottom: 1.6vw;
		height: 17vw;
		border-radius: 1.1vw;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>