system-phone 3.0.49-9 → 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 (129) 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//344/277/235/351/231/251/347/231/273/350/256/260.png +0 -0
  14. package/src/assets//345/215/217/345/212/251/345/256/211/346/243/200.png +0 -0
  15. package/src/assets//345/215/241/350/241/250/346/212/204/350/241/250/345/276/205/345/212/236.png +0 -0
  16. package/src/assets//345/233/236/350/256/277.png +0 -0
  17. package/src/assets//345/234/260/345/235/200/345/217/230/346/233/264.png +0 -0
  18. package/src/assets//345/242/236/345/200/274/345/276/205/345/212/236.png +0 -0
  19. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/344/270/212/344/274/240.png +0 -0
  20. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/344/273/243/345/212/236.png +0 -0
  21. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/345/267/262/345/212/236.png +0 -0
  22. package/src/assets//345/244/226/351/203/250/345/256/211/346/243/200/345/276/205/345/212/236.png +0 -0
  23. package/src/assets//345/244/226/351/203/250/351/233/206/344/270/255/345/256/211/346/243/200.png +0 -0
  24. package/src/assets//345/256/211/346/243/200/345/216/206/345/217/262/346/237/245/347/234/213.png +0 -0
  25. 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
  26. package/src/assets//345/256/211/346/243/200/347/256/241/347/220/206/351/200/211/344/270/255.png +0 -0
  27. package/src/assets//345/256/211/346/243/200/350/275/254/345/215/225/345/256/241/346/240/270.png +0 -0
  28. package/src/assets//345/267/245/345/215/225/345/244/215/346/243/200.png +0 -0
  29. package/src/assets//345/267/245/345/225/206/345/256/211/346/243/200.png +0 -0
  30. package/src/assets//345/276/205/345/212/236/347/273/237/350/256/241.png +0 -0
  31. package/src/assets//346/212/204/350/241/250/351/207/215/344/274/240.png +0 -0
  32. package/src/assets//346/212/245/345/273/272/344/273/243/345/212/236.png +0 -0
  33. package/src/assets//346/226/275/345/260/201.png +0 -0
  34. package/src/assets//346/226/275/345/260/201/347/256/241/347/220/206.png +0 -0
  35. package/src/assets//347/211/251/350/201/224/347/275/221/350/241/250.png +0 -0
  36. package/src/assets//347/224/250/346/210/267/345/273/272/346/241/243.png +0 -0
  37. package/src/assets//347/224/250/346/210/267/350/256/260/345/275/225.png +0 -0
  38. package/src/assets//347/273/264/344/277/256/345/234/250/347/272/277/346/237/245/350/257/242.png +0 -0
  39. package/src/assets//347/273/264/344/277/256/347/231/273/350/256/260.png +0 -0
  40. package/src/assets//350/256/241/345/210/222/345/256/211/346/243/200.png +0 -0
  41. package/src/assets//350/256/241/345/210/222/347/273/237/350/256/241.png +0 -0
  42. package/src/assets//351/200/232/346/260/224/346/211/223/345/216/213/347/225/231/345/272/225.png +0 -0
  43. package/src/assets//351/223/205/345/260/201/347/256/241/347/220/206.png +0 -0
  44. package/src/assets//351/230/200/346/216/247/347/256/241/347/220/206.png +0 -0
  45. package/src/assets//351/235/236/345/261/205/346/260/221/345/256/211/346/243/200.png +0 -0
  46. package/src/assets//351/242/204/347/272/246/345/256/211/346/243/200/345/276/205/345/212/236.png +0 -0
  47. package/src/assets//351/246/226/351/241/265/345/244/247/345/233/276.png +0 -0
  48. package/src/components/AloneLoadParams.vue +26 -26
  49. package/src/components/AlreadyService.vue +193 -193
  50. package/src/components/AttendManage.vue +534 -415
  51. package/src/components/LoadAppdata.vue +38 -38
  52. package/src/components/LoginApp.vue +732 -725
  53. package/src/components/LoginAppNew.vue +587 -587
  54. package/src/components/LoginAppV4.vue +732 -0
  55. package/src/components/ModifyPassWord.vue +216 -216
  56. package/src/components/NavBottom.vue +117 -117
  57. package/src/components/NavBottomV.vue +141 -141
  58. package/src/components/NavBottomVVV.vue +185 -185
  59. package/src/components/OnlineManage.vue +256 -256
  60. package/src/components/PhoneAllInfo.vue +68 -68
  61. package/src/components/PhoneChangemeterInfo.vue +116 -116
  62. package/src/components/PhoneImageInfo.vue +102 -0
  63. package/src/components/PhoneInfoTable.vue +39 -39
  64. package/src/components/PhoneMeterInfo.vue +132 -132
  65. package/src/components/PhoneRepairInfo.vue +146 -146
  66. package/src/components/PhoneSafeInfo.vue +101 -101
  67. package/src/components/PhoneSellInfo.vue +148 -123
  68. package/src/components/PhoneSellInfoLite.vue +112 -112
  69. package/src/components/PhoneUser.vue +202 -202
  70. package/src/components/PhoneUserDetil.vue +70 -70
  71. package/src/components/PhoneUserFind.vue +138 -138
  72. package/src/components/RightTree.vue +217 -217
  73. package/src/components/SystemSetUp.vue +2 -0
  74. package/src/components/TabBarPhone.vue +81 -81
  75. package/src/components/Test.vue +14 -14
  76. package/src/components/ToolsPage.vue +199 -180
  77. package/src/components/UploadManage.vue +194 -194
  78. package/src/components/gaomi/NavBottomV.vue +223 -223
  79. package/src/components/gaomi/NavBottomVVVV.vue +210 -210
  80. package/src/components/gaomi/Scroller.vue +63 -63
  81. package/src/components/gaomi/SystemSetUp.vue +186 -186
  82. package/src/components/gaomi/ToolsPage.vue +168 -168
  83. package/src/components/idea/feedBack.vue +150 -150
  84. package/src/components/idea/feedbackAdd.vue +366 -366
  85. package/src/components/info/ConfigInfo.vue +122 -122
  86. package/src/components/info/FindUserInfo.vue +157 -157
  87. package/src/components/info/InfoTable.vue +37 -37
  88. package/src/components/iot/InstructMessage.vue +313 -313
  89. package/src/components/iot/IotBaseInfo.vue +97 -97
  90. package/src/components/iot/IotMeterInfo.vue +77 -77
  91. package/src/components/iot/iotMonitoringMain.vue +501 -501
  92. package/src/components/online/ApplyOnline.vue +581 -581
  93. package/src/components/online/BJZhongRan/ApplyOnline.vue +600 -600
  94. package/src/components/screen/ChargeContentPage.vue +656 -656
  95. package/src/components/screen/ContentPage.vue +611 -611
  96. package/src/components/screen/GongdanContentPage.vue +149 -149
  97. package/src/components/screen/ListCountItem.vue +93 -93
  98. package/src/components/screen/ModuleTitle.vue +48 -48
  99. package/src/components/screen/SafeOrderContentPage.vue +440 -440
  100. package/src/components/screen/SecurityCheckItem.vue +50 -50
  101. package/src/components/screen/TotalItem.vue +76 -76
  102. package/src/components/screen/TotalUserNumber.vue +77 -77
  103. package/src/components/screen/WorkOrderItem.vue +51 -51
  104. package/src/components/screen/WorkOrderRightDownItem.vue +103 -103
  105. package/src/components/screen/WorkOrderRightItem.vue +115 -115
  106. package/src/components/userinfo/paymentQuery.vue +189 -189
  107. package/src/components/userinfo/queryFile.vue +190 -190
  108. package/src/components/wasm.vue +18 -18
  109. package/src/expandcssAndroid.less +521 -521
  110. package/src/filiale/yulinyuchuan/AlreadyService.vue +194 -0
  111. package/src/filiale/yulinyuchuan/AttendManage.vue +537 -0
  112. package/src/filiale/yulinyuchuan/LoginApp.vue +741 -0
  113. package/src/filiale/yulinyuchuan/OnlineManage.vue +256 -0
  114. package/src/filiale/yulinyuchuan/SystemSetUp.vue +332 -0
  115. package/src/filiale/yulinyuchuan/UploadManage.vue +195 -0
  116. package/src/filiale/yulinyuchuan/systemphonegrid.js +9 -0
  117. package/src/index.js +9 -9
  118. package/src/main.js +38 -38
  119. package/src/plugins/const.js +404 -404
  120. package/src/plugins/vue-py.js +37 -37
  121. package/src/stores/AppData.js +91 -63
  122. package/src/systemphone-gaomi.js +105 -105
  123. package/src/systemphone.js +60 -58
  124. package/src/systemphonegrid.js +185 -210
  125. package/src/util/LdapHelper.js +75 -75
  126. package/static/const.js +404 -404
  127. package/static/layui/font/iconfont.svg +554 -554
  128. package/static/vue-py.js +37 -37
  129. 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>