hldy_app/component/Initialization/saoma.vue

<template>
	<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
		<view class="index-content-right">
			<view class="index-content-title">
				<view class="shu"></view>
				<view class="shu-font">护理机构A</view>
			</view>
		</view>
		<view class="saomiao">
			<view class="saomiao-son">
				<view class="saomiao-son-son">
					<view class="saomiao-son-son-img">

					</view>
				</view>
			</view>
		</view>
		<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 emit = defineEmits(['nav'])
	const props = defineProps({ isShow: { type: Boolean, required: true } })

	const transition = ref(true)


	// 区分首次渲染与动态添加
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				transition.value = false
				setTimeout(() => (transition.value = true), 50)

			}
		}
	)
</script>

<style scoped lang="less">
	.index-content-other {
		width: calc(100% - 170rpx);
		height: 100%;
		transition: opacity 1s ease;
		position: relative;
	}

	.index-content-down {
		width: calc(100% - 60rpx);
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.index-content-right {
		height: calc(100% - 100rpx);
		width: calc(100% - 60rpx);
		background-color: rgba(255, 255, 255, 0.8);
		background-image: url('/static/index/leida/bgc.png');
		background-position: 30% 70%;
		border-radius: 50rpx;
		box-shadow: 4rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.3);
		display: flex;
		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%);
		width: 400rpx;
		height: 400rpx;
		background-image: url("@/static/index/leida/fourjiao.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			// height: 4rpx;
			// background-color: #05AAFE;
			/* 初始给个向下的阴影（扫描线起点在顶部） */
			// box-shadow: 0 5rpx 8rpx #9EBFEF;
			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;
		}

		.saomiao-son {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 360rpx;
			height: 360rpx;
			border-radius: 50rpx;
			background-color: rgb(218, 228, 248);

			.saomiao-son-son {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 320rpx;
				height: 320rpx;
				border-radius: 50rpx;
				background-color: rgb(208, 224, 246);

				.saomiao-son-son-img {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 250rpx;
					height: 250rpx;
					border-radius: 30rpx;
					background-image: url("@/static/index/leida/QR.png");
					background-repeat: no-repeat;
					background-attachment: fixed;
					background-size: cover;
				}
			}
		}
	}

	// 扫描动画关键帧
	@keyframes scanMove {
		0% {
			top: 10%;
		}

		// 50% {
		// 	top: 100%;
		// }

		100% {
			top: 80%;
		}
	}
</style>