粒子研究院前台前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
3.8 KiB

2 years ago
<template>
<div class="wrap">
<div class="articles">
<div class="top">
<div class="search">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
2 years ago
<i class="el-icon-search icon"></i>
2 years ago
</div>
<p class="result">包含 {{ title }} 的搜索结果</p>
</div>
<ul v-if="articles.length" class="list">
<li v-for="(item, i) in articles" :key="i">
<h6 @click="toArtice(item)">{{ item.title }}</h6>
<div class="des" v-html="item.mainBody"></div>
<Breadcrumb :data.sync="item.routes"/>
</li>
</ul>
<div v-else class="none">
<img src="@/assets/images/none.png" alt="">
<p class="text">没有找到您搜索的内容您可尝试搜索其他关键词</p>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import Setting from '@/setting'
import Util from '@/libs/util'
import mixins from '@/mixins/article'
import Breadcrumb from '@/components/breadcrumb'
export default {
mixins: [mixins],
data() {
return {
title: this.$store.state.content.keyword,
searchTimer: null,
articles: [],
}
},
components: {
Breadcrumb
},
watch: {
title() {
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => {
this.getArticle()
}, 500)
}
},
mounted() {
this.getArticle()
},
methods: {
...mapMutations('content', [
'setKeyword'
]),
// 查询文章列表
getArticle() {
this.setKeyword('')
this.$post(this.api.newlyPublishedArticles, {
2 years ago
siteId: this.$route.query.siteId || this.site,
pageNum: 1,
pageSize: 1000,
title: this.title
}).then(({ data }) => {
const list = Util.removeTag(data.records)
// 添加面包屑参数
list.map(e => {
e.routes = [
{
name: e.columnName,
query: {
id: e.columnId
}
},
{
name: e.title
}
]
})
this.articles = list
}).catch(res => {})
},
}
};
</script>
<style lang="scss" scoped>
.wrap {
background: url(../../assets/images/result-bg1.png) no-repeat,
url(../../assets/images/result-bg2.png) bottom right/auto no-repeat;
background-color: #fff;
}
.articles {
width: 1000px;
padding-top: 47px;
margin: 0 auto;
}
.top {
display: flex;
align-items: center;
.result {
font-size: 18px;
color: #969696;
}
}
.search {
2 years ago
position: relative;
2 years ago
display: inline-flex;
height: 62px;
margin-right: 30px;
border-radius: 6px;
overflow: hidden;
input {
width: 510px;
padding: 0 20px;
font-size: 18px;
color: #333;
border: 0;
outline: none;
background: #F7F7F7;
}
.icon {
2 years ago
position: absolute;
top: 17px;
right: 15px;
font-size: 26px;
color: #ccc;
2 years ago
border-radius: 0px 6px 6px 0px;
}
}
.list {
li {
2 years ago
margin-top: 30px;
border-bottom: 1px dashed #e3e3e3;
2 years ago
}
h6 {
margin-bottom: 10px;
font-size: 22px;
color: #1583FF;
line-height: 30px;
cursor: pointer;
}
.des {
font-size: 18px;
line-height: 36px;
color: #333;
@include mul-ellipsis(2);
}
2 years ago
.breadcrumb {
margin: 15px 0 30px;
}
2 years ago
}
.none {
margin-top: 118px;
text-align: center;
.text {
margin-top: 59px;
font-size: 18px;
color: #333;
}
}
@media (min-width: 280px) and (max-width: 750px) {
.articles{
width: 100%;
.top{
flex-direction: column;
.search{
width: 95%;
margin: 0 auto;
}
}
.none{
margin-top: 50px;
.text{
font-size: .5rem;
}
}
}
}
2 years ago
</style>