system-phone 3.0.49 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/.gradle/buildOutputCleanup/cache.properties +2 -2
  2. package/SystemPhone.iml +8 -8
  3. package/build/dev-server.js +141 -141
  4. package/build/webpack.base.conf.js +82 -82
  5. package/build.gradle +27 -27
  6. package/gradle/wrapper/gradle-wrapper.properties +5 -5
  7. package/gradlew +183 -183
  8. package/gradlew.bat +100 -100
  9. package/index.html +21 -21
  10. package/package.json +1 -1
  11. package/src/App.vue +25 -25
  12. package/src/Util.js +415 -415
  13. package/src/assets/images//346/211/223/345/215/241.png +0 -0
  14. package/src/assets//344/277/235/351/231/251/347/231/273/350/256/260.png +0 -0
  15. package/src/assets//345/210/240/351/231/244/347/205/247/347/211/207.png +0 -0
  16. package/src/assets//345/215/217/345/212/251/345/256/211/346/243/200.png +0 -0
  17. package/src/assets//345/215/241/350/241/250/346/212/204/350/241/250/345/276/205/345/212/236.png +0 -0
  18. package/src/assets//345/233/236/350/256/277.png +0 -0
  19. package/src/assets//345/234/260/345/235/200/345/217/230/346/233/264.png +0 -0
  20. package/src/assets//345/242/236/345/200/274/345/276/205/345/212/236.png +0 -0
  21. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/344/270/212/344/274/240.png +0 -0
  22. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/344/273/243/345/212/236.png +0 -0
  23. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/345/267/262/345/212/236.png +0 -0
  24. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/345/276/205/345/212/236.png +0 -0
  25. package/src/assets//345/244/226/351/203/250/351/233/206/344/270/255/345/256/211/346/243/200.png +0 -0
  26. package/src/assets//345/256/211/346/243/200/345/216/206/345/217/262/346/237/245/347/234/213.png +0 -0
  27. package/src/assets//345/256/211/346/243/200/347/256/241/347/220/206/346/234/252/351/200/211/344/270/255.png +0 -0
  28. package/src/assets//345/256/211/346/243/200/347/256/241/347/220/206/351/200/211/344/270/255.png +0 -0
  29. package/src/assets//345/256/211/346/243/200/350/275/254/345/215/225/345/256/241/346/240/270.png +0 -0
  30. package/src/assets//345/267/245/345/215/225/345/244/215/346/243/200.png +0 -0
  31. package/src/assets//345/267/245/345/225/206/345/256/211/346/243/200.png +0 -0
  32. package/src/assets//345/276/205/345/212/236/347/273/237/350/256/241.png +0 -0
  33. package/src/assets//346/212/204/350/241/250/351/207/215/344/274/240.png +0 -0
  34. package/src/assets//346/212/245/345/273/272/344/273/243/345/212/236.png +0 -0
  35. package/src/assets//346/226/275/345/260/201.png +0 -0
  36. package/src/assets//346/226/275/345/260/201/347/256/241/347/220/206.png +0 -0
  37. package/src/assets//346/260/221/347/224/250/345/256/211/346/243/200.png +0 -0
  38. package/src/assets//347/205/247/347/211/207/345/210/240/351/231/244.png +0 -0
  39. package/src/assets//347/211/251/350/201/224/347/275/221/350/241/250.png +0 -0
  40. package/src/assets//347/224/250/346/210/267/345/273/272/346/241/243.png +0 -0
  41. package/src/assets//347/224/250/346/210/267/350/256/260/345/275/225.png +0 -0
  42. package/src/assets//347/273/264/344/277/256/345/234/250/347/272/277/346/237/245/350/257/242.png +0 -0
  43. package/src/assets//347/273/264/344/277/256/347/231/273/350/256/260.png +0 -0
  44. package/src/assets//347/273/264/344/277/256/350/256/260/345/275/225.png +0 -0
  45. package/src/assets//350/256/241/345/210/222/345/256/211/346/243/200.png +0 -0
  46. package/src/assets//350/256/241/345/210/222/347/273/237/350/256/241.png +0 -0
  47. package/src/assets//351/200/232/346/260/224/346/211/223/345/216/213/347/225/231/345/272/225.png +0 -0
  48. package/src/assets//351/223/205/345/260/201/347/256/241/347/220/206.png +0 -0
  49. package/src/assets//351/230/200/346/216/247/347/256/241/347/220/206.png +0 -0
  50. package/src/assets//351/235/236/345/261/205/346/260/221/345/256/211/346/243/200.png +0 -0
  51. package/src/assets//351/235/236/346/260/221/347/224/250/345/256/211/346/243/200.png +0 -0
  52. package/src/assets//351/242/204/347/272/246/345/256/211/346/243/200/345/276/205/345/212/236.png +0 -0
  53. package/src/assets//351/246/226/351/241/265/345/244/247/345/233/276.png +0 -0
  54. package/src/components/AloneLoadParams.vue +26 -26
  55. package/src/components/AlreadyService.vue +193 -193
  56. package/src/components/AttendManage.vue +120 -1
  57. package/src/components/LoadAppdata.vue +38 -38
  58. package/src/components/LoginApp.vue +732 -724
  59. package/src/components/LoginAppNew.vue +587 -587
  60. package/src/components/LoginAppV4.vue +732 -0
  61. package/src/components/ModifyPassWord.vue +216 -216
  62. package/src/components/NavBottom.vue +117 -117
  63. package/src/components/NavBottomV.vue +141 -141
  64. package/src/components/NavBottomVVV.vue +185 -185
  65. package/src/components/OnlineManage.vue +1 -1
  66. package/src/components/PhoneAllInfo.vue +68 -68
  67. package/src/components/PhoneChangemeterInfo.vue +116 -116
  68. package/src/components/PhoneImageInfo.vue +102 -0
  69. package/src/components/PhoneInfoTable.vue +39 -39
  70. package/src/components/PhoneMeterInfo.vue +132 -132
  71. package/src/components/PhoneRepairInfo.vue +146 -146
  72. package/src/components/PhoneSafeInfo.vue +4 -4
  73. package/src/components/PhoneSellInfo.vue +148 -123
  74. package/src/components/PhoneSellInfoLite.vue +112 -112
  75. package/src/components/PhoneUser.vue +202 -202
  76. package/src/components/PhoneUserDetil.vue +70 -70
  77. package/src/components/PhoneUserFind.vue +138 -138
  78. package/src/components/SystemSetUp.vue +332 -308
  79. package/src/components/TabBarPhone.vue +81 -81
  80. package/src/components/Test.vue +14 -14
  81. package/src/components/ToolsPage.vue +27 -4
  82. package/src/components/UploadManage.vue +194 -194
  83. package/src/components/gaomi/NavBottomV.vue +223 -223
  84. package/src/components/gaomi/NavBottomVVVV.vue +210 -210
  85. package/src/components/gaomi/Scroller.vue +63 -63
  86. package/src/components/gaomi/SystemSetUp.vue +186 -186
  87. package/src/components/gaomi/ToolsPage.vue +168 -168
  88. package/src/components/idea/feedBack.vue +150 -150
  89. package/src/components/idea/feedbackAdd.vue +366 -366
  90. package/src/components/info/ConfigInfo.vue +122 -122
  91. package/src/components/info/FindUserInfo.vue +157 -157
  92. package/src/components/info/InfoTable.vue +37 -37
  93. package/src/components/iot/InstructMessage.vue +313 -313
  94. package/src/components/iot/IotBaseInfo.vue +97 -97
  95. package/src/components/iot/IotMeterInfo.vue +77 -77
  96. package/src/components/iot/iotMonitoringMain.vue +501 -501
  97. package/src/components/online/ApplyOnline.vue +581 -581
  98. package/src/components/online/BJZhongRan/ApplyOnline.vue +600 -600
  99. package/src/components/screen/ChargeContentPage.vue +656 -656
  100. package/src/components/screen/ContentPage.vue +611 -611
  101. package/src/components/screen/GongdanContentPage.vue +149 -149
  102. package/src/components/screen/ListCountItem.vue +93 -93
  103. package/src/components/screen/ModuleTitle.vue +48 -48
  104. package/src/components/screen/SafeOrderContentPage.vue +440 -440
  105. package/src/components/screen/SecurityCheckItem.vue +50 -50
  106. package/src/components/screen/TotalItem.vue +76 -76
  107. package/src/components/screen/TotalUserNumber.vue +77 -77
  108. package/src/components/screen/WorkOrderItem.vue +51 -51
  109. package/src/components/screen/WorkOrderRightDownItem.vue +103 -103
  110. package/src/components/screen/WorkOrderRightItem.vue +115 -115
  111. package/src/components/userinfo/paymentQuery.vue +189 -189
  112. package/src/components/userinfo/queryFile.vue +190 -190
  113. package/src/components/wasm.vue +18 -18
  114. package/src/expandcssAndroid.less +521 -521
  115. package/src/filiale/yulinyuchuan/AlreadyService.vue +194 -0
  116. package/src/filiale/yulinyuchuan/AttendManage.vue +537 -0
  117. package/src/filiale/yulinyuchuan/LoginApp.vue +741 -0
  118. package/src/filiale/yulinyuchuan/OnlineManage.vue +256 -0
  119. package/src/filiale/yulinyuchuan/SystemSetUp.vue +332 -0
  120. package/src/filiale/yulinyuchuan/UploadManage.vue +195 -0
  121. package/src/filiale/yulinyuchuan/systemphonegrid.js +9 -0
  122. package/src/index.js +9 -9
  123. package/src/main.js +38 -38
  124. package/src/plugins/const.js +404 -404
  125. package/src/plugins/vue-py.js +37 -37
  126. package/src/stores/AppData.js +91 -63
  127. package/src/systemphone-gaomi.js +105 -105
  128. package/src/systemphone.js +60 -58
  129. package/src/systemphonegrid.js +15 -40
  130. package/src/util/LdapHelper.js +75 -75
  131. package/static/const.js +404 -404
  132. package/static/layui/font/iconfont.svg +554 -554
  133. package/static/vue-py.js +37 -37
  134. package/static/wasm_exec.js +465 -465
@@ -1,210 +1,210 @@
1
- <template>
2
- <div class="nav-bgcolor">
3
- <div class="auto">
4
- <tools-page :need-back="!isMenu" :title="titleName" @back="back('返回')" @paperinfo="paperinfo" > </tools-page>
5
- <p style="height: 45px"></p>
6
- <div v-show="isMenu">
7
- <img src="../../assets/高密公告.png" style="width: 100%;height: 200px;border-radius:5%;padding: 1%">
8
- <scroller :lists="list" class="scrollContainer" ></scroller>
9
- </div>
10
- <div class="row">
11
- <route v-ref:route> </route>
12
- </div>
13
- </div>
14
- </div>
15
-
16
- </template>
17
-
18
- <script scoped>
19
-
20
- import * as Util from '../../Util'
21
- export default {
22
- title: '99999',
23
- data () {
24
- return {
25
- usercenter:{fige:true},
26
- list: ["豪佳燃气欢迎您","豪佳燃气欢迎您","豪佳燃气欢迎您","豪佳燃气欢迎您"],
27
- titleName:'主界面',
28
- isMenu:true,
29
- tabs: Util.f.functions,
30
- text: '导航组件this',
31
- beforeName:'主界面',
32
- beforetabs:[],
33
- backthis:'',
34
- safe:false,
35
- systemsetup:'',
36
- isTrue:false,
37
- iftabbar:''
38
- }
39
- },
40
- ready () {
41
- this.$refs.route.init('nav-bottom')
42
- },
43
- methods: {
44
- imgback(val){
45
- return require('../../assets/'+val+'竖屏3.png')
46
- },
47
- back(flag){
48
- if(this.safe && flag == '返回' ){
49
- this.$showMessage('此返回所录入内容将无法找回!', ['confirm', 'cancel']).then((res) => {
50
- if (res === 'confirm') {
51
- this.safe = false
52
- this.delback()
53
- this.backthis.$back()
54
- }
55
- })
56
- }else{
57
- this.delback()
58
- this.safe = false
59
- this.backthis.$back()
60
- }
61
- },
62
- paperinfo(param){
63
- // this.$dispatch('usercenter')
64
- console.log('systemSetup的值 = '+param)
65
- // //this.gotopage(param,'个人中心')
66
- // //this.$refs.route.gotopage(param,'个人中心')
67
- this.systemsetup=param
68
- this.isTrue=!this.isTrue
69
-
70
- },
71
- delback(){
72
- // 先确认出 前一个组件的名字
73
- var title = this.beforeName
74
- var beforetitle = '主界面'
75
- var j = -1
76
- for(var i = 0;i<this.beforetabs.length;i++){
77
- if(this.beforetabs[i].titleName == title){
78
- beforetitle = this.beforetabs[i].beforeName
79
- this.backthis =this.beforetabs[i].backthis
80
- this.safe = this.beforetabs[i].safe
81
- j = i
82
- break;
83
- }
84
- }
85
- this.beforetabs.splice(j + 1, 1)
86
- this.beforeName = beforetitle
87
- this.titleName = title
88
- // 判断是否 显示底层导航
89
- if(this.iftabbar == this.titleName){
90
- this.isMenu = true
91
- }
92
- },
93
- gotopage(param,title) {
94
- if(title == '退出系统'){
95
- this.$showMessage('即将返回登陆界面!', ['confirm', 'cancel']).then((res) => {
96
- if (res === 'confirm') {
97
- this.$androidUtil.setPreference('f_repairman_id', 'x')
98
- this.$androidUtil.setPreference('f_repairman_name', 'x')
99
- this.$back()
100
- }
101
- })
102
- }else{
103
- this.isMenu=false
104
- if(this.beforeName == title){
105
- return
106
- }
107
- this.titleName = title
108
- this.beforeName = title
109
- let data = {
110
- sourcet: '竖屏'
111
- }
112
- if(title == '待办工单'){
113
- param = param+'V'
114
- }
115
- this.$refs.route.init(param,data)
116
- // if (param !== 'text-chat-pane') {
117
- // this.notified('false')
118
- // } else {
119
- // this.notified('true')
120
- // }
121
- }
122
- },
123
- mute () {
124
- HostApp.mute()
125
- }
126
- },
127
- events: {
128
- 'usercenter': function () {
129
- this.usercenter.fige = false
130
- },
131
- 'gotoson': function (prpdata) {
132
- // 事件回调内的 `this` 自动绑定到注册它的实例上
133
- // safe 返回事件是否进行判断后再返回
134
- // 每进入一次,beforetabs 数组添加 返回 删除
135
- this.backthis = prpdata._this
136
- this.safe = prpdata.safe
137
- this.isMenu = false
138
- // 记录本次跳转
139
- var beforedata = {
140
- beforeName: this.titleName,
141
- titleName: prpdata.title,
142
- backthis:prpdata._this,
143
- safe:prpdata.safe
144
- }
145
- this.beforetabs.push(beforedata)
146
- if( this.beforetabs.length == 1){
147
- this.iftabbar = beforedata.beforeName
148
- }
149
- // 写入跳转后 前后组件名字
150
- this.beforeName = this.titleName
151
- this.titleName = prpdata.title
152
-
153
- console.log('进入子组件,通知外层组件,我已经进入')
154
- },
155
- 'confirm': function () {
156
- // 提交处理返回事件
157
- this.back('提交')
158
- },
159
- 'backarrdel': function () {
160
- this.delback()
161
- },
162
- 'gologin': function () {
163
- this.beforetabs = []
164
- this.$back()
165
- }
166
- }
167
- }
168
- </script>
169
- <style lang="less">
170
- .tab-befor-img {
171
- content: '';
172
- background-size: 30px;
173
- display: inline-block;
174
- margin-right: 8px;
175
- height: 30px;
176
- width: 30px;
177
- vertical-align: -35%;
178
- }
179
- .manbiankuang{
180
- width: 44%;
181
- margin-top: 15px;
182
- margin-left: 4%;
183
- border:1px solid #e3e3e3;
184
- border-radius:10px 10px 10px 10px;
185
- text-align: center;
186
- background-color: #ffffff;
187
- }
188
- .navimagesfoot{
189
- font-size: 14px;
190
- color: #666666;
191
- /* font-family: "Pingfhs";*/
192
- }
193
- .nav-bgcolor{
194
- background-color: #f0f0ef;
195
- }
196
- img[src=""],img:not([src]){
197
- opacity: 0;
198
- border:none;
199
- visibility: hidden;
200
- max-width: none;
201
- }
202
- /* .repair-mute-class {
203
- &::before {
204
- .tab-befor-img("../../assets/guanbishengyin.png")
205
- }
206
- }*/
207
- .butt {margin-left: 20%; margin-right: 20%; margin-top: 15%; height: 20%; width: 20%; border-radius: 5%; text-align: center;align-items:center;}
208
- .butt div.content {line-height:320%; height: 100%; font-size: 48px; color: white; text-align:center;}
209
- .butt span{ width: 100%; font-size: 48px; color: white; text-align: center;}
210
- </style>
1
+ <template>
2
+ <div class="nav-bgcolor">
3
+ <div class="auto">
4
+ <tools-page :need-back="!isMenu" :title="titleName" @back="back('返回')" @paperinfo="paperinfo" > </tools-page>
5
+ <p style="height: 45px"></p>
6
+ <div v-show="isMenu">
7
+ <img src="../../assets/高密公告.png" style="width: 100%;height: 200px;border-radius:5%;padding: 1%">
8
+ <scroller :lists="list" class="scrollContainer" ></scroller>
9
+ </div>
10
+ <div class="row">
11
+ <route v-ref:route> </route>
12
+ </div>
13
+ </div>
14
+ </div>
15
+
16
+ </template>
17
+
18
+ <script scoped>
19
+
20
+ import * as Util from '../../Util'
21
+ export default {
22
+ title: '99999',
23
+ data () {
24
+ return {
25
+ usercenter:{fige:true},
26
+ list: ["豪佳燃气欢迎您","豪佳燃气欢迎您","豪佳燃气欢迎您","豪佳燃气欢迎您"],
27
+ titleName:'主界面',
28
+ isMenu:true,
29
+ tabs: Util.f.functions,
30
+ text: '导航组件this',
31
+ beforeName:'主界面',
32
+ beforetabs:[],
33
+ backthis:'',
34
+ safe:false,
35
+ systemsetup:'',
36
+ isTrue:false,
37
+ iftabbar:''
38
+ }
39
+ },
40
+ ready () {
41
+ this.$refs.route.init('nav-bottom')
42
+ },
43
+ methods: {
44
+ imgback(val){
45
+ return require('../../assets/'+val+'竖屏3.png')
46
+ },
47
+ back(flag){
48
+ if(this.safe && flag == '返回' ){
49
+ this.$showMessage('此返回所录入内容将无法找回!', ['confirm', 'cancel']).then((res) => {
50
+ if (res === 'confirm') {
51
+ this.safe = false
52
+ this.delback()
53
+ this.backthis.$back()
54
+ }
55
+ })
56
+ }else{
57
+ this.delback()
58
+ this.safe = false
59
+ this.backthis.$back()
60
+ }
61
+ },
62
+ paperinfo(param){
63
+ // this.$dispatch('usercenter')
64
+ console.log('systemSetup的值 = '+param)
65
+ // //this.gotopage(param,'个人中心')
66
+ // //this.$refs.route.gotopage(param,'个人中心')
67
+ this.systemsetup=param
68
+ this.isTrue=!this.isTrue
69
+
70
+ },
71
+ delback(){
72
+ // 先确认出 前一个组件的名字
73
+ var title = this.beforeName
74
+ var beforetitle = '主界面'
75
+ var j = -1
76
+ for(var i = 0;i<this.beforetabs.length;i++){
77
+ if(this.beforetabs[i].titleName == title){
78
+ beforetitle = this.beforetabs[i].beforeName
79
+ this.backthis =this.beforetabs[i].backthis
80
+ this.safe = this.beforetabs[i].safe
81
+ j = i
82
+ break;
83
+ }
84
+ }
85
+ this.beforetabs.splice(j + 1, 1)
86
+ this.beforeName = beforetitle
87
+ this.titleName = title
88
+ // 判断是否 显示底层导航
89
+ if(this.iftabbar == this.titleName){
90
+ this.isMenu = true
91
+ }
92
+ },
93
+ gotopage(param,title) {
94
+ if(title == '退出系统'){
95
+ this.$showMessage('即将返回登陆界面!', ['confirm', 'cancel']).then((res) => {
96
+ if (res === 'confirm') {
97
+ this.$androidUtil.setPreference('f_repairman_id', 'x')
98
+ this.$androidUtil.setPreference('f_repairman_name', 'x')
99
+ this.$back()
100
+ }
101
+ })
102
+ }else{
103
+ this.isMenu=false
104
+ if(this.beforeName == title){
105
+ return
106
+ }
107
+ this.titleName = title
108
+ this.beforeName = title
109
+ let data = {
110
+ sourcet: '竖屏'
111
+ }
112
+ if(title == '待办工单'){
113
+ param = param+'V'
114
+ }
115
+ this.$refs.route.init(param,data)
116
+ // if (param !== 'text-chat-pane') {
117
+ // this.notified('false')
118
+ // } else {
119
+ // this.notified('true')
120
+ // }
121
+ }
122
+ },
123
+ mute () {
124
+ HostApp.mute()
125
+ }
126
+ },
127
+ events: {
128
+ 'usercenter': function () {
129
+ this.usercenter.fige = false
130
+ },
131
+ 'gotoson': function (prpdata) {
132
+ // 事件回调内的 `this` 自动绑定到注册它的实例上
133
+ // safe 返回事件是否进行判断后再返回
134
+ // 每进入一次,beforetabs 数组添加 返回 删除
135
+ this.backthis = prpdata._this
136
+ this.safe = prpdata.safe
137
+ this.isMenu = false
138
+ // 记录本次跳转
139
+ var beforedata = {
140
+ beforeName: this.titleName,
141
+ titleName: prpdata.title,
142
+ backthis:prpdata._this,
143
+ safe:prpdata.safe
144
+ }
145
+ this.beforetabs.push(beforedata)
146
+ if( this.beforetabs.length == 1){
147
+ this.iftabbar = beforedata.beforeName
148
+ }
149
+ // 写入跳转后 前后组件名字
150
+ this.beforeName = this.titleName
151
+ this.titleName = prpdata.title
152
+
153
+ console.log('进入子组件,通知外层组件,我已经进入')
154
+ },
155
+ 'confirm': function () {
156
+ // 提交处理返回事件
157
+ this.back('提交')
158
+ },
159
+ 'backarrdel': function () {
160
+ this.delback()
161
+ },
162
+ 'gologin': function () {
163
+ this.beforetabs = []
164
+ this.$back()
165
+ }
166
+ }
167
+ }
168
+ </script>
169
+ <style lang="less">
170
+ .tab-befor-img {
171
+ content: '';
172
+ background-size: 30px;
173
+ display: inline-block;
174
+ margin-right: 8px;
175
+ height: 30px;
176
+ width: 30px;
177
+ vertical-align: -35%;
178
+ }
179
+ .manbiankuang{
180
+ width: 44%;
181
+ margin-top: 15px;
182
+ margin-left: 4%;
183
+ border:1px solid #e3e3e3;
184
+ border-radius:10px 10px 10px 10px;
185
+ text-align: center;
186
+ background-color: #ffffff;
187
+ }
188
+ .navimagesfoot{
189
+ font-size: 14px;
190
+ color: #666666;
191
+ /* font-family: "Pingfhs";*/
192
+ }
193
+ .nav-bgcolor{
194
+ background-color: #f0f0ef;
195
+ }
196
+ img[src=""],img:not([src]){
197
+ opacity: 0;
198
+ border:none;
199
+ visibility: hidden;
200
+ max-width: none;
201
+ }
202
+ /* .repair-mute-class {
203
+ &::before {
204
+ .tab-befor-img("../../assets/guanbishengyin.png")
205
+ }
206
+ }*/
207
+ .butt {margin-left: 20%; margin-right: 20%; margin-top: 15%; height: 20%; width: 20%; border-radius: 5%; text-align: center;align-items:center;}
208
+ .butt div.content {line-height:320%; height: 100%; font-size: 48px; color: white; text-align:center;}
209
+ .butt span{ width: 100%; font-size: 48px; color: white; text-align: center;}
210
+ </style>
@@ -1,63 +1,63 @@
1
- <template>
2
- <div class="wrap">
3
- <ul id="marquee">
4
- <li v-for="(index,item) in lists" :key="index">{{item}}</li>
5
- </ul>
6
- </div>
7
- </template>
8
- <script type="text/ecmascript-6">
9
- export default {
10
- name: "Scroller",
11
- props: ["lists"], // 父组件传入数据, 数组形式
12
- methods: {
13
- move() {
14
- // 获取内容区宽度
15
- let width = document.getElementById("marquee").scrollWidth;
16
- let marquee = document.getElementById("marquee");
17
- let speed = 10; // 位移距离
18
- // 设置位移
19
- setInterval(function() {
20
- speed = speed - 1;
21
- // 如果位移超过文字宽度,则回到起点
22
-
23
- if (-speed >= width) {
24
- speed = 500;
25
- }
26
- marquee.style.transform = "translateX(" + speed + "px)";
27
- }, 40);
28
- }
29
- },
30
- ready(){
31
- console.log("9999999999999999999")
32
- this.move()
33
- },
34
- mounted: function() {
35
- this.move();
36
- }
37
- };
38
- </script>
39
- <style scoped>
40
- /*样式的话可以写*/
41
- .wrap {
42
- overflow: hidden;
43
- color: black;
44
- }
45
- #box {
46
- height: 100%;
47
- }
48
- ul,
49
- li {
50
- margin: 0;
51
- padding: 0;
52
- }
53
- ul {
54
- white-space: nowrap;
55
- margin: 0 10px;
56
- }
57
- li {
58
- height: 100%;
59
- list-style: none;
60
- margin-right: 10px;
61
- display: inline-block;
62
- }
63
- </style>
1
+ <template>
2
+ <div class="wrap">
3
+ <ul id="marquee">
4
+ <li v-for="(index,item) in lists" :key="index">{{item}}</li>
5
+ </ul>
6
+ </div>
7
+ </template>
8
+ <script type="text/ecmascript-6">
9
+ export default {
10
+ name: "Scroller",
11
+ props: ["lists"], // 父组件传入数据, 数组形式
12
+ methods: {
13
+ move() {
14
+ // 获取内容区宽度
15
+ let width = document.getElementById("marquee").scrollWidth;
16
+ let marquee = document.getElementById("marquee");
17
+ let speed = 10; // 位移距离
18
+ // 设置位移
19
+ setInterval(function() {
20
+ speed = speed - 1;
21
+ // 如果位移超过文字宽度,则回到起点
22
+
23
+ if (-speed >= width) {
24
+ speed = 500;
25
+ }
26
+ marquee.style.transform = "translateX(" + speed + "px)";
27
+ }, 40);
28
+ }
29
+ },
30
+ ready(){
31
+ console.log("9999999999999999999")
32
+ this.move()
33
+ },
34
+ mounted: function() {
35
+ this.move();
36
+ }
37
+ };
38
+ </script>
39
+ <style scoped>
40
+ /*样式的话可以写*/
41
+ .wrap {
42
+ overflow: hidden;
43
+ color: black;
44
+ }
45
+ #box {
46
+ height: 100%;
47
+ }
48
+ ul,
49
+ li {
50
+ margin: 0;
51
+ padding: 0;
52
+ }
53
+ ul {
54
+ white-space: nowrap;
55
+ margin: 0 10px;
56
+ }
57
+ li {
58
+ height: 100%;
59
+ list-style: none;
60
+ margin-right: 10px;
61
+ display: inline-block;
62
+ }
63
+ </style>