From 810d2eb5a4ca6639ff46a452811fffb66bcb2e53 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Fri, 26 Oct 2018 00:20:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E7=89=88=E9=A6=96=E9=A1=B5=E8=BD=BD?= =?UTF-8?q?=E5=85=A5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: e469ecfee4e9c3fe4d21ee3ee9d0c91a2a5a2958 [formerly 1a0640c66512d49a1903237173c3d262e17949b0] [formerly e469ecfee4e9c3fe4d21ee3ee9d0c91a2a5a2958 [formerly 1a0640c66512d49a1903237173c3d262e17949b0] [formerly e469ecfee4e9c3fe4d21ee3ee9d0c91a2a5a2958 [formerly 1a0640c66512d49a1903237173c3d262e17949b0] [formerly 1a0640c66512d49a1903237173c3d262e17949b0 [formerly 6c4aa3fcf442fbf8479f9aed32d3c9eaf1246cff [formerly 54fd4afda552fc2e7128fd1db072a21f73d924f0]]]]] Former-commit-id: cae83e98e9644388611a229282ef3d2fd10c6045 Former-commit-id: f56a9e5f69e36609be9ac86f3729a11d205678f6 Former-commit-id: c6af5cea2fb153d893097a4ad38782bacfcb645e [formerly 0aa116a0822e73d92bc7214c4f812f1505efc168] Former-commit-id: 377a51e81339086a718587aa53a33607a949b265 Former-commit-id: 645083e12611d4d93f6c83f5b3fa026a50b46e13 Former-commit-id: 694ab08a02a5b770b97a75268091a64300bd90f5 Former-commit-id: 01269425158df45734a20ba120fe92bd792c01d7 Former-commit-id: 659a181abd0eb4d3c36c755efb6a7fb46fe0d5c2 --- public/image/loading/loading-spin.svg | 6 + public/index.html | 170 +++++++------------------- 2 files changed, 50 insertions(+), 126 deletions(-) create mode 100644 public/image/loading/loading-spin.svg diff --git a/public/image/loading/loading-spin.svg b/public/image/loading/loading-spin.svg new file mode 100644 index 00000000..e2166a58 --- /dev/null +++ b/public/image/loading/loading-spin.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 907c0910..fbce95c9 100644 --- a/public/index.html +++ b/public/index.html @@ -12,125 +12,49 @@ margin: 0px; padding: 0px; } - .d2-app-loading-group { + .d2-home { + background-color: #303133; height: 100%; + display: flex; + flex-direction: column; + } + .d2-home__header { width: 100%; + flex-grow: 0; + } + .d2-home__main { + user-select: none; + width: 100%; + flex-grow: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; - background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; - background-blend-mode: multiply,multiply; } - .d2-app-loading-title { - color: #FFF; - font-weight: bold; - font-size: 14px; - margin-top: 40px; - margin-bottom: 10px; - letter-spacing: 0.2em; - } - .d2-app-loading-sub-title { - color: #FFF; - font-size: 10px; - margin-bottom: 10px; - } - .d2-app-loading-sub-info { - color: #FFF; - font-size: 10px; - opacity: .8; - margin-bottom: 4px; - } - .d2-app-loading-btn { - text-decoration: none; - display: inline-block; - line-height: 1; - white-space: nowrap; - cursor: pointer; - background: #fff; - border: 1px solid #dcdfe6; - border-color: #dcdfe6; - color: #606266; - -webkit-appearance: none; + .d2-home__footer { + width: 100%; + flex-grow: 0; text-align: center; - box-sizing: border-box; - outline: none; - margin: 0; - transition: .1s; - font-weight: 500; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - padding: 12px 20px; - font-size: 14px; - border-radius: 4px; - /* 圆角 */ - padding: 7px 15px; - border-radius: 20px; + padding: 1em 0; + } + .d2-home__footer > a { font-size: 12px; + color: #ABABAB; + text-decoration: none; } - .d2-app-loading-grid { - width: 30px; - height: 30px; + .d2-home__loading { + height: 32px; + width: 32px; + margin-bottom: 20px; } - .d2-app-loading-grid .d2-app-loading { - width: 10px; - height: 10px; - background-color: #FFF; - float: left; - -webkit-animation: d2-app-loading-grid-scale-delay 1.3s infinite ease-in-out; - animation: d2-app-loading-grid-scale-delay 1.3s infinite ease-in-out; + .d2-home__title { + color: #FFF; + font-size: 14px; + margin-bottom: 10px; } - .d2-app-loading-grid .d2-app-loading1 { - border-top-left-radius: 4px; - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .d2-app-loading-grid .d2-app-loading2 { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .d2-app-loading-grid .d2-app-loading3 { - border-top-right-radius: 4px; - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; } - .d2-app-loading-grid .d2-app-loading4 { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .d2-app-loading-grid .d2-app-loading5 { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .d2-app-loading-grid .d2-app-loading6 { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .d2-app-loading-grid .d2-app-loading7 { - border-bottom-left-radius: 4px; - -webkit-animation-delay: 0s; - animation-delay: 0s; } - .d2-app-loading-grid .d2-app-loading8 { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .d2-app-loading-grid .d2-app-loading9 { - border-bottom-right-radius: 4px; - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - - @-webkit-keyframes d2-app-loading-grid-scale-delay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); - } 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); - } - } - - @keyframes d2-app-loading-grid-scale-delay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); - } 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); - } + .d2-home__sub-title { + color: #ABABAB; + font-size: 12px; }