<template>
|
<div class="search-index">
|
<div class="index-title1">热门搜索</div>
|
<div class="index-hot">
|
<div v-for="item in hotList" :key="item.id" @click="SearchHot(item)">
|
{{ item.title }}
|
</div>
|
</div>
|
<div class="index-title2">
|
历史搜索
|
<span class="remove-btn" @click="ClearHis">清除</span>
|
</div>
|
<div class="index-history">
|
<template v-for="item in historyList">
|
<div class="search-msg" :key="item.key" @click="SearchHis(item)">
|
<svg t="1639023179293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
p-id="6665" width="200" height="200">
|
<path
|
d="M512 160c194.410667 0 352 157.589333 352 352S706.410667 864 512 864l-2.538667-0.106667c-91.477333-7.274667-165.738667-38.08-221.44-91.989333L288 842.666667h-64V640H405.333333v64h-92.842666c46.250667 56.917333 112.490667 88.725333 200.768 96l6.677333-0.106667C675.328 795.690667 800 668.394667 800 512c0-159.061333-128.938667-288-288-288S224 352.938667 224 512h-64c0-194.410667 157.589333-352 352-352zM469.333333 320h64v160h160v64H469.333333V320z"
|
p-id="6666" fill="#C7C7C7"></path>
|
</svg>
|
<span>{{ item.searchName }}</span>
|
</div>
|
<div class="line" :key="item.key"></div>
|
</template>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
GetSearchHomeInfo as Api_GetSearchHomeInfo,
|
} from '@/api/apilist'
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
hotList: [],
|
historyList: [],
|
}
|
},
|
methods: {
|
SearchHot(item) {
|
console.log(item);
|
this.$router.push({
|
name: "search-results",
|
query: {searchType: "title", searchName: item.title, type: item.type}
|
});
|
},
|
SearchHis(item) {
|
this.$router.push({
|
name: "search-results",
|
query: {searchType: item.searchType, searchName: item.searchName}
|
});
|
},
|
ClearHis() {
|
localStorage.clear();
|
this.historyList = [];
|
}
|
},
|
created() {
|
Api_GetSearchHomeInfo().then(res => {
|
this.hotList = res.rmtj;
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert("请求错误！");
|
});
|
|
if (localStorage.searchHistory) {
|
this.historyList = eval(localStorage.searchHistory).reverse();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.search-index {
|
width: 90%;
|
margin-left: 5%;
|
}
|
|
.index-title1 {
|
text-align: left;
|
font-size: 1.87rem;
|
font-family: Source Han Serif CN;
|
font-weight: bold;
|
line-height: 5.87rem;
|
color: #BC0000;
|
opacity: 1;
|
}
|
|
.index-hot {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: flex-start;
|
}
|
|
.index-hot > div {
|
width: 30%;
|
border: 1px solid #999999;
|
border-radius: 140px;
|
margin-right: 3%;
|
margin-bottom: 2vh;
|
cursor: pointer;
|
|
font-size: 1.62rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 3.37rem;
|
color: #767676;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.index-hot > div:first-child {
|
border: 0;
|
color: #FFFFFF;
|
background: #BC0000;
|
}
|
|
.index-title2 {
|
text-align: left;
|
font-size: 1.75rem;
|
font-family: Source Han Serif CN;
|
font-weight: bold;
|
line-height: 5.87rem;
|
color: #333333;
|
}
|
|
.index-title2 .remove-btn {
|
float: right;
|
font-size: 1.5rem;
|
font-family: Source Han Serif CN;
|
font-weight: 400;
|
line-height: 5.87rem;
|
color: #767676;
|
cursor: pointer;
|
}
|
|
.index-history .search-msg {
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: center;
|
|
font-size: 1.62rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 3.37rem;
|
color: #999999;
|
}
|
|
.search-msg span {
|
cursor: pointer;
|
}
|
|
.search-msg svg {
|
width: 3vh;
|
height: 3vh;
|
margin-right: 1vh;
|
cursor: pointer;
|
}
|
|
.index-history .line {
|
border: 1px solid #E4E4E4;
|
margin-top: 1vh;
|
margin-bottom: 1vh;
|
}
|
</style>
|
