<template>
	<view>
		<view style="padding: 10rpx 20rpx;background: #F0F0F0;display: flex;flex-wrap: wrap;">
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(1)">1</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(2)">2</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(3)">3</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(4)">4</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(5)">5</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(6)">6</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(7)">7</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(8)">8</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(9)">9</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick('.')">.</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="btnClick(0)">0</view>
			</view>
			<view class="btn-box">
				<view class="click-effect btn-item" @click="backspace"  style="background: #ccc;">
					<u-icon name="backspace" color="#333" size="70rpx"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	name: 'keyword',
	components: {},
	data() {
		return {
			
		};
	},
	computed: {
		
	},
	created() {
		
	},
	methods: {
		btnClick(e) {
			this.$emit('change', e)
		},
		backspace() {
			this.$emit('backspace')
		}
	},
	onReachBottom() { },
	onPullDownRefresh() { },
}
</script>

<style scoped lang="scss">
.btn-box {
		width: 33.33%;
		padding: 10rpx;
	}
	.btn-item {
		background: #FFF;
		line-height: 110rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 46rpx;
		text-align: center;
		font-weight: bold;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.click-effect {
		position: relative;
		overflow: hidden;
	}

	.click-effect:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100px;
		height: 100px;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: transform 0.15s, opacity 0.15s, background-color 0.15s;
	}

	.click-effect:active:after {
		opacity: 1;
		transform: translate(-50%, -50%) scale(2);
		background-color: rgba(0, 0, 0, 0.2);
	}

</style>
