witcarbon-app/src/views/login.vue

<template>
  <!-- 开启顶部安全区适配 -->
  <van-nav-bar
    :border="false"
    safe-area-inset-top
    style="background-color: #5c8fff"
  />
  <div class="page_login">
    <div class="login_bg">
      <div class="bg_title">
        <van-image
          :src="require('@/assets/logo.svg')"
          width="32"
          height="32"
          fit="contain"
        />
        <span>双碳感知资产运营管理平台</span>
      </div>
    </div>
    <div class="login_info">
      <div class="info_content">
        <div class="title">
          <span>登录</span>
        </div>
        <van-form @submit="onSubmit">
          <van-cell-group>
            <van-field
              v-model="tel"
              name="手机号"
              :left-icon="require('@/assets/phone.svg')"
              placeholder="请输入手机号码"
              :clearable="true"
              :rules="[{ required: true, message: '请输入手机号码' }]"
              style="margin-bottom: 20px"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              :left-icon="require('@/assets/password.svg')"
              placeholder="请输入密码"
              :clearable="true"
              :rules="[{ required: true, message: '请输入密码' }]"
            />
          </van-cell-group>
          <div style="margin-top: 50px">
            <van-button
              round
              block
              type="primary"
              color="#2E69EB"
              :loading="loading"
              loading-text="登陆中。。。"
              native-type="submit"
            >
              登录
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "../utils/api";
export default {
  data() {
    return {
      loading: false,
      tel: "",
      password: "",
    };
  },
  mounted() {
    window.localStorage.setItem("token", "");
    window.localStorage.setItem("role", "");
  },
  methods: {
    onSubmit() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$router.push("/home");
      }, 2000);
      // Api.loginByPwd({
      //   username: this.tel,
      //   password: this.password,
      //   captcha: "1",
      //   uuid: "1",
      // }).then((res) => {
      // this.loading = false
      //   if (res.code == 0) {
      //     this.$toast.clear();
      //     window.localStorage.setItem("token", res.data.token);
      // this.getUserInfo();
      //   } else {
      //     this.$notify({ type: "danger", message: res.msg });
      //   }
      // });
    },
    getUserInfo() {
      Api.getUserInfo({
        username: this.tel,
        password: this.password,
      }).then((res) => {
        if (res.code == 0) {
        } else {
          this.$notify({ type: "danger", message: res.msg });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page_login {
  position: relative;
  .login_bg {
    width: 100%;
    height: 245px;
    background: #5c8fff;
    border-radius: 0px 0px 16px 16px;
    padding-top: 16px;
    .bg_title {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        height: 24px;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
      }
    }
  }
  .login_info {
    position: absolute;
    top: 142px;
    width: calc(100% - 32px);
    padding: 0 16px;
    .info_content {
      background: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
      border-radius: 16px;
      padding: 30px 20px 50px 20px;
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        span {
          height: 24px;
          font-size: 20px;
          font-weight: 600;
          color: #0c1935;
          line-height: 24px;
        }
      }
    }
  }
  /deep/ {
    --van-cell-vertical-padding: 8px;
    .van-icon__image {
      margin-top: 4px;
    }
    .van-field {
      background: #f4f7ff;
      border-radius: 18px;
      border: 1px solid #5c8fff;
    }
  }
}
</style>