用uniapp写一个弹框,要求输入用户名密码,登录框要有遮罩层,水平垂直居中,

可以这样：```
// 在页面中添加遮罩层
<view class="mask"></view>// 在遮罩层中添加登录框
<view class="login-box">
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<button class="login-btn">登录</button>
</view>// 设置登录框的样式，使其居中
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

相关问题

使用java写一个登录界面，功能包括用户名和密码输入，以及验证码功能。界面居中对齐有登录，注册按钮

这是一个基本的登录界面的Java代码，包括用户名和密码输入以及验证码功能。界面使用Swing框架实现，并且居中对齐。登录和注册按钮使用JButton实现。

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.Random;
import javax.swing.*;

public class LoginFrame extends JFrame implements ActionListener{
    private JTextField userNameField;
    private JPasswordField passwordField;
    private JTextField captchaField;
    private JLabel captchaLabel;
    private JButton loginButton;
    private JButton registerButton;

    public LoginFrame() {
        initUI();
    }

    private void initUI() {
        setTitle("Login"); //设置窗口标题
        setPreferredSize(new Dimension(300, 200)); //设置窗口大小
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //关闭窗口时退出程序
        setLayout(new GridBagLayout()); //使用GridBagLayout布局管理器

        GridBagConstraints c = new GridBagConstraints();
        c.fill = GridBagConstraints.HORIZONTAL;
        c.insets = new Insets(5, 10, 5, 10); //设置组件之间的间距

        //用户名输入框
        JLabel userNameLabel = new JLabel("UserName:");
        c.gridx = 0;
        c.gridy = 0;
        add(userNameLabel, c);

        userNameField = new JTextField(20);
        c.gridx = 1;
        c.gridy = 0;
        add(userNameField, c);

        //密码输入框
        JLabel passwordLabel = new JLabel("Password:");
        c.gridx = 0;
        c.gridy = 1;
        add(passwordLabel, c);

        passwordField = new JPasswordField(20);
        c.gridx = 1;
        c.gridy = 1;
        add(passwordField, c);

        //验证码输入框
        JLabel captchaLabel = new JLabel("Captcha:");
        c.gridx = 0;
        c.gridy = 2;
        add(captchaLabel, c);

        captchaField = new JTextField(10);
        c.gridx = 1;
        c.gridy = 2;
        add(captchaField, c);

        //验证码图片
        this.captchaLabel = new JLabel();
        refreshCaptcha();
        c.gridx = 2;
        c.gridy = 2;
        add(this.captchaLabel, c);

        //登录按钮
        loginButton = new JButton("Login");
        loginButton.addActionListener(this);
        c.gridx = 0;
        c.gridy = 3;
        add(loginButton, c);

        //注册按钮
        registerButton = new JButton("Register");
        registerButton.addActionListener(this);
        c.gridx = 1;
        c.gridy = 3;
        add(registerButton, c);

        pack(); //调整窗口大小以适应组件
        setLocationRelativeTo(null); //将窗口居中对齐
        setVisible(true); //显示窗口
    }

    //刷新验证码
    private void refreshCaptcha() {
        Random random = new Random();
        int captcha = random.nextInt(9000) + 1000;
        captchaLabel.setText(String.valueOf(captcha));
    }

    //处理按钮事件
    @Override
    public void actionPerformed(ActionEvent e) {
        if (e.getSource() == loginButton) {
            String userName = userNameField.getText();
            String password = new String(passwordField.getPassword());
            int captcha = Integer.parseInt(captchaField.getText());
            int realCaptcha = Integer.parseInt(captchaLabel.getText());
            if (captcha == realCaptcha) {
                if (userName.equals("admin") && password.equals("admin")) {
                    JOptionPane.showMessageDialog(this, "Login Success!");
                } else {
                    JOptionPane.showMessageDialog(this, "UserName or Password Wrong!");
                }
            } else {
                JOptionPane.showMessageDialog(this, "Captcha Wrong!");
            }
        } else if (e.getSource() == registerButton) {
            JOptionPane.showMessageDialog(this, "Register Function is Not Implemented Yet!");
        }
        refreshCaptcha(); //刷新验证码
    }

    //启动应用程序
    public static void main(String[] args) {
        new LoginFrame();
    }
}

前端代码 写一个登录的页面。用户名密码输入框居中对齐，布局合理。包括记住密码勾选框，登录按钮

以下是一个简单的登录页面的前端代码：

<!DOCTYPE html>
<html>
<head>
	<title>Login Page</title>
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
		}
		.container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.form {
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
			padding: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		label {
			margin-bottom: 10px;
		}
		input[type="text"], input[type="password"] {
			padding: 10px;
			border-radius: 5px;
			border: 1px solid #ccc;
			margin-bottom: 20px;
			width: 100%;
		}
		input[type="checkbox"] {
			margin-right: 5px;
		}
		button {
			padding: 10px 20px;
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin-top: 10px;
		}
		button:hover {
			background-color: #3E8E41;
		}
	</style>
</head>
<body>
	<div class="container">
		<form class="form">
			<label for="username">Username:</label>
			<input type="text" id="username" name="username" required>
			<label for="password">Password:</label>
			<input type="password" id="password" name="password" required>
			<label>
				<input type="checkbox" name="remember"> Remember me
			</label>
			<button type="submit">Login</button>
		</form>
	</div>
</body>
</html>

上述代码使用了 Flexbox 布局，将输入框居中对齐。登录框设置了背景色、圆角和阴影，样式简洁美观。记住密码勾选框使用了 label 包裹 input 元素，点击 label 也可以选中或取消选中输入框。登录按钮使用了鼠标悬停效果，增强了用户交互体验。