From f8f72494651774e2f4d33c9b618eb8b2fb21faeb Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Wed, 27 Dec 2023 21:48:44 +0800
Subject: [PATCH] update

---
 src/assets/css/home-style.css                 |   2 +
 src/assets/img/null.png                       | Bin 0 -> 10824 bytes
 src/components/home/HomeHeader.vue            |  91 +++-
 src/components/home/NavList.vue               |   2 +-
 src/components/home/SearchInput.vue           | 394 ++++++++++++++++++
 src/components/home/SearchResults.vue         |  85 ++++
 .../setting/layout/SettingHeader.vue          |   2 +
 7 files changed, 560 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/img/null.png
 create mode 100644 src/components/home/SearchInput.vue
 create mode 100644 src/components/home/SearchResults.vue

diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css
index 034751c..30c5e8d 100644
--- a/src/assets/css/home-style.css
+++ b/src/assets/css/home-style.css
@@ -180,6 +180,8 @@ body.light-mode .video-bg:before {
     }
 }
 .header-menu {
+    width: 734px;
+    overflow-x: scroll;
     display: flex;
     align-items: center;
 }
diff --git a/src/assets/img/null.png b/src/assets/img/null.png
new file mode 100644
index 0000000000000000000000000000000000000000..82ee032016dee4bb6da1dbffea380760f9f80a2b
GIT binary patch
literal 10824
zcmXYXby!s2_w^kbq=pbgKpcif8tHT>DM31w?oc`h6&V_a98w99{!r4P3_a2zAR#Fr
z-GcaD-|ugpXXgHK?>+a-J!h}I_gX9ZiH;ft850=*02CVP2z~I_|L;pe1pZc<RONvO
z$V+`SWuR)9c?$s801bqaL4eh6C}}2(VcK7*Q|a8Uq<4}Yg?M^i(Md%+(>sj#Ow>=9
zl`_XrcX{_>Rz#W#P%8=^-5);|Qi?EH0J--CP<YA)Hd_9<^QJ=5G)g@beU&ng)k~~%
z|N1M7PxvhAZ%$WkpSSFUS%>EehVC_Q<^_lQHrBBj6pt$wN2D`#J(fr#;-#pcRwPVv
z@iSm@DvTgwn>zU@_5@Otg`Y<BUF=CEn@3Q&%U39c0f1r0xAdLR#-~^OequD0#m@8*
z5K$v)+5V7C#EWd&sw@*%18=lTAorQlmH@B!o-j9bO>laLryh+TiiN7-ted=k6tI!p
zhID;Kad$FsXw*6#EtN{z;$&|Vd}aiGT}c3OoEjpZTxY6ka%KGYc=UcrEf^3|k92pw
zSRZ`U+t-(9x4{l9lOSaE!|;*U^4O;@!|{;jz%wq<{i}GC%+=ME=WM-m%5^1g9yk?v
z6f9o&IP=m32oQnEkBO34aLg04I@|~VA$Osjx`<#)%-7Q(dc{;xHu6WWQGG(kho}oW
z;HPmdcXmh)rZW;HA#|)gZN_VkwDPFNQ;!-;dD&f{603ucOd((d4*IQFy?~2SfDou+
zxqH{#I@fV7(Sb1O_HW@{5=I?j0MgeT%uH8_?W6~$@w*HW@OPzyV*g%bLDJ{XpL^m}
zA1U5fz)Na2AYe0|a%m`k`}VCzwkC_`%nTVD@GMR$9y6kdFnzEwayU>Eg_&VrSx3Oj
zhjIj7-e%jHUC~0wzND<WZOZjW8`tLH=H|9wAy<x*Lh_q``gK1vG!&2QGSFulBht4O
zh6n6$a&k_)FSMM_ywqTLNyLVak3aN^Et8;kX{1=`?Awe2$rCi(R6<0gc8Yze%3gd2
zQtL8R7U{p>J7W$}3@cmF#dl@kH~G(RwKu-?y5^U>P8}25b4K}FP(sF`7Twc2<$_9F
z+q7A5PsLB|6dl}SB%|$`+x@Pj2Zn|*GhNbvi6-KO5ysGd8iHj!eoM!^5Hx%tC2EaC
z{Vm04;I3f^*?R!x%p_m3(J&VtI`*+!-N6S33dI6$GeUqt=s1OJCd(YZk$r`DMe@dk
zPNf`ksY-DdAuEuuN})%W`xWPjhm3OG&QOU(EkTgStCEW*M%gN#MEL-kw?E45k04zU
zD!hEe`<iHYvzMLS8p9WMD#fCkuCA`<O4K>TfZ)LWr^$x<bkydq3RZUP_6K{;NaoO!
zvGd*ieTHW~JBZm~9D|u_b&hmqAVg$<kGxwP#jPmS5;w3i+RL%Jy6QRC5qg!+vhAmm
zmPd#Z-jFmE&y?CG)7}%rGJqS`dcy6+1s+Na69yL`LT>sMvQi7DPrX4Im=AhvY3ky^
z<xoR|dVK21t&n9TbDM$&qT0=HiA#}lUa0q4255st;R3I|S8WjiB<ewXz|u>AwA+gX
zCa=(ka56rHc_-U%JbiHxP7fWhb2p6vP+|^o&?jME4E+$-LEB&WBqA1XiCQ~U?v|FH
z=i#X{zFk6KQ$iD&MXe)Hj>V3c#HJ(1jS>^r&V|x2Js{byTZry_$<r78{_D~R1gV*M
zsgDRTqLkMz7daN6o-6siVNTbX2LZ>q3q3r{qxYtTbv#U1O^%3&;83FOfBw5B!M!aB
zC7)63kql@UqZxoM$GZOUHydgi=!!dc?#x0}#sJaq$;Jjz(Z5}0d^1Ou)<Jk|y_vg!
zSE`!(VhqYNarNRzBd<4;3LhCFXBi`#)c(M=rvQR}wf1-YKZPq2XuC(P0=V*@ar>vg
zOan!szB{|~a*t+D0pZ^3@zugiN&HF`EEUaIZi<<DBZsjRD{h81Ie^VUz#f1TMxSWp
zbk*BSh~~@twmQX0C1FOi-RDE3(iU_OQ7(~uDIMhyo4CtZ0+ZvSq#f$RueG^Z!-6pd
z)!;DU+3*3<T9&bXliP~p?yIN3!L#@fWj^9F$pl^Z0=`+l_IrTN<dK__!ehkwA$CY6
zy9(S8Z{^O;V6Y%t(J(!__DqbRw{t9Jq;|T@t*j`w7J#`&KIeXDk<oHO1+}K>J9NyN
z67Rj{0|HuiVFgt=v6eik!W)!80CMP^PWiE#!wrM0`vm?@3_ag%Z7r?quJvcbxcu5_
z>2{e^(j+=~J_4H|^Yd5@M1jPmw!peK@(a~(o?j><uBn0VBN68(yq#PH#6ioeX(}@i
z>}o{Fqr$O(+4KkIa52XTFkmiG7Xrlb9+gurx=c(=zY8BN=o?cfdwO{tgn^(HM=}*A
zjJp<a-6gF2-5hdx#O~TKR|0v~5G(LuYOCdSurUN4Q?L_ivI<*?T9ph7ZG~uZ#S;Rj
z_w``!*1TzWg9$Z^q28>mo6|bNm~hkbsV_SBUUSFX#AEiGFZB;P8A?s?`@BP5xrQ#C
zwh*!PG6ud5a2Tc>G+HJ!{WA6DIk$v}O;rIe?mE!by(;4x1E`asho}z&%P8>`T`*Ul
zbxz?SG(f+35~6bCX@?fV^+@Qzu#pc~A!VKsXNng$|KygOUHwT#`Gz^<;Ilb%LDn?~
z$t&BpQBmQOrSX2@`8>$Uozp%}4H#slzEM@-4hxHA9>>YZ(fZK-)AFe`+l=${ay~_o
zRp8Lg{FD_I<XAG0{W~$Fg4Qyn6U-WGF`~v89wchCH&X(?>#CmR*+yO6g+HV1A_cHN
zdgQ6PMDfX7lq_kI*SP9dXgWpk`CjPsC-?cVrI=D-Raj0`mMSLjo0-hV(uo*9P6$jS
z^10+2l&`%tKNMr+n=WAa8yR@Kp>aTTFY2`PYnwM`CDM_cZDj-k%+TA_E<W1;WAtyH
z{JUO8E*XwPQcqvYiX5lnB^&Jw!S+1E&Lu$cX>gqo`Cn3~y}99=tBB0Oe95Oba8W#J
z?<0&t_)UX~jEs2eSCQTjDgeHvy#X6=s%Tj3h!bspRaD;pR%}bxK@LE|R|CIHl681g
z&yn8OF%CZaCFRU1OY2AghVftSA#I~n8DZf==0K|Gf}i=AOTMf-_v-_zeM=f=H~{aK
zGZm~O*8AG}=w@tY=Deps;l)!Qe^O|>fs9|^mL{=!0{)Atju=yQY64fR<D+i%5WW@3
zv+dX86abV3q307HD-Qzs_*95W;nh~XsUX==y>PonDUduWiwkjQP`fv)+lUJ(YdG7H
zPg{HdV&wrH;yP=jgC4h|gODx7B`MqEV}~>YKfm^(3eJ}>o;ceb_O1yzUpQ19YGlM*
zru`YWVp4ozwRJPyV<%HLZBFeFsx<v+;sKv}kcodS_vl$OX=tACgWc^$I%HAJi%u$_
z>W5;Y3RX=cjt2-xiuye8WyKTa1SYF|ek@a#2c9~eN`Y}8!*3bwdoM<BbZi2J>wX$;
zywOY+D(Opy-fH4UqCyi~#bW(wld(l<!~&3*rm(UqXG>K@w;0sV$OPYcqa98p3S3if
z;-vHU1w-eU%iZa@&@Q1~RGOFCP}FVZO7?;;_5#do&SZEDeENqj^K^ZO?Rerv5#v~|
zy&jbWPEiHdAOymC*Y~dCI7z%piO>b^;^LxtVo9Wc`!__i+GnhCf9KpmgpMppEHFOg
z!DJW-%nc1sbYCB4QW@KMIx`X|Fu40<lhPqw=0-3fE)Lsq=})UjL_`Ebgd|)8icm_;
z;HSo$;jSP0CLes8x_G(sittv#1CeOm_aH2<MOPd?hW)l{9Wbq)(N#wyj8fJ+xDMe8
z%>#HyLHsU>iUx(Vv0*KIIC*y;&^3W=@A}NCS@`M!n4x84W%<JnAH)i)%8Jet&AUFe
zq}NkrZyUW$lqAOWE;F?pOm7~Qp?>KxTj`o-wbcX4`B9t{{eJAQMM?11E^l5@NK#O{
zm7_yVxQxz~<j+YBWNcqw-^hpyD+qWQ)Q995pTG*p%3v7#1weO~T3`3ybF5q_)k_yv
z&8Z~dKJw)+{7w!?JkCpmYk1&RqC|KM?f}rvI5rY^*SY+YfCRp2ozB|9JY7WXwu8WP
zM%D<Fg3pPk=bcpcI^Y4xEr@!Si>VRSX@dZ)Lo&g(gqykCxZ3Jqrt{{M9d}*Z7Na+P
z&vxTJ@C|$jSan%S{Q6d7+eV)V18VIC&^Ls)ZZqerDp^FJY_jra>U4{V5Z5P4#4J9;
zZz=BX=^JWA7jjF-VzO2Bwz~GIXlZGOV%7C5NfhIR(f6JV-<w-mcM&J=F1cTT{TA9}
z1n8awLzbg(*STyYVLiA;38wgbkJ;Mw%`Xaqis^#ZVF8s!!El&7zXm!AR$w<3#0=1R
zKTlTSXcRe?nx6BtyYHcvvO0L_j;Md=c{Q;UOsr1nZ&Z^NU(s;nv|b#LP`R$c2~c+i
z4u};~wDSBgrs4}W>>qc|7q0vwBxVzlTfE>bhFN$e-q!wawKE3w%c06n#X8J=0yWuL
z57VUW7T%>57Wj{M9m=z0fx9zx=%MMhiEB^V7xP0(YTLNBVCKTK|BzGN*`D>E1Yah}
zKjlYO1P#>0d`BRxD*4;+;1pLdNQz<4`S$(zRy;$F02SF%$Ug0aFFgb~QTHZvP};`|
z0<QeJfQE5MH7k!|NblL#vJolG&0}WRV;@Tu_#Je^^p;%l>~bJ}|MK$kifZ9~|K+mL
z3zZ7iBkpu~v_-2?F`R-xNhovkupX0{P~M+sR(Y2B{{8#;5TAv+iWYz5$js#6+fBSV
z)S{YLrDoRj>o@k8uq(z#`LZ{?xD~le3dD6Ay2k$=#f%{V&^E9_%eLJe2rXA@X*Z(+
zbdAXm{_ZWb`uBjT!J~X;hstIn+|HrK5S=eim~REoRfpVv*Ax^GaN)0+Az&%%xhNZW
z($-n<$eII|VJGLF?Pa0TmK)s$U>VsPja)V}U`B~_Y@J}8%uRG2g{aRT@NIEVHC#tH
zq$39d^&jzJd2)OtU@=$6z71x(cfWpO@6FWSTD3KL9;S_;`uaF0O`wk#MrlanAZ~m}
zNbM_<R$!D^m>|6!alAS5H&>OfHW#(p<gU1##%Ii0>o}5^!r=q}BqldX6RHfOH$(sd
z-OO;l!rv_I?1z6!bG7v7EYm$?L}NR^ONkdkj=!SkdtAN2Ie&9pCsP0YLV%~=z<~vI
zaUz+}t~N>1eZYeXh<A7+z24>2JH%M0Tw(K?&14X#30Wr5&gK~1Ltx!C&~CJRb};mV
zryDD1nMjQ8r|At1r3Hfy?id~WjcSM6Hy&Ti)zs87>`0py5<ESSl0oD*?>jsHj)HUA
zHS%j=Z;oZjl)TmBeO;V@o2Ra@Xg)$79(qG!GLy7!ta7rV)}AkvR%KT9$H!+DxTP%p
z`SWM~X!~JIfn#j9Nl9<XpLXitj|PosoT2^ocK51~1Q>rbtA;zRp&ZaaU46mV_Hj_r
z9Y-gkPe$c(E>2EAOR}U*ojGLOs0m&Wb}&L2M2|a`C}$mKM33E30om78Q!b4h8ZYK2
z-P%p<2bCoxB`^9_3*S?i9MZ!Evsa5t1HgPhI=w-D$q#Mk)(kfvy8!wt0XF=+X0{bD
zW!@NUkdZ0d#$6=KD(k6mVqAhhE-$zYjf#8M%$@cy7P8FeL-p>Pf8~y`8pgTHX=R^q
zoPXQEQ*XBl4?)B4HqbiQ*sQ!)`L<W0A*CjMBy@Z_J=Zp1C8oXc(BD`*{k0_dBaPh3
z$5GQWGyY!XMfp;Qh{-;64=zKno-*w2?nZx{DqX_^+aXyXAhCA+59|%!P9xm^ur7&M
z1@@c4TEy<hDy$@csMovg{;hCpv0lc3XY*pAe&r8iQYSb>I^oCnVbLWU1}`Ak^;;>%
z%YN-X1HnI5kyTS6)c|(=-JWRTpig^CNYe2hbq)k3kVnky)n(ma<%Vm+nejC~Sd1N-
zvP&jDF=F{ek8EO|w5-C_>AVpl&w#B=SDf%HEP~;6Z*rKhg+;*;3Dy-NqTx?@+@42C
zCU^f(b<aT=^rj8oJmlD?M;1vh-~)eR!ZtgkTxQa{IpQQ&<-`+gr{=#Ekq-mj(Pn6l
z@MasfGj{Rb?;ml={xZ<g<D$)Ez3nqb#kD^_p2x_0vcaMY^wqs_PV3iYdBkiq1@@7u
zw^Ue{$E$N?Gg+#VqEX!Xqrvxgg^{T6fT6WqZMvhEFn!A_*VOF-ndpa)5Hyp@mPf!^
zBH)Fp?YW{&Mr;TaNfJ0;a6<ps-v3hnd|RYnCEUU++BL433CJrOOZMC>Ep@+ZyC(i8
zT>J>=%18YS8<f84&jny_gTbB^k6OF=HHu8rGU@FXJ*fe<mGEBgkn|6<@=n2|Y+!iu
zN<7U9i=FDSL$PbOSJd}13ac9SK==0dJFU6!zdG#7KoI1o@V%$gl*K+0)X7*+-l8Tg
zX&~SpRD--)KQ^{PwCR<4MQNiGok4v?Z{|LLBp8@T?Q^Dhm}{IQM4rF1?0u#OlUAEx
zr>KnW;S%lqY&I{p-Solzfx93COba06p^_zk+rCte=e4lvE4&UP_LR&$bJxyyr76U0
zo9rvCsqyWpC;`3c0WDUQv13f2<p!BQZPi$BlHrl(<3&wC!<N;$bV~x3cc<^rK1-U(
z%oe8!DANBOJPqyjjpeu*9GUVdv#g?`$TzAN*eX7r+iDtI&;-0|8u_Fx>uhzB1;M|?
z@`T<P`LQ}6wrw_vHR}1rCows52ST{Ui;Mn#)Wy?Ovmnxcd`c9d(tm;<yr$6~OkYNS
z&1oPFq?>;0`=Vvrmk@Op(|ADKEJVJPi1Hk)cn+9=OjsMm-G}O<uk<wqA$F(RQ=zSX
zyXa@%F}Fm+yUeaOaP-V1@xpV&S|#OH;)?nV=I#Mk<<aV}H*`kK*XbD4t1kpD-Ax$)
zY(c0Op2ZbWutK3__^*2yC|~?fRZWe-$<k{IxWmZU6i!XhIipn}lK!1LMj!*5P1YQy
zhM+PU4QAg}LaOT=<2+4J0V>RWiv@QdK5bh~{|#YhXD?Gz6$i0vrLtu3Ce=ae=;3EG
zp`bdEhD;SiTJ`G@N_7WbicYl8Hv_ms`bY8SMu8IszWXDO_aB!`y(gGvE68`AdkH~t
z51La_#s5d|UL29bB!sXNmz@N>XIY&H%AEKp=!zj33}Fn&CM-8^*$Dm8V|<MG^3j)S
zB9K-Xd4&C9r6GF$305KYZW0hxSTZXo8>}P(k;D)<@Gf?v4=j%G80{*L{z=QEWC6g^
za~JEPUEWlI<4U?LS0Ya2wHL_PnA{EP+p8k<0e$zHpwKLw<z?)WjbYSDvrKDH`(`oo
zxFvH+kY!EUb=@QUVvA!Vs>nLqT3nA+>d_OYxKb_cjg?<nETIC6lSSt7^cd5s{QL?=
zHD#>+Ya`t>ZC59W?%o(0tQqayoq5#979GR5dATApmUNqnpEi4xz$Q&Hck_QMNs^lq
zh$4-XEp5LH_p+h0u8gkUOl!WEBDd4k9cy)a884ecpG@?@HDV<E{k=1J2Nae?Q6Hnd
z4W+c~b1coGcpN$=&8}ABe&zNvUx&Y=i{jae7gpVQ5zGg5u9YuM+n}jyc+tFD;lPkF
zUtlX#^76^Gv>4{|pm(!&<W9>wir&myz;bSG)b(HP-@kveehNHx@STQf-~H+o>>S%*
z(-RY=qowt|>eq2=^v@7`7W%+OV)rLee@I^~L;nHzaa9rxSo>p4>6iIQUVZ)new4wT
zSDyjsSI_Kdpvj$m-k?0e#Qz^M<TU8d4-NE3S$xR5w*M3aqFpjC^D7#Ro#`syQ*<Aw
zpaM!iP>SZeRQ_rCkU%wO^^b=tVJqOxmlMsmuT1;Z7nv$VuB(RqJ1rzA?v-Qvb4)qI
z(iZ0oyu)J??fh<b<s4rSItt>c)mzkD9JYjZEa+Z~OK-QmjHSy@y}sosu<*fPBk3|U
zh=EPovDRBqr*yZPIN=vnDaV!@`X_1i!m3^8Cpf$XZ4;{lm%bC?P8dx41I+NR<@i0I
zi!1tPTG?A!>Q-d)PmP%}^WMyGVx+NCi>2~!{ARI$kE$Q^C+?x1Q5v_8I*IMI+7G37
zI!S+c@7pwMqKhbTojXvPw*`{j%U#w5MR33Vk1M#TU?wi%vvPj4D<sa7DXbbgWqx8j
z%2=rVd4sOnP)hPD`J7R)e$}G*SqjuYI`S594_5H<Sm(co^ALBM5o_vX&XV^GW5MKX
zG)=#SRQhgduQ<m+k7?2<Eb~l05A%U<u#dgK?)O;gJ=!rEZ9)q7G$OOYO1JvnOb<=`
zc6@*}Mf-PaY38NI^xR!BUry&-kk-Nw1L1}nqv<(Qi3zJ0;TCUp4f@tYKl~)dIf$GO
zlC2!EZT?;yb#`0d*Q1k*!GxnD{m8yb0?Y_R8Odog1np7R5rZn>C6tds$(L26M9Y$Q
zGd#8#*23~YVR^Uv4vocqkH*i)K<+k3TC{vo6#k>6;jAvuce0{GSarNg<97ot64U8W
zIb}t<)V&l)2&DwmzSPAJ-1wq)zyqlB^+S<5e@p;yKnZIRddbd8V!6iu`&D7j8(At~
zv2g1}@(U*04hn$Fc@2V`fhLm~JiXlfx0i^Z9Aj-|1WE_XKYl#dSl?-=FsZQ_!(y=?
z(OYR?2xh;t>r@D&f~=7ZtbW|`vbJ9OoGszWIx#t*Y+gNcFBKkL^!y3ELqbKv@aO55
z5V)nvn(U!^{G`AbN9~bBueu9SymRP#2I8-4d-st}R9FS}0`}U3w70{;S;M-~KlQTw
zK1^)<LoYKmj^rON5hq_{Up1EPESr)jQ8P=+%2tSP4a0BH9GaBU%Se3I0h}6<l9ve@
zZlmq>@$468urqLBPfgIsrEzo%(Pn?Xx1g|4V;g0W8XyP;)^iQCdX}g*4=!btk$p3Z
z!RgK6kEV5ewh?9QkoYV7E|yyi0<t09Zz<*sJXo@Yd)w#%15!Bjut+kYdZ)jQ;`3k{
z9~I-hd)8!t8h+Q>K0D-{Q=^r4R68N?3BT*%<-*cZr~AYQ?bhQHu9yN^%%vGeVk0#9
z{J;8tZR&rnGXjB$f$vmV9pt;s_~sFt=(}vCx2pJinDzylv*mlt_yRZD(!rem3N_=D
z30rXmYtPINI&>=d8t5D*g3tO6w-xDX8%F!Z;{CW_9-3%7b7}(X*wp|;H(yLa9p=(T
zo5ewX*6iwmb}oNCC@fGw8$3uG6A}^x#x~$N0=gbZl1H|2ML&Zcr4Q?j)2019{8*R}
zw0wPeY{&rMu7zE9UFQb!=YYy|H7-&`A|UdPmCMP;ckQ{Db+a3pcvag+T-i-R<btZ$
zI{NG9BYAREEtebF`=j9E?<Bo5{APtfG(Y`yiPtX-9Q@(W&3&A5{`S3LFj!s}PPw^P
zu^0TQqMC>j87K-032F~`_bJixad?SEBYqc!61BwwZeoIwJzPQW{@?0ob^GVpk&Qdr
zJOHyMLc-p;kR_f0SyYY!5J+@0T|>;9=O076uC=KN5>sBcSa3aLqBty|eb%pQy+L`(
z`F<_BGYeA<*8SEQJLe}z0o9nlNe!BT_twlBR-1yr?zYb%t(_m)e_QjDS(!eT*Cs9*
zepc3Hzv2yQXgoOn%kO`6rlMybT}vRYRnc&3HH0B2ClGK88u-;M+x9eo9a_3VThFBI
z$@hOv?V&A@S&b1?sett|mORK;-HY*4pa_^9*IM6h3i?$#<&t=ZiHT+=>U+;!MFbjr
zgKCJ=av!B~5|F*^VXGqwk<n<bV#S3-Hk`%bUiq_~kWpuJk;1H@<zOT{LYbTwe~i&}
zr4Ty)ufcD$B!StO3i{c#i=-NWZp8_2cehL)x5qHr!f$)+xyt9imX8hm!v`(R$(-Bz
z;(H1Jo>9jdmu>&!2x8vll6M$GZR0HFV@@6a$x12F>Q~!~`n)q!uQ8yy@rNpZ;gmAz
z#6I*EAZy0w1SwaS$a@5Lip<pJH{MqB;obXut~bq>^L_J@y>I(4Wo&G0J<xi%gl|X&
zWb)JJSb6E)SfHik<5}@xEkUTKMgp3{%%YlYGaVzirCYC-KY`2-h!~6RDc;Cqv*X8Y
z-`j)F1t?!V^G3sCp@*bLLPWsIx)iMne~a~wExmAW2qiG=^AmC3?^z^ZH(P5@wY9U8
zBDlCD<71E;?Nb}?b4s(x<$3iZ?kJXOP}Si^iJIUj*j9#Nqz!OB)XR)Qm4lR2Br1^@
zX$W|Esa}RAhdTNAoXE~pHwpKOzdpJLs(R_33oVA^67A{A0J;k1a#d09Sg1r@!OF^d
z8)+{9B6u362W>!3Jj4xh(edbYZVmKZnc0Wh^dCu(TKoTfOCVJ8vdF@0O9GN*<i#iz
zVOWQF!m6js9LP8frNC#GNn8Z|jK8iuApbwn@QL;j58lIuc$dTV)ao^v!KNBzM2$f^
z6zYkirSBj|YR#k}oE;q?gWkAny02@#MQK!P!6@#OsFK&aGjcYd>KkHbXIEaB<6cfr
zl;lGX?If2<Y)ZWqt<D)XgnrA4ju>SP5I=IW-zbL%L{uwfk|MQs{|jk@n-Ibt8w}Vp
z*>gKL3LW2-iTp0yi&|>E=xj}GK%6|xh%wy;nM=cRqX%s}Rjq55SYK*0B4*0&gDDiZ
z6nBhd<_#-QrT(<f9ao@E@l^}ouB<|juF}S#CM+qR*y(q2vY()6=c3uw;cXctJ;3%h
zS-}4P^Op-v-m3x`ga1aShJs2lLt?kaY$NSh`!HQ^=4<F-JMMa$pT(zG3G3MBU2&R<
zo3xOCAP5o)ev&)f=yU#HiKaeW#a*9mnG4v)1t`TZd}z5iVEi@d^aFr?)Dw{e0MfI6
zUI54oiv^9-MC!2}{r}{2x{`l8`fQt5b&4LZPtQ4S+Kd;xX#Cd|3EnS|xGH`q-KwN$
zQ@PM+0|t*>>YIcYJXU!G(&84k71zd|d@>W5>7X%q?hEQVlCVK~4~Kh^I=TA?=Q0y?
z?h1ngj-A^J1Rx)J^G&SB%yjr!=ktwYmxj5@t;)36pub7d2<JlnvUy%Ywyl{j1J>}}
z<Q&qNZ}<H5zsW?a(@R#;cKc|uSGCeO$-Ly@Wy=;;6;OVx3nKsmdndCy)k+}T6l`1A
zCaaJZ8PX}0@O$?QMjK@p>R&P1@&n`-d$xMl*b@1KRoa*pg<Q{BAo(t>unV87)JSC?
zj3(6YmZAlX&xVncJdyv0`&n&E{GVvb4Uj16t<wr#td4x{qUBwvbq;($6smWs&YAey
zn>qj2qqiEY3wTM~F;!#oOd`jPuh=fYR=&4Hr}n^Rqt4ut!Lf8-`Kh!bLftkl6W)nc
zc@`yo8=B9~!vJ!Njt)05=~4STSPuZTb1DOqXHQuD`}ip|M6V;zEL3{jS{WheTd`x|
zt_r+38B<&Gzq!7gi3x12Tbtz#OGWMZ#xtsn`D08gtVJ0dZmJsmd^gBgNLmTl?ouB{
zXUX4RIbV_NFlMohL+E7G6GYOJCjFzlQa*VuRejaYH2-i1qTUjNvP^n&Rk6O;b3@Jq
z9Js-LADt+u=$(W(Se3X>I4;Iwh)|lW^kWSFYh@>V9peHyf&NFfdbWWuXsO4a`qlZE
zuwDTD3O+LBIUzq_TxC>VIolTaa)>0nmr-N(nb_l#E&l~V!25893+B?iQf*SR5)rSu
z`gnIc=Q;V~)^T^vp*TDQ0ong_<<|wZNj_p;S`j?WV+zTUKg5^>Yw{gv*aU>T^;z0t
zP;kefdGy4=fmIvkQpB|~_Sk?+SoCjb?>~h$8<lzf;paT4KGweQ(ON`H8)*nR8j7d`
z7n;-redJVBn?aVK##U6lL6h)w=hM|H2*eTm2~V793i%*x#<ztXI(p5nCUK(8Y+tJW
ziF@&-To!p%H&P_8#KE3q#^1&!4qE+4gQw#EG(dXK5C3$2d(?%jVbngSd<F{sSZf|^
zQ2wb5UEWJN^}9C$d6;RlLsZV;xHtgS27{(g#bZPQAuE_*E9~NCN<>V&KjS2}Mt}Ka
zmwT=KESD77WVQ2n9OQIwQ&Ld;smaX)>scAmtNzmfQK*#Zxl5n$tx!<uB#gEbAIvpF
zVmLZ}%_1g6G|`%KKMhLFK}|G8T06@K|H(te@x+L=dgH5gpT|3HaZ(23YHTY!rkobU
zS@Y5Ae?A|LdT8FZBnEX`8m2zAt_YdT%e3ja@+@aI?Zh)V26MQ>O=`m#y};|I4;8-%
zUBh7=-<775LFP)~y<t}4zm^Fh)l@E`(2!)CimG>Hj}q7_^Wjj`PYQ^2?!oOhOh5G9
z!maXSagL_0hJmxip7wYkj4<3^DQ<E0mhhD+sR6S(0^8Vn;BM6C==Q)`WOpJ$*P$cu
zj_ulm?pRFgH-lnU_ZNFj#sfcuPUhhnI*fPjB-8m|G)?~z3??)L5f&!0l677@&-tQ+
zZM8Cke9GMB=IZ|j!;Wh3oLe)aK{Xv+1-GKyD}4xmH{S!Yruz%^&J+2Z;s#*hoez(0
z+io?vQ_Te<4NGcHB?S3>w+FgI{NMgUW9q&|gG;WEd0qXFRu++$7vOtaRCY{H{H~mG
z?d!?pDFA(6$bGb{_JSB@C42gTuP?$9as7`C-9hl<gWB=zZ>i$Byf7hM&yNI*iybHS
zSH5;E*;_txkR%_D<SXBr%R|$!oIKr*XK{f90BSeA{CKnnkvia1?F4#Q;J;kvi;CP+
zxv4&mzzgytpI>}G$$208WLHepnzKMW7uE7(Uk*PBPYG5badv*5FAYxc_4HUy!Bm%h
z=sg}9HmOA!&eqexo0}UxP;Tl>e=B$@ryESfJbsvmha&kk>*xA=IsCp{)W>1Erx?3|
zzgBdL%*WBX^wz`tXvleUhu;0`md~Fa&sXQ+tGA$0^asRbBGu`fcIYPNZ(OJ0l+b~P
zCC)sccY<+tG1~L3>%jb`-)_v+=j;%UX`kJ9n(cW6>SQ#exa$a-oGObGUh5&<-G$ck
z%C9*gA$W+Kk&Um}jnjwsM@v1k9<Thu;_wpg9Bz*G&&7Rmgurr>2ga6`1o<>f_gc+D
zJsGaxu9X%--=Bv3%R}Ne{u@k~C-ZlRe`|scmnAXUJS1i9!^-gq0P{<ai9{KRb~Inp
zEctq2frbx6f}~PslEMaI|NlHUBtk8x-CiXXO!mYk+%|wCq2jm(*TxuwkN5Wn(cBl#
zpt&FrKzGcvRbWX{$^yCe?*d+7%zed?8+xQ4;d$cVGa7|eDG$&uz^b=YKU`p~Qwi%Y
za?Fu6h`OM0NGCzrM_Nsxxaw&r4fLTFMU~&ap43sY6}Z{PVexJ!;XbxHNKmyo&caFF
zA`1^pn)BB8`aO*B>;`8M`hp}+Cc~&%#EqdSB6#ztnd>fnogoWocoK1Prnv`+cKuL3
zD}5Gt)!_H}6`^aamQ{+e;=NNxIYrL2)D5lF2N~BsJD1qL%-aKxhVSfvCEO+-i)Hec
z-^+52fJkYDn93>q$y$Ye+Avd6T~AANbhNKZk=fq&Yn&cv-_j~GQ~t|uR{v8g`ZfvB
zhx<<L<2xjwK{r@aQ{!u@eB<M*%N&_q2VlwsL2kq*nh#?QdDc-V;HcRkhaO{q3UU>k
z))hak`UAT2R9?P*{W|t;{9BWw!4V5{L-@PzhM=}n_D`d-;F@$RH-;4TpqOk4*zo8~
z4O!*qiR5=jK>45?3!2q{|C!acggD0Q2A!Q(SV;eLHuX6sS5TtyR?KZ}ZFe@eXJI>x
zM!-N>X{rFlftRePg7DYsAAHCNeKc+@n4^;v7A8UR>h1?3n||DLN?Pzr;S0@l{w;-r
zF8q8f4sD<x$B{^YeDvbK6FtL%hVL*BEGpnnuK(g?E{lv`+|@H#hCl=0P<GonAcq}u
zNdidXK?%i<JoA?^1fO*rZVUZFU~@q<Y1E={Tx)iHiMAw6qKUE`76qGO3p#?&Fw)8x
z)KRb=Se|qK&5aT5#n~!RtMf*M{v|?=!8LmQcIU*6a_<h_ttVq!-)eCwB^C#rkHo~4
zG|jT0Pmf1;#!yr4Bj|~glXOb!Uv~zrjDamxX4^{O$*s>y<p=>?&<!~_;X9>I<pQ3h
zqBP@p5eWJs_4BIA(}SLXCxg63d6S1GK!fFxk7dK;Yw+aw>(@rn7I{QB3YSNn8_Ig0
SN<eEUprN9Js8W9R>i+?5v{W7d

literal 0
HcmV?d00001

diff --git a/src/components/home/HomeHeader.vue b/src/components/home/HomeHeader.vue
index e0bf92a..a5ba105 100644
--- a/src/components/home/HomeHeader.vue
+++ b/src/components/home/HomeHeader.vue
@@ -6,17 +6,36 @@
                    v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
       </router-link>
     </div>
-    <div class="search-bar">
-      <input type="text" placeholder="Search">
+<!--    <div class="search-bar">-->
+<!--      <input  type="text" placeholder="Search">-->
+<!--    </div>-->
+    <el-dialog
+        class="dialog"
+        center
+        :show-close="false"
+        :visible.sync="searchDialog"
+        width="360px"
+        append-to-body
+        :close-on-click-modal="true" >
+    <div style="display: flex;align-items: center">
+      <SearchInput></SearchInput>
     </div>
+    </el-dialog>
     <div class="header-profile">
+
+      <el-tooltip class="item" effect="dark" content="搜索" placement="bottom">
+        <div class="search-div">
+          <i class="search el-icon-search" @click="openSearchDialog"></i>
+        </div>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="公告" placement="bottom">
       <div class="notification">
         <span class="notification-number">3</span>
         <div class="notice-div">
           <i class="notice el-icon-message-solid"></i>
         </div>
-
       </div>
+      </el-tooltip>
       <el-tooltip class="item" effect="dark" content="上传书签" placement="bottom">
         <div class="upload-div" @click="upload">
           <i class="upload el-icon-upload"></i>
@@ -253,11 +272,11 @@ import $ from 'jquery'
 import Vue from "vue";
 import axios from "axios";
 import {mapMutations} from "vuex";
-// import {getUserIP}  from '@/utils/getIp'
+import SearchInput from "@/components/home/SearchInput.vue";
 
 export default {
   name: "HomeHeader",
-  components: {},
+  components: {SearchInput},
   data() {
     return {
       visible: false,
@@ -319,13 +338,14 @@ export default {
       },
       userToken: '',
       isLogin: true,
-      ip:'',
+      searchDialog:false,
+
     }
   },
   mounted() {
     this.isLogin = !localStorage.getItem("Authorization");
     this.toggleActive();
-    this.reacherBarFun();
+    // this.reacherBarFun();
     this.changeImg();
   },
   created() {
@@ -333,6 +353,20 @@ export default {
   computed: {},
   methods: {
     ...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
+    openSearchDialog(){
+      if(localStorage.getItem('userId') && localStorage.getItem('Authorization')){
+        this.searchDialog=true;
+      }else{
+        Vue.prototype.$notify.info({
+          title: '提示',
+          message: "登录状态失效，请重新登录！",
+          offset: 0
+        });
+      }
+
+    },
+
+
 
     upload(){
       if(localStorage.getItem('Authorization')&&localStorage.getItem('userId')){
@@ -340,7 +374,7 @@ export default {
           path:'/importExport',
         })
       }else {
-        Vue.prototype.$notify.error({
+        Vue.prototype.$notify.info({
           title: '错误',
           message: "登录状态失效，请重新登录！",
           offset: 0
@@ -412,13 +446,13 @@ export default {
       });
     },
     // 搜索框
-    reacherBarFun() {
-      $(".search-bar input").focus(function () {
-        $(".header").addClass("wide");
-      }).blur(function () {
-        $(".header").removeClass("wide");
-      });
-    },
+    // reacherBarFun() {
+    //   $(".search-bar input").focus(function () {
+    //     $(".header").addClass("wide");
+    //   }).blur(function () {
+    //     $(".header").removeClass("wide");
+    //   });
+    // },
     // 显示密码
     showPass() {
       if (this.passwordVisible === "text") {
@@ -696,6 +730,15 @@ export default {
 }
 </script>
 <style scoped>
+
+::v-deep .el-dialog{
+  background: transparent;
+  border-color: transparent;
+  box-shadow: transparent;
+}
+::v-deep .el-dialog__header{
+  display: none;
+}
 .dialog {
   backdrop-filter: blur(20px);
   color: var(--theme-color);
@@ -776,4 +819,22 @@ export default {
 .avatar-div:hover {
   border: 2px solid var(--theme-color);
 }
+.search {
+  font-size: 25px;
+  font-weight: bold;
+  color: var(--theme-color);
+}
+.search-div {
+  border-radius: 50px;
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search-div:hover {
+  border: 2px solid var(--theme-color);
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/home/NavList.vue b/src/components/home/NavList.vue
index 0b8ad29..b957f7c 100644
--- a/src/components/home/NavList.vue
+++ b/src/components/home/NavList.vue
@@ -30,7 +30,7 @@
 <!--          </div>-->
         </div>
         <i @click="openShowQR(nav.urlId)" class="qr el-icon-s-grid"></i>
-      <el-dialog
+        <el-dialog
           :title="'【'+nav.name+'】'+'手机二维码'"
           :visible.sync="dialogVisible"
           :show-close="true"
diff --git a/src/components/home/SearchInput.vue b/src/components/home/SearchInput.vue
new file mode 100644
index 0000000..a202be2
--- /dev/null
+++ b/src/components/home/SearchInput.vue
@@ -0,0 +1,394 @@
+<template>
+    <div class="search-item">
+        <el-popover
+                placement="bottom"
+                width="300"
+                ref="popover"
+                trigger="focus"
+                :visible-arrow="false"
+                style="padding-top: 0"
+                v-model="visible"
+                >
+            <div class="search-content">
+                <div class="search-his">
+                    <div>
+                        <span class="title">热搜榜</span>
+<!--                        <span class="clear" @click="clearHistory" v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>-->
+                    </div>
+                    <div v-if="hotSearchKeyWords.length===0" v-show="isShowClearHistory">
+                        <el-tag
+                            :v-if="hotSearchKeyWords.length!==0"
+                            v-for="(tag,index) in hotSearchKeyWords"
+                            :key="index"
+                            size="small"
+                            closable
+                            @close="handleClose(tag)"
+                            style="margin-right: 10px; margin-top: 10px; cursor: pointer"
+                            @click="handleSearch(tag)"
+                        >
+                            {{ tag }}
+                        </el-tag>
+                    </div>
+                    <div v-if="hotSearchKeyWords.length===0" v-show="isShowClearHistory">
+                      <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    </div>
+                    <div
+                        v-show="!isShowClearHistory">
+                        <span style="font-size: 15px">你还没有登录哦~</span>
+                    </div>
+
+                </div>
+                <div class="search-his">
+                    <div>
+                        <span class="title">搜索历史</span>
+                        <span class="clear" @click="clearHistory" v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>
+                    </div>
+                    <div v-if="historySearch.length===0" v-show="isShowClearHistory">
+                        <el-tag
+                            :v-if="historySearch.length!==0"
+                            v-for="(tag,index) in historySearch"
+                            :key="index"
+                            size="small"
+                            closable
+                            @close="handleClose(tag)"
+                            style="margin-right: 10px; margin-top: 10px; cursor: pointer"
+                            @click="handleSearch(tag)"
+                        >
+                            {{ tag }}
+                        </el-tag>
+                    </div>
+                    <div v-if="historySearch.length===0" v-show="isShowClearHistory">
+                      <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    </div>
+                    <div
+                        v-show="!isShowClearHistory">
+                        <span style="color: var(--theme-color);font-size: 15px">你还没有登录哦~</span>
+                    </div>
+
+                </div>
+                <div style="margin-top: 10px">
+                    <div style="display: flex;flex-direction: row;justify-content: space-between">
+                        <span class="title">搜索结果: {{searchResults.length}} 条</span>
+                        <span class="clear" @click="clearSearchResults"><i class="el-icon-circle-close"></i>清空</span>
+                    </div>
+                    <div  style="max-height: 300px;overflow-y: scroll">
+                        <el-scrollbar  v-show="searchResults.length!==0">
+                            <div  v-for="(item,index) in searchResults" :key="index">
+                               <SearchResults :search-results="item"></SearchResults>
+                            </div>
+                        </el-scrollbar>
+                        <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    </div>
+
+                </div>
+            </div>
+
+
+        </el-popover>
+
+
+
+        <el-input
+                size="medium"
+                :placeholder="tipsWord"
+                style="width: 310px"
+                clearable
+                v-popover:popover
+                @keyup.enter.native="searchByInput"
+                v-model="search">
+            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchByInput"></i>
+        </el-input>
+    </div>
+</template>
+
+
+<script>
+import axios from "axios";
+import Vue from "vue";
+import SearchResults from "@/components/home/SearchResults.vue";
+
+
+
+export default {
+    components: {SearchResults},
+    data() {
+        return {
+
+            visible: false,
+            isMouseOver: false,
+            search: '',
+            tipsWord: '',
+            historySearch: [],
+            searchResults:[],
+            update:true,
+
+            hotSearchKeyWords:[],
+
+        }
+    },
+
+    methods: {
+      isShowClearHistory(){
+        return !!(localStorage.getItem('Authorization') && localStorage.getItem('userId'));
+      },
+        handleSearch(word) {
+            this.search = word
+            this.searchByInput()
+        },
+        clearSearchResults(){
+          this.searchResults=[];
+        },
+        clearHistory() {
+            // var that=this;
+            // axios({
+            //     method: 'post',
+            //     // 请求的地址
+            //     url: 'http://localhost:8082/helloGithub_war_exploded/deleteAllLabel',
+            //     // URL 中的查询参数
+            //     params: {
+            //     }
+            // }).then((res)=>{
+            //     if (res.data.code === 200) {
+            //         Vue.prototype.$notify({
+            //             title: '成功',
+            //             message: ('i', {style: 'color: teal'}, res.data.msg),
+            //             type: 'success',
+            //             offset: 50
+            //         });
+            //         setTimeout(()=>{
+            //             that.gethistorySearch();
+            //         })
+            //     } else {
+            //         Vue.prototype.$notify.error({
+            //             title: '错误',
+            //             message: res.data.msg,
+            //             offset: 50
+            //         });
+            //     }
+            // }).catch((error)=>{
+            //     Vue.prototype.$notify.error({
+            //         title: '错误',
+            //         message: error,
+            //         offset: 50
+            //     });
+            // })
+        },
+        // searchRequest() {
+        //     const params = {
+        //         word: this.search || this.tipsWord
+        //     }
+        //     const queryString = new URLSearchParams(params).toString();
+        //     const url = `${window.location.origin}/video/search?${queryString}`;
+        //     window.open(url, '_blank');
+        // },
+        gethistorySearch(){
+            // var that=this;
+            // axios({
+            //     method: 'post',
+            //     // 请求的地址
+            //     url: 'http://localhost:8082/helloGithub_war_exploded/selectUserLabel',
+            //     // URL 中的查询参数
+            //     params: {
+            //     }
+            // }).then((res)=>{
+            //     that.historySearch=res.data;
+            //
+            // }).catch((error)=>{
+            //     Vue.prototype.$notify.error({
+            //         title: '错误',
+            //         message: error,
+            //         offset: 50
+            //     });
+            // })
+        },
+        handleClose(tag){
+            // var that=this;
+            // axios({
+            //     method: 'post',
+            //     // 请求的地址
+            //     url: 'http://localhost:8082/helloGithub_war_exploded/deletelabel',
+            //     // URL 中的查询参数
+            //     params: {
+            //         tag:tag
+            //     }
+            // }).then((res)=>{
+            //     if(res.data.code===200){
+            //         Vue.prototype.$notify({
+            //             title: '成功',
+            //             message: ('i', {style: 'color: teal'}, res.data.msg),
+            //             type: 'success',
+            //             offset: 50
+            //         });
+            //         setTimeout(()=>{
+            //             that.gethistorySearch();
+            //         })
+            //     }else{
+            //         Vue.prototype.$notify.error({
+            //             title: '错误',
+            //             message: res.data.msg,
+            //             offset: 50
+            //         });
+            //     }
+            // }).catch((error)=>{
+            //     Vue.prototype.$notify.error({
+            //         title: '错误',
+            //         message: error,
+            //         offset: 50
+            //     });
+            // })
+        },
+        searchByInput(){
+            var that=this;
+            if(localStorage.getItem('userId')&& localStorage.getItem('Authorization') ){
+              if(this.search!==''){
+                axios({
+                  method: 'post',
+                  // 请求的地址
+                  url: '/api/Search/searchByInput',
+                  // URL 中的查询参数
+                  params: {
+                    searchKey:this.search,
+                    userId:localStorage.getItem('userId')
+                  }
+                }).then((res)=>{
+                  if(res.data.code!==200){
+                    Vue.prototype.$notify.error({
+                      title: '错误',
+                      message: "查询失败！",
+                      offset: 0
+                    });
+                    that.reload()
+                  }else{
+                    Vue.prototype.$notify({
+                      title: '成功',
+                      message: ('i', {style: 'color: teal'}, "查询成功"),
+                      type:"success",
+                      offset: 50
+                    });
+                    that.searchResults=res.data.data;
+                    setTimeout(() => {
+                      that.visible = true;
+                      that.gethistorySearch();
+                    }, 200);
+                  }
+                }).catch((error)=>{
+                  Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: error,
+                    offset: 50
+                  });
+                })
+              }else{
+                Vue.prototype.$notify.info({
+                  title: '提示',
+                  message: '请输入搜索内容',
+                  offset: 50
+                });
+              }
+            }else{
+              Vue.prototype.$notify.info({
+                title: '提示',
+                message: "登录状态失效，请重新登录！",
+                offset: 0
+              });
+            }
+
+
+
+        },
+        reload() {
+            // 移除组件
+            this.update = false
+            // 在组件移除后，重新渲染组件
+            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
+            this.$nextTick(() => {
+                this.update = true
+            })
+        }
+    },
+    mounted() {
+        this.tipsWord = "搜索书签";
+        this.gethistorySearch();
+
+    },
+
+};
+</script>
+
+<style scoped>
+.search-item ::v-deep .el-input .el-input__inner {
+    border-radius: 8px !important;
+}
+
+
+.search-content span.title {
+    display: inline-block;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.search-content .search-his span.clear {
+    float: right;
+    cursor: pointer;
+}
+
+.search-content .search-his span.clear:hover {
+    color: #ec0014;
+}
+.clear{
+    cursor: pointer;
+}
+.clear:hover{
+    color: #ec0014;
+}
+.search-content .mt {
+    margin-top: 10px;
+}
+
+.search-content .search-hot {
+    width: 100%;
+}
+
+.search-content .search-hot ul.hot-list {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    flex-wrap: wrap;
+    margin-top: 5px;
+    list-style: none;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item {
+    width: 50%;
+    height: 30px;
+    font-size: 15px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span:first-child {
+    width: 10%;
+    color: #999999;
+    text-align: center;
+    display: inline-block;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span:last-child {
+    margin-left: 5px;
+    width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span.top {
+    color: #EA322BFF;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item:hover {
+    background-color: #f2f2f2;
+}
+
+</style>
+
diff --git a/src/components/home/SearchResults.vue b/src/components/home/SearchResults.vue
new file mode 100644
index 0000000..8625c16
--- /dev/null
+++ b/src/components/home/SearchResults.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="main" >
+    <div style="display: flex;align-items: center;">
+      <el-image style="width: 30px" :src="searchResults.icon">
+        <div slot="error" class="image-slot">
+          <img style="width: 28px" src="@/assets/img/null.png">
+        </div>
+      </el-image>
+    </div>
+    <div style="display: flex;margin-left: 10px;flex-direction: row;align-items: center;width: 200px">
+      <el-tooltip v-if="searchResults.name" class="item" effect="dark" :content="searchResults.name" placement="top">
+      <span style="font-size: 18px;font-weight: bold;overflow-x: scroll;width: 200px;white-space: nowrap;">
+        {{ searchResults.name }}
+      </span>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="详情" placement="right" @click="goToDetail(searchResults.id)">
+        <i style="margin-left: 10px" class="card-icon el-icon-d-arrow-right"></i>
+      </el-tooltip>
+      <el-tooltip effect="dark" :content="'【'+searchResults.name+'】'+'手机二维码'" placement="bottom">
+        <i style="margin-left: 10px" class="qr el-icon-s-grid"></i>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "SearchResults",
+  props: {
+    searchResults: Object,
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {},
+  methods: {
+    goToDetail(id){
+      if(id){
+          let pathInfo = this.$router.resolve({
+            path: '/nav',
+            query: {
+              uid: id,
+            }
+          })
+          window.open(pathInfo.href, '_self');
+        } else {
+          return false;
+        }
+    },
+  }
+
+}
+</script>
+<style scoped>
+.main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 270px;
+  background-color: var(--content-bg);
+  border-radius: 14px;
+  border: 1px solid var(--theme-bg-color);
+  padding: 10px;
+  cursor: pointer;
+  transition: 0.3s ease;
+  margin-top: 10px;
+}
+.card-icon {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.card-icon:hover {
+  color: #5ddcff;
+}
+
+.qr:hover {
+  color: #5ddcff;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/setting/layout/SettingHeader.vue b/src/components/setting/layout/SettingHeader.vue
index 12cbb08..989c662 100644
--- a/src/components/setting/layout/SettingHeader.vue
+++ b/src/components/setting/layout/SettingHeader.vue
@@ -127,6 +127,7 @@ export default {
   font-weight: bold;
   color: var(--theme-color);
 }
+
 .upload-div {
   border-radius: 50px;
   width: 32px;
@@ -141,6 +142,7 @@ export default {
   border: 2px solid var(--theme-color);
   cursor: pointer;
 }
+
 .notice-div {
   border-radius: 50px;
   width: 32px;