545 lines
12 KiB
Vue
545 lines
12 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 class="leida">
|
||
<view class="kutong-father">
|
||
<image class="kutong-img" src="@/static/index/leida/leidabgc.png" />
|
||
<image class="kutong-shan" :class="progress < 1 ? 'spin-anim' : 'no-anim'"
|
||
src="@/static/index/leida/shan.png" />
|
||
<view class="huan">
|
||
<view class="quarter-ring" :class="progress < 1 ? 'spin-anim-spec' : 'no-anim-spec'" />
|
||
</view>
|
||
</view>
|
||
<view class="jindutiao">
|
||
<view class="progress-fill" :style="{ transform: `scaleX(${progress})` }" />
|
||
</view>
|
||
<view class="color-font" style="margin-top: 80rpx;" >
|
||
{{ progress >= 1 ? "扫描完成。" : "正在使用雷达区域扫描护理机构," }}
|
||
</view>
|
||
<view class="color-font">{{ progress >= 1 ? "" : "请稍后..." }}</view>
|
||
<view class="agagin-button" @click="again">重新扫描</view>
|
||
</view>
|
||
|
||
<view class="other">
|
||
<scroll-view ref="scrollViewRef" scroll-y class="other-father" :scroll-top="scrollTop">
|
||
<view class="card-father">
|
||
<view class="card" v-for="(allitem, allindex) in cardarray" :key="allindex"
|
||
:class="{ 'fade-in': allitem.isNew }" @animationend="onAnimEnd(allitem)">
|
||
<view class="card-title">
|
||
<view style="font-size: 25rpx;">NUID：20241001001</view>
|
||
<view class="right-box">护理单元</view>
|
||
</view>
|
||
<view class="card-middle">
|
||
<view class="video-box" @click="renamenummber=-1">
|
||
<image class="video-box-img" src="@/static/index/leida/video.png" />
|
||
</view>
|
||
<view>
|
||
<view v-for="(item,index) in allitem.menu" :key="index"
|
||
@click="item.target=!item.target;renamenummber=-1">
|
||
<view class="small-menu">
|
||
<image class="small-img" :src="item.target?item.targetUrl:item.url" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-bottom">
|
||
{{allitem.name}}
|
||
<image class="bottom-img" src="@/static/index/leida/rename.png"
|
||
@click="renamenummber=allindex;savevalue=allitem.name" />
|
||
</view>
|
||
<view class="rename-father" v-if="renamenummber==allindex">
|
||
<view class="rename-title">
|
||
重命名
|
||
</view>
|
||
<view class="rename-gray">
|
||
NUID：20241001001
|
||
</view>
|
||
<view class="rename-input">
|
||
<image class="left-img" src="@/static/index/click.png" />
|
||
<input class="uni-input" placeholder="请重新命名" v-model="savevalue" />
|
||
<image v-show="savevalue" class="right-img" src="@/static/index/quxiao.png" @click="savevalue=``" />
|
||
</view>
|
||
<view class="blue-button" @click="changename(savevalue,allindex)">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-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 savevalue = ref("");
|
||
|
||
const renamenummber = ref(-1)
|
||
const transition = ref(true)
|
||
const progress = ref(0)
|
||
const scrollTop = ref(0)
|
||
const scrollViewRef = ref(null)
|
||
const rightbutton = ref([
|
||
{ url: '/static/index/leida/00.png', targetUrl: '/static/index/leida/01.png', target: false },
|
||
{ url: '/static/index/leida/10.png', targetUrl: '/static/index/leida/11.png', target: false },
|
||
{ url: '/static/index/leida/20.png', targetUrl: '/static/index/leida/21.png', target: false },
|
||
{ url: '/static/index/leida/30.png', targetUrl: '/static/index/leida/31.png', target: false }
|
||
])
|
||
const cardarray = ref<Array<{ menu : any; isNew : boolean; name : string }>>([])
|
||
|
||
// 区分首次渲染与动态添加
|
||
watch(
|
||
() => props.isShow,
|
||
(newVal, oldVal) => {
|
||
if (!oldVal && newVal) {
|
||
transition.value = false
|
||
setTimeout(() => (transition.value = true), 50)
|
||
suiji()
|
||
const timer = setInterval(() => {
|
||
progress.value += 0.01
|
||
if (progress.value >= 1) clearInterval(timer)
|
||
}, 50)
|
||
}
|
||
}
|
||
)
|
||
|
||
// 随机生成并逐个添加卡片
|
||
function suiji() {
|
||
const n = 10
|
||
cardarray.value = []
|
||
const randomWeights = Array.from({ length: n }, () => Math.random())
|
||
const totalWeight = randomWeights.reduce((a, b) => a + b, 0)
|
||
const intervals = randomWeights.map((w) => (w / totalWeight) * 5000)
|
||
let cumulative = 0
|
||
for (let i = 0; i < n; i++) {
|
||
cumulative += intervals[i]
|
||
setTimeout(async () => {
|
||
const menuCopy = JSON.parse(JSON.stringify(rightbutton.value))
|
||
cardarray.value.push({ menu: menuCopy, name: `未命名${i}`, isNew: true })
|
||
// 当卡片总数为 5,7,9,... 时滚动到底部
|
||
const len = cardarray.value.length
|
||
if (len >= 5 && len % 2 === 1) {
|
||
scrollTop.value = 999
|
||
await nextTick()
|
||
scrollTop.value = 99999
|
||
}
|
||
}, cumulative)
|
||
}
|
||
}
|
||
|
||
function again() {
|
||
renamenummber.value = -1
|
||
suiji()
|
||
progress.value = 0
|
||
const timer = setInterval(() => {
|
||
progress.value += 0.01
|
||
if (progress.value >= 1) clearInterval(timer)
|
||
}, 50)
|
||
}
|
||
|
||
// 监听动画结束，清除标记
|
||
function onAnimEnd(item : { isNew : boolean }) {
|
||
item.isNew = false
|
||
}
|
||
|
||
const changename = (name,index)=>{
|
||
if(name){
|
||
cardarray.value[index].name = name;
|
||
}
|
||
renamenummber.value = -1
|
||
|
||
}
|
||
|
||
onMounted(() => {
|
||
|
||
})
|
||
</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;
|
||
}
|
||
|
||
.leida {
|
||
margin-top: 30rpx;
|
||
height: 100%;
|
||
width: 35%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.kutong-father {
|
||
width: 300rpx;
|
||
height: 450rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.kutong-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
|
||
.kutong-shan {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 150rpx;
|
||
height: 206rpx;
|
||
transform-origin: 100% 73%;
|
||
}
|
||
|
||
.spin-anim {
|
||
animation: spin 2s linear infinite;
|
||
animation-play-state: running;
|
||
}
|
||
|
||
.no-anim {
|
||
animation: spin 2s linear infinite;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.spin-anim-spec {
|
||
animation: spinx 2s linear infinite;
|
||
animation-play-state: running;
|
||
}
|
||
|
||
.no-anim-spec {
|
||
animation: spinx 2s linear infinite;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.huan {
|
||
position: absolute;
|
||
top: -65rpx;
|
||
left: -65rpx;
|
||
width: 430rpx;
|
||
height: 430rpx;
|
||
border: 20rpx solid rgb(206, 220, 245);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.quarter-ring {
|
||
position: absolute;
|
||
top: -5%;
|
||
left: -5%;
|
||
width: 110%;
|
||
height: 110%;
|
||
box-sizing: border-box;
|
||
border: 20rpx solid transparent;
|
||
border-top-color: rgb(3, 169, 255);
|
||
border-radius: 50%;
|
||
transform: rotate(0deg);
|
||
transform-origin: center center;
|
||
}
|
||
|
||
.jindutiao {
|
||
width: 400rpx;
|
||
border-radius: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #a6c9fa;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||
transform-origin: left center;
|
||
will-change: transform;
|
||
transition: transform 0.05s linear;
|
||
}
|
||
|
||
.color-font {
|
||
color: #415273;
|
||
margin-top: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.agagin-button {
|
||
width: 240rpx;
|
||
height: 90rpx;
|
||
margin-top: 80rpx;
|
||
border-radius: 35rpx;
|
||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.other {
|
||
width: 65%;
|
||
height: 100%;
|
||
}
|
||
|
||
.other-father {
|
||
margin-top: 150rpx;
|
||
height: calc(100% - 150rpx);
|
||
width: 100%;
|
||
}
|
||
|
||
.card-father {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.card {
|
||
width: 45%;
|
||
margin-left: 3%;
|
||
height: 530rpx;
|
||
box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
margin-bottom: 35rpx;
|
||
padding: 0 25rpx;
|
||
position: relative;
|
||
|
||
.rename-father {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 550rpx;
|
||
height: 350rpx;
|
||
border-radius: 30rpx;
|
||
box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
|
||
background-color: #fff;
|
||
display: flex;
|
||
// justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
|
||
.rename-title {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border-bottom: 2rpx solid rgb(245, 245, 245);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.rename-gray {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
// justify-content: center;
|
||
color: rgb(167, 167, 167);
|
||
align-items: center;
|
||
}
|
||
|
||
.rename-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
background-color: rgb(245, 246, 250);
|
||
border-radius: 20rpx;
|
||
color: rgb(167, 167, 167);
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
position: relative;
|
||
.uni-input{
|
||
font-size: 25rpx;
|
||
}
|
||
.left-img{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
.right-img{
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-title {
|
||
width: 100%;
|
||
height: 130rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card-middle {
|
||
width: 100%;
|
||
height: 320rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.video-box {
|
||
width: 82%;
|
||
height: 320rpx;
|
||
background-color: #E5ECFA;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.video-box-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
/* 旋转动画 */
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes spinx {
|
||
from {
|
||
transform: rotate(-70deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(290deg);
|
||
}
|
||
}
|
||
|
||
/* 新卡片淡入动画 */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10rpx);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fade-in {
|
||
animation: fadeIn 0.4s ease-out forwards;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
}
|
||
|
||
.right-box {
|
||
background: rgb(0, 171, 255);
|
||
width: 160rpx;
|
||
height: 65rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.small-menu {
|
||
width: 75rpx;
|
||
height: 73rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #E7ECFA;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
|
||
.small-img {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
}
|
||
}
|
||
|
||
.card-bottom {
|
||
margin-top: 17rpx;
|
||
margin-left: 10rpx;
|
||
display: flex;
|
||
|
||
.bottom-img {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
.blue-button{
|
||
margin-top: 20rpx;
|
||
width: 180rpx;
|
||
height: 70rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
background: linear-gradient(to bottom,#00C9FF,#0076FF);
|
||
}
|
||
</style> |