dtScreen/src/views/Login.vue

<template>
  <div class="login-root">

    <!-- 视频背景 -->
    <video class="bg-video" autoplay muted loop playsinline @error="videoBgFailed = true">
      <source src="@/assets/login/login-bg.mp4" type="video/mp4" />
    </video>
    <div v-if="videoBgFailed" class="bg-fallback"></div>

    <!-- 顶部居中 KYLAND Logo -->
    <header class="top-bar">
      <img class="kyland-logo" src="@/assets/images/logo.png" alt="KYLAND" />
    </header>

    <!-- 主内容区：左右两栏 -->
    <div class="main-content">

      <!-- 左侧 -->
      <div class="left-panel">
        <div class="login-box">
          <!-- 标题 -->
          <div class="title-wrap">
            <img class="title-img" src="@/assets/login/title.png" alt="交通信号控制平台—灵·智" />
          </div>

          <!-- 表单 -->
          <div class="login-form">
            <div class="field">
              <img class="field-icon" src="@/assets/i_user.png" alt="" />
              <span class="field-label">用户名</span>
              <input class="inp" v-model.trim="username" placeholder="" />
            </div>

            <div class="field">
              <img class="field-icon" src="@/assets/i_lock.png" alt="" />
              <span class="field-label">密码</span>
              <input class="inp" type="password" v-model.trim="password" placeholder="" />
            </div>

            <div class="field-row" v-if="showCaptcha">
              <div class="field cap-field">
                <img class="field-icon" src="@/assets/i_captcha.png" alt="" />
                <span class="field-label">验证码</span>
                <input class="inp" v-model.trim="captchaInput" placeholder="" />
              </div>
              <CaptchaCanvas class="captcha-canvas" v-model="captchaCode" />
            </div>

            <div class="hint" v-if="hint">{{ hint }}</div>

            <button class="btn-login" @click="onLogin" :disabled="loading">
              {{ loading ? '登录中...' : '登录' }}
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧留空（球体动画由视频背景实现） -->
      <div class="right-panel"></div>

    </div>

    <!-- 版权 -->
    <footer class="copyright">北京东土正创科技有限公司</footer>

  </div>
</template>

<script>
import CaptchaCanvas from "@/components/CaptchaCanvas.vue";
import { apiLogin } from "@/api";

export default {
  name: "LoginPage",
  components: { CaptchaCanvas },
  created() {
    import('@/utils/cesiumPreloader').then(m => m.default.start());
  },
  data() {
    return {
      videoBgFailed: false,
      username: "admin",
      password: "123456",
      captchaCode: "",
      captchaInput: "",
      hint: "",
      loading: false,
      loginFailedCount: Number(sessionStorage.getItem("loginFailedCount")) || 0,
    };
  },
  computed: {
    showCaptcha() { return this.loginFailedCount >= 3; },
  },
  methods: {
    async onLogin() {
      this.hint = "";
      if (this.showCaptcha) {
        if (!this.captchaInput) { this.hint = "请输入验证码"; return; }
        if (this.captchaInput.toLowerCase() !== this.captchaCode.toLowerCase()) {
          this.hint = "验证码错误"; this.captchaInput = ""; return;
        }
      }
      this.loading = true;
      try {
        const data = await apiLogin({ username: this.username, password: this.password, captcha: this.captchaInput });
        this.loginFailedCount = 0;
        sessionStorage.removeItem("loginFailedCount");
        localStorage.setItem("token", data.token);
        setTimeout(() => {
          this.$router.push('/transition').catch(() => {});
        }, 300);
      } catch (e) {
        this.hint = e.message || "登录失败";
        this.loginFailedCount++;
        sessionStorage.setItem("loginFailedCount", this.loginFailedCount);
        this.captchaInput = "";
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.login-root {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #050a17;
  display: flex;
  flex-direction: column;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 0;
}
.bg-fallback {
  position: absolute;
  inset: 0;
  background: url('@/assets/images/login-background.png') no-repeat center / cover;
  z-index: 0;
}

.top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  flex-shrink: 0;
}
.kyland-logo {
  height: clamp(30px, 5vh, 56px);
  width: auto;
}

.main-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 45fr 55fr;
  align-items: center;
  padding: 0 8vw;
  min-height: 0;
}

.left-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-box {
  width: 566px;
  height: 353px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.title-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  flex-shrink: 0;
}
.title-img {
  width: auto;
  max-width: 100%;
}

.login-form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.field {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  margin-bottom: 36px;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.field:focus-within {
  border-color: rgba(80, 180, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.field-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.7;
  flex-shrink: 0;
  margin-right: 10px;
}

.field-label {
  color: rgba(180, 215, 255, 0.75);
  font-size: 16px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 12px;
}

.inp {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
}
.inp::placeholder { color: rgba(140, 180, 255, 0.3); }

.field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
}
.cap-field { flex: 1; margin-bottom: 0; }
.captcha-canvas {
  width: 120px;
  height: 60px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(80, 160, 255, 0.35);
  flex-shrink: 0;
}

.hint {
  color: #ff4d4f;
  font-size: 13px;
  margin-bottom: 8px;
  margin-top: -24px;
}

.btn-login {
  width: 100%;
  height: 64px;
  background: linear-gradient(180deg, #3dd4f8 0%, #0fa8e8 50%, #0a90d8 100%);
  border: none;
  border-radius: 24px;
  color: #fff;
  font-size: 22px;
  letter-spacing: 0.4em;
  cursor: pointer;
  transition: filter 0.2s;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(10, 160, 230, 0.5);
}
.btn-login:hover  { filter: brightness(1.1); }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }

.right-panel {
  height: 100%;
}

.copyright {
  position: relative;
  z-index: 2;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(12px, 1vw, 18px);
  padding-bottom: clamp(10px, 1.8vh, 22px);
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(0, 150, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}
</style>