From 49ff1865bbaec8bd59a7711ce105d7e068568362 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= Date: Thu, 22 Oct 2020 15:41:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=89=E8=A3=85=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=B8=83=E5=B1=80=20loading=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/public/css/install.css | 71 ++++++++- src/main/resources/public/css/loading.css | 171 ++++++++++++++++++++++ src/main/resources/public/install.html | 62 ++++++-- 3 files changed, 290 insertions(+), 14 deletions(-) create mode 100644 src/main/resources/public/css/loading.css diff --git a/src/main/resources/public/css/install.css b/src/main/resources/public/css/install.css index 65d9754..2a0a3ec 100644 --- a/src/main/resources/public/css/install.css +++ b/src/main/resources/public/css/install.css @@ -9,8 +9,8 @@ html, body { } .box { - width: 40vw; - height: 50vh; + width: 600px; + height: 45vh; padding: 8px 10px; border: 1px solid rgba(50, 50, 50, .1); border-radius: 3px; @@ -23,16 +23,27 @@ html, body { .box-inner { height: 100%; width: 100%; - background: #ececec; + overflow: hidden; } .box-inner select, input, button { width: 90%; - margin: 8px 5%; + margin: 12px 5%; + height: 40px; + padding: 5px 10px; + border-radius: 3px; + border: 1px solid rgba(50, 50, 50, .1); + box-sizing: border-box; +} + +input:focus { + border: 1px solid rgba(0, 50, 50, .6); + outline: none; } .box-inner h3 { text-align: center; + margin-bottom: 20px; } .err-msg { @@ -44,6 +55,56 @@ html, body { font-weight: lighter; } + .show-err-tip { display: block; -} \ No newline at end of file +} + +#first-page, #second-page { + height: 100%; + margin: 10px 0; +} + +.hidden { + height: 0 !important; + visibility: hidden; + position: absolute; +} + +.show { + width: 100%; + position: relative; + height: 100%; + visibility: visible; +} + + +#next-step, .button-group { + position: absolute; + left: 0; + right: 0; + bottom: 10px; +} + +.button-group button { + width: 80px; +} + +.button-group #install { + position: absolute; + bottom: 0; + right: 20px; + background: #1890ff; + color: white; +} + +.loading-show { + z-index: 10000; + display: flex !important; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; +} + diff --git a/src/main/resources/public/css/loading.css b/src/main/resources/public/css/loading.css new file mode 100644 index 0000000..b2d6f5e --- /dev/null +++ b/src/main/resources/public/css/loading.css @@ -0,0 +1,171 @@ +.pacman { + position: relative; +} + + +.loading { + box-sizing: border-box; + flex: 0 1 auto; + display: none; + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + flex-basis: 100%; + max-width: 100%; + /*height: 200px;*/ + align-items: center; + justify-content: center; + background: #ececec; +} + + +.pacman > div:nth-child(2) { + -webkit-animation: pacman-balls 1s 0s infinite linear; + animation: pacman-balls 1s 0s infinite linear; +} + +.pacman > div:nth-child(3) { + -webkit-animation: pacman-balls 1s 0.33s infinite linear; + animation: pacman-balls 1s 0.33s infinite linear; +} + +.pacman > div:nth-child(4) { + -webkit-animation: pacman-balls 1s 0.66s infinite linear; + animation: pacman-balls 1s 0.66s infinite linear; +} + +.pacman > div:nth-child(5) { + -webkit-animation: pacman-balls 1s 0.99s infinite linear; + animation: pacman-balls 1s 0.99s infinite linear; +} + +.pacman > div:first-of-type { + width: 0px; + height: 0px; + border-right: 25px solid transparent; + border-top: 25px solid #ed5565; + border-left: 25px solid #ed5565; + border-bottom: 25px solid #ed5565; + border-radius: 25px; + -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite; + animation: rotate_pacman_half_up 0.5s 0s infinite; +} + +.pacman > div:nth-child(2) { + width: 0px; + height: 0px; + border-right: 25px solid transparent; + border-top: 25px solid #ed5565; + border-left: 25px solid #ed5565; + border-bottom: 25px solid #ed5565; + border-radius: 25px; + -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite; + animation: rotate_pacman_half_down 0.5s 0s infinite; + margin-top: -50px; +} + +.pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) { + background-color: #ed5565; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + width: 10px; + height: 10px; + position: absolute; + -webkit-transform: translate(0, -6.25px); + -ms-transform: translate(0, -6.25px); + transform: translate(0, -6.25px); + top: 25px; + left: 100px; +} + +@-webkit-keyframes rotate_pacman_half_up { + 0% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } + + 50% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + + 100% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } +} + +@keyframes rotate_pacman_half_up { + 0% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } + + 50% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + + 100% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } +} + +@-webkit-keyframes rotate_pacman_half_down { + 0% { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + + 50% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } +} + +@keyframes rotate_pacman_half_down { + 0% { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + + 50% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } +} + +@-webkit-keyframes pacman-balls { + 75% { + opacity: 0.7; + } + + 100% { + -webkit-transform: translate(-100px, -6.25px); + transform: translate(-100px, -6.25px); + } +} + +@keyframes pacman-balls { + 75% { + opacity: 0.7; + } + + 100% { + -webkit-transform: translate(-100px, -6.25px); + transform: translate(-100px, -6.25px); + } +} \ No newline at end of file diff --git a/src/main/resources/public/install.html b/src/main/resources/public/install.html index 7040324..4666d48 100644 --- a/src/main/resources/public/install.html +++ b/src/main/resources/public/install.html @@ -4,12 +4,25 @@ 博客安装页面 + +
+
+
+
+
+
+
+
+

+ 加载中.... +

+
-
+

数据库配置

数据库密码不可为空 - +
-
+
@@ -43,9 +59,10 @@ requestData.password = $('#password').val() $('#err-tip-email').removeClass("show-err-tip"); $('#err-tip-password').removeClass("show-err-tip"); - !requestData.email && checkInput($('#email'), $('#err-tip-email')) !requestData.password && checkInput($('#password'), $('#err-tip-password')) + !requestData.email && checkInput($('#email'), $('#err-tip-email')) if (!requestData.email || !requestData.password) return; + $('.loading').addClass('loading-show'); $.ajax('/install', { method: "POST", contentType: 'application/json', @@ -55,7 +72,7 @@ success: function (data) { console.log("data", data); console.log("requestData", requestData); - interValId = setInterval(checkConnection, 200) + interValId = setInterval(checkConnection, 500) checkConnection(); } }) @@ -69,7 +86,10 @@ if (data.result.is_install) { console.log("安装成功"); window.location.href = '/'; + } else { + console.log("安装失败"); } + $('.loading').removeClass('loading-show'); clearInterval(interValId); }, error: function (err) { @@ -78,6 +98,9 @@ }) } + /** + * 切换下一页 + */ function nextPage() { requestData = { dbPassword: $('#db-password').val(), @@ -91,12 +114,33 @@ $('#err-tip-db-url').removeClass("show-err-tip"); $('#err-tip-db-username').removeClass("show-err-tip"); $('#err-tip-db-password').removeClass("show-err-tip"); - !requestData.dbType && checkInput($('#db-type'), $('#err-tip-db-type')) - !requestData.dbUrl && checkInput($('#db-url'), $('#err-tip-db-url')) - !requestData.dbUsername && checkInput($('#db-username'), $('#err-tip-db-username')) !requestData.dbPassword && checkInput($('#db-password'), $('#err-tip-db-password')) + !requestData.dbUsername && checkInput($('#db-username'), $('#err-tip-db-username')) + !requestData.dbUrl && checkInput($('#db-url'), $('#err-tip-db-url')) + !requestData.dbType && checkInput($('#db-type'), $('#err-tip-db-type')) + if (!requestData.dbType || !requestData.dbUrl || !requestData.dbUsername || !requestData.dbPassword) return + $('#first-page').addClass('hidden'); + $('#first-page').removeClass('show'); + $('#second-page').addClass('show'); + $('#second-page').removeClass('hidden'); } + function preStep() { + $('#second-page').addClass('hidden'); + $('#second-page').removeClass('show'); + $('#first-page').addClass('show'); + $('#first-page').removeClass('hidden'); + + $('#err-tip-email').removeClass("show-err-tip"); + $('#err-tip-password').removeClass("show-err-tip"); + } + + /** + * 检查组件的状态 + * @param component 输入框 + * @param errTipComponent 错误信息提示框 + * @returns {boolean} 是否有错误 + */ function checkInput(component, errTipComponent) { if (!component.val()) { errTipComponent.addClass("show-err-tip");