Login.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <div class="my-login">
  3. <div class="bg"></div>
  4. <div class="drag">
  5. <img class="login-img" src="/static/img/loginbg.jpg" alt="">
  6. <div class="my-form">
  7. <p class="login-title">欢迎登录</p>
  8. <div class="login-info">
  9. <input class="username" type="text" v-model="username" autocomplete="new-username" placeholder="请输入用户名">
  10. <i class="iconfont icon-zhanghao mark"></i>
  11. <i class="iconfont icon-close close"></i>
  12. </div>
  13. <div class="login-info">
  14. <input class="password" type="password" v-model="password" autocomplete="new-password" placeholder="请输入密码">
  15. <i class="iconfont icon-mima mark"></i>
  16. <i class="iconfont icon-close close"></i>
  17. </div>
  18. <p class="forget-password">忘记密码 <span class="msg">{{msg}}</span></p>
  19. <button class="login-btn" @click="handleLogin">登陆</button>
  20. <div class="login-bottom">@2018 Persagy.All right reserved.版权所有</div>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. export default {
  27. components: {
  28. },
  29. mixins: [],
  30. props: {
  31. },
  32. data () {
  33. return {
  34. username: "",
  35. password: "",
  36. msg: ""
  37. }
  38. },
  39. computed: {
  40. },
  41. mounted () {
  42. },
  43. methods: {
  44. handleLogin () {
  45. if (this.username == '') {
  46. this.msg = '用户名或密码错误'
  47. }
  48. if (this.password == '') {
  49. this.msg = '用户名或密码错误'
  50. }
  51. if (this.username != '' && this.password != '') {
  52. this.$router.push({path: "/home"})
  53. }
  54. }
  55. }
  56. }
  57. </script>
  58. <style scoped lang="less" >
  59. .my-login{
  60. width: 100%;
  61. height:100%;
  62. position:fixed;
  63. .bg{
  64. width:100%;
  65. height:100%;
  66. background: url("/static/img/bg.jpg") no-repeat;
  67. padding:1px;
  68. box-sizing:border-box;
  69. z-index:1;
  70. background-size:cover;
  71. filter: blur(15px)
  72. }
  73. .drag{
  74. margin:220px auto;
  75. width:1120px;
  76. height:640px;
  77. background: #fff;
  78. display: flex;
  79. position: absolute;
  80. top: 50%;
  81. left: 50%;
  82. margin-left: -560px;
  83. margin-top:-320px;
  84. .login-img{
  85. width: 688px;
  86. height: 100%;
  87. }
  88. .my-form{
  89. display: inline-block;
  90. width: 432px;
  91. text-align: center;
  92. .login-title{
  93. font-weight: bold;
  94. font-size: 32px;
  95. color: #3B4254;
  96. letter-spacing: 1.71px;
  97. padding:132px 0 98px 0;
  98. }
  99. .login-info{
  100. width: 320px;
  101. height: 22px;
  102. margin:0 0 24px 58px;
  103. position: relative;
  104. >input{
  105. width: 100%;
  106. border: none;
  107. //font-size: 16px;
  108. outline: none;
  109. border-bottom:1px solid #DBDDE4;
  110. padding:5px 20px;
  111. &:-webkit-autofill {
  112. -webkit-box-shadow: inset 0 0 0px 9999px white;
  113. }
  114. &:focus{
  115. border-bottom-color: #4A9EF9;
  116. }
  117. &:focus ~ i.mark{
  118. color: #4A9EF9;
  119. }
  120. &:focus ~ i.close{
  121. opacity: 1;
  122. }
  123. }
  124. .mark {
  125. position: absolute;
  126. top: 3px;
  127. left: 0;
  128. }
  129. .close {
  130. position: absolute;
  131. top:0;
  132. right: 0;
  133. opacity: 0;
  134. cursor: pointer;
  135. &:hover {
  136. color: #000;
  137. }
  138. }
  139. .my-img{
  140. width: 20px;
  141. height: 20px;
  142. margin-right: 22px;
  143. }
  144. .my-close{
  145. width:20px;
  146. height: 20px;
  147. margin-left: 50px;
  148. }
  149. }
  150. .forget-password{
  151. float: left;
  152. //margin:0 0 0 52px;
  153. padding-left: 52px;
  154. //font-size: 14px;
  155. color: #4A9EF9;
  156. letter-spacing: 0;
  157. display: flex;
  158. .msg{
  159. padding-left: 100px;
  160. color: #FF7B7B;
  161. letter-spacing: 0;
  162. }
  163. }
  164. .login-btn{
  165. width: 320px;
  166. line-height: 44px;
  167. text-align: center;
  168. background: #4A9EF9;
  169. box-shadow: 0 2px 4px 0 rgba(39,110,227,0.20);
  170. border-radius: 3px;
  171. font-size: 18px;
  172. color: #FFFFFF;
  173. letter-spacing: 0.75px;
  174. font-weight: bold;
  175. margin-top:16px;
  176. }
  177. .login-bottom{
  178. margin-top:142px;
  179. opacity: 0.8;
  180. font-family: 'ArialMT';
  181. color: #B5B9C3;
  182. letter-spacing: 0.2px;
  183. }
  184. }
  185. }
  186. }
  187. </style>