inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
6d1057 1 <template>
I 2
3     <div class="login-block">
4         <div class="login-animate  ">
5             <div class="left-ear"></div>
6             <div class="right-ear"></div>
7             <div class="head">
8                 <div class="left-eye"></div>
9                 <div class="right-eye"></div>
10                 <div class="face">
11                     <div class="nose"></div>
12                     <div class="mouth"></div>
13                 </div>
14             </div>
15             <div class="body"></div>
16             <div class="left-arm"></div>
17             <div class="right-arm"></div>
18         </div>
19
20         <div class="login-form">
21             <div class="username">
22                 <input type="text" name="username" autocomplete="off">
23             </div>
24             <div class="password ">
25                 <input type="password" name="password">
26                 <div class="pwd-eye" data-flag="hide"></div>
27             </div>
28             <div class="login">
29                 <button id="focus" @click="myLogin">SIGN IN</button>
30             </div>
31         </div>
32     </div>
33
34 </template>
35
36 <script>
37     import $ from 'jquery'
38     export default {
39         components: {},
40         props: {},
41         data() {
42             return {}
43         },
44         mounted() {
45             $(".pwd-eye").hide();
46             $(".pwd-eye").click(function() {
47                 var flag = $(this).attr('data-flag');
48
49                 $(this).attr('data-flag', flag == 'show' ? 'hide' : 'show');
50                 if (flag == 'show') {
51                     $(this).addClass('pwd-eye-show');
52                     $(this).removeClass('pwd-eye-hide');
53                 } else {
54                     $(this).removeClass('pwd-eye-show');
55                     $(this).addClass('pwd-eye-hide');
56                 }
57
58                 $('input[name="password"]').attr('type', flag == 'show' ? 'password' : 'text');
59
60                 if (flag != 'show' && $('input[name="password"]').val() != '') {
61                     $('.left-arm').addClass('show');
62                     $('.mouth').addClass('show');
63                     $('.right-arm').addClass('show');
64                 } else {
65                     $('.left-arm').removeClass('show');
66                     $('.mouth').removeClass('show');
67                     $('.right-arm').removeClass('show');
68                 }
69             });
70
71             $('input[name="username"]').focus(function() {
72                 $(".login-animate").addClass('username-animate');
73                 $(".login-animate").removeClass('password-animate');
74                 var length = $(this).val().length;
75                 getposition(length);
76             });
77
78             $('input[name="username"]').bind('input', function() {
79                 var length = $(this).val().length;
80                 getposition(length);
81             });
82
83             function getposition(length) {
84                 //计算当前输入字节长度
85                 var face = parseFloat(1.5 / 36 * length);
86                 var nose = parseFloat(1 / 36 * length);
87                 var mouth = parseFloat(1 / 36 * length);
88                 var left_eye = parseFloat(2 / 36 * length);
89                 var right_eye = parseFloat(2 / 36 * length);
90                 var left_ear = parseFloat(1 / 36 * length);
91                 var right_ear = parseFloat(2 / 36 * length);
92
93                 //头部旋转
94                 if (length >= 0 && length <= 25) {
95                     $('.head').css('-webkit-transform', "rotate(" + (10 - length / 2) + "deg)");
96                 }
97
98                 //左边为初始值
99                 $('.face').css('left', 0.8 + (face > 0.5 ? 0.5 : face) + 'em');
100                 $('.nose').css('left', 1.4 + (nose > 0.6 ? 0.6 : nose) + 'em');
101                 $('.mouth doe').css('left', 0.8 + (mouth > 0.8 ? 0.8 : mouth) + 'em');
102
103                 $('.left-eye').css('left', 0.9 + (left_eye > 0.8 ? 0.8 : left_eye) + 'em');
104                 $('.right-eye').css('left', 4.3 + (right_eye > 0.7 ? 0.7 : right_eye) + 'em');
105
106                 $('.left-ear').css('left', 1.9 - (left_ear > 0.5 ? 0.5 : left_ear) + 'em');
107                 $('.right-ear').css('left', 7.2 - (right_ear > 0.5 ? 0.5 : right_ear) + 'em');
108                 $('.right-ear').css('bottom', 3.9 + (right_ear > 0.7 ? 0.7 : right_ear) + 'em');
109
110                 if (length >= 2) {
111                     $('.left-eye').addClass('doe');
112                     $('.right-eye').addClass('doe');
113                     $('.mouth').addClass('doe');
114                 } else {
115                     $('.left-eye').removeClass('doe');
116                     $('.right-eye').removeClass('doe');
117                     $('.mouth').removeClass('doe');
118                 }
119             }
120
121
122             //失去焦点
123             $('input[name="username"]').blur(function() {
124                 var length = $(this).val().length;
125
126                 if (length > 2) {
127                     $(".left-eye").addClass('height-eys-doe');
128                     $(".right-eye").addClass('height-eys-doe');
129                 } else {
130                     $(".left-eye").removeClass('height-eys-doe');
131                     $(".right-eye").removeClass('height-eys-doe');
132                 }
133
134                 $(".login-animate").removeClass('username-animate');
135                 $(".login-animate").removeClass('password-animate');
136
137                 $('.head').css('-webkit-transform', "rotate(0deg)"); //回正头部
138
139
140                 $('.face').attr('style', '');
141                 $('.nose').attr('style', '');
142                 $('.left-eye').attr('style', '');
143                 $('.right-eye').attr('style', '');
144                 $('.left-ear').attr('style', '');
145                 $('.right-ear').attr('style', '');
146
147                 //如果账号和密码都不为空,呈嘴巴张开,眼睛发光 && $('input[name="password"]').val().length > 0
148                 if ($('input[name="username"]').val().length > 0) {
149                     // $(".login-animate").addClass('username-animate');
150                     // $(".left-eye").addClass('doe');
151                 }
152
153             });
154
155             $('input[name="password"]').focus(function() {
156                 $(".pwd-eye").show();
157                 $(".login-animate").removeClass('username-animate');
158                 $(".login-animate").addClass('password-animate');
159             });
160
161             $('input[name="password"]').blur(function() {
162                 if ($(this).val() == '') {
163                     $(".pwd-eye").hide();
164                     $(".login-animate").removeClass('username-animate');
165                     $(".login-animate").removeClass('password-animate');
166                 }
167             });
168         },
169         methods: {
170             myLogin() {
171                 this.$message.info("口令错误啦..")
172             }
173         }
174     }
175 </script>
176
177 <style scoped="">
178     @import url("../../assets/main.css");
179
180     button:active {
181         transform: scale(1.23);
182     }
183
184     button:focus {
185         outline: none;
186     }
187
188     button.ghost {
189         background: transparent;
190         border-color: #fff;
191     }
192
193     button {
194         border-radius: 20px;
195         border: 1px solid #fff;
196         /*background: #3dceba;*/
197         background: #00b69d;
198         color: #fff;
199         font-size: 12px;
200         font-weight: bold;
201         padding: 12px 45px;
202         letter-spacing: 1px;
203         text-transform: uppercase;
204         transition: transform 80ms ease-in;
205         cursor: pointer;
206         /*margin-left: calc(25%);
207             position: relative;*/
208     }
209
210     .login {
211         -webkit-animation: free_download 1s linear alternate infinite;
212         animation: free_download 1s linear alternate infinite;
213         padding: 0px 15px 0px;
214     }
215
216     @-webkit-keyframes free_download {
217         0% {
218             -webkit-transform: scale(0.9);
219         }
220
221         100% {
222             -webkit-transform: scale(1);
223         }
224     }
225
226     @keyframes free_download {
227         0% {
228             transform: scale(0.9);
229         }
230
231         100% {
232             transform: scale(1);
233         }
234     }
235 </style>