自定义登录页面的问题！

麻烦问一下，自定义登录页面的教程中，根据教程的代码出来的额登录页比较大，并且也不是自动适应大小，能不能可以根据单元格自动适应大小？或者是缩小的小一些。

<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定义登录Demo</title>  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <style> .container { display: flex; justify-content: center; } .login-box { width: 300px; margin-top: 100px; } .login-box h2 { font-size: 26px; text-align: center; margin-bottom: 25px; } .login-item { margin-bottom: 20px; } </style> </head> <body> <div class="container"> <form class="login-box" action="" method="post" onsubmit="return false;"> <h2>数据决策系统</h2> <div class="login-item"> <label for="inputUsername" class="sr-only">用户名</label> <input type="text" id="inputUsername" class="form-control" placeholder="用户名" required="" autofocus=""> </div> <div class="login-item"> <label for="inputPassword" class="sr-only">密码</label> <input type="password" id="inputPassword" class="form-control" placeholder="密码" required=""> </div> <button class="btn btn-lg btn-primary btn-block" type="submit" id="submitBtn">登录</button> </form> </div>  <script src="http://localhost:8080/webroot/decision/file?path=/com/fr/web/ui/fineui.min.js&type=plain&parser=plain"> </script> <script> document.getElementById("submitBtn").addEventListener("click", function () { doSubmit(); }); function doSubmit() { var username = document.getElementById("inputUsername").value.trim(); var password = document.getElementById("inputPassword").value.trim(); if (username === "") { window.alert("请输入用户名"); return false; } if (password === "") { window.alert("请输入密码"); return false; } /** * 通过登录接口发送post请求，携带用户名密码等信息 */ $.ajax({ url: "http://localhost:8080/webroot/decision/login", contentType: "application/json", type: "POST", dataType: "json", data: JSON.stringify({ username: username, password: password, validity: -1, origin: getUrlQuery("origin") }), success: function (res) { // 登录成功后保存是否保持登录状态以及token if (res.data) { var data = res.data; var day = data.validity === -2 ? (14 * 24) : -1; BI.Cache.addCookie("fine_remember_login", data.validity, "/", day); BI.Cache.addCookie("fine_auth_token", data.accessToken, "/", day); // 然后跳转到相应的页面 var response = data.originUrlResponse; if (BI.toUpperCase(response.method) === "GET") { window.location.href = response.originUrl; } else { doActionByForm(response.originUrl, response.parameters, {method: response.method}); } } else { // 提示错误信息 alert(res.errorMsg); } }, error: function () { alert("超时或服务器其他错误"); } }); } // 查询url参数 function getUrlQuery (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r !== null) return r[2]; return ""; } // 通过form表单跳转 function doActionByForm (url, data, options) { options = options || {}; var config = { method: options.method, url: url, data: data, target: options.target }; var $form = $("<form method=\"" + config.method + "\" />"); $form.attr("action", config.url); $form.attr("method", config.method || "post"); $form.attr("target", config.target || "_self"); for (var key in config.data) { $form.append("<input type=\"hidden\" name=\"" + key + "\" value=\"" + config.data[key] + "\" />"); } $(document.body).append($form); $form[0].submit(); $form.destroy(); } </script> </body> </html>

FineReport 3295293 发布于 2021-3-30 11:17