10 changed files with 301 additions and 323 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