apt-nl/src/pages/modules/login/login.vue

<template>
  <div class="login-container">
    <div class="login-wraper">
      <div class="login-logo-wraper">
        <div class="login-logo"></div>
        <div class="login-logo-txts">
          <p class="login-logo-txt1">诺力智能搬运车系统</p>
          <p class="login-logo-txt2">NoBleLift intelligent truck system</p>
        </div>
      </div>
      <div class="login-content">
        <div v-show="tab === 0" class="login-content_wraper">
          <div class="dl">登录</div>
          <div class="login-items-wraper">
            <div class="login-item">
              <div class="login-label" @click="toFocus(1)">用户名</div>
              <input type="text" class="login-input" ref="input1" v-model="username">
            </div>
            <div class="login-item">
              <div class="login-label" @click="toFocus(2)">密码</div>
              <input type="password" class="login-input" ref="input2" v-model="password">
            </div>
          </div>
          <div class="login-setup-wraper">
            <div class="setup-info pointer" @click="toSetup">配置信息</div>
            <router-link to="/home">忘记密码</router-link>
          </div>
          <div class="login-buttons-wraper">
            <button class="button button--primary button-login" :disabled="disabled" @click="saveLogin">登录</button>
          </div>
        </div>
        <div v-show="tab === 1" class="login-content_wraper">
          <div class="dl">配置</div>
          <div class="login-items-wraper">
            <div class="login-item">
              <div class="login-label" @click="toFocus(3)">域名地址</div>
              <input type="text" class="login-input" ref="input3" v-model="baseUrl">
            </div>
            <div class="login-item">
              <div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
              <input type="number" class="login-input" ref="input4" v-model="setTime">
            </div>
          </div>
          <div class="login-setup-wraper login-setup-wraper__r">
            <div class="setup-info pointer" @click="toLogin">立即登录</div>
          </div>
          <div class="login-buttons-wraper">
            <button class="button button--primary button-login" @click="saveSetup">配置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {authlogin} from '@config/getData2.js'
import {encrypt} from '../../../main.js'
export default {
  data () {
    return {
      tab: 0,
      username: '',
      password: '',
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      disabled: false
    }
  },
  mounted () {
    // 点对点项目分辨率 1024 * 768
    // alert(document.body.clientWidth, 'a')
    // alert(document.body.clientHeight, 'b')
    // alert(window.screen.width, 'c')
    // alert(window.screen.height, 'd')
  },
  methods: {
    toFocus (i) {
      switch (i) {
        case 1:
          this.$refs.input1.focus()
          break
        case 2:
          this.$refs.input2.focus()
          break
        case 3:
          this.$refs.input3.focus()
          break
        case 4:
          this.$refs.input4.focus()
          break
      }
    },
    toSetup () {
      this.tab = 1
    },
    toLogin () {
      this.tab = 0
    },
    saveSetup () {
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000
      }
      this.$store.dispatch('setConfig', obj)
      this.toLogin()
    },
    saveLogin () {
      this.disabled = true
      if (!this.username) {
        this.toast('请输入用户名')
        this.disabled = false
        return
      }
      if (!this.password) {
        this.toast('请输入密码')
        this.disabled = false
        return
      }
      this._authlogin()
    },
    async _authlogin () {
      try {
        let res = await authlogin(this.username, encrypt(this.password))
        let obj = {}
        obj = Object.assign({}, res)
        this.$store.dispatch('userInfo', JSON.stringify(obj))
        this.$router.push('/index/home')
      } catch (err) {
        this.disabled = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.login-container
  _wh(100%, 100%)
  background-color #64b4dc
  background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
  _fj(center)
.login-wraper
  _fj()
  _wh(70vw, 65vh)
  padding 20px
  background-color #fff
  border-radius 20px
.login-logo-wraper
  width 50%
  padding 20px
  _fj(center,,column)
.login-logo
  width 100px
  height 112px
  background center / 100% 100% url(../../../images/aio/car1.png) no-repeat
.login-logo-txts
  // margin-top 20px
  text-align center
.login-logo-txt1
  _font(24px, 34px, $red2,bold,center)
.login-logo-txt2
  _font(20px, 34px, #464646,,center)
.login-content
  width 50%
  padding 20px
.login-content_wraper
  width 100%
  max-width 260px
  margin 0 auto
  _fj(center,,column)
.dl
  width 100%
  _font(16px, 28px, #333, bold, center)
  margin-bottom 30px
.login-items-wraper
  width 100%
.login-item
  _fj()
  _wh(100%, 42px)
  background-color #fff
  padding 5px 12px
  border 1px solid $gray2
  border-radius 20px
  +.login-item
    margin-top 20px
.login-label
  width 102px
  line-height 30px
  _font(14px, 30px, $gray1,,)
.login-input
  width calc(100% - 102px)
  line-height 30px
  _font(14px, 30px, $gray1,,)
.login-setup-wraper
  width 100%
  margin-top 10px
  _fj()
  a
    _font(14px, 20px, $red1,,)
.login-setup-wraper__r
  justify-content flex-end
  .setup-info
    color $red1
.setup-info
  _font(14px, 20px, $fc1,,)
.login-buttons-wraper
  width 100%
  margin-top 10px
.button-login
  width 100%
  border-radius 20px
  letter-spacing 5px
</style>