mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-06-10 03:57:32 +08:00
feat: searchbar集成到header
This commit is contained in:
@@ -308,7 +308,6 @@ export default {
|
|||||||
border: 1px solid var(--normal-border-color);
|
border: 1px solid var(--normal-border-color);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
margin-bottom: 4px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -331,6 +330,7 @@ export default {
|
|||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
min-width: 350px;
|
min-width: 350px;
|
||||||
|
margin-top: 4px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -26,6 +26,11 @@
|
|||||||
|
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
<div class="header-content-right">
|
<div class="header-content-right">
|
||||||
|
<SearchDropdown
|
||||||
|
ref="searchDropdown"
|
||||||
|
v-if="!isMobile || showSearch"
|
||||||
|
@close="closeSearch"
|
||||||
|
/>
|
||||||
<!-- 搜索 -->
|
<!-- 搜索 -->
|
||||||
<ToolTip v-if="isMobile" content="搜索" placement="bottom">
|
<ToolTip v-if="isMobile" content="搜索" placement="bottom">
|
||||||
<div class="header-icon-item" @click="search">
|
<div class="header-icon-item" @click="search">
|
||||||
@@ -106,7 +111,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
<SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -144,8 +144,7 @@ defineExpose({
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.search-dropdown {
|
.search-dropdown {
|
||||||
margin-top: 20px;
|
width: 300px;
|
||||||
width: 500px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-mobile-trigger {
|
.search-mobile-trigger {
|
||||||
@@ -154,7 +153,7 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
padding: 10px;
|
padding: 2px 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div v-if="!isMobile" class="search-container">
|
<div v-if="!isMobile" class="search-container">
|
||||||
<div class="search-title">一切可能,从此刻启航,在此遇见灵感与共鸣</div>
|
<div class="search-title">一切可能,从此刻启航,在此遇见灵感与共鸣</div>
|
||||||
<SearchDropdown />
|
<!-- <SearchDropdown /> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="topic-container">
|
<div class="topic-container">
|
||||||
@@ -379,7 +379,6 @@ onBeforeUnmount(() => {
|
|||||||
/** 供 InfiniteLoadMore 重建用的 key:筛选/Tab 改变即重建内部状态 */
|
/** 供 InfiniteLoadMore 重建用的 key:筛选/Tab 改变即重建内部状态 */
|
||||||
const ioKey = computed(() => asyncKey.value.join('::'))
|
const ioKey = computed(() => asyncKey.value.join('::'))
|
||||||
|
|
||||||
|
|
||||||
// 页面选项同步到全局状态
|
// 页面选项同步到全局状态
|
||||||
watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
|
watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
|
||||||
selectedCategoryGlobal.value = newCategory
|
selectedCategoryGlobal.value = newCategory
|
||||||
|
|||||||
Reference in New Issue
Block a user