index.vue
3.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<div class="app-orderMessageBox" ref="app_orderMessageBox">
<div class="theme-card">
<div class="title"><span>订单消息</span></div>
<div class="content">
<table class="orderMessageTb">
<tr>
<td>
<table class="tbHead">
<tr><td><div class="orderImgCom orderNum"></div></td><td>订单编号</td></tr>
</table>
</td>
<td>
<table class="tbHead">
<tr><td><div class="orderImgCom orderPark"></div></td><td>停车场</td></tr>
</table>
</td>
<td>
<table class="tbHead">
<tr><td><div class="orderImgCom orderMoney"></div></td><td>收费金额</td></tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<div class="orderListBox" id="orderListBox">
<marquee class="marqueeStyle" direction="up" behavior="scroll" scrollamount="2" onMouseOut="this.start()" onMouseOver="this.stop()" scrolldelay="0" loop="-1" >
<div class="orderListBox" v-html="orderList"></div>
</marquee>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "orderMessage",
data() {
return {
orderList:"",//公告列表
//marqueeHeight: '100%',
name: '订单公告'
}
},
mounted() {
//this.createLine();
this.orderList=this._getOrderList();
},
methods: {
_getOrderList:function(){
let tmpHtml="";
let tmpNum="0000001";
let tmpPark="老电视台路路侧泊位停车场";
let tmpMoney="5.00";
tmpHtml +="<table style='width: 100%;height: 100%; text-align: center;border:0px solid'>";
for(let i=0;i<10;i++){
tmpHtml +="<tr style='height: 20px;'>"+
"<td style='width: 20%'>"+tmpNum+i+"</td>"+
"<td style='width: 60%'>"+tmpPark+i+"</td>"+
"<td style='width: 20%;color:#04C304;'>"+tmpMoney+"</td>"+
"</tr>";
}
tmpHtml +="</table>";
return tmpHtml;
}
},
}
</script>
<style scoped lang="scss">
.app-orderMessageBox {
width: 100%;
.content{
padding: 0;
}
.theme-card{
height: 100%;
}
.orderMessageTb{
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
font-size: 12px;
}
.orderMessageTb > tr td,.tbHead{
vertical-align: middle;
text-align: center;
}
.orderMessageTb > tr:first-child{
height: 35px;
}
.orderListBox{
width: 100%;height: 100%;position: relative;
}
.tbHead{
display: inline-block;
}
.orderImgCom{
position:relative;
height: 18px;
width: 18px;
margin-right: 5px;
}
.orderNum{
background: url(../../images/com/orderNum.svg) no-repeat;background-size: 100% 100%;
}
.orderPark{
background: url(../../images/com/orderPark.svg) no-repeat;background-size: 100% 100%;
}
.orderMoney{
background: url(../../images/com/orderMoney.svg) no-repeat;background-size: 100% 100%;
}
.marqueeStyle{
border:0px solid red;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0;left: 0;right: 0;
bottom:0;
}
}
</style>