From cc69851f67998caac070ab9585de583d95711c6d Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Mon, 5 Dec 2022 16:01:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/scrollBar.png               | Bin 0 -> 339 bytes
 src/assets/images/scrollHand.png              | Bin 0 -> 12358 bytes
 src/assets/images/search/back.png             | Bin 234 -> 832 bytes
 src/assets/images/search/keyboard.png         | Bin 494 -> 301 bytes
 src/assets/images/search/keyboard_active.png  | Bin 2035 -> 304 bytes
 src/assets/images/search/write.png            | Bin 702 -> 597 bytes
 src/assets/images/search/write_active.png     | Bin 2279 -> 593 bytes
 src/base/FacilityItem/FacilityItem.vue        |  13 +-
 .../KeyboardByLetter/KeyboardByLetter.vue     |   4 +-
 .../KeyboardByWritten/KeyboardByWritten.vue   |   4 +-
 src/components/Search/Search.vue              | 370 +++++++++---------
 src/components/Search/clear.png               | Bin 0 -> 760 bytes
 src/components/Search/icon.png                | Bin 0 -> 5359 bytes
 .../SearchResultItem/SearchResultItem.vue     | 109 +++---
 .../SearchResultList/SearchResultList.vue     |  63 ++-
 src/components/Tabs/Tabs.vue                  |  40 +-
 src/layouts/Dialog.vue                        |   3 +-
 src/views/Index/Index.vue                     |   2 +-
 18 files changed, 272 insertions(+), 336 deletions(-)
 create mode 100644 src/assets/images/scrollBar.png
 create mode 100644 src/assets/images/scrollHand.png
 create mode 100644 src/components/Search/clear.png
 create mode 100644 src/components/Search/icon.png

diff --git a/src/assets/images/scrollBar.png b/src/assets/images/scrollBar.png
new file mode 100644
index 0000000000000000000000000000000000000000..7efd97173792ebe851b2e4c3c0dc720242d02037
GIT binary patch
literal 339
zcmeAS@N?(olHy`uVBq!ia0vp^JPZtsUpUx+EY8Dc)In5%M`SSrgP1A^GkON8d;khE
z76-XIF|0c$^AgBmNq6*hWMJ6X&;2Kn707?#>Eakt!T9!$<Eldj0&EYK)Y>?fs8+DN
zub1l&C{X1P-QricOW2gV{QiOY6H4}75cbiHylnFK=(heGrQ3V<xwJ*S&V0H0=AN#%
z0zdWFzm~FOli9te;(E-d+lq4Uen*rQ-k5s+s{6axf8V!noqKSXsEH`hQtV*LF(&L1
z3=9pIA~2=)Gdyqm=dCS~X5ey6f7bEJfI9Khx_rm^GtSI=?(%nO(YL=g=jvt#)Su(|
bSy0LF#!Kt!LA&eEK<0S5`njxgN@xNADH3dq

literal 0
HcmV?d00001

diff --git a/src/assets/images/scrollHand.png b/src/assets/images/scrollHand.png
new file mode 100644
index 0000000000000000000000000000000000000000..20b483ba31c62bb264382fbf843e6df84b3b8070
GIT binary patch
literal 12358
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/search/back.png b/src/assets/images/search/back.png
index fc75824deccbf98d4082a4a5aabf2d1428fa275a..2c7a78fddee064ca3be177cc694e1b6b85dd9a97 100644
GIT binary patch
delta 815
zcmaFGc!15UGr-TCmrII^fq{Y7)59eQNEd)G2OE$)_TY;*km4-xh%9Dc5K{$VM$aIX
z4-?Jg>zS^4x;TbZFuuKeHdn+^#Pwl%gf)Xl1B1r`W`n{B$JU%^G-(jkzTwQo$H3IU
z@M85s)=f5L|F2bVud!RHqJQjCh2Qq7RlB|VfEJ*FAG;-wcYpX?B;#yT*!4YEM*fiY
zqDQqopR4zGx|~<;|M%hY{rT%3*VmZTOCEo}!uR97<NKNOB#!qN-f?SM)A0ZJYzvn?
z()mU%K}UKTz8{?((pRB*FQucUV=c3tNPdvvqvVfj&L({~j2;;Dl^e%LYd*SDF<DW{
ztw!wa3;tg_AAI$;-=VywlE3S_tyE?u+drw}*Dd51UN^2+|LhYZ{XSR6I>0=$mbbp7
zGegkdXkTkse}=ICre}?z%27urpRqQ)s&orTHw39JO0_x3r*Ts-_pxVd!z9s*R`WtQ
zHP$NMIzHKpacSrgy+@u~8;VMf<UR5{+E5g7WZfgrs|}mVkGy;2`LtnE_z}IwCqpZ4
z2tClU>Q&ccOwB#A`i03n3)U%%<v#%}dR2e@!0u}?!p}E#tLHI3?dX{H@rdDqH<B04
z=IvmcVyhH&T=;pzCe=l?Hkmuu2(TB}GjI3No?~_;=7~%}zvaSOm+KAHelON4Td~<Z
z%InE>+1}uO&ueqf3z34iXLF7g-00reb=oB9^y4K<i}!NvUX)gB!MxqBr}VbyR*$a@
z)wZ7R>&=p$HdO03zc5O=+Tgx6@ugnU(FS*YhgVujTN~Df^_L273_5Vl`~R+v2-SpZ
zyL^9lh%%+=@7mfoLw3WduFTsVGZ|OwmT&KwA-dsJ9P925NygRrCL6nMSS>iMr#QPq
zmw8w2$4wnKK2<(={o%IimS?sv9BM^-x7aY}KmOy$V;olyoq6%?CF74KedjNFyv}|w
zr$aQ{=X`I4)bZsR8jqu2I16g)m)Gk&(v&(rc}?YmT0z-wS}|P}T`d)&dpQ4nY~QQ6
m=aH|-$CJmIQBxlSLw!BNzL0>viQ??3ASq8*KbLh*2~7ay7;5tX

delta 213
zcmX@W_KMN0Gr-TCmrII^fq{Y7)59eQNLzp~2OE%F(Pk|Nq&N#aB8wRqxP?KOkzv*x
ziHT<N^$hi%E{-7;jBjrkay1wTxLmv_T)DVHxcKvm2_}syy&RkWut(>9y_u&9G=ZUT
zYS1O)=}M~#eb=1O(+hi|u+H*Hj$rvI$-;FV#jbO-AH@iM-yD1YmfG$`9QV9^*Ub=N
zoaiE@ILSlVMJO{x@a12#9JYy(6H6vW3SK>-12R#}E{}1Zl%7Y3Y6Xbv>FVdQ&MBb@
E03BOI-2eap

diff --git a/src/assets/images/search/keyboard.png b/src/assets/images/search/keyboard.png
index b0e3137a98fead74f43e8d3afdb0802b75cf54bf..246d306d5dff55108298e424f29ee6d9c924b29a 100644
GIT binary patch
delta 259
zcmV+e0sQ{%1FZrfiBL{Q4GJ0x0000DNk~Le0000m0000m2nGNE09OL}hmj#Pe*nTs
zL_t(|0qxnb5yCJG1<;S7qNQdKhM;AI%)}HF48bC_X(*^sjs}e2d>6x)$$xih92K!6
zMTG$o5vG~5wz1e*ED=j@akMx+E+!{&i+C?TSmA!KPtu#js9p{>p>d0XoDN+3PY;{_
z0@?suNe|@mn(Tg*=TZr=O|l0{S!=X*o=YXfra1u3fpN3}Hq8MxZGf%D9H>ompedRI
zY$_qPN%X+C|NEo-WeHsoSD!D;ourG!8u4yvhJ!s=oFO6-#tq&$6(uqW<JJHG002ov
JPDHLkV1gAkW)}be

delta 454
zcmV;%0XhDy0`3DLiBL{Q4GJ0x0000DNk~Le0000$0000$2nGNE0IF$m-jN|Re*uF@
zL_t(|0qvSGP6IIzMLz+FhOMZw2S^$^Y9vm>p*YR<hz<#n17s_z(9ki1f`m5S@!Ik#
zapphiH(pP&{*u3DEdzuQLJ0B7MdbON=w5V<y7?BpiC%{fE{&p<=s|Ra`q4GCqMhjT
z|AU25)Z+X&SknT|ac@BC{_aH|f2f1CXc?Q7YJi5w26dqOJ!$|m0M20uq719R*jDsq
z)ad?f24k8ry-{<6aDS4WOQj5W42*TKUrbYaXq?Ws3}{FGE875O0GvYu;G9w+_>6SA
zy;9hqa3{(w0O!yEIA_jIP|pplu1>qaVOy*1vlVjMKCc7g9Wt5wTOiife}?KT1DcVV
z4w*0m;2ee^$`IPOyGYG;;@I#vi*|yg4Cs(fPFvf<4%TFt0dNitfOATP;1iBZ&UwTy
z+yZb84S;iw*$JKmbAAg{0W$#3VF)6Pu`{_-q?s}))qo`?Ts*1?W&oUH84x?4tC52>
wS+~XiZdKo+{u|?ZUH(P%91cPVA%u`UKdS>XAgs+Nu>b%707*qoM6N<$f>cY!!vFvP

diff --git a/src/assets/images/search/keyboard_active.png b/src/assets/images/search/keyboard_active.png
index c483bf16e56fb00157bdd47d00a8fd19e25bd553..e7682f97cc400c1043b28c669bc8174af101c797 100644
GIT binary patch
delta 262
zcmV+h0r~#(53m9uiBL{Q4GJ0x0000DNk~Le0000m0000m2nGNE09OL}hmj#Pe*ncv
zL_t(|0qxnb4Z=VS1<+5RWdJ5%fh<7JHmpL$8ZZVEFhEM0EP&HRhlNhck?%|XliWBi
z;=~sh0YpTYHcswrak1DVmd@g4@fat)2JRLI#ME1y#)-x$ihA>duc>HIxm`w03$Ev{
zi`BmYHNcj022$xvwlmeaG(v2vTs#B0Gg`XNr4eG&9)R}1G-`lNdw@+1u$9;YrD+dT
zMSFlvBgD3fGw|>4{v?YWp&oH{X=3XXy)BN2_ls$Guvd#0L`1^)0Ir)A5?t1;l>h($
M07*qoM6N<$f_eRGga7~l

delta 2007
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

diff --git a/src/assets/images/search/write.png b/src/assets/images/search/write.png
index 3dd751eefd5758263803ac624173e4821592f6f6..d92af074aeac4a3e4ab74162b54a564dce936f20 100644
GIT binary patch
delta 558
zcmV+}0@3}x1=R#0iBL{Q4GJ0x0000DNk~Le0000m0000m2nGNE09OL}hmj#Pe*x-A
zL_t(|0qvQsPQ*YIh3`Tz2n+}W7z79ekbnS-1&!@HfZ!!C7=qh(0K*etNWfqa7%+%6
z2(a9fok_a8^V`m}H(|cyWXmkuoR79MElX4={BPz-7K@yH&aa9WNdn89OU@DJm^0wK
z`935?0Oilst7ek|BqRu!%4@t5e{&?C6V9paO$kQ;7wZdWm&O;d3G0!Nat$<==tBVK
z`UU5m^IaPcm4LuV4|FY{FW6Pi0q2$CCGh^2{-H~O>Dgw1;wA8xf1uhT*Oh>6s*I69
z`75fOKA;N$*E|nGB(ObG9t<ciw(=jG^{KHR8khVu>;ue{2RV;`t^6bBe_CyC)y7>%
z!g^zuOTblrsJ8Wd9wK2Shd@Yq4J7tBOSQ2miPQoy<w3>SHjD>Lq!egU{*dehNu&};
zQGTR;f1@_$l}I6wsywF9C(a5@PO*?cdE+xd+vkCl<?*`4*)e?1xCVeW0y)ZKf7ACr
zcWR$Tny$oMmcJ(lO$5Z0e+RJwqRN990deI)sDQ}wAVffHdEgTeT^{(>0nz1wPe62e
z5W5l&4PzDcR35aw7pllz9-L98@}P}CMgH>Oh9)1>la&X)S?HF+G5+61fg^y^=$R6h
w2dM;H<+GCF`+?rdgSG;_mM;_vh5q>isJz5)UCaFn00000NkvXX1g=70f*$kv&;S4c

delta 663
zcmV;I0%-l!1il3!iBL{Q4GJ0x0000DNk~Le0000$0000$2nGNE0IF$m-jN|Re*#lU
zL_t(|0qvSUOT$1IhhP7oi-MpCb?P8GIXOA$7ZCiaqO<6(v*=WCaOzY+DhS?><i%3%
zlJ_omm)!Lpcqud?_&lV^rIx5rC=?2-%NnK0mYOp)BQ;-Yp6gd@QVan3Yc=}|@6FWQ
zkwb(HN(-Gl*j6)EGg0$H7Niuwe<aU1MMx>Y4VmQ`>j)_Y_@zp&4XX$#1(;HGu^S8a
z6-P+zBIrHBPy^tCx2NV?v(0OSAqL>9Jr+72<R=1VqT4vM0E@Re{B6hNC&FCKyKcjf
z0_g7Zz9M|mz|VlDMNZcU*#1D(ZB%>kzG++G0oMq4|DLLkfbqb6B9Uioe<QTY^FjN<
zMxK#I*d>8H=<9K~P5zClN85A5cHGnP_&cSJ^l=7A<e#Xza)TqyK5b`$nAicN@=Wju
zF$37jGeIM)Qyg67nVk;DZY0JT&{h6Y%_%kGd?thr5JR4EiV!kDNO|1rw>9ruM+g-l
zq&)8Zw^Xg|O&7*PHLoNff5b&Fv^=lyUg-Z0vCIJp@f{$RJisb(WY~8`LVN~@EpJ*T
z&+C0f_zEyIdGQ(G<6&rM@>UN>T>~U754r?MULLpx$U+{t1jt4n*apZ-9@qrPP98`D
zWGN3M0kV|`l9gb#@<0+GTY2F6EHI%A<UyAJCX$f{zP}H!k;g}?ZC82VGk}dezxSxw
zH<~=yBsZ47iyM)hJj1`*xT;^H$^+K`C-t<^B+qb!3yLfcTmwju$TNsAA<N(S`XJQ5
x#%$!7=<*;$02le*@Ess2`9h&kC=?2-%^&kgA0F8PQTPA=002ovPDHLkV1jI?E4Kgu

diff --git a/src/assets/images/search/write_active.png b/src/assets/images/search/write_active.png
index 7f4a5aad2518f45835fe4594d37c54fa25b21648..079706f837df5f108f1d9a375ffd45f68d2d46a4 100644
GIT binary patch
delta 553
zcmV+^0@nTK5zz!8iBL{Q4GJ0x0000DNk~Le0000m0000m2nGNE09OL}hmj#Pe*xx6
zL_t(|0qvMQQo}G1g%>EOasW6$E)aUCpy3>$qJjhX8sq?Q0H~;-q6r6p1B8kSde}GE
zGm4^>WLvVAiN2YgIGf1x-t21qLsTeiH+!Uu3C9`77sogKGY&cKIhJ+IV-{(t0L0&L
z92mJ-{rT!!sKJ0sd_&O0F6n1Zf1Y;IPyuY%XO0v4+r%!!N@&>wolT6<Lg@Khj;WPj
zaa?eGc-EqoW@ch&1I>n=8lNUHCe|u6qyc-{OsKsH{Pt!hhS~$tsNCl`<#^%vH1e)J
z;WV~G`SH#91_*|@cVX=h3028$KoSq3cI)^|z<_gK<ZK~H`~$~jeQZt?e_uO^H+H!U
z_{3NBaWl_jOo-%Yp&0Qdu4{tSP8*~iqiw|_H+AHt5xYUk7V0AYoMfWfDOCkhh{v42
zvvR>oq^LkD@#y)-`h2EfR00)nJ`?n<KuYnL^ALXQShpg9J_d4#$NB8r=|z1`Ctb(r
zkm48Qp^E`E;z3&js>Fjfe+JZv2eAfJiU%<U)QSfo1FFS?kO91_R4X2YE@Z03gHQ#Q
z*7qaFe<~VDJm`BbRFPjixS~wrK_3GZg~fwwT7R-iCLXkHAs@aMQq6t+6D1T6QW=PO
rC76X2Ph_Ks2Yn5UD!x!C6vpQlE-$=Y3?mD600000NkvXXu0mjfA+Pja

delta 2253
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
bC)@r9hKV9qBgq9+00000NkvXXu0mjfCb2kT

diff --git a/src/base/FacilityItem/FacilityItem.vue b/src/base/FacilityItem/FacilityItem.vue
index cc068b2..0969bb1 100644
--- a/src/base/FacilityItem/FacilityItem.vue
+++ b/src/base/FacilityItem/FacilityItem.vue
@@ -27,18 +27,17 @@ function handleFacility() {
   align-items: center;
 }
 .facility-icon {
-  width: 44px;
-  height: 44px;
-  margin-bottom: 6px;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 8px;
 }
 .facility-name {
   display: inline-block;
   width: 48px;
-  font-weight: 400;
+  font-weight: 700;
   font-size: 12px;
-  line-height: 12px;
+  line-height: 14px;
   text-align: center;
-  color: var(--color-black-opacity-4);
-  transform: scale(0.83);
+  color: rgba(0, 0, 0, 0.6);
 }
 </style>
diff --git a/src/components/KeyboardByLetter/KeyboardByLetter.vue b/src/components/KeyboardByLetter/KeyboardByLetter.vue
index 0195681..6463998 100644
--- a/src/components/KeyboardByLetter/KeyboardByLetter.vue
+++ b/src/components/KeyboardByLetter/KeyboardByLetter.vue
@@ -60,7 +60,7 @@ function handleLetter(item, index) {
     font-family: 'font_bold';
     color: rgba(0, 0, 0, 0.6);
     margin-right: 8px;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     &:nth-child(21) {
       margin-left: 28px;
     }
@@ -71,7 +71,7 @@ function handleLetter(item, index) {
       width: 104px;
     }
     &.active {
-      background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
+      background: linear-gradient(180deg, #435acd 0%, #749cf3 100%);
       color: #fff;
     }
   }
diff --git a/src/components/KeyboardByWritten/KeyboardByWritten.vue b/src/components/KeyboardByWritten/KeyboardByWritten.vue
index d3cf066..0791bfd 100644
--- a/src/components/KeyboardByWritten/KeyboardByWritten.vue
+++ b/src/components/KeyboardByWritten/KeyboardByWritten.vue
@@ -5,7 +5,7 @@
         <div class="word" @click="handleWord(item, index)" :class="{ active: wordIdx === index }" v-for="(item, index) of wordsList" :key="item">{{ item }}</div>
       </div>
     </ScrollView>
-    <Written @result="getWordList" :width="552" :height="196" background-color="#ffffff" fill-font-size="48px" fill-style="rgba(0, 0, 0, 0.02)" stroke-style="#F6A62C" />
+    <Written @result="getWordList" :width="552" :height="196" background-color="#ffffff" fill-font-size="48px" fill-style="rgba(0, 0, 0, 0.02)" stroke-style="#516DD8" />
     <div class="del" @click="del">
       <img src="../../assets/images/search/del.svg" class="del-icon" alt="" />
     </div>
@@ -70,7 +70,7 @@ function del() {
       color: rgba(0, 0, 0, 0.6);
       &.active {
         color: #fff;
-        background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
+        background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
       }
     }
   }
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index 60967b4..519351e 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -1,59 +1,46 @@
 <template>
   <Dialog @close="close">
-    <View title="全局搜索" sub-title="Global search" :show-input="false">
-      <div class="search-content">
-        <div class="search-left">
-          <div class="input-wrapper">
-            <img src="../../assets/images/index/index_search.png" class="search-icon" alt="" />
-            <input @click="setSearch" v-model="keywords" placeholder="输入首字母搜索店铺" type="text" readonly class="input" />
-            <img @click="setVoice" src="../../assets/images/search/search-voice.png" class="voice-icon" alt="" />
-          </div>
-
-          <div class="flex" v-if="!showVoice">
-            <div class="right-box">
-              <h1 class="title">快捷入口</h1>
-              <h1 class="title-en">Quick entrance</h1>
-              <div class="facility-list">
-                <FacilityItem @click="_handleFacility(item)" class="margin" :facility="item" v-for="item of facilityList" :key="item.title" />
-              </div>
-            </div>
-            <div class="keyboard-wrapper">
-              <Tabs @click="handleTab" :list="list" class="width" />
-              <KeyboardByLetter @del="del" @handle-letter="handleLetter" v-if="tabIdx === 0" />
-              <KeyboardByWritten @del="del" @handle-word="handleLetter" v-else />
-            </div>
+    <div class="search-content">
+      <div class="bar">
+        <div class="icon"></div>
+        <div class="stick"></div>
+        <div v-if="!keywords" class="placeholder">请输入中英文<span class="meta">首字母</span>查询，例如 XBK (星巴克)</div>
+        <input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" />
+        <img src="./clear.png" class="clear" v-if="keywords" @click="clear" />
+      </div>
+      <div class="top" v-if="!showVoice">
+        <div class="facs">
+          <h1 class="title">公共设施</h1>
+          <div class="facility-list">
+            <FacilityItem @click="_handleFacility(item)" class="margin" :facility="item" v-for="item of facilityList" :key="item.title" />
           </div>
         </div>
-        <div v-show="!keywords.length && !showVoice">
-          <h1 class="title">万象热搜</h1>
-          <h1 class="title-en">MIXC hot search</h1>
-          <ScrollView class="hot-scroll" :list="hotRecommend" scrollbar>
-            <div class="hot-box">
-              <div class="recommend-item" v-for="item of hotRecommend" :key="item.shopId" @click="handleShop(item)">{{ item.shopName }}</div>
-            </div>
-          </ScrollView>
-          <h1 class="title">常见问题</h1>
-          <h1 class="title-en">common problem</h1>
+        <div class="keyboard-wrapper">
+          <Tabs @click="handleTab" :list="list" class="tabs" />
+          <KeyboardByLetter @del="del" @handle-letter="handleLetter" v-if="tabIdx === 0" />
+          <KeyboardByWritten @del="del" @handle-word="handleLetter" v-else />
+        </div>
+      </div>
 
-          <div class="question-box">
-            <QuestionList />
-            <div class="more-question" @click="showClassify = true">{{ $t('more') }}</div>
-            <Teleport to="body">
-              <Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp">
-                <QuestionClassify @close="showClassify = false" v-if="showClassify" />
-              </Transition>
-            </Teleport>
+      <div class="recs" v-show="!keywords.length && !showVoice">
+        <h1 class="title">大家都在找</h1>
+        <div class="hot-scroll">
+          <div class="item" v-for="(item, i) of hotRecommend" :key="item.shopId" @click="handleShop(item)">
+            <div class="text">{{ item.shopName }}</div>
+            <img class="medal" v-if="i === 0" src="@/views/Index/fir.svg" />
+            <img class="medal" v-if="i === 1" src="@/views/Index/sec.svg" />
+            <img class="medal" v-if="i === 2" src="@/views/Index/thi.svg" />
           </div>
         </div>
+      </div>
 
-        <SearchResultList @handle-shop="handleShop" @handle-activity="handleActivity" :list="searchShopListRef" :config="config" v-if="keywords.length && !showVoice" />
+      <SearchResultList @handle-shop="handleShop" @handle-activity="handleActivity" :list="searchShopListRef" :config="config" v-if="keywords.length && !showVoice" />
 
-        <Voice @handle-question="showClassify = true" v-if="showVoice" />
-      </div>
-      <div class="search-btn" @click="close">
-        <img src="../../assets/images/search/back.png" alt="" />
-      </div>
-    </View>
+      <Voice @handle-question="showClassify = true" v-if="showVoice" />
+    </div>
+    <div class="search-btn" @click="close">
+      <img src="../../assets/images/search/back.png" alt="" />
+    </div>
   </Dialog>
 </template>
 
@@ -115,6 +102,9 @@ function handleLetter(item) {
 function del() {
   keywords.value = keywords.value.substring(0, keywords.value.length - 1)
 }
+const clear = () => {
+  keywords.value = ''
+}
 
 function setSearch() {
   showVoice.value && store.SET_SHOW_VOICE(false)
@@ -140,154 +130,152 @@ onBeforeUnmount(() => {
   position: relative;
   z-index: 50;
 }
-::-webkit-input-placeholder {
-  position: relative;
-  top: -8px;
-  color: rgba(0, 0, 0, 0.4);
-  font-size: 16px;
-}
+
 .search-content {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 315px;
+  right: 40px;
+  bottom: 302px;
+  left: 40px;
+  background: linear-gradient(180deg, #e0e3ee 0%, #d4d9e7 100%);
+  backdrop-filter: blur(10px);
+  border-radius: 24px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  z-index: -1;
+  z-index: 2;
   .title {
-    font-weight: 700;
+    font-weight: 900;
     font-size: 24px;
-    color: rgba(0, 0, 0, 0.6);
-    font-family: 'font_bold';
-    padding-left: 64px;
-    padding-bottom: 4px;
-  }
-  .title-en {
-    font-size: 14px;
-    line-height: 16px;
-    text-transform: uppercase;
-    color: rgba(0, 0, 0, 0.4);
-    padding-left: 64px;
-    margin-bottom: 32px;
-  }
-}
-.input-wrapper {
-  display: flex;
-  align-items: center;
-  padding-right: 5px;
-  padding-left: 32px;
-  width: 552px;
-  height: 88px;
-  background: #ffffff;
-  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 4px 30px rgba(0, 0, 0, 0.02);
-  border-radius: 51px;
-  margin-bottom: 56px;
-  margin-top: 174px;
-  margin-left: 432px;
-
-  .search-icon {
-    width: 40px;
-    margin-right: 24px;
-  }
-  .input {
-    border: none;
-    outline: none;
-    width: 262px;
-    height: 78px;
-    background: transparent;
-    font-weight: 700;
-    font-size: 48px;
+    line-height: 28px;
     color: rgba(0, 0, 0, 0.8);
   }
-  .voice-icon {
-    width: 190px;
-  }
-}
-.flex {
-  display: flex;
-  justify-content: space-between;
-  padding-right: 56px;
-}
-.facility-list {
-  width: 432px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  padding-left: 64px;
-  .margin {
-    margin-right: 40px;
-    margin-bottom: 38px;
+  .bar {
+    position: absolute;
+    top: -55px;
+    left: 28px;
+    right: 28px;
+    background: #ffffff;
+    box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    padding-right: 10px;
+    padding-left: 40px;
+    height: 100px;
+    .icon {
+      width: 56px;
+      height: 56px;
+      background: center / cover no-repeat url(./icon.png);
+    }
+    .stick {
+      width: 4px;
+      height: 38px;
+      background: linear-gradient(180deg, #6c7ca6 0%, #879aca 100%);
+      margin: 0 32px;
+    }
+    .placeholder {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 23px;
+      color: rgba(0, 0, 0, 0.2);
+      .meta {
+        color: rgba(81, 109, 216, 1);
+      }
+    }
+    .input {
+      flex: 1;
+      border: none;
+      outline: none;
+      width: 262px;
+      background: transparent;
+      font-weight: 700;
+      font-size: 48px;
+      line-height: 59px;
+      color: rgba(0, 0, 0, 0.8);
+    }
+    .clear {
+      display: flex;
+      width: 80px;
+      height: 80px;
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 24px;
+      padding: 16px;
+    }
+    .voice-icon {
+      width: 190px;
+    }
   }
-}
-.width {
-  width: 552px;
-}
-.hot-scroll {
-  position: relative;
-  margin-bottom: 64px;
-  margin-right: 20px;
-  overflow: hidden;
-  margin-left: 64px;
-  height: 142px;
-  :deep(.bscroll-vertical-scrollbar) {
-    width: 6px !important;
-    background: rgba(0, 0, 0, 0.02) !important;
-    border-radius: 6px !important;
-    opacity: 1 !important;
-    .bscroll-indicator {
-      width: 6px !important;
-      background: rgba(0, 0, 0, 0.1) !important;
-      border-radius: 6px !important;
-      border: none !important;
+  .top {
+    height: 460px;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 16px;
+    margin: 10px 10px 48px 10px;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 46px;
+    .facs {
+      width: 300px;
+      padding-top: 111px;
+      .facility-list {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        width: 264px;
+        margin-top: 40px;
+        gap: 12px 24px;
+      }
+    }
+    .keyboard-wrapper {
+      flex: 1;
+      padding-top: 75px;
+      padding-left: 36px;
+      background: rgba(0, 0, 0, 0.05);
+      padding-right: 38px;
+      .tabs {
+        padding-right: 8px;
+      }
     }
   }
-}
-.recommend-item {
-  display: inline-block;
-  height: 59px;
-  padding: 0 32px;
-  font-weight: 700;
-  font-family: 'font_bold';
-  font-size: 16px;
-  line-height: 59px;
-  text-align: center;
-  color: var(--color-black-opacity-6);
-  background: var(--color-white-opacity);
-  border-radius: 50px;
-  margin-right: 16px;
-  margin-bottom: 24px;
-}
-.question-box {
-  display: flex;
-  margin-left: 64px;
+  .recs {
+    padding-left: 56px;
+    .hot-scroll {
+      padding-top: 16px;
+      white-space: nowrap;
+      width: 944px;
 
-  :deep(.question_item) {
-    margin-right: 16px;
-  }
-  .more-question {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.4);
-    width: 160px;
-    height: 225px;
-    border-radius: 12px;
-    font-weight: 700;
-    font-size: 20px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.6);
-    padding: 0 60px;
+      .item {
+        position: relative;
+        display: inline-block;
+        max-width: 170px;
+        height: 52px;
+        background: rgba(255, 255, 255, 0.8);
+        border-radius: 100px;
+        .text {
+          text-align: center;
+          font-weight: 900;
+          font-size: 16px;
+          line-height: 52px;
+          color: rgba(0, 0, 0, 0.6);
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          padding: 0 32px;
+        }
+        .medal {
+          position: absolute;
+          width: 32px;
+          height: 32px;
+          left: 4px;
+          top: -10px;
+        }
+      }
+      .item + .item {
+        margin-left: 24px;
+      }
+    }
   }
 }
-.search-left {
-  width: 1048px;
-  height: 722px;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 12px;
-  margin: 16px 16px 64px 16px;
-}
+
 .search-right {
   position: relative;
   background: rgba(255, 255, 255, 0.6);
@@ -295,14 +283,6 @@ onBeforeUnmount(() => {
   padding-left: 64px;
   width: 696px;
 
-  .keyboard-wrapper {
-    position: absolute;
-    left: 72px;
-    right: 64px;
-    bottom: 56px;
-    top: 684px;
-  }
-
   .title,
   .title-en {
     margin-right: 76px;
@@ -313,13 +293,15 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   position: fixed;
-  left: 80px;
-  top: 190px;
-  width: 88px;
-  height: 88px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 242px;
+  width: 120px;
+  height: 120px;
   z-index: 52;
-  background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
-  border-radius: 12px;
+  background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+  border-radius: 24px;
   img {
     width: 56px;
   }
diff --git a/src/components/Search/clear.png b/src/components/Search/clear.png
new file mode 100644
index 0000000000000000000000000000000000000000..66818cef47fd22d10f93e253eb945027198d4202
GIT binary patch
literal 760
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9E$svykh8Km+7D9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2Buz57srqa#<zD)doeo-v_1@Kb}Cq!E&k}5
z`^Vg`xku(kvvw+QHPs$C*6{ew>Q`Il@K=c&th8@FS+aU&2O7{R54yJV<Dp{fZ4T~Y
z?1%SjzTUOw_@;Y3+-?2O%OkHjN6r^h&~lKqi+i$cjrQZNfcF09J9S?lYEp7xxglS7
zR3x$fM`#4gdxqG<>m`&*c=vO4K9F3H|06W5W#7Z_cY=Ip&%gXGWu$iH)-j&_QopUz
zKJH=q(09yQ`u&Hq2a=W7w`d-&*MGfjO?vU8zt#=9OjkcBJ_;7_X4&=7`O5c(Hyl$A
zx1Y#A6e*a|&Oeb+!HVhY2SqCe7uN;yb}1|j?>T&V<To)jgtw%%@y}#Tc+26-E5C{P
zK$PGtX*&a!hNXhDWb8JuH0%^CIKJuR!^4dqXa34F%P#qGpoBFfczw&l;|xzfG#WDa
zbQ-jj{Wu`SaIM3^wkCm(!CUD9zx)m619LzY*nDr<Y*=^b_tIAFgj2^aX%+QX3VvfK
zZi_b+Y_vQu>0$U6!3gFxhJU)On35Y-ZdWQu(gi9B&0&0Y=jtBweTU;08?w%*_MZ8b
z<(`HP<FtF{^Uau?8@8GS&+3^VoA7q-nrBKWY#(m9<!CvDF}%0Elctoy(s9cnU&*PY
z;l*X{FM>+UDYCK)`vgQ4e&6BCZRudpX<w$HT*01Tz0pnlpfSViLdR7c^QsT+-W2C<
zqnFJ5cjX%E-<FZr+1Dqg``N5#xU>9t{EWx?XSdhesD1u&Xofc9!ViD!&UAi%->{E^
z$KCyx(hh!kB|Fwq*95EWmqis*eh7TEO|WOGQ@g!z<zEhcF_S+$Kgtu*k7@sjpVo<%
ce*XB!&#}`=5tDkR0!*k3p00i_>zopr0JjH3!vFvP

literal 0
HcmV?d00001

diff --git a/src/components/Search/icon.png b/src/components/Search/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2d303f8953741aeb966a034cc64152de13f9cfd
GIT binary patch
literal 5359
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
N002ovPDHLkV1m4}DwhBN

literal 0
HcmV?d00001

diff --git a/src/components/SearchResultItem/SearchResultItem.vue b/src/components/SearchResultItem/SearchResultItem.vue
index 09f2534..e669c5f 100644
--- a/src/components/SearchResultItem/SearchResultItem.vue
+++ b/src/components/SearchResultItem/SearchResultItem.vue
@@ -3,17 +3,10 @@
     <div class="icon-wrapper">
       <img :src="config.sourceUrl + shop.logoUrl" class="icon" alt="" />
     </div>
-    <div class="item-right">
-      <div class="info">
-        <div class="top-info">
-          <p class="name">{{ switchLanguage(shop, 'shopName') }}</p>
-          <p class="address">{{ shop.houseNumber }}</p>
-        </div>
-        <div class="info-bottom">
-          <p class="desc">{{ switchLanguage(shop, 'industryFatherName') }}</p>
-          <img :src="config.sourceUrl + shop.industryUrl" class="desc-icon" alt="" />
-        </div>
-      </div>
+    <div class="item-bottom">
+      <div class="left">{{ switchLanguage(shop, 'shopName') }}</div>
+
+      <div class="right">{{ shop.floor }}</div>
     </div>
   </div>
 </template>
@@ -39,62 +32,52 @@ function handleShop() {
 <style lang="scss" scoped>
 .item {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  padding: 0 24px;
-  width: 302px;
-  height: 72px;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 12px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-.icon-wrapper {
-  width: 48px;
-  height: 48px;
-  background: #ffffff;
+  width: 210px;
+  height: 200px;
+  background: rgba(255, 255, 255, 0.6);
   border-radius: 8px;
-  padding: 4px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
-  margin-right: 24px;
-  .icon {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+  margin-right: 8px;
+  margin-top: 24px;
+  .icon-wrapper {
+    display: flex;
+    width: 210px;
+    height: 160px;
+    background: #ffffff;
+    border-radius: 8px;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      width: 120px;
+      height: 120px;
+      object-fit: contain;
+    }
   }
-}
-.item-right {
-  flex: 1;
-}
-.top-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 6px;
+  .item-bottom {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    padding: 0 12px;
+    align-items: center;
 
-  .name {
-    font-weight: 700;
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.6);
-    font-family: 'font_bold';
+    .left,
+    .right {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 16px;
+      color: rgba(0, 0, 0, 0.8);
+    }
+    .left {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .right {
+      width: 40px;
+      text-align: right;
+    }
   }
-  .address {
-    font-weight: 700;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.4);
-    font-family: 'font_bold';
-  }
-}
-.info-bottom {
-  display: flex;
-  align-items: center;
-}
-.desc {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.6);
-  padding-right: 8px;
-}
-.desc-icon {
-  width: 14px;
-  width: 14px;
 }
 </style>
diff --git a/src/components/SearchResultList/SearchResultList.vue b/src/components/SearchResultList/SearchResultList.vue
index 34362eb..f33c7ca 100644
--- a/src/components/SearchResultList/SearchResultList.vue
+++ b/src/components/SearchResultList/SearchResultList.vue
@@ -2,11 +2,7 @@
   <ScrollView :list="list" class="search-result-scroll" :scrollbar="true">
     <div class="scroll-result">
       <h1 class="title">
-        {{ $t('pinpai') }}
-        <div>
-          <i>{{ $t('result') }}</i>
-          <b>{{ list.length }}</b>
-        </div>
+        搜索结果 <span class="meta">/ {{ list.length }}</span>
       </h1>
       <TransitionGroup name="zoom" tag="div" class="list">
         <SearchResultItem :config="config" @click="handleShop" :shop="item" v-for="item of list" :key="item.shopId" />
@@ -63,9 +59,10 @@ function handleActivity(item) {
 <style lang="scss" scoped>
 .search-result-scroll {
   position: relative;
-  height: 1118px;
+  height: 842px;
   overflow: hidden;
-  margin-left: 80px;
+  margin-left: 68px;
+  margin-right: 7px;
   .scroll-result {
     padding-bottom: 200px;
   }
@@ -124,40 +121,42 @@ function handleActivity(item) {
     }
   }
   .title {
-    display: flex;
-    justify-content: space-between;
-    font-weight: 700;
+    font-style: normal;
+    font-weight: 900;
     font-size: 24px;
-    color: rgba(0, 0, 0, 0.6);
-    font-family: 'font_bold';
-    margin-bottom: 24px;
-    padding-right: 80px;
-    i {
-      display: inline-block;
-      font-weight: 700;
-      color: rgba(0, 0, 0, 0.4);
-      font-family: 'font_bold';
-      font-size: 16px;
-      padding-right: 18px;
-    }
-    b {
-      display: inline-block;
-      font-weight: 700;
+    line-height: 28px;
+    color: rgba(0, 0, 0, 0.8);
+    .meta {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 23px;
       color: rgba(0, 0, 0, 0.6);
-      font-family: 'font_bold';
-      font-size: 24px;
     }
   }
   :deep(.bscroll-vertical-scrollbar) {
-    width: 6px !important;
-    background: rgba(0, 0, 0, 0.02) !important;
-    border-radius: 6px !important;
+    width: 48px !important;
+    background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png);
+    border-radius: 6px;
     opacity: 1 !important;
-    height: 176px !important;
+    height: 250px !important;
+    &::after {
+      position: absolute;
+      content: '';
+      left: 0;
+
+      top: 120px;
+      margin: auto;
+      width: 48px;
+      height: 61px;
+      background: center / cover no-repeat url(@/assets/images/scrollHand.png);
+    }
     .bscroll-indicator {
       height: 95px !important;
       width: 6px !important;
-      background: rgba(0, 0, 0, 0.1) !important;
+      left: 0;
+      right: 0;
+      margin: auto;
+      background: #ffffff !important;
       border-radius: 6px !important;
       border: none !important;
     }
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index f2ef98e..57d5582 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -2,10 +2,7 @@
   <div class="tabs-wrapper">
     <div class="tab" :class="{ active: tabIdx === index }" @click="handleTab(index)" v-for="(item, index) of list" :key="item.name">
       <img :src="tabIdx === index ? item.iconActive : item.icon" alt="" />
-      <div class="text-right">
-        <span class="zh">{{ item.name }}</span>
-        <span class="en">{{ item.nameEn }}</span>
-      </div>
+      {{ item.name }}
     </div>
   </div>
 </template>
@@ -32,7 +29,7 @@ function handleTab(index) {
 .tabs-wrapper {
   display: flex;
   width: 100%;
-  height: 72px;
+  height: 64px;
   background: rgba(0, 0, 0, 0.05);
   border-radius: 12px;
   overflow: hidden;
@@ -43,39 +40,16 @@ function handleTab(index) {
     display: flex;
     align-items: center;
     justify-content: center;
+    color: rgba(0, 0, 0, 0.6);
     &.active {
       background: #ffffff;
-      box-shadow: inset 0px -4px 0px rgba(177, 189, 220, 0.1);
-      .zh {
-        color: rgba(0, 0, 0, 0.8);
-      }
-      .en {
-        color: rgba(0, 0, 0, 0.6);
-      }
+      color: rgba(0, 0, 0, 0.8);
     }
   }
-  .zh {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    font-weight: 700;
-    font-size: 14px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.4);
-    padding-bottom: 4px;
-    transition: color 0.2s;
-  }
-  .en {
-    font-size: 12px;
-    transform: scale(0.83);
-    transform-origin: 0 0;
-    text-transform: uppercase;
-    transition: color 0.2s;
-    color: rgba(0, 0, 0, 0.4);
-  }
+
   img {
-    width: 32px;
-    height: 32px;
+    width: 24px;
+    height: 24px;
     margin-right: 12px;
   }
 }
diff --git a/src/layouts/Dialog.vue b/src/layouts/Dialog.vue
index 8add7e1..99e6ea5 100644
--- a/src/layouts/Dialog.vue
+++ b/src/layouts/Dialog.vue
@@ -21,8 +21,7 @@ function close() {
   bottom: 0;
   left: 0;
   z-index: 90;
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(150px);
+  background: rgba(0, 0, 0, 0.6);
   animation-duration: 0.2s;
 }
 .masker {
diff --git a/src/views/Index/Index.vue b/src/views/Index/Index.vue
index eed00ce..7c6a8f2 100644
--- a/src/views/Index/Index.vue
+++ b/src/views/Index/Index.vue
@@ -108,7 +108,7 @@ function handleHot(item) {
         .item {
           position: relative;
           display: inline-block;
-          width: 176px;
+          max-width: 176px;
           height: 52px;
 
           background: rgba(255, 255, 255, 0.8);