guoziwei_ui/src/pages/LoginPage.vue

<template>
  <div class="contain" >
    <div class="login-card">
      <div class="login-title">
        <h3>系统登录</h3>
        <p>国有资产管理平台</p>
      </div>
      <div class="form-item">
        <input 
          type="text" 
          placeholder="请输入账号" 
          v-model="user"
        >
      </div>
      <div class="form-item">
        <input 
          type="password" 
          placeholder="请输入密码" 
          v-model="password"
          @keyup.enter="handleLogin"
        >
      </div>
      <button class="btn-login" @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script setup>
import { showError, showWarning } from '@/utils/message'
import { ref } from 'vue'
import { initLogin } from '@/api/login';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
import { useFilterStore } from '@/store/filter';

const userStore = useUserStore()
const router = useRouter()
const filterStore = useFilterStore()

const user = ref('')
const password = ref('')

const handleLogin = async () => {
  if (!user.value.trim() || !password.value.trim()) {
    showWarning('请输入账号和密码！')
    return
  }

  const loginParams = {
    userName: user.value,
    password: password.value,
    clientId: 1
  }

  try {
    const {data} = await initLogin(loginParams)
    if(data.code !== 200) {
      showError(data.message)
      return
    }
    userStore.setUserInfo(data)
    filterStore.resetFilter()
    router.push('/home')
  } catch (error) {
    console.error('登录失败:', error);
    showError(error.message)
  }
}
</script>

<style scoped>
.contain{
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/images/login-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card{
  width: 420px;
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(12, 85, 232, 0.12), 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 22px;
  border: 1px solid rgba(255,255,255,0.6);
}

.login-title{
  text-align: center;
  margin-bottom: 8px;
}
.login-title h3{
  font-family: var(--font-semibold);
  font-size: 24px;
  font-weight: 600;
  color: #0f2855;
  margin:0 0 6px;
}
.login-title p{
  font-family: var(--font-regular);
  font-size:14px;
  font-weight: 400;
  color:#66789c;
  margin:0;
}

.form-item input{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid #e1e7f2;
  padding: 0 16px;
  outline: none;
  font-family: var(--font-regular);
  font-size:15px;
  font-weight: 400;
  color:#2c3e50;
  background:#fafcff;
  transition: all 0.28s ease;
}
.form-item input:hover{
  border-color:#9ab9f2;
  background:#fff;
}
.form-item input:focus{
  border-color: #0c55e8;
  box-shadow: 0 0 0 3px rgba(12, 85, 232, 0.12);
  background:#ffffff;
}
.form-item input::placeholder{
  color:#b0bcca;
}

.btn-login{
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg,#0c55e8,#2370ff);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-medium);
  font-size:16px;
  font-weight:500;
  transition: all 0.25s ease;
  margin-top:4px;
}
.btn-login:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(12, 85, 232, 0.3);
  background: linear-gradient(135deg,#0949d2,#1966f5);
}
.btn-login:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(12, 85, 232, 0.25);
}
</style>