|
|
|
@ -2,11 +2,11 @@ |
|
|
|
<Dialog @close="close"> |
|
|
|
<div class="search-content"> |
|
|
|
<div class="bar"> |
|
|
|
<div class="icon"></div> |
|
|
|
<div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></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" /> |
|
|
|
<img :src="theme.images.searchClear" class="clear" v-if="keywords" @click="clear" /> |
|
|
|
</div> |
|
|
|
<div class="top" v-if="!showVoice"> |
|
|
|
<div class="facs"> |
|
|
|
@ -38,9 +38,7 @@ |
|
|
|
|
|
|
|
<Voice @handle-question="showClassify = true" v-if="showVoice" /> |
|
|
|
</div> |
|
|
|
<div class="search-btn" @click="close"> |
|
|
|
<img src="../../assets/images/search/back.png" alt="" /> |
|
|
|
</div> |
|
|
|
<img :src="theme.images.searchClose" class="search-btn" @click="close" /> |
|
|
|
</Dialog> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -68,7 +66,7 @@ const { _handleFacility } = useFacilityNav() |
|
|
|
const router = useRouter() |
|
|
|
|
|
|
|
const store = useStore() |
|
|
|
const { indexList, shopList, facilityList, config, showVoice } = storeToRefs(store) |
|
|
|
const { indexList, shopList, facilityList, config, showVoice, theme } = storeToRefs(store) |
|
|
|
|
|
|
|
const hotRecommend = computed(() => indexList.value.hotSearch ?? []) |
|
|
|
const showClassify = ref(false) |
|
|
|
@ -135,9 +133,9 @@ onBeforeUnmount(() => { |
|
|
|
right: 40px; |
|
|
|
bottom: 302px; |
|
|
|
left: 40px; |
|
|
|
background: linear-gradient(180deg, #e0e3ee 0%, #d4d9e7 100%); |
|
|
|
background: var(--search-background); |
|
|
|
backdrop-filter: blur(10px); |
|
|
|
border-radius: 24px; |
|
|
|
border-radius: var(--searchBar-borderRadius); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: stretch; |
|
|
|
@ -153,9 +151,10 @@ onBeforeUnmount(() => { |
|
|
|
top: -55px; |
|
|
|
left: 28px; |
|
|
|
right: 28px; |
|
|
|
background: #ffffff; |
|
|
|
background: var(--search-barBackground); |
|
|
|
border: var(--searchBar-border); |
|
|
|
box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05); |
|
|
|
border-radius: 24px; |
|
|
|
border-radius: var(--searchBar-borderRadius); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding-right: 10px; |
|
|
|
@ -164,21 +163,21 @@ onBeforeUnmount(() => { |
|
|
|
.icon { |
|
|
|
width: 56px; |
|
|
|
height: 56px; |
|
|
|
background: center / cover no-repeat url(./icon.png); |
|
|
|
background: center / cover no-repeat; |
|
|
|
} |
|
|
|
.stick { |
|
|
|
width: 4px; |
|
|
|
height: 38px; |
|
|
|
background: linear-gradient(180deg, #6c7ca6 0%, #879aca 100%); |
|
|
|
background: var(--searchBar-stickBg); |
|
|
|
margin: 0 32px; |
|
|
|
} |
|
|
|
.placeholder { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 23px; |
|
|
|
color: rgba(0, 0, 0, 0.2); |
|
|
|
color: var(--searchBar-placeholderColor); |
|
|
|
.meta { |
|
|
|
color: rgba(81, 109, 216, 1); |
|
|
|
color: var(--search-placeholderMetaColor); |
|
|
|
} |
|
|
|
} |
|
|
|
.input { |
|
|
|
@ -190,15 +189,12 @@ onBeforeUnmount(() => { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 48px; |
|
|
|
line-height: 59px; |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
color: var(--searchBar-color); |
|
|
|
} |
|
|
|
.clear { |
|
|
|
display: flex; |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
background: rgba(0, 0, 0, 0.05); |
|
|
|
border-radius: 24px; |
|
|
|
padding: 16px; |
|
|
|
} |
|
|
|
.voice-icon { |
|
|
|
width: 190px; |
|
|
|
@ -207,11 +203,12 @@ onBeforeUnmount(() => { |
|
|
|
.top { |
|
|
|
height: 460px; |
|
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
|
border-radius: 16px; |
|
|
|
border-radius: var(--searchBar-borderRadius); |
|
|
|
margin: 10px 10px 48px 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding-left: 46px; |
|
|
|
overflow: hidden; |
|
|
|
.facs { |
|
|
|
width: 300px; |
|
|
|
padding-top: 111px; |
|
|
|
@ -298,10 +295,5 @@ onBeforeUnmount(() => { |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
z-index: 52; |
|
|
|
background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%); |
|
|
|
border-radius: 24px; |
|
|
|
img { |
|
|
|
width: 56px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
