system-phone 3.1.28 → 3.1.30

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.
@@ -1,719 +1,719 @@
1
- <template>
2
- <div class="loginbg" id="outheight">
3
- <!--输入框-->
4
- <div class="htmleaf-container">
5
- <div class="wrapper" :class="{'form-success': login}">
6
- <div class="container">
7
- <h3 style="color:white; margin-top: 15px">欢迎使用</h3>
8
- <p class="form" :style="{'margin-top': margintop + 'px'}">
9
- <input type="text" v-model="ename" class="usericon"/>
10
- <input :type="showpass==true?'text':'password'" v-model="password" class="psicon"/>
11
- <img :src="imageurl"
12
- style="width: 20px;margin-bottom: 5px;position: absolute;left: 62%;bottom: 43%;"
13
- alt=""
14
- @click="changepass()"/>
15
- <button type="button" id="login-button" @click.prevent="confirm()"><strong>登录</strong></button>
16
- </p>
17
- <div class="row">
18
- <img src="../../assets/选中.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showsave"
19
- @click="showoff()">
20
- <img src="../../assets/未选.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="!showsave"
21
- @click="showon()">
22
- <span class="text-left font">记住密码</span>
23
- <img src="../../assets/选中.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showauto == '1'"
24
- @click="showoff1()">
25
- <img src="../../assets/未选.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showauto == '2'"
26
- @click="showon1()">
27
- <span class="text-left font">自动登录</span>
28
- <p></p>
29
- <span class="devicetext">设备码:{{ deviceIemi }}</span>
30
- </div>
31
- </div>
32
- </div>
33
- </div>
34
- <!--<load-appdata @ready="onReady"></load-appdata>-->
35
- <div style="width: 100%;height: 100%;position: fixed;top: 0px;" v-show="loaderShow">
36
- <div id="loading" class="loading">登陆中...</div>
37
- </div>
38
- <modal :show.sync="modifyPassword" backdrop="false">
39
- <header slot="modal-header" class="modal-header">
40
- </header>
41
- <article slot="modal-body" class="modal-body">
42
- <modify-pass-word :sourse="login" :weak-password="weakPassword" v-if="modifyPassword"
43
- v-on:success="success"></modify-pass-word>
44
- </article>
45
- <footer slot="modal-footer" class="modal-footer">
46
- </footer>
47
- </modal>
48
- </div>
49
- </template>
50
-
51
- <script>
52
-
53
- /**
54
- * 说明:
55
- * /rs/vue 请求获取到的配置文件有关配置项目
56
- * telephone.LoginApp.weakPassword:为true 是判断是否弱密码校验
57
- *
58
- * globle 校验参数 Device_IEMI 是否需要校验设备iemi编码
59
- *
60
- */
61
-
62
- import Vue from 'vue'
63
- import * as Util from '../../Util'
64
- import JSEncrypt from 'jsencrypt'
65
- //获取json配置文件
66
- let asyncReady = async function (self, url) {
67
- // 获取配置信息
68
- try {
69
- console.log('获取营收配置文件和参数【开始】')
70
- await self.$appdata.load()
71
- console.log('获取营收配置文件和参数【结束】,开始获取vue配置文件【开始】')
72
- let that = self
73
- let res = await Vue.resetget(`${url}/phone/rs/vue`, {data: {}}, {resolveMsg: null, rejectMsg: null})
74
- that.$set('config', res.data)
75
- Vue.config2 = res.data
76
- // 判断是否需要弱密码校验
77
- if (self.config && self.config.telephone && self.config.telephone.LoginApp && 'undefined' != typeof self.config.telephone.LoginApp.weakPassword) {
78
- self.weakPassword = self.config.telephone.LoginApp.weakPassword
79
- }
80
- console.log('手机端获取.json文件')
81
- console.log(JSON.stringify(self.config))
82
- return true
83
- } catch (error) {
84
- console.log(error)
85
- // 此处业务数据装载异常不做任何处理,理论上不会有任何异常
86
- self.$showMessage('登录系统: 获取配置文件失败,请检查网络后重新登陆!')
87
- return false
88
- }
89
- }
90
-
91
- //装载业务数据
92
- let asyncLoadData = async function (self, url) {
93
- try {
94
- // 读取报建本地配置文件
95
- var result = HostApp.readLocalFile('workflow_apply.json')
96
- if (result.code == 500) {
97
- console.log('不存在流程配置文件,即不使用报建app')
98
- return
99
- }
100
- var data = JSON.parse(result.data)
101
- console.log('读取报建配置文件成功,存入缓存中的data=>' + JSON.stringify(data))
102
- Vue.workflow_vue = Vue.prototype.$workflow_vue = data
103
- } catch (error) {
104
- // 此处业务数据装载异常不做任何处理,理论上不会有任何异常,只有当app版本端版本较低无readlocalfile时会异常
105
- console.log(error)
106
- }
107
- }
108
-
109
- export default {
110
- title: '登录系统',
111
- data () {
112
- return {
113
- loaderShow: false,
114
- config: {},
115
- weakPassword: false,
116
- modifyPassword: false,
117
- ename: '',
118
- login: 'login',
119
- password: '',
120
- showsave: true,
121
- showauto: '2', // 1 自动登陆 2取消自动登陆
122
- showpass: false,
123
- imageurl: require('../../assets/miwen.png'),
124
- deviceIemi: '无法获取该设备码,请联系管理员',
125
- loginSafe: false,
126
- margintop: document.documentElement.clientHeight * 0.1
127
- }
128
- },
129
-
130
- ready () {
131
- if (Vue.android) {
132
- const userCache = this.$androidUtil.getPreference('login_user_cache')
133
- this.showauto = this.$androidUtil.getPreference('auto_login')
134
- this.showauto = this.showauto ? this.showauto : '2'
135
- console.log(`自动登陆标识ready:${this.showauto}`)
136
- if (userCache) {
137
- const userCacheJSON = JSON.parse(userCache.replace(/\'/g, '\"'))
138
- this.password = userCacheJSON.password
139
- this.ename = userCacheJSON.username
140
- }
141
- this.deviceIemi = this.$androidUtil.getDeviceIEMI()
142
- console.log(`手机设备码:${this.deviceIemi}`)
143
- if (this.showauto == '1' && this.password) {
144
- this.confirm()
145
- }
146
- }
147
- },
148
- methods: {
149
- success (val) {
150
- // 修改密码成功
151
- this.modifyPassword = false
152
- this.password = val
153
- },
154
- // 对资源菜单进行排序
155
- sortFunctions (val) {
156
- if (val && val.length > 0) {
157
- for (var i = 0; i < val.length - 1; i++) {
158
- for (var j = 0; j < val.length - 1 - i; j++) {
159
- if (val[j].position > val[j + 1].position) {
160
- var temp = val[j + 1]
161
- val[j + 1] = val[j]
162
- val[j] = temp
163
- }
164
- }
165
- }
166
- return val
167
- }
168
- return val
169
- },
170
- // 记住密码选中/未选中
171
- showoff () {
172
- this.showsave = false
173
- },
174
- showon () {
175
- this.showsave = true
176
- },
177
- showoff1 () {
178
- this.showauto = '2'
179
- },
180
- showon1 () {
181
- this.showauto = '1'
182
- },
183
- changepass () {
184
- this.showpass = this.showpass ? false : true
185
- if (this.showpass) {
186
- this.imageurl = require('../../assets/mingwen.png')
187
- } else {
188
- this.imageurl = require('../../assets/miwen.png')
189
- }
190
- },
191
- async confirm () {
192
- this.loaderShow = true
193
- // 判断用户状态
194
- let users = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
195
- data: {
196
- items: '*',
197
- tablename: 't_user',
198
- orderitem: 'id desc',
199
- condition: `ename = '${this.ename}' and (state='在职' or name like '%超级管理员%')`
200
- }
201
- }, {resolveMsg: null, rejectMsg: null})
202
- if (users.data.length == 0) {
203
- this.loaderShow = false
204
- this.$showMessage('登陆失败,用户不存在')
205
- return
206
- }
207
- console.log('Vue.android:' + Vue.android)
208
- Vue.dataUrl = this.$androidUtil.getProxyUrl() + '/'
209
- let loginData = {}
210
- try {
211
- let ret = {}
212
- try {
213
- ret = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-auth/login`, {
214
- username: this.ename, password: this.password,
215
- resourceName: '手机服务'
216
- }, {
217
- resolveMsg: null,
218
- rejectMsg: null,
219
- headerConfig: {'Content-type': 'application/json'}
220
- })
221
- console.log(ret, '==')
222
- if (ret.data) {
223
- if (ret.data.resources.data && ret.data.resources.data.id) {
224
- loginData = ret.data.resources.data
225
- } else {
226
- loginData = ret.data.resources
227
- }
228
- this.$androidUtil.setPreference('siteId', loginData.f_extend1 || '')
229
- this.$androidUtil.setPreference('flatId', loginData.f_extend2 || '')
230
- this.$androidUtil.setPreference('name', loginData.name || '')
231
- this.$androidUtil.setPreference('ename', loginData.ename || '')
232
- } else {
233
- throw {status: ret.data.code, message: ret.data.msg}
234
- }
235
- } catch (e) {
236
- if (Vue.android) {
237
- this.loaderShow = false
238
- this.$showMessage(e.message ? e.message : '登录失败!用户名或密码错误!')
239
- }
240
- return
241
- }
242
-
243
- // 设置登录人
244
- Vue.user = Util.f = loginData
245
-
246
- // 对资源菜单进行排序
247
- try{
248
- let viewDetails = await Vue.resetpost(`${this.$androidUtil.getProxyUrl()}/rs/search`, {
249
- source: 'this.getRights().where(row.getType()==$function$ && row.getPath($name$).indexOf($功能权限$) != -1)',
250
- userid: Vue.user.id
251
- }, {resolveMsg: null, rejectMsg: null})
252
- const rithtList = viewDetails.data
253
- Vue.user.r = []
254
- rithtList.forEach(x => Vue.user.r.push(x.name))
255
- }catch (e) {
256
- console.log('资源排序失败!暂时先不影响登录')
257
- }
258
- Vue.functions = this.sortFunctions(loginData.functions)
259
- let userStr
260
- if (Vue.android) {
261
- console.log(`Device_IEMI:${this.$androidUtil.getPreference('Device_IEMI')}`)
262
- // 判断是否需要验证 设备码
263
- if (this.$androidUtil.getPreference('Device_IEMI')) {
264
- console.log(`手机设备码:${this.deviceIemi}`)
265
- let result = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
266
- data: {
267
- items: '*',
268
- tablename: 't_equipment',
269
- orderitem: 'id desc',
270
- condition: `f_terminal_number = '${this.deviceIemi}' and f_state = '正常'`
271
- }
272
- }, {resolveMsg: null, rejectMsg: null})
273
- console.log(`检测设备码存在是否:${result.data.length}`)
274
- if (result.data.length == 0) {
275
- HostApp.alert('设备码未绑定,请联系管理员!')
276
- return
277
- }
278
- }
279
- if (this.showsave) {
280
- userStr = `{'username':'${this.ename}','password':'${this.password}'}`
281
- } else {
282
- userStr = `{'username':'${this.ename}','password':''}`
283
- }
284
- console.log(this.showauto)
285
- this.$androidUtil.setPreference('login_user_cache', userStr)
286
- this.$androidUtil.setPreference('f_repairman_id', Util.f.id)
287
- this.$androidUtil.setPreference('f_repairman_name', Util.f.name)
288
- this.$androidUtil.setPreference('f_orgid', Util.f.orgid)
289
- this.$androidUtil.setPreference('f_role_name', Util.f.f_role_name || '')
290
- console.log('自动登陆标识' + Util.f.f_role_name)
291
- console.log(this.showauto)
292
- this.$androidUtil.setPreference('auto_login', this.showauto)
293
- }
294
- Vue.$login = Vue.prototype.$login = {
295
- jwt: loginData.id,
296
- jwtNew: ret.data.access_token,
297
- toStandardDateString () {
298
- let dt = new Date()
299
- let month = dt.getMonth() + 1
300
- let date = dt.getDate()
301
- return dt.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
302
- }, toStandardTimeString () {
303
- let dt = new Date()
304
- let month = dt.getMonth() + 1
305
- let date = dt.getDate()
306
- let hour = dt.getHours()
307
- let min = dt.getMinutes()
308
- let sec = dt.getSeconds()
309
- return dt.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
310
- + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)
311
- }
312
- }
313
- // 获取参数
314
- console.log('获取参数system以及安检参数')
315
- const flag = await asyncReady(this, this.$androidUtil.getProxyUrl())
316
- if (!flag) {
317
- this.loaderShow = false
318
- console.log('获取参数异常')
319
- return
320
- }
321
- console.log('获取参数结束')
322
- this.loaderShow = false
323
- // 弱口令验证
324
- if (this.weakPassword && !(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*(123|321|abc|cba))[a-zA-Z\d!@#$%^&*()_+-=<>?]{8,16}$/.test(this.password))) {
325
- await this.$showMessage('登录系统: 此账户的密码过于简单,请修改密码后重新登陆!!!', ['confirm'])
326
- this.modifyPassword = true
327
- return
328
- }
329
- this.$goto('nav-bottom')
330
- } catch (e) {
331
- if (Vue.android) {
332
- this.loaderShow = false
333
- }
334
- console.error('登录异常,LoginApp的confirm函数错误', e)
335
- this.$showMessage('登陆失败!,')
336
- }
337
- }
338
- },
339
- watch: {
340
- 'config' (val) {
341
- Vue.config = val
342
- }
343
- }
344
- }
345
- </script>
346
- <style scoped="">
347
- .devicetext {
348
- font: 13px PingFang-SC-Medium;
349
- position: fixed;
350
- width: 100%;
351
- bottom: 13px;
352
- transform: translate(-50%, -50%);
353
- }
354
-
355
- /*输入框样式*/
356
- /*@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);*/
357
- * {
358
- box-sizing: border-box;
359
- margin: 0;
360
- padding: 0;
361
- font-weight: 300;
362
- }
363
-
364
- .loginbg {
365
- font-family: 'Source Sans Pro', sans-serif;
366
- color: white;
367
- font-weight: 300;
368
- }
369
-
370
- .loginbg ::-webkit-input-placeholder {
371
- /* WebKit browsers */
372
- font-family: 'Source Sans Pro', sans-serif;
373
- color: white;
374
- font-weight: 300;
375
- }
376
-
377
- .loginbg :-moz-placeholder {
378
- /* Mozilla Firefox 4 to 18 */
379
- font-family: 'Source Sans Pro', sans-serif;
380
- color: white;
381
- opacity: 1;
382
- font-weight: 300;
383
- }
384
-
385
- .loginbg ::-moz-placeholder {
386
- /* Mozilla Firefox 19+ */
387
- font-family: 'Source Sans Pro', sans-serif;
388
- color: white;
389
- opacity: 1;
390
- font-weight: 300;
391
- }
392
-
393
- .loginbg :-ms-input-placeholder {
394
- /* Internet Explorer 10+ */
395
- font-family: 'Source Sans Pro', sans-serif;
396
- color: white;
397
- font-weight: 300;
398
- }
399
-
400
- .wrapper {
401
- /*background: #2D83BA;
402
- background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
403
- background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);
404
- opacity: 0.8;*/
405
- /*position: absolute;*/
406
- /*top: 50%;
407
- right: 10%;
408
- width: 40%;
409
- height: 350px;
410
- margin-top: -150px;*/
411
- overflow: hidden;
412
- }
413
-
414
- .wrapper.form-success .container h3 {
415
- -webkit-transform: translateY(85px);
416
- -ms-transform: translateY(85px);
417
- transform: translateY(85px);
418
- }
419
-
420
- .container {
421
- /*max-width: 350px;*/
422
- margin: 0 auto;
423
- /*padding: 30px 100px 50px 100px;
424
- height: 350px;*/
425
- text-align: center;
426
- /*以下增加*/
427
- /*background: #2D83BA;
428
- background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
429
- background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);*/
430
- opacity: 0.8;
431
- }
432
-
433
- .container h3 {
434
- font-size: 40px;
435
- -webkit-transition-duration: 1s;
436
- transition-duration: 1s;
437
- -webkit-transition-timing-function: ease-in-out;
438
- transition-timing-function: ease-in-out;
439
- font-weight: 200;
440
- }
441
-
442
- .form {
443
- padding: 20px 0;
444
- /*margin-top: 15%;*/
445
- position: relative;
446
- z-index: 2;
447
- }
448
-
449
- .form input {
450
- -webkit-appearance: none;
451
- -moz-appearance: none;
452
- appearance: none;
453
- outline: 0;
454
- border: 1px solid #50ABE6;
455
- background-color: #50ABE6;
456
- width: 250px;
457
- border-radius: 3px;
458
- padding: 10px 15px;
459
- margin: 0 auto 10px auto;
460
- display: block;
461
- text-align: center;
462
- font-size: 18px;
463
- color: white;
464
- -webkit-transition-duration: 0.25s;
465
- transition-duration: 0.25s;
466
- font-weight: 300;
467
- }
468
-
469
- .form input:hover {
470
- background-color: rgba(255, 255, 255, 0.4);
471
- }
472
-
473
- .form input:focus {
474
- background-color: white;
475
- width: 300px;
476
- color: #53e3a6;
477
- }
478
-
479
- .usericon {
480
- background-image: url(../../assets/usericon.png);
481
- background-repeat: no-repeat;
482
- background-size: 30px;
483
- background-position-x: 8px;
484
- background-position-y: 8px;
485
- }
486
-
487
- .psicon {
488
- background-image: url(../../assets/psicon.png);
489
- background-repeat: no-repeat;
490
- background-size: 30px;
491
- background-position-x: 8px;
492
- background-position-y: 8px;
493
- }
494
-
495
- .form button {
496
- -webkit-appearance: none;
497
- -moz-appearance: none;
498
- appearance: none;
499
- outline: 0;
500
- background-color: white;
501
- border: 0;
502
- padding: 10px 15px;
503
- color: #253830;
504
- border-radius: 3px;
505
- width: 250px;
506
- cursor: pointer;
507
- font-size: 18px;
508
- -webkit-transition-duration: 0.25s;
509
- transition-duration: 0.25s;
510
- }
511
-
512
- .form button:hover {
513
- background-color: #f5f7f9;
514
- }
515
-
516
- /*注册字体样式*/
517
- .form span {
518
- color: #fff;
519
- display: table-footer-group;
520
- position: absolute;
521
- right: 10px;
522
- margin-top: 10px;
523
- cursor: pointer;
524
- }
525
-
526
- .logotitle {
527
- color: #fff;
528
- position: absolute;
529
- top: 50px;
530
- left: 50px;
531
- font-size: 50px;
532
- }
533
-
534
- /*注册模态框界面样式*/
535
- .modifystyle {
536
- background: #FCFEEE;
537
- }
538
-
539
- .modifystyle div {
540
- height: auto;
541
- margin-bottom: 15px;
542
- /*text-align: center;*/
543
- /*margin-left: 20%;*/
544
- }
545
-
546
- /*bootstrap字体图标要手动调整,所以使用字体图标的span必须紧跟在input后面,负责会错位*/
547
- .modifystyle div input + span {
548
- top: 0 !important;
549
- right: 32%;
550
- }
551
-
552
- .modifystyle span {
553
- color: red;
554
- }
555
-
556
- /* 通告区内容 */
557
- .notice-board {
558
- height: auto;
559
- position: absolute;
560
- top: 50%;
561
- margin-top: -150px;
562
- margin-left: 100px;
563
- color: #fff;
564
- }
565
-
566
- /*修改密码底部按钮部分样式*/
567
- .footerbtn {
568
- text-align: center;
569
- padding: 15px;
570
- }
571
-
572
- .footerbtn button {
573
- width: 100px;
574
- margin-left: 20px;
575
- }
576
-
577
- .bg-bubbles {
578
- position: absolute;
579
- top: 0;
580
- left: 0;
581
- width: 100%;
582
- height: 100%;
583
- z-index: 1;
584
- }
585
-
586
- .bg-bubbles li {
587
- position: absolute;
588
- list-style: none;
589
- display: block;
590
- width: 40px;
591
- height: 40px;
592
- background-color: rgba(255, 255, 255, 0.15);
593
- bottom: -160px;
594
- -webkit-animation: square 25s infinite;
595
- animation: square 25s infinite;
596
- -webkit-transition-timing-function: linear;
597
- transition-timing-function: linear;
598
- }
599
-
600
- .bg-bubbles li:nth-child(1) {
601
- left: 10%;
602
- }
603
-
604
- .bg-bubbles li:nth-child(2) {
605
- left: 20%;
606
- width: 80px;
607
- height: 80px;
608
- -webkit-animation-delay: 2s;
609
- animation-delay: 2s;
610
- -webkit-animation-duration: 17s;
611
- animation-duration: 17s;
612
- }
613
-
614
- .bg-bubbles li:nth-child(3) {
615
- left: 25%;
616
- -webkit-animation-delay: 4s;
617
- animation-delay: 4s;
618
- }
619
-
620
- .bg-bubbles li:nth-child(4) {
621
- left: 40%;
622
- width: 60px;
623
- height: 60px;
624
- -webkit-animation-duration: 22s;
625
- animation-duration: 22s;
626
- background-color: rgba(255, 255, 255, 0.25);
627
- }
628
-
629
- .bg-bubbles li:nth-child(5) {
630
- left: 70%;
631
- }
632
-
633
- .bg-bubbles li:nth-child(6) {
634
- left: 80%;
635
- width: 120px;
636
- height: 120px;
637
- -webkit-animation-delay: 3s;
638
- animation-delay: 3s;
639
- background-color: rgba(255, 255, 255, 0.2);
640
- }
641
-
642
- .bg-bubbles li:nth-child(7) {
643
- left: 32%;
644
- width: 160px;
645
- height: 160px;
646
- -webkit-animation-delay: 7s;
647
- animation-delay: 7s;
648
- }
649
-
650
- .bg-bubbles li:nth-child(8) {
651
- left: 55%;
652
- width: 20px;
653
- height: 20px;
654
- -webkit-animation-delay: 15s;
655
- animation-delay: 15s;
656
- -webkit-animation-duration: 40s;
657
- animation-duration: 40s;
658
- }
659
-
660
- .bg-bubbles li:nth-child(9) {
661
- left: 25%;
662
- width: 10px;
663
- height: 10px;
664
- -webkit-animation-delay: 2s;
665
- animation-delay: 2s;
666
- -webkit-animation-duration: 40s;
667
- animation-duration: 40s;
668
- background-color: rgba(255, 255, 255, 0.3);
669
- }
670
-
671
- .bg-bubbles li:nth-child(10) {
672
- left: 90%;
673
- width: 160px;
674
- height: 160px;
675
- -webkit-animation-delay: 11s;
676
- animation-delay: 11s;
677
- }
678
-
679
- @-webkit-keyframes square {
680
- 0% {
681
- -webkit-transform: translateY(0);
682
- transform: translateY(0);
683
- }
684
- 100% {
685
- -webkit-transform: translateY(-700px) rotate(600deg);
686
- transform: translateY(-700px) rotate(600deg);
687
- }
688
- }
689
-
690
- @keyframes square {
691
- 0% {
692
- -webkit-transform: translateY(0);
693
- transform: translateY(0);
694
- }
695
- 100% {
696
- -webkit-transform: translateY(-700px) rotate(600deg);
697
- transform: translateY(-700px) rotate(600deg);
698
- }
699
- }
700
-
701
- .loading {
702
- width: 36%;
703
- height: 7%;
704
- position: absolute;
705
- top: 30%;
706
- left: 32%;
707
- line-height: 56px;
708
- color: #fff;
709
- padding-left: 60px;
710
- font-size: 15px;
711
- background: #000 url(../../assets/loging.gif) no-repeat 10px 50%;
712
- opacity: 0.7;
713
- z-index: 9999;
714
- -moz-border-radius: 20px;
715
- -webkit-border-radius: 20px;
716
- border-radius: 20px;
717
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
718
- }
719
- </style>
1
+ <template>
2
+ <div class="loginbg" id="outheight">
3
+ <!--输入框-->
4
+ <div class="htmleaf-container">
5
+ <div class="wrapper" :class="{'form-success': login}">
6
+ <div class="container">
7
+ <h3 style="color:white; margin-top: 15px">欢迎使用</h3>
8
+ <p class="form" :style="{'margin-top': margintop + 'px'}">
9
+ <input type="text" v-model="ename" class="usericon"/>
10
+ <input :type="showpass==true?'text':'password'" v-model="password" class="psicon"/>
11
+ <img :src="imageurl"
12
+ style="width: 20px;margin-bottom: 5px;position: absolute;left: 62%;bottom: 43%;"
13
+ alt=""
14
+ @click="changepass()"/>
15
+ <button type="button" id="login-button" @click.prevent="confirm()"><strong>登录</strong></button>
16
+ </p>
17
+ <div class="row">
18
+ <img src="../../assets/选中.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showsave"
19
+ @click="showoff()">
20
+ <img src="../../assets/未选.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="!showsave"
21
+ @click="showon()">
22
+ <span class="text-left font">记住密码</span>
23
+ <img src="../../assets/选中.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showauto == '1'"
24
+ @click="showoff1()">
25
+ <img src="../../assets/未选.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showauto == '2'"
26
+ @click="showon1()">
27
+ <span class="text-left font">自动登录</span>
28
+ <p></p>
29
+ <span class="devicetext">设备码:{{ deviceIemi }}</span>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ <!--<load-appdata @ready="onReady"></load-appdata>-->
35
+ <div style="width: 100%;height: 100%;position: fixed;top: 0px;" v-show="loaderShow">
36
+ <div id="loading" class="loading">登陆中...</div>
37
+ </div>
38
+ <modal :show.sync="modifyPassword" backdrop="false">
39
+ <header slot="modal-header" class="modal-header">
40
+ </header>
41
+ <article slot="modal-body" class="modal-body">
42
+ <modify-pass-word :sourse="login" :weak-password="weakPassword" v-if="modifyPassword"
43
+ v-on:success="success"></modify-pass-word>
44
+ </article>
45
+ <footer slot="modal-footer" class="modal-footer">
46
+ </footer>
47
+ </modal>
48
+ </div>
49
+ </template>
50
+
51
+ <script>
52
+
53
+ /**
54
+ * 说明:
55
+ * /rs/vue 请求获取到的配置文件有关配置项目
56
+ * telephone.LoginApp.weakPassword:为true 是判断是否弱密码校验
57
+ *
58
+ * globle 校验参数 Device_IEMI 是否需要校验设备iemi编码
59
+ *
60
+ */
61
+
62
+ import Vue from 'vue'
63
+ import * as Util from '../../Util'
64
+ import JSEncrypt from 'jsencrypt'
65
+ //获取json配置文件
66
+ let asyncReady = async function (self, url) {
67
+ // 获取配置信息
68
+ try {
69
+ console.log('获取营收配置文件和参数【开始】')
70
+ await self.$appdata.load()
71
+ console.log('获取营收配置文件和参数【结束】,开始获取vue配置文件【开始】')
72
+ let that = self
73
+ let res = await Vue.resetget(`${url}/phone/rs/vue`, {data: {}}, {resolveMsg: null, rejectMsg: null})
74
+ that.$set('config', res.data)
75
+ Vue.config2 = res.data
76
+ // 判断是否需要弱密码校验
77
+ if (self.config && self.config.telephone && self.config.telephone.LoginApp && 'undefined' != typeof self.config.telephone.LoginApp.weakPassword) {
78
+ self.weakPassword = self.config.telephone.LoginApp.weakPassword
79
+ }
80
+ console.log('手机端获取.json文件')
81
+ console.log(JSON.stringify(self.config))
82
+ return true
83
+ } catch (error) {
84
+ console.log(error)
85
+ // 此处业务数据装载异常不做任何处理,理论上不会有任何异常
86
+ self.$showMessage('登录系统: 获取配置文件失败,请检查网络后重新登陆!')
87
+ return false
88
+ }
89
+ }
90
+
91
+ //装载业务数据
92
+ let asyncLoadData = async function (self, url) {
93
+ try {
94
+ // 读取报建本地配置文件
95
+ var result = HostApp.readLocalFile('workflow_apply.json')
96
+ if (result.code == 500) {
97
+ console.log('不存在流程配置文件,即不使用报建app')
98
+ return
99
+ }
100
+ var data = JSON.parse(result.data)
101
+ console.log('读取报建配置文件成功,存入缓存中的data=>' + JSON.stringify(data))
102
+ Vue.workflow_vue = Vue.prototype.$workflow_vue = data
103
+ } catch (error) {
104
+ // 此处业务数据装载异常不做任何处理,理论上不会有任何异常,只有当app版本端版本较低无readlocalfile时会异常
105
+ console.log(error)
106
+ }
107
+ }
108
+
109
+ export default {
110
+ title: '登录系统',
111
+ data () {
112
+ return {
113
+ loaderShow: false,
114
+ config: {},
115
+ weakPassword: false,
116
+ modifyPassword: false,
117
+ ename: '',
118
+ login: 'login',
119
+ password: '',
120
+ showsave: true,
121
+ showauto: '2', // 1 自动登陆 2取消自动登陆
122
+ showpass: false,
123
+ imageurl: require('../../assets/miwen.png'),
124
+ deviceIemi: '无法获取该设备码,请联系管理员',
125
+ loginSafe: false,
126
+ margintop: document.documentElement.clientHeight * 0.1
127
+ }
128
+ },
129
+
130
+ ready () {
131
+ if (Vue.android) {
132
+ const userCache = this.$androidUtil.getPreference('login_user_cache')
133
+ this.showauto = this.$androidUtil.getPreference('auto_login')
134
+ this.showauto = this.showauto ? this.showauto : '2'
135
+ console.log(`自动登陆标识ready:${this.showauto}`)
136
+ if (userCache) {
137
+ const userCacheJSON = JSON.parse(userCache.replace(/\'/g, '\"'))
138
+ this.password = userCacheJSON.password
139
+ this.ename = userCacheJSON.username
140
+ }
141
+ this.deviceIemi = this.$androidUtil.getDeviceIEMI()
142
+ console.log(`手机设备码:${this.deviceIemi}`)
143
+ if (this.showauto == '1' && this.password) {
144
+ this.confirm()
145
+ }
146
+ }
147
+ },
148
+ methods: {
149
+ success (val) {
150
+ // 修改密码成功
151
+ this.modifyPassword = false
152
+ this.password = val
153
+ },
154
+ // 对资源菜单进行排序
155
+ sortFunctions (val) {
156
+ if (val && val.length > 0) {
157
+ for (var i = 0; i < val.length - 1; i++) {
158
+ for (var j = 0; j < val.length - 1 - i; j++) {
159
+ if (val[j].position > val[j + 1].position) {
160
+ var temp = val[j + 1]
161
+ val[j + 1] = val[j]
162
+ val[j] = temp
163
+ }
164
+ }
165
+ }
166
+ return val
167
+ }
168
+ return val
169
+ },
170
+ // 记住密码选中/未选中
171
+ showoff () {
172
+ this.showsave = false
173
+ },
174
+ showon () {
175
+ this.showsave = true
176
+ },
177
+ showoff1 () {
178
+ this.showauto = '2'
179
+ },
180
+ showon1 () {
181
+ this.showauto = '1'
182
+ },
183
+ changepass () {
184
+ this.showpass = this.showpass ? false : true
185
+ if (this.showpass) {
186
+ this.imageurl = require('../../assets/mingwen.png')
187
+ } else {
188
+ this.imageurl = require('../../assets/miwen.png')
189
+ }
190
+ },
191
+ async confirm () {
192
+ this.loaderShow = true
193
+ // 判断用户状态
194
+ let users = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
195
+ data: {
196
+ items: '*',
197
+ tablename: 't_user',
198
+ orderitem: 'id desc',
199
+ condition: `ename = '${this.ename}' and (state='在职' or name like '%超级管理员%')`
200
+ }
201
+ }, {resolveMsg: null, rejectMsg: null})
202
+ if (users.data.length == 0) {
203
+ this.loaderShow = false
204
+ this.$showMessage('登陆失败,用户不存在')
205
+ return
206
+ }
207
+ console.log('Vue.android:' + Vue.android)
208
+ Vue.dataUrl = this.$androidUtil.getProxyUrl() + '/'
209
+ let loginData = {}
210
+ try {
211
+ let ret = {}
212
+ try {
213
+ ret = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-auth/login`, {
214
+ username: this.ename, password: this.password,
215
+ resourceName: '手机服务'
216
+ }, {
217
+ resolveMsg: null,
218
+ rejectMsg: null,
219
+ headerConfig: {'Content-type': 'application/json'}
220
+ })
221
+ console.log(ret, '==')
222
+ if (ret.data) {
223
+ if (ret.data.resources.data && ret.data.resources.data.id) {
224
+ loginData = ret.data.resources.data
225
+ } else {
226
+ loginData = ret.data.resources
227
+ }
228
+ this.$androidUtil.setPreference('siteId', loginData.f_extend1 || '')
229
+ this.$androidUtil.setPreference('flatId', loginData.f_extend2 || '')
230
+ this.$androidUtil.setPreference('name', loginData.name || '')
231
+ this.$androidUtil.setPreference('ename', loginData.ename || '')
232
+ } else {
233
+ throw {status: ret.data.code, message: ret.data.msg}
234
+ }
235
+ } catch (e) {
236
+ if (Vue.android) {
237
+ this.loaderShow = false
238
+ this.$showMessage(e.message ? e.message : '登录失败!用户名或密码错误!')
239
+ }
240
+ return
241
+ }
242
+
243
+ // 设置登录人
244
+ Vue.user = Util.f = loginData
245
+
246
+ // 对资源菜单进行排序
247
+ try{
248
+ let viewDetails = await Vue.resetpost(`${this.$androidUtil.getProxyUrl()}/rs/search`, {
249
+ source: 'this.getRights().where(row.getType()==$function$ && row.getPath($name$).indexOf($功能权限$) != -1)',
250
+ userid: Vue.user.id
251
+ }, {resolveMsg: null, rejectMsg: null})
252
+ const rithtList = viewDetails.data
253
+ Vue.user.r = []
254
+ rithtList.forEach(x => Vue.user.r.push(x.name))
255
+ }catch (e) {
256
+ console.log('资源排序失败!暂时先不影响登录')
257
+ }
258
+ Vue.functions = this.sortFunctions(loginData.functions)
259
+ let userStr
260
+ if (Vue.android) {
261
+ console.log(`Device_IEMI:${this.$androidUtil.getPreference('Device_IEMI')}`)
262
+ // 判断是否需要验证 设备码
263
+ if (this.$androidUtil.getPreference('Device_IEMI')) {
264
+ console.log(`手机设备码:${this.deviceIemi}`)
265
+ let result = await this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {
266
+ data: {
267
+ items: '*',
268
+ tablename: 't_equipment',
269
+ orderitem: 'id desc',
270
+ condition: `f_terminal_number = '${this.deviceIemi}' and f_state = '正常'`
271
+ }
272
+ }, {resolveMsg: null, rejectMsg: null})
273
+ console.log(`检测设备码存在是否:${result.data.length}`)
274
+ if (result.data.length == 0) {
275
+ HostApp.alert('设备码未绑定,请联系管理员!')
276
+ return
277
+ }
278
+ }
279
+ if (this.showsave) {
280
+ userStr = `{'username':'${this.ename}','password':'${this.password}'}`
281
+ } else {
282
+ userStr = `{'username':'${this.ename}','password':''}`
283
+ }
284
+ console.log(this.showauto)
285
+ this.$androidUtil.setPreference('login_user_cache', userStr)
286
+ this.$androidUtil.setPreference('f_repairman_id', Util.f.id)
287
+ this.$androidUtil.setPreference('f_repairman_name', Util.f.name)
288
+ this.$androidUtil.setPreference('f_orgid', Util.f.orgid)
289
+ this.$androidUtil.setPreference('f_role_name', Util.f.f_role_name || '')
290
+ console.log('自动登陆标识' + Util.f.f_role_name)
291
+ console.log(this.showauto)
292
+ this.$androidUtil.setPreference('auto_login', this.showauto)
293
+ }
294
+ Vue.$login = Vue.prototype.$login = {
295
+ jwt: loginData.id,
296
+ jwtNew: ret.data.access_token,
297
+ toStandardDateString () {
298
+ let dt = new Date()
299
+ let month = dt.getMonth() + 1
300
+ let date = dt.getDate()
301
+ return dt.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
302
+ }, toStandardTimeString () {
303
+ let dt = new Date()
304
+ let month = dt.getMonth() + 1
305
+ let date = dt.getDate()
306
+ let hour = dt.getHours()
307
+ let min = dt.getMinutes()
308
+ let sec = dt.getSeconds()
309
+ return dt.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
310
+ + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)
311
+ }
312
+ }
313
+ // 获取参数
314
+ console.log('获取参数system以及安检参数')
315
+ const flag = await asyncReady(this, this.$androidUtil.getProxyUrl())
316
+ if (!flag) {
317
+ this.loaderShow = false
318
+ console.log('获取参数异常')
319
+ return
320
+ }
321
+ console.log('获取参数结束')
322
+ this.loaderShow = false
323
+ // 弱口令验证
324
+ if (this.weakPassword && !(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*(123|321|abc|cba))[a-zA-Z\d!@#$%^&*()_+-=<>?]{8,16}$/.test(this.password))) {
325
+ await this.$showMessage('登录系统: 此账户的密码过于简单,请修改密码后重新登陆!!!', ['confirm'])
326
+ this.modifyPassword = true
327
+ return
328
+ }
329
+ this.$goto('nav-bottom')
330
+ } catch (e) {
331
+ if (Vue.android) {
332
+ this.loaderShow = false
333
+ }
334
+ console.error('登录异常,LoginApp的confirm函数错误', e)
335
+ this.$showMessage('登陆失败!,')
336
+ }
337
+ }
338
+ },
339
+ watch: {
340
+ 'config' (val) {
341
+ Vue.config = val
342
+ }
343
+ }
344
+ }
345
+ </script>
346
+ <style scoped="">
347
+ .devicetext {
348
+ font: 13px PingFang-SC-Medium;
349
+ position: fixed;
350
+ width: 100%;
351
+ bottom: 13px;
352
+ transform: translate(-50%, -50%);
353
+ }
354
+
355
+ /*输入框样式*/
356
+ /*@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);*/
357
+ * {
358
+ box-sizing: border-box;
359
+ margin: 0;
360
+ padding: 0;
361
+ font-weight: 300;
362
+ }
363
+
364
+ .loginbg {
365
+ font-family: 'Source Sans Pro', sans-serif;
366
+ color: white;
367
+ font-weight: 300;
368
+ }
369
+
370
+ .loginbg ::-webkit-input-placeholder {
371
+ /* WebKit browsers */
372
+ font-family: 'Source Sans Pro', sans-serif;
373
+ color: white;
374
+ font-weight: 300;
375
+ }
376
+
377
+ .loginbg :-moz-placeholder {
378
+ /* Mozilla Firefox 4 to 18 */
379
+ font-family: 'Source Sans Pro', sans-serif;
380
+ color: white;
381
+ opacity: 1;
382
+ font-weight: 300;
383
+ }
384
+
385
+ .loginbg ::-moz-placeholder {
386
+ /* Mozilla Firefox 19+ */
387
+ font-family: 'Source Sans Pro', sans-serif;
388
+ color: white;
389
+ opacity: 1;
390
+ font-weight: 300;
391
+ }
392
+
393
+ .loginbg :-ms-input-placeholder {
394
+ /* Internet Explorer 10+ */
395
+ font-family: 'Source Sans Pro', sans-serif;
396
+ color: white;
397
+ font-weight: 300;
398
+ }
399
+
400
+ .wrapper {
401
+ /*background: #2D83BA;
402
+ background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
403
+ background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);
404
+ opacity: 0.8;*/
405
+ /*position: absolute;*/
406
+ /*top: 50%;
407
+ right: 10%;
408
+ width: 40%;
409
+ height: 350px;
410
+ margin-top: -150px;*/
411
+ overflow: hidden;
412
+ }
413
+
414
+ .wrapper.form-success .container h3 {
415
+ -webkit-transform: translateY(85px);
416
+ -ms-transform: translateY(85px);
417
+ transform: translateY(85px);
418
+ }
419
+
420
+ .container {
421
+ /*max-width: 350px;*/
422
+ margin: 0 auto;
423
+ /*padding: 30px 100px 50px 100px;
424
+ height: 350px;*/
425
+ text-align: center;
426
+ /*以下增加*/
427
+ /*background: #2D83BA;
428
+ background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
429
+ background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);*/
430
+ opacity: 0.8;
431
+ }
432
+
433
+ .container h3 {
434
+ font-size: 40px;
435
+ -webkit-transition-duration: 1s;
436
+ transition-duration: 1s;
437
+ -webkit-transition-timing-function: ease-in-out;
438
+ transition-timing-function: ease-in-out;
439
+ font-weight: 200;
440
+ }
441
+
442
+ .form {
443
+ padding: 20px 0;
444
+ /*margin-top: 15%;*/
445
+ position: relative;
446
+ z-index: 2;
447
+ }
448
+
449
+ .form input {
450
+ -webkit-appearance: none;
451
+ -moz-appearance: none;
452
+ appearance: none;
453
+ outline: 0;
454
+ border: 1px solid #50ABE6;
455
+ background-color: #50ABE6;
456
+ width: 250px;
457
+ border-radius: 3px;
458
+ padding: 10px 15px;
459
+ margin: 0 auto 10px auto;
460
+ display: block;
461
+ text-align: center;
462
+ font-size: 18px;
463
+ color: white;
464
+ -webkit-transition-duration: 0.25s;
465
+ transition-duration: 0.25s;
466
+ font-weight: 300;
467
+ }
468
+
469
+ .form input:hover {
470
+ background-color: rgba(255, 255, 255, 0.4);
471
+ }
472
+
473
+ .form input:focus {
474
+ background-color: white;
475
+ width: 300px;
476
+ color: #53e3a6;
477
+ }
478
+
479
+ .usericon {
480
+ background-image: url(../../assets/usericon.png);
481
+ background-repeat: no-repeat;
482
+ background-size: 30px;
483
+ background-position-x: 8px;
484
+ background-position-y: 8px;
485
+ }
486
+
487
+ .psicon {
488
+ background-image: url(../../assets/psicon.png);
489
+ background-repeat: no-repeat;
490
+ background-size: 30px;
491
+ background-position-x: 8px;
492
+ background-position-y: 8px;
493
+ }
494
+
495
+ .form button {
496
+ -webkit-appearance: none;
497
+ -moz-appearance: none;
498
+ appearance: none;
499
+ outline: 0;
500
+ background-color: white;
501
+ border: 0;
502
+ padding: 10px 15px;
503
+ color: #253830;
504
+ border-radius: 3px;
505
+ width: 250px;
506
+ cursor: pointer;
507
+ font-size: 18px;
508
+ -webkit-transition-duration: 0.25s;
509
+ transition-duration: 0.25s;
510
+ }
511
+
512
+ .form button:hover {
513
+ background-color: #f5f7f9;
514
+ }
515
+
516
+ /*注册字体样式*/
517
+ .form span {
518
+ color: #fff;
519
+ display: table-footer-group;
520
+ position: absolute;
521
+ right: 10px;
522
+ margin-top: 10px;
523
+ cursor: pointer;
524
+ }
525
+
526
+ .logotitle {
527
+ color: #fff;
528
+ position: absolute;
529
+ top: 50px;
530
+ left: 50px;
531
+ font-size: 50px;
532
+ }
533
+
534
+ /*注册模态框界面样式*/
535
+ .modifystyle {
536
+ background: #FCFEEE;
537
+ }
538
+
539
+ .modifystyle div {
540
+ height: auto;
541
+ margin-bottom: 15px;
542
+ /*text-align: center;*/
543
+ /*margin-left: 20%;*/
544
+ }
545
+
546
+ /*bootstrap字体图标要手动调整,所以使用字体图标的span必须紧跟在input后面,负责会错位*/
547
+ .modifystyle div input + span {
548
+ top: 0 !important;
549
+ right: 32%;
550
+ }
551
+
552
+ .modifystyle span {
553
+ color: red;
554
+ }
555
+
556
+ /* 通告区内容 */
557
+ .notice-board {
558
+ height: auto;
559
+ position: absolute;
560
+ top: 50%;
561
+ margin-top: -150px;
562
+ margin-left: 100px;
563
+ color: #fff;
564
+ }
565
+
566
+ /*修改密码底部按钮部分样式*/
567
+ .footerbtn {
568
+ text-align: center;
569
+ padding: 15px;
570
+ }
571
+
572
+ .footerbtn button {
573
+ width: 100px;
574
+ margin-left: 20px;
575
+ }
576
+
577
+ .bg-bubbles {
578
+ position: absolute;
579
+ top: 0;
580
+ left: 0;
581
+ width: 100%;
582
+ height: 100%;
583
+ z-index: 1;
584
+ }
585
+
586
+ .bg-bubbles li {
587
+ position: absolute;
588
+ list-style: none;
589
+ display: block;
590
+ width: 40px;
591
+ height: 40px;
592
+ background-color: rgba(255, 255, 255, 0.15);
593
+ bottom: -160px;
594
+ -webkit-animation: square 25s infinite;
595
+ animation: square 25s infinite;
596
+ -webkit-transition-timing-function: linear;
597
+ transition-timing-function: linear;
598
+ }
599
+
600
+ .bg-bubbles li:nth-child(1) {
601
+ left: 10%;
602
+ }
603
+
604
+ .bg-bubbles li:nth-child(2) {
605
+ left: 20%;
606
+ width: 80px;
607
+ height: 80px;
608
+ -webkit-animation-delay: 2s;
609
+ animation-delay: 2s;
610
+ -webkit-animation-duration: 17s;
611
+ animation-duration: 17s;
612
+ }
613
+
614
+ .bg-bubbles li:nth-child(3) {
615
+ left: 25%;
616
+ -webkit-animation-delay: 4s;
617
+ animation-delay: 4s;
618
+ }
619
+
620
+ .bg-bubbles li:nth-child(4) {
621
+ left: 40%;
622
+ width: 60px;
623
+ height: 60px;
624
+ -webkit-animation-duration: 22s;
625
+ animation-duration: 22s;
626
+ background-color: rgba(255, 255, 255, 0.25);
627
+ }
628
+
629
+ .bg-bubbles li:nth-child(5) {
630
+ left: 70%;
631
+ }
632
+
633
+ .bg-bubbles li:nth-child(6) {
634
+ left: 80%;
635
+ width: 120px;
636
+ height: 120px;
637
+ -webkit-animation-delay: 3s;
638
+ animation-delay: 3s;
639
+ background-color: rgba(255, 255, 255, 0.2);
640
+ }
641
+
642
+ .bg-bubbles li:nth-child(7) {
643
+ left: 32%;
644
+ width: 160px;
645
+ height: 160px;
646
+ -webkit-animation-delay: 7s;
647
+ animation-delay: 7s;
648
+ }
649
+
650
+ .bg-bubbles li:nth-child(8) {
651
+ left: 55%;
652
+ width: 20px;
653
+ height: 20px;
654
+ -webkit-animation-delay: 15s;
655
+ animation-delay: 15s;
656
+ -webkit-animation-duration: 40s;
657
+ animation-duration: 40s;
658
+ }
659
+
660
+ .bg-bubbles li:nth-child(9) {
661
+ left: 25%;
662
+ width: 10px;
663
+ height: 10px;
664
+ -webkit-animation-delay: 2s;
665
+ animation-delay: 2s;
666
+ -webkit-animation-duration: 40s;
667
+ animation-duration: 40s;
668
+ background-color: rgba(255, 255, 255, 0.3);
669
+ }
670
+
671
+ .bg-bubbles li:nth-child(10) {
672
+ left: 90%;
673
+ width: 160px;
674
+ height: 160px;
675
+ -webkit-animation-delay: 11s;
676
+ animation-delay: 11s;
677
+ }
678
+
679
+ @-webkit-keyframes square {
680
+ 0% {
681
+ -webkit-transform: translateY(0);
682
+ transform: translateY(0);
683
+ }
684
+ 100% {
685
+ -webkit-transform: translateY(-700px) rotate(600deg);
686
+ transform: translateY(-700px) rotate(600deg);
687
+ }
688
+ }
689
+
690
+ @keyframes square {
691
+ 0% {
692
+ -webkit-transform: translateY(0);
693
+ transform: translateY(0);
694
+ }
695
+ 100% {
696
+ -webkit-transform: translateY(-700px) rotate(600deg);
697
+ transform: translateY(-700px) rotate(600deg);
698
+ }
699
+ }
700
+
701
+ .loading {
702
+ width: 36%;
703
+ height: 7%;
704
+ position: absolute;
705
+ top: 30%;
706
+ left: 32%;
707
+ line-height: 56px;
708
+ color: #fff;
709
+ padding-left: 60px;
710
+ font-size: 15px;
711
+ background: #000 url(../../assets/loging.gif) no-repeat 10px 50%;
712
+ opacity: 0.7;
713
+ z-index: 9999;
714
+ -moz-border-radius: 20px;
715
+ -webkit-border-radius: 20px;
716
+ border-radius: 20px;
717
+ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
718
+ }
719
+ </style>