hldy_app/pages/watch/settings/saoma.vue

<template>
	<view class="index-content-other">
		<view class="index-content-right" @click="goback">
			<image class="back-img" :src="`/static/index/settings/back.png`" />
			返回
		</view>
		<view class="saomiao">
			<!-- <view class="big-ball">
				<view class="ball"></view>
			</view>
			<image class="left-img" src="@/static/click.png" />
			<input class="saoma-input" :password="false" v-model="uuid" placeholder="请手动录入NUID" />
			<image v-show="uuid" class="right-img" src="@/static/x.png" @click="uuid=''" />
			<view class="blue-button">
				确定
			</view> -->
		</view>
		<image class="big-bgc" src="@/static/kuai.png" />
		<view class="big-img" @click="onScan">
			<image style="width: 100%;height: 100%;" src="@/static/sao.png" />
			<view class="big-font">
				点击扫描区域二维码
			</view>
		</view>

		<image class="big-QR" src="@/static/qr.png" @click="onScan" />
		<view class="index-content-down">
			长春市朝阳区久泰开运养老服务有限公司
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, nextTick } from 'vue'
	import { defineProps, defineEmits } from 'vue'
	const goback = () => {
		uni.navigateBack()
	}
	function onScan() {
	  uni.scanCode({
	    // 仅使用相机扫码，设置为 false 则可以从相册选择图片扫码（部分平台可能不支持）
	    onlyFromCamera: true,
	    scanType: ['qrCode', 'barCode'],
	    success(res) {
	    },
	    fail(err) {
	      // uni.showToast({ title: '扫码失败：' + err.errMsg, icon: 'none' })
	    }
	  })
	}
	const uuid = ref("")
</script>

<style scoped lang="less">
	.index-content-other {
		width: 100%;
		height: 100%;
		transition: opacity 1s ease;
		position: relative;
		background-color: #EFF0F4;
	}

	.index-content-down {
		// width: calc(100% - 60rpx);
		// height: 100rpx;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.index-content-right {
		width: 100%;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		padding-top: 100rpx;
		font-size: 32rpx;
		position: relative;

		.index-content-title {
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			display: flex;
			align-items: center;

			.shu {
				width: 20rpx;
				height: 50rpx;
				background: linear-gradient(to right, #0052C2, #00B4FF);
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			.shu-font {
				color: #415273;
				font-size: 35rpx;
			}

		}
	}

	.saomiao {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		z-index: 1;

		// .saoma-input {
		// 	background-color: #fff;
		// 	width: 550rpx;
		// 	height: 90rpx;
		// 	border-radius: 30rpx;
		// 	padding-left: 100rpx;
		// 	z-index: 2;
		// }

		// .left-img {
		// 	width: 50rpx;
		// 	height: 50rpx;
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 30rpx;
		// 	transform: translateY(-50%);
		// 	z-index: 3;
		// }

		// .right-img {
		// 	width: 50rpx;
		// 	height: 50rpx;
		// 	position: absolute;
		// 	top: 50%;
		// 	right: 220rpx;
		// 	transform: translateY(-50%);
		// 	z-index: 2;
		// }
	}

	.blue-button {
		// margin-top: 20rpx;
		margin-left: 30rpx;
		width: 170rpx;
		height: 90rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #007CFF;
		font-size: 30rpx;
		background-color: #ddf0ff;
		border: 1rpx solid #007CFF;
	}

	.big-ball {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 50%;
		left: -55rpx;
		transform: translateY(-50%);
		border-radius: 50%;
		background-color: rgb(219, 228, 246);

		.ball {
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background-color: rgb(207, 221, 241);
		}
	}

	.back-img {
		width: 30rpx;
		height: 30rpx;
		margin-left: 100rpx;
		margin-right: 20rpx;
	}

	.big-bgc {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1800rpx;
		height: 900rpx;
		
	}

	.big-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 350rpx;
		height: 350rpx;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			animation: scanMove 1.3s ease-in-out infinite;
			z-index: 1001;
			height: 80rpx; // 尾巴长度
			background: linear-gradient(to bottom,
					rgba(5, 170, 254, 0.6),
					rgba(5, 170, 254, 0.1),
					transparent);
			will-change: transform;
		}
	}

	.big-QR {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 300rpx;
		height: 300rpx;
	}
	.big-font{
		position: absolute;
		// bottom: -50rpx;
		color: #888A8B;
		left: 0;
		bottom: -80rpx;
		// width: 300rpx;
		font-size: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		// transform: translateX(-50%);
	}
	// 扫描动画关键帧
	@keyframes scanMove {
		0% {
			top: 5%;
		}
		100% {
			top: 95%;
		}
	}
</style>