hldy_app/pages/watch/settings/saoma.vue

250 lines
4.9 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/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>