From 9375ad772a26b76fc0e2026d64ebe75cf65b4fe2 Mon Sep 17 00:00:00 2001 From: jlzhou <12020042@qq.com> Date: Tue, 9 May 2023 11:31:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=90=AF=E5=8A=A8=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E5=8A=A8=E7=94=BB=E5=92=8C=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 276 ++++++++++++++++----------------------------- public/favicon.ico | Bin 8131 -> 6647 bytes public/logo.png | Bin 0 -> 18284 bytes 3 files changed, 97 insertions(+), 179 deletions(-) create mode 100644 public/logo.png diff --git a/index.html b/index.html index 3f0dcb5..7c00fff 100644 --- a/index.html +++ b/index.html @@ -13,200 +13,118 @@ html, body, #app { - height: 100%; + min-height: 100%; margin: 0px; padding: 0px; } - .chromeframe { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; - } - - #loader-wrapper { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 999999; - } - - #loader { - display: block; + .loader { + width: 20em; + height: 20em; + font-size: 1.5vmin; position: relative; - left: 50%; - top: 50%; - width: 150px; - height: 150px; - margin: -75px 0 0 -75px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: #FFF; - -webkit-animation: spin 2s linear infinite; - -ms-animation: spin 2s linear infinite; - -moz-animation: spin 2s linear infinite; - -o-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; - z-index: 1001; - } - - #loader:before { - content: ""; + display: flex; + align-items: center; + justify-content: center; + } + + .loader .face { position: absolute; - top: 5px; - left: 5px; - right: 5px; - bottom: 5px; border-radius: 50%; - border: 3px solid transparent; - border-top-color: #FFF; - -webkit-animation: spin 3s linear infinite; - -moz-animation: spin 3s linear infinite; - -o-animation: spin 3s linear infinite; - -ms-animation: spin 3s linear infinite; - animation: spin 3s linear infinite; - } - - #loader:after { - content: ""; + border-style: solid; + animation: animate 3s linear infinite; + } + + .loader .face:nth-child(1) { + width: 100%; + height: 100%; + color: #0d9be0; + border-color: currentColor transparent transparent currentColor; + border-width: 0.2em 0.2em 0em 0em; + --deg: -45deg; + animation-direction: normal; + } + + .loader .face:nth-child(2) { + width: 90%; + height: 90%; + color: #7bc528; + border-color: currentColor currentColor transparent transparent; + border-width: 0.2em 0em 0em 0.2em; + --deg: -135deg; + animation-direction: reverse; + } + + .loader .face .circle { + position: absolute; + width: 50%; + height: 0.1em; + top: 50%; + left: 50%; + background-color: #0000; + transform: rotate(var(--deg)); + transform-origin: left; + } + + .loader .face .circle::before { position: absolute; - top: 15px; - left: 15px; - right: 15px; - bottom: 15px; + top: -.5em; + right: -0.45em; + content: ''; + width: .6em; + height: .6em; + background-color: currentColor; border-radius: 50%; - border: 3px solid transparent; - border-top-color: #FFF; - -moz-animation: spin 1.5s linear infinite; - -o-animation: spin 1.5s linear infinite; - -ms-animation: spin 1.5s linear infinite; - -webkit-animation: spin 1.5s linear infinite; - animation: spin 1.5s linear infinite; - } - - - @-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } - } - - @keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); + box-shadow: 0 0 .5em .15em currentColor; + } + + @keyframes animate { + to { + transform: rotate(1turn); } - } - - - #loader-wrapper .loader-section { - position: fixed; - top: 0; - width: 51%; - height: 100%; - background: #7171C6; - z-index: 1000; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } - - #loader-wrapper .loader-section.section-left { - left: 0; - } - - #loader-wrapper .loader-section.section-right { - right: 0; - } - - - .loaded #loader-wrapper .loader-section.section-left { - -webkit-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); - } - - .loaded #loader-wrapper .loader-section.section-right { - -webkit-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); - } - - .loaded #loader { - opacity: 0; - -webkit-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; - } - - .loaded #loader-wrapper { - visibility: hidden; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); - -webkit-transition: all 0.3s 1s ease-out; - transition: all 0.3s 1s ease-out; - } - - .no-js #loader-wrapper { - display: none; - } - - .no-js h1 { - color: #222222; - } - - #loader-wrapper .load_title { - font-family: 'Open Sans'; - color: #FFF; - font-size: 19px; - width: 100%; - text-align: center; - z-index: 9999999999999; - position: absolute; - top: 60%; - opacity: 1; - line-height: 30px; - } - - #loader-wrapper .load_title span { - font-weight: normal; - font-style: italic; - font-size: 13px; - color: #FFF; - opacity: 0.5; - } + } + .loader-root { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-image: radial-gradient(#2c77bf,#2564a1); + } + .loader-title { + margin: 4vmin 0 10vmin; + font-size: 3vmin; + color:#ccc; + text-shadow: .2vmin .2vmin 0 #2564a1; + letter-spacing: .3vmin; + } + .loader .logo img { + width: 17vmin; + height: 17vmin; + } + .loader .logo { + background-image: linear-gradient(to bottom,#FFF,#aaa); + padding: 3vmin ; + border-radius: 50%; + box-shadow: 0 0 .5vmin #fff inset, 0 0 2vmin #0006; + }

AxE-r3%T(9e1^^ZX5M@A`@Nap{AT6>TrSr`Pi%o;QCLbs7G9aR#9%UN
z2m}HVuWT?Au5d6@(C~=oQf6j#QyFw8G{p0Gb^0eFk?4Bk
zbTTsxTT~%|fgd}RLdM3ZE7eU=oqg{f@cEv
H#xwyn`%G|P6JWVu^^RF2uLIXa8iV}<5%R@^Dou&q!L~i
z^dB&Kr1VCQ7%GiXv2ttP9i!RsR7u6ndL-@zdUz(E&ECYIQs%@*hSDb`M++X$97!1#
zD#E5cuxW3eam(Jk=U{|+&}{%Nmv$INUX!?7N~vCJy{t3X&cORzg=M%4q5FaJbF@q<
z+_~wsoQX)}0XDa<+jdO#XogtSskFfHZU;;{2}Ff6!5u9J7zrZqSbPtFQytiy-v)TH
zNx)&~v^_I*h}V7c>W1#xjo+RwD5WE3nl^)bpZed5vMTX7o3Qom3RP%_^>jT4ge*9a{wy=>*Rh#VpjL<%SYm|ILSub84qeB7W4
z4CDMFF&i)mBG>g4D`M|vb^`z__S+hD0|0r$Rh`1671QA4hB$kmtiGk|a
ze8P`*`t8s0$4$(x&yD=;J2j)uU6|<|5yUsQ2pW&X^D;W4Ug*sB+3C6G|JroKw>JD&
z_c2zofqRYr$(55bQ-9eOwS_75d2fM0NWnm(+Qq1M^`8#w?0ef|@pZS;VS^T~z9s*n
zTzK8@Mm*Os@bx*Wp^vr>!tCSBm0%A+#J7F(TY)zkC8$dwK)C!n0|)>KVOT{WnnwZ)
zf)j>_pFCkk5-3{i7(%{@RiX*?wk_QyUU2=LBlo=kJLZ?G`KBC=%#-^bc1lwJ$vG0Y
z_R(YkFcd2=GvJE8x><+qs~aVZ;J0I?5}2d`+_vs-e!Rp#!f|5*(HHB>tVHiF{>sdC}yHHH!2mPEw2i*f#zA%TX?08+oRL6IO0Mh!{1LzpL7
zI4SRqK8+f)LrELlHP_*pMMZ!VC__M{y?m(oU+h-O&NV7NJs^R0?MuN33Zg8EdSP|D
zX*puLop;3OCtrUqYHzshkjEc*@|*Xgu)GO7|CaId0n7*R;_6v~<5$a7{(Qpj^>=P^
z(m|g@jo;~n?pr9jLUn%8v`x|(58r?8&)-
i8mztHn9HD_93$gBQ{7#Z=We?;(6JjE#tGfYS*Xb@De_G7ZazYl)Dkl+86
z@8ZoO0F}_k7?iBw-Z^
d7m
z3_);_{IM$p+8_?3Hieqx)CIt^FA;T8eMm%`UOoQTxpcx*jM>jcK$oU
zxy5jRWedl?V+d8ADFp$;I*&6(1W*ic91LLvA>*4cC<`kV76Qi%A&V$qfO6uyn+d}a
zgS{F6x$>#(zDYL=hwt;E9AI2H&jFrr3vqDHf~*ClA&O`XVwcC-ty8A#-t^wiH(mOR
z9`#sQX+Qmmqwc(BZ@cYwBTECHi)}3uPGQlBOcG<0{6-Ux%^fp($SX_&Cd(6X^!-eN0t
z^dcy;ZV2dVJI4aY)D?S|FisK(rCnv_6+kIan!pr_5cX#Xh!9fCFq}tK+Bq*1$xOEN
zaluKOMUqL`#EwiIQrFkUQKqQ0A|2I|kk4;2lPFz?5-C-=j+QF2FG$D2m$z&A*QD#l
zUN;liZ<+VG)Or3&8%6$cOZwKk=S*xz{Wiw=n!D~wpsOXkxAx1;9sxqa2%Rn{oM|MX
zdRGAy0T2))oFmk=*lFlCUe2Lc46ShO%84R@O$61|BOoR3)+)ykawsW5s)DMfD$j)o
z2W$&F&!P^;x{?5nv&go$VDP7(f7KIg#$g&aA6|?)zkpR6e>kVvDXndHN|q*N
zqSO~ItkZ|xo