<template>
	<view class="explain">

		<view class="explain-box" scroll-y="true">

			<view class="explain-box-title">
				使用说明
			</view>
			<scroll-view class="explain-box-body" scroll-y="true">
				<view class="txt">
					<view class="zi">
						1.购卡或充值后可进行自助洗车，支付后当天立即生效，可即时使用。
					</view>
					<view class="zi">
						2.购卡享优惠，按次进行，用一次扣一次，扫码后选择【使用次卡】方式进行洗车。次卡有有效期，一般在有效期能都用完，请在有效期内使用。
					</view>
					<view class="zi">
						3.充值送好礼，充值会有相应的现金赠送，赠送部分只能用于洗车不能兑现。扫码后选择【使用套餐】，选相应套餐后用账户余额进行支付。充值的金额可以【我的】【账户余额】中看到，长期有效；充值的余额确认不再使用时可联系客服进行退费（不含充值时赠送的金额）。
					</view>
					<view class="zi">
						4.用户支付的次卡或账户余额仅供本人合规合法发使用，禁止用于商业或其他目的，如有发现违规违法行为，平台官方有权对违规账号封号处理。
					</view>
					<view class="zi">
						5.在您成功支付或开始洗车后，表明您已预知洗车过程中的各种常识和安全问题，系统不对您洗车过程中车辆和人员的各类问题包括安全问题负责，您需要安全合规操作。
					</view>
					<view class="zi">
						6.平台保留对相关条款的解释权，并将一如既往的为各位车主提供贴心周到的服务。
					</view>
					<view class="zi">
						7.任何问题，可到【我的】页面，点击下方的客服，通过电话或在线的方式获得帮助。
					</view>
				</view>
			</scroll-view>
			<view class="explain-btn" @click="btns">
				我知道了
			</view>
		</view>

	</view>
</template>

<script setup>
import {defineEmits} from 'vue';

const emits = defineEmits(['close'])

const btns = ()=>{
	emits('close',0)
}
</script>

<style lang="scss">
	.explain {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);

		.explain-box {
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			width: 500rpx;
			height:860rpx;
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.explain-box-title {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 26rpx;
			}

			.explain-box-body {
				width: 80%;
				height: 600rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				// background-color: red;

				.txt {
					width: 100%;
					line-height: 30rpx;
					font-size: 26rpx;
					word-wrap: break-word;
					.zi{
						margin-top: 15rpx;
					}
				}
			}
			.explain-btn{
				width: 300rpx;
				height: 70rpx;
				background: linear-gradient(135deg, #4D97FF 0%, #3377FF 100%), linear-gradient(276deg, #1C9FF7 0%, #1275F7 100%);
				box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(5, 128, 255, 0.2);
				text-align: center;
				position: relative;
				margin-left: 50%;
				transform: translateX(-50%);
				line-height: 70rpx;
				margin-top: 40rpx;
				color: white;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}
</style>