<template>
	<view class="pageBox" :style="colorStyle">
		<view class="userOff" v-if="actionCartItem.id">
			<view class="navBox">
				<view class="acea-row row-between-wrapper topIconBox">
					<navigator url="/pages/renttab/index">
						<image class="topIcon" src="../../../static/images/controller_witchShop.png" mode="widthFix">
						</image>
					</navigator>
					<view v-if="actionCartItem" class="clamp padding-l-10 padding-r-10">
						{{actionCartItem.machine_name||''}}
					</view>
					<image @click="navTo('/pages/index/notice')" class="topIcon"
						src="../../../static/images/controller_witchMessage.png" mode="widthFix">
					</image>
					<view class="topIconNum acea-row row-between-wrapper" v-if="notify>0">
						<text>
							{{notify}}
						</text>
					</view>
				</view>
			</view>
			<view class="actionBox">

				<map class="map" :markers="[{
					id:1,
					longitude:actionCartItem.longitude||121.420761,
					latitude: actionCartItem.latitude||28.65641,
					iconPath:'../../static/images/location.png',
					width:30,
					height:35
				}]" :longitude='actionCartItem.longitude||121.420761' :latitude='actionCartItem.latitude||28.65641'></map>
				<view class="timeBox" v-if="actionCartItem.is_available==1">
					<view class="rightTip rowContentBox acea-row row-between-wrapper">
						<view class="dayBox acea-row row-middle">
							<view class="oldDay ">
								编号:
							</view>
							<view class="tip">
								{{actionCartItem.machine_no}}
							</view>
						</view>
						<view class=" dayBox acea-row row-middle" v-if="actionCartItem.plate_number">
							<view class="oldDay ">
								车牌号:
							</view>
							<view class="tip">
								{{actionCartItem.plate_number}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content acea-row row-middle">
				<view class="contentButtom flexCenter">
					<view class="buttomBox acea-row row-between-wrapper">
						<view class="leftBox">
							<view class="buttom buttomLg ">
								<view @click="authSet" class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view class="centerTextBox">
										<view>
											<image class="tipIcon" src="../../../static/images/controller_shouquan.png"
												mode="aspectFit"></image>
										</view>
										<view class="margin-t-10">
											授权
										</view>
									</view>
								</view>
								<view class="rightPaddingBg">
								</view>
								<view class="buttomPaddingBg">
								</view>
							</view>
							<view class="leftCenterButtom buttom" @click="navTo('/pages/users/user_payment/index')">
								<view class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view style="z-index: 99;">
										<view>
											充
										</view>
										<view>
											值
										</view>
									</view>
								</view>
								<view class="topBageBg"></view>
								<view class="bottomBageBg"></view>
							</view>
							<view class="buttomLg buttom">
								<view @click="navTo('/pages/user/reportForRepair/Report?id='+actionCartItem.car_number)"
									class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view class="centerTextBox">
										<view>
											<image class="tipIcon" src="../../../static/images/controller_baoxiu.png"
												mode="aspectFit"></image>
										</view>
										<view class="margin-t-10">
											报修
										</view>
									</view>
								</view>
								<view class="topPaddingBg"></view>
								<view class="rightPaddingBg"></view>
							</view>
						</view>
						<view class="centerBgBox">
							<view class="centerBg lineBorder borderRadiusAll">
								<view class="borTopHide"></view>
								<view class="borBottomHide"></view>
							</view>
							<view class="bgGray borderRadiusAll"></view>
							<view class="contentOrg borderRadiusAll">
								<view class="contentOrgBg borderRadiusAll centerBox lineBorder2 flexCenter">
									<view class="centerBoxJb borderRadiusAll lineBorder2">
										<view class="boxBgJb borderRadiusAll flexCenter">
											<view class="flex-center">
												<view class="iconButtomBox borderRadiusAll flexCenter"
													:class="{greedBg:actionCartItem.status==0||actionCartItem.status==2}"
													@click="setCarType((actionCartItem.status==2||actionCartItem.status==0)?'unlock':'lock')">
													<view class="mr borderRadiusAll "></view>
													<view class="iconButtomJb">
														<view>
															<image class="img"
																src="../../../static/images/controller_qidong.png"
																mode="aspectFit"></image>
														</view>
														<view class="margin-t-10" v-if="actionCartItem.status==0">
															启动
														</view>
														<view class="margin-t-10" v-else>
															关闭
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="line left"></view>
									<view class="line right"></view>
									<view @click="alertCarList=true" class="topButtomTipBox posbuttom flexCenter">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_huanche.png"
													mode="aspectFit"></image>
											</view>
											<view class="margin-t-10">
												换车
											</view>
										</view>
									</view>
									<view class="rightButtomTipBox posbuttom flexCenter" @click="setCarType('find')">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_xunche.png" mode="aspectFit">
												</image>
											</view>
											<view class="margin-t-10">
												寻车
											</view>
										</view>
									</view>
									<view @click="setCarType('deblock')"
										class="bottomButtomTipBox posbuttom flexCenter">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_dingwei.png"
													mode="aspectFit"></image>
											</view>
											<view class="margin-t-10">
												解锁
											</view>
										</view>
									</view>
									<view class="leftButtomTipBox posbuttom flexCenter" @click="setCarType('cushion')">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_kaisuo.png" mode="aspectFit">
												</image>
											</view>
											<view class="margin-t-10">
												开座垫
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="rightBox">
							<view class="rightButtom buttom acea-row row-between-wrapper">
								<view class="centerTextBox">
									<view>
										{{actionCartItem.residue||0}}%
									</view>
									<view>
										<image class="tipIcon" src="../../../static/images/controller_dianchi.png"
											mode="aspectFit"></image>
									</view>
								</view>
								<view class="rightElectric flexCenter">
									<view class="electric" v-for="(ls,ind) in residueList"
										:class="{greedBg:actionCartItem.residue>ls}" :key="ind"></view>
								</view>
							</view>
							<view class=" buttomLg buttom"
								@click="navTo('/pages/rent/control/route?id='+actionCartItem.id)">
								<view class="topBageBg"></view>
								<view class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view class="centerTextBox  repair ">
										<view>
											<image class="tipIcon" src="../../../static/images/controller_xincheng.png"
												mode="aspectFit"></image>
										</view>
										<view class="margin-t-10">
											行程
										</view>
									</view>
								</view>
								<view class="topPaddingBg"></view>
								<view class="leftPaddingBg"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="actionCartItem.id" class="payment" :class="{on:alertCarList}">
			<view class="cartListAlertButtom">
				<view class="cartTitle acea-row row-between-wrapper">
					<view>
						请选择更换的车辆
					</view>
					<image @click="alertCarList=false" class="exit" src="../../../static/images/goodsExit.png"
						mode="scaleToFill">
					</image>
				</view>
				<view class="item" v-for="(item,ind) in myCartList"
					@click="()=>{alertCarList=false,actionCartItem=item}" :class="{action:item.id==actionCartItem.id}">
					<view class="acea-row">
						<image class="img" src="../../rent/static/cart.png" mode="scaleToFill"></image>
						<view class="title line2">
							{{item.machine_name}}
						</view>
					</view>
					<view class="machine ">
						<view class="acea-row row-between">
							<view class="it">
								当前位置：{{item.address?item.address:'未定位'}}
							</view>
							<view class="status">
								电量：{{item.residue}}%
							</view>
						</view>
					</view>
					<view class="machine acea-row row-between-wrapper">

						<view class="acea-row row-left">
							<view class="it">
								编号：
							</view>
							<view class="code">
								{{item.machine_no}}

							</view>
						</view>
						<view class="acea-row row-right" v-if="item.plate_number">
							<view class="it">
								车牌号：
							</view>
							<view class="code">
								{{item.plate_number}}
							</view>
						</view>
					</view>
					<view v-if="item.status==0" class="text_red tip ">
						关锁
					</view>
					<view v-if="item.status==1" class="text_blue tip">
						开锁
					</view>
					<view v-if="item.status==2" class="text_greed tip">
						解锁
					</view>
				</view>
				<view style="height: 1px;"></view>
			</view>
		</view>
		<pageFoot></pageFoot>
	</view>
</template>
<script>
	import {
		getMyCar,
		getLock
	} from '@/api/rent.js';
	import {
		getUserInfo,
	} from "@/api/user.js";
	import {
		toLogin
	} from "@/libs/login.js";
	import {
		mapGetters
	} from 'vuex';
	import pageFoot from '@/components/pageFooter/index.vue';
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		props: {
			notify: {
				type: Number,
				default: 0
			},
		},
		components: {
			pageFoot
		},
		data() {
			return {
				// 我的车辆
				myCartList: [],
				ladingCart: false, //判断是否已经加载过我的车辆
				// #ifdef H5
				iconPath: '../../static/image/location.png', //定位图标地址
				// #endif
				// #ifndef H5
				iconPath: '../../../static/image/location.png', //定位图标地址
				// #endif
				timeOut: '', //用于存放调用定时获取对象数据
				reachangeAlert: false, //判断是否已经提示过充值
				alertCarList: false,
				actionCartItem: {
					id: 0
				},
				// 进度百分比
				residueList: [91, 83, 75, 66, 58, 50, 41, 33, 24, 16, 8, 0],
			};
		},
		watch: {},
		computed: {
			...mapGetters(['isLogin', 'uid']),
		},
		created() {
			if (this.isLogin) {
				this.getCarInfo();
			} else {
				toLogin();
			}
		},
		methods: {
			changeCart() {

			},
			navTo(url) {
				if (this.isLogin) {
					uni.navigateTo({
						url,
					});
				} else {
					toLogin();
				}
			},
			// 设置车锁状态
			async setCarType(type) {
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				const bool = await this.$util.$L.getLocation();
				// 判断是否获取地址失败
				if (!bool) {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: '未获取地址数据,请授权后再试',
						cancelText: '取消',
						confirmText: '授权',
						success: res => {
							if (res.confirm) {
								this.setCarType(type)
							}
						},
					});
					return;
				}
				console.log(uni.getStorageSync('CACHE_LONGITUDE'));
				console.log(uni.getStorageSync('CACHE_LATITUDE'));
				getLock({
					type: type,
					'machine_no': this.actionCartItem.machine_no,
					'longitude': uni.getStorageSync('CACHE_LONGITUDE'),
					'latitude': uni.getStorageSync('CACHE_LATITUDE')
				}).then((res) => {
					console.log(res);
					uni.hideLoading()
				}).catch((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res,
						icon: 'error'
					});
				})
			},
			// 父元素启动监听
			onStartGetCartInfo() {
				if (this.timeOut) {
					this.outGetCartInfo();
				}
				this.onGetCartInfo()
			},
			// 关闭定时获取车辆信息
			outGetCartInfo() {
				clearInterval(this.timeOut)
			},
			// 获取车辆数据
			onGetCartInfo() {
				this.getCarInfo();
				this.timeOut = setInterval((e) => {
					this.getCarInfo();
				}, 60000)
			},
			//获取车辆信息
			getCarInfo() {
				getMyCar({}).then((e) => {
					this.myCartList = e.data;
					this.actionCartItem = e.data[0]
					console.log(e)
				}).catch((e) => {
					console.log(e);
				})
			},
			// 判断是否有权限授权车辆
			authSet() {
				if ((+this.actionCartItem.uid) == (+this.uid)) {
					this.navTo('/pages/rent/control/authList?id=' + this.actionCartItem.id)
				} else {
					uni.showModal({
						title: '提示',
						content: '该车辆是他人授权给您的车辆您无权二次授权',
						showCancel: false,
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	$paddingJg:40rpx;
	// 按钮黑色背景
	$bgBlack:#161727;
	// 底色
	$contentBg:#373c5a;
	// 按钮包裹框背景颜色
	$maxBoxBg:#1f2136;

	.pageBox {
		height: 100vh;
		padding-bottom: 45px;
	}

	.flexCenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navBox {
		/* #ifdef APP */
		padding-top: var(--status-bar-height);
		padding-bottom: 30rpx;
		/* #endif */
		/* #ifdef H5 || MP */
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		/* #endif */
		background-color: $contentBg;
		flex-shrink: 0;
	}

	.topIconBox {
		padding: 0 $paddingJg;
		position: relative;
		color: #FFFFFF;
		font-size: $uni-font-size-base + 2rpx;

		.topIconNum {
			position: absolute;
			top: -10rpx;
			right: 20rpx;
			font-size: $uni-font-size-sm;
			min-width: 30rpx;
			min-height: 30rpx;
			border-radius: 100rpx;
			background-color: $uni-color-error;
			padding: 5rpx;
			justify-content: center;
		}

		.topIcon {
			transform: rotateZ(-90deg);
			width: 45rpx;
			height: 45rpx;
			flex-shrink: 0;
		}
	}

	.userOff {
		display: flex;
		flex-direction: column;
		height: 100%;

		.actionBox {
			background-color: #0f1025;
			flex-shrink: 1;
			flex-grow: 1;
			text-align: center;
			height: 400rpx;
			position: relative;
			flex-direction: column;
			display: flex;

			.map {
				height: calc(100% - 80rpx);
				width: 100%;
			}

			.timeBox {
				color: #FFFFFF;
				width: 100%;
				font-size: $uni-font-size-base;
				font-weight: bold;
				flex-shrink: 0;

				.rightTip {
					padding: 20rpx;
				}

				.dayBox {
					z-index: 1;
					line-height: 1;
					font-size: $uni-font-size-sm;

					.tip {
						color: #75EFFA;
						background-color: rgba($color: #75EFFA, $alpha: 0.2);
						padding: 10rpx 10rpx;
						border-radius: 10rpx;
					}
				}

				.oldDay {
					padding: 6rpx 10rpx;
					text-align: left;
					font-size: $uni-font-size-sm - 2rpx;
					color: #FFF;
				}
			}
		}

		.content {
			flex-shrink: 0;
		}

		.lineBorder {
			border: 1px solid #aaaec7;
		}

		.lineBorder2 {
			border: 1px solid #b7cbf2;
		}

		.rowContentBox {
			overflow: hidden;
			background-color: $contentBg;

			.tipMen {
				position: absolute;
				top: 0;
				left: 0;
				transform-origin: top left;
				margin-left: -40rpx;
				transform: rotateZ(-45deg);
				height: 100%;
				width: 100%;
				background-image: linear-gradient(to bottom, rgba(69, 75, 113, 1) 0%, transparent 100%);
			}
		}

		.rowContentBox,
		.centerBox {
			height: 100%;
			width: 100%;
			position: relative;
		}

		.contentButtom {

			width: 750rpx;
			height: 100%;
			background-color: $maxBoxBg;
			font-size: $uni-font-size-base;
			line-height: 1;

			.centerTextBox {
				text-align: center;
				margin-left: -70rpx;
			}

			.tipIcon {
				width: 46rpx;
				height: 46rpx;
			}

			.buttomBox {
				width: 750rpx;
				padding: 40rpx;
				color: #B2B9D3;

				.buttom {
					padding: 10rpx;
					background-color: $bgBlack;
					position: relative;

					.rightPaddingBg,
					.topPaddingBg,
					.leftPaddingBg,
					.buttomPaddingBg {
						position: absolute;
						background-color: $bgBlack;
						z-index: 11;
					}

					.topPaddingBg,
					.buttomPaddingBg {
						height: 12rpx;
						width: 180rpx;
						left: 0;
					}

					.rightPaddingBg,
					.leftPaddingBg {
						height: 180rpx;
						width: 10rpx;
						top: 0rpx;
					}

					.topPaddingBg {
						top: -1px;
					}

					.buttomPaddingBg {
						button: 0rpx;
					}

					.rightPaddingBg {
						right: 0rpx;
					}

					.leftPaddingBg {
						left: 0;
					}

					.topBageBg,
					.bottomBageBg {
						height: 30rpx;
						width: 180rpx;
						background-color: $maxBoxBg;
						position: absolute;
						z-index: 10;
					}

					.topBageBg {
						top: -30rpx;
					}

					.bottomBageBg {
						bottom: -30rpx;
					}
				}

				.centerBox {
					// background-image: linear-gradient(to bottom, #49548d 0%, transparent 100%);
					background-color: rgba($color: #49548d, $alpha: 0.5);
					box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5) inset;
				}


				.buttomLg {
					width: 180rpx;
					height: 180rpx;

					.repair {
						margin-left: 40rpx;
						padding-left: 30rpx;
					}
				}


				.leftBox {
					.leftCenterButtom {
						margin: 30rpx 0;
						width: 80rpx;
						height: 120rpx;
						background-size: 80rpx 120rpx;
						z-index: 99;

						.tipMen {
							margin-left: 0rpx;
						}
					}
				}

				.centerBgBox {
					flex-shrink: 1;
					position: relative;

					.borderRadiusAll {
						border-radius: 1000rpx;
					}

					.bgGray {
						position: absolute;
						top: 0;
						left: 0;
						background-color: $maxBoxBg;
						width: 530rpx;
						height: 530rpx;
						z-index: 20;
						left: -265rpx;
						top: -265rpx;
					}

					.contentOrg {
						position: absolute;
						background-color: $bgBlack;
						width: 480rpx;
						height: 480rpx;
						left: -240rpx;
						top: -240rpx;
						z-index: 99;
						padding: 20rpx;

						.contentOrgBg {
							width: 100%;
							height: 100%;
							position: relative;
							background-color: $contentBg;
							background-image: linear-gradient(to bottom, rgba($color: #454b71, $alpha: 1) 0%, transparent 25%, transparent 75%, rgba($color: #454b71, $alpha: 1) 100%);

							.posbuttom {
								position: absolute;

								.centerTextBox {
									margin: 0;
								}
							}

							.topButtomTipBox {
								top: 0;
								padding-bottom: 20rpx;
							}

							.bottomButtomTipBox {
								bottom: 0;
								padding-top: 20rpx;
							}

							.bottomButtomTipBox,
							.topButtomTipBox {
								width: 200rpx;
								height: 140rpx;
								margin: 0 auto;
							}

							.rightButtomTipBox,
							.leftButtomTipBox {
								width: 140rpx;
								height: 200rpx;
							}

							.rightButtomTipBox {
								padding-left: 20rpx;
								right: 0;
							}

							.leftButtomTipBox {
								padding-right: 20rpx;
								left: 0;
							}

							.line {
								position: absolute;
								width: calc(440rpx + 2px);
								height: 20rpx;
								border-top: 1px solid #b7cbf2;
								border-bottom: 1px solid #b7cbf2;
								border-left: 1px solid $bgBlack;
								border-right: 1px solid $bgBlack;
								background-color: $bgBlack;
								box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5);

								&.left {
									transform: rotateZ(45deg);
								}

								&.right {
									transform: rotateZ(-45deg);

								}
							}

							.centerBoxJb {
								width: 200rpx;
								height: 200rpx;
								background-color: $bgBlack;
								box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5);
								position: relative;

								.boxBgJb {
									background-color: $bgBlack;
									width: 100%;
									height: 100%;
									position: absolute;
									z-index: 1;

									.iconButtomBox {
										font-size: $uni-font-size-base;
										color: #FFFFFF;
										font-weight: bold;
										width: 160rpx;
										height: 160rpx;
										background-color: #DEDEDE;
										text-align: center;
										background-color: #F6C531;
										position: relative;

										&.greedBg {
											background-color: $uni-color-success;
										}

										.mr {
											position: absolute;
											height: 100%;
											width: 100%;
											background-image: linear-gradient(to bottom, rgba($color: #FFFFFF, $alpha: 0.2) 0%, rgba($color: #FFFFFF, $alpha: 0) 50%, rgba($color: #FFFFFF, $alpha: 0) 100%);
											box-shadow: 0px 0px 20rpx rgba($color: #FFFFFF, $alpha: 0.5) inset;
										}

										.iconButtomJb {
											.img {
												width: 75rpx;
												height: 75rpx;

											}
										}
									}
								}
							}
						}
					}

					.centerBg {
						position: absolute;
						left: -280rpx;
						top: -280rpx;
						background-color: $bgBlack;
						width: 560rpx;
						height: 560rpx;
						z-index: 10;

						.borTopHide {
							top: -10rpx;
							left: 120rpx;
						}

						.borBottomHide,
						.borTopHide {
							position: absolute;
							height: 100rpx;
							width: 316rpx;
							background-color: $maxBoxBg;
						}


						.borBottomHide {
							left: 120rpx;
							bottom: -10rpx;
						}
					}
				}

				.rightBox {
					flex-shrink: 0;

					.rightElectric {
						flex-direction: column;
						padding-right: 6rpx;

						.electric {
							width: 40rpx;
							height: 10rpx;
							// border-radius: 10rpx;
							background-color: $maxBoxBg;
							margin-bottom: 16rpx;

							// &:last-child{
							// 	border-bottom-left-radius: 10rpx;
							// 	border-bottom-right-radius: 10rpx;
							// }
							// &:first-child{
							// 	border-top-left-radius: 10rpx;
							// 	border-top-right-radius: 10rpx;
							// }
							&.greedBg {
								background-color: $uni-color-success;
							}

							&.yellowBg {
								background-color: #F6C531;
							}

							&.redGb {
								background-color: #DE2C2C;
							}
						}
					}

					.rightButtom {
						position: relative;
						z-index: 11;
						margin-bottom: 30rpx;
						width: 180rpx;
						height: 330rpx;
						padding-left: 30rpx;
						padding-top: 16rpx;
						align-items: flex-start;

						.centerTextBox {
							text-align: right;
							margin-left: 16rpx;

						}
					}
				}

			}
		}
	}

	.cartListAlertButtom {
		position: relative;
		padding-top: 20rpx;
		padding: 30rpx;
		overflow: hidden;
		z-index: 999;

		.cartTitle {
			margin: 0 30rpx;
			margin-bottom: 30rpx;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			color: #FFF;

			.exit {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.item {
			position: relative;
			background-color: var(--view-theme-16);
			padding: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.title {
				font-weight: bold;
				font-size: $uni-font-size-lg;
				color: #fff;
				padding-left: 10rpx;
			}

			.machine {
				font-size: $uni-font-size-sm;
				color: #999999;
				margin-top: 20rpx;

				.code {
					color: var(--view-priceColor);
					background-color: rgba(#75EFFA, 0.2);
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
				}
			}

			.img {
				width: 40rpx;
				height: 40rpx;
			}

			.tip {
				position: absolute;
				top: 0;
				right: 0;
				padding: 5rpx 20rpx;
				font-size: 20rpx;
				border-bottom-left-radius: 10rpx;

				&.text_greed {
					color: #49D8A8;
					background-color: rgba(#49D8A8, 0.2);
				}

				&.text_red {
					color: rgba(254, 92, 45, 1);
					background-color: rgba(rgba(254, 92, 45, 1), 0.2);
				}

				&.text_blue {
					color: #1db0fc;
					background-color: rgba(#1db0fc, 0.2);
				}
			}
		}
	}

	.payment {
		position: fixed;
		bottom: 45px;
		left: 0;
		width: 100%;
		background-color: var(--view-theme);
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		z-index: 999;
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		border: 1px solid #999;
		transform: translate3d(0, 100%, 0);

		&.on {
			transform: translate3d(0, 0, 0);
		}
	}
</style>