You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.5 KiB
98 lines
2.5 KiB
<template>
|
|
<div class="flex-1 flex-column rfid" id="rfid">
|
|
<!-- <div class="box" id="box">
|
|
<span>专科护士</span>
|
|
</div>
|
|
<div class="box active">
|
|
<span>专科护士</span>
|
|
</div>-->
|
|
<div :key="index" class="list" v-for="(list,index) in lists">
|
|
<span>{{ list.name }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'RFID',
|
|
data() {
|
|
return {
|
|
lists: [
|
|
{ top: '10px', left: '10px', name: '专科护士' },
|
|
{ top: '50px', left: '50px', name: '专科医生' },
|
|
{ top: '70px', left: '70px', name: '采血推车' },
|
|
{ top: '90px', left: '90px', name: '心电图推车' },
|
|
{ top: '100px', left: '100px', name: '介入室' },
|
|
{ top: '80px', left: '80px', name: 'CT室' },
|
|
{ top: '60px', left: '60px', name: '急救室' },
|
|
{ top: '40px', left: '40px', name: '急诊医生' },
|
|
],
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
console.log('开始');
|
|
// 获取元素
|
|
let wrap = document.getElementById('rfid');
|
|
// let box = document.getElementById('box');
|
|
let box = document.getElementsByClassName('list');
|
|
console.log('box: ', box);
|
|
|
|
//让元素动起来
|
|
// 添加两个变量，用于更换运动方向
|
|
let a = 1;
|
|
let b = 1;
|
|
// 获取元素的可运动空间，用父元素的宽高减去子元素的宽高
|
|
let w = wrap.offsetWidth - box.offsetWidth;
|
|
let h = wrap.offsetHeight - box.offsetHeight;
|
|
|
|
setInterval(function() {
|
|
// 获取元素当前left
|
|
let l = box.offsetLeft;
|
|
if (l == w || l == 0) {
|
|
// 如果到达可运动空间最大值和最小值的时候，a 变成负值
|
|
a *= -1;
|
|
}
|
|
// 把元素距离左边的值每10ms加1px
|
|
// a变成负值可以改变运动方向
|
|
box.style.left = l + a + 'px';
|
|
console.log('box.style.left: ', box.style.left);
|
|
|
|
// 垂直方向同水平方向
|
|
let t = box.offsetTop;
|
|
if (t == h || t == 0) {
|
|
b *= -1;
|
|
}
|
|
box.style.top = t + b + 'px';
|
|
}, 100);
|
|
},
|
|
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped >
|
|
.rfid {
|
|
position: relative;
|
|
}
|
|
|
|
.list {
|
|
width: 69px;
|
|
height: 69px;
|
|
line-height: 69px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #C8CED5;
|
|
background: url('~assets/rfid-bg.png') no-repeat center;
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 200px;
|
|
}
|
|
|
|
.active {
|
|
width: 86px;
|
|
height: 86px;
|
|
line-height: 86px;
|
|
font-size: 12px;
|
|
background: url('~assets/rfid-bg-active.png') no-repeat center;
|
|
}
|
|
</style>
|
|
|