dtScreen/src/components/ui/LoginForm.vue

<template>
    <div class="panel">
        <div class="panel-inner">
            <div class="panel-title">账号登录</div>

            <div class="field">
                <img class="i" :src="require('@/assets/i_user.png')" />
                <span class="field-label">账号</span>
                <input class="inp" v-model.trim="username" placeholder="请输入账号" />
            </div>

            <div class="field">
                <img class="i" :src="require('@/assets/i_lock.png')" />
                <span class="field-label">密码</span>
                <input class="inp" type="password" v-model.trim="password" placeholder="请输入密码" />
            </div>

            <div class="row" v-if="showCaptcha">
                <div class="field cap-field">
                    <img class="i" :src="require('@/assets/i_captcha.png')" />
                    <span class="field-label">验证码</span>
                    <input class="inp" v-model.trim="captchaInput" placeholder="请输入验证码" />
                </div>
                <CaptchaCanvas class="captcha-img" v-model="captchaCode" />
            </div>

            <div class="hint" v-if="hint">{{ hint }}</div>
            <button class="btn" @click="onLogin">立即登录</button>
        </div>
    </div>
</template>

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

export default {
    name: "LoginForm",
    components: { CaptchaCanvas },
    data() {
        return {
            username: "admin",
            password: "123456",
            captchaCode: "",
            captchaInput: "",
            hint: "",
            loginFailedCount: Number(sessionStorage.getItem("loginFailedCount")) || 0,
        };
    },
    computed: {
        showCaptcha() {
            return this.loginFailedCount >= 3;
        },
    },
    methods: {
        async onLogin() { console.log('do login')
            this.hint = "";

            if (this.showCaptcha) {
                if (!this.captchaInput) {
                    this.hint = "请输入验证码";
                    return;
                }
                if (this.captchaInput.toLowerCase() !== this.captchaCode.toLowerCase()) {
                    this.hint = "验证码错误";
                    this.captchaInput = "";
                    return;
                }
            }

            let data;
            try {
                data = await apiLogin({
                    username: this.username,
                    password: this.password,
                    captcha: this.captchaInput,
                });

                this.loginFailedCount = 0;
                sessionStorage.removeItem("loginFailedCount");

                this.$router.push("/transition");
            } catch (e) {
                this.hint = e.message || "登录失败";
                this.loginFailedCount++;
                sessionStorage.setItem("loginFailedCount", this.loginFailedCount);
                this.captchaInput = "";
                return;
            }

            localStorage.setItem("token", data.token);
            this.$emit("login-success");
        },
    },
};
</script>

<style scoped>
/* ================== 表单主面板 ================== */
.panel {
    /* 严格按照设计稿尺寸 */
    width: 637px;
    height: 514px;
    /* 调整内边距，给背景外框留出空间并让内容居中 */
    padding: 60px 75px;
    box-sizing: border-box;

    background: url("~@/assets/panel_frame.png") center/100% 100% no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transform: scale(var(--s, 1));
    /* 将缩放基准点设为右侧垂直居中。这样缩小的时候，表单会贴着右侧边距变小，不会往屏幕中间飘 */
    transform-origin: right center;
}

.panel-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ================== 标题 ================== */
.panel-title {
    font-size: 28px;
    /* 根据大面板放大标题 */
    color: #ffffff;
    margin-bottom: 35px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 2px;
}

/* ================== 输入框容器 ================== */
.field {
    width: 100%;
    height: 58px;
    /* 加高输入框以匹配大面板 */
    display: flex;
    align-items: center;
    padding: 0 20px;

    background: rgba(26, 117, 255, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(71, 120, 255, 0.35);
    margin-bottom: 26px;
    /* 加大行距 */

    position: relative;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.field:focus-within {
    border-color: rgba(90, 220, 255, 0.95);
    background: rgba(26, 117, 255, 0.22);
    box-shadow:
        0 0 14px rgba(43, 220, 255, 0.25),
        inset 0 0 10px rgba(120, 220, 255, 0.15);
}

/* ================== 输入框内部元素 ================== */
.field .i {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.9;
}

.field-label {
    color: rgba(220, 245, 255, 0.9);
    font-size: 16px;
    margin-left: 12px;
    margin-right: 20px;
    white-space: nowrap;
}

.inp {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
}

.inp::placeholder {
    color: rgba(190, 225, 255, 0.35);
    font-size: 15px;
}

/* ================== 验证码同行布局 ================== */
.row {
    width: 100%;
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
}

.cap-field {
    flex: 1;
    margin-bottom: 0;
}

.captcha-img {
    width: 140px;
    /* 放大的验证码图片宽度 */
    height: 58px;
    /* 与输入框等高 */
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(71, 120, 255, 0.35);
}

/* ================== 登录按钮 ================== */
.btn {
    width: 100%;
    height: 58px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 26px;
    letter-spacing: 4px;
    cursor: pointer;
    font-family: var(--title-font-family);
    background: linear-gradient(180deg, rgba(119, 161, 255, 0) 0%, #77A1FF 100%);
    border-radius: 8px;
    border: 1px solid rgba(161, 190, 255, 0.7);
    box-shadow: 0 4px 15px rgba(26, 117, 255, 0.3);
    transition: all 0.2s ease;
}

.btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 20px rgba(26, 117, 255, 0.5);
}

/* ================== 提示文字 ================== */
.hint {
    margin-top: -10px;
    margin-bottom: 15px;
    color: #ff4d4f;
    font-size: 14px;
}
</style>