DWY_mobile/src/views/Login.vue

<template>
  <div class="view">
    <!-- <div class="logo">
      <img src="../assets/FG-01C.png" alt="" />
    </div> -->
    <div class="header">
      <p>
        你好！
        <br />
        欢迎使用扫码系统
      </p>
    </div>
    <b-form @submit.prevent="onSubmit" class="form">
      <b-form-group
        label="账号"
        label-for="input-1"
        style="margin-bottom: 1rem"
        label-cols="2"
      >
        <b-form-input
          id="input-1"
          v-model="form.account"
          required
          class="inp"
          style="
            height: 3rem;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.1rem;
            background: #f2f2f2;
            border-radius: 1.2rem;
            border: none;
            box-shadow: 0.2rem 0.18rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3);
          "
          placeholder="请输入账号"
        ></b-form-input>
      </b-form-group>

      <b-form-group
        label="密码"
        label-for="input-2"
        style="margin-bottom: 1rem"
        label-cols="2"
      >
        <b-form-input
          id="input-2"
          v-model="form.password"
          type="password"
          autocomplete="off"
          class="inp"
          style="
            height: 3rem;
            font-size: 1.1rem;
            font-weight: 500;
            background: #f2f2f2;
            border-radius: 1.2rem;
            letter-spacing: 0.1rem;
            border: none;
            box-shadow: 0.2rem 0.18rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3);
          "
          required
          placeholder="请输入密码"
        ></b-form-input>
      </b-form-group>
      <b-button
        type="submit"
        variant="primary"
        style="
          width: 100%;
          height: 3rem;
          font-size: 1.2rem;
          border-radius: 1.2rem;
          margin-top: 2rem;
        "
        >登录</b-button
      >
    </b-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        account: '',
        password: ''
      }
    }
  },

  methods: {
    onSubmit () {
      const data = {
        post: {
          name: this.form.account, password: this.form.password, rememberMe: true
        },
        url: 'http://121.36.142.167:7774/jbl/api/mes/login',
        header: ['Content-Type:application/json']
      }
      this.axios.post('/api/testdwy', data).then(res => {
        if (res.code === 200) {
          this.$Message.success(res.msg)
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('userDto', JSON.stringify(res.data.userDto))
          this.$router.push('/cms/home')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view {
  height: 100vh;
  width: 100vw;
  background: #4d8ef7;
  padding: 0;
  overflow-x: hidden;
}
.form {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  position: absolute;
  top: 8.8rem;
  padding: 1.7rem 1.5rem;
  border-radius: 1.5rem 1.5rem 0 0;
  font-size: 18px !important;
  font-weight: bold;
  background: #fff;
  transform: translateX(1px) scaleX(1.01);
}
.logo {
  width: 6rem;
  height: 6rem;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -70%);
  img {
    width: 100%;
    height: 100%;
  }
}
.header {
  color: #fff;
  font-weight: bold;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 1.5rem;
  position: relative;
  width: 100%;
  height: 20%;
  top: 3rem;
  left: 2rem;
}
.inp:focus {
  background: #fff !important;
}
</style>