yujialong 2 years ago
parent d784d757ac
commit 9144eb9231
  1. BIN
      src/assets/images/article-banner.png
  2. BIN
      src/assets/images/dot.png
  3. BIN
      src/assets/images/map.png
  4. BIN
      src/assets/images/none.png
  5. BIN
      src/assets/images/result-bg1.png
  6. BIN
      src/assets/images/result-bg2.png
  7. BIN
      src/assets/images/tel.png
  8. 68
      src/i18n/index.js
  9. 119
      src/layouts/footer/index.vue
  10. 47
      src/layouts/header/index.vue
  11. 4
      src/layouts/navbar/index.vue
  12. 13
      src/libs/util.js
  13. 8
      src/main.js
  14. 20
      src/pages/article/activity.vue
  15. 12
      src/pages/article/editor.css
  16. 27
      src/pages/article/index.vue
  17. 126
      src/pages/column/index.vue
  18. 164
      src/pages/column/result.vue
  19. 19
      src/pages/news/index.vue
  20. 6
      src/router/modules/column.js
  21. 55
      src/setting.js
  22. 4
      src/styles/common.scss
  23. BIN
      src/styles/font/ProximaNova-Regular.otf

Binary file not shown.

After

Width:  |  Height:  |  Size: 730 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 997 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

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'
}
}
};

@ -1,6 +1,6 @@
<template>
<div class="footer">
<div class="inner">
<div>
<div v-if="!showContactPath.includes($route.path)" class="footer">
<div class="info">
<div style="margin-right: 100px">
<img class="m-b-20" src="@/assets/images/iasf.png" alt="">
@ -17,6 +17,41 @@
</div>
<a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a>
</div>
<div v-else class="contact">
<div class="inner">
<div class="title">
<h6>Contact us</h6>
<p class="text">CONTACT US</p>
</div>
<div class="region">
<img class="dot" src="@/assets/images/dot.png" alt="">
<p class="name">Shenzhen</p>
</div>
<div class="info">
<img class="logo" src="@/assets/images/logo.png" alt="">
<div class="texts">
<div class="lines">
<div class="line">
<img class="icon" src="@/assets/images/mail.png" alt="">
Email: std@mail.iasf.ac.cn
</div>
<div class="line">
<img class="icon" src="@/assets/images/tel.png" alt="">
Telephone: 0086-755-21096026
</div>
<div class="line">
<img class="icon" src="@/assets/images/address.png" alt="">
Address: 268 Zhenyuan St, Building A3, Floor 3-6, Guangming District, Shenzhen, Guangdong, P.R.China
</div>
</div>
<div class="qrcode">
<!-- <img src="@/assets/images/about/qrcode.png" alt=""> -->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -26,8 +61,8 @@ export default {
mixins: [mixins],
data() {
return {
showContactPath: ['/news'],
columns: [],
isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 3
};
},
mounted(){
@ -51,14 +86,10 @@ export default {
</script>
<style lang="scss" scoped>
.footer{
padding: 64px 0 25px;
padding: 64px 10% 25px;
color: #fff;
background-color: #091733;
.inner {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.info {
display: flex;
margin-bottom: 100px;
@ -90,4 +121,76 @@ export default {
color: #6D7384;
}
}
.contact {
position: relative;
padding: 0 0 106px 0;
background: url(../../assets/images/map.png) 0 0/cover no-repeat;
.inner {
width: 1082px;
margin: 0 auto;
}
.title {
width: 419px;
height: 263px;
padding: 147px 0 0 40px;
background-color: #0854FE;
h6 {
z-index: 2;
position: relative;
margin-bottom: 20px;
font-size: 45px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #fff;
}
.text {
margin-top: -65px;
font-size: 48px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #4073e5;
}
}
.region {
position: absolute;
top: 152px;
left: 70%;
display: flex;
align-items: center;
font-size: 20px;
color: #fff;
img {
margin-right: 20px;
}
}
.info {
margin: 55px 0 0 8px;
.texts {
display: flex;
align-items: center;
margin-top: 24px;
}
.item {
margin-right: 75px;
}
.line {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
color: #fff;
img {
margin-right: 8px;
}
}
}
.qrcode {
text-align: center;
.text {
margin-top: 10px;
font-size: 12px;
color: #fff;
}
}
}
</style>

@ -11,10 +11,10 @@
<navbar ref="nav" :isHome.sync="isHome"></navbar>
<div class="tools">
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click="toggleSearch">
<img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click="toggleSearch">
<img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click="toggleLang">
<div v-if="showSearch" class="search-wrap">
<i class="el-icon-search icon"></i>
<input ref="search" type="text" placeholder="请输入文章标题" v-model="title">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
<i class="el-icon-search icon" @click="handleSearch"></i>
</div>
</div>
</div>
@ -22,7 +22,6 @@
<script>
import { mapMutations } from 'vuex'
import Setting from '@/setting'
import util from '@/libs/util'
import navbar from '../navbar'
export default {
data() {
@ -40,12 +39,6 @@ export default {
'$route'() {
this.isHome = this.$route.path === '/home'
},
title: function(val) {
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => {
this.handleSearch()
}, 500)
}
},
beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll)
@ -59,9 +52,7 @@ export default {
'setKeyword'
]),
toIndex() {
this.$refs.nav.jump({
index: '/index/list'
})
this.$refs.nav.jump()
},
// (home)
handleScroll () {
@ -79,10 +70,33 @@ export default {
this.$refs.search.focus()
})
},
//
toggleLang() {
let id = +(this.$route.query.siteId || this.$store.state.content.site)
// id1/2 3/4 5/6
if (id == 1) {
id = 2
} else if (id == 2) {
id = 1
} else if (id == 3) {
id = 4
} else if (id == 4) {
id = 3
} else if (id == 5) {
id = 6
} else if (id == 6) {
id = 5
}
location.href = this.$router.resolve(`/column?siteId=${id}`).href
location.reload()
},
//
handleSearch() {
this.setKeyword(this.title)
this.title && this.$router.push(`/column`)
if (this.title) {
this.showSearch = false
this.$router.push(`/column/result`)
}
}
}
};
@ -135,14 +149,15 @@ $height: 90px;
.icon {
position: absolute;
top: 20px;
left: 22px;
right: 22px;
font-size: 16px;
color: #959595;
cursor: pointer;
}
input {
width: 300px;
height: 36px;
padding: 0 15px 0 40px;
padding: 0 40px 0 15px;
font-size: 16px;
color: #333;
line-height: 36px;

@ -53,7 +53,7 @@ export default {
}).then(({ data }) => {
this.menus = data
if (data.length) {
if (!this.$route.query.id) this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
if (!this.$route.query.id && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
if (!this.active) this.active = data[0].id
this.$nextTick(() => {
const menu = document.querySelectorAll('.el-submenu')
@ -93,7 +93,7 @@ export default {
},
//
jump(id) {
this.getPath(this.menus ,id)
this.getPath(this.menus ,id || this.menus[0].id)
this.columnTo(this.toItem)
}
}

@ -169,6 +169,19 @@ const util = {
e.mainBody = e[prop].replace(/(<[^>]+>)|((&nbsp;)+)/g , '')
})
return list
},
// 获取url里的参数
getQuery(name) {
let url = window.location.href
let param = new Object()
if (url.indexOf("?") != -1) {
let str = url.split('?')[1]
let strs = str.split("&")
for(var i = 0; i < strs.length; i ++) {
param[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1])
}
}
return param[name] || null
}
};

@ -13,8 +13,7 @@ import core from '@/libs/core'
import api from "@/api";
import store from "@/store";
import Setting from "@/setting";
import permission from "@/router/permission";
import Util from '@/libs/util'
// 插件
import plugins from "@/plugins";
import filters from "@/plugins/filters";
@ -29,12 +28,13 @@ Vue.prototype.$post = post;
Vue.prototype.$del = del;
Vue.prototype.$put = put;
Vue.prototype.core = core
Vue.config.productionTip = false;
Vue.use(VueI18n);
Vue.use(ElementUI, { size: "small" });
const siteId = Util.getQuery('siteId')
const i18n = new VueI18n({
locale: Setting.i18n.default,
locale: Setting.enIds.includes(siteId ? +siteId : store.state.content.site) ? 'en' : 'zh',
messages
});

@ -5,18 +5,19 @@
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">日期{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div>
<div v-if="form.offlineLocation" class="meta">地址{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation" class="meta">线上{{ form.onlineLocation }}</div>
<div v-if="form.keynoteSpeaker" class="meta">主讲人{{ form.keynoteSpeaker }}</div>
<div class="meta">{{$t('column.time')}}{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div>
<div v-if="form.offlineLocation" class="meta">{{$t('column.address')}}{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation" class="meta">{{$t('column.online')}}{{ form.onlineLocation }}</div>
<div v-if="form.keynoteSpeaker" class="meta">{{$t('column.speaker')}}{{ form.keynoteSpeaker }}</div>
<div v-if="form.lectureSeries" class="meta">{{$t('column.series')}}{{ form.lectureSeries }}</div>
<h6>内容介绍</h6>
<h6>{{$t('column.content')}}</h6>
<div v-html="form.mainBody"></div>
</div>
<div class="right">
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
<p class="l-title">热点内容</p>
<p class="l-title">{{$t('column.hot')}}</p>
<ul class="list">
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
@ -24,7 +25,7 @@
</li>
</ul>
<p class="l-title">最新资讯</p>
<p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list">
<li v-for="(item, i) in news" :key="i" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
@ -172,14 +173,11 @@ export default {
}
.meta {
margin: 10px 0;
font-size: 16px;
font-size: 18px;
font-weight: 600;
color: #333;
}
/deep/.des {
p {
margin: 1em 0;
}
img {
max-width: 100%;
}

@ -4,6 +4,7 @@
background-color: #ededed;
}
.tiny-wrap {
/* width: 900px; */
margin: 0 auto;
}
.tiny-wrap blockquote p {
@ -25,22 +26,27 @@
.tiny-wrap .block p {
margin: 0 0 10px;
font-size: 19px;
font-family: PingFangSC-Regular, PingFang SC;
font-family: SFProDisplay;
font-weight: 400;
color: #101010;
line-height: 32px;
}
.tiny-wrap .en-block p, .tiny-wrap .en-block .img-des {
font-family: ProximaNova;
letter-spacing: -.0135em;
line-height: 1.5em;
}
.tiny-wrap .block .tiny-title {
margin: 10px 0;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-family: SFProDisplay;
font-weight: 500;
color: #101010;
line-height: 32px;
}
.tiny-wrap .quote {
padding: 15px;
font-size: 14px;
font-size: 16px;
font-style: italic;
border: 1px solid #e3e3e3;
background-color: #f1f1f1;

@ -8,16 +8,16 @@
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} 浏览 | {{ form.createTime }}</div>
<div class="meta">{{ form.edit && '编辑:' + form.edit }} {{ form.audit && ' | 审核:' + form.audit }} {{ form.label && ' | 标签:' + form.label }}</div>
<div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} {{$t('column.views')}} | {{ form.createTime }}</div>
<div class="meta">{{ form.edit && $t('column.edit') + ':' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + ':' + form.audit }} {{ form.label && ' | ' + $t('column.label') + ':' + form.label }}</div>
<p class="brief">{{ form.summary }}</p>
<div class="des" v-html="form.mainBody"></div>
<div v-if="form.fileList && form.fileList.length" class="annex">
<h6>附件下载</h6>
<h6>{{$t('column.attachmentDownload')}}</h6>
<ul class="files">
<li v-for="(file, i) in form.fileList" :key="i">
<span class="name">{{ file.fileName }}</span>
<span class="download" @click="download(file)">下载</span>
<span class="download" @click="download(file)">{{$t('column.download')}}</span>
</li>
</ul>
</div>
@ -25,7 +25,7 @@
<div class="right">
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
<p class="l-title">热点内容</p>
<p class="l-title">{{$t('column.hot')}}</p>
<ul class="list">
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
@ -33,7 +33,7 @@
</li>
</ul>
<p class="l-title">最新资讯</p>
<p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list">
<li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
@ -57,7 +57,7 @@ export default {
return {
id: this.$route.query.articleId,
loaded: false,
routes: {},
routes: [],
columnId: '',
form: {},
columnBanner: '',
@ -109,8 +109,11 @@ export default {
} else {
this.form = data
this.columnId = data.columnId
data.bannerImg || this.getBanner(this.columns)
if (this.columnBanner) this.form.bannerImg = this.columnBanner
// banner
if (!data.bannerImg) {
this.getBanner(this.columns)
this.form.bannerImg = this.columnBanner || require('@/assets/images/article-banner.png')
}
this.loaded = true
}
}
@ -119,9 +122,8 @@ export default {
// +1
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {})
},
// banner
// banner
getBanner(data) {
this.columnBanner = ''
for (const e of data) {
if (e.columnBanner) this.columnBanner = e.columnBanner
if (e.id == this.columnId) {
@ -202,9 +204,6 @@ export default {
border-bottom: 1px solid #D8D8D8;
}
/deep/.des {
p {
margin: 1em 0;
}
img {
max-width: 100%;
}

@ -2,7 +2,10 @@
<div v-show="loaded" :class="['wrap', {activity: info.listStyleId === 15}]">
<div class="banner">
<img width="100%" height="280" :src="info.columnBanner" alt="">
<div class="texts">
<p class="text">{{ info.columnName }}</p>
<p class="sub">{{ info.subtitle }}</p>
</div>
</div>
<div class="column-wrap">
<div class="article">
@ -10,9 +13,9 @@
<!-- 文章侧边栏+搜索+新闻列表 -->
<div v-if="info.listStyleId === 10" class="forms">
<div class="item">
<span class="label">所属分类</span>
<span class="label">{{$t('column.classification')}}</span>
<el-select v-model="form.classificationId" @change="filter">
<el-option label="不限" :value="null"></el-option>
<el-option :label="$t('column.all')" :value="null"></el-option>
<el-option
v-for="item in classifications"
:key="item.id"
@ -22,8 +25,8 @@
</el-select>
</div>
<div class="item">
<span class="label">主题</span>
<el-select v-model="lableId" multiple @change="filter">
<span class="label">{{$t('column.label')}}</span>
<el-select ref="search" v-model="lableId" multiple @change="filter">
<el-option
v-for="item in labels"
:key="item.id"
@ -33,7 +36,7 @@
</el-select>
</div>
<div class="search">
<input type="text" placeholder="请输入搜索内容" v-model="form.title">
<input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title">
<i class="icon">
<img src="@/assets/images/search-white.png" alt="">
</i>
@ -45,9 +48,9 @@
<li v-for="(item, i) in convokeTypes" :key="i" :class="{active: item.id === form.convokeType}" @click="switchChange(item)">{{ item.name }}</li>
</ul>
<div class="item">
<span class="label">类型</span>
<span class="label">{{$t('column.classification')}}</span>
<el-select v-model="form.classificationId" @change="filter">
<el-option label="不限" :value="null"></el-option>
<el-option :label="$t('column.all')" :value="null"></el-option>
<el-option
v-for="item in classifications"
:key="item.id"
@ -92,7 +95,7 @@
</div>
</div>
<div class="right">
<p class="l-title">热点内容</p>
<p class="l-title">{{$t('column.hot')}}</p>
<ul class="list">
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
@ -100,7 +103,7 @@
</li>
</ul>
<p class="l-title">最新资讯</p>
<p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list">
<li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
@ -115,7 +118,6 @@
</template>
<script>
import { mapState } from 'vuex'
import Setting from '@/setting'
import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
@ -128,22 +130,10 @@ export default {
fromColumn: this.$route.query.column,
columnId: '',
info: {},
columnBanner: '',
searchTimer: null,
lableId: [],
convokeTypes: [
{
id: null,
name: '全部'
},
{
id: 1,
name: '即将召开'
},
{
id: 2,
name: '已经召开'
}
],
convokeTypes: [],
form: {
classificationId: null,
title: '',
@ -171,11 +161,6 @@ export default {
deepestId: ''
}
},
computed: {
...mapState('content', [
'keyword'
])
},
components: {
Breadcrumb
},
@ -190,25 +175,27 @@ export default {
this.filter()
}, 500)
},
keyword() {
this.init()
}
},
mounted() {
this.convokeTypes = [
{
id: null,
name: this.$t('column.all')
},
{
id: 1,
name: this.$t('column.comingSoon')
},
{
id: 2,
name: this.$t('column.alreadyHeld')
}
]
this.init()
},
methods: {
init() {
//
if (this.keyword) {
this.form = {
classificationId: null,
title: this.keyword,
convokeType: null
}
} else {
this.getInfo()
}
this.getColumn()
this.getNews()
this.getLabel()
@ -218,20 +205,31 @@ export default {
this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
this.columnClick(data)
if (data.typeId !== 3) this.loaded = true //
if (!data.columnBanner) data.columnBanner = require('@/assets/images/column-banner.png')
this.info = data
this.showNav = this.showNavIds.includes(data.listStyleId)
this.getLeftColumn()
this.getClassification()
}).catch(res => {})
},
// banner
getBanner(data) {
for (const e of data) {
if (e.columnBanner) this.columnBanner = e.columnBanner
if (e.id == this.info.id) {
break
} else if (e.children.length) {
this.getBanner(e.children)
}
}
},
//
getClassification() {
//
if (this.info.templateId === 7) {
this.$post(`${this.api.queryClassif}?siteId=${this.site}&templateId=${7}`).then(({ data }) => {
this.classifications = data
}).catch(err => {})
} else {
} else { //
this.$post(`${this.api.getTheFullArticleByColumn}?id=${this.id}`).then(({ data }) => {
this.classifications = data
}).catch(err => {})
@ -241,6 +239,14 @@ export default {
getLabel() {
this.$post(`${this.api.queryLabel}?siteId=${this.$route.query.siteId || this.site}`).then(({ data }) => {
this.labels = data
// placeholder
this.$nextTick(() => {
setTimeout(() => {
const el = this.$refs.search
if (el) el.$el.querySelector('.el-input__inner').placeholder = this.$t('column.selectPlaceholder')
}, 500)
})
}).catch(err => {})
},
//
@ -257,11 +263,11 @@ export default {
this.allColumnId.push(e.id)
e.children.length && this.handleColumn(e.children, 1)
} else if (parent) {
if (e.listStyleId !== this.info.listStyleId) {
if (e.listStyleId !== this.info.listStyleId) { //
this.sameStyle = 0
break
} else {
this.allColumnId.push(e.id)
this.allColumnId.push(e.id) // id
e.children.length && this.handleColumn(e.children, parent)
}
} else {
@ -285,9 +291,13 @@ export default {
}
this.getArticle(id)
this.columns = data
// banner
if (!this.info.columnBanner) {
this.getBanner(data)
this.info.columnBanner = this.columnBanner || require('@/assets/images/column-banner.png')
}
this.$nextTick(() => {
const el = this.$refs.leftColumn
// el && el.setCurrentKey(this.sameStyle && !fromColumn ? data[0].id : this.id)
el && el.setCurrentKey(this.id)
})
}).catch(err => {})
@ -370,13 +380,6 @@ export default {
},
//
getArticle(columnIds) {
// id
if (this.keyword) {
this.loaded = true
this.page = 1
columnIds = []
this.labelId = []
}
const labelName = []
//
this.labels.map(e => {
@ -434,15 +437,22 @@ export default {
.banner {
position: relative;
height: 280px;
font-size: 48px;
font-weight: 600;
color: #fff;
.text {
.texts {
position: absolute;
top: 123px;
left: 243px;
}
.text {
font-size: 48px;
font-weight: 600;
@include ellipsis;
}
.sub {
margin-top: 10px;
font-size: 32px;
}
}
.column-wrap {
padding: 40px 0;
@ -552,7 +562,7 @@ export default {
height: 48px;
padding-left: 40px;
margin-bottom: 1px;
font-size: 16px;
font-size: 18px;
color: #666;
background-color: #fff;
border-top: 1px solid #F8F9F9;
@ -570,7 +580,7 @@ export default {
}
}
.el-tree-node__label {
font-size: 16px;
font-size: 18px;
color: #666;
line-height: 22px;
}

@ -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>

@ -52,7 +52,7 @@
<h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<div class="shop-shows" v-if="articles.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
<img width="100%" height="400" :src="articles[0].titleImg" alt="">
<div class="texts">
<h6>{{ articles[0].title }}</h6>
@ -92,7 +92,7 @@
<h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<div class="shows" v-if="articles1.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
<img width="100%" height="558" :src="articles1[0].titleImg" alt="">
<div class="texts">
<div class="meta">
@ -146,7 +146,8 @@ export default {
articles: [],
articles1: [],
curInd: 0,
curArticle: {}
curArticle: {},
timer: null
}
},
mounted() {
@ -197,9 +198,19 @@ export default {
}
this.modules = json
this.carouselInterval()
}
}).catch(err => {})
},
//
carouselInterval() {
clearInterval(this.timer)
this.timer = setInterval(() => {
this.curInd++
if (this.curInd > 2) this.curInd = 0
this.curArticle = this.modules[1].list[this.curColumn].articles[this.curInd]
}, 5000)
},
//
switchCarousel(i) {
if (this.curInd !== i) {
@ -400,6 +411,7 @@ export default {
width: 660px;
margin-right: 20px;
background-color: #fff;
cursor: pointer;
.texts {
padding: 40px 30px;
}
@ -497,6 +509,7 @@ export default {
width: 688px;
margin-right: 20px;
background-color: #fff;
cursor: pointer;
.texts {
display: flex;
padding: 40px 30px;

@ -9,6 +9,12 @@ export default {
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '' }
},
{
name: `${name}-result`,
path: `/${name}/result`,
component: () => import(`@/pages/${name}/result`),
meta: { title: '' }
}
]
};

@ -1,67 +1,38 @@
/**
* 业务配置
* */
const url = location.host;
const isDev = process.env.NODE_ENV === 'development' // 开发环境
let host = `${location.origin}/`
if (isDev) {
const isDev = process.env.NODE_ENV === 'development' // 开发环境
let host = `${location.origin}/`
if (isDev) {
host = 'http://192.168.31.136:10000/' // 测试服
// host = 'https://31k70639y6.zicp.fun/' // 测试服
// host = 'http://192.168.31.51:10000/' // 榕
// host = 'http://192.168.31.137:10000/' // 赓
}
host = 'http://192.168.31.116:10000/' // 赓
}
const Setting = {
const Setting = {
/**
* 基础配置
* */
titleSuffix: '粒子研究院', // 网页标题的后缀
routerMode: "hash", // 路由模式,可选值为 history 或 hash
showProgressBar: true, // 页面切换时,是否显示模拟的进度条
apiBaseURL: host, // 接口请求地址
autoLogoutTime: 3600000, // 长时间未操作,自动退出登录时间
modalDuration: 3, // 接口请求返回错误时,弹窗的持续时间,单位:秒
errorModalType: "Message", // 接口请求返回错误时,弹窗的类型,可选值为 Message 或 Notice
cookiesExpires: 1, // Cookies 默认保存时间,单位:天
tokenExpires: 1296000000, // token在localStorage的时间(毫秒)
isDev,
/**
* 路由白名单
* */
whiteList: ['/login', '/redirect'],
whiteList: [],
/**
* localStorage里保存的token的key
*/
tokenKey: "IASF_client_token",
* 英文站点id数组
* */
enIds: [1, 4, 6],
/**
* localStorage里保存的vuex的key
*/
storeKey: "IASF_client_store",
/**
* 默认密码
*/
initialPassword: "111aaa",
/**
* 多语言配置
* */
i18n: {
// 默认语言
default: "zh",
// 是否根据用户电脑配置自动设置语言(仅第一次有效)
auto: false
},
/**
* 布局配置
* */
layout: {},
/**
* 功能配置
* */
// 相同路由,不同参数间进行切换,是否强力更新
sameRouteForceUpdate: false,
// 是否使用动态路由(即角色权限,开启了的话就会取后端返回的权限树来显示头部导肮和页面按钮)
dynamicRoute: true
};
export default Setting;
storeKey: "IASF_client_store"
};
export default Setting;

@ -25,6 +25,10 @@
font-family: toppan;
src: url('font/toppan.otf');
}
@font-face {
font-family: ProximaNova;
src: url('font/ProximaNova-Regular.otf');
}
[v-cloak] {
display: none;

Loading…
Cancel
Save