<template>
|
<div class="search-results">
|
<div class="results-title">搜索结果</div>
|
<div class="results-list">
|
<navbar ref="navbar" v-model="type">
|
<tab-item id="1" data-type="1">红色记忆</tab-item>
|
<tab-item id="2" data-type="2">红色精神</tab-item>
|
<tab-item id="3" data-type="3">红色景区</tab-item>
|
<tab-item id="4" data-type="4">红色人物</tab-item>
|
</navbar>
|
<tab-container v-model="type">
|
<tab-container-item id="1">
|
<template v-for="item in searchItems.hsjy.data">
|
<div class="text-item" :key="item.key" @click="ToMemoryDetail(item.id,item.name)">
|
<div class="item-title">{{ item.name }}</div>
|
<div class="item-context">{{ item.keyWord }}</div>
|
</div>
|
<div class="line" :key="item.key"></div>
|
</template>
|
</tab-container-item>
|
<tab-container-item id="2">
|
<template v-for="item in searchItems.hsjs.data">
|
<div class="text-item" :key="item.key" @click="ToSpiritDetail(item.id,item.name)">
|
<div class="item-title">{{ item.name }}</div>
|
<div class="item-context">{{ item.keyWord }}</div>
|
</div>
|
<div class="line" :key="item.key"></div>
|
</template>
|
</tab-container-item>
|
<tab-container-item id="3">
|
<template v-for="item in searchItems.hsjq.data">
|
<div class="image-item" :key="item.key" @click="ToSceneryDetail(item.id,item.name)">
|
<div class="item-left">
|
<img :src="item.img"/>
|
</div>
|
<div class="item-right">
|
<div class="item-title">{{ item.name }}</div>
|
<div class="item-context">{{ item.keyWord }}</div>
|
</div>
|
</div>
|
<div class="line" :key="item.key"></div>
|
</template>
|
</tab-container-item>
|
<tab-container-item id="4">
|
<template v-for="item in searchItems.hsrw.data">
|
<div class="image-item" :key="item.key" @click="ToPersonageDetail(item.id,item.name)">
|
<div class="item-left">
|
<img :src="item.img"/>
|
</div>
|
<div class="item-right">
|
<div class="item-title">{{ item.name }}</div>
|
<div class="item-context">{{ item.keyWord }}</div>
|
</div>
|
</div>
|
<div class="line" :key="item.key"></div>
|
</template>
|
</tab-container-item>
|
</tab-container>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {Navbar, TabItem, TabContainer, TabContainerItem} from 'mint-ui';
|
import {
|
GetSearchInfo as Api_GetSearchInfo,
|
} from '@/api/apilist'
|
|
export default {
|
name: "results",
|
components: {Navbar, TabItem, TabContainer, TabContainerItem},
|
data() {
|
return {
|
type: "1",
|
searchItems: [],
|
};
|
},
|
methods: {
|
ToMemoryDetail: function (id, name) {
|
this.$router.push({name: "memory-detail", query: {id: id, name: name}});
|
},
|
ToPersonageDetail: function (id, name) {
|
this.$router.push({name: "personage-detail", query: {id: id, name: name}});
|
},
|
ToSceneryDetail: function (id, name) {
|
this.$router.push({name: "scenery-detail", query: {id: id, name: name}});
|
},
|
ToSpiritDetail: function (id, name) {
|
this.$router.push({name: "spirit-detail", query: {id: id, name: name}});
|
},
|
},
|
watch: {},
|
created: function () {
|
let searchType = this.$route.query.searchType;
|
let searchName = this.$route.query.searchName;
|
let type = this.$route.query.type;
|
if (type) {
|
this.type = type.toString();
|
}
|
|
Api_GetSearchInfo(searchType, searchName).then(res => {
|
this.searchItems = res;
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert("请求错误！");
|
});
|
},
|
beforeRouteUpdate(to, from, next) {
|
if (to.fullPath != from.fullPath) {
|
let searchType = to.query.searchType
|
let searchName = to.query.searchName;
|
let type = to.query.type;
|
if (type) {
|
this.type = type.toString();
|
}
|
|
Api_GetSearchInfo(searchType, searchName).then(res => {
|
this.searchItems = [];
|
this.searchItems = res;
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert("请求错误！");
|
});
|
}
|
next();
|
},
|
}
|
</script>
|
|
<style scoped>
|
.search-results {
|
width: 90%;
|
margin-left: 5%;
|
}
|
|
.results-title {
|
text-align: left;
|
font-size: 1.87rem;
|
font-family: Source Han Serif CN;
|
font-weight: bold;
|
line-height: 5.87rem;
|
color: #767676;
|
opacity: 1;
|
}
|
|
.search-results .mint-navbar {
|
margin-bottom: 2vh;
|
}
|
|
.search-results .mint-navbar .mint-tab-item /deep/ .mint-tab-item-label {
|
font-size: 1.62rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 1.93rem;
|
color: #767676;
|
opacity: 1;
|
cursor: pointer
|
}
|
|
.search-results .mint-navbar .is-selected {
|
border-bottom: 2px solid #BC0000;
|
}
|
|
.search-results .mint-navbar .is-selected /deep/ .mint-tab-item-label {
|
color: #BC0000;
|
}
|
|
.search-results .mint-tab-container {
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item {
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .line {
|
width: 100%;
|
border: 1px solid #EEEEEE;
|
margin-bottom: 2vh;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .text-item {
|
width: 90%;
|
margin-bottom: 2vh;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .text-item .item-title {
|
text-align: left;
|
font-size: 2rem;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
line-height: 4rem;
|
color: #BC0000;
|
opacity: 1;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .text-item .item-context {
|
text-align: left;
|
font-size: 1.5rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 2.5rem;
|
color: #9B9B9B;
|
opacity: 1;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .image-item {
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: flex-start;
|
|
width: 90%;
|
margin-bottom: 2vh;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .image-item .item-left {
|
width: 30%;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .image-item .item-left img {
|
width: 100%;
|
height: 10vh;
|
border-radius: 10px;
|
object-fit: cover;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .image-item .item-right {
|
width: 70%;
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .image-item .item-title {
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
|
padding-left: 4vw;
|
font-size: 2rem;
|
font-family: Source Han Serif CN;
|
font-weight: bold;
|
line-height: 4rem;
|
color: #BC0000;
|
text-align: left;
|
|
}
|
|
.search-results .mint-tab-container .mint-tab-container-item .image-item .item-context {
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
|
padding-left: 4vw;
|
font-size: 1.62rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 2rem;
|
color: #767676;
|
text-align: left;
|
}
|
</style>
|
