parent
d784d757ac
commit
9144eb9231
23 changed files with 543 additions and 221 deletions
|
After Width: | Height: | Size: 730 KiB |
|
After Width: | Height: | Size: 997 B |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 419 B |
@ -1,30 +1,50 @@ |
||||
export const messages = { |
||||
"zh": { |
||||
i18n: { |
||||
breadcrumb: "国际化产品", |
||||
tips: "通过切换语言按钮，来改变当前内容的语言。", |
||||
btn: "切换英文", |
||||
title1: "常用用法", |
||||
p1: "要是你把你的秘密告诉了风，那就别怪风把它带给树。", |
||||
p2: "没有什么比信念更能支撑我们度过艰难的时光了。", |
||||
p3: "只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。", |
||||
title2: "组件插值", |
||||
info: "Element组件需要国际化，请参考 {action}。", |
||||
value: "文档" |
||||
'zh': { |
||||
column: { |
||||
classification: '所属分类', |
||||
label: '主题', |
||||
titlePlaceholder: '请输入搜索内容', |
||||
selectPlaceholder: '请选择', |
||||
all: '不限', |
||||
hot: '热点内容', |
||||
latestNews: '最新资讯', |
||||
views: '浏览', |
||||
download: '下载', |
||||
attachmentDownload: '附件下载', |
||||
editor: '编辑', |
||||
auditor: '审核', |
||||
comingSoon: '即将召开', |
||||
alreadyHeld: '已经召开', |
||||
content: '内容介绍', |
||||
time: '时间', |
||||
address: '地址', |
||||
online: '线上', |
||||
speaker: '主讲人', |
||||
series: '演讲系列', |
||||
} |
||||
}, |
||||
"en": { |
||||
i18n: { |
||||
breadcrumb: "International Products", |
||||
tips: "Click on the button to change the current language. ", |
||||
btn: "Switch Chinese", |
||||
title1: "Common usage", |
||||
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
||||
p2: "Nothing can help us endure dark times better than our faith. ", |
||||
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
||||
title2: "Component interpolation", |
||||
info: "The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.", |
||||
value: "documentation" |
||||
'en': { |
||||
column: { |
||||
classification: 'Type', |
||||
label: 'Topic', |
||||
titlePlaceholder: 'Please enter the search content', |
||||
selectPlaceholder: 'Please Select', |
||||
all: 'All', |
||||
hot: 'Most View', |
||||
latestNews: 'Latest News', |
||||
views: 'Views', |
||||
download: 'Download', |
||||
attachmentDownload: 'Attachment Download', |
||||
edit: 'Editor', |
||||
auditor: 'Auditor', |
||||
comingSoon: 'Coming Soon', |
||||
alreadyHeld: 'Already Held', |
||||
content: 'Abstract', |
||||
time: 'Time', |
||||
address: 'Location', |
||||
online: 'Online', |
||||
speaker: 'Speaker', |
||||
series: 'Series' |
||||
} |
||||
} |
||||
}; |
||||
@ -0,0 +1,164 @@ |
||||
<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"> |
||||
<i class="icon"> |
||||
<img src="@/assets/images/search-white.png" alt=""> |
||||
</i> |
||||
</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, { |
||||
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 { |
||||
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 { |
||||
display: inline-flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 62px; |
||||
height: 62px; |
||||
background: #1583FF; |
||||
border-radius: 0px 6px 6px 0px; |
||||
} |
||||
} |
||||
.list { |
||||
li { |
||||
margin-top: 60px; |
||||
} |
||||
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); |
||||
} |
||||
} |
||||
.none { |
||||
margin-top: 118px; |
||||
text-align: center; |
||||
.text { |
||||
margin-top: 59px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
} |
||||
} |
||||
</style> |
||||
Binary file not shown.
Loading…
Reference in new issue