|
|
|
@ -3,21 +3,29 @@ |
|
|
|
<div class="articles"> |
|
|
|
<div class="articles"> |
|
|
|
<div class="top"> |
|
|
|
<div class="top"> |
|
|
|
<div class="search"> |
|
|
|
<div class="search"> |
|
|
|
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title"> |
|
|
|
<input ref="search" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
:placeholder="$t('column.titlePlaceholder')" |
|
|
|
|
|
|
|
v-model="title"> |
|
|
|
<i class="el-icon-search icon"></i> |
|
|
|
<i class="el-icon-search icon"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="result">包含 “{{ title }}” 的搜索结果</p> |
|
|
|
<p class="result">包含 “{{ title }}” 的搜索结果</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<ul v-if="articles.length" class="list"> |
|
|
|
<ul v-if="articles.length" |
|
|
|
<li v-for="(item, i) in articles" :key="i"> |
|
|
|
class="list"> |
|
|
|
|
|
|
|
<li v-for="(item, i) in articles" |
|
|
|
|
|
|
|
:key="i"> |
|
|
|
<h6 @click="toArtice(item)">{{ item.title }}</h6> |
|
|
|
<h6 @click="toArtice(item)">{{ item.title }}</h6> |
|
|
|
<div class="des" v-html="item.mainBody"></div> |
|
|
|
<div class="des" |
|
|
|
<Breadcrumb :data.sync="item.routes"/> |
|
|
|
v-html="item.mainBody"></div> |
|
|
|
|
|
|
|
<Breadcrumb :data.sync="item.routes" /> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<div v-else class="none"> |
|
|
|
<div v-else |
|
|
|
<img src="@/assets/images/none.png" alt=""> |
|
|
|
class="none"> |
|
|
|
|
|
|
|
<img src="@/assets/images/none.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
<p class="text">没有找到您搜索的内容，您可尝试搜索其他关键词。</p> |
|
|
|
<p class="text">没有找到您搜索的内容，您可尝试搜索其他关键词。</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -32,7 +40,7 @@ import mixins from '@/mixins/article' |
|
|
|
import Breadcrumb from '@/components/breadcrumb' |
|
|
|
import Breadcrumb from '@/components/breadcrumb' |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
mixins: [mixins], |
|
|
|
mixins: [mixins], |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
title: this.$store.state.content.keyword, |
|
|
|
title: this.$store.state.content.keyword, |
|
|
|
searchTimer: null, |
|
|
|
searchTimer: null, |
|
|
|
@ -43,14 +51,14 @@ export default { |
|
|
|
Breadcrumb |
|
|
|
Breadcrumb |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
title() { |
|
|
|
title () { |
|
|
|
clearTimeout(this.searchTimer) |
|
|
|
clearTimeout(this.searchTimer) |
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
this.getArticle() |
|
|
|
this.getArticle() |
|
|
|
}, 500) |
|
|
|
}, 500) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
this.getArticle() |
|
|
|
this.getArticle() |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
@ -58,7 +66,7 @@ export default { |
|
|
|
'setKeyword' |
|
|
|
'setKeyword' |
|
|
|
]), |
|
|
|
]), |
|
|
|
// 查询文章列表 |
|
|
|
// 查询文章列表 |
|
|
|
getArticle() { |
|
|
|
getArticle () { |
|
|
|
this.setKeyword('') |
|
|
|
this.setKeyword('') |
|
|
|
this.$post(this.api.newlyPublishedArticles, { |
|
|
|
this.$post(this.api.newlyPublishedArticles, { |
|
|
|
siteId: this.site, |
|
|
|
siteId: this.site, |
|
|
|
@ -82,7 +90,7 @@ export default { |
|
|
|
] |
|
|
|
] |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.articles = list |
|
|
|
this.articles = list |
|
|
|
}).catch(res => {}) |
|
|
|
}).catch(res => { }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
@ -90,95 +98,104 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.wrap { |
|
|
|
.wrap { |
|
|
|
background: url(../../assets/images/result-bg1.png) no-repeat, |
|
|
|
background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat; |
|
|
|
url(../../assets/images/result-bg2.png) bottom right/auto no-repeat; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.articles { |
|
|
|
.articles { |
|
|
|
width: 100%; |
|
|
|
width: 70%; |
|
|
|
padding-top: 47px; |
|
|
|
padding-top: 47px; |
|
|
|
margin: 0 auto; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.top { |
|
|
|
.top { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
.result { |
|
|
|
.result { |
|
|
|
font-size: 18px; |
|
|
|
font-size: 18px; |
|
|
|
color: #969696; |
|
|
|
color: #969696; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.search { |
|
|
|
.search { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
height: 62px; |
|
|
|
height: 62px; |
|
|
|
margin-right: 30px; |
|
|
|
margin-right: 30px; |
|
|
|
border-radius: 6px; |
|
|
|
border-radius: 6px; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
input { |
|
|
|
input { |
|
|
|
width: 510px; |
|
|
|
width: 510px; |
|
|
|
padding: 0 20px; |
|
|
|
padding: 0 20px; |
|
|
|
font-size: 18px; |
|
|
|
font-size: 18px; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
border: 0; |
|
|
|
border: 0; |
|
|
|
outline: none; |
|
|
|
outline: none; |
|
|
|
background: #F7F7F7; |
|
|
|
background: #f7f7f7; |
|
|
|
} |
|
|
|
} |
|
|
|
.icon { |
|
|
|
.icon { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
top: 17px; |
|
|
|
top: 17px; |
|
|
|
right: 15px; |
|
|
|
right: 15px; |
|
|
|
font-size: 26px; |
|
|
|
font-size: 26px; |
|
|
|
color: #ccc; |
|
|
|
color: #ccc; |
|
|
|
border-radius: 0px 6px 6px 0px; |
|
|
|
border-radius: 0px 6px 6px 0px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.list { |
|
|
|
.list { |
|
|
|
li { |
|
|
|
li { |
|
|
|
margin-top: 30px; |
|
|
|
margin-top: 30px; |
|
|
|
border-bottom: 1px dashed #e3e3e3; |
|
|
|
border-bottom: 1px dashed #e3e3e3; |
|
|
|
} |
|
|
|
} |
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
font-size: 22px; |
|
|
|
font-size: 22px; |
|
|
|
color: #1583FF; |
|
|
|
color: #1583ff; |
|
|
|
line-height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
.des { |
|
|
|
.des { |
|
|
|
font-size: 18px; |
|
|
|
font-size: 18px; |
|
|
|
line-height: 36px; |
|
|
|
line-height: 36px; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
@include mul-ellipsis(2); |
|
|
|
@include mul-ellipsis(2); |
|
|
|
} |
|
|
|
} |
|
|
|
.breadcrumb { |
|
|
|
.breadcrumb { |
|
|
|
margin: 15px 0 30px; |
|
|
|
margin: 15px 0 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.none { |
|
|
|
.none { |
|
|
|
margin-top: 118px; |
|
|
|
margin-top: 118px; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
.text { |
|
|
|
.text { |
|
|
|
margin-top: 59px; |
|
|
|
margin-top: 59px; |
|
|
|
font-size: 18px; |
|
|
|
font-size: 18px; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@media (min-width: 280px) and (max-width: 750px) { |
|
|
|
@media (max-width: 1100px) { |
|
|
|
.articles{ |
|
|
|
.top { |
|
|
|
width: 100%; |
|
|
|
flex-direction: column; |
|
|
|
.top{ |
|
|
|
align-items: flex-start; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.search{ |
|
|
|
|
|
|
|
width: 95%; |
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.none{ |
|
|
|
.search { |
|
|
|
margin-top: 50px; |
|
|
|
margin-bottom: 10px; |
|
|
|
.text{ |
|
|
|
} |
|
|
|
font-size: .5rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 750px) { |
|
|
|
|
|
|
|
.articles { |
|
|
|
|
|
|
|
width: 90%; |
|
|
|
|
|
|
|
.top { |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.search { |
|
|
|
|
|
|
|
width: 95%; |
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.none { |
|
|
|
|
|
|
|
margin-top: 50px; |
|
|
|
|
|
|
|
.text { |
|
|
|
|
|
|
|
font-size: 0.5rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
