zhanmingkan
2022-05-14 0fc43fe898d14895c97427801293edfb3a0c5bf1
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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中铁城际三维平台登录</title>
    <link href="../libs/layui/css/layui.css" rel="stylesheet">
    <link href="../assets/css/login.css" rel="stylesheet">
    <script type="text/javascript" src="../libs/layui/layui.js"></script>
    <script src="../libs/jquery/jquery-3.5.1.min.js"></script>
    <script src="../libs/animationJs/animation.js"></script>
    <script src="../libs/animationJs/randomCode.js"></script>
    <script src="../assets/js/localStorage.js"></script>
 
</head>
 
<body class="gray-bg">
    <div class="zyl_login_height" id="zyllogin" lay-filter="zyllogin">
 
        <div class="zyl_login_cont"></div>
    </div>
 
    <div class="zyl_lofo_main">
        <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
            <legend>欢迎登录-中铁城际三维平台</legend>
 
        </fieldset>
 
        <div class="layui-row layui-col-space15">
            <form class="layui-form zyl_pad_01" action="">
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="text" name="userName" lay-verify="required|userName" autocomplete="off"
                            placeholder="账号" class="layui-input" value="admin">
                        <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="password" name="nuse" lay-verify="required|pass" autocomplete="off"
                            placeholder="密码" class="layui-input"  value="admin123">
                        <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-row">
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="layui-form-item">
                                <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes"
                                    autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                                <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">立即登录</button>
                </div>
            </form>
        </div>
 
    </div>
 
    <script>
        layui.use(['carousel', 'form'], function () {
            var carousel = layui.carousel
                , form = layui.form;
 
            //自定义验证规则
            form.verify({
                // userName: function (value) {
                //     if (value.length < 5) {
                //         return '账号至少得5个字符';
                //     }
                // }
               // , pass: [/^[\S]{6,12}$/, '密码必须6到12位,且不能出现空格']
                 vercodes: function (value) {
                    //获取验证码
                    var zylVerCode = $(".zylVerCode").html();
                    if (value != zylVerCode) {
                        return '验证码错误(区分大小写)';
                    }
                }
                // , content: function (value) {
                //     layedit.sync(editIndex);
                // }
            });
 
            //监听提交
            form.on('submit(login)', function (data) {
 
                var date =new Date().getTime();
                var expiretime=1000*60*60*24;
              //设置localStorage的值
               LocalStorage.set("dr3dUser","admin", date + expiretime);
               LocalStorage.set("dr3dUserId","1", date + expiretime); 
 
               window.location.href="index.html";
               return false;
            });
 
 
            //设置轮播主体高度
            var zyl_login_height = $(window).height();
            var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");
 
            //粒子线条
            $(".zyl_login_cont").jParticle({
                background: "rgba(0,0,0,0)",//背景颜色
                color: "#fff",//粒子和连线的颜色
                particlesNumber: 100,//粒子数量
                //disableLinks:true,//禁止粒子间连线
                disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1,//最小粒子
                    maxSize: 3,//最大粒子
                    speed: 30,//粒子的动画速度
                }
            });
 
        });
 
    </script>
 
</body>
 
</html>