Почему я не могу щелкнуть поле входа на этой странице? ⇐ CSS

[Anonymous]

Проблема: страница входа в пользовательский интерфейс Vue3 + ElementPlus не кликабельна
Я разработал страницу входа с использованием пользовательского интерфейса Vue3 и ElementPlus, но обнаружил, что кнопка входа неактивна. После проверки я подозреваю, что проблема связана с фоновым слоем. Вот мой код:

Код: Выделить всё

Login


Username


Password


Login

Don't have an account? Register






.fullscreen-background {
position: fixed; /* 固定定位，使div全屏显示 */
top: 0;
left: 0;
width: 100%; /* 宽度100% */
height: 100%; /* 高度100% */
background-color: #f0f0f0; /* 设置背景颜色，可以根据需要调整 */
z-index: -1; /* 确保背景层在内容之下 */
}

.el-row {
display: flex; /* 使用 Flexbox */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
height: 100vh; /* 设置行高度为视口高度 */
margin-bottom: 20px; /* 保留原有的底部边距 */
position: relative; /* 相对于全屏背景定位 */
z-index: 1; /* 确保内容在背景层之上 */
}

.el-row:last-child {
margin-bottom: 0;
}

.left-background {
height: 100vh;
background-size: cover;
background-position: center;
background-image: url('@/assets/images/向日葵.jpg');
background-position: left center;
}

.login-box {
width: 400px; /* 或者更小 */
margin: 200px auto;
padding: 20px;
background-color: #f7f7f7;
border: 1px solid #c9e4ca;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-box h2 {
text-align: center;
margin-bottom: 20px;
color: #008000;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 10px;
color: #006400; /
}

.form-group input {
width: 100%;
height: 40px;
padding: 10px;
border: 1px solid #c9e4ca;
border-radius: 5px;
background-color: #f7f7f7;
}

button[type='submit'] {
width: 100%;
height: 40px;
background-color: #008000;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button[type='submit']:hover {
background-color: #006400;
}

p {
text-align: center;
margin-top: 20px;
color: #008000;
}

a {
text-decoration: none;
color: #008000;
}

a:hover {
color: #006400; /
}

Я подозреваю, что проблема может быть связана с фоновым слоем, который фиксирован и имеет z-индекс -1. Я пробовал настроить z-индекс и положение фонового слоя, но, похоже, это не имеет значения.
Я также проверил документацию по пользовательскому интерфейсу ElementPlus, но не смог найти решения, соответствующие моей проблеме. Я пробовал искать в Интернете похожие проблемы, но не нашел ничего, что помогло бы.
Может ли кто-нибудь помочь мне определить проблему и предложить решение? Буду очень признателен!
Дополнительная информация:
Я использую Vue3 и ElementPlus UI версии 2.4.11.
Я Пробовал тестировать страницу входа в разные браузеры, но проблема не устранена.
Я также пробовал отключить любые другие плагины или библиотеки, которые могут мешать работе страницы входа, но, похоже, это не имеет значения. .
Если у вас есть предложения или решения, дайте мне знать!

Подробнее здесь: https://stackoverflow.com/questions/791 ... -this-page