857 lines
18 KiB
Vue
857 lines
18 KiB
Vue
<template>
|
||
<view class="login-container">
|
||
<!-- 扫码遮罩层 -->
|
||
<view v-show="scanning" class="scan-mask">
|
||
<!-- 半透明背景自动铺满 -->
|
||
<view class="mask-bg" @click="cancelScan"></view>
|
||
<!-- 扫描框容器，绝对居中 -->
|
||
<view class="mask-center" @click.stop >
|
||
<div id="reader" class="reader"></div>
|
||
<!-- <view class="cancel-btn" @click="scanQrCode">取消扫描</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="index-up">
|
||
<image class="index-up-img" src="@/static/index/indexgif.gif" mode="widthFix" lazy-load="false" />
|
||
</view>
|
||
|
||
<view class="index-ball-father">
|
||
<view class="white-ball">
|
||
<image class="small-img" @click="gotoPay" src="@/static/index/button/money.png" mode="widthFix"
|
||
lazy-load="false" />
|
||
</view>
|
||
<view class="white-ball">
|
||
<image class="small-img" src="@/static/index/button/scan.png" mode="widthFix" lazy-load="false" />
|
||
</view>
|
||
<view class="white-ball">
|
||
<image class="small-img" src="@/static/index/button/watch.png" mode="widthFix" lazy-load="false" />
|
||
</view>
|
||
<view class="super-white-ball" @click="jumpTo">
|
||
<image class="small-img" src="@/static/index/button/more.png" mode="widthFix" lazy-load="false" />
|
||
</view>
|
||
</view>
|
||
<view class="index-smallPhoto">
|
||
<view class="photo-box" @click="preview()">
|
||
<image class="photo-box-img" src="@/static/index/kuai.png" mode="widthFix" lazy-load="false" />
|
||
<image class="photo-box-img" :src="tu" mode="widthFix" lazy-load="false" />
|
||
</view>
|
||
</view>
|
||
<view class="white-scan" v-show="scaning">
|
||
<view class="scan-title">
|
||
<image class="scan-img" src="@/static/index/badscan.png" />
|
||
<view class="scan-font">
|
||
<view class="weight">
|
||
扫描机构二维码
|
||
</view>
|
||
<view class="noral">
|
||
持续搜索中...
|
||
</view>
|
||
</view>
|
||
<view class="scan-back" @click="scaning = false;">
|
||
返回
|
||
</view>
|
||
<!-- <image class="scan-back" src="@/static/index/index/back.png" @click="scaning = false;" /> -->
|
||
</view>
|
||
|
||
<view v-if="qrResult" class="result">
|
||
扫描结果：{{ qrResult }}
|
||
</view>
|
||
<view class="other-scan">
|
||
<view class="scan-circle" @click="scanQrCode">
|
||
<view class="small-circle"></view>
|
||
<image class="scan-img" src="@/static/index/goodscan.png" />
|
||
</view>
|
||
<view class="scan-text">
|
||
扫描二维码
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="white-content-father-time" v-show="!scaning">
|
||
<view class="white-content">
|
||
<view class="time-father">
|
||
<view class="font-weight">
|
||
{{ hours }}:{{ minutes }}:{{ seconds }}
|
||
</view>
|
||
<view class="font-small">
|
||
{{ month }}月{{ day }}日 {{ weekday }}
|
||
</view>
|
||
</view>
|
||
<view class="white-shu"></view>
|
||
<view class="wendu-content">
|
||
<image class="wendu-img" src="@/static/index/index/wendu.png" lazy-load="false" />
|
||
<view class="wendu-font">
|
||
<view>温度</view>
|
||
<view style="font-weight: 600;">16℃</view>
|
||
</view>
|
||
<image class="wendu-img" src="@/static/index/index/shidu.png" lazy-load="false" />
|
||
<view class="wendu-font">
|
||
<view>湿度</view>
|
||
<view style="font-weight: 600;">49%</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="white-content-father" v-show="!scaning">
|
||
<swiper style="width: 100%;" :duration="500" :style="{height: `600rpx`}" :current="which"
|
||
@change="swiperchange">
|
||
<swiper-item style="width: 100%;">
|
||
<view class="white-content">
|
||
<image class="white-content-img" src="@/static/index/index/nobang.png" lazy-load="false" />
|
||
<view class="white-font">
|
||
请绑定护理单元~
|
||
</view>
|
||
<view class="botton-button">
|
||
<view class="botton-button-father">
|
||
<view class="botton-button-bgc">
|
||
<image class="botton-button-img" src="@/static/index/index/cloudbang.png" />
|
||
</view>
|
||
<view class="botton-button-font">
|
||
云绑定
|
||
</view>
|
||
</view>
|
||
<view class="botton-button-father">
|
||
<view class="botton-button-bgc" @click="scaning = true">
|
||
<image class="botton-button-img" src="@/static/index/index/scan.png" />
|
||
</view>
|
||
<view class="botton-button-font" @click="scaning = true">
|
||
扫码绑定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="white-content">
|
||
<image style="top: 10rpx;width: 600rpx;height: 400rpx;" class="white-content-img"
|
||
src="@/static/index/badold.png" />
|
||
<view style="margin-top: 350rpx;" class="white-font">
|
||
请添加长者信息
|
||
</view>
|
||
<view class="bad-button">
|
||
<view class="blue-button" @click="addoldman">
|
||
+添加长者
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="zhiling-box">
|
||
<view class="">
|
||
单元清洁服务指令已执行完毕，点击查看
|
||
</view>
|
||
<image class="zhiling-img" src="@/static/index/index/back.png" />
|
||
</view>
|
||
<view class="white-box-father">
|
||
<view v-for="(item,index) in buttonArray" :key="index" class="white-box">
|
||
<image class="box-img" :src="`/static/index/jumpbutton/${index}.png`" />
|
||
<view class="box-font">{{item}}</view>
|
||
|
||
</view>
|
||
<view class="white-box">
|
||
<view style="font-weight: 600;font-size: 80rpx;">+</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 底部的栏，为啥这样写，是因为要做左右拉动 -->
|
||
<view class="botton-view">
|
||
<view class="jia-box">
|
||
<view class="gray-box" v-show="whichMenu===2"></view>
|
||
<view class="jia">
|
||
+
|
||
</view>
|
||
</view>
|
||
<view v-for="(item,index) in itemArray" class="array-father">
|
||
<view :class="itemTarget===index ? `bottom-button-target` : `bottom-button`" @click="itemTarget=index">
|
||
<image class="botton-img"
|
||
:src="`/static/index/itemsbutton/${index}${itemTarget===index?1:0}.png`" />
|
||
<view class="bottom-text" :style="!index ?{fontWeight:600}:{}">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
<!-- <view v-show="itemTarget===index" class="blue-heng"></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
ref,
|
||
onMounted,
|
||
onUnmounted
|
||
} from 'vue';
|
||
import tu from '@/static/index/tu.png'
|
||
import request from '@/request/index.js' // 你封装的 uni.request
|
||
|
||
|
||
const itemArray = ["NU", "动态", "我的"];
|
||
const buttonArray = ref(["护理流程", "服务指令", "实时监控", "客户信息", "缴费账单", "充值缴费", "退住管理"])
|
||
const itemTarget = ref(0);
|
||
const which = ref(0);
|
||
const scaning = ref(false)
|
||
|
||
function preview() {
|
||
uni.previewImage({
|
||
urls: [tu], // 需要预览的所有图片地址数组
|
||
// current: imgList.value[currentIndex], // 当前点击的那张
|
||
})
|
||
}
|
||
const jumpTo = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/index/indexone"
|
||
});
|
||
}
|
||
const month = ref('01')
|
||
const day = ref('01')
|
||
const weekday = ref('周一')
|
||
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||
const hours = ref('00')
|
||
const minutes = ref('00')
|
||
const seconds = ref('00')
|
||
let timer = null
|
||
|
||
function updateTime() {
|
||
const now = new Date()
|
||
// 月份要 +1，保证两位
|
||
month.value = String(now.getMonth() + 1).padStart(2, '0')
|
||
day.value = String(now.getDate()).padStart(2, '0')
|
||
weekday.value = weekMap[now.getDay()]
|
||
// 如果想要两位数显示，不足两位前面补 0
|
||
hours.value = String(now.getHours()).padStart(2, '0')
|
||
minutes.value = String(now.getMinutes()).padStart(2, '0')
|
||
seconds.value = String(now.getSeconds()).padStart(2, '0')
|
||
}
|
||
const whichMenu = ref(0);
|
||
const swiperchange = (res) => {
|
||
whichMenu.value = res.detail.current
|
||
// console.log("res",res.detail.current)
|
||
}
|
||
const addoldman = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/addoldman/IDcard"
|
||
});
|
||
}
|
||
const gotoPay = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/pay/index"
|
||
});
|
||
}
|
||
|
||
const qrResult = ref('')
|
||
const scanning = ref(false)
|
||
let html5QrCode = null
|
||
async function cancelScan() {
|
||
if (html5QrCode && scanning.value) {
|
||
try {
|
||
await html5QrCode.stop()
|
||
} catch (e) {
|
||
console.warn('停止扫码出错', e)
|
||
}
|
||
}
|
||
scanning.value = false
|
||
}
|
||
function scanQrCode() {
|
||
// 如果正在扫描，先停止一次
|
||
if (html5QrCode && scanning.value) {
|
||
html5QrCode.stop().catch(() => {}).finally(() => {
|
||
scanning.value = false
|
||
})
|
||
return
|
||
}
|
||
|
||
// 标记为正在扫描，显示容器
|
||
scanning.value = true
|
||
qrResult.value = ''
|
||
|
||
// 创建扫码实例（指定容器ID）
|
||
html5QrCode = new Html5Qrcode("reader")
|
||
|
||
// 扫码配置：每秒 10 帧，识别框大小 250×250
|
||
const config = {
|
||
fps: 10,
|
||
qrbox: {
|
||
width: 350,
|
||
height: 350
|
||
}
|
||
}
|
||
|
||
html5QrCode.start({
|
||
facingMode: "environment"
|
||
}, // 后置摄像头
|
||
config,
|
||
decodedText => {
|
||
// 扫码成功回调
|
||
qrResult.value = decodedText
|
||
// 停止扫描并隐藏容器
|
||
html5QrCode.stop().catch(console.warn).finally(() => {
|
||
scanning.value = false
|
||
})
|
||
uni.navigateTo({
|
||
url: "/pages/selectunit/map"
|
||
});
|
||
|
||
},
|
||
errorMessage => {
|
||
// 解析过程中报错，不用处理
|
||
}
|
||
).catch(err => {
|
||
console.error("扫码启动失败", err)
|
||
scanning.value = false
|
||
})
|
||
}
|
||
|
||
onMounted(async () => {
|
||
updateTime() // 立刻执行一次，保证页面一加载就有值
|
||
timer = setInterval(updateTime, 1000) // 每秒更新
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
clearInterval(timer) // 组件销毁时清理定时器
|
||
html5QrCode && html5QrCode.stop().catch(console.warn)
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.login-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
background-color: rgb(239, 241, 252);
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.array-father {
|
||
width: 33%;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.botton-view {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
// margin-top: 50rpx;
|
||
// margin: 0 auto;
|
||
// margin-top: 60rpx;
|
||
height: 120rpx;
|
||
width: 100%;
|
||
// border-radius: 60rpx;
|
||
background-color: #fff;
|
||
// background-color: greenyellow;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 500;
|
||
z-index: 999;
|
||
|
||
.bottom-button {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.bottom-button-target {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: rgb(42, 133, 235);
|
||
flex-direction: column;
|
||
}
|
||
|
||
.blue-heng {
|
||
height: 6rpx;
|
||
width: 150rpx;
|
||
background-color: rgb(42, 133, 235);
|
||
position: absolute;
|
||
bottom: 55rpx;
|
||
left: 50%;
|
||
/* 左边缘到父容器左边的距离占父宽度 50% */
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.index-up {
|
||
position: absolute;
|
||
top: -70rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
|
||
.index-up-img {
|
||
width: 100%;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
|
||
.index-ball-father {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
// margin-top: 35rpx;
|
||
position: fixed;
|
||
top: 35rpx;
|
||
left: 0;
|
||
z-index: 999;
|
||
|
||
.white-ball {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.super-white-ball {
|
||
width: 70rpx;
|
||
height: 60rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
margin-right: 40rpx;
|
||
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.small-img {
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
}
|
||
}
|
||
|
||
.index-smallPhoto {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 480rpx;
|
||
margin-bottom: 50rpx;
|
||
|
||
.photo-box {
|
||
margin-right: 40rpx;
|
||
height: 180rpx;
|
||
width: 250rpx;
|
||
// background-color: #fff;
|
||
z-index: 2;
|
||
position: relative;
|
||
|
||
.photo-box-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.white-content-father {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 30rpx;
|
||
|
||
margin-bottom: 200rpx;
|
||
|
||
.white-content {
|
||
height: 500rpx;
|
||
width: 92%;
|
||
margin-left: 4%;
|
||
background-color: #fff;
|
||
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 30rpx;
|
||
z-index: 2;
|
||
display: flex;
|
||
// justify-content: space-evenly;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
.white-content-img {
|
||
position: absolute;
|
||
top: -40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80%;
|
||
height: 370rpx;
|
||
// margin: 0 auto;
|
||
}
|
||
|
||
.white-font {
|
||
margin-top: 240rpx;
|
||
font-size: 27rpx;
|
||
color: #222222;
|
||
}
|
||
}
|
||
|
||
.botton-button {
|
||
width: 100%;
|
||
height: 280rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.botton-button-father {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.botton-button-bgc {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #D8DEEA;
|
||
|
||
.botton-button-img {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.botton-button-font {
|
||
margin-top: 10rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.botton-img {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.bottom-text {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.jia-box {
|
||
position: absolute;
|
||
top: -40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
}
|
||
|
||
.jia {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
background-color: rgb(1, 168, 255);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
|
||
}
|
||
|
||
.gray-box {
|
||
border-radius: 20rpx;
|
||
height: 30rpx;
|
||
width: 50rpx;
|
||
margin-right: 15rpx;
|
||
background-color: #A4A8BD;
|
||
}
|
||
|
||
.white-content-father-time {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.white-content {
|
||
height: 170rpx;
|
||
width: 92%;
|
||
background-color: #fff;
|
||
background-image:
|
||
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
|
||
url("@/static/index/bluebgc.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center top;
|
||
|
||
/* 2. 水平方向拉满容器，垂直方向保持原始比例 */
|
||
background-size: 100% auto;
|
||
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 35rpx;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 2rpx solid #fff;
|
||
|
||
.time-father {
|
||
margin-left: 45rpx;
|
||
|
||
.font-weight {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
margin-bottom: 7rpx;
|
||
}
|
||
|
||
.font-small {
|
||
color: #7C788D;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.white-shu {
|
||
height: 100%;
|
||
width: 2rpx;
|
||
background-color: #fff;
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
|
||
.wendu-content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.wendu-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin: 0 20rpx 0 60rpx;
|
||
}
|
||
|
||
.wendu-font {
|
||
font-size: 25rpx;
|
||
}
|
||
}
|
||
|
||
.bad-button {
|
||
width: 100%;
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.blue-button {
|
||
background: linear-gradient(to right, #00C9FF, #0076FF);
|
||
color: #fff;
|
||
font-size: 25rpx;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 35rpx;
|
||
margin-right: 40rpx;
|
||
}
|
||
}
|
||
|
||
.zhiling-box {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 92%;
|
||
margin-left: 3%;
|
||
height: 100rpx;
|
||
background-color: #fff;
|
||
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||
// margin-top: 20rpx;
|
||
border-radius: 35rpx;
|
||
|
||
.zhiling-img {
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
}
|
||
}
|
||
|
||
.white-box-father {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
|
||
.white-box {
|
||
margin-top: 20rpx;
|
||
width: 20%;
|
||
margin-left: 4%;
|
||
height: 190rpx;
|
||
background-color: #fff;
|
||
border-radius: 35rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.box-img {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.box-font {
|
||
font-size: 25rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.white-scan {
|
||
background-color: #fff;
|
||
border-radius: 35rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||
width: 92%;
|
||
margin-left: 4%;
|
||
height: 700rpx;
|
||
z-index: 2;
|
||
margin-bottom: 300rpx;
|
||
|
||
.scan-title {
|
||
width: 100%;
|
||
height: 180rpx;
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
}
|
||
|
||
.scan-img {
|
||
margin-left: 65rpx;
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
}
|
||
|
||
.scan-font {
|
||
margin-left: 30rpx;
|
||
|
||
.weight {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.noral {
|
||
font-size: 25rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.other-scan {
|
||
width: 100%;
|
||
height: 520rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.scan-circle {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
border-radius: 50%;
|
||
background-color: #fbfbfb;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
// animation: fadeInOut 2s infinite;
|
||
.scan-img {
|
||
width: 30%;
|
||
height: 30%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.small-circle {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform-origin: center center;
|
||
/* 从中心缩放，否则宽高从左上角开始 */
|
||
transform: translate(-50%, -50%);
|
||
animation: shrinkExpand 1s infinite;
|
||
border-radius: 50%;
|
||
background-color: #f5f5f5;
|
||
}
|
||
}
|
||
|
||
.scan-text {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.scan-back {
|
||
// width: 40rpx;
|
||
// height: 30rpx;
|
||
position: absolute;
|
||
right: 60rpx;
|
||
top: auto;
|
||
color: #999999;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
@keyframes shrinkExpand {
|
||
|
||
0%,
|
||
100% {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
50% {
|
||
width: 0%;
|
||
height: 0%;
|
||
}
|
||
}
|
||
|
||
/* 扫码遮罩层 */
|
||
.scan-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
/* 半透明背景 */
|
||
.mask-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* 中心容器 */
|
||
.mask-center {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
/* 扫码区域 */
|
||
.reader {
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
background: #000;
|
||
/* 可以用透明，html5-qrcode 会覆盖视频流 */
|
||
// border: 4rpx solid #fff;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
.result{
|
||
margin: 0 auto;
|
||
}
|
||
</style> |