[liang]
3 years ago
5 changed files with 206 additions and 238 deletions
|
After Width: | Height: | Size: 59 KiB |
@ -1,201 +1,207 @@ |
|||||
<!-- |
|
||||
描述: 新闻无缝滚动 |
|
||||
作者: Jack Chen |
|
||||
日期: 2020-04-18 |
|
||||
--> |
|
||||
|
|
||||
<template> |
<template> |
||||
<div class="wrap-container sn-container"> |
<div class="sn"> |
||||
<div class="sn-content"> |
<div class="sn-title">实时进出信息</div> |
||||
<div class="sn-title">新闻无缝滚动</div> |
<div class="sn-body"> |
||||
<div class="sn-body"> |
<div class="table-header"> |
||||
<div class="wrap-container"> |
<span style="width: 2rem">时间</span> |
||||
|
<span style="width: 3rem">停车场</span> |
||||
<div class="table"> |
<span style="width: 1rem">出入口</span> |
||||
<table border="0" cellpadding="0" cellspacing="0" class="table-header"> |
<span style="width: 1rem">车辆类型</span> |
||||
<tbody> |
<span style="width: 1.2rem">车牌号</span> |
||||
<tr> |
<span style="width: 0.8rem">收费金额</span> |
||||
<td width="60%"> |
<span style="width: 0.8rem">状态</span> |
||||
<span>标 题</span> |
</div> |
||||
</td> |
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting"> |
||||
<td width="20%"> |
<div class="line" v-for="(item, index) in listData" :key="index" |
||||
<span>日 期</span> |
:class="item.accessType === '入场' ? 'in' : ''"> |
||||
</td> |
<span style="width: 2rem">{{ item.createTime }}</span> |
||||
<td width="20%"> |
<span style="width: 3rem" class='title'>{{ item.parkName }}</span> |
||||
<span>热 度</span> |
<span style="width: 1rem">{{ item.entranceChannel }}</span> |
||||
</td> |
<span style="width: 1rem">{{ item.carType }}</span> |
||||
</tr> |
<span style="width: 1.2rem">{{ item.plateNumber }}</span> |
||||
</tbody> |
<span style="width: 0.8rem">{{ item.orderRealPaidAmout }}元</span> |
||||
</table> |
<span style="width: 0.8rem">{{ item.accessType }}</span> |
||||
|
</div> |
||||
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting"> |
</vue-seamless-scroll> |
||||
<table border="0" cellpadding="0" cellspacing="0" class="item"> |
</div> |
||||
<tbody> |
</div> |
||||
<tr v-for="(item, index) in listData" :key="index"> |
|
||||
<td width="100%" class="title"> |
|
||||
<span>{{ item.title }}</span> |
|
||||
</td> |
|
||||
<td width="20%"> |
|
||||
<span>{{ item.date }}</span> |
|
||||
</td> |
|
||||
<td width="20%"> |
|
||||
<span :class="{colorRed: item.hot > 4999, colorOrange: item.hot < 10}">{{ item.hot }}</span> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody> |
|
||||
</table> |
|
||||
</vue-seamless-scroll> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import vueSeamlessScroll from 'vue-seamless-scroll' |
import vueSeamlessScroll from 'vue-seamless-scroll' |
||||
|
|
||||
export default { |
export default { |
||||
name: "seamless", |
name: "seamless", |
||||
components: { |
components: { |
||||
vueSeamlessScroll |
vueSeamlessScroll |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
listData: [{ |
rowColor: '/', |
||||
title: '钱花哪了?一图带你读懂年轻人的消费观', |
listData: [{ |
||||
date: '2020-05-05', |
"accessType": "出场", |
||||
hot: 2306 |
"carType": "临时车", |
||||
}, { |
"parkName": "深圳宝安体育馆停车场", |
||||
title: '“五一”假期前三天国内旅游收入超350亿元', |
"createTime": "2022-08-03 18:01:59", |
||||
date: '2020-05-02', |
"plateNumber": "粤C3868Z", |
||||
hot: 5689 |
"entranceChannel": "前岗入口", |
||||
}, { |
"orderRealPaidAmout": 0 |
||||
title: '滴滴、美团、哈啰交战，本地生活会是终局？', |
}, |
||||
date: '2020-05-02', |
{ |
||||
hot: 9 |
"accessType": "出场", |
||||
}, { |
"carType": "临时车", |
||||
title: '“互联网+文化”逆势上行文娱消费云端真精彩', |
"parkName": "深圳宝安体育馆停车场", |
||||
date: '2020-04-25', |
"createTime": "2022-08-03 18:01:54", |
||||
hot: 288 |
"plateNumber": "粤C2R537", |
||||
}, { |
"entranceChannel": "后岗入口", |
||||
title: '乐观还是悲观？巴菲特是个现实主义者！', |
"orderRealPaidAmout": 0 |
||||
date: '2020-04-21', |
}, |
||||
hot: 158 |
{ |
||||
}, { |
"accessType": "入场", |
||||
title: 'B站的后浪，会把爱优腾拍在沙滩上吗?', |
"carType": "临时车", |
||||
date: '2020-04-20', |
"parkName": "深圳宝安体育馆停车场", |
||||
hot: 889 |
"createTime": "2022-08-03 18:01:30", |
||||
}, { |
"plateNumber": "粤C11R24", |
||||
title: '华为如何做投资的：先给两亿订单一年上市', |
"entranceChannel": "后岗入口", |
||||
date: '2020-04-01', |
"orderRealPaidAmout": 0.0 |
||||
hot: 5800 |
}, |
||||
}, { |
{ |
||||
title: '马斯克：特斯拉股价太高了，我要卖豪宅', |
"accessType": "出场", |
||||
date: '2020-03-25', |
"carType": "临时车", |
||||
hot: 6 |
"parkName": "深圳宝安体育馆停车场", |
||||
}, { |
"createTime": "2022-08-03 18:00:32", |
||||
title: '人民日报海外版：云模式巧解“就业难”', |
"plateNumber": "粤CSP065", |
||||
date: '2020-03-16', |
"entranceChannel": "前岗入口", |
||||
hot: 88 |
"orderRealPaidAmout": 0 |
||||
}, { |
}, |
||||
title: '刚刚港股"崩了"：狂跌近1000点！', |
{ |
||||
date: '2020-03-12', |
"accessType": "入场", |
||||
hot: 88 |
"carType": "临时车", |
||||
}, { |
"parkName": "深圳宝安体育馆停车场", |
||||
title: '个人健康信息码国家标准发布', |
"createTime": "2022-08-03 18:00:19", |
||||
date: '2020-02-28', |
"plateNumber": "浙G16N8Z", |
||||
hot: 5 |
"entranceChannel": "前岗入口", |
||||
}, { |
"orderRealPaidAmout": 0.0 |
||||
title: '传软银国际裁员约10%两名管理合伙人离职', |
}, |
||||
date: '2020-02-15', |
{ |
||||
hot: 258 |
"accessType": "出场", |
||||
}, { |
"carType": "临时车", |
||||
title: '27万个岗位：区块链、人工智能等专场招聘', |
"parkName": "深圳宝安体育馆停车场", |
||||
date: '2020-02-10', |
"createTime": "2022-08-03 17:58:55", |
||||
hot: 198 |
"plateNumber": "粤CYG167", |
||||
}, { |
"entranceChannel": "后岗入口", |
||||
title: '一季度电商发展势头迅猛农村电商破1300万家', |
"orderRealPaidAmout": 0 |
||||
date: '2020-02-08', |
}, |
||||
hot: 19 |
{ |
||||
}] |
"accessType": "入场", |
||||
} |
"carType": "临时车", |
||||
}, |
"parkName": "深圳宝安体育馆停车场", |
||||
computed: { |
"createTime": "2022-08-03 17:58:38", |
||||
optionSetting () { |
"plateNumber": "粤CYG167", |
||||
return { |
"entranceChannel": "后岗入口", |
||||
step: 0.5, // 数值越大速度滚动越快 |
"orderRealPaidAmout": 6.0 |
||||
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length |
}, |
||||
hoverStop: true, // 是否开启鼠标悬停stop |
{ |
||||
direction: 1, // 0向下 1向上 2向左 3向右 |
"accessType": "入场", |
||||
// autoPlay: false, |
"carType": "免费车", |
||||
openWatch: true, // 开启数据实时监控刷新dom |
"parkName": "深圳宝安体育馆停车场", |
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
"createTime": "2022-08-03 17:57:55", |
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
"plateNumber": "粤C5N501", |
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms) |
"entranceChannel": "前岗入口", |
||||
} |
"orderRealPaidAmout": 0.0 |
||||
} |
}, |
||||
}, |
] |
||||
mounted() { |
} |
||||
|
}, |
||||
}, |
computed: { |
||||
methods: { |
optionSetting() { |
||||
|
return { |
||||
}, |
step: 0.5, // 数值越大速度滚动越快 |
||||
beforeDestroy() { |
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length |
||||
|
hoverStop: true, // 是否开启鼠标悬停stop |
||||
} |
direction: 1, // 0向下 1向上 2向左 3向右 |
||||
|
// autoPlay: false, |
||||
|
openWatch: true, // 开启数据实时监控刷新dom |
||||
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
||||
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
||||
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
|
||||
|
} |
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.sn-container { |
.sn { |
||||
left: 1370px; |
position: absolute; |
||||
top: 110px; |
overflow: hidden; |
||||
%table-style { |
display: block; |
||||
width: 100%; |
width: 9.8rem; |
||||
height: 35px; |
height: 3.55rem; |
||||
table-layout: fixed; |
left: 7.1rem; |
||||
tr { |
top: 9.5375rem; |
||||
td { |
// top: 3.5375rem; |
||||
padding: 10px 5px; |
|
||||
text-align: center; |
.sn-title { |
||||
background-color: transparent; |
box-sizing: border-box; |
||||
white-space: nowrap; |
padding-left: 0.5rem; |
||||
overflow: hidden; |
height: 0.7rem; |
||||
color: #E2E5FF; |
line-height: 0.7rem; |
||||
font-size: 14px; |
font-size: 0.25rem; |
||||
} |
color: #fff; |
||||
} |
background: url(../../assets/img/brand/parkIngo.png); |
||||
} |
} |
||||
.table { |
|
||||
.table-header { |
.sn-body { |
||||
@extend %table-style; |
color: #6FA8FF; |
||||
} |
background-color: rgba($color: #0d2464, $alpha: 0.2); |
||||
.seamless-warp { |
|
||||
height: 400px; |
.table-header { |
||||
overflow: hidden; |
height: 0.6rem; |
||||
visibility: visible; |
line-height: 0.6rem; |
||||
.colorRed { |
|
||||
color: #FF4669; |
span { |
||||
} |
font-size: 0.2rem; |
||||
.colorOrange { |
text-align: center; |
||||
color: #FFC956; |
display: inline-block; |
||||
} |
} |
||||
.item { |
} |
||||
height: auto; |
|
||||
@extend %table-style; |
.seamless-warp { |
||||
tr { |
color: #EF8C62; |
||||
td { |
height: 400px; |
||||
&.title { |
overflow: hidden; |
||||
text-overflow: ellipsis; |
visibility: visible; |
||||
display: inline-block; |
|
||||
} |
.line { |
||||
} |
&:nth-child(2n) { |
||||
} |
background: rgba(14, 75, 255, 0.1); |
||||
} |
} |
||||
} |
|
||||
} |
span { |
||||
|
height: 0.45rem; |
||||
|
line-height: 0.45rem; |
||||
|
font-size: 0.175rem; |
||||
|
text-align: center; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.in { |
||||
|
color: #1BDB7F; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue