QT_cadreData_DP/pages/index/index.vue

<template>
	<view class="home" :style="homeBj">

		<view class="bjBox" :style="bjBoxBj">
			<view class="text">
				青田干部信息管理系统
			</view>
			<view class="passwordBox">
				<hackout-draw-lock :width='width' background="rgba(0,0,0,0)" :circle-width="64"
					line-color="rgb(129, 129, 129)" line-background="rgba(152, 152, 152, 0.5)" :height='height'
					@change="success" @start="startDraw"></hackout-draw-lock>
			</view>
		</view>

	</view>
</template>

<script>
	import hackoutDrawLock from "@/components/hackout-draw-lock/hackout-draw-lock.vue"

	export default {
		components: {
			hackoutDrawLock,
			// videoPlayer
		},
		data() {
			return {
				homeBj: {
					background: "url('../../static/imgs/qidong.png') no-repeat",
					backgroundSize: "100% 100%"
				},
				bjBoxBj: {
					background: "url('../../static/imgs/dengruk.png') no-repeat",
					backgroundSize: "100% 100%"
				},
				width: 320,
				height: 320,
				pass: '',
				isPass: false,
				lineError: false,
				password: '12369',

			};
		},
		onLoad() {
			if (uni.getStorageSync('line_pass')) {
				this.password = uni.getStorageSync('line_pass')
			}
		},
		mounted() {

		},
		methods: {
			//图形密码绘制完成
			success(data) {
				//验证图形密码
				this.pass = data.join('')
				if (this.pass != this.password) {
					uni.showToast({
						title: '密码错误',
						icon: 'none'
					})
					return
				}
				uni.reLaunch({
					url: '/pages/home/home'
				})
			},
			startDraw() {
				this.lineError = false
				this.pass = ''
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100%;
		position: relative;


		.bjBox {
			width: 55%;
			height: 88%;
			padding-top: 300rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.text {
				font-size: 50rpx;
				text-align: center;
				letter-spacing: 5rpx;
			}

			.passwordBox {
				width: 80%;
				height: 80%;
				margin: 0 auto;
			}
		}
	}
</style>