examTeamApp/pages/devices/scss/search.scss

.text {
		position: absolute;
		top: 0px;
		width: 100%;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 36rpx;
		color: $textcolor;
		font-weight: bold;
	}

	.tips {
		position: absolute;
		width: 100%;
		bottom: 15px;
		line-height: 24px;

		view {
			font-size: 32rpx;
			color: $textcolor;
			font-weight: bold;
			margin-left: 15px;
		}

		text {
			font-size: 32rpx;
			width: 100%;
			display: block;
			margin-left: 20px;
			color: #999;
		}
	}

	.list {
		position: absolute;
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.item {
			width: 30%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 55%;
			top: -10px;

			image {
				width: 45px;
				height: 45px;
				border-radius: 50%;
				background-color: #fff;
			}

			text {
				display: block;
				width: 100%;
				font-size: 32rpx;
				color: #666;
				margin-top: 5px;
				text-align: center;
			}
		}

		.item:nth-of-type(2) {
			left: calc(55% - 60px);
			top: 50px;
		}

		.item:nth-of-type(3) {
			left: calc(50% - 140px);
			top: 90px;
		}

		.item:nth-of-type(4) {
			left: calc(61% + 20px);
			top: 70px;
		}

		.item:nth-of-type(5) {
			left: 20%;
			top: -100px;
		}

		.item:nth-of-type(6) {
			left: calc(20% - 16px);
			top: -38px;
		}

		.item:nth-of-type(7) {
			left: 0;
			top: 15px;
		}

		.item:nth-of-type(8) {
			left: calc(20% + 75px);
			top: -150px;
		}

		.item:nth-of-type(9) {
			left: calc(20% + 96px);
			top: -80px;
		}

		.item:nth-of-type(10) {
			left: 37px;
			top: -170px;
		}

		.item:nth-of-type(11) {
			left: calc(20% + 75px);
			top: 130px;
		}

		.item:nth-of-type(12) {
			left: -10px;
			top: -104px;
		}

		.item:nth-of-type(13) {
			left: calc(47% + 75px);
			top: -150px;
		}

		.item:nth-of-type(14) {
			left: calc(53% + 75px);
			top: -50px;
		}

	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}

	// 中心园
	.container::after {
		content: "";
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #fbb780;
		position: absolute;
		z-index: 9;

	}

	/* 定义范围*/
	.point-area {
		text-align: center;
		position: relative;
		width: 400rpx;
		height: 400rpx;
		transition: opacity 0.5s ease-out;
	}

	.point-10,
	.point-40,
	.point-80,
	.point-100,
	.point-120 {
		width: 100%;
		height: 100%;
	}

	.point-10:after,
	.point-40:after,
	.point-80:after,
	.point-100:after,
	.point-120:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: 50%;
		opacity: 0;
		border: 1px solid #f7cb6b;
		animation-play-state: paused;
		-webkit-animation-play-state: paused;
	}

	.point-10:after {
		content: '';
		animation: ripple 3000ms linear 0ms infinite;
	}

	.point-40:after {
		content: '';
		animation: ripple 3000ms linear 600ms infinite;

	}

	.point-80:after {
		content: '';
		animation: ripple 3000ms linear 1200ms infinite;
	}

	.point-100:after {
		content: '';
		animation: ripple 3000ms linear 1800ms infinite;
	}

	.point-120:after {
		content: '';
		animation: ripple 3000ms linear 2400ms infinite;
	}


	@keyframes ripple {

		0% {
			opacity: 0;
			transform: scale(0.1);
		}

		50% {
			opacity: 0.8;
			transform: scale(1);
		}

		100% {
			opacity: 0.2;
			transform: scale(2.2);
		}

	}