asd-mobild/src/views/weibao/views/login/index.vue

<template>
  <div>
    <div class="img_top">
      <img class="img" src="../../assets/login/bg.jpeg" />
    </div>

    <p class="title">邹平未保客户端</p>
    <van-form>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名:"
        placeholder="用户名"
        :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码:"
        label="密码:"
        placeholder="密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      <div class="submit_bg" style="margin: 60px 26px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="onSubmit"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="img_bottom">
      <img class="img" src="../../assets/login/bottomBg1.png" />
    </div>
  </div>
</template>
<script>
import { loginApp } from '../../../../api/index.js'
export default {
  components: {},
  name: "Login",
  data() {
    return {
      imgUrl: "../../assets/login/bg.jpeg",
      username: "",
      password: "",
    };
  },
  created() {},
  methods: {
    async onSubmit() {
        if(this.username == "" || this.password == "") {
            this.$toast("请输入账号或密码");
            return;
        }
        const res = await loginApp({
            loginName: this.username,//'15620220622'
            // loginName: '16601217325',
            password: this.password,//'123456'
        })
        if(res.data.jwtToken) {
            // this.$toast.success("登录成功");
            sessionStorage.setItem('userInfo', JSON.stringify(res.data))
            sessionStorage.setItem('x-token', res.data.jwtToken)
            this.$router.replace('/home')
        } else {
            this.$toast.fail("账号或密码错误");
        }
    }
  },
};
</script>
<style lang="scss" scoped>
.img_top {
  .img {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.title {
  margin: 300px 0 100px;
  height: 50px;
  line-height: 50px;
  font-style: normal;
  font-weight: 500;
  font-size: 48px;
  color: #1a1a1a;
  text-align: center;
}
/deep/.van-cell {
    margin-top: 100px;
    background-color:transparent;
    width: 94%;
    margin: 0 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    .van-field__label {
        color: #2a2a2a;
        font-size: 30px;
       width: 120px;
       text-align: center;
       line-height: 80px;
       
    }
    .van-field__control {
        height: 80px;
        padding-left: 8px;
        box-sizing: border-box;
        color: #3d3d3d;
        font-size: 28px;
    }
    .van-field__control::placeholder {
        color: #3d3d3d;
    }
    .van-field__error-message {
        color: #1a1a1a;
    }
}
 
.img_bottom {
  .img {
    position: fixed;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>