10 changed files with 307 additions and 319 deletions
@ -1,98 +0,0 @@ |
|||
<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> |
|||
@ -0,0 +1,142 @@ |
|||
.rfid { |
|||
position: relative; |
|||
} |
|||
|
|||
.list { |
|||
width: 4.4rem; |
|||
height: 4.4rem; |
|||
line-height: 4.4rem; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
color: #C8CED5; |
|||
background: url('~assets/rfid-bg.png') no-repeat center; |
|||
background-size: contain; |
|||
position: absolute; |
|||
} |
|||
|
|||
.active { |
|||
width: 5rem; |
|||
height: 5rem; |
|||
line-height: 5rem; |
|||
font-size: 12px; |
|||
background: url('~assets/rfid-bg-active.png') no-repeat center; |
|||
background-size: contain; |
|||
} |
|||
|
|||
.list1 { |
|||
top: 0.5rem; |
|||
left: 4rem; |
|||
} |
|||
|
|||
.list2 { |
|||
top: 0.5rem; |
|||
left: 11.5rem; |
|||
} |
|||
|
|||
.list3 { |
|||
top: 0.5rem; |
|||
left: 19rem; |
|||
} |
|||
|
|||
.list4 { |
|||
top: 5.5rem; |
|||
left: 0.5rem; |
|||
} |
|||
|
|||
.list5 { |
|||
top: 5.5rem; |
|||
left: 8rem; |
|||
} |
|||
|
|||
.list6 { |
|||
top: 5.5rem; |
|||
left: 15.5rem; |
|||
} |
|||
|
|||
.list7 { |
|||
top: 5.5rem; |
|||
left: 23rem; |
|||
} |
|||
|
|||
.list8 { |
|||
top: 10.5rem; |
|||
left: 4rem; |
|||
} |
|||
|
|||
.list9 { |
|||
top: 10.5rem; |
|||
left: 11.5rem; |
|||
} |
|||
|
|||
.list10 { |
|||
top: 10.5rem; |
|||
left: 19rem; |
|||
} |
|||
|
|||
|
|||
|
|||
@media (max-width: 1500px){ |
|||
.list { |
|||
width: 4rem; |
|||
height: 3.4rem; |
|||
line-height: 3.4rem; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.active { |
|||
width: 4rem; |
|||
height: 4rem; |
|||
line-height: 4rem; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.list1 { |
|||
top: 0.5rem; |
|||
left: 3rem; |
|||
} |
|||
|
|||
.list2 { |
|||
top: 0.5rem; |
|||
left: 8rem; |
|||
} |
|||
|
|||
.list3 { |
|||
top: 0.5rem; |
|||
left: 13rem; |
|||
} |
|||
|
|||
.list4 { |
|||
top: 3.5rem; |
|||
left: 0.5rem; |
|||
} |
|||
|
|||
.list5 { |
|||
top: 3.5rem; |
|||
left: 5.5rem; |
|||
} |
|||
|
|||
.list6 { |
|||
top: 3.5rem; |
|||
left: 10.5rem; |
|||
} |
|||
|
|||
.list7 { |
|||
top: 3.5rem; |
|||
left: 15.5rem; |
|||
} |
|||
|
|||
.list8 { |
|||
top: 6.5rem; |
|||
left: 3rem; |
|||
} |
|||
|
|||
.list9 { |
|||
top: 6.5rem; |
|||
left: 8rem; |
|||
} |
|||
|
|||
.list10 { |
|||
top: 6.5rem; |
|||
left: 13rem; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue