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 Api from "../utils/api";
export default {
  data() {
    return {
      loading: false,
      tel: "",
      password: "",
    };
  },
  mounted() {
    window.localStorage.setItem("token", "");
    window.localStorage.setItem("role", "");
  },
  methods: {
    onSubmit() {
       window.location.href = "/?username=" + this.tel + "&&pwd=" + this.password;
    },
  },
};
</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>