forked from TALL/check-work
7 changed files with 230 additions and 25 deletions
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div class="fast-box"> |
|||
<div class="con-box" id="bobaodiv"> |
|||
<div :key="0 +`${i}`" class="ent-box-div" v-for="(item, i) in lists"> |
|||
<div class="ent-box"> |
|||
<p class="ent-index">{{ i + 1 }}</p> |
|||
<span class="ent-name" style="margin-left: 50px">{{ item.company }}</span> |
|||
<span class="ent-mainBusiness" style="margin-left: 50px">{{ item.mainBusiness }}</span> |
|||
</div> |
|||
</div> |
|||
<div :key="j" class="ent-box-div" v-for="(item, j) in lists"> |
|||
<div class="ent-box"> |
|||
<p class="ent-index">{{ j + 1 }}</p> |
|||
<span class="ent-name" style="margin-left: 50px">{{ item.company }}</span> |
|||
<span class="ent-mainBusiness" style="margin-left: 50px">{{ item.mainBusiness }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'SettledEnterprise', |
|||
props: { |
|||
lists: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
height: '', |
|||
width: '', |
|||
liHeight: '', |
|||
dataList: [ |
|||
{ |
|||
a: '1.面部对侧', |
|||
b: '正常', |
|||
c: '0分', |
|||
}, |
|||
{ |
|||
a: '2.上肢', |
|||
b: '中度无力', |
|||
c: '1分', |
|||
}, |
|||
{ |
|||
a: '3.语言运动', |
|||
b: '正常', |
|||
c: '0分', |
|||
}, |
|||
{ |
|||
a: '4.语言感觉', |
|||
b: '异常', |
|||
c: '1分', |
|||
}, |
|||
{ |
|||
a: '5.眼球凝视', |
|||
b: '一测活动困难', |
|||
c: '1分', |
|||
}, |
|||
], |
|||
oMarquee: null, //播报的容器 |
|||
BBLineH: null, |
|||
BBScrollAmount: 1, |
|||
BBLineCount: 5, |
|||
rollRestTime: 500, |
|||
rollTime: 10, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.BBLineH = document.getElementsByClassName('fast-box')[0].offsetHeight * 0.166; |
|||
this.scrollBox(); |
|||
}, |
|||
methods: { |
|||
scrollBox() { |
|||
/* |
|||
* 启动播报滚动事件 |
|||
*/ |
|||
const that = this; |
|||
|
|||
window.onload = function() { |
|||
// BBAllTime = 0; |
|||
that.oMarquee = document.getElementById('bobaodiv'); //滚动对象 |
|||
window.setTimeout(function() { |
|||
that.run(); |
|||
}, that.rollRestTime); |
|||
}; |
|||
}, |
|||
/* |
|||
* 播报滚动事件主逻辑 |
|||
*/ |
|||
run() { |
|||
const that = this; |
|||
if (that.BBScrollAmount == 0) { |
|||
//若单次滚动的距离为0，则开始下一次监听，不计数 |
|||
window.setTimeout(function() { |
|||
that.run(); |
|||
}, that.rollTime); |
|||
return; |
|||
} |
|||
if (that.oMarquee.scrollTop >= that.BBLineCount * that.BBLineH) { |
|||
//滚动完一次数据后，复位 |
|||
that.oMarquee.scrollTop = 0; |
|||
} |
|||
that.oMarquee.scrollTop += that.BBScrollAmount; |
|||
if (that.oMarquee.scrollTop % that.BBLineH < 1 && that.oMarquee.scrollTop > 0) { |
|||
window.setTimeout(function() { |
|||
that.run(); |
|||
}, that.rollRestTime); |
|||
} else { |
|||
window.setTimeout(function() { |
|||
that.run(); |
|||
}, that.rollTime); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.ent-box-div { |
|||
width: 100%; |
|||
margin-right: 11%; |
|||
position: relative; |
|||
height: 76px; |
|||
} |
|||
|
|||
.ent-box { |
|||
width: 100%; |
|||
// margin-right: 11%; |
|||
position: relative; |
|||
height: 56px; |
|||
line-height: 56px; |
|||
padding: 0 14px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
|||
opacity: 1; |
|||
// margin-bottom: 20px; |
|||
} |
|||
|
|||
.ent-index { |
|||
width: 28px; |
|||
position: absolute; |
|||
top: 14px; |
|||
line-height: 28px; |
|||
text-align: center; |
|||
font-size: 20px; |
|||
font-family: Segoe UI; |
|||
color: #FFFFFF; |
|||
height: 28px; |
|||
border-radius: 50%; |
|||
background: #13ACC4; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.ent-name { |
|||
position: absolute; |
|||
left: 0; |
|||
width: 30%; |
|||
height: 24px; |
|||
top: 50%; |
|||
margin-top: -12px; |
|||
font-size: 22px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
line-height: 24px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
opacity: 1; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.ent-mainBusiness { |
|||
position: absolute; |
|||
left: 35%; |
|||
width: 20%; |
|||
height: 24px; |
|||
top: 50%; |
|||
margin-top: -12px; |
|||
font-size: 22px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
line-height: 24px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
opacity: 1; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.fast-box { |
|||
position: relative; |
|||
height: 456px; |
|||
} |
|||
|
|||
.con-box { |
|||
top: 0; |
|||
left: 0; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
|
|||
div { |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue