front-end/mallh5/pages/pay/index.vue

<template>
	<view class="pay-container">

		<!-- 商家信息区域 -->
		<view class="merchant-section">
			<view class="merchant-card">
				<view class="merchant-logo">
					<image 
						:src="shopInfo.smallAvatar" 
						class="logo-image"
						mode="aspectFill"
					/>
				</view>
				<view class="merchant-details">
					<text class="merchant-name">{{ shopInfo.showName || '未命名' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 支付金额区域 -->
		<view class="amount-section">
			<view class="amount-label">支付金额</view>
			<view class="amount-display">
				<text class="currency">¥</text>
				<text class="amount">{{ displayAmount }}</text>
			</view>
			<view class="amount-tip">请输入金额</view>
		</view>

		<!-- 数字键盘 - 使用直接事件绑定，确保兼容性 -->
		<view class="keyboard-section">
			<view class="keyboard">
				<view class="keyboard-row" v-for="(row, rowIndex) in keyboardKeys" :key="rowIndex">
					<view 
						class="key-item" 
						v-for="(key, keyIndex) in row" 
						:key="`${rowIndex}-${keyIndex}`"
						:class="{ 
							'key-number': key.type === 'number',
							'key-delete': key.type === 'delete',
							'key-dot': key.type === 'dot',
							'key-confirm': key.type === 'confirm'
						}"
						@click="handleKeyPress(key)"
						@touchstart="handleTouchStart"
						@touchend="handleTouchEnd"
					>
						<text v-if="key.type === 'delete'" class="iconfont icon-delete"></text>
						<text v-else-if="key.type === 'confirm'">确认</text>
						<text v-else>{{ key.value }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付按钮 -->
		<view class="pay-button-section">
			<button 
				class="pay-button" 
				:class="{ disabled: !canPay }"
				:disabled="!canPay"
				@click="handlePay"
			>
				<text class="button-text">支付宝支付</text>
			</button>
		</view>

		<!-- 确认支付弹框 -->
		<view class="confirm-dialog" v-if="showConfirm" @click="hideConfirmDialog">
			<view class="dialog-content" @click.stop>
				<view class="dialog-header">
					<text class="dialog-title">提示</text>
					<view class="close-btn" @click="hideConfirmDialog">
						<text class="iconfont icon-close">×</text>
					</view>
				</view>
				
				<view class="dialog-body">
					<view class="confirm-amount-section">
						<text class="confirm-label">支付金额</text>
						<view class="confirm-amount-display">
							<text class="confirm-currency">¥</text>
							<text class="confirm-amount">{{ displayAmount }}</text>
						</view>
					</view>
					
					<view class="confirm-tips">
						<text class="tip-text">确认金额无误</text>
					</view>
				</view>
				
				<view class="dialog-footer">
					<button class="cancel-btn" @click="hideConfirmDialog">取消</button>
					<button class="confirm-btn" @click="handlePay">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { fastPay } from '@/api/pay'
import { orderRelate } from '@/api/order'
// 优化：使用常量避免重复创建
const KEY_TYPES = {
	NUMBER: 'number',
	DELETE: 'delete',
	DOT: 'dot',
	CONFIRM: 'confirm'
};

const MAX_INTEGER_LENGTH = 8;
const MAX_DECIMAL_LENGTH = 2;

export default {
	name: 'pay',
	data() {
		return {
			currentAmount: '0',
			displayAmount: '0',
			// 商家信息
			merchantInfo: {
				logo: '',
				name: '',
				description: ''
			},
			// 优化：使用静态数据，避免重复创建
			keyboardKeys: [
				[
					{ type: KEY_TYPES.NUMBER, value: '1' },
					{ type: KEY_TYPES.NUMBER, value: '2' },
					{ type: KEY_TYPES.NUMBER, value: '3' }
				],
				[
					{ type: KEY_TYPES.NUMBER, value: '4' },
					{ type: KEY_TYPES.NUMBER, value: '5' },
					{ type: KEY_TYPES.NUMBER, value: '6' }
				],
				[
					{ type: KEY_TYPES.NUMBER, value: '7' },
					{ type: KEY_TYPES.NUMBER, value: '8' },
					{ type: KEY_TYPES.NUMBER, value: '9' }
				],
				[
					{ type: KEY_TYPES.DOT, value: '.' },
					{ type: KEY_TYPES.NUMBER, value: '0' },
					{ type: KEY_TYPES.DELETE, value: '' }
				]
			],
			// 优化：使用更高效的状态管理
			amountBuffer: '0',
			updateScheduled: false,
			updateTimer: null,
			// 弹框状态
			showConfirm: false,
			account:0,
			payWay:1,
			shopInfo:[]
		}
	},
	computed: {
		// 简化支付按钮判断逻辑：只要大于0就能支付
		canPay() {
			const amount = parseFloat(this.currentAmount);
			return amount > 0;
		}
	},
	onLoad(options) {
		if (options.account) {
			this.account = options.account;
			uni.setStorageSync('account',this.account)
		}
		if (this.account) {
			orderRelate({account:this.account}).then(res => {
				if (res.data && res.data.shop){
					this.shopInfo = res.data.shop?res.data.shop:[]
				}
			})
		}
	},
	methods: {
		// 优化：添加触摸反馈
		handleTouchStart(e) {
			const target = e.currentTarget;
			if (target && target.style) {
				target.style.transform = 'scale(0.95)';
			}
		},
		
		handleTouchEnd(e) {
			const target = e.currentTarget;
			if (target && target.style) {
				setTimeout(() => {
					target.style.transform = 'scale(1)';
				}, 100);
			}
		},

		// 优化：简化的键盘处理逻辑
		handleKeyPress(key) {
			// 防抖处理
			if (this.updateTimer) {
				clearTimeout(this.updateTimer);
			}
			
			if (key.type === KEY_TYPES.NUMBER) {
				this.addNumber(key.value);
			} else if (key.type === KEY_TYPES.DELETE) {
				this.deleteNumber();
			} else if (key.type === KEY_TYPES.DOT) {
				this.addDecimal();
			}
			
			// 使用 requestAnimationFrame 优化更新
			this.scheduleUpdate();
		},

		// 优化：使用 requestAnimationFrame 调度更新
		scheduleUpdate() {
			if (!this.updateScheduled) {
				this.updateScheduled = true;
				requestAnimationFrame(() => {
					this.updateDisplay();
					this.updateScheduled = false;
				});
			}
		},

		// 优化：更高效的数字添加逻辑
		addNumber(num) {
			const buffer = this.amountBuffer;
			
			// 快速路径：如果当前是0且输入的不是小数点，直接替换
			if (buffer === '0' && num !== '.') {
				this.amountBuffer = num;
				this.currentAmount = num;
				return;
			}

			// 检查长度限制
			const parts = buffer.split('.');
			const integerPart = parts[0];
			const decimalPart = parts[1];

			// 整数部分限制
			if (!decimalPart && integerPart.length >= MAX_INTEGER_LENGTH) {
				uni.showToast({
					title: '金额不能超过8位数',
					icon: 'none',
					duration: 1500
				})
				return;
			}

			// 小数部分限制
			if (decimalPart && decimalPart.length >= MAX_DECIMAL_LENGTH) {
				uni.showToast({
					title: '最多支持2位小数',
					icon: 'none',
					duration: 1500
				})
				return;
			}

			// 添加数字
			this.amountBuffer = buffer + num;
			this.currentAmount = this.amountBuffer;
		},

		// 优化：更高效的小数点添加逻辑
		addDecimal() {
			if (!this.amountBuffer.includes('.')) {
				this.amountBuffer += '.';
				this.currentAmount = this.amountBuffer;
			}
		},

		// 优化：更高效的删除逻辑
		deleteNumber() {
			const buffer = this.amountBuffer;
			if (buffer.length > 1) {
				this.amountBuffer = buffer.slice(0, -1);
			} else {
				this.amountBuffer = '0';
			}
			this.currentAmount = this.amountBuffer;
		},

		// 优化：更高效的显示更新逻辑
		updateDisplay() {
			let amount = this.currentAmount;
			
			// 确保 amount 是字符串类型
			if (typeof amount !== 'string') {
				amount = amount.toString();
			}
			
			// 快速路径：如果是0，直接显示
			if (amount === '0') {
				this.displayAmount = '0';
				return;
			}

			// 检查是否包含小数点
			if (amount.includes('.')) {
				const numAmount = parseFloat(amount) || 0;
				this.displayAmount = numAmount.toFixed(2);
			} else {
				// 整数显示
				this.displayAmount = amount;
			}
		},

		// 优化：更高效的金额设置
		setAmount(amount) {
			const numAmount = parseFloat(amount);
			if (!isNaN(numAmount) && numAmount > 0) {
				const amountStr = numAmount.toString();
				this.amountBuffer = amountStr;
				this.currentAmount = amountStr;
				this.updateDisplay();
			}
		},

		// 显示确认弹框
		showConfirmDialog() {
			if (!this.canPay) return;
			this.showConfirm = true;
		},

		// 隐藏确认弹框
		hideConfirmDialog() {
			this.showConfirm = false;
		},
		// 处理支付
		handlePay() {
			if (!this.canPay) return;
			const amount = parseFloat(this.currentAmount);
			// 隐藏弹框
			//this.hideConfirmDialog();
			// 简化验证：只要大于0就能支付
			if (amount <= 0) {
				uni.showToast({
					title: '请输入金额',
					icon: 'none',
					duration: 1000
				})
				return false
			}
			let params = {needSend:1,prePrice:amount,payWay:1,repeat:1,fromType:1,account:this.account}
			fastPay(params).then(res => {
				//错误返回判断
				if(res.code == 0){
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
					return false
				}
				window.location.href = res.data.url;
			})

		},
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.pay-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	position: relative;
}

.merchant-section {
	padding: 40upx 30upx 20upx;
	
	.merchant-card {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20px);
		border-radius: 20upx;
		padding: 30upx;
		display: flex;
		align-items: center;
		box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.1);
		border: 1upx solid rgba(255, 255, 255, 0.2);
		
		.merchant-logo {
			width: 100upx;
			height: 100upx;
			border-radius: 20upx;
			overflow: hidden;
			margin-right: 25upx;
			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4upx 15upx rgba(0, 0, 0, 0.1);
			
			.logo-image {
				width: 100%;
				height: 100%;
				border-radius: 20upx;
			}
		}
		
		.merchant-details {
			flex: 1;
			display: flex;
			align-items: center;
			
			.merchant-name {
				font-size: 36upx;
				font-weight: 600;
				color: #333;
				line-height: 1.2;
			}
		}
	}
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: center; /* Changed to center the title */
	padding: 20upx 30upx;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	
	.nav-back {
		width: 80upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		cursor: pointer;
		transition: all 0.2s ease;
		
		&:active {
			background: rgba(255, 255, 255, 0.3);
			transform: scale(0.9);
		}
		
		.iconfont {
			font-size: 40upx;
			color: #fff;
			font-weight: bold;
		}
	}
	
	.nav-title {
		color: #fff;
		font-size: 36upx;
		font-weight: 600;
	}
	
	.nav-placeholder {
		width: 80upx; /* Placeholder for back button */
	}
}

.amount-section {
	padding: 60upx 40upx;
	text-align: center;
	
	.amount-label {
		color: rgba(255, 255, 255, 0.8);
		font-size: 28upx;
		margin-bottom: 20upx;
	}
	
	.amount-display {
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-bottom: 20upx;
		
		.currency {
			color: #fff;
			font-size: 48upx;
			font-weight: 600;
			margin-right: 10upx;
		}
		
		.amount {
			color: #fff;
			font-size: 80upx;
			font-weight: 700;
			font-family: 'Arial', sans-serif;
		}
	}
	
	.amount-tip {
		color: rgba(255, 255, 255, 0.6);
		font-size: 24upx;
	}
}

.customer-info-card {
	background: #fff; /* Changed to white */
	margin: 0 30upx 20upx;
	border-radius: 20upx;
	padding: 30upx;
	box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 8upx;
		background: #fff; /* Changed to white */
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
	}
	
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
		margin-top: 8upx;
		
		.customer-avatar {
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
			background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 25upx;
			box-shadow: 0 6upx 20upx rgba(22, 119, 255, 0.3);
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				top: -2upx;
				left: -2upx;
				right: -2upx;
				bottom: -2upx;
				border-radius: 50%;
				background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
				z-index: -1;
				opacity: 0.3;
			}
			
			.avatar-text {
				color: #fff;
				font-size: 44upx;
				font-weight: 600;
			}
		}
		
		.customer-details {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.customer-name {
				display: block;
				font-size: 34upx;
				font-weight: 600;
				color: #333;
			}
			
			.customer-status {
				display: inline-block;
				font-size: 24upx;
				color: #999;
				padding: 4upx 12upx;
				border-radius: 20upx;
				background: #f8f9fa;
				border: 1upx solid #e9ecef;
				
				&.has-debt {
					color: #fff;
					background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
					border-color: #ff6b6b;
					box-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.3);
				}
			}
		}
	}
	
	.debt-info {
		background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
		border-radius: 15upx;
		padding: 20upx 25upx;
		margin-top: 20upx;
		border: 1upx solid rgba(255, 107, 107, 0.2);
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(255, 107, 107, 0.02) 100%);
			border-radius: 15upx;
		}
		
		.debt-amount {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			margin-bottom: 10upx;
			position: relative;
			z-index: 1;
			
			.debt-label {
				font-size: 28upx;
				color: #666;
				font-weight: 500;
			}
			
			.debt-value {
				font-size: 40upx;
				font-weight: 700;
				color: #ff6b6b;
				font-family: 'Arial', sans-serif;
				text-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.2);
			}
		}
		
		.debt-tip {
			font-size: 22upx;
			color: #999;
			text-align: right;
			position: relative;
			z-index: 1;
			font-style: italic;
		}
	}
}

.keyboard-section {
	position: fixed;
	bottom: 160upx;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(20px);
	padding: 30upx;
	border-top: 1upx solid rgba(0, 0, 0, 0.05);
	
	.keyboard {
		.keyboard-row {
			display: flex;
			margin-bottom: 20upx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.key-item {
				flex: 1;
				height: 120upx;
				margin: 0 10upx;
				border-radius: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40upx;
				font-weight: 600;
				transition: all 0.15s ease;
				user-select: none;
				-webkit-user-select: none;
				cursor: pointer;
				will-change: transform;
				position: relative;
				overflow: hidden;
				
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
					opacity: 0;
					transition: opacity 0.15s ease;
				}
				
				&:active::before {
					opacity: 1;
				}
				
				&.key-number {
					background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
					color: #333;
					box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
					border: 1upx solid rgba(0, 0, 0, 0.05);
				}
				
				&.key-delete {
					background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
					color: #fff;
					box-shadow: 0 4upx 20upx rgba(255, 107, 107, 0.3);
				}
				
				&.key-dot {
					background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
					color: #333;
					box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
					border: 1upx solid rgba(0, 0, 0, 0.05);
				}
				
				&.key-confirm {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: #fff;
					box-shadow: 0 4upx 20upx rgba(102, 126, 234, 0.3);
				}
			}
		}
	}
}

.pay-button-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30upx;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(20px);
	border-top: 1upx solid rgba(0, 0, 0, 0.05);
	
	.pay-button {
		width: 100%;
		height: 100upx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		font-size: 36upx;
		font-weight: 600;
		border-radius: 50upx;
		border: none;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
			opacity: 0;
			transition: opacity 0.3s ease;
		}
		
		&:active::before {
			opacity: 1;
		}
		
		&.disabled {
			background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
			color: #adb5bd;
			box-shadow: none;
		}
		
		&:not(.disabled):active {
			transform: scale(0.98);
		}
		
		.button-text {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 36upx;
			font-weight: 600;
			color: #fff;
		}
		
		.button-amount {
			position: absolute;
			right: 30upx;
			font-size: 36upx;
			font-weight: 700;
			color: #fff;
			font-family: 'Arial', sans-serif;
		}
	}
}

// 确认支付弹框样式
.confirm-dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	animation: fadeIn 0.3s ease;
	
	.dialog-content {
		width: 85%;
		max-width: 700upx;
		background: #fff;
		border-radius: 25upx;
		overflow: hidden;
		animation: slideUp 0.3s ease;
		box-shadow: 0 20upx 60upx rgba(0, 0, 0, 0.2);
		
		.dialog-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40upx 40upx 30upx;
			border-bottom: 1upx solid #f0f0f0;
			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
			
			.dialog-title {
				font-size: 36upx;
				font-weight: 600;
				color: #333;
			}
			
			.close-btn {
				width: 60upx;
				height: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.1);
				cursor: pointer;
				transition: all 0.2s ease;
				
				&:active {
					background: rgba(0, 0, 0, 0.2);
					transform: scale(0.95);
				}
				
				.iconfont {
					font-size: 32upx;
					color: #666;
					font-weight: bold;
				}
			}
		}
		
		.dialog-body {
			padding: 50upx 40upx;
			
			.confirm-amount-section {
				text-align: center;
				margin-bottom: 40upx;
				
				.confirm-label {
					display: block;
					font-size: 28upx;
					color: #666;
					margin-bottom: 25upx;
					font-weight: 500;
				}
				
				.confirm-amount-display {
					display: flex;
					align-items: baseline;
					justify-content: center;
					
					.confirm-currency {
						font-size: 60upx;
						font-weight: 600;
						color: #ff6b6b;
						margin-right: 10upx;
					}
					
					.confirm-amount {
						font-size: 100upx;
						font-weight: 700;
						color: #ff6b6b;
						font-family: 'Arial', sans-serif;
						text-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.3);
					}
				}
			}
			
			.confirm-tips {
				text-align: center;
				padding: 20upx 30upx;
				background: rgba(255, 107, 107, 0.1);
				border-radius: 15upx;
				border-left: 4upx solid #ff6b6b;
				
				.tip-text {
					font-size: 26upx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
		
		.dialog-footer {
			display: flex;
			border-top: 1upx solid #f0f0f0;
			padding: 30upx 40upx;
			gap: 20upx;
			
			.cancel-btn, .confirm-btn {
				flex: 1;
				height: 100upx;
				border: none;
				font-size: 32upx;
				font-weight: 600;
				transition: all 0.2s ease;
				border-radius: 50upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				overflow: hidden;
				
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
					opacity: 0;
					transition: opacity 0.2s ease;
				}
				
				&:active::before {
					opacity: 1;
				}
				
				&:active {
					transform: scale(0.98);
				}
			}
			
			.cancel-btn {
				background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
				color: #666;
				border: 2upx solid #dee2e6;
				box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
				
				&:active {
					background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
					border-color: #ced4da;
					box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
				}
			}
			
			.confirm-btn {
				background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
				color: #fff;
				box-shadow: 0 4upx 20upx rgba(255, 107, 107, 0.3);
				
				&:active {
					background: linear-gradient(135deg, #ff5252 0%, #ff4444 100%);
					box-shadow: 0 2upx 10upx rgba(255, 107, 107, 0.4);
				}
			}
		}
	}
}

// 弹框动画
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(50upx) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

</style>