pickling-mes/frontend/src/views/Login.vue

<template>
  <div class="login-page">
    <div class="login-wrap">
      <div class="login-header">
        <div class="login-logo">SMS <span>L2</span></div>
        <div class="login-title">推拉酸洗线 L2 过程控制系统</div>
        <div class="login-sub">PUSH-PULL PICKLING LINE MES</div>
      </div>

      <div class="login-form">
        <div class="form-item">
          <div class="form-label">用户名</div>
          <input
            v-model="form.username"
            class="kv-input"
            placeholder="请输入用户名"
            @keyup.enter="handleLogin"
          />
        </div>
        <div class="form-item">
          <div class="form-label">密码</div>
          <input
            v-model="form.password"
            type="password"
            class="kv-input"
            placeholder="请输入密码"
            @keyup.enter="handleLogin"
          />
        </div>
        <button
          :class="['btn btn-primary', { loading }]"
          style="width:100%;margin-top:20px;padding:9px;"
          @click="handleLogin"
        >
          {{ loading ? '登录中...' : '登 录' }}
        </button>
        <div v-if="error" class="login-error">{{ error }}</div>
      </div>

      <div class="login-footer">
        <span class="dot g"></span>系统就绪 &nbsp;|&nbsp; v1.0.0
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      error: '',
      form: { username: '', password: '' }
    }
  },
  methods: {
    async handleLogin() {
      if (!this.form.username || !this.form.password) {
        this.error = '请输入用户名和密码'
        return
      }
      this.loading = true
      this.error = ''
      try {
        await this.$store.dispatch('auth/login', this.form)
        this.$router.push('/')
      } catch {
        this.error = '用户名或密码错误'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables';

.login-page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $bg-primary;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0,120,212,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(0,200,255,.05) 0%, transparent 60%);
}

.login-wrap {
  width: 380px;
  background: $bg-card;
  border: 1px solid $border;
  border-radius: 8px;
  overflow: hidden;
}

.login-header {
  padding: 32px 32px 24px;
  background: $bg-panel;
  border-bottom: 1px solid $border;
  text-align: center;
}

.login-logo {
  font-size: 20px;
  font-weight: 700;
  color: $sms-highlight;
  letter-spacing: 2px;
  margin-bottom: 8px;
  span { color: $accent-yellow; }
}

.login-title {
  font-size: 14px;
  color: $text-primary;
  font-weight: 600;
  margin-bottom: 4px;
}

.login-sub {
  font-size: 11px;
  color: $text-muted;
  letter-spacing: .5px;
}

.login-form {
  padding: 24px 32px;
}

.form-item {
  margin-bottom: 14px;
  .form-label { color: $text-secondary; font-size: 12px; margin-bottom: 6px; }
  .kv-input { padding: 8px 10px; }
}

.login-error {
  margin-top: 10px;
  font-size: 12px;
  color: $accent-red;
  text-align: center;
}

.login-footer {
  padding: 10px 32px;
  background: $bg-panel;
  border-top: 1px solid $border;
  font-size: 11px;
  color: $text-muted;
  display: flex;
  align-items: center;
  gap: 6px;

  .dot { width: 6px; height: 6px; border-radius: 50%; &.g { background: $accent-green; } }
}
</style>