yujialong 6 months ago
parent cf0989be5d
commit 06d3a2e6ee
  1. 31
      src/mixins/article/index.js
  2. 4
      src/pages/article/index.vue
  3. 436
      src/pages/column/index.vue
  4. 4
      src/setting.js

@ -1,26 +1,26 @@
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
export default { export default {
data() { data () {
return { return {
id: +this.$route.query.id id: +this.$route.query.id
} }
}, },
computed: { computed: {
site() { site () {
return this.$route.query.siteId || this.$store.state.content.site return this.$route.query.siteId || this.$store.state.content.site
} }
}, },
mounted() { mounted () {
}, },
methods: { methods: {
// 点击栏目回调 // 点击栏目回调
columnTo(to) { columnTo (to) {
const { typeId,menuVisible } = to const { typeId, menuVisible } = to
// 跳转链接 // 跳转链接
if (typeId === 2) { if (typeId === 2) {
if ( menuVisible === 1 && to.children.find(i=>i.menuVisible ===1)) return if (menuVisible === 1 && to.children.find(i => i.menuVisible === 1)) return
let href = to.linkAddress let href = to.linkAddress
const cType = to.connectionType const cType = to.connectionType
if (cType !== 2) { // 非站外链接 if (cType !== 2) { // 非站外链接
@ -41,9 +41,9 @@ export default {
if (to.isOpen) { if (to.isOpen) {
var userAgent = navigator.userAgent; var userAgent = navigator.userAgent;
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent); var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if(isSafari) { if (isSafari) {
window.location.href = href window.location.href = href
}else { } else {
window.open(href) window.open(href)
} }
} else { } else {
@ -51,11 +51,11 @@ export default {
} }
} else if (typeId !== 4 || (typeId === 4 && !to.children.length)) { } else if (typeId !== 4 || (typeId === 4 && !to.children.length)) {
// 常规栏目跳转到column页,长页栏目直接获取path // 常规栏目跳转到column页,长页栏目直接获取path
this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}&siteId=${this.site}`).catch(err => {}) this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}&siteId=${this.site}`).catch(err => { })
} }
}, },
// 跳转文章页面 // 跳转文章页面
toArtice(item) { toArtice (item) {
if (item.listStyleId === 74) return false if (item.listStyleId === 74) return false
if (item.articleTemplate === 24) { // 链接 if (item.articleTemplate === 24) { // 链接
let href = item.linkAddress let href = item.linkAddress
@ -78,16 +78,21 @@ export default {
if (item.isOpen) { if (item.isOpen) {
var userAgent = navigator.userAgent; var userAgent = navigator.userAgent;
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent); var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if(isSafari) { if (isSafari) {
window.location.href = href window.location.href = href
}else { } else {
window.open(href) window.open(href)
} }
} else { } else {
location.href = href location.href = href
} }
} else { } else {
this.$router.push(`/article?articleId=${item.id}&siteId=${this.site}&id=${item.columnId}`) const path = `/article?articleId=${item.id}&siteId=${this.site}&id=${item.columnId}`
if (this.site == 2) {
window.open(this.$router.resolve(path).href)
} else {
this.$router.push(path)
}
} }
} }
} }

@ -241,14 +241,14 @@ export default {
object-fit: cover; object-fit: cover;
} }
ul { ul {
// padding-left: 40px; padding-left: 40px;
list-style: disc; list-style: disc;
li { li {
list-style: inherit; list-style: inherit;
} }
} }
ol { ol {
// padding-left: 40px; padding-left: 40px;
list-style: decimal; list-style: decimal;
li { li {
list-style: inherit; list-style: inherit;

@ -1,11 +1,7 @@
<template> <template>
<div v-show="loaded" <div v-show="loaded" :class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
:class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
<div class="banner"> <div class="banner">
<img width="100%" <img width="100%" height="280" :src="info.columnBanner" alt="" />
height="280"
:src="info.columnBanner"
alt="" />
<div class="texts"> <div class="texts">
<p class="text">{{ info.columnName }}</p> <p class="text">{{ info.columnName }}</p>
<p class="sub">{{ info.subtitle }}</p> <p class="sub">{{ info.subtitle }}</p>
@ -15,37 +11,24 @@
<div class="article"> <div class="article">
<div class="left"> <div class="left">
<!-- 文章侧边栏+搜索+新闻列表 --> <!-- 文章侧边栏+搜索+新闻列表 -->
<div v-if="info.listStyleId === 10" <div v-if="info.listStyleId === 10" class="forms">
class="forms">
<div class="item"> <div class="item">
<span class="label">{{ $t('column.classification') }}</span> <span class="label">{{ $t('column.classification') }}</span>
<el-select v-model="form.classificationId" <el-select v-model="form.classificationId" @change="filter">
@change="filter"> <el-option :label="$t('column.all')" :value="null"></el-option>
<el-option :label="$t('column.all')" <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
:value="null"></el-option>
<el-option v-for="item in classifications"
:key="item.id"
:label="item.classificationName"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="item"> <div class="item">
<span class="label">{{ $t('column.label') }}</span> <span class="label">{{ $t('column.label') }}</span>
<el-select ref="search" <el-select ref="search" v-model="lableId" multiple @change="filter">
v-model="lableId" <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
multiple
@change="filter">
<el-option v-for="item in labels"
:key="item.id"
:label="item.labelName"
:value="item.id"> </el-option>
</el-select> </el-select>
</div> </div>
<div class="search"> <div class="search">
<input type="text" <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
:placeholder="$t('column.titlePlaceholder')"
v-model="form.title" />
<!-- <i class="icon"> <!-- <i class="icon">
<img src="@/assets/images/search-white.png" alt="" /> <img src="@/assets/images/search-white.png" alt="" />
@ -53,62 +36,42 @@
</div> </div>
</div> </div>
<!-- 侧导航+新闻列表(含文章概述) --> <!-- 侧导航+新闻列表(含文章概述) -->
<div v-if="info.listStyleId === 12" <div v-if="info.listStyleId === 12" class="forms">
class="forms">
<div class="item"> <div class="item">
<span class="label">{{ $t('column.classification') }}</span> <span class="label">{{ $t('column.classification') }}</span>
<el-select v-model="form.classificationId" <el-select v-model="form.classificationId" @change="filter">
@change="filter"> <el-option :label="$t('column.all')" :value="null"></el-option>
<el-option :label="$t('column.all')" <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
:value="null"></el-option>
<el-option v-for="item in classifications"
:key="item.id"
:label="item.classificationName"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="item"> <div class="item">
<span class="label">{{ $t('column.label') }}</span> <span class="label">{{ $t('column.label') }}</span>
<el-select ref="search" <el-select ref="search" v-model="lableId" multiple @change="filter">
v-model="lableId" <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
multiple
@change="filter">
<el-option v-for="item in labels"
:key="item.id"
:label="item.labelName"
:value="item.id"> </el-option>
</el-select> </el-select>
</div> </div>
<div class="search"> <div class="search">
<input type="text" <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
:placeholder="$t('column.titlePlaceholder')"
v-model="form.title" />
<!-- <i class="icon"> <!-- <i class="icon">
<img src="@/assets/images/search-white.png" alt="" /> <img src="@/assets/images/search-white.png" alt="" />
</i> --> </i> -->
</div> </div>
</div> </div>
<!-- 会议活动筛选+会议活动列表 --> <!-- 会议活动筛选+会议活动列表 -->
<div v-if="info.listStyleId === 15" <div v-if="info.listStyleId === 15" class="forms">
class="forms">
<ul class="switch"> <ul class="switch">
<li v-for="(item, i) in convokeTypes" <li v-for="(item, i) in convokeTypes" :key="i" :class="{ active: item.id === form.convokeType }"
:key="i"
:class="{ active: item.id === form.convokeType }"
@click="switchChange(item)"> @click="switchChange(item)">
{{ item.name }} {{ item.name }}
</li> </li>
</ul> </ul>
<div class="item"> <div class="item">
<span class="label">{{ $t('column.classification') }}</span> <span class="label">{{ $t('column.classification') }}</span>
<el-select v-model="form.classificationId" <el-select v-model="form.classificationId" @change="filter">
@change="filter"> <el-option :label="$t('column.all')" :value="null"></el-option>
<el-option :label="$t('column.all')" <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
:value="null"></el-option>
<el-option v-for="item in classifications"
:key="item.id"
:label="item.classificationName"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
@ -116,48 +79,33 @@
</div> </div>
<div class="contents"> <div class="contents">
<el-tree v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15" <el-tree
class="columns" v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15"
ref="leftColumn" class="columns" ref="leftColumn" :data="columns" highlight-current :expand-on-click-node="false"
:data="columns" default-expand-all :props="defaultProps" node-key="id" icon-class="el-icon-arrow-down"
highlight-current @node-click="(item) => columnClick(item, 1)" @current-change="(item) => columnClick(item, 1)">
:expand-on-click-node="false" <span class="custom-tree-node" slot-scope="{ node, data }" style="padding-left: 10px;">
default-expand-all
:props="defaultProps"
node-key="id"
icon-class="el-icon-arrow-down"
@node-click="(item) => columnClick(item, 1)"
@current-change="(item) => columnClick(item, 1)">
<span class="custom-tree-node"
slot-scope="{ node, data }"
style="padding-left: 10px;">
<span :title="node.label">{{ node.label }}</span> <span :title="node.label">{{ node.label }}</span>
</span> </span>
</el-tree> </el-tree>
<template v-if="articles.length && !loading"> <template v-if="articles.length && !loading">
<!-- 列表样式选的是列表详情则直接显示最新一篇文章的详情 --> <!-- 列表样式选的是列表详情则直接显示最新一篇文章的详情 -->
<div v-if="info.listStyleId === 73" <div v-if="info.listStyleId === 73" class="detail">
class="detail">
<template v-if="article.articleTemplate != 72"> <template v-if="article.articleTemplate != 72">
<h2>{{ article.title }}</h2> <h2>{{ article.title }}</h2>
<!-- <div class="meta">{{ article.source && article.source + ' | ' }} {{ article.author && article.author + ' | ' }} {{ article.releaseTime }}</div> <!-- <div class="meta">{{ article.source && article.source + ' | ' }} {{ article.author && article.author + ' | ' }} {{ article.releaseTime }}</div>
<div class="meta">{{ article.edit && $t('column.edit') + ':' + article.edit }} {{ article.audit && ' | ' + $t('column.auditor') + ':' + article.audit }} {{ article.label && ' | ' + $t('column.label') + ':' + article.label }}</div> --> <div class="meta">{{ article.edit && $t('column.edit') + ':' + article.edit }} {{ article.audit && ' | ' + $t('column.auditor') + ':' + article.audit }} {{ article.label && ' | ' + $t('column.label') + ':' + article.label }}</div> -->
</template> </template>
<p v-if="article.summary" <p v-if="article.summary" class="brief">{{ article.summary }}</p>
class="brief">{{ article.summary }}</p> <div class="des" v-html="article.mainBody"></div>
<div class="des" <div v-if="article.fileList && article.fileList.length" class="annex">
v-html="article.mainBody"></div> <h6>{{ $t('column.attachmentDownload') }}</h6>
<div v-if="article.fileList && article.fileList.length"
class="annex">
<h6>{{$t('column.attachmentDownload')}}</h6>
<ul class="files"> <ul class="files">
<li v-for="(file, i) in article.fileList" <li v-for="(file, i) in article.fileList" :key="i">
:key="i">
<span class="name">{{ file.fileName }}</span> <span class="name">{{ file.fileName }}</span>
<span class="download" <span class="download" @click="download(file)">{{ $t('column.download') }}</span>
@click="download(file)">{{$t('column.download')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -167,11 +115,8 @@
<template v-if="info.listStyleId === 12"> <template v-if="info.listStyleId === 12">
<div class="article-wrap"> <div class="article-wrap">
<ul class="articles"> <ul class="articles">
<li v-for="(item, i) in articles" <li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }"
:key="i" class="readDetail" @click="toArtice(item)">
:class="{'news-notice': info.listStyleId === 55}"
class="readDetail"
@click="toArtice(item)">
<template v-if="info.listStyleId === 55"> <template v-if="info.listStyleId === 55">
<div class="releaseTime"> <div class="releaseTime">
<p class="d">{{ item.date }}</p> <p class="d">{{ item.date }}</p>
@ -180,9 +125,7 @@
<div class="news-title">{{ item.title }}</div> <div class="news-title">{{ item.title }}</div>
</template> </template>
<template v-else> <template v-else>
<img class="pic" <img class="pic" :src="item.titleImg" alt=""
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png?id=1';" /> onerror="javascript:this.src='./images/1.png?id=1';" />
<div class="texts"> <div class="texts">
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName" <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
@ -192,63 +135,43 @@
<h6 class="titleDes">{{ item.title }}</h6> <h6 class="titleDes">{{ item.title }}</h6>
<template v-if="item.listStyleId === 11 || item.listStyleId == 12"> <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
<span class="meta">{{ item.releaseTime }}</span> <span class="meta">{{ item.releaseTime }}</span>
<div class="des" <div class="des" v-html="item.mainBody"></div>
v-html="item.mainBody"></div>
</template> </template>
<span v-if="item.listStyleId === 10 " <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + && ' | ' +
item.labelName }}</span> item.labelName }}</span>
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
<div v-if="item.keynoteSpeaker" <div v-if="item.keynoteSpeaker" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
<img class="icon"
src="@/assets/images/mine.png"
alt="" /> {{ item.keynoteSpeaker }}
</div> </div>
<div v-if="item.activityStartTime" <div v-if="item.activityStartTime" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/time.png" alt="" />
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime }} {{ item.activityStartTime }}
</div> </div>
<div v-if="item.offlineLocation" <div v-if="item.offlineLocation" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
<img class="icon" }}
src="@/assets/images/location.png"
alt="" /> {{ item.offlineLocation }}
</div> </div>
<div v-if="item.onlineLocation" <div v-if="item.onlineLocation" class="meta">
class="meta"> <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
<img class="icon"
src="@/assets/images/online.png"
alt="" /> {{ item.onlineLocation }}
</div> </div>
</template> </template>
<el-button type="primary" <el-button type="primary" class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
</div> </div>
</template> </template>
</li> </li>
</ul> </ul>
<div v-if="articles.length" <div v-if="articles.length" class="pagination">
class="pagination"> <el-pagination background @current-change="currentChange" :current-page="page"
<el-pagination background :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10"> <template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10">
<div class="article-wrap"> <div class="article-wrap">
<ul class="articles"> <ul class="articles">
<li v-for="(item, i) in articles" <li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }"
:key="i"
:class="{'news-notice': info.listStyleId === 55}"
@click="toArtice(item)"> @click="toArtice(item)">
<template v-if="info.listStyleId === 55"> <template v-if="info.listStyleId === 55">
<div class="releaseTime"> <div class="releaseTime">
@ -259,7 +182,7 @@
</template> </template>
<template v-else> <template v-else>
<div class="texts leftBox"> <div class="texts leftBox">
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName" <p v-if="(item.listStyleId === 10 || item.listStyleId === 15 || item.listStyleId === 11) && item.classificationName"
class="type"> class="type">
{{ item.classificationName }} {{ item.classificationName }}
</p> </p>
@ -271,63 +194,43 @@
</template> </template>
</span> </span>
</template> </template>
<span v-if="item.listStyleId === 10 " <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + && ' | ' +
item.labelName }}</span> item.labelName }}</span>
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
<div v-if="item.keynoteSpeaker" <div v-if="item.keynoteSpeaker" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
<img class="icon"
src="@/assets/images/mine.png"
alt="" /> {{ item.keynoteSpeaker }}
</div> </div>
<div v-if="item.activityStartTime" <div v-if="item.activityStartTime" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/time.png" alt="" />
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime }} {{ item.activityStartTime }}
</div> </div>
<div v-if="item.offlineLocation" <div v-if="item.offlineLocation" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
<img class="icon" }}
src="@/assets/images/location.png"
alt="" /> {{ item.offlineLocation }}
</div> </div>
<div v-if="item.onlineLocation" <div v-if="item.onlineLocation" class="meta">
class="meta"> <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
<img class="icon"
src="@/assets/images/online.png"
alt="" /> {{ item.onlineLocation }}
</div> </div>
</template> </template>
</div> </div>
<img class="pic" <img class="pic" :src="item.titleImg" alt=""
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png?id=1';" /> onerror="javascript:this.src='./images/1.png?id=1';" />
</template> </template>
</li> </li>
</ul> </ul>
<div v-if="articles.length" <div v-if="articles.length" class="pagination">
class="pagination"> <el-pagination background @current-change="currentChange" :current-page="page"
<el-pagination background :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div> </div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="article-wrap"> <div class="article-wrap">
<ul :class="['articles', {media: info.listStyleId === 74}]"> <ul :class="['articles', { media: info.listStyleId === 74 }]">
<li v-for="(item, i) in articles" <li v-for="(item, i) in articles" :key="i"
:key="i" :class="{ 'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68 }"
:class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}" class="overDetail" @click="toArtice(item)">
class="overDetail"
@click="toArtice(item)">
<template v-if="info.listStyleId === 55"> <template v-if="info.listStyleId === 55">
<div class="releaseTime"> <div class="releaseTime">
<p class="d">{{ item.date }}</p> <p class="d">{{ item.date }}</p>
@ -336,10 +239,7 @@
<div class="news-title">{{ item.title }}</div> <div class="news-title">{{ item.title }}</div>
</template> </template>
<template v-else> <template v-else>
<img v-if="info.listStyleId !== 74" <img v-if="info.listStyleId !== 74" class="pic" :src="item.titleImg" alt=""
class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png?id=1';" /> onerror="javascript:this.src='./images/1.png?id=1';" />
<template v-else-if="item.fileList"> <template v-else-if="item.fileList">
@ -348,20 +248,14 @@
src="https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521" src="https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521"
:preview-src-list="['https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521']"> :preview-src-list="['https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521']">
</el-image> --> </el-image> -->
<video v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))" <video
class="media-video" v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))"
controls class="media-video" controls x5-playsinline x5-video-player-type="h5"
x5-playsinline :poster="isIphone ? 'https://new.iasf.ac.cn/images/about/12.png' : ''" preload>
x5-video-player-type="h5" <source :src="item.fileList[0].filePath" type="video/mp4">
:poster="isIphone ? 'https://new.iasf.ac.cn/images/about/12.png' : ''"
preload>
<source :src="item.fileList[0].filePath"
type="video/mp4">
您的浏览器不支持 video 标签 您的浏览器不支持 video 标签
</video> </video>
<el-image v-else <el-image v-else class="media-pic" :src="item.fileList[0].filePath"
class="media-pic"
:src="item.fileList[0].filePath"
:preview-src-list="[item.fileList[0].filePath]"> :preview-src-list="[item.fileList[0].filePath]">
</el-image> </el-image>
</template> </template>
@ -371,95 +265,68 @@
class="type"> class="type">
{{ item.classificationName }} {{ item.classificationName }}
</p> </p>
<h6 class="titleDes" <h6 class="titleDes" :title="item.title">{{ item.title }}</h6>
:title="item.title">{{ item.title }}</h6> <template
<template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68"> v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
<span class="meta">{{ item.releaseTime }}</span> <span class="meta">{{ item.releaseTime }}</span>
<div class="des" <div class="des" v-html="item.mainBody"></div>
v-html="item.mainBody"></div>
</template> </template>
<span v-if="item.listStyleId === 10 " <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + && ' | ' +
item.labelName }}</span> item.labelName }}</span>
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
<div v-if="item.keynoteSpeaker" <div v-if="item.keynoteSpeaker" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
<img class="icon"
src="@/assets/images/mine.png"
alt="" /> {{ item.keynoteSpeaker }}
</div> </div>
<div v-if="item.activityStartTime" <div v-if="item.activityStartTime" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/time.png" alt="" />
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime }} {{ item.activityStartTime }}
</div> </div>
<div v-if="item.offlineLocation" <div v-if="item.offlineLocation" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
<img class="icon" }}
src="@/assets/images/location.png"
alt="" /> {{ item.offlineLocation }}
</div> </div>
<div v-if="item.onlineLocation" <div v-if="item.onlineLocation" class="meta">
class="meta"> <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
<img class="icon"
src="@/assets/images/online.png"
alt="" /> {{ item.onlineLocation }}
</div> </div>
</template> </template>
<el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" <el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" type="primary"
type="primary" class="readDetailBtn">{{
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button> $t('column.readDetail') }}</el-button>
</div> </div>
</template> </template>
</li> </li>
</ul> </ul>
<div v-if="total > articles.length" <div v-if="total > articles.length" class="pagination">
class="pagination"> <el-pagination background @current-change="currentChange" :current-page="page"
<el-pagination background :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div> </div>
</div> </div>
</template> </template>
</template> </template>
</template> </template>
<div v-else <div v-else class="none">
class="none"> <img src="@/assets/images/none.png" alt="">
<img src="@/assets/images/none.png"
alt="">
<p class="text">{{ $t('column.comming') }}</p> <p class="text">{{ $t('column.comming') }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> --> <!-- <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> -->
<template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74">
<div v-if="site == 2" <div v-if="site == 2" class="right">
class="right">
<p class="l-title">{{ $t('column.latestNews') }}</p> <p class="l-title">{{ $t('column.latestNews') }}</p>
<ul class="list"> <ul class="list">
<li v-for="(item, i) in site2News" <li v-for="(item, i) in site2News" :key="i" :title="item.title" @click="toArtice(item)">
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span> <span class="date">{{ item.releaseTime }}</span>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 选择了列表样式不用显示右侧部分 --> <!-- 选择了列表样式不用显示右侧部分 -->
<div v-else <div v-else class="right">
class="right">
<p class="l-title">{{ $t('column.hot') }}</p> <p class="l-title">{{ $t('column.hot') }}</p>
<ul class="list"> <ul class="list">
<li v-for="(item, i) in hots" <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span> <span class="date">{{ item.releaseTime }}</span>
</li> </li>
@ -467,25 +334,20 @@
<p class="l-title">{{ $t('column.latestNews') }}</p> <p class="l-title">{{ $t('column.latestNews') }}</p>
<ul class="list"> <ul class="list">
<li v-for="(item, i) in news" <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span> <span class="date">{{ item.releaseTime }}</span>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<div v-else <div v-else class="right"></div>
class="right"></div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Setting from '@/setting';
import Util from '@/libs/util'; import Util from '@/libs/util';
import Breadcrumb from '@/components/breadcrumb'; import Breadcrumb from '@/components/breadcrumb';
import mixins from '@/mixins/article'; import mixins from '@/mixins/article';
@ -909,10 +771,12 @@ export default {
position: relative; position: relative;
height: 24rem; height: 24rem;
color: #fff; color: #fff;
img { img {
height: 24rem; height: 24rem;
object-fit: cover; object-fit: cover;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 160px; top: 160px;
@ -930,9 +794,11 @@ export default {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
.el-tree-node__content { .el-tree-node__content {
padding-left: 10px !important; padding-left: 10px !important;
} }
.l-title { .l-title {
font-weight: 600; font-weight: 600;
} }
@ -1044,12 +910,14 @@ export default {
} }
/deep/.columns { /deep/.columns {
& + .detail { &+.detail {
padding-left: 10px; padding-left: 10px;
} }
width: 22%; width: 22%;
margin-right: 0.6rem; margin-right: 0.6rem;
overflow: auto; overflow: auto;
span { span {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -1097,7 +965,7 @@ export default {
right: 10px; right: 10px;
} }
.is-current > .el-tree-node__content { .is-current>.el-tree-node__content {
background-color: #e5edf8; background-color: #e5edf8;
border-top: 0; border-top: 0;
@ -1125,33 +993,41 @@ export default {
padding: 10px 20px; padding: 10px 20px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.texts { .texts {
padding-left: 1.5rem; padding-left: 1.5rem;
.titleDes { .titleDes {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.2rem; font-size: 1.2rem;
margin-top: 0; margin-top: 0;
} }
.des { .des {
margin-top: 10px; margin-top: 10px;
} }
} }
.titleDes { .titleDes {
margin-top: 0.8rem; margin-top: 0.8rem;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
.readDetailBtn { .readDetailBtn {
margin-top: 10px; margin-top: 10px;
} }
.texts { .texts {
flex-grow: 1; flex-grow: 1;
} }
} }
.overDetail { .overDetail {
.texts { .texts {
width: 70%; width: 70%;
} }
} }
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -1203,34 +1079,42 @@ export default {
object-fit: cover; object-fit: cover;
} }
} }
.media { .media {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 10px; margin-left: 10px;
li { li {
flex-direction: column; flex-direction: column;
width: calc(33% - 30px); width: calc(33% - 30px);
margin-right: 30px; margin-right: 30px;
background-color: transparent; background-color: transparent;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
.media-video { .media-video {
width: 100%; width: 100%;
height: 155px; height: 155px;
} }
/deep/.media-pic { /deep/.media-pic {
width: 100%; width: 100%;
height: 155px; height: 155px;
img { img {
object-fit: cover; object-fit: cover;
} }
} }
.texts { .texts {
width: 100% !important; width: 100% !important;
padding-left: 0; padding-left: 0;
} }
h6 { h6 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 0; margin-bottom: 0;
@ -1239,6 +1123,7 @@ export default {
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
} }
.news-notice { .news-notice {
.releaseTime { .releaseTime {
width: 88px; width: 88px;
@ -1249,16 +1134,19 @@ export default {
text-align: center; text-align: center;
background: #0b5086; background: #0b5086;
} }
.d { .d {
font-size: 2rem; font-size: 2rem;
font-family: DINCondensed-Bold, DINCondensed; font-family: DINCondensed-Bold, DINCondensed;
font-weight: bold; font-weight: bold;
line-height: 43px; line-height: 43px;
} }
.m { .m {
font-size: 0.9rem; font-size: 0.9rem;
line-height: 20px; line-height: 20px;
} }
.news-title { .news-title {
width: calc(100% - 110px); width: calc(100% - 110px);
font-size: 1.1rem; font-size: 1.1rem;
@ -1267,9 +1155,11 @@ export default {
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
} }
.org { .org {
padding: 15px; padding: 15px;
} }
.right { .right {
width: 17%; width: 17%;
padding-left: 20px; padding-left: 20px;
@ -1329,6 +1219,7 @@ export default {
} }
} }
} }
.party { .party {
/deep/.columns { /deep/.columns {
.el-tree-node__content { .el-tree-node__content {
@ -1336,8 +1227,10 @@ export default {
color: $partyTheme; color: $partyTheme;
} }
} }
.is-current > .el-tree-node__content {
.is-current>.el-tree-node__content {
background-color: $lightPartyTheme; background-color: $lightPartyTheme;
&:after { &:after {
background-color: $partyTheme; background-color: $partyTheme;
} }
@ -1348,6 +1241,7 @@ export default {
} }
} }
} }
.article { .article {
.readDetailBtn { .readDetailBtn {
width: 100px; width: 100px;
@ -1357,26 +1251,31 @@ export default {
border-color: $partyTheme; border-color: $partyTheme;
} }
} }
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active { /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $partyTheme !important; background-color: $partyTheme !important;
} }
} }
.detail { .detail {
flex: 1; flex: 1;
max-width: 77%; max-width: 77%;
padding: 10px 15px; padding: 10px 15px;
background-color: #fff; background-color: #fff;
overflow: auto; overflow: auto;
h2 { h2 {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.9rem; font-size: 1.9rem;
color: #1c1c1c; color: #1c1c1c;
} }
.meta { .meta {
margin: 1rem 0; margin: 1rem 0;
font-size: 0.88rem; font-size: 0.88rem;
color: #9b9b9b; color: #9b9b9b;
} }
.brief { .brief {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -1385,32 +1284,40 @@ export default {
color: #606060; color: #606060;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }
/deep/.des { /deep/.des {
a { a {
color: rgb(0, 0, 238); color: rgb(0, 0, 238);
word-wrap: break-word; word-wrap: break-word;
} }
img { img {
max-width: 100%; max-width: 100%;
object-fit: cover; object-fit: cover;
} }
ul { ul {
padding-left: 40px; padding-left: 40px;
list-style: disc; list-style: disc;
li { li {
list-style: inherit; list-style: inherit;
} }
} }
ol { ol {
padding-left: 40px; padding-left: 40px;
list-style: decimal; list-style: decimal;
li { li {
list-style: inherit; list-style: inherit;
} }
} }
} }
.annex { .annex {
margin-top: 30px; margin-top: 30px;
h6 { h6 {
padding-left: 8px; padding-left: 8px;
margin-bottom: 20px; margin-bottom: 20px;
@ -1421,21 +1328,25 @@ export default {
color: #333; color: #333;
border-left: 4px solid #1583ff; border-left: 4px solid #1583ff;
} }
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.name { .name {
margin-right: 8px; margin-right: 8px;
font-size: 14px; font-size: 14px;
} }
.download { .download {
color: #1583ff; color: #1583ff;
cursor: pointer; cursor: pointer;
} }
} }
} }
.none { .none {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -1443,6 +1354,7 @@ export default {
align-items: center; align-items: center;
flex: 1; flex: 1;
text-align: center; text-align: center;
.text { .text {
margin-top: 20px; margin-top: 20px;
font-size: 0.9rem; font-size: 0.9rem;
@ -1453,20 +1365,25 @@ export default {
@media (max-width: 1200px) { @media (max-width: 1200px) {
.banner { .banner {
height: 15rem !important; height: 15rem !important;
img { img {
height: 15rem !important; height: 15rem !important;
} }
.texts { .texts {
top: 6rem; top: 6rem;
left: 3rem; left: 3rem;
} }
} }
.article { .article {
flex-direction: column; flex-direction: column;
width: 90%; width: 90%;
.columns { .columns {
width: 40%; width: 40%;
} }
.left { .left {
width: 100%; width: 100%;
@ -1501,19 +1418,23 @@ export default {
align-items: flex-start; align-items: flex-start;
padding: 1rem; padding: 1rem;
margin-top: 1rem; margin-top: 1rem;
.pic { .pic {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
} }
} }
.readDetail { .readDetail {
align-items: flex-start; align-items: flex-start;
.texts { .texts {
width: 100%; width: 100%;
padding-left: 0; padding-left: 0;
} }
} }
} }
.media { .media {
li { li {
padding: 0; padding: 0;
@ -1530,56 +1451,69 @@ export default {
@media (max-width: 640px) { @media (max-width: 640px) {
.banner { .banner {
height: 12rem !important; height: 12rem !important;
img { img {
height: 12rem !important; height: 12rem !important;
} }
.texts { .texts {
left: 2rem; left: 2rem;
bottom: 2rem; bottom: 2rem;
.text { .text {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.article { .article {
.contents { .contents {
flex-direction: column; flex-direction: column;
padding: 0 15px; padding: 0 15px;
} }
.columns, .columns,
.article-wrap { .article-wrap {
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
} }
.articles { .articles {
li { li {
.leftBox { .leftBox {
padding-left: 0; padding-left: 0;
.titleDes { .titleDes {
line-height: 1.368rem; line-height: 1.368rem;
} }
} }
} }
} }
.media { .media {
margin-left: 0; margin-left: 0;
li { li {
width: calc(50% - 20px); width: calc(50% - 20px);
margin-right: 20px; margin-right: 20px;
&:nth-child(2n) { &:nth-child(2n) {
margin-right: 0; margin-right: 0;
} }
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 20px; margin-right: 20px;
} }
} }
} }
} }
.forms { .forms {
.switch { .switch {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
margin-right: 0; margin-right: 0;
li { li {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;

@ -3,7 +3,9 @@
* */ * */
const isDev = process.env.NODE_ENV === 'development' // 开发环境 const isDev = process.env.NODE_ENV === 'development' // 开发环境
let host = `${location.origin}/` let host = `${location.origin}/`
if (isDev) {
host = 'http://192.168.31.51:10000/'
}
const Setting = { const Setting = {
/** /**
* 基础配置 * 基础配置

Loading…
Cancel
Save