[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> |
|||
<div class="wrap-container sn-container"> |
|||
<div class="sn-content"> |
|||
<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> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="sn"> |
|||
<div class="sn-title">实时进出信息</div> |
|||
<div class="sn-body"> |
|||
<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> |
|||
|
|||
<script> |
|||
import vueSeamlessScroll from 'vue-seamless-scroll' |
|||
|
|||
export default { |
|||
name: "seamless", |
|||
components: { |
|||
vueSeamlessScroll |
|||
}, |
|||
data() { |
|||
return { |
|||
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 |
|||
}] |
|||
} |
|||
}, |
|||
computed: { |
|||
optionSetting () { |
|||
return { |
|||
step: 0.5, // 数值越大速度滚动越快 |
|||
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() { |
|||
|
|||
} |
|||
name: "seamless", |
|||
components: { |
|||
vueSeamlessScroll |
|||
}, |
|||
data() { |
|||
return { |
|||
rowColor: '/', |
|||
listData: [{ |
|||
"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() { |
|||
return { |
|||
step: 0.5, // 数值越大速度滚动越快 |
|||
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> |
|||
|
|||
<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; |
|||
overflow: hidden; |
|||
color: #E2E5FF; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
.table { |
|||
.table-header { |
|||
@extend %table-style; |
|||
} |
|||
.seamless-warp { |
|||
height: 400px; |
|||
overflow: hidden; |
|||
visibility: visible; |
|||
.colorRed { |
|||
color: #FF4669; |
|||
} |
|||
.colorOrange { |
|||
color: #FFC956; |
|||
} |
|||
.item { |
|||
height: auto; |
|||
@extend %table-style; |
|||
tr { |
|||
td { |
|||
&.title { |
|||
text-overflow: ellipsis; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sn { |
|||
position: absolute; |
|||
overflow: hidden; |
|||
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); |
|||
} |
|||
|
|||
.sn-body { |
|||
color: #6FA8FF; |
|||
background-color: rgba($color: #0d2464, $alpha: 0.2); |
|||
|
|||
.table-header { |
|||
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; |
|||
|
|||
.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> |
|||
|
|||
Loading…
Reference in new issue