180 lines
3.7 KiB
Vue
180 lines
3.7 KiB
Vue
<template>
|
||
<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
|
||
<view class="index-content-right">
|
||
<view class="index-content-title">
|
||
<view class="shu"></view>
|
||
<view class="shu-font">护理机构A</view>
|
||
</view>
|
||
</view>
|
||
<view class="saomiao">
|
||
<view class="saomiao-son">
|
||
<view class="saomiao-son-son">
|
||
<view class="saomiao-son-son-img">
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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 emit = defineEmits(['nav'])
|
||
const props = defineProps({ isShow: { type: Boolean, required: true } })
|
||
|
||
const transition = ref(true)
|
||
|
||
|
||
// 区分首次渲染与动态添加
|
||
watch(
|
||
() => props.isShow,
|
||
(newVal, oldVal) => {
|
||
if (!oldVal && newVal) {
|
||
transition.value = false
|
||
setTimeout(() => (transition.value = true), 50)
|
||
|
||
}
|
||
}
|
||
)
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.index-content-other {
|
||
width: calc(100% - 170rpx);
|
||
height: 100%;
|
||
transition: opacity 1s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.index-content-down {
|
||
width: calc(100% - 60rpx);
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.index-content-right {
|
||
height: calc(100% - 100rpx);
|
||
width: calc(100% - 60rpx);
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
background-image: url('/static/index/leida/bgc.png');
|
||
background-position: 30% 70%;
|
||
border-radius: 50rpx;
|
||
box-shadow: 4rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
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%);
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
background-image: url("@/static/index/leida/fourjiao.png");
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
background-size: cover;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
// height: 4rpx;
|
||
// background-color: #05AAFE;
|
||
/* 初始给个向下的阴影（扫描线起点在顶部） */
|
||
// box-shadow: 0 5rpx 8rpx #9EBFEF;
|
||
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;
|
||
}
|
||
|
||
.saomiao-son {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
border-radius: 50rpx;
|
||
background-color: rgb(218, 228, 248);
|
||
|
||
.saomiao-son-son {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
border-radius: 50rpx;
|
||
background-color: rgb(208, 224, 246);
|
||
|
||
.saomiao-son-son-img {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
border-radius: 30rpx;
|
||
background-image: url("@/static/index/leida/QR.png");
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 扫描动画关键帧
|
||
@keyframes scanMove {
|
||
0% {
|
||
top: 10%;
|
||
}
|
||
|
||
// 50% {
|
||
// top: 100%;
|
||
// }
|
||
|
||
100% {
|
||
top: 80%;
|
||
}
|
||
}
|
||
</style> |