anKeYuan-largeScreen-1080/src/views/Login.vue

<template>
  <div class="login-page">
    <div class="login-bg">
      <div class="login-particles"></div>
    </div>
    <div class="login-container">
      <div class="login-header">
        <h1>实验室安全智慧化管控中心</h1>
        <p>中国安全生产科学研究院</p>
      </div>
      <div class="login-form-wrapper">
        <h2>用户登录</h2>
        <el-form ref="loginForm" :model="form" :rules="rules" class="login-form">
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名/手机号"
              clearable
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              show-password
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item prop="captcha">
            <div class="captcha-row">
              <el-input
                v-model="form.captcha"
                prefix-icon="el-icon-key"
                placeholder="请输入验证码"
                clearable
              />
              <div class="captcha-img" @click="refreshCaptcha">{{ captchaText }}</div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              class="login-btn"
              @click="handleLogin"
            >
              登 录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
import { loginApi } from '@/api'

export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: '',
        captcha: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      loading: false,
      captchaText: '0000'
    }
  },
  methods: {
    refreshCaptcha() {
      // 模拟验证码，固定为0000
      this.captchaText = '0000'
    },
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return

        // 验证码校验
        if (this.form.captcha !== '0000') {
          this.$message.error('验证码错误')
          return
        }

        this.loading = true
        try {
          const params = {
            account: this.form.username,
            password: md5(this.form.password)
          }
          const res = await loginApi(params)
          this.$store.dispatch('login', { token: res.data.token, userInfo: {} })
          this.$message.success('登录成功')
          this.$router.push('/lab-status')
        } catch (err) {
          this.$message.error('登录失败，请重试')
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #0a1628 0%, #0d2247 50%, #0a1a3a 100%);
  overflow: hidden;
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%, rgba(30, 144, 255, 0.08) 0%, transparent 60%);
}

.login-container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.login-header {
  margin-bottom: 50px;

  h1 {
    font-size: 36px;
    color: #fff;
    letter-spacing: 6px;
    text-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
  }

  p {
    font-size: 16px;
    color: $text-secondary;
    margin-top: 12px;
    letter-spacing: 4px;
  }
}
.login-form-wrapper {
  width: 420px;
  padding: 40px;
  margin:40px;
  background: rgba(13, 34, 71, 0.85);
  border: 1px solid rgba(30, 144, 255, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(30, 144, 255, 0.1);

  h2 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 30px;
    letter-spacing: 2px;
  }
}

.login-form {
  .el-input__inner {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    height: 44px;

    &::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    &:focus {
      border-color: $accent-blue;
    }
  }

  .el-input__prefix {
    color: $text-secondary;
  }
}

.captcha-row {
  display: flex;
  gap: 12px;

  .el-input {
    flex: 1;
  }

  .captcha-img {
    width: 120px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: rgba(30, 144, 255, 0.15);
    border: 1px solid rgba(30, 144, 255, 0.3);
    border-radius: 4px;
    color: $accent-cyan;
    font-size: 20px;
    letter-spacing: 8px;
    cursor: pointer;
    user-select: none;

    &:hover {
      background: rgba(30, 144, 255, 0.25);
    }
  }
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  letter-spacing: 6px;
  background: linear-gradient(90deg, #1565c0, #1e88e5);
  border: none;

  &:hover {
    background: linear-gradient(90deg, #1e88e5, #42a5f5);
  }
}
</style>