<template> <div class="login"> <div class="loginBox"> <h3>用户登录</h3> <span class="deadline"></span> <div class="form"> <div class="input"> <img src="../../assets/login/username.png" alt="" /> <input type="text" placeholder="请输入用户名" v-model="username" /> </div> <div class="input"> <img src="../../assets/login/password.png" alt="" /> <input type="password" placeholder="请输入密码" v-model="password" /> </div>

以下是优化后的代码： ```html <template> <div class="login"> <div class="loginBox"> <h3>用户登录</h3> <span class="deadline"></span> <div class="form"> <div class="input"> <img src="../../assets/login/username.png" alt="" /> <input type="text" placeholder="请输入用户名" v-model="username" @input="checkInput" /> <span v-if="!username" class="input-error">用户名不能为空</span> </div> <div class="input"> <img src="../../assets/login/password.png" alt="" /> <input type="password" placeholder="请输入密码" v-model="password" @input="checkInput" /> <span v-if="!password" class="input-error">密码不能为空</span> </div> <!-- 登录按钮 --> <div class="btn" @click="setFlag" :disabled="!username ||!password">登录</div> </div> </div> <div class="loginbg1"></div> <div class="loginbg2"></div> </div> </template> <script setup> //导入 import Header from "./Header.vue"; import { useRouter, useRoute } from "vue-router"; const $router = useRouter(); let username = ""; let password = ""; const checkInput = () => { // 检查输入是否为空 if (!username ||!password) { $router.replace("/"); } }; const setFlag = () => { localStorage.setItem("isLogin", 1); $router.replace("/"); }; </script> <style> .login { /* background-image: url(../../assets/login/bg.png); */ background: linear-gradient(to right,#ADD8E6 70%,#ffd7fb); background-repeat: no-repeat; width: 100%; height: 100%; background-size: cover; } .loginbg1 { position: absolute; left: 0rem; top: 5rem; width: 30rem; height: 50rem; background-image: url(../../assets/login/decoration1.png); background-repeat: no-repeat; background-size: cover; z-index: 1; } .loginbg2 { position: absolute; right: 0rem; top: 25rem; width: 30rem; height: 50rem; background-image: url(../../assets/login/decoration2.png); background-repeat: no-repeat; z-index: 1; } .loginBox { width: 62rem; height: 50rem; background-image: url(../../assets/login/loginbox.png); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; margin-top: -25rem; margin-left: -31rem; z-index: 2; display: flex; flex-direction: column; align-items: center; } .loginBox h3 { font-size: 3rem; font-weight: 600; color: rgb(62, 197, 231); margin-top: 7rem; text-align: center; } .deadline { display: block; width: 10rem; height: 0.5rem; background: #01cfff; border-radius: 0.5rem; margin-top: 1rem; } .form { width: 44.5rem; height: 44.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .input { width: 28rem; height: 5rem; line-height: 5rem; border-radius: 5px; background-image: url(../../assets/login/input.png); display: flex; flex-direction: row; align-items: center; } .input img { margin-left: 3rem; } .form input { border: none; outline: none; background-color: transparent; border: none; color: aliceblue; } ::-webkit-input-placeholder { color: rgb(51, 189, 239); } .input input { width: 18rem; height: 2.2rem; margin-left: 2rem; font-size: 2.4rem; } .input.code { width: 23rem; height: 4.3rem; line-height: 1.1rem; } .btn { width: 16rem; height: 5.6rem; line-height: 5.6rem; text-align: center; font-size: 2.5rem; color: rgb(250, 250, 250); background-image: url(/src/assets/login/login.png); cursor: pointer; margin-bottom: 5rem; } .input-error { color: red; font-size: 1.4rem; } </style> 额外需要注意的逻辑点： 1. 检查输入为空的逻辑需要根据实际需求进行更细致的处理，例如限制输入的最小长度等。 2. 提示信息的样式可以根据整体界面风格进行进一步优化。 3. 登录按钮的禁用状态切换要确保与输入框的状态实时同步，避免出现错误。 ``` [2025-03-18 21:31:12 | AI写代码神器 | 1402点数解答]