k8s管理系统项目前端-login

<template>
  <div class="login">
    <!-- 用户登录卡片 -->
    <el-card class="login-card">
<!--      <template #header>-->
        <div class="login-card-header">
          <h3 class="title">欢迎登录</h3>
        </div>
<!--      </template>-->
      <!-- 表单 -->
      <el-form :model="loginForm" :rules="loginDataRules" ref="loginData">
        <el-form-item prop="username">
          <!-- 用户名 -->
          <el-input prefix-icon="UserFilled" size="large" v-model.trim="loginForm.username" maxlength="32" placeholder="请输入账号" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <!-- 密码 -->
          <el-input prefix-icon="Lock"  size="large" v-model.trim="loginForm.password" maxlength="16" show-password placeholder="请输入密码" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <!-- 登录按钮 -->
          <el-button type="primary" style="width: 100%;border-radius: 2px"  @click="handleSubmit">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {  ref } from 'vue';
import { ElMessage } from 'element-plus';
import {LOGIN} from "../../api/user.js";
import router from "@/router/index.js";
// import jwt from "jsonwebtoken"
    const loginForm = ref({
      username: '',
      password: '',
    })

    const loginDataRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
      ]
    };


    const handleSubmit =async ({data,errors}) => {
    console.log(data)
      if (errors != undefined) {
        return
      }
      try {
        const resp = await  LOGIN(loginForm.value)
        if (resp.code !=200) {
          ElMessage.error(resp.message)
          return
        }
        ElMessage.success("登录成功")
        console.log(resp,"--------------------------------")
        console.log(resp.data.token)
        localStorage.setItem('username',resp.data.username)
        // let token = jwt.sign(resp.data.token,'IaM7Tg9vnreEwY0yBnpGt1l2OqjJOFeCQUdpe',{expiresIn: '1h'})
        localStorage.setItem('token',resp.data.token)
        router.push('/')
      }catch (e) {
        console.log("e ===",e)
      }
    };

</script>

<style scoped>

.login {
  position: absolute;
  width: 100%;
  height: 100%;
  background: aquamarine;
  background-image: url(../assets/login.png);
  background-size: 100%;
}
.login-card {
  position: absolute;
  right: 10%; /* 根据您的页面设计调整 */
  top: 50%; /* 使用50%可以使登录卡片垂直居中 */
  transform: translateY(-50%); /* 使用transform来精确居中登录卡片 */
  width: 380px; /* 增加宽度 */
  height: 350px;
  padding: 50px; /* 如果需要更多内边距 */
  padding-top: 20px;
  border-radius: 10px; /* 可选：增加边框半径 */
  background: rgb(255, 255, 255);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 可选：增加阴影以增强立体感 */
}

.title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}
.login-card-header {
  text-align: center;
  margin-bottom: 0px; /* 可以根据需要增加 */
}

.el-form-item {
  margin-bottom: 25px !important; /* 增加表单项之间的间距 */
}

.el-input {
  width: 100% !important; /* 确保输入框宽度填满可用空间 */
}
.el-button {
  height: 40px !important; /* 增加按钮的高度 */
  line-height: 40px!important; /* 调整文本行高以垂直居中 */
  font-size: 16px !important; /* 可增加字号以适应按钮大小 */
}
</style>