|
|
|
@ -1,48 +1,36 @@ |
|
|
|
<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 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="flex" v-if="!showVoice"> |
|
|
|
<div class="right-box"> |
|
|
|
<h1 class="title">快捷入口</h1> |
|
|
|
<h1 class="title-en">Quick entrance</h1> |
|
|
|
<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 class="keyboard-wrapper"> |
|
|
|
<Tabs @click="handleTab" :list="list" class="width" /> |
|
|
|
<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> |
|
|
|
<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="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> |
|
|
|
|
|
|
|
@ -53,7 +41,6 @@ |
|
|
|
<div class="search-btn" @click="close"> |
|
|
|
<img src="../../assets/images/search/back.png" alt="" /> |
|
|
|
</div> |
|
|
|
</View> |
|
|
|
</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; |
|
|
|
line-height: 28px; |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
} |
|
|
|
} |
|
|
|
.input-wrapper { |
|
|
|
.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: 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; |
|
|
|
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; |
|
|
|
height: 78px; |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
.flex { |
|
|
|
} |
|
|
|
.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-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; |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
.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 { |
|
|
|
} |
|
|
|
} |
|
|
|
.recs { |
|
|
|
padding-left: 56px; |
|
|
|
.hot-scroll { |
|
|
|
padding-top: 16px; |
|
|
|
white-space: nowrap; |
|
|
|
width: 944px; |
|
|
|
|
|
|
|
.item { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
height: 59px; |
|
|
|
padding: 0 32px; |
|
|
|
font-weight: 700; |
|
|
|
font-family: 'font_bold'; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 59px; |
|
|
|
max-width: 170px; |
|
|
|
height: 52px; |
|
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
|
border-radius: 100px; |
|
|
|
.text { |
|
|
|
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; |
|
|
|
|
|
|
|
: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'; |
|
|
|
font-weight: 900; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 52px; |
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
padding: 0 60px; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
