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