|
|
@ -1,6 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<Dialog @close="close"> |
|
|
<Dialog @close="close"> |
|
|
<div class="search-content"> |
|
|
|
|
|
<div class="bar"> |
|
|
<div class="bar"> |
|
|
<div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div> |
|
|
<div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div> |
|
|
<div class="stick"></div> |
|
|
<div class="stick"></div> |
|
|
@ -8,6 +7,7 @@ |
|
|
<input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" /> |
|
|
<input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" /> |
|
|
<img :src="theme.images.searchClear" class="clear" v-if="keywords" @click="clear" /> |
|
|
<img :src="theme.images.searchClear" class="clear" v-if="keywords" @click="clear" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="search-content"> |
|
|
<div class="top" v-if="!showVoice"> |
|
|
<div class="top" v-if="!showVoice"> |
|
|
<div class="facs"> |
|
|
<div class="facs"> |
|
|
<h1 class="title">公共设施</h1> |
|
|
<h1 class="title">公共设施</h1> |
|
|
@ -126,31 +126,11 @@ onBeforeUnmount(() => { |
|
|
position: relative; |
|
|
position: relative; |
|
|
z-index: 50; |
|
|
z-index: 50; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.search-content { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 315px; |
|
|
|
|
|
right: 40px; |
|
|
|
|
|
bottom: 302px; |
|
|
|
|
|
left: 40px; |
|
|
|
|
|
background: var(--search-background); |
|
|
|
|
|
backdrop-filter: blur(10px); |
|
|
|
|
|
border-radius: var(--searchBar-borderRadius); |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: stretch; |
|
|
|
|
|
z-index: 2; |
|
|
|
|
|
.title { |
|
|
|
|
|
font-weight: 900; |
|
|
|
|
|
font-size: 24px; |
|
|
|
|
|
line-height: 28px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
|
} |
|
|
|
|
|
.bar { |
|
|
.bar { |
|
|
position: absolute; |
|
|
|
|
|
top: -55px; |
|
|
|
|
|
left: 28px; |
|
|
|
|
|
right: 28px; |
|
|
|
|
|
|
|
|
position: fixed; |
|
|
|
|
|
top: 260px; |
|
|
|
|
|
left: 68px; |
|
|
|
|
|
right: 68px; |
|
|
background: var(--search-barBackground); |
|
|
background: var(--search-barBackground); |
|
|
border: var(--searchBar-border); |
|
|
border: var(--searchBar-border); |
|
|
box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05); |
|
|
box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05); |
|
|
@ -160,6 +140,7 @@ onBeforeUnmount(() => { |
|
|
padding-right: 10px; |
|
|
padding-right: 10px; |
|
|
padding-left: 40px; |
|
|
padding-left: 40px; |
|
|
height: 100px; |
|
|
height: 100px; |
|
|
|
|
|
z-index: 52; |
|
|
.icon { |
|
|
.icon { |
|
|
width: 56px; |
|
|
width: 56px; |
|
|
height: 56px; |
|
|
height: 56px; |
|
|
@ -200,6 +181,24 @@ onBeforeUnmount(() => { |
|
|
width: 190px; |
|
|
width: 190px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.search-content { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 315px; |
|
|
|
|
|
right: 40px; |
|
|
|
|
|
bottom: 302px; |
|
|
|
|
|
left: 40px; |
|
|
|
|
|
background: var(--search-background); |
|
|
|
|
|
backdrop-filter: blur(10px); |
|
|
|
|
|
border-radius: var(--searchBar-borderRadius); |
|
|
|
|
|
z-index: 2; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
.title { |
|
|
|
|
|
font-weight: 900; |
|
|
|
|
|
font-size: 24px; |
|
|
|
|
|
line-height: 28px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.top { |
|
|
.top { |
|
|
height: 460px; |
|
|
height: 460px; |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
|