update

gaosp

2024-01-19 5b9a1d6cb3a7d59c8f2de83c495bba1a069b2723

 src/views/login/index.vue

@@ -1,316 +1,288 @@
<template>

  <Home class="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-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><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> -->

   <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 class="home-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 class="home-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 class="login-btn" style="text-align: center;">

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

                  登录

               </div>

            </el-form-item>

         </el-form>

         <p class="compName">Copyright © 2023 江苏千文科技有限公司 版权所有</p>

      </template>

   </Home>

</template>



<script>

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

import { Message } from 'element-ui'

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

import { mapGetters } from 'vuex'

export default {

  name: 'login',

  components: {

    Home

  },

  data() {

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

      if (!isvalidUsername(value)) {

        callback(new Error('请输入正确的用户名'))

      } else {

        callback()

      }

    }

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

      if (value.length === 0) {

        callback(new Error('密码不能为空'))

      } else if (value.length < 5) {

        callback(new Error('密码不能小于6位'))

      } else {

        callback()

      }

    }

    return {

      loginForm: {

        username: 'admin',

        password: 'password'

      },

      loginRules: {

        username: [

          { required: true, message: '用户名不能为空', trigger: ['blur', 'change'] },

          { trigger: ['blur', 'change'], validator: validateUsername }

        ],

        password: [

          { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },

          { trigger: ['blur', 'change'], validator: validatePass }

        ]

      },

      loading: false,

      pwdType: 'password'

    }

  },

  methods: {

    showPwd() {

      if (this.pwdType === 'password') {

        this.pwdType = ''

      } else {

        this.pwdType = 'password'

      }

   name: 'login',

   components: {

      Home

   },

   computed: {

        ...mapGetters(['userInfo','userMenu'])

    },

    handleLogin() {

      this.$refs.loginForm.validate(valid => {

        if (valid) {

          this.loading = true

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

            this.loading = false

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

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

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

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

            } else {

              Message({

                message: ret.msg,

                type: 'error',

                duration: 3 * 1000

              })

            }

          }).catch(() => {

            this.loading = false

          })

        } else {

          // console.log('error submit!!')

          return false

        }

      })

    }

  }

   data() {

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

         if (!isvalidUsername(value)) {

            callback(new Error('请输入正确的用户名'))

         } else {

            callback()

         }

      }

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

         if (value.length === 0) {

            callback(new Error('密码不能为空'))

         } else if (value.length < 5) {

            callback(new Error('密码不能小于6位'))

         } else {

            callback()

         }

      }

      return {

         loginForm: {

            username: '',

            password: ''

         },

         loginRules: {

            username: [

               { required: true, message: '用户名不能为空', trigger: ['blur', 'change'] },

               { trigger: ['blur', 'change'], validator: validateUsername }

            ],

            password: [

               { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },

               { trigger: ['blur', 'change'], validator: validatePass }

            ]

         },

         loading: false,

         pwdType: 'password'

      }

   },

   methods: {

      showPwd() {

         if (this.pwdType === 'password') {

            this.pwdType = ''

         } else {

            this.pwdType = 'password'

         }

      },

      handleLogin() {

         this.$refs.loginForm.validate(valid => {

            if (valid) {

               this.loading = true

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

                  this.loading = false

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

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

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

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

                  } else {

                     Message({

                        message: ret.msg,

                        type: 'error',

                        duration: 3 * 1000

                     })

                  }

               }).catch(() => {

                  this.loading = false

               })

            } else {

               // console.log('error submit!!')

               return false

            }

         })

      }

   }

}

</script>



<style rel="stylesheet/scss" lang="scss">

$bg:#2d3a4b;

$light_gray:#eee;

$bg: #2d3a4b;

$light_gray: #eee;



/* reset element-ui css */

// .home {

  .el-input {

    display: inline-block;

    // height: 47px;

    width: calc(100% - 40px);

    input {

      background: transparent;

      border: 0px;

      -webkit-appearance: none;

      border-radius: 0px;

      padding: 12px 5px 12px 15px;

      color: $light_gray;

      // height: 47px;

      &:-webkit-autofill {

        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;

        -webkit-text-fill-color: #fff !important;

      }

    }

  }

// }

.login-form .el-input {

   display: inline-block;

   // height: 47px;

   width: calc(100% - 40px);



   input {

      background: transparent;

      border: 0px;

      -webkit-appearance: none;

      border-radius: 0px;

      // padding: 12px 5px 12px 15px;

      color: $light_gray;



      // height: 47px;

      &:-webkit-autofill {

         -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;

         -webkit-text-fill-color: #fff !important;

      }

   }

}

</style>



<style rel="stylesheet/scss" lang="scss" scoped>

$bg:#2d3a4b;

$dark_gray:#889aa4;

$light_gray:#eee;

$bg: #2d3a4b;

$dark_gray: #889aa4;

$light_gray: #eee;



.login-container {

  /*position: relative;*/

  height: 100%;

  width: 100%;

  background-color: $bg;

  overflow: auto;

  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;

  }

   /*position: relative;*/

   height: 100%;

   width: 100%;

   background-color: $bg;

   overflow: auto;

   display: flex;

   flex-direction: column;



   .header {

      padding-left: 30px;

      height: 94px;

      flex: 0 0 auto;

      background: url('~@/assets/img/login/top.png') 100% 100% no-repeat;



      // background-size: cover;

      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;

    color: $dark_gray;

    vertical-align: middle;

    width: 30px;

    display: inline-block;

    &_login {

      font-size: 20px;

    }

  }

  .title {

    font-size: 26px;

    font-weight: 400;

    color: $light_gray;

    margin: 0px auto 40px auto;

    text-align: center;

    font-weight: bold;

  }

  .show-pwd {

    position: absolute;

    right: 10px;

    top: 7px;

    font-size: 16px;

    color: $dark_gray;

    /*cursor: pointer;*/

    user-select: none;

  }

  .copy-right{

    width: 100%;

    margin-top: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #eee;

    text-align: center;

    font-size: 70%;

  }

</style>

   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;

   color: $dark_gray;

   vertical-align: middle;

   width: 30px;

   display: inline-block;



   &_login {

      font-size: 20px;

   }

}



.title {

   font-size: 26px;

   font-weight: 400;

   color: $light_gray;

   margin: 0px auto 40px auto;

   text-align: center;

   font-weight: bold;

}



.show-pwd {

   position: absolute;

   right: 10px;

   top: 7px;

   font-size: 16px;

   color: $dark_gray;

   /*cursor: pointer;*/

   user-select: none;

}



.copy-right {

   width: 100%;

   margin-top: 40px;

   display: flex;

   justify-content: center;

   align-items: center;

   color: #eee;

   text-align: center;

   font-size: 70%;

}



.login-btn {

   margin-top: 30px;

}</style>