energy_storage/web/src/views/LoginView.vue

<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#143d7d'
      }
    }"
  >
    <div class="login">
      <div class="main-title">能源站监控与运行管理系统</div>
      <div class="login-content">
        <div class="title" style="">账号登录</div>
        <a-form ref="ruleForm" :model="form" :rules="rules" >
          <a-form-item label="" name="account">
            <a-input v-model:value="form.account" placeholder="请输入账号" autocomplete>
              <template #prefix>
                <user-outlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="" name="passwd">
            <a-input-password
              v-model:value="form.passwd"
              placeholder="请输入密码"
              autocomplete
              @pressEnter="login"
            >
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input-password>
          </a-form-item>
        </a-form>

        <a-button class="login-btn" @click="login" :loading="loading">登录 </a-button>
      </div>
    </div>
  </a-config-provider>
</template>
<script>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { postReq,getReq } from '@/request/api.js'
export default {
  name: 'LoginView',
  components: {
    UserOutlined,
    LockOutlined
  },
  data() {
    return {
      form: {
        account: 'admin',
        passwd: '123456'
      },
      rules: {
        account: [
          {
            required: true,
            message: '请输入账号'
          }
        ],
        passwd: [
          {
            required: true,
            message: '请输入密码'
          }
        ]
      },
      loading: false
    }
  },
  methods: {
    async login() {
      try {
        const values = await this.$refs.ruleForm.validateFields()
        const res = await getReq('/login',this.form )
        this.loading = false

        console.log(res);
        
        if (res.errcode === 0) {
          this.$message.success('登录成功')
          localStorage.setItem('token', res.token)
          localStorage.setItem('permission',JSON.stringify( res.permission) )
          localStorage.setItem('account',JSON.stringify( res.account) )

          this.$router.push('/')

        } 
        // else {
        //   this.$message.error(res.message || '登录失败')
        // }
      } catch (error) {
        console.log(error);
        
        this.loading = false
        this.$message.error('请求失败，请稍后重试')
        
        
      }
      
      
    
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 1440px;
  min-height: 900px;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/loginBg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  .main-title {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 53px;
  }

  .login-content {
    width: 540px;
    height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    margin-top: 120px;
    background-image: url('@/assets/images/loginFrom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    .ant-form {
      margin-top: 30px;
      width: 330px;
    }

    .title {
      // margin-bottom: 10px;
      margin-top: 60px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
    }
    :deep(.ant-input-prefix) {
      color: #fff;
    }
    :deep(.ant-form-item) {
      margin-bottom: 20px !important;
    }
    :deep(.ant-form-item-explain-error) {
      font-size: 12px;
    }
    .iconfont {
      margin: 0 10px 0 5px;
    }
  }
  .yanzhengma {
    width: 60px;
    font-family: yanzhengma;
    font-size: 23px;
    cursor: pointer;
  }
  .rememberPass {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 290px;
    .ant-checkbox-wrapper,
    span {
      color: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
    .ant-checkbox-wrapper:hover {
      color: #143d7d;
    }
    span:hover {
      color: #143d7d;
    }
  }
  .login-btn {
    width: 335px;
    height: 40px;
    border-radius: 4px;
    background: #2a82e4;
    border: none !important;
    font-size: 16px;
    margin-top: 20px;
    color: #fff;
  }
  .copyright {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
  }
}
.ant-input-affix-wrapper {
  background: none !important;
  height: 40px;
  :deep(.ant-input) {
    background: none !important;
    color: #fff;
      &::placeholder {
    color: var(--theme-text6) !important;
  }
  }
  :deep(.anticon){
    color: #fff ;
  }
}
</style>