动画效果实现拖动替换

清疚 2023-05-21 15:17 51阅读 0赞

![20200417150926328.gif][]

<template>
    	<view class="page">
    		
    		<view class="navigate_top">
    			<view class="indextop_iconleft font" @click="backpage"><text></text></view>
    			<view class="navigate_top_title">
    				<text>轮牌</text>
    				
    			</view>
    		</view>
    		
    		
    		<view class="tui-modal-class tui-modal-box" :class="[show?'tui-modal-show':'']">
    			<view class="tui-modalBtn-box" :class="[button.length>2?'tui-flex-column':'']">
    				<block v-for="(item,index) in button" :key="index">
    					<button class="tui-modal-btn" :class="['tui-'+(item.type || 'primary')+(item.plain?'-outline':''),button.length!=2?'tui-btn-width tui-mbtm':'']"
    					 :hover-class="'tui-'+(item.plain?'outline':(item.type || 'primary'))+'-hover'" :data-index="index" @tap="handleClick" :data-text="item.text">{
       {item.text || "确定"}}</button>
    				</block>
    			</view>
    		</view>
    		<view class="tui-modal-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickCancel"></view>
    		<view class="" style="margin-top: 80px;">
    		 <scroll-view scroll-y="true" :style="{ height: windowHeight + 'px', 'background-color': '#fff' }">
    		 	<view class="container flex_row">
    		 		
    		 		<view class="nav_left">
    		 			<scroll-view scroll-y="true" style="height: 100%;">
    		 				<view class="" style="background-color: #f1f1f1;height: 20px;width: 100%;"></view>
    		 				<view v-for="(item, index) in cateItems" :key="index" style="position: relative;">
    		 					<view @click="tabtap(index, item.postGradeId)" :id="index" class="nav_left_items nowrap" :class="{ active: index == curIndex }">
    		 						{
       { item.wcaName }}
    		 					</view>
    		 					<view class="booklabel" v-if="item.isAid == 1">助理</view>
    		 				</view>
    		 			</scroll-view>
    		 		</view>
    		 		
    		 		<view class="nav_right_right">
    		 			<view class="cu-list menu-avatar" style="width: 80%;margin: 0 auto;height: 100%;">
    		 				<scroll-view scroll-y="true" style="height: 80%;">
    		 					<view
    		 						id="id"
    		 						class="cu-item"
    		 						v-for="(ite, index) in cateItemslist[curIndex].children"
    		 						:key="index"
    		 						style="margin-top: 15px;"
    		 						draggable="true"
    		 						:data-index="index"
    		 						@touchstart="start"
    		 						@touchmove.stop.prevent="move"
    		 						@touchend="stop"
    		 					>
    		 						<view
    		 							style="height: 70px;width: 90%;margin: 0 auto; position: relative;border-radius:5px;"
    		 							:class="[{ o1: ite.children_id == 1 }, { o2: ite.children_id == 2 }, { o3: ite.children_id == 3 }, { o4: ite.children_id == 4 }]"
    		 							:data-index="index"
    		 							@click="show4(index)"
    		 						>
    		 							<view class="font deleteicon" @click.stop="deleteit(ite.orderCardsId, index)">
    		 								
    		 								
    		 							</view>
    		 							
    		 							<view class="staffimage"><image :src="ite.src" mode="aspectFill"></image></view>
    		 							<view class="">
    		 								<view class="text-white content11">{
       { ite.storename }}</view>
    		 								<view class="" v-if="ite.children_id == 4 || ite.children_id == 2 || ite.children_id == 3">
    		 									<view class="uptime" v-if="ite.attendanceState == 0">
    		 										<view class="" v-if="ite.uptime == undefined">上班时间:暂未排班</view>
    		 										<view class="" v-else>上班时间:{
       { ite.uptime }}</view>
    		 									</view>
    		 									<view class="uptime" v-if="ite.attendanceState == 1">
    		 										<view class="" v-if="ite.uptime == undefined">下班时间:暂未排班</view>
    		 										<view class="" v-else>下班时间:{
       { ite.uptime }}</view>
    		 									</view>
    		 								</view>
    		 
    		 								<view class="action11">
    		 									<view class="text-white text-xs">{
       { ite.status }}</view>
    		 								</view>
    		 						</view>
    		 					</view>
    							</view>
    		 				</scroll-view>
    		 
    		 				<view
    		 					style="height: 70px;width: 80%;background-color:rgba(136,135,136,0.6) ;border-radius:5px;line-height: 70px;margin: 15px auto 0;"
    		 					@click="newStaff"
    		 				>
    		 					<view style="text-align: center; color: #fff;font-size: 16px;">新增员工</view>
    		 				</view>
    		 				
    		 			</view>
    		 		</view>
    				
    		 	</view>
    		 </scroll-view>
    		</view>
    		 
    		 <view v-if="showMoveImage">
    		 	<view
    		 		id="getheight"
    		 		style="height:70px;width:50%;position: absolute;border-radius:5px;padding-top:10px;"
    		 		:class="[
    		 			{ o1: moveImagePath.children_id == 1 },
    		 			{ o2: moveImagePath.children_id == 2 },
    		 			{ o3: moveImagePath.children_id == 3 },
    		 			{ o4: moveImagePath.children_id == 4 }
    		 		]"
    		 		:data-index="index"
    		 		:style="{ left: moveLeft + 'px', top: moveTop + 'px' }"
    		 		class="flex_row"
    		 	>
    		 		<view class="staffimage"><image :src="moveImagePath.src" mode="aspectFill"></image></view>
    		 		<view class="">
    		 			<view class="text-white content11">{
       { moveImagePath.storename }}</view>
    		 			<view class="" v-if="moveImagePath.children_id == 4 || moveImagePath.children_id == 2 || moveImagePath.children_id == 3">
    		 				<view class="uptime" v-if="moveImagePath.attendanceState == 0">
    		 					<view class="" v-if="moveImagePath.uptime == undefined">上班时间:暂未排班</view>
    		 					<view class="" v-else>上班时间:{
       { moveImagePath.uptime }}</view>
    		 				</view>
    		 				<view class="uptime" v-if="moveImagePath.attendanceState == 1">
    		 					<view class="" v-if="moveImagePath.uptime == undefined">下班时间:暂未排班</view>
    		 					<view class="" v-else>下班时间:{
       { moveImagePath.uptime }}</view>
    		 				</view>
    		 				
    		 			</view>
    		 		</view>
    		 		<view class="action11">
    		 			<view class="text-white text-xs">{
       { moveImagePath.status }}</view>
    		 		</view>
    		 	</view>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    
    export default {
    	
    	data() {
    		return {
    			imageBasePos: {
    				x0: -1,
    				y0: -1,
    				w: -1,
    				h: -1
    			},
    			windowHeight: '',
    			curentitem:0,
    			showMoveImage: false,
    			moveImagePath: '',
    			moveLeft: 0,
    			moveTop: 0,
    			deltaLeft: 0,
    			deltaTop: 0,
    			stopleft: 0,
    			stoptop: 0,
    			dragIndex: null,
    			targetImageIndex: null,
    			curIndex: 0,
    			cuecityIndex: 0,
    			cuestoreIndex: 0,
    			color1: ' red;',
    			modalName: null,
    			skin: false,
    			index: 1,
    			showMask: false,
    			cateItems: [],
    			time: '',
    			cateItemslist: [],
    			show: false,
    			button: [
    				{
    					text: '休息中',
    					type: 'gray',
    					plain: true
    				},
    				{
    					text: '候客中',
    					type: 'green',
    					plain: true
    				},
    				{
    					text: '工作中',
    					type: 'red',
    					plain: true
    				},
    				{
    					text: '外出中',
    					type: 'blue',
    					plain: true
    				}
    			],
    
    		};
    	},
    	computed: {
    		posMoveImageLeft: function() {
    			return this.moveLeft + 'px';
    		},
    		posMoveImageTop: function() {
    			return this.moveTop + 'px';
    		},
    		isShowDel: function() {
    			if (this.enableDel === false) {
    				return false;
    			} else {
    				return true;
    			}
    		},
    		isShowAdd: function() {
    			if (this.enableAdd === false) {
    				return false;
    			}
    	
    			if (this.limit && this.cateItems[this.curIndex].children.length >= this.limit) {
    				return false;
    			}
    	
    			return true;
    		},
    		isDragable: function() {
    			if (this.enableDrag === false) {
    				return false;
    			} else {
    				return true;
    			}
    		}
    	},
    	onShow() {
    		this.moveLeft = 0
    		this.cateItemslist = [];
    		var date = new Date();
    		//时间转换·
    		var y = date.getFullYear();
    		var m = date.getMonth() + 1;
    		m = m < 10 ? '0' + m : m;
    		var d = date.getDate();
    		d = d < 10 ? '0' + d : d;
    		this.time = y + '-' + m + '-' + d;
    		// this.time =  '2019-11-04';
    		var opts = {
    			url: '/app/wheelCard/list',
    			method: 'GET',
    			header: 'json'
    		};
    		var param = {
    			storeId: getApp().globalData.storeId
    		};
    		this.$https.httpTokenRequest(opts, param).then(
    			res => {
    				var list = [];
    				for (var i = 0; i < res.data.rows.length; i++) {
    					list.push({ children: [] });
    				}
    				this.cateItemslist = list;
    				if (res.data.code === 0) {
    					this.cateItems = res.data.rows;
    					this.getList();
    				} else {
    					uni.showToast({
    						title: '网络错误'
    					});
    				}
    			},
    			error => {
    				uni.showToast({
    					title: '网络请求超时,请重试',
    					icon: 'none'
    				});
    				uni.hideLoading();
    			}
    		);
    	},
    	onLoad() {
    		var that = this;
    		uni.getSystemInfo({
    			success: function(res) {
    				that.windowHeight = res.windowHeight - 80;
    			}
    		});
    	},
    	onBackPress(options) {
    		var list = [];
    		if (this.cateItemslist.length > 0) {
    			for (var i = 0; i < this.cateItemslist.length; i++) {
    				for (var j = 0; j < this.cateItemslist[i].children.length; j++) {
    					list.push({
    						staffId: this.cateItemslist[i].children[j].staffId,
    						storeId: getApp().globalData.storeId,
    						mechanismId: getApp().globalData.mechanismId,
    						ocOrder: j + 1,
    						wheelCardId: Number(this.cateItemslist[i].children[j].wheelCardId),
    						ocState: this.cateItemslist[i].children[j].children_id - 1,
    						orderCardsId: this.cateItemslist[i].children[j].orderCardsId
    					});
    				}
    			}
    			// console.log(list, '');
    			var that = this;
    			if (options.from === 'navigateBack' || options.from === 'backbutton') {
    				uni.showModal({
    					title: '提示',
    					content: '是否保存轮牌设置？',
    					success: function(res) {
    						if (res.confirm) {
    							// if()
    							var opts = {
    								url: '/app/wheelCard/editOrderCards',
    								method: 'POST',
    								header: 'json'
    							};
    							var param = list;
    							that.$https.httpTokenRequest(opts, param).then(
    								res => {
    									// console.log(res, '封装');
    									//打印请求返回的数据
    									uni.hideLoading();
    								},
    								error => {
    									uni.showToast({
    										title: '网络请求超时,请重试',
    										icon: 'none'
    									});
    									uni.hideLoading();
    								}
    							);
    						}
    					}
    				});
    			}
    		}
    	},
    methods: {
    	newStaff() {
    		// console.log(this.cateItemslist, '11111111111');
    		getApp().globalData.cateItems = this.cateItemslist;
    		var id = this.cateItems[this.curIndex].postGradeId;
    		var wheelCardId = this.cateItems[this.curIndex].wheelCardId;
    		uni.navigateTo({
    			url: '../turnon/addnew?id=' + id + '&leftindex=' + this.curIndex + '&wheelCardId=' + wheelCardId
    		});
    	},
    	getList() {
    		uni.showLoading({
    			title: '获取数据'
    		});
    		var opts = {
    			url: '/app/wheelCard/orderCardsList',
    			method: 'POST',
    			header: 'json'
    		};
    		var param = {
    			ocDate: this.time,
    			wheelCardId: this.cateItems[this.curIndex].wheelCardId
    		};
    		this.$https.httpTokenRequest(opts, param).then(
    			res => {
    				// console.log(res.data);
    				if (res.data.rows.length == 0) {
    					uni.showToast({
    						title: '暂无轮牌数据',
    						icon: 'none'
    					});
    				} else {
    					this.cateItemslist[this.curIndex].children = [];
    					var list = this.cateItemslist;
    	
    					for (var i = 0; i < res.data.rows.length; i++) {
    						var time = res.data.rows[i].attTime.split(' ');
    						list[this.curIndex].children.push({
    							attendanceState: res.data.rows[i].attendanceState,
    							children_id: res.data.rows[i].ocState + 1,
    							src: 'http://qiniu.qm65.com/' + res.data.rows[i].staPhoto,
    							storename: res.data.rows[i].staName,
    							uptime: time[1],
    							status: this.button[res.data.rows[i].ocState].text,
    							// status:this.button[1].text,
    							staffId: res.data.rows[i].staffId,
    							wheelCardId: res.data.rows[i].wheelCardId,
    							orderCardsId: res.data.rows[i].orderCardsId
    						});
    					}
    	
    					// console.log(list, 'list');
    					this.cateItemslist = list;
    					uni.hideLoading();
    				}
    			},
    			error => {
    				uni.showToast({
    					title: '网络请求超时,请重试',
    					icon: 'none'
    				});
    				uni.hideLoading();
    			}
    		);
    	},
    	backpage() {
    		uni.navigateBack({
    			delta: 1,
    			animationType: 'pop-out',
    			animationDuration: 200
    		});
    	},
    	show4(ite) {
    		console.log(ite, '111111');
    		this.curentitem = ite;
    		this.show = true;
    	},
    	hide() {
    		this.show = false;
    	},
    	handleClickCancel() {
    		this.hide();
    	},
    	handleClick(e) {
    		console.log(e);
    		let index = e.currentTarget.dataset.index;
    		this.cateItemslist[this.curIndex].children[this.curentitem].children_id = Number(index) + 1;
    		this.cateItemslist[this.curIndex].children[this.curentitem].status = this.button[index].text;
    		var list = this.cateItemslist[this.curIndex].children[this.curentitem];
    		if (index == 0) {
    			this.cateItemslist[this.curIndex].children.splice(this.curentitem, 1);
    			this.cateItemslist[this.curIndex].children.push(list);
    		}
    		// console.log(this.cateItemslist[this.curIndex].children, 'this.cateItemslist[this.curIndex].children');
    		// this.curentitem.children_id = index
    		// console.log(this.cateItemslist[this.curIndex].children[this.curentitem].children_id)
    		this.hide();
    	},
    	//一级分类点击
    	tabtap(index, id) {
    		this.curIndex = index;
    		this.getList();
    	},
    	
    	// ListTouch触摸开始
    	ListTouchStart(e) {
    		this.listTouchStart = e.touches[0].pageX;
    	},
    	// 删除
    	// ListTouch计算方向
    	ListTouchMove(e) {
    		this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
    	},
    	
    	// ListTouch计算滚动
    	ListTouchEnd(e) {
    		if (this.listTouchDirection == 'left') {
    			this.modalName = e.currentTarget.dataset.target;
    		} else {
    			this.modalName = null;
    		}
    		this.listTouchDirection = null;
    	},
    	deleteit(id, index) {
    		var that = this;
    		uni.showModal({
    			title: '是否删除',
    			content: '确定今天移除该员工',
    			success: function(res) {
    				if (res.confirm) {
    					var opts = {
    						url: '/app/wheelCard/remove',
    						method: 'GET',
    						header: 'json'
    					};
    					var param = {
    						orderCardsId: id
    					};
    					that.$https.httpTokenRequest(opts, param).then(
    						res => {
    							// console.log(res.data);
    							uni.hideLoading();
    							that.cateItemslist[that.curIndex].children.splice(index, 1);
    							uni.showToast({
    								title: '删除成功',
    								icon: 'success'
    							});
    						},
    						error => {
    							uni.showToast({
    								title: '网络请求超时,请重试',
    								icon: 'none'
    							});
    							uni.hideLoading();
    						}
    					);
    	
    				}
    			}
    		});
    	},
    	
    	// 删除end
    	initImageBasePos: function() {
    		let paddingRate = 0.024;
    		_self = this;
    		//计算图片基准位置
    		uni.getSystemInfo({
    			success: function(obj) {
    				let screenWidth = obj.screenWidth;
    				let leftPadding = Math.ceil(paddingRate * screenWidth);
    				let imageWidth = Math.ceil((screenWidth - 2 * leftPadding) / 4);
    	
    				_self.imageBasePos.x0 = leftPadding;
    				_self.imageBasePos.w = imageWidth;
    				_self.imageBasePos.h = imageWidth;
    			}
    		});
    	},
    	findOverlapImage: function(posX, posY) {
    		var begin = 100;
    		var end = 192;
    		let indx;
    	
    		var length = this.cateItemslist[this.curIndex].children.length;
    		if (begin < posY && end > posY) {
    			indx = 0;
    			return indx;
    		}
    		for (var i = 1; i <= length; i++) {
    			begin = begin + 92;
    			end = end + 92;
    			if (begin < posY && end > posY) {
    				// console.log(posY,'满足的')
    				indx = i;
    				// console.log(i,'交换地址')
    				return indx;
    			}
    		}
    	},
    	isDragging: function(indx) {
    		// console.log(indx)
    		return this.dragIndex === indx;
    	},
    	start: function(e) {
    		//元素的宽度
    		console.log(e)
    		const query = uni.createSelectorQuery().in(this);
    		query.select('.cu-item').boundingClientRect(data => {
    		    // console.log(data.left);
    			this.moveLeft = data.left; 
    		}).exec();
    		if (!this.isDragable) {
    			return;
    		}
    		this.dragIndex = e.currentTarget.dataset.index; //其实地址
    		// console.log(e.currentTarget.dataset.index, '当前位置第几个');
    		this.moveImagePath = this.cateItemslist[this.curIndex].children[this.dragIndex];
    		// console.log(this.moveImagePath)
    		this.showMoveImage = true;
    		const touch = e.touches[0]; //获取第一个触点
    		this.showMoveImage = true;
    		// 移动
    		
    		this.moveTop = e.touches[0].pageY - 40;
    		console.log( this.moveTop,'this.moveTop')
    	},
    	move: function(e) {
    		if (!this.isDragable) {
    			return;
    		}
    		const touch = e.touches[0]; //获取第一个触点
    		// console.log(touch,'移动')
    		if (this.deltaLeft === 0) {
    			this.deltaLeft = touch.clientX - this.moveLeft;
    			this.deltaTop = touch.clientY - this.moveTop;
    		}
    		this.stopleft = touch.pageX;
    		this.stoptop = touch.pageY;
    		// console.log(this.stoptop,'结束')
    		//设置移动图片位置
    		this.moveLeft = touch.clientX - this.deltaLeft;
    		this.moveTop = touch.clientY - this.deltaTop;
    	},
    	stop: function(e) {
    		// console.log(this.stoptop, '结束');
    		// console.log(this.deltaTop,'结束X')
    		var leng = this.cateItemslist[this.curIndex].children.length * 87;
    		// console.log(leng,'长度')
    		if (this.stoptop > leng) {
    			// console.log(this.dragIndex);
    			// console.log(this.cateItemslist[this.curIndex].children.length)
    			this.targetImageIndex = this.cateItemslist[this.curIndex].children.length - 1;
    			if (this.dragIndex !== this.targetImageIndex && this.deltaTop != 0 && this.targetImageIndex >= 0) {
    				this.cateItemslist[this.curIndex].children[this.dragIndex] = this.cateItemslist[this.curIndex].children[this.targetImageIndex];
    				this.cateItemslist[this.curIndex].children[this.targetImageIndex] = this.moveImagePath;
    			}
    		} else {
    			this.targetImageIndex = this.findOverlapImage(this.stopleft, this.stoptop);
    			// console.log(this.targetImageIndex, '结束Y');
    			// console.log(this.targetImageIndex)
    			if (this.dragIndex !== this.targetImageIndex && this.deltaTop != 0 && this.targetImageIndex >= 0) {
    				this.cateItemslist[this.curIndex].children[this.dragIndex] = this.cateItemslist[this.curIndex].children[this.targetImageIndex];
    				this.cateItemslist[this.curIndex].children[this.targetImageIndex] = this.moveImagePath;
    			}
    		}
    	
    		this.dragIndex = null;
    		this.targetImageIndex = null;
    		this.deltaLeft = 0;
    		this.deltaTop = 0;
    		this.showMoveImage = false;
    		// this.showMoveImage = false
    		// console.log(this.cateItemslist[this.curIndex], '当前轮牌顺序');
    		// this.$emit('input', this.cateItemslist[this.curIndex].children)
    	},
    	
    	clearLoop() {
    		clearInterval(this.Loop);
    	},
    		// handleClick(e) {
    		// 	if (!this.show) return;
    		// 	const dataset = e.currentTarget.dataset;
    		// 	console.log(dataset,'dataset')
    		// },
    		// handleClickCancel() {
    		// 	if (!this.maskClosable) return;
    		// },
    		px(num) {
    			return uni.upx2px(num) + 'px'
    		}
    	}
    };
    </script>
    
    <style scoped>
    	/* 弹出层 */
    	.tui-modal-box {
    		position: fixed;
    		width: 84%;
    		left: 50%;
    		top: 50%;
    		margin: auto;
    		background: #fff;
    		z-index: 99998;
    		transition: all 0.3s ease-in-out;
    		transform: translate(-50%, -50%) scale(0);
    		opacity: 0;
    		border-radius: 24upx;
    		box-sizing: border-box;
    		padding: 40upx 60upx;
    	}
    	
    	.tui-modal-show {
    		transform: translate(-50%, -50%) scale(1);
    		opacity: 1;
    	}
    	
    	.tui-modal-mask {
    		position: fixed;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		background: rgba(0, 0, 0, 0.6);
    		z-index: 99996;
    		transition: all 0.3s ease-in-out;
    		opacity: 0;
    		height: 100%;
    		visibility: hidden;
    	}
    	
    	.tui-mask-show {
    		visibility: visible;
    		opacity: 1;
    	}
    	
    	.tui-modal-title {
    		text-align: center;
    		font-size: 34upx;
    		color: #333;
    		padding-top: 20upx;
    		font-weight: bold;
    	}
    	
    	.tui-modal-content {
    		text-align: center;
    		color: #999;
    		font-size: 28upx;
    		padding-top: 20upx;
    		padding-bottom: 60upx;
    	}
    	
    	.tui-mtop {
    		margin-top: 30upx;
    	}
    	
    	.tui-mbtm {
    		margin-bottom: 30upx;
    	}
    	
    	.tui-modalBtn-box {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    	}
    	
    	.tui-flex-column {
    		flex-direction: column;
    	}
    	
    	.tui-modal-btn {
    		width: 44%;
    		height: 68upx;
    		line-height: 68upx;
    		position: relative;
    		border-radius: 10upx;
    		font-size: 24upx;
    		overflow: visible;
    	}
    	
    	.tui-modal-btn::after {
    		content: "";
    		position: absolute;
    		width: 200%;
    		height: 200%;
    		-webkit-transform-origin: 0 0;
    		transform-origin: 0 0;
    		-webkit-transform: scale(0.5, 0.5);
    		transform: scale(0.5, 0.5);
    		left: 0;
    		top: 0;
    		border-radius: 20upx;
    	}
    	
    	.tui-btn-width {
    		width: 80% !important;
    	}
    	
    	.tui-primary {
    		background: #5677fc;
    		color: #fff;
    	}
    	
    	.tui-primary-hover {
    		background: #4a67d6;
    		color: #e5e5e5;
    	}
    	
    	.tui-primary-outline {
    		color: #5677fc;
    		background: none;
    	}
    	
    	.tui-primary-outline::after {
    		border: 1px solid #5677fc;
    	}
    	
    	.tui-danger {
    		background: #ed3f14;
    		color: #fff;
    	}
    	
    	.tui-danger-hover {
    		background: #d53912;
    		color: #e5e5e5;
    	}
    	
    	.tui-danger-outline {
    		color: #ed3f14;
    		background: none;
    	}
    	
    	.tui-danger-outline::after {
    		border: 1px solid #ed3f14;
    	}
    	
    	.tui-red {
    		background: #e41f19;
    		color: #fff;
    	}
    	
    	.tui-red-hover {
    		background: #c51a15;
    		color: #e5e5e5;
    	}
    	
    	.tui-red-outline {
    		color: #e41f19;
    		background: none;
    	}
    	
    	.tui-red-outline::after {
    		border: 1px solid #e41f19;
    	}
    	
    	.tui-warning {
    		background: #ff7900;
    		color: #fff;
    	}
    	
    	.tui-warning-hover {
    		background: #e56d00;
    		color: #e5e5e5;
    	}
    	
    	.tui-warning-outline {
    		color: #ff7900;
    		background: none;
    	}
    	
    	.tui-warning-outline::after {
    		border: 1px solid #ff7900;
    	}
    	
    	.tui-green {
    		background: #19be6b;
    		color: #fff;
    	}
    	
    	.tui-green-hover {
    		background: #16ab60;
    		color: #e5e5e5;
    	}
    	
    	.tui-green-outline {
    		color: #19be6b;
    		background: none;
    	}
    	
    	.tui-green-outline::after {
    		border: 1px solid #19be6b;
    	}
    	
    	.tui-white {
    		background: #fff;
    		color: #333;
    	}
    	
    	.tui-white-hover {
    		background: #f7f7f9;
    		color: #666;
    	}
    	
    	.tui-white-outline {
    		color: #333;
    		background: none;
    	}
    	
    	.tui-white-outline::after {
    		border: 1px solid #333;
    	}
    	
    	.tui-gray {
    		background: #ededed;
    		color: #999;
    	}
    	
    	.tui-gray-hover {
    		background: #d5d5d5;
    		color: #898989;
    	}
    	
    	.tui-gray-outline {
    		color: #999;
    		background: none;
    	}
    	
    	.tui-gray-outline::after {
    		border: 1px solid #999;
    	}
    	
    	.tui-blue {
    		background: #36A6D2;
    		color: #999;
    	}
    	
    	.tui-blue-hover {
    		background: #d5d5d5;
    		color: #36A6D2;
    	}
    	
    	.tui-blue-outline {
    		color: #36A6D2;
    		background: none;
    	}
    	
    	.tui-blue-outline::after {
    		border: 1px solid #36A6D2;
    	}
    	.tui-outline-hover {
    		opacity: 1;
    	}
    	
    	.tui-circle-btn {
    		border-radius: 40upx !important;
    	}
    	
    	.tui-circle-btn::after {
    		border-radius: 80upx !important;
    	}
    	/* 弹出层 */
    	.booklabel {
    		position: absolute;
    		top: 0%;
    		right: 0%;
    		font-size: 10px;
    		color: #ff5153;
    	}
    	/* 顶部栏 */
    	.mainpage {
    		position: absolute;
    		top: 80px;
    		/* bottom: 50%; */
    		width: 100%;
    		background-color: #ffffff;
    		height: 100%; /* 解决iPhone下滑弹出 */
    		/* padding:  5%; */
    	}
    	.page {
    		position: absolute;
    		top: 0;
    		width: 100%;
    		height: 100%;
    	}
    	.cpt-mask {
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background-color: #000000;
    		opacity: 0.5;
    		z-index: 99;
    	}
    	/* 顶部栏 */
    	
    	.navigate_top {
    		display: flex;
    		flex-direction: row;
    		padding-top: var(--status-bar-height); /* 获取手机信息顶部栏 */
    		background-color: #53c9c3; /* 主要色彩 */
    		height: 80px;
    		width: 100%;
    		position: fixed;
    		top: 0;
    		z-index: 999;
    	}
    	.indextop_iconleft {
    		position: relative;
    		font-size: 20px;
    		width: 25%;
    		text-align: left;
    		padding-left: 6%;
    		margin: auto 0;
    		color: #ffffff;
    	}
    	.navigate_top_title {
    		width: 50%;
    		margin: auto 0;
    		text-align: center;
    		font-size: 18px;
    		color: #fff;
    		font-weight: bold;
    	}
    	.indextop_iconright {
    		font-size: 23px;
    		width: 25%;
    		padding-right: 1%;
    		margin: auto 0;
    		text-align: center;
    		color: #ffffff;
    		font-weight: bold;
    	}
    	/* 顶部栏end */
    	.text-xs {
    		font-size: 16px !important;
    		font-weight: bold !important;
    	}
    	
    	.face {
    		background-color: #fff !important;
    	}
    	.dragging {
    		transform: scale(1.2);
    	}
    	.container {
    		height: 100%;
    		border-top: 2px solid #f1f1f1;
    	}
    	.present {
    		width: 150px;
    		height: 25px;
    		line-height: 25px;
    		color: rgba(80, 80, 80, 1);
    		font-size: 15px;
    		text-align: left;
    		padding: 8px 0 8px 20px;
    	}
    	.nav_left {
    		background-color: #f1f1f1 !important;
    		width: 30%;
    		height: 100%;
    	}
    	.nav_left_items {
    		width: 100%;
    		height: 43px;
    		color: rgba(80, 80, 80, 1);
    		background-color: #f1f1f1;
    		font-size: 16px;
    		line-height: 43px;
    		text-align: center;
    		margin: 10px auto;
    	}
    	.active {
    		border-radius: 5px;
    		margin: 10px auto;
    	
    		color: rgba(255, 108, 144, 1);
    		background-color: rgba(255, 255, 255, 1);
    	}
    	.nav_right_middle {
    		position: absolute;
    		top: 3px;
    		left: 21%;
    		background-color: #fff;
    		width: 22%;
    		height: 100%;
    	}
    	
    	.nav_right_items_city {
    		width: 80px;
    		height: 43px;
    		color: rgba(128, 128, 128, 1);
    		background-color: rgba(255, 255, 255, 1);
    		font-size: 13px;
    		line-height: 43px;
    		text-align: center;
    	}
    	.on {
    		color: rgba(255, 108, 144, 1);
    	}
    	
    	.nav_right_right {
    		/* padding-top: 10px; */
    		/* position: absolute; */
    	
    		height: 100%;
    		width: 70%;
    		border-left: 2px solid #f1f1f1;
    		background-color: #fff;
    	}
    	.time {
    		margin-top: 15px;
    	}
    	.nav_right_items_store {
    		/* background-color: #f1f1f1; */
    	}
    	.nav_right_items_store_child {
    		/* width: 215px; */
    		width: 100%;
    		height: 75px;
    		display: flex;
    		flex-direction: column;
    		border-bottom: 2px solid #f1f1f1;
    		position: relative;
    		padding-left: 8px;
    	}
    	.nav_right_items_store_child1 {
    		display: block;
    		height: 14px;
    		color: rgba(80, 80, 80, 1);
    		font-size: 13px;
    		text-align: left;
    		font-weight: bold;
    		margin-top: 2px;
    	}
    	.nav_right_items_store_child2 {
    		height: 66px;
    		color: rgba(166, 166, 166, 1);
    		font-size: 13px;
    		text-align: left;
    		position: absolute;
    		overflow: hidden;
    		bottom: 6px;
    		padding-right: 6px;
    	}
    	.logo_go {
    		position: absolute;
    		width: 33px;
    		height: 20px;
    		right: 10px;
    		top: 5px;
    		color: rgba(255, 255, 255, 1);
    		background-color: rgba(255, 108, 144, 1);
    		border-radius: 14px;
    		font-size: 13px;
    		line-height: 20px;
    		text-align: center;
    	}
    	.itemlabel {
    		padding: 10px 15px;
    		width: 80%;
    		height: 80px;
    		color: #fff;
    		border-radius: 5px;
    		margin: 25px auto;
    		position: relative;
    	}
    	.deleteicon {
    		position: absolute;
    		top: -18%;
    		right: 0%;
    		font-size: 25px;
    		color: #000;
    	}
    	.content1 {
    		margin-left: 25%;
    		width: 50%;
    	}
    	.action1 {
    		text-align: center;
    		width: 50%;
    		padding-top: 10px;
    		/* position: absolute; */
    	}
    	.staffimage {
    		width: 40px;
    		height: 40px;
    		border-radius: 50%;
    		position: absolute;
    		top: 19%;
    		left: 4%;
    	}
    	.staffimage image {
    		width: 40px;
    		height: 40px;
    		border-radius: 50%;
    	}
    	.content11 {
    		font-size: 16px !important;
    		font-weight: bold !important;
    		position: absolute;
    		top: 18%;
    		left: 25%;
    	}
    	.o3 {
    		background-color: #ff5153 !important;
    	}
    	
    	.o2 {
    		background-color: #26c9b6 !important;
    	}
    	.o4 {
    		background-color: #2cb6e7 !important;
    	}
    	.o1 {
    		background-color: #b6c1d3 !important;
    	}
    	.uptime {
    		font-size: 16px !important;
    		position: absolute;
    		bottom: 10%;
    		left: 25%;
    		color: #fff;
    	}
    	.action11 {
    		text-align: center;
    		position: absolute;
    		top: 20%;
    		right: 10%;
    	}
    
    </style>

[20200417150926328.gif]: /images/20230521/e90bd3094477407fb8537a7cf92e7dc7.png