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

<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <h1>实验室安全智能监测与管控中心</h1>
        <p>中国安全生产科学研究院</p>
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            placeholder="请输入用户名/手机号"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-form-item prop="captcha">
          <div class="captcha-row">
            <el-input
              v-model="loginForm.captcha"
              placeholder="请输入验证码"
              prefix-icon="el-icon-key"
            />
            <div class="captcha-img" @click="refreshCaptcha">
              <img v-if="captchaImage" :src="captchaImage" />
              <span v-else>{{ captchaLoading ? '加载中…' : '点击刷新' }}</span>
            </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>
</template>

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

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        account: '',
        password: '',
        captcha: ''
      },
      loginRules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      loading: false,
      needCaptcha: true,
      captchaLoading: false,
      captchaImage: '',
      captchaUuid: ''
    }
  },
  created() {
    this.loadCaptcha()
  },
  methods: {
    async loadCaptcha() {
      this.captchaLoading = true
      this.captchaImage = ''
      try {
        const res = await getCaptcha()
        if (res.code === 200) {
          this.needCaptcha = res.data.captcha
          if (res.data.captcha) {
            this.captchaImage = 'data:image/jpeg;base64,' + res.data.image
            this.captchaUuid  = res.data.uuid
          }
        }
      } catch (e) {
        // 失败保持"点击刷新"状态
      } finally {
        this.captchaLoading = false
      }
    },
    refreshCaptcha() {
      this.loadCaptcha()
    },
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return

        this.loading = true
        try {
          const res = await loginApi({
            account:  this.loginForm.account,
            password: md5(this.loginForm.password),
            code:     this.needCaptcha ? this.loginForm.captcha : undefined,
            uuid:     this.needCaptcha ? this.captchaUuid        : undefined
          })

          if (res.code === 200) {
            this.$store.dispatch('login', res.data.token)
            this.$message.success('登录成功')
            this.$router.push('/screen')
          } else {
            this.$message.error(res.message || '登录失败')
            if (this.needCaptcha) this.loadCaptcha()
          }
        } catch (err) {
          if (this.needCaptcha) this.loadCaptcha()
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a1a3a 0%, #0d2b5e 50%, #0a1a3a 100%);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(ellipse at 20% 50%, rgba(0, 100, 200, 0.15) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 50%, rgba(0, 150, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }
}

.login-card {
  width: 480px;
  padding: 48px 40px;
  background: rgba(8, 30, 65, 0.9);
  border: 1px solid rgba(46, 120, 210, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  z-index: 1;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;

  h1 {
    font-size: 24px;
    color: $cyan;
    margin-bottom: 8px;
    letter-spacing: 2px;
  }

  p {
    font-size: 14px;
    color: $text-dim;
  }
}

.login-form {
  ::v-deep .el-input__inner {
    background: rgba(6, 40, 90, 0.6);
    border: 1px solid rgba(46, 120, 210, 0.3);
    color: #fff;
    height: 44px;

    &::placeholder {
      color: rgba(140, 180, 230, 0.5);
    }

    &:focus {
      border-color: $cyan;
    }
  }

  ::v-deep .el-input__prefix {
    color: $cyan;
  }
}

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

  .el-input {
    flex: 1;
  }

  .captcha-img {
    width: 120px;
    height: 44px;
    flex-shrink: 0;
    background: rgba(6, 40, 90, 0.8);
    border: 1px solid rgba(46, 120, 210, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    color: $cyan;
    font-size: 13px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
  }
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  background: linear-gradient(90deg, #1890ff, #00e5ff);
  border: none;
  letter-spacing: 8px;

  &:hover {
    opacity: 0.9;
  }
}
</style>