|
|
|
|
@ -1,11 +1,8 @@ |
|
|
|
|
<template> |
|
|
|
|
<div v-show="loaded" |
|
|
|
|
<div v-show="loaded" v-loading="loading" |
|
|
|
|
:class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]"> |
|
|
|
|
<div class="banner fadeInUp"> |
|
|
|
|
<img width="100%" |
|
|
|
|
height="280" |
|
|
|
|
:src="info.columnBanner" |
|
|
|
|
alt="" /> |
|
|
|
|
<img width="100%" height="280" :src="info.columnBanner" alt="" /> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="text">{{ info.columnName }}</p> |
|
|
|
|
<p class="sub">{{ info.subtitle }}</p> |
|
|
|
|
@ -15,37 +12,24 @@ |
|
|
|
|
<div class="article"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<!-- 文章：侧边栏+搜索+新闻列表 --> |
|
|
|
|
<div v-if="info.listStyleId === 10" |
|
|
|
|
class="forms"> |
|
|
|
|
<div v-if="info.listStyleId === 10" class="forms"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<span class="label">{{ $t('column.classification') }}：</span> |
|
|
|
|
<el-select v-model="form.classificationId" |
|
|
|
|
@change="filter"> |
|
|
|
|
<el-option :label="$t('column.all')" |
|
|
|
|
:value="null"></el-option> |
|
|
|
|
<el-option v-for="item in classifications" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.classificationName" |
|
|
|
|
<el-select v-model="form.classificationId" @change="filter"> |
|
|
|
|
<el-option :label="$t('column.all')" :value="null"></el-option> |
|
|
|
|
<el-option v-for="item in classifications" :key="item.id" :label="item.classificationName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<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" |
|
|
|
|
:label="item.labelName" |
|
|
|
|
:value="item.id"> </el-option> |
|
|
|
|
<el-select ref="search" v-model="lableId" multiple @change="filter"> |
|
|
|
|
<el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
<div class="search"> |
|
|
|
|
<input type="text" |
|
|
|
|
:placeholder="$t('column.titlePlaceholder')" |
|
|
|
|
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="" /> |
|
|
|
|
@ -53,62 +37,42 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 侧导航+新闻列表(含文章概述) --> |
|
|
|
|
<div v-if="info.listStyleId === 12" |
|
|
|
|
class="forms"> |
|
|
|
|
<div v-if="info.listStyleId === 12" class="forms"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<span class="label">{{ $t('column.classification') }}：</span> |
|
|
|
|
<el-select v-model="form.classificationId" |
|
|
|
|
@change="filter"> |
|
|
|
|
<el-option :label="$t('column.all')" |
|
|
|
|
:value="null"></el-option> |
|
|
|
|
<el-option v-for="item in classifications" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.classificationName" |
|
|
|
|
<el-select v-model="form.classificationId" @change="filter"> |
|
|
|
|
<el-option :label="$t('column.all')" :value="null"></el-option> |
|
|
|
|
<el-option v-for="item in classifications" :key="item.id" :label="item.classificationName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<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" |
|
|
|
|
:label="item.labelName" |
|
|
|
|
:value="item.id"> </el-option> |
|
|
|
|
<el-select ref="search" v-model="lableId" multiple @change="filter"> |
|
|
|
|
<el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
<div class="search"> |
|
|
|
|
<input type="text" |
|
|
|
|
:placeholder="$t('column.titlePlaceholder')" |
|
|
|
|
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> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 会议活动：筛选+会议活动列表 --> |
|
|
|
|
<div v-if="info.listStyleId === 15" |
|
|
|
|
class="forms"> |
|
|
|
|
<div v-if="info.listStyleId === 15" class="forms"> |
|
|
|
|
<ul class="switch"> |
|
|
|
|
<li v-for="(item, i) in convokeTypes" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{ active: item.id === form.convokeType }" |
|
|
|
|
<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">{{ $t('column.classification') }}：</span> |
|
|
|
|
<el-select v-model="form.classificationId" |
|
|
|
|
@change="filter"> |
|
|
|
|
<el-option :label="$t('column.all')" |
|
|
|
|
:value="null"></el-option> |
|
|
|
|
<el-option v-for="item in classifications" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.classificationName" |
|
|
|
|
<el-select v-model="form.classificationId" @change="filter"> |
|
|
|
|
<el-option :label="$t('column.all')" :value="null"></el-option> |
|
|
|
|
<el-option v-for="item in classifications" :key="item.id" :label="item.classificationName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
@ -116,48 +80,33 @@ |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="contents"> |
|
|
|
|
<el-tree v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15" |
|
|
|
|
class="columns" |
|
|
|
|
ref="leftColumn" |
|
|
|
|
:data="columns" |
|
|
|
|
highlight-current |
|
|
|
|
:expand-on-click-node="false" |
|
|
|
|
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;"> |
|
|
|
|
<el-tree |
|
|
|
|
v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15" |
|
|
|
|
class="columns" ref="leftColumn" :data="columns" highlight-current :expand-on-click-node="false" |
|
|
|
|
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> |
|
|
|
|
</el-tree> |
|
|
|
|
|
|
|
|
|
<template v-if="articles.length && !loading"> |
|
|
|
|
<!-- 列表样式选的是列表详情，则直接显示最新一篇文章的详情 --> |
|
|
|
|
<div v-if="info.listStyleId === 77" |
|
|
|
|
class="detail"> |
|
|
|
|
<div v-if="info.listStyleId === 77" class="detail"> |
|
|
|
|
|
|
|
|
|
<template v-if="article.articleTemplate != 72"> |
|
|
|
|
<h2>{{ article.title }}</h2> |
|
|
|
|
<!-- <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> --> |
|
|
|
|
</template> |
|
|
|
|
<p v-if="article.summary" |
|
|
|
|
class="brief">{{ article.summary }}</p> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="article.mainBody"></div> |
|
|
|
|
<div v-if="article.fileList && article.fileList.length" |
|
|
|
|
class="annex"> |
|
|
|
|
<p v-if="article.summary" class="brief">{{ article.summary }}</p> |
|
|
|
|
<div class="des" v-html="article.mainBody"></div> |
|
|
|
|
<div v-if="article.fileList && article.fileList.length" class="annex"> |
|
|
|
|
<h6>{{ $t('column.attachmentDownload') }}</h6> |
|
|
|
|
<ul class="files"> |
|
|
|
|
<li v-for="(file, i) in article.fileList" |
|
|
|
|
:key="i"> |
|
|
|
|
<li v-for="(file, i) in article.fileList" :key="i"> |
|
|
|
|
<span class="name">{{ file.fileName }}</span> |
|
|
|
|
<span class="download" |
|
|
|
|
@click="download(file)">{{$t('column.download')}}</span> |
|
|
|
|
<span class="download" @click="download(file)">{{ $t('column.download') }}</span> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
@ -167,11 +116,8 @@ |
|
|
|
|
<template v-if="info.listStyleId === 12"> |
|
|
|
|
<div class="article-wrap"> |
|
|
|
|
<ul class="articles"> |
|
|
|
|
<li v-for="(item, i) in articles" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{'news-notice': info.listStyleId === 55}" |
|
|
|
|
class="readDetail" |
|
|
|
|
@click="toArtice(item)"> |
|
|
|
|
<li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }" |
|
|
|
|
class="readDetail" @click="toArtice(item)"> |
|
|
|
|
<template v-if="info.listStyleId === 55"> |
|
|
|
|
<div class="releaseTime"> |
|
|
|
|
<p class="d">{{ item.date }}</p> |
|
|
|
|
@ -180,9 +126,7 @@ |
|
|
|
|
<div class="news-title">{{ item.title }}</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="item.titleImg" |
|
|
|
|
alt="" |
|
|
|
|
<img class="pic" :src="item.titleImg" alt="" |
|
|
|
|
onerror="javascript:this.src='./images/1.png?id=1';" /> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName" |
|
|
|
|
@ -192,63 +136,43 @@ |
|
|
|
|
<h6 class="titleDes">{{ item.title }}</h6> |
|
|
|
|
<template v-if="item.listStyleId === 11 || item.listStyleId == 12"> |
|
|
|
|
<span class="meta">{{ item.releaseTime }}</span> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="item.mainBody"></div> |
|
|
|
|
<div class="des" v-html="item.mainBody"></div> |
|
|
|
|
</template> |
|
|
|
|
<span v-if="item.listStyleId === 10 " |
|
|
|
|
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + |
|
|
|
|
<span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName |
|
|
|
|
&& ' | ' + |
|
|
|
|
item.labelName }}</span> |
|
|
|
|
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> |
|
|
|
|
<div v-if="item.keynoteSpeaker" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/mine.png" |
|
|
|
|
alt="" /> {{ item.keynoteSpeaker }} |
|
|
|
|
<div v-if="item.keynoteSpeaker" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.activityStartTime" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/time.png" |
|
|
|
|
alt="" /> |
|
|
|
|
<div v-if="item.activityStartTime" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/time.png" alt="" /> |
|
|
|
|
{{ item.activityStartTime }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.offlineLocation" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/location.png" |
|
|
|
|
alt="" /> {{ item.offlineLocation }} |
|
|
|
|
<div v-if="item.offlineLocation" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.onlineLocation" |
|
|
|
|
class="meta"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/online.png" |
|
|
|
|
alt="" /> {{ item.onlineLocation }} |
|
|
|
|
<div v-if="item.onlineLocation" class="meta"> |
|
|
|
|
<img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button> |
|
|
|
|
<el-button type="primary" class="readDetailBtn">{{ $t('column.readDetail') }}</el-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div v-if="articles.length" |
|
|
|
|
class="pagination"> |
|
|
|
|
<el-pagination background |
|
|
|
|
@current-change="currentChange" |
|
|
|
|
:current-page="page" |
|
|
|
|
:page-size="pageSize" |
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
:total="total"></el-pagination> |
|
|
|
|
<div v-if="articles.length" class="pagination"> |
|
|
|
|
<el-pagination background @current-change="currentChange" :current-page="page" |
|
|
|
|
:page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10"> |
|
|
|
|
<div class="article-wrap"> |
|
|
|
|
<ul class="articles"> |
|
|
|
|
<li v-for="(item, i) in articles" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{'news-notice': info.listStyleId === 55}" |
|
|
|
|
<li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }" |
|
|
|
|
@click="toArtice(item)"> |
|
|
|
|
<template v-if="info.listStyleId === 55"> |
|
|
|
|
<div class="releaseTime"> |
|
|
|
|
@ -271,63 +195,43 @@ |
|
|
|
|
</template> |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
<span v-if="item.listStyleId === 10 " |
|
|
|
|
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + |
|
|
|
|
<span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName |
|
|
|
|
&& ' | ' + |
|
|
|
|
item.labelName }}</span> |
|
|
|
|
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> |
|
|
|
|
<div v-if="item.keynoteSpeaker" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/mine.png" |
|
|
|
|
alt="" /> {{ item.keynoteSpeaker }} |
|
|
|
|
<div v-if="item.keynoteSpeaker" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.activityStartTime" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/time.png" |
|
|
|
|
alt="" /> |
|
|
|
|
<div v-if="item.activityStartTime" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/time.png" alt="" /> |
|
|
|
|
{{ item.activityStartTime }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.offlineLocation" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/location.png" |
|
|
|
|
alt="" /> {{ item.offlineLocation }} |
|
|
|
|
<div v-if="item.offlineLocation" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.onlineLocation" |
|
|
|
|
class="meta"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/online.png" |
|
|
|
|
alt="" /> {{ item.onlineLocation }} |
|
|
|
|
<div v-if="item.onlineLocation" class="meta"> |
|
|
|
|
<img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="item.titleImg" |
|
|
|
|
alt="" |
|
|
|
|
<img class="pic" :src="item.titleImg" alt="" |
|
|
|
|
onerror="javascript:this.src='./images/1.png?id=1';" /> |
|
|
|
|
</template> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div v-if="articles.length" |
|
|
|
|
class="pagination"> |
|
|
|
|
<el-pagination background |
|
|
|
|
@current-change="currentChange" |
|
|
|
|
:current-page="page" |
|
|
|
|
:page-size="pageSize" |
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
:total="total"></el-pagination> |
|
|
|
|
<div v-if="articles.length" class="pagination"> |
|
|
|
|
<el-pagination background @current-change="currentChange" :current-page="page" |
|
|
|
|
:page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="article-wrap"> |
|
|
|
|
<ul :class="['articles', { media: info.listStyleId === 74 }]"> |
|
|
|
|
<li v-for="(item, i) in articles" |
|
|
|
|
:key="i" |
|
|
|
|
<li v-for="(item, i) in articles" :key="i" |
|
|
|
|
: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"> |
|
|
|
|
<div class="releaseTime"> |
|
|
|
|
<p class="d">{{ item.date }}</p> |
|
|
|
|
@ -336,10 +240,7 @@ |
|
|
|
|
<div class="news-title">{{ item.title }}</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<img v-if="info.listStyleId !== 74" |
|
|
|
|
class="pic" |
|
|
|
|
:src="item.titleImg" |
|
|
|
|
alt="" |
|
|
|
|
<img v-if="info.listStyleId !== 74" class="pic" :src="item.titleImg" alt="" |
|
|
|
|
onerror="javascript:this.src='./images/1.png?id=1';" /> |
|
|
|
|
|
|
|
|
|
<template v-else-if="item.fileList"> |
|
|
|
|
@ -348,20 +249,14 @@ |
|
|
|
|
src="https://huorantech.com/iasf/sysFiles/preview/1706961813193707521" |
|
|
|
|
:preview-src-list="['https://huorantech.com/iasf/sysFiles/preview/1706961813193707521']"> |
|
|
|
|
</el-image> --> |
|
|
|
|
<video v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))" |
|
|
|
|
class="media-video" |
|
|
|
|
controls |
|
|
|
|
x5-playsinline |
|
|
|
|
x5-video-player-type="h5" |
|
|
|
|
:poster="isIphone ? 'https://huorantech.com/images/about/12.png' : ''" |
|
|
|
|
preload> |
|
|
|
|
<source :src="item.fileList[0].filePath" |
|
|
|
|
type="video/mp4"> |
|
|
|
|
<video |
|
|
|
|
v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))" |
|
|
|
|
class="media-video" controls x5-playsinline x5-video-player-type="h5" |
|
|
|
|
:poster="isIphone ? 'https://huorantech.com/images/about/12.png' : ''" preload> |
|
|
|
|
<source :src="item.fileList[0].filePath" type="video/mp4"> |
|
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
|
</video> |
|
|
|
|
<el-image v-else |
|
|
|
|
class="media-pic" |
|
|
|
|
:src="item.fileList[0].filePath" |
|
|
|
|
<el-image v-else class="media-pic" :src="item.fileList[0].filePath" |
|
|
|
|
:preview-src-list="[item.fileList[0].filePath]"> |
|
|
|
|
</el-image> |
|
|
|
|
</template> |
|
|
|
|
@ -371,67 +266,48 @@ |
|
|
|
|
class="type"> |
|
|
|
|
{{ item.classificationName }} |
|
|
|
|
</p> |
|
|
|
|
<h6 class="titleDes" |
|
|
|
|
:title="item.title">{{ item.title }}</h6> |
|
|
|
|
<template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68"> |
|
|
|
|
<h6 class="titleDes" :title="item.title">{{ item.title }}</h6> |
|
|
|
|
<template |
|
|
|
|
v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68"> |
|
|
|
|
<span class="meta">{{ item.releaseTime }}</span> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="item.mainBody"></div> |
|
|
|
|
<div class="des" v-html="item.mainBody"></div> |
|
|
|
|
</template> |
|
|
|
|
<span v-if="item.listStyleId === 10 " |
|
|
|
|
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + |
|
|
|
|
<span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName |
|
|
|
|
&& ' | ' + |
|
|
|
|
item.labelName }}</span> |
|
|
|
|
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> |
|
|
|
|
<div v-if="item.keynoteSpeaker" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/mine.png" |
|
|
|
|
alt="" /> {{ item.keynoteSpeaker }} |
|
|
|
|
<div v-if="item.keynoteSpeaker" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.activityStartTime" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/time.png" |
|
|
|
|
alt="" /> |
|
|
|
|
<div v-if="item.activityStartTime" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/time.png" alt="" /> |
|
|
|
|
{{ item.activityStartTime }} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.offlineLocation" |
|
|
|
|
class="meta m-b-10"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/location.png" |
|
|
|
|
alt="" /> {{ item.offlineLocation }} |
|
|
|
|
<div v-if="item.offlineLocation" class="meta m-b-10"> |
|
|
|
|
<img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div v-if="item.onlineLocation" |
|
|
|
|
class="meta"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/online.png" |
|
|
|
|
alt="" /> {{ item.onlineLocation }} |
|
|
|
|
<div v-if="item.onlineLocation" class="meta"> |
|
|
|
|
<img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" |
|
|
|
|
type="primary" |
|
|
|
|
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button> |
|
|
|
|
<el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" type="primary" |
|
|
|
|
class="readDetailBtn">{{ |
|
|
|
|
$t('column.readDetail') }}</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div v-if="total > articles.length" |
|
|
|
|
class="pagination"> |
|
|
|
|
<el-pagination background |
|
|
|
|
@current-change="currentChange" |
|
|
|
|
:current-page="page" |
|
|
|
|
:page-size="pageSize" |
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
:total="total"></el-pagination> |
|
|
|
|
<div v-if="total > articles.length" class="pagination"> |
|
|
|
|
<el-pagination background @current-change="currentChange" :current-page="page" |
|
|
|
|
:page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
<div v-else |
|
|
|
|
class="none"> |
|
|
|
|
<img src="@/assets/images/none.png" |
|
|
|
|
alt=""> |
|
|
|
|
<div v-else class="none"> |
|
|
|
|
<img src="@/assets/images/none.png" alt=""> |
|
|
|
|
<p class="text">{{ $t('column.comming') }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -442,10 +318,7 @@ |
|
|
|
|
<div class="right"> |
|
|
|
|
<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)"> |
|
|
|
|
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)"> |
|
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
|
<span class="date">{{ item.releaseTime }}</span> |
|
|
|
|
</li> |
|
|
|
|
@ -453,10 +326,7 @@ |
|
|
|
|
|
|
|
|
|
<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)"> |
|
|
|
|
<li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)"> |
|
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
|
<span class="date">{{ item.releaseTime }}</span> |
|
|
|
|
</li> |
|
|
|
|
@ -479,7 +349,7 @@ export default { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
Util, |
|
|
|
|
loaded: false, |
|
|
|
|
loaded: true, |
|
|
|
|
fromColumn: this.$route.query.column, |
|
|
|
|
isIphone: false, |
|
|
|
|
columnId: '', |
|
|
|
|
@ -563,13 +433,13 @@ export default { |
|
|
|
|
// 获取栏目详情 |
|
|
|
|
getInfo () { |
|
|
|
|
this.loading = true |
|
|
|
|
this.loaded = false |
|
|
|
|
this.loaded = true |
|
|
|
|
this.id && |
|
|
|
|
this.$post(`${this.api.findColumn}?id=${this.id}`) |
|
|
|
|
.then(({ data }) => { |
|
|
|
|
this.columnClick(data); |
|
|
|
|
if (data.typeId !== 3 && !data.menuVisible) { |
|
|
|
|
this.loaded = true; // 非长页，才展示页面 |
|
|
|
|
if (data.typeId === 3 || data.menuVisible) { |
|
|
|
|
this.loaded = false; // 非长页，才展示页面 |
|
|
|
|
} |
|
|
|
|
this.info = data |
|
|
|
|
this.pageSize = data.pageSize || 10 |
|
|
|
|
@ -878,10 +748,12 @@ export default { |
|
|
|
|
position: relative; |
|
|
|
|
height: 24rem; |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
height: 24rem; |
|
|
|
|
object-fit: cover; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 160px; |
|
|
|
|
@ -899,9 +771,11 @@ export default { |
|
|
|
|
font-size: 1.6rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tree-node__content { |
|
|
|
|
padding-left: 10px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.l-title { |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
@ -921,8 +795,10 @@ export default { |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
width: 83%; |
|
|
|
|
|
|
|
|
|
&:only-child { |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
.detail:only-child { |
|
|
|
|
max-width: none; |
|
|
|
|
} |
|
|
|
|
@ -1022,9 +898,11 @@ export default { |
|
|
|
|
&+.detail { |
|
|
|
|
padding-left: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
width: 22%; |
|
|
|
|
margin-right: 0.6rem; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow: hidden; |
|
|
|
|
@ -1100,33 +978,41 @@ export default { |
|
|
|
|
padding: 10px 20px; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
padding-left: 1.5rem; |
|
|
|
|
|
|
|
|
|
.titleDes { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 1.2rem; |
|
|
|
|
margin-top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.des { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.titleDes { |
|
|
|
|
margin-top: 0.8rem; |
|
|
|
|
-webkit-line-clamp: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.readDetailBtn { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
flex-grow: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.overDetail { |
|
|
|
|
.texts { |
|
|
|
|
width: 70%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
@ -1178,34 +1064,42 @@ export default { |
|
|
|
|
object-fit: cover; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.media { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
flex-direction: column; |
|
|
|
|
width: calc(33% - 30px); |
|
|
|
|
margin-right: 30px; |
|
|
|
|
background-color: transparent; |
|
|
|
|
|
|
|
|
|
&:nth-child(3n) { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.media-video { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 155px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.media-pic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 155px; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
object-fit: cover; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
width: 100% !important; |
|
|
|
|
padding-left: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
@ -1214,6 +1108,7 @@ export default { |
|
|
|
|
-webkit-line-clamp: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.news-notice { |
|
|
|
|
.releaseTime { |
|
|
|
|
width: 88px; |
|
|
|
|
@ -1224,16 +1119,19 @@ export default { |
|
|
|
|
text-align: center; |
|
|
|
|
background: #0b5086; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.d { |
|
|
|
|
font-size: 2rem; |
|
|
|
|
font-family: DINCondensed-Bold, DINCondensed; |
|
|
|
|
font-weight: bold; |
|
|
|
|
line-height: 43px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.m { |
|
|
|
|
font-size: 0.9rem; |
|
|
|
|
line-height: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.news-title { |
|
|
|
|
width: calc(100% - 110px); |
|
|
|
|
font-size: 1.1rem; |
|
|
|
|
@ -1242,9 +1140,11 @@ export default { |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.org { |
|
|
|
|
padding: 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: 17%; |
|
|
|
|
padding-left: 20px; |
|
|
|
|
@ -1304,6 +1204,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.party { |
|
|
|
|
/deep/.columns { |
|
|
|
|
.el-tree-node__content { |
|
|
|
|
@ -1311,8 +1212,10 @@ export default { |
|
|
|
|
color: $partyTheme; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.is-current>.el-tree-node__content { |
|
|
|
|
background-color: $lightPartyTheme; |
|
|
|
|
|
|
|
|
|
&:after { |
|
|
|
|
background-color: $partyTheme; |
|
|
|
|
} |
|
|
|
|
@ -1323,6 +1226,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.article { |
|
|
|
|
.readDetailBtn { |
|
|
|
|
width: 100px; |
|
|
|
|
@ -1332,26 +1236,31 @@ export default { |
|
|
|
|
border-color: $partyTheme; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active { |
|
|
|
|
background-color: $partyTheme !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.detail { |
|
|
|
|
flex: 1; |
|
|
|
|
max-width: 77%; |
|
|
|
|
padding: 10px 15px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
font-size: 1.9rem; |
|
|
|
|
color: #1c1c1c; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
margin: 1rem 0; |
|
|
|
|
font-size: 0.88rem; |
|
|
|
|
color: #9b9b9b; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.brief { |
|
|
|
|
padding-bottom: 1.5rem; |
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
@ -1360,18 +1269,22 @@ export default { |
|
|
|
|
color: #606060; |
|
|
|
|
border-bottom: 1px solid #d8d8d8; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.des { |
|
|
|
|
a { |
|
|
|
|
color: rgb(0, 0, 238); |
|
|
|
|
word-wrap: break-word; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
max-width: 100%; |
|
|
|
|
object-fit: cover; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.annex { |
|
|
|
|
margin-top: 30px; |
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
|
padding-left: 8px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
@ -1382,21 +1295,25 @@ export default { |
|
|
|
|
color: #333; |
|
|
|
|
border-left: 4px solid #1583ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.name { |
|
|
|
|
margin-right: 8px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.download { |
|
|
|
|
color: #1583ff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.none { |
|
|
|
|
display: inline-flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
@ -1404,6 +1321,7 @@ export default { |
|
|
|
|
align-items: center; |
|
|
|
|
flex: 1; |
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
font-size: 0.9rem; |
|
|
|
|
@ -1414,22 +1332,28 @@ export default { |
|
|
|
|
@media (max-width: 1200px) { |
|
|
|
|
.banner { |
|
|
|
|
height: 15rem !important; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
height: 15rem !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
top: 6rem; |
|
|
|
|
left: 3rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.article { |
|
|
|
|
flex-direction: column; |
|
|
|
|
width: 90%; |
|
|
|
|
|
|
|
|
|
.columns { |
|
|
|
|
width: 40%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
.forms { |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
@ -1461,19 +1385,23 @@ export default { |
|
|
|
|
align-items: flex-start; |
|
|
|
|
padding: 1rem; |
|
|
|
|
margin-top: 1rem; |
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
margin: 10px 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.readDetail { |
|
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
width: 100%; |
|
|
|
|
padding-left: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.media { |
|
|
|
|
li { |
|
|
|
|
padding: 0; |
|
|
|
|
@ -1490,56 +1418,69 @@ export default { |
|
|
|
|
@media (max-width: 640px) { |
|
|
|
|
.banner { |
|
|
|
|
height: 12rem !important; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
height: 12rem !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
left: 2rem; |
|
|
|
|
bottom: 2rem; |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
font-size: 1.5rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.article { |
|
|
|
|
.contents { |
|
|
|
|
flex-direction: column; |
|
|
|
|
padding: 0 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.columns, |
|
|
|
|
.article-wrap { |
|
|
|
|
width: 100%; |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.articles { |
|
|
|
|
li { |
|
|
|
|
.leftBox { |
|
|
|
|
padding-left: 0; |
|
|
|
|
|
|
|
|
|
.titleDes { |
|
|
|
|
line-height: 1.368rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.media { |
|
|
|
|
margin-left: 0; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
width: calc(50% - 20px); |
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
|
|
&:nth-child(2n) { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(3n) { |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.forms { |
|
|
|
|
.switch { |
|
|
|
|
width: 100%; |
|
|
|
|
flex-direction: column; |
|
|
|
|
margin-right: 0; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
width: 90%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
@ -1547,13 +1488,16 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.detail { |
|
|
|
|
h2 { |
|
|
|
|
font-size: 1.3rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
font-size: 0.7rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.brief { |
|
|
|
|
font-size: 1rem; |
|
|
|
|
} |
|
|
|
|
|
