195 lines
3.9 KiB
Vue
Executable File
195 lines
3.9 KiB
Vue
Executable File
<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>
|
|
</div>
|
|
</div>
|
|
<!-- 热门搜索 -->
|
|
<div class="search-content">
|
|
<div class="search-text">热门搜索</div>
|
|
<div class="search-label">
|
|
<span>Bocconi</span>
|
|
<span>Bocconi</span>
|
|
<span>Bocconi</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "SearchBox",
|
|
data() {
|
|
return {
|
|
searchWinShow: false,//显示搜索弹窗
|
|
searchText: '',
|
|
showClear: false, //显示清除按钮
|
|
}
|
|
},
|
|
props: ["issearch"],
|
|
|
|
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 = ""
|
|
}
|
|
},
|
|
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> |