feat:车辆管理

src/components/tongtong-plate/plate-keyboard.vue

@@ -0,0 +1,277 @@
+<template>
+	<view class="plate-number-keyboard-box" v-if="showKeyboard" @tap.stop>
+		<view class="pnk-main" :animation="animationData">
+			<view class="pnk-main-title">
+				<text>请点击选择车牌号</text>
+				<view class="xiala" @tap="_closeKeyboard"></view>
+			</view>
+			<view class="pnk-content">
+				<!-- 省份面板 -->
+				<view class="province-plane" v-if="showProvince">
+					<block v-for="(item, index) in provinceList" :key="index">
+						<view class="line">
+							<view v-if="index === 'line4'" class='number-item handle-btn' @tap='_clickChangePlane'>ABC
+							</view>
+							<view class="number-item"
+								:class="(cursor === 0 && index === 'line4' && ind >= 2) || (cursor >= 6 && (index !== 'line4' || (index === 'line4' && ind < 2))) ? 'disabled' : ''"
+								v-if="!((cursor === 0 && index === 'line4' && ind > 7) || (cursor >= 6 && index === 'line4' && ind < 2))"
+								v-for="(it, ind) in item" :key="ind" :data-text='it'
+								:data-disabled="(cursor === 0 && index === 'line4' && ind >= 2) || (cursor >= 6 && (index !== 'line4' || (index === 'line4' && ind < 2)))"
+								@tap='_handleClick'>{{ it }}</view>
+							<view v-if="index === 'line4'" class='number-item handle-btn delete-btn'
+								@tap='_handleDelete'></view>
+						</view>
+					</block>
+				</view>
+				<!-- 字母数字面板 -->
+				<view class='letter-number-plane' v-if="!showProvince">
+					<block v-for="(item, index) in letterNumberList" :key="index">
+						<view class='line'>
+							<view v-if="index === 'line4' && cursor === 0" class='number-item handle-btn'
+								@tap='_clickChangePlane'>省</view>
+							<view v-if="index === 'line4' && cursor > 0" class="number-item handle-btn"
+								:class="cursor < 6 ? 'disabled' : ''" :data-disabled="cursor < 6"
+								@tap='_clickChangePlane'>字</view>
+							<view class="number-item"
+								:class="index === 'line2' && (it === 'I' || it === 'O') ? 'disabled' : ''"
+								:data-disabled="index === 'line2' && (it === 'I' || it === 'O')"
+								v-for="(it, ind) in item" :key="ind" :data-text='it' @tap='_handleClick'>{{ it }}</view>
+							<view v-if="index === 'line4'" class='number-item handle-btn delete-btn'
+								@tap='_handleDelete'></view>
+						</view>
+					</block>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		cursor: {
+			type: Number,
+			default: 0,
+		}
+	},
+	data() {
+		return {
+			showKeyboard: true, // 是否显示键盘
+			provinceList: {
+				line1: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏'],
+				line2: ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼'],
+				line3: ['川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新'],
+				line4: ['藏', '使', '领', '警', '学', '挂', '港', '澳', '试', '超', '军']
+			},
+			letterNumberList: {
+				line1: [1, 2, 3, 4, 5, 6, 7, 8, 9, '0'],
+				line2: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+				line3: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+				line4: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
+				// line5: ['领', '警', '学', '挂', '港', '澳', '试', '超', '军']
+			},
+			showProvince: true, // 是否显示省份面板，控制省份面板和字符面板显示
+			animationData: {} // 键盘动画
+		};
+	},
+	watch: {
+		cursor(val) {
+			this.showProvince = (val === 0);
+		},
+	},
+	created() {
+		this.showProvince = (this.cursor === 0);
+	},
+	methods: {
+		show() {
+			this.showKeyboard = true;
+
+			const animation = uni.createAnimation({
+				duration: 200,
+			});
+			// 立即执行无效，延迟一段时间执行弹出动画
+			setTimeout(() => {
+				animation.translateY(0).step();
+				this.animationData = animation.export();
+				this.$emit('onShow');
+			}, 100);
+		},
+		hide() {
+			const animation = uni.createAnimation({
+				duration: 200
+			})
+			setTimeout(() => {
+				animation.translateY(300).step();
+				this.animationData = animation.export();
+				setTimeout(() => {
+					this.showKeyboard = false;
+				}, 300);
+				this.$emit('onHide');
+			}, 100);
+		},
+		/**
+		 * 键盘面板切换操作，控制省份内容和字符内容显示
+		 */
+		_clickChangePlane: function (e) {
+			if (e.currentTarget.dataset.disabled) {
+				return;
+			}
+			this.showProvince = !this.showProvince
+		},
+		/**
+		 * 关闭键盘，将键盘隐藏
+		 */
+		_closeKeyboard: function (e) {
+			// 创建动画，执行键盘面板退出动画，动画结束后隐藏整个键盘组件
+			this.hide();
+		},
+
+		/**
+		 * 键盘主要键点击事件，将点击内容更新到plateNumber
+		 */
+		_handleClick: function (e) {
+			// 如果当前显示的省份面板，当即任意省份后，自动切换到字符面板，同时将结果值的第一个字符修改
+			if (e.currentTarget.dataset.disabled) {
+				return;
+			}
+			if (this.showProvince) {
+				this.showProvince = false;
+			}
+			if (this.cursor === 7) {
+				this.hide();
+			}
+			this.$emit('onInput', e.currentTarget.dataset.text);
+		},
+		_handleCursor: function (e) {
+			console.log(e.currentTarget.dataset.index)
+			this.cursor = e.currentTarget.dataset.index;
+		},
+		/**
+		 * 删除回退点击事件
+		 */
+		_handleDelete: function () {
+			this.$emit('onDel');
+		},
+	},
+}
+</script>
+
+<style scoped>
+button {
+	padding: 0rpx;
+}
+
+.plate-number-keyboard-box {
+	position: fixed;
+	bottom: 0rpx;
+	left: 0rpx;
+	width: 100%;
+	height: 432rpx;
+	overflow: hidden;
+	background: rgba(255, 255, 255, 0);
+	z-index: 9999;
+}
+
+.pnk-main {
+	position: absolute;
+	bottom: 0;
+	left: 0rpx;
+	height: 432rpx;
+	width: 100%;
+	background: #d0d5d9;
+	transform: translateY(432rpx);
+	color: #333333;
+}
+
+.pnk-main .pnk-main-title {
+	font-size: 24rpx;
+	height: 50rpx;
+	line-height: 50rpx;
+	color: #333;
+	border-bottom: 1rpx solid #ddd;
+	padding: 0rpx 10rpx;
+	overflow: hidden;
+}
+
+.pnk-main-title text {
+	float: left;
+}
+
+.pnk-main-title .xiala {
+	position: relative;
+	float: right;
+	width: 70rpx;
+	height: 50rpx;
+	font-size: 40rpx;
+	text-align: center;
+	color: #333;
+}
+
+.pnk-content {
+	padding: 10rpx;
+}
+
+.line {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	margin-bottom: 14rpx;
+}
+
+.line:last-of-type {
+	margin-bottom: 0rpx;
+}
+
+.line .number-item {
+	width: 60rpx;
+	height: 80rpx;
+	border-radius: 12rpx;
+	text-align: center;
+	line-height: 80rpx;
+	background: #fff;
+	font-size: 30rpx;
+}
+
+.line .number-item.disabled {
+	background: #ccc !important;
+	color: #999 !important;
+}
+
+.line .number-item:active {
+	background: #eee;
+}
+
+.line .handle-btn {
+	width: 80rpx;
+	background: #acb3bb;
+	font-size: 28rpx;
+}
+
+.xiala::after {
+	content: '';
+	position: absolute;
+	left: calc(50% - 14rpx);
+	top: calc(50% - 8rpx);
+	width: 28rpx;
+	height: 28rpx;
+	background-size: 100%;
+	background-repeat: no-repeat;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAsCAMAAADFL88lAAAAclBMVEUAAAADGyYDGyYAADUDGyYAKjMAKysAIiIDGyYDGyYDGyYDGiYDGyYDGyYDGiYDGiUCGiYDGyYDGyYDGyUEGyYDGyYDGiUCGyYDGyUEGyUCGiUAGCYDGyYDGyYCGiUAGCQDHCYDGiUCHCcDHCcDGyYDHSnHUSRaAAAAJHRSTlMA/fsD+AUGB7yzubatqaSdf6+XkYvcwczGhHoK8udqDmVLb1ulZTqDAAACG0lEQVRIx6XV6WLCIAwA4AAF6rGtHvWaO9zg/V9xIVaMomuh+VWRfhBIAUA17bHdW9AwIjSYfVu1DSK69s45v/0CW+5Z+NoRUyto/FE6WfntO4ml3tZXyBx9A62TDqNYJO8dvaAI9wH0QOLOgi30dsEjUUCLLD1WfmPA5HuGvDMicYaHiFdhSXX+/troYZoHgBp/losazIYBU2xSscFRg87z9OY2RWxSNRNnACZn/dSdp0Kj5uIkQ7Q0Ge4ZaiYxVs8CxaEeTNmLUwWWDSTjQC+D1pGGncXUJHnxLy5K/zpApC4T7t0kpmP1kPgGoAZ48+srSXmoVMzwsDjiC0ycZojovTBvknSneuTi8onIPcc8/bCoZqnY7z0vNBvKQEZxdRVT75V1XNCrz8WuDoRfo9jnOe6lYfgchd9zkXtvfH7/Fq1ixS87MfWWzJtTl8Fi86i8VmdP4H50Xo84ScTEY599/yd1Lyp1463RyztGbBRFEA8kMk9grvEQMQADRXm5xkjknnQuz6NuXPxBsdyj0LfiJ4p3nkAv2Y/eveZiIPdedPUio5chLpj4DUZBc/FkPN6KRHEW4XDJV1Y5Ht+ZORN/P4Mn4vGrITtsEOVFxOg8gV4YbrQY93cZvaKshegg5mkoDBXneNauV0OxyC43+rSv3niR6m9V5KUXnOQX18gwdCVVQlTk0X6MFtfeO+dTr3wdT5vjR30alO8fxlZei+kmmyYAAAAASUVORK5CYII=);
+}
+
+.delete-btn {
+	position: relative;
+}
+
+.delete-btn::after {
+	content: '';
+	position: absolute;
+	left: calc(50% - 18rpx);
+	top: calc(50% - 15rpx);
+	width: 36rpx;
+	height: 36rpx;
+	background-size: 100%;
+	background-repeat: no-repeat;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAvCAMAAACIYFl1AAAAk1BMVEUAAAADGyYAHCsAHh8DGyUDHCYDGyYAHykDGycDGyYDGyYAHSYEGiUAHCcDGyYCGyYEGyYAFCoCGyYDGyYCGiYDGyYDGyYEGSYFGyUDGyYDGyUDGiYCGycCGyYCGiYDGiYDGiUAHCgDGyYDGiYEGyQFGiUDGyYDGyYEGyUDGyUAHSQDGyYAGiUDGyUDGyYDGyYDHCi5/q4pAAAAL3RSTlMA+gQI/En3GeFj8RFFItl8QgzN49S+Wjs06LKSd3JrV00q3rg5L8aah1IX6x2splBDDs0AAAJiSURBVEjHrZaNdvIgDIYDxTptrbbz/3/qpvPbRu7/6j4Sh7Ht2VnpGdtRAzzkBQIEHosG2GTKNin94wgqrD4i2mYFcVOBzxgbo/jfFyW/lPJVylhlMAUpEaTsFpsUa2M8lkSP0TjWWPfnfvgvSx/++7uRq/qPji/oGnE123d+KfvRdEF+Hth5jMZgAU2KPqASWANMyLYnSKJbyaOfSgKDZ4HJ8caJVniByA+na+703VP3iWHPvvxDpTDToO8dK7TURB729Z/OUpgKO1x7yhPDIbfW4SlaE+MZtK/oIfbIEtbXCOzncMBY4SLxjuHdosUdaGF3VPMOugyTvcLYid7d2ZGlwWwqs0wNKoM4Al2FUxb9CXe4W/ASmJnXOe9zRXatwBqigvz0ByB7kYxdq8F4DtrvhWMPSVk2WUMWvS0tLYcBjxhpbyw+mC3Br5ZET3R5cV9vQp+6QDJo9PilslUclyRascBH+hQzneX6jVlFC1CFt9x0qUZUDh3L835bcgdZeoFhEJPoIhfWd6HIId/EWpxKB4GXJBo79wNRCSpjFQ+wBV2HeyxtJaJLR2H9fZWYNVk1OEOlaDvzOku+CurktoII+EPPMud9qznDB6/2OAla7fb7XI8wcwqKMIlt0za25VRtQk+VnGcaOPQ8+1uHhC9b3CRyh/Va3GHOvmZ8EV3Db09uQhL+5eGAe5uqvnhO+6AXQ7ZmQXN6zoPfKra3TriiByf4lSTkSDaOgt5niUfODLKwzEAWhHOS8ykkJxHhRXg2JK5nNjgPE5qi9JbgBWSAksZN2uSekvWOG2a9yxnAf+zPn543ZzPrAAAAAElFTkSuQmCC);
+}
+</style>

src/components/tongtong-plate/plate-number.vue

@@ -0,0 +1,312 @@
+<template>
+	<view class="plate-number">
+		<view class="plate-number-box" :class="plate[7] && 'green'" @tap.stop>
+			<template v-for="(item, index) in 8" :key="`plate-${index}`">
+				<text v-if="index == 2" class="fz-000000 fz-weight fz-32">·</text>
+				<label :id="'input' + index"
+					:class="[(index == cursor && focus ? 'focus' : '') + (index === 7 && !plate[index] ? ' xinnengyuan' : ''), 'bglabel']"
+					:data-index="index" @tap='_handleCursor'>
+					{{ plate[index] || '' }}
+				</label>
+			</template>
+		</view>
+		<plate-keyboard ref='plateKeyboard' :cursor="cursor" @onInput="_keyboardInput" @onDel="_keyboardDel"
+			@onShow="plateKeyboardOnShow" @onHide="plateKeyboardOnHide" />
+	</view>
+</template>
+
+<script>
+import PlateKeyboard from './plate-keyboard.vue';
+
+export default {
+	components: {
+		PlateKeyboard
+	},
+	data() {
+		return {
+			plate: new Array(8),
+			cursor: 0,
+			focus: false,
+		}
+	},
+	created() {
+		// 根据IP获取到当前省份
+		this.getLocationByIP();
+	},
+	methods: {
+		setPlate: function (plateNumber) {
+			const plate = plateNumber.split('');
+			while (plate.length < 8) {
+				plate.push('');
+			}
+			this.plate = plate;
+			this.cursor = plateNumber.length;
+			this.focus = false;
+		},
+		getPlate: function () {
+			return this.plate.join('');
+		},
+		onInput: function (text) {
+			// 车牌号最多8位，大多数7位，新能源8位，控制不能超过8位数
+			if (this.cursor < 8) {
+				this.plate.splice(this.cursor++, 1, text);
+			}
+		},
+		onDel: function () {
+			if (this.plate[this.cursor]) {
+				this.plate.splice(this.cursor, 1, '');
+			} else if (this.cursor > 0) {
+				this.plate.splice(--this.cursor, 1, '');
+			}
+		},
+		_handleCursor: function (e) {
+			let index = parseInt(e.currentTarget.dataset.index);
+			for (; index > 0 && !this.plate[index] && !this.plate[index - 1]; index--);
+
+			this.cursor = index;
+			this.focus = true;
+
+			this.$refs.plateKeyboard.show();
+		},
+
+		hidePlateKeyboard() {
+			this.$refs.plateKeyboard.hide();
+		},
+		_keyboardInput(val) {
+			console.log('===input：' + val);
+			this.onInput(val);
+		},
+		_keyboardDel() {
+			console.log('===del')
+			this.onDel();
+		},
+		plateKeyboardOnShow() {
+			this.$emit('plateKeyboardOnShow');
+		},
+		plateKeyboardOnHide() {
+			this.focus = false;
+			this.$emit('plateKeyboardOnHide');
+		},
+
+		async getLocationByIP() {
+			if (getApp().globalData.provinceShort) {
+				this.setPlate(getApp().globalData.provinceShort);
+			} else {
+				if (!this.$Request) {
+					return;
+				}
+
+				const res = await this.$Request(this.$Api.general.park.getLocationByIP, {});
+				if (res.success) {
+					var prov = res.data.province;
+					if (prov) {
+						let provShort = this.provinceForShort(prov);
+						if (provShort) {
+							getApp().globalData.provinceShort = provShort;
+							if (!this.getPlate()) {
+								this.setPlate(provShort);
+							}
+						}
+					}
+				}
+			}
+		},
+		provinceForShort(province) {
+			if (province == "北京市")
+				return "京";
+			else if (province == "天津市")
+				return "津";
+			else if (province == "重庆市")
+				return "渝";
+			else if (province == "上海市")
+				return "沪";
+			else if (province == "河北省")
+				return "冀";
+			else if (province == "山西省")
+				return "晋";
+			else if (province == "辽宁省")
+				return "辽";
+			else if (province == "吉林省")
+				return "吉";
+			else if (province == "黑龙江省")
+				return "黑";
+			else if (province == "江苏省")
+				return "苏";
+			else if (province == "浙江省")
+				return "浙";
+			else if (province == "安徽省")
+				return "皖";
+			else if (province == "福建省")
+				return "闽";
+			else if (province == "江西省")
+				return "赣";
+			else if (province == "山东省")
+				return "鲁";
+			else if (province == "河南省")
+				return "豫";
+			else if (province == "湖北省")
+				return "鄂";
+			else if (province == "湖南省")
+				return "湘";
+			else if (province == "广东省")
+				return "粤";
+			else if (province == "海南省")
+				return "琼";
+			else if (province == "四川省")
+				return "川";
+			else if (province == "贵州省")
+				return "贵";
+			else if (province == "云南省")
+				return "云";
+			else if (province == "陕西省")
+				return "陕";
+			else if (province == "甘肃省")
+				return "甘";
+			else if (province == "青海省")
+				return "青";
+			else if (province == "台湾省")
+				return "台";
+			else if (province == "内蒙古自治区")
+				return "蒙";
+			else if (province == "广西壮族自治区")
+				return "桂";
+			else if (province == "宁夏回族自治区")
+				return "宁";
+			else if (province == "新疆维吾尔自治区 ")
+				return "新";
+			else if (province == "西藏自治区")
+				return "藏";
+			else if (province == "香港特别行政区")
+				return "港";
+			else if (province == "澳门特别行政区")
+				return "澳";
+			else return '';
+		}
+	},
+}
+</script>
+
+<style scoped>
+.plate-number {
+	/* display: flex; */
+	/* justify-content: spa; */
+}
+
+.plate-number-box {
+	position: relative;
+	/* height: 50rpx; */
+	padding: 24rpx 0;
+	box-sizing: content-box;
+	margin: auto;
+	border-radius: 10rpx;
+	transition: all 1s;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+/* .plate-number-box::before {
+		content: '';
+		border: 2rpx solid #fff;
+		position: absolute;
+		top: 5rpx;
+		left: 5rpx;
+		border-radius: 10rpx;
+		height: 86rpx;
+	} */
+.bglabel {
+	background-color: #F2F5FA;
+}
+
+/* .plate-number-box::after {
+		content: '·';
+		position: absolute;
+		left: 122rpx;
+		top: 30rpx;
+		color: #fff;
+		font-size: 50rpx;
+		line-height: 40rpx;
+	} */
+
+.plate-number-box.green {
+	/* background: linear-gradient(#f8f8f8 20%, #16b235); */
+	box-shadow: 0 0 4rpx 0 #ebebeb;
+}
+
+/* 	.plate-number-box.green::before {
+		border: 2rpx solid #000;
+	} */
+
+/* .plate-number-box.green::after {
+		content: '';
+		position: absolute;
+		left: 120rpx;
+		top: 36rpx;
+		width: 26rpx;
+		height: 26rpx;
+		background-size: 100%;
+		background-repeat: no-repeat;
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAF6UExURUdwTH3EyJfLtffOk9mwguW7jHvftPvQofnPoVlKOYzOo4jMs5HPp5fIvqbYnOhFQfrCkJG6pIbLw4vUzYjKv5vjs9q8JvLPn4bJpJHqtYrNqnStopDh3oLJwViHcIjLv3q2qozMvmRYSYfLpovMqm6ggum9j+PMnqDSuqTQuOjOpKPOoGaZfnGqi+DCKXooHt20hqWvqW9fEMt9bKG7p8LDXnuSiKS4o////zqp4Deo4jCuMS2tLfTz8+vr7OUUW9rZ22JbUvv8/Uuy2zGxMUO2SiaZJ9DhLjdEOkpPTckubzSj2lu62VO+YDJERD9NR/f290JFQbe1tV3BbuLg4d/c3bXXLzIxJ1dVUj1OVnHF0W3IhMXCwSlMXhlAGiZOJ8zhL0ZiUVdfW7mGmU1aVqakpZiWlyNGV2mnp4KBgkpybhg9UTKh2bbWKmlnZLDcfbrcMWeofoOMGaa3IzpLVFx3GcngQ9wzaa/chHoJLK0NRGEiRWppaD1PV9NqRZ0AAAA4dFJOUwATR/X49w/6+v3hs3ByFPT09uNHzUf0+Swpy+YuL+Xw1f398P3c9/f98Pu6yMb0+vjc+vi5+NyxP0I0ygAAAWxJREFUKM910ldXwjAYBuC0KgqlVeZhKEPAhXuGKYIIKKscNsjGvff87yZNOdYLn8v3bZKTLwWAoGjGardbGQ0FpChWXU1GkOSZjZVUU9pqxOvxeL0e72X8Qjs5yDXqJMqI4/p52qwRv1dHBjEq8jCXNgtrKG1SyI+wq9MChPW0TYYKtnuIfaa/K5XKUyIIITzpsWjB2usu8v4VDGBZlMNsYpsDdBfnH3wgLICCfocGmxvjyEpJTpTxVjCU2QHzs0PYiEgewkWgpwJzC2PYqGg6RA75pwiXVWirCWRmdZggWwXRCveWXq9fXi/tETfi4W5Av8VardgjH4QS/bYOcIqXGPJQllwQdlwcAMrb62KxePdcimPCSHIZJZqVzJTy+3y+/QNBAw0xn1nEQwQGRVRoMF8zDwsJi5E8CK1I+XGF+JuhPm/RDZ7QYKpF/USDby8Zfx9dplTUUlEkde9Syv78JxzNOJxOB6PjxOAHI6di/dhTK/cAAAAASUVORK5CYII=);
+	} */
+
+.plate-number-box.green label {
+	color: #222;
+	text-shadow: 0 0 2rpx #fff;
+}
+
+.plate-number-box label {
+	width: 60rpx;
+	position: relative;
+	vertical-align: middle;
+	display: inline-block;
+	/* width: 8%; */
+	color: #fff;
+	text-align: center;
+	font-size: 50rpx;
+	height: 86rpx;
+	line-height: 86rpx;
+	text-shadow: 0rpx 0rpx 2rpx #000;
+	/* margin: 0 10rpx; */
+}
+
+.plate-number-box label:nth-child(2) {
+	/* margin-right: 20rpx; */
+}
+
+.plate-number-box label:last-child {
+	content: "\e63f";
+}
+
+/* .plate-number-box label.focus::after {
+		content: '';
+		position: absolute;
+		bottom: -6rpx;
+		left: 5%;
+		width: 90%;
+		height: 4rpx;
+		background: #fff;
+		animation: cursor 1s ease-in infinite;
+	} */
+
+/* .plate-number-box label.xinnengyuan::before {
+		content: '';
+		position: absolute;
+		left: 12%;
+		top: 12%;
+		width: 76%;
+		height: 76%;
+		background-size: 100%;
+		background-repeat: no-repeat;
+		
+	} */
+
+@keyframes cursor {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0.2;
+	}
+}
+</style>