blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
gaosp
2024-01-05 ea911d3b42cac8948eb6f1285c7ad46706707643 
 src/views/login/index.vue


@@ -1,37 +1,94 @@


<template>



  <div class="login-container">



    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">



      <h3 class="title">航星MDC展示系统</h3>



      <el-form-item prop="username">



  <Home>



    <template slot="test"><span style="color: red">123</span></template>



    <template slot="content">



      <el-form  class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">



      <el-form-item prop="username" class="username">



        <span class="svg-container svg-container_login">



          <svg-icon icon-class="user" />



        </span>



        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />



        <el-input  name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名" />



      </el-form-item>



      <el-form-item prop="password">



      <el-form-item prop="password" class="username">



        <span class="svg-container">



          <svg-icon icon-class="password"></svg-icon>



        </span>



        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off"



          placeholder="密码"></el-input>



          placeholder="请输入密码"></el-input>



          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="pwdType==='password'"/><svg-icon icon-class="eyeopen" v-show="pwdType!=='password'"/></span>



      </el-form-item>



      <el-form-item>



        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">



      <el-form-item style="text-align: center;margin-top: 30px">



        <div class="btn" :loading="loading" @click="handleLogin">



          登录



        </el-button>



        </div>



      </el-form-item>



    </el-form>



    <p class="copy-right"><span>航星国际自动控制工程有限公司</span></p>



  </div>



    <p class="compName">千文科技</p><el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">



      <el-form-item prop="username" class="username">



        <span class="svg-container svg-container_login">



          <svg-icon icon-class="user" />



        </span>



        <el-input  name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名" />



      </el-form-item>



      <el-form-item prop="password" class="username">



        <span class="svg-container">



          <svg-icon icon-class="password"></svg-icon>



        </span>



        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off"



          placeholder="请输入密码"></el-input>



          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="pwdType==='password'"/><svg-icon icon-class="eyeopen" v-show="pwdType!=='password'"/></span>



      </el-form-item>



      <el-form-item style="text-align: center;margin-top: 30px">



        <div class="btn" :loading="loading" @click="handleLogin">



          登录



        </div>



      </el-form-item>



    </el-form>



    <p class="compName">千文科技</p>



    </template>



  </Home>



  <!-- <div class="login-container">



    <div class="header">



      <img src="~@/assets/img/login/logo.png" alt="">



    </div>



    <div class="content">



      <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">



      <el-form-item prop="username" class="username">



        <span class="svg-container svg-container_login">



          <svg-icon icon-class="user" />



        </span>



        <el-input  name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名" />



      </el-form-item>



      <el-form-item prop="password" class="username">



        <span class="svg-container">



          <svg-icon icon-class="password"></svg-icon>



        </span>



        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off"



          placeholder="请输入密码"></el-input>



          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="pwdType==='password'"/><svg-icon icon-class="eyeopen" v-show="pwdType!=='password'"/></span>



      </el-form-item>



      <el-form-item style="text-align: center;margin-top: 30px">



        <div class="btn" :loading="loading" @click="handleLogin">



          登录



        </div>



      </el-form-item>



    </el-form>



    <p class="compName">千文科技</p>



    </div>



    <div class="footer">



    </div>



  </div> -->



</template>







<script>



import { isvalidUsername } from '@/utils/validate'



import { Message } from 'element-ui'







import Home from '@/components/home/index'



export default {



  name: 'login',



  components: {



    Home



  },



  data() {



    const validateUsername = (rule, value, callback) => {



      if (!isvalidUsername(value)) {



@@ -51,8 +108,8 @@


    }



    return {



      loginForm: {



        username: '',



        password: ''



        username: 'admin',



        password: 'password'



      },



      loginRules: {



        username: [



@@ -82,9 +139,10 @@


          this.loading = true



          this.$store.dispatch('Login', this.loginForm).then((ret) => {



            this.loading = false



            if (ret.code === 1) {



            console.log('------')



            if (ret.result === 'SUCCESS') {



              // this.$router.push({ path: `/room/${this.$store.getters.workshopList[0].roomId}` })



              this.$router.push({ path: `/dashboard` })



              this.$router.push({ path: `/home/index` })



            } else {



              Message({



                message: ret.msg,



@@ -110,8 +168,7 @@


$light_gray:#eee;







/* reset element-ui css */



.login-container {



  .el-input {



.el-input {



    display: inline-block;



    height: 47px;



    width: calc(100% - 40px);



@@ -129,13 +186,6 @@


      }



    }



  }



  .el-form-item {



    border: 1px solid rgba(255, 255, 255, 0.1);



    background: rgba(0, 0, 0, 0.1);



    border-radius: 5px;



    color: #454545;



  }



}







</style>







@@ -149,10 +199,79 @@


  width: 100%;



  background-color: $bg;



  overflow: auto;



  .login-form {



    max-width: 520px;



    padding: 35px 35px 15px 35px;



    margin: 120px auto 0;



  display: flex;



  flex-direction: column;



  .header {



    padding-left: 30px;



    height: 94px;



    flex: 0 0 auto;



    background-image: url('~@/assets/img/login/top.png');



    background-size: contain;



    img {



      display: inline-block;



      width: 500px;



      max-height: 91px;



    }



  }



  .content {



    flex: 1 1 auto;



    background-image: url('~@/assets/img/login/bg.png');



    background-size: cover;



    background-repeat: no-repeat;



    position: relative;



    .compName {



      font-size: 23px;



      color: #FFFFFF;



      line-height: 33px;



      position: absolute;



      left: 0;



      right: 0;



      text-align: center;



      bottom: 30px;



    }



  }



  .footer {



    height: 46px;



    background-image: url('~@/assets/img/login/footer.png');



    background-size: cover;



    background-repeat: no-repeat;



    flex: 0 0 auto;



  }



}



.login-form {



    position: absolute;



    left: 50%;



    top: 20%;



    transform: translate(-50%,0);



    width: 668px;



    height: 340px;



    background-image: url('~@/assets/img/login/logo_bg.png');



    background-size: contain;



    background-repeat: no-repeat;



    padding: 60px 26px;



    // margin: 120px auto 0;



    // background: #161A19;



    .username {



      background: linear-gradient(90deg, rgba(83,198,255,0) 0%, rgba(83,198,255,0.23) 26%, rgba(83,198,255,0) 100%);



border: 1px solid;



border-image: linear-gradient(90deg, rgba(83, 198, 255, 0), rgba(83, 198, 255, 1), rgba(83, 198, 255, 0)) 1 1;



    }



    .username ~ .username {



      margin-top: 30px;



    }



  }



  .btn {



    display: inline-block;



    width: 293px;



    height: 57px;



    text-align: center;



    line-height: 57px;



    background-image: url('~@/assets/img/login/btn_bg.png');



    background-size: contain;



    background-repeat: no-repeat;



    font-size: 19px;



    color: #379BC7;



    cursor: pointer;



  }



  .svg-container {



    padding: 6px 5px 6px 15px;



@@ -191,5 +310,4 @@


    text-align: center;



    font-size: 70%;



  }



}



</style>