a1300399510@qq.com 提交于 2023/04/04 -14:40:01
This commit is contained in:
@@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="head-search flexcenter" v-if="issearch" @click="searchClick()">
|
||||
<img class="head-search-icon" src="@/assets/img/headerNav/search.png" />
|
||||
<span>搜索</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索弹窗 -->
|
||||
<div class="search-window" :class="{ 'searchShow': searchWinShow == true }">
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-input flexacenter">
|
||||
<div class="form flexacenter">
|
||||
<img class="search-icon" src="@/assets/img/headerNav/search.png">
|
||||
<input class="flex1" ref="searchInput" v-model="searchText" type="text" placeholder="请输入搜索关键词" />
|
||||
<img v-if="searchText" @click.stop="clearText()" class="clear-text" src="@/assets/img/icon/clear.png">
|
||||
</div>
|
||||
|
||||
<div class="search-close" @click="searchClose()">取消</div>
|
||||
</div>
|
||||
<!-- 历史搜索 -->
|
||||
<div class="search-content flexcolumn">
|
||||
<div class="search-text">历史搜索</div>
|
||||
<div class="search-label">
|
||||
<span>香港大学</span>
|
||||
<span>香港大学</span>
|
||||
<span>香港大学</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 热门搜索 -->
|
||||
<div class="search-content">
|
||||
<div class="search-text">热门搜索</div>
|
||||
<div class="search-label">
|
||||
<span v-for="(item, index) in hotSearchkeywords" :key="index" @click="toSearchResult(item)">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchBox",
|
||||
data() {
|
||||
return {
|
||||
searchWinShow: false,//显示搜索弹窗
|
||||
searchText: '',
|
||||
showClear: false, //显示清除按钮
|
||||
}
|
||||
},
|
||||
props: ["issearch", "hotSearchkeywords"],
|
||||
|
||||
methods: {
|
||||
collapseClick() {
|
||||
if (this.collapseShow == true) this.collapseShow = false;
|
||||
else this.collapseShow = true;
|
||||
},
|
||||
// 点击显示搜索弹窗
|
||||
searchClick() {
|
||||
this.searchWinShow = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchInput.focus();
|
||||
})
|
||||
},
|
||||
// 点击隐藏搜索弹窗
|
||||
searchClose() {
|
||||
this.searchWinShow = false
|
||||
},
|
||||
// 搜索键盘、搜索
|
||||
search(categoryId) {
|
||||
this.$refs.searchInput.blur();
|
||||
},
|
||||
// 清空文本框
|
||||
clearText() {
|
||||
this.searchText = ""
|
||||
},
|
||||
|
||||
// 跳转搜索结果
|
||||
toSearchResult(kw){
|
||||
this.$router.push(`/searchResult?kw=${kw}`)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.searchText.length > 0) this.showClear = true
|
||||
else this.showClear = false
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.head-search {
|
||||
width: 2.4rem;
|
||||
height: .8rem;
|
||||
border-radius: 2.56rem;
|
||||
background-color: rgba(235, 235, 235, 1);
|
||||
color: #AAAAAA;
|
||||
font-size: .3467rem;
|
||||
|
||||
.head-search-icon {
|
||||
width: .4rem;
|
||||
height: .4rem;
|
||||
margin-right: .14rem;
|
||||
}
|
||||
|
||||
margin-right: .4rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 搜索弹窗
|
||||
.search-window {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
z-index: 9;
|
||||
|
||||
&.searchShow {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 0.27rem 0.32rem 0.27rem;
|
||||
justify-content: space-between;
|
||||
|
||||
.search-icon {
|
||||
width: .4rem;
|
||||
height: .4rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 90%;
|
||||
background-color: #ebebeb;
|
||||
height: 1.12rem;
|
||||
line-height: 1.12rem;
|
||||
border-radius: 0.56rem;
|
||||
padding-left: .4rem;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 0.36rem;
|
||||
border: none;
|
||||
outline: 0;
|
||||
color: #000;
|
||||
padding-left: .34rem;
|
||||
height: 1.12rem;
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
.clear-text {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
padding: .48rem;
|
||||
}
|
||||
|
||||
.search-close {
|
||||
width: 10%;
|
||||
font-size: 0.36rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.search-content {
|
||||
padding: 0.27rem 0.32rem 0.27rem;
|
||||
margin-top: 0.2rem;
|
||||
|
||||
.search-text {
|
||||
color: #7F7F7F;
|
||||
font-size: 0.32rem;
|
||||
margin-bottom: .32rem;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
padding: 0 0.2rem;
|
||||
height: 0.96rem;
|
||||
line-height: 0.96rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.16rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-size: 0.36rem;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -30,9 +30,7 @@
|
||||
<div class="search-content">
|
||||
<div class="search-text">热门搜索</div>
|
||||
<div class="search-label">
|
||||
<span>Bocconi</span>
|
||||
<span>Bocconi</span>
|
||||
<span>Bocconi</span>
|
||||
<span v-for="(item, index) in hotSearchkeywords" :key="index" @click="toSearchResult(item)">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,7 +47,7 @@ export default {
|
||||
showClear: false, //显示清除按钮
|
||||
}
|
||||
},
|
||||
props: ["issearch"],
|
||||
props: ["issearch", "hotSearchkeywords"],
|
||||
|
||||
methods: {
|
||||
collapseClick() {
|
||||
@@ -74,7 +72,12 @@ export default {
|
||||
// 清空文本框
|
||||
clearText() {
|
||||
this.searchText = ""
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转搜索结果
|
||||
toSearchResult(kw){
|
||||
this.$router.push(`/searchResult?kw=${kw}`)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.searchText.length > 0) this.showClear = true
|
||||
|
||||
Reference in New Issue
Block a user