123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- <template>
- <div class="my-login">
- <div class="bg"></div>
- <div class="drag">
- <img class="login-img" src="/static/img/loginbg.jpg" alt="">
- <div class="my-form">
- <p class="login-title">欢迎登录</p>
- <div class="login-info">
- <input class="username" type="text" v-model="username" autocomplete="new-username" placeholder="请输入用户名">
- <i class="iconfont icon-zhanghao mark"></i>
- <i class="iconfont icon-close close"></i>
- </div>
- <div class="login-info">
- <input class="password" type="password" v-model="password" autocomplete="new-password" placeholder="请输入密码">
- <i class="iconfont icon-mima mark"></i>
- <i class="iconfont icon-close close"></i>
- </div>
- <p class="forget-password">忘记密码 <span class="msg">{{msg}}</span></p>
- <button class="login-btn" @click="handleLogin">登陆</button>
- <div class="login-bottom">@2018 Persagy.All right reserved.版权所有</div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- components: {
- },
- mixins: [],
- props: {
- },
- data () {
- return {
- username: "",
- password: "",
- msg: ""
- }
- },
- computed: {
- },
- mounted () {
- },
- methods: {
- handleLogin () {
- if (this.username == '') {
- this.msg = '用户名或密码错误'
- }
- if (this.password == '') {
- this.msg = '用户名或密码错误'
- }
- if (this.username != '' && this.password != '') {
- this.$router.push({path: "/home"})
- }
- }
- }
- }
- </script>
- <style scoped lang="less" >
- .my-login{
- width: 100%;
- height:100%;
- position:fixed;
- .bg{
- width:100%;
- height:100%;
- background: url("/static/img/bg.jpg") no-repeat;
- padding:1px;
- box-sizing:border-box;
- z-index:1;
- background-size:cover;
- filter: blur(15px)
- }
- .drag{
- margin:220px auto;
- width:1120px;
- height:640px;
- background: #fff;
- display: flex;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -560px;
- margin-top:-320px;
- .login-img{
- width: 688px;
- height: 100%;
- }
- .my-form{
- display: inline-block;
- width: 432px;
- text-align: center;
- .login-title{
- font-weight: bold;
- font-size: 32px;
- color: #3B4254;
- letter-spacing: 1.71px;
- padding:132px 0 98px 0;
- }
- .login-info{
- width: 320px;
- height: 22px;
- margin:0 0 24px 58px;
- position: relative;
- >input{
- width: 100%;
- border: none;
- //font-size: 16px;
- outline: none;
- border-bottom:1px solid #DBDDE4;
- padding:5px 20px;
- &:-webkit-autofill {
- -webkit-box-shadow: inset 0 0 0px 9999px white;
- }
- &:focus{
- border-bottom-color: #4A9EF9;
- }
- &:focus ~ i.mark{
- color: #4A9EF9;
- }
- &:focus ~ i.close{
- opacity: 1;
- }
- }
- .mark {
- position: absolute;
- top: 3px;
- left: 0;
- }
- .close {
- position: absolute;
- top:0;
- right: 0;
- opacity: 0;
- cursor: pointer;
- &:hover {
- color: #000;
- }
- }
- .my-img{
- width: 20px;
- height: 20px;
- margin-right: 22px;
- }
- .my-close{
- width:20px;
- height: 20px;
- margin-left: 50px;
- }
- }
- .forget-password{
- float: left;
- //margin:0 0 0 52px;
- padding-left: 52px;
- //font-size: 14px;
- color: #4A9EF9;
- letter-spacing: 0;
- display: flex;
- .msg{
- padding-left: 100px;
- color: #FF7B7B;
- letter-spacing: 0;
- }
- }
- .login-btn{
- width: 320px;
- line-height: 44px;
- text-align: center;
- background: #4A9EF9;
- box-shadow: 0 2px 4px 0 rgba(39,110,227,0.20);
- border-radius: 3px;
- font-size: 18px;
- color: #FFFFFF;
- letter-spacing: 0.75px;
- font-weight: bold;
- margin-top:16px;
- }
- .login-bottom{
- margin-top:142px;
- opacity: 0.8;
- font-family: 'ArialMT';
- color: #B5B9C3;
- letter-spacing: 0.2px;
- }
- }
- }
- }
- </style>
|