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 = { |
export const messages = { |
||||||
"zh": { |
'zh': { |
||||||
i18n: { |
column: { |
||||||
breadcrumb: "国际化产品", |
classification: '所属分类', |
||||||
tips: "通过切换语言按钮，来改变当前内容的语言。", |
label: '主题', |
||||||
btn: "切换英文", |
titlePlaceholder: '请输入搜索内容', |
||||||
title1: "常用用法", |
selectPlaceholder: '请选择', |
||||||
p1: "要是你把你的秘密告诉了风，那就别怪风把它带给树。", |
all: '不限', |
||||||
p2: "没有什么比信念更能支撑我们度过艰难的时光了。", |
hot: '热点内容', |
||||||
p3: "只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。", |
latestNews: '最新资讯', |
||||||
title2: "组件插值", |
views: '浏览', |
||||||
info: "Element组件需要国际化，请参考 {action}。", |
download: '下载', |
||||||
value: "文档" |
attachmentDownload: '附件下载', |
||||||
|
editor: '编辑', |
||||||
|
auditor: '审核', |
||||||
|
comingSoon: '即将召开', |
||||||
|
alreadyHeld: '已经召开', |
||||||
|
content: '内容介绍', |
||||||
|
time: '时间', |
||||||
|
address: '地址', |
||||||
|
online: '线上', |
||||||
|
speaker: '主讲人', |
||||||
|
series: '演讲系列', |
||||||
} |
} |
||||||
}, |
}, |
||||||
"en": { |
'en': { |
||||||
i18n: { |
column: { |
||||||
breadcrumb: "International Products", |
classification: 'Type', |
||||||
tips: "Click on the button to change the current language. ", |
label: 'Topic', |
||||||
btn: "Switch Chinese", |
titlePlaceholder: 'Please enter the search content', |
||||||
title1: "Common usage", |
selectPlaceholder: 'Please Select', |
||||||
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
all: 'All', |
||||||
p2: "Nothing can help us endure dark times better than our faith. ", |
hot: 'Most View', |
||||||
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
latestNews: 'Latest News', |
||||||
title2: "Component interpolation", |
views: 'Views', |
||||||
info: "The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.", |
download: 'Download', |
||||||
value: "documentation" |
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