<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/bgc.png" />
		<image class="big-img" src="@/static/qiu.png" />
		<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()
	}

	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-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: 1100rpx;
		height: 1100rpx;
	}
	.big-img{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 900rpx;
		height: 900rpx;
	}	
</style>