hldy_app/pages/watch/settings/input.vue

183 lines
3.4 KiB
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/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>