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