From 7785e2bd5a8adfb4fd85965279aa183585065acf Mon Sep 17 00:00:00 2001 From: Jason Date: Thu, 30 Sep 2021 12:19:32 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/home/box.png | Bin 0 -> 2214 bytes src/assets/home/cicle-inner.png | Bin 0 -> 2210 bytes src/assets/home/cicle-out.png | Bin 0 -> 2637 bytes src/assets/home/left-line.png | Bin 0 -> 720 bytes src/assets/home/line-left.gif | Bin 0 -> 5344 bytes src/assets/home/line-right.gif | Bin 0 -> 3421 bytes src/assets/home/right-line.png | Bin 0 -> 763 bytes src/components/Banner.vue | 147 +++++++++++++++++++++++++++++++- 8 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 src/assets/home/box.png create mode 100644 src/assets/home/cicle-inner.png create mode 100644 src/assets/home/cicle-out.png create mode 100644 src/assets/home/left-line.png create mode 100644 src/assets/home/line-left.gif create mode 100644 src/assets/home/line-right.gif create mode 100644 src/assets/home/right-line.png diff --git a/src/assets/home/box.png b/src/assets/home/box.png new file mode 100644 index 0000000000000000000000000000000000000000..6eaa0b0a63f99868a6991e9e63324f8be4745e44 GIT binary patch literal 2214 zcmds%X;c(f7JwVWBGQPUfFcGVY)S)83@#vzpaxMuwt%fDEixU1)*+S}%8pu5C`BtG zQ$bTXn!>2<)+o{}Hi#`Gv?wi@cAIvgqC#Qd3Hk(~aH%OL^E>Cv-?`^|-@WhM_x|1U ziW1_Z?Z>!{5s5_hF^d-_2{}Yq^G1Ip_~qK?0?cQ6h{I zWt14J#DEfKlsK!zfs$aA1W*bWD2N~of(oz*#vmAr;0%HTgkTT?AS8>Bf+0dd6lGA9 zMKK1&Sd=hWwE!eZmLwrbL6T-k8jxy8QGlWZa}>=|G@xim(Hx}#lm^l? zplOa)16s||8bE8HTFt7}oLbGRH9)Q5)EZu`1!^r+>!3yhG#Xx`g&HlV(efG{(CDC6 z3$$9noL0+gbwI1*wR))20i8}TuM=uLr_=K~1JD^cy&mfIyxsuy22O8;27>@+Fz^PU zHgX0NXEZ{iQ7~^bL8Gu`IFkvQOoDln8Jf(T$;_J=&TJOo%?vaPHN!Iu#|UOQ_5(Z% zI2P~#a6mBR;0Jif@tnYahO99E-CJR}Uu{Z?PZn8>`pDAC+Ge!v7(223Sch?rj!xqz zIJ>w`oaE*<*?r2#9#cKNKJoVP@%8l+!vFsu6ccm%MIy_hn1zuki?5a*dY6&>h5J<- zugnQ97qKKybPsVt9DQP3RGCTQSX(py`$SLYz)`ybZ*5Hc!%{UdoS3jaF)}JLHLGRu zSzV^Is#;#KEYR0><-Iqqo7%#M`a0@YWvlqS{w*2Z@3tN3Z|fesKLqn)?hZbKmSa&k~Cx3HFL+MUyEEH?<@^SV~RzosqwR}o%v$fejl!8 zwx9G}#n)Ck(BWP%)M#22*FQCW*E=rP_R5I;ItQ#YPH;;OVetqI+oM`BNX|wgwx!S!kKjb*}+E!*UnSJde-`)vM z{GlQu!#^m<$3LjFWWxHLH+>ICX#-)}T^2I6bVlp()^QoDS54kFBXa4}rLX+AZ}0DW6k@Mx&$t?!<19Hj zs;p_ca}{2F-#0_LG4tf=9o(1V+MJO0^II!D%6!WDu>Oa)K7NRfOTl_i1vH7vT{e8a z$|F}d2|u{sF0T0sc08(qwzI2fs~))}Zo8dr`53J!TI+hVvZneE+xw%h>`smIk&kY! zyI}r@N5P%3Snq?F6)oE1Ki5QeYsUvvi6sN7mb@ba)>Sn{4{dC#z!b4~MX1HX+X;n+ zgIla`Zrt=+RnD_KDt5Z{kEvV33hvlrOKQJ$wj^z>#ve`19o+6xw%}@fsTmwUO|Eil>`%`CL)PGprA26XlS=Hd+XM9Tesca8Co3nN z4?GwWB5%GSiAZ8JCK}w`cDLJ>JB7A8v(O^90=DD-?Y4!q-Ez*EolE5;C*5r4ob#V= z{>%6OXJ$Pf2U|kXeC9tM)l?Y8-He1n=-|? zT72I%LRHJ3SuD)kiR7U5(jOsVj;RdbUT zY$h|!Spd|GuIE}}7q?jN5aXjO$i};A!4rv&;`(aM8|ge(OXr_ur#ABF>EwQ znTbYU_pwOi+-f^ariC^*00tdX3w5Tns-w68j@AyKrg|{kXKeBQUF!8x=BgaberPUN zX2=G%Z8M&vjqZpi3py3&zKO;DS;^1Gu6W}~?Y5m@wYFWF25TC$#`L%^n2&LDwkSAT z;Q)9WbFctV0F1Ow1AqXM$-I+#j5aWCCs4yL|scC`y$CWsmDXrqAAHm3(mnk~kjI>@5-S}1N-?yt;G?5ruANz7} zr6gr*(D51H;eWVh^4bR+eLn+OQ$8(qtEuVqOO>(#+c=!p*Y($wP@(2i5jm_S|8Zk3p}ca&fCkJ0OVxA9q`tOVGWf&2Z<0H>$O9N%f8CKp zywTsiXI`J-O&O7v^ACWf9kW8vK;Y~uuXNunu$gA|Yg@rmRpW_D+BLI>n)?kR!Wk>? zY9Kbak~HTGyOyP|lZ7m`4KVTpZOqZhn;Hv;``1}5Q#gEn9U>vKFB8ZD%tXfDSp}nH z*fu9C`+M6tBIYl)2=z&{cRAh3aVFK5yL#;Qtyq(hm;D>1z3?AisCr1{s80BTea*~w z(VvajPIUsgCRX_Zq28v4&DYsEQd=r>E5$7dRa5AIpm2!Fy#wg@jGS>k02}1Y9u{G| za@RHDOAeeM8H?f6ncRikwQFXXi*VRSrSx4EVf>-K%}xQ<)Rcdh(QVweUfrpZ$pn}`zs4!RnwtlnXNuyq7t4h~ zZHXyDO6*mL>Yq_$YuF-XYQi-dX8Fm@{DpzljDcy~4j*=hiQ|M%ZFCAStj(BH-myL{ zlDjmJ> zR%s2aW!sHptyWAD!={Yk!a9)}f{`Bj=5YjDVOL%62TTMwJQqrTj3uH!Aa>(4-I z^+Cg&n49m^C@21o5^u%z0WGWL(XvVN91I5g-l`T@mT$aHn$N7| ziB5CWr0!CP|EW>VZVxo&y?7cZ93FlO9iQ`+C5wd#R&?J9fJ!_rJnVy<} zj2<^NDUkibouCm|BwHo9@r=J?FO|vu>@IhKhG$%}yDCR|V<~=_057ZJ{c*e!jkkPl zeMv$N^(5T^8i7T!umuxiN%^Jw;%>Ye4FK`@y~sP6vznsl&pqs#MqlnDa?m4AfrYgp zgXkV%qE-1l3{@Si!;4X$GdvU*3Y~g^wb)qAjy18i<4!#myZSVN)e}z+b3G>H3-sYM|$~%275ofzSA^ z^gp@=*E;zK!b2OLc!raQv-d3EmQ0SkXxm~eG-76J*>>$2H-SYry+GV*qbu(wm0lhr z#++w;AKMnULSVTTG&(TYO7BY^wR)YoO6Lm>G?*fUN_6u5R08kjDPo6EPG9hvmMHza zLh)OnbA<{gRC5DNCt7p{Va7ad4Fq$7MOsCsSP*ge*gWsKg2L4*`A;}#KrBs$JT4u3$1dx>g_89%n5n<-ypV(fx!X0?Pj kx-NX}668~&{H+@8KU^$aMe>-+2mk;807*qoM6N<$f}H&<*8l(j literal 0 HcmV?d00001 diff --git a/src/assets/home/cicle-out.png b/src/assets/home/cicle-out.png new file mode 100644 index 0000000000000000000000000000000000000000..c1b9706612f67e8796c668c7d2ebd2f5089b831f GIT binary patch literal 2637 zcmV-T3bOTyP)-DA1d;RkNyn*z* z6i8>KKn8mHrq`dI6aDg4QA(x-DH(*HkHXLUot`OMN5|RwIMzxV@0)o<49GtM;7&>b z`MR$+qZrZQWhkOAbqV?(crm`W!?{kum!$JwmwM&HV6C%8fx9~RnJh0QCwOUQzug|+ z-qZj)oyu(h?)Slh$7%&|1*^X)NQu8XT$7zm2J+-xz`rkoWnEfpkjr)8_z9E+@VX*+6K~t?(J$9M$f6kA z<_*XLjRtZ#PIn2@hedI4bNyO#Aak+NfiCV~MiErYxtsT z3bep9`)Bp><0Iu{;tvzF3sOtTC5|4t`KMI!rKK0(5o>&Rc3%%76dh7AWhi|Wq ztG!o#2!>Z$Cl5wl{G<>0zLrK}v&pxMlDr=*{=XF`MkxWHhRcGT@8Nf<4!9?f{0vZs zta)~qk{2BAm}jlMwZ6W{7Ie74Xs$1(G+D8>(=ZADv6$04yU(r)bTNk;Za8^)m-(AUYmWE0#=lw5&KMX&JIL3o z4tJCc^ew=1D#b{LC6NBL7TM$x;sZ}~jojS`AqE>C`>feI^oClnQ5FJ+n+&-LlPP>( zXV2Ibc>8pq{pl=7xPy%tKr@*`2LQaRO2987PCB*p;AWF0^e?=irF{fd1cjfoHg`18 z$YJ5uwyB6W*QT#7VhIV)KC(XE=m*;R* z{5_x&=&*@2Y=BnKtp!Kr1lPn3p7Xdmz{%=F*#N_5RK>-|zhfP|vzfuh=fmfub9Z=@ zj`XpUVLsUMtcCyN^kB>dJtx)om+uwTU+>*m&R!{?`Bg}5#s9&MphL=8Dn>lK#z<8EaW;y??*hEA1ycu(iM_vS-| zq=3uw9BUlnKn=knzQwM2Cv8%M7osIh;~@rZxk)m7h=||eRaaydWnY+Q z(3Xppgn9A`4*YYPHVlG~F=)$xZ5e)y2=-~@oH5ccXdQZxL0g7K02kt%H-=gymx2u?vcV zQNVV26E3z=qoX-Iu_vhejBK9qhw?KjTZ7cf*DsK^jYB!S#V{dTUDwoL?|qcG>Gn^H zT9M_AsHYHqYA3bE3Y6z~`ql?oMwAAt_9lN$+k88l#kwdZA7;6J^w!s>YylN=nI`#C zvE>03mc>eLyqJ87TvG+AKa>jFUJq=vFPyta`y#OOWk@EJq(g ze7Bm~g&rxVml1Eg@QU!TYe2oXdZ7AS=ikj`4lV$ysf1|GNdyY zo92O)88s9b%<1rYcYHu`w1A4Zq_K$aYgHLySbJ0>;B#0Arru&HonrFiz|XI1t!fYT zzW>tSuT&@F0ITX^bzO~s=Ym)HXyMw1XGKxj3|`)IULD7}0OkDKYW?Tds@^EpjmG-X zIsnhb!*Kzk)+;`{cSpAH;>=SJB+_-v7JU9c9#8z9n%p!3uG7MAEwSaQ8&r7_+3lYG zDp=ynpc<~|t!57~lGAqk%*Sdv6p>PNaQL!S``o5`$V-jq$!|D4@h&)1<~bPNNAO%ou)aBC4+)yh=2eHX_UU&89e&YR!1Eo`aEp(l z!i>Ig!&piocy-Mvuxn|> zMb?}Z#F?X3YkVtL@2yY{dO$DGZBLHW9B8jU72^4sM;b1ygIun1iLIo!cb%!-d60fN z1MzFI;g^+i#dKAy+AnlGZmRm0ET=%p^fg^d9oBj+Bm$8#uk5a9)ecWaciSyYJDWbU z3sc=Nx3G}RnO#}-O&h9}fhrPku-l7HZ|3vddTfPs<<49}{*oOKf=<~76!AU;oc;^| zKkE>dr0ud+sKy4Hs&E$@oQiY;0Gq&+FLW-JhC=ao_?sJ|Prd}Zw$8!d9fL^T3obD( vI)%xvFf?^ew)^%eTdn)zTQNtv(fIcNvSy~uI#BCm00000NkvXXu0mjf+^r$~ literal 0 HcmV?d00001 diff --git a/src/assets/home/left-line.png b/src/assets/home/left-line.png new file mode 100644 index 0000000000000000000000000000000000000000..8c205da5cf6e1278f8b74b52db3d8ed0550dee45 GIT binary patch literal 720 zcmeAS@N?(olHy`uVBq!ia0vp^N(>B)TRE74tku2O_5-Q60X`wFKsqh$Olat_fPnM9 zk!Sq;E(Zmj3kW#lA9~I&_-s(ndH;~Jfr01zgU$s8o(&8+9~g2jF!)>m5CKKNWI)h) zAUh!BoPY4yfROY4K*128$XPH0D0m*k4F<~s$)K|V!RLXdK}ev1Kn6$_B!12xXgF9g z$Uu-5utg{)oCjJO2s8m%7QzOb3DyX;5n>3$e4uGSKxZQFP4-n;+cp%W)h zojZT=%JtiK?mu|);^phN@7{m?_Vd@D9`pMjfZ^-n>EalYaqsQzqhZXB0&Wiv-d$K& ze*J+!4AYap^6fd3=a&Sxv#zxKzHWbLX?U99%r)jqP8}+o)uJQH!jvho>CW1#6F%`@ zozQOF`_k#v#NSP6`%72bN?k5>H)DTvbtlhNapgNX#~(8&xP1z`@@9Wfv8>eP)<4!a zWv{)t{<|hHdDjH{3FjxJ?VmCEEKs6CL0x!OEpy*7lV#i=9hOBaUA^D%DwJdCbq^Va zBj!6JF23pSoT~`5$!0>U-`RbP{?~z;p0wO~m;Fuk=8Nky^o}q`zQ6oNI>6?_3_TU~ zCm*!}f7#|(a(l;iS}=GtPg?7E_TP*hF_*!Te@9&;_ z=H7*iP!=0oM&gqiy-2(F-ieNFS^cFxWAkmPyeVf#rzE0r)oOiWa$7;+U7^?z71NxV z)t->lCi}W+)0Xy<()(rQJ>e0JMaA7o8`}!@-Ti!xe$7|c@U_?1NgFlV7CiiVd}3=t za@&T4*4!PPx&!yJb2_(f>sS_69~0Z6ifZ1O*A=q7{$Oc$Utb@|>dT{VL~vl(a(~~D zKq?t_upARrNO!4(WX%vbp1;gTS& z5?`(j4ijo4glrMGU_LNU!_i0;Qe2Gz8fm0V#nEs!G$G6o2&krU%-OSP2nzet5H{0~fgpi?ET#{O6^H~d zedst_M^fv|HWh&7^kSI(6ao8}E%BHczkdO*fAu*dygV-1Yhv)(Z0waW| z2!jDqh!82p3#g@;ja&V>ABy1@9v$h&W`rmx7u27wlv>pYP@c^roY-yf93L}x{DWnK7a1)e}4M0 zw&u(ar>jq$JaPQk(W=VtzpE%eQg-;;L!~7Li@zy4pxeK%uwd_=-TAxncJ9c{$=<## zYis6~&6_gP(^6A5CMP8(#BW&t@3?L0+QEHX)YlU1Ujf_|)312J5MM44g)t76& zSpE5`&sMJZ=ci%ILzjgt4dyTT$Kpjn3(>#;e?MQ|g8AHeb2)6550gQsQ4yFzhP*%d z*lW)0SuIf@|f$y+ZJDKAEH3a|FK1(vNUZ$2D-=}~n0?F!A3`ov2;Rr%UA z)$Og!xcNH`z3b+#U(octZ*^#5Qu4->)U@=BO`Er5Zq3@ZJv%3N$IiT6=E?vG--*D9{ z{?qe@$a76|8k<@Tx8mD3bjIoLb>Hv#<-xBHA3g5PJ=Oi}-V6P2S6?;!UjN6HKcCnS zcMq!A_hZt~!oc`=CqKu85mV+nPkfr;pXLk&C$G@g1!hd*%HnQ(SGO?JgP*x14;hWKCYdPoGkkj51^|ZIl89xZ8)p7Lr(X}=wx@xoP+#VYOUT6 z+1ZfOVJbS+!6IkZV0Fmq|B9mxIXzraR}YJvf;97WsMhNBIoyVvr0M8%l0{B%u=%ul wfBTUQIme7c$BnVb*)_0FSn=Vh%)tBbSo(jQ%4XY;bMz>5)M$&G0)lhyUmjQ%%>V!Z literal 0 HcmV?d00001 diff --git a/src/assets/home/line-right.gif b/src/assets/home/line-right.gif new file mode 100644 index 0000000000000000000000000000000000000000..19483b8a738613627ade5d1b94ef8df57a4fce01 GIT binary patch literal 3421 zcmchYc~ld35XZyiQQO+X+SXo6@Q9U7vbnR077|dXAOfwHBC^?RNQ7k5WPw1fiim)K zRxZT@u!4ZdC3vEs1r!t#P()DV60cf|)>><^r5hmD*IN6)_t<}ScXsAC^ZEV0Gdthe zNgzZPQ(P%klPKQH8bd-`W8*v0GI~_%=H!&F@O5pAz4TK5rkvax-ad^&kRhi!ixjL6`>f40H2B!vavDlsa!NFh>XL zlxihLAb?I8sM5kZJ1Qc@B^XRT8_f(VFyKN2*ir3`9{^)c5w5`iE}aLW5Qhoyg>;C= zCj^h%qgyQK$(8t^$lJA`(1^u%nWd4k9SkuC7lO zR%z)2Ky(yWGIWTV0nwQZrP9bX;H@P*u)oWArnlBBRE;q_FfAUWK{3+Z#uQBM-SZO} z9m#6oMH&TpC`h0fM}w4@if|U&QOPfKsX_`11Tuuf;xR!;#^!d5@i}}p*PdgFbyjH!M1^9e+zK-H zP%Qtsv9L&kAq1}R!tp?p3f$#5fotWs8W4$$r!D|!t_Z478I3cI2Q|no#x#mxOzNb; zmB7GG!-{8AA!8yei42o~G9e@YIUI5ugc2DGh2M3i(T1XPL zsUVmy74lGoCj?nilnr8B4hIx)IT8?&Kx~$f&y!#XL}idAGK}JRN=zmbsZitNlhz<# zo-`MxB0EY$wvJiySq9&+OM=- zzSP=svH3#N`E!j827P_q*)z2@r%zQ^Repc+L`C`WV`WE=96ogLKxxVT;-bQW{C#c&FWR(to%AG zR2LE)L})c%sd1GuFkpp3?k~fns08s_?z_zAOYbk1F8Ta3FHeuf?u*=97k=vEykNeQ zqgdo%|H-_$c5`OKLII!0<*->0lR*bpldA@4oZ)s0mnXb5e%#nGR+bj#osHHvE8?Xx4Z5LdOPp&?{_@lJ=8zq_SOF(e~eDPd-8-< z?=T2#VFWg(n3K3JByf2K^(kOm!w_(9|A~wurkSQ! z=gu1_G|GjGtutEm&25*bU#ait?wWSB?%GX*^}rea3u)@eks?P6X&i0bFpvP7kt3}i zEhI~t<#3Q*;FMxU3(1UTHVmZBkt6wzS}%>EjTr`#-^hjMJ8Hr+r> qXGOCb29n+X`Cl5j@YB)+c=nkEM3VZfFfAmF@j zcVG89<*0mIV0)Gq7?B zh=|K8Yw4NV+Pir82gfC4=2q0yH#N7kwRiSUoHS+Xv{`fKEm*jC`I>d>H*DFqeb?^2 z`wt#Eaq`r;^B1pNy?*=7{RdB8ynOxk-TSZKe*XGnC3)u#Fsze3T^vI)?!BFTJm|24 zfXj5AV+lS{MrzMxeE7^Hd0zalZ&RLBwfFQC{)~{n=hm0Jn7i(#mgliHjad^4lYBY6 zRVRBX9@`Y%`Dn+~&l3GU;d6r=E*%!I+;Dbz!(j*2B_R{pe_r{jyxJ$cHR#jk%)87J zq}pWd%WW96bhWmstT!w0E{dO0HR+6Ttk(Z^Jqp#IRQGhm7{qGnYVbbswwv+xgvjNk ziyUXV_&w#7aPOO`HSZfxptzYGULvZ`Wp{Hkp&s2E8FbdufHYwM6Ori)Fm@&UQJ;B%xo?g9%eTwmKzwC44$rj JF6*2UngComSWo}} literal 0 HcmV?d00001 diff --git a/src/components/Banner.vue b/src/components/Banner.vue index 9f402b1..33b6615 100644 --- a/src/components/Banner.vue +++ b/src/components/Banner.vue @@ -1,5 +1,16 @@ @@ -124,12 +146,107 @@ const onSearch = () => { align-items: center; justify-content: center; + .left-trans, + .middle, + .right-trans { + display: inline-block; + height: 556px; + } + + .left-trans { + width: 150px; + background: url("../assets/home/left-line.png") no-repeat top 60px left; + overflow: hidden; + + .animation-area { + position: relative; + margin-top: 60px; + height: 450px; + float: right; + + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + } + + .box-left { + margin-top: -40px; + margin-left: -40px; + animation: jump 2s ease-in-out 1s infinite alternate; + } + + .circle-area { + position: relative; + width: 91px; + height: 91px; + + .left-out-cicle { + position: absolute; + left: 0; + top: 0; + animation: clockwise 2.5s linear infinite; + } + + .left-inner-cicle { + width: 70px; + position: absolute; + left: 10px; + top: 11px; + animation: anticlockwise 2.5s linear infinite; + } + } + } + + .right-trans { + width: 150px; + background: url("../assets/home/right-line.png") no-repeat top 60px right; + overflow: hidden; + + .animation-area { + position: relative; + margin-top: 60px; + height: 450px; + float: left; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + } + + .box-right { + margin-right: -30px; + animation: jump 2s ease-in-out 0.1s infinite alternate; + } + + .circle-area { + position: relative; + width: 91px; + height: 91px; + + .right-out-cicle { + position: absolute; + left: 0; + top: 0; + animation: clockwise 2.5s linear infinite; + } + + .right-inner-cicle { + width: 70px; + position: absolute; + left: 10px; + top: 12px; + animation: anticlockwise 2.5s linear infinite; + } + } + } + .middle { height: 556px; position: relative; width: 1000px; flex-shrink: 0; - background: url("/assets/images/ball.png") center center no-repeat; + background: url("../assets/ball.png") center center no-repeat; .search-box { width: 700px; @@ -190,4 +307,32 @@ const onSearch = () => { } } } + +// 动画区 +@keyframes clockwise { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes anticlockwise { + 0% { + transform: rotate(360deg); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes jump { + from { + transform: translate(0, 0); + } + to { + transform: translate(0, 15px); + } +}