|
|
|
|
<template>
|
|
|
|
|
<div v-show="loaded"
|
|
|
|
|
:class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
|
|
|
|
|
<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">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<!-- 文章：侧边栏+搜索+新闻列表 -->
|
|
|
|
|
<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"
|
|
|
|
|
: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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="search">
|
|
|
|
|
<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 === 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"
|
|
|
|
|
: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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="search">
|
|
|
|
|
<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">
|
|
|
|
|
<ul class="switch">
|
|
|
|
|
<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"
|
|
|
|
|
:value="item.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</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;">
|
|
|
|
|
<span :title="node.label">{{ node.label }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</el-tree>
|
|
|
|
|
|
|
|
|
|
<template v-if="articles.length && !loading">
|
|
|
|
|
<!-- 列表样式选的是列表详情，则直接显示最新一篇文章的详情 -->
|
|
|
|
|
<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">
|
|
|
|
|
<h6>{{$t('column.attachmentDownload')}}</h6>
|
|
|
|
|
<ul class="files">
|
|
|
|
|
<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>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<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)">
|
|
|
|
|
<template v-if="info.listStyleId === 55">
|
|
|
|
|
<div class="releaseTime">
|
|
|
|
|
<p class="d">{{ item.date }}</p>
|
|
|
|
|
<p class="m">{{ item.month }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="news-title">{{ item.title }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<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"
|
|
|
|
|
class="type">
|
|
|
|
|
{{ item.classificationName }}
|
|
|
|
|
</p>
|
|
|
|
|
<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>
|
|
|
|
|
</template>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
</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>
|
|
|
|
|
</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}"
|
|
|
|
|
@click="toArtice(item)">
|
|
|
|
|
<template v-if="info.listStyleId === 55">
|
|
|
|
|
<div class="releaseTime">
|
|
|
|
|
<p class="d">{{ item.date }}</p>
|
|
|
|
|
<p class="m">{{ item.month }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="news-title">{{ item.title }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<div class="texts leftBox">
|
|
|
|
|
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName"
|
|
|
|
|
class="type">
|
|
|
|
|
{{ item.classificationName }}
|
|
|
|
|
</p>
|
|
|
|
|
<h6 class="titleDes">{{ item.title }}</h6>
|
|
|
|
|
<template v-if="item.listStyleId === 11 || item.listStyleId == 12">
|
|
|
|
|
<span class="meta">{{ item.releaseTime }}
|
|
|
|
|
<template v-if="item.labelName != ''">
|
|
|
|
|
| {{ item.labelName }}
|
|
|
|
|
</template>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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=""
|
|
|
|
|
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>
|
|
|
|
|
</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"
|
|
|
|
|
:class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}"
|
|
|
|
|
class="overDetail"
|
|
|
|
|
@click="toArtice(item)">
|
|
|
|
|
<template v-if="info.listStyleId === 55">
|
|
|
|
|
<div class="releaseTime">
|
|
|
|
|
<p class="d">{{ item.date }}</p>
|
|
|
|
|
<p class="m">{{ item.month }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="news-title">{{ item.title }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<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">
|
|
|
|
|
<!-- <el-image class="media-pic"
|
|
|
|
|
:style="{backgroundImage: 'url(https://huorantech.com/iasf/sysFiles/preview/1706961813193707521)'}"
|
|
|
|
|
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 标签。
|
|
|
|
|
</video>
|
|
|
|
|
<el-image v-else
|
|
|
|
|
class="media-pic"
|
|
|
|
|
:src="item.fileList[0].filePath"
|
|
|
|
|
:preview-src-list="[item.fileList[0].filePath]">
|
|
|
|
|
</el-image>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<div class="texts">
|
|
|
|
|
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
|
|
|
|
|
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">
|
|
|
|
|
<span class="meta">{{ item.releaseTime }}</span>
|
|
|
|
|
<div class="des"
|
|
|
|
|
v-html="item.mainBody"></div>
|
|
|
|
|
</template>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
</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>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
<div v-else
|
|
|
|
|
class="none">
|
|
|
|
|
<img src="@/assets/images/none.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<p class="text">{{ $t('column.comming') }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <template v-if="info.listStyleId !== 77 && info.listStyleId !== 74"> -->
|
|
|
|
|
<template v-if="info.listStyleId !== 77 && info.listStyleId !== 74">
|
|
|
|
|
<!-- 选择了“列表样式”，不用显示右侧部分 -->
|
|
|
|
|
<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)">
|
|
|
|
|
<p class="text">{{ item.title }}</p>
|
|
|
|
|
<span class="date">{{ item.releaseTime }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<span class="date">{{ item.releaseTime }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div v-else
|
|
|
|
|
class="right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Setting from '@/setting';
|
|
|
|
|
import Util from '@/libs/util';
|
|
|
|
|
import Breadcrumb from '@/components/breadcrumb';
|
|
|
|
|
import mixins from '@/mixins/article';
|
|
|
|
|
export default {
|
|
|
|
|
mixins: [mixins],
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
Util,
|
|
|
|
|
loaded: false,
|
|
|
|
|
fromColumn: this.$route.query.column,
|
|
|
|
|
isIphone: false,
|
|
|
|
|
columnId: '',
|
|
|
|
|
info: {},
|
|
|
|
|
columnBanner: '',
|
|
|
|
|
searchTimer: null,
|
|
|
|
|
lableId: [],
|
|
|
|
|
convokeTypes: [],
|
|
|
|
|
form: {
|
|
|
|
|
classificationId: null,
|
|
|
|
|
title: '',
|
|
|
|
|
convokeType: null
|
|
|
|
|
},
|
|
|
|
|
classifications: [],
|
|
|
|
|
labels: [],
|
|
|
|
|
columns: [],
|
|
|
|
|
infoColumns: [],
|
|
|
|
|
sameStyle: 1,
|
|
|
|
|
allColumnId: [],
|
|
|
|
|
showNav: false,
|
|
|
|
|
showNavIds: [10, 11, 12, 16, 55, 68, 77, 74], // 显示侧导航的模板id
|
|
|
|
|
isFilter: false,
|
|
|
|
|
page: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
total: 0,
|
|
|
|
|
articles: [],
|
|
|
|
|
defaultProps: {
|
|
|
|
|
value: 'id',
|
|
|
|
|
label: 'columnName'
|
|
|
|
|
},
|
|
|
|
|
news: [],
|
|
|
|
|
hots: [],
|
|
|
|
|
deepestId: '',
|
|
|
|
|
getAllId: null,
|
|
|
|
|
article: {},
|
|
|
|
|
loading: false
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
Breadcrumb
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
$route () {
|
|
|
|
|
this.id = this.$route.query.id;
|
|
|
|
|
this.info = {}
|
|
|
|
|
this.init();
|
|
|
|
|
},
|
|
|
|
|
'form.title': function (val) {
|
|
|
|
|
clearTimeout(this.searchTimer);
|
|
|
|
|
this.searchTimer = setTimeout(() => {
|
|
|
|
|
this.filter();
|
|
|
|
|
}, 500);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
const u = navigator.userAgent;
|
|
|
|
|
this.isIphone = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
|
|
|
|
|
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 () {
|
|
|
|
|
this.getInfo();
|
|
|
|
|
this.getColumn();
|
|
|
|
|
this.getNews();
|
|
|
|
|
this.getLabel();
|
|
|
|
|
},
|
|
|
|
|
// 获取栏目详情
|
|
|
|
|
getInfo () {
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.loaded = false
|
|
|
|
|
this.id &&
|
|
|
|
|
this.$post(`${this.api.findColumn}?id=${this.id}`)
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.columnClick(data);
|
|
|
|
|
if (data.typeId !== 3 && !data.menuVisible) {
|
|
|
|
|
this.loaded = true; // 非长页，才展示页面
|
|
|
|
|
}
|
|
|
|
|
this.info = data
|
|
|
|
|
this.pageSize = data.pageSize || 10
|
|
|
|
|
this.showNav = this.showNavIds.includes(data.listStyleId)
|
|
|
|
|
this.handlePublication()
|
|
|
|
|
this.getLeftColumn()
|
|
|
|
|
this.getClassification()
|
|
|
|
|
})
|
|
|
|
|
.catch((res) => { });
|
|
|
|
|
},
|
|
|
|
|
// 判断是否是出版物模板，如果是则跳转
|
|
|
|
|
handlePublication () {
|
|
|
|
|
if (this.info.templateId === 11) { // 出版社直接跳转到单个的出版社页面（/publication/single），否则就查询子级是否是出版社模板（templateId = 11），是的话就跳转到/publication/index，必须是每个子级都是出版社才跳转，后者是前者的集合（专利、专著、论文）
|
|
|
|
|
this.$router.push(`/publication/single?siteId=${this.site}&id=${this.id}&type=${this.info.listStyleId}`)
|
|
|
|
|
} else {
|
|
|
|
|
this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => {
|
|
|
|
|
data.length && data.every(e => e.templateId == 11) && this.$router.push(`/publication?siteId=${this.site}&id=${this.id}`) // 如果子级每个栏目都是出版物类型
|
|
|
|
|
}).catch(err => { })
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取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 {
|
|
|
|
|
// 其他类型的分类
|
|
|
|
|
this.$post(`${this.api.getTheFullArticleByColumn}?id=${this.id}`)
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.classifications = data;
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => { });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取标签
|
|
|
|
|
getLabel () {
|
|
|
|
|
this.$post(`${this.api.queryLabel}?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) => { });
|
|
|
|
|
},
|
|
|
|
|
// 递归查询是否每个层级的栏目都是同一列表样式，如果是，则查询全部栏目下的文章，否则查询当前栏目下的
|
|
|
|
|
handleColumn (data, parent) {
|
|
|
|
|
for (const e of data) {
|
|
|
|
|
if (this.info.typeId === 4) {
|
|
|
|
|
// 子级优先
|
|
|
|
|
if (e.children.length) {
|
|
|
|
|
this.handleColumn(e.children);
|
|
|
|
|
} else if (!this.deepestId) {
|
|
|
|
|
this.deepestId = e.id;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 常规栏目
|
|
|
|
|
if (e.id == this.id) {
|
|
|
|
|
this.allColumnId.push(e.id);
|
|
|
|
|
e.children.length && this.handleColumn(e.children, 1);
|
|
|
|
|
} else if (parent) {
|
|
|
|
|
if (e.listStyleId !== this.info.listStyleId) {
|
|
|
|
|
// 如果有不同的栏目样式
|
|
|
|
|
this.sameStyle = 0;
|
|
|
|
|
break;
|
|
|
|
|
} else {
|
|
|
|
|
this.allColumnId.push(e.id); // 收集所有该栏目下相同栏目样式的id
|
|
|
|
|
e.children.length && this.handleColumn(e.children, parent);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
e.children.length && this.handleColumn(e.children, parent);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 左边栏目
|
|
|
|
|
getLeftColumn () {
|
|
|
|
|
this.getAllId = []
|
|
|
|
|
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
|
|
|
|
|
const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
|
|
|
|
|
const { typeId } = this.info;
|
|
|
|
|
this.sameStyle = 1;
|
|
|
|
|
this.allColumnId = [];
|
|
|
|
|
this.deepestId = '';
|
|
|
|
|
data.length && this.handleColumn(data);
|
|
|
|
|
let id = this.sameStyle && typeId === 1 ? this.allColumnId : [+this.$route.query.id];
|
|
|
|
|
if (typeId === 4 && !fromColumn) {
|
|
|
|
|
id = [this.deepestId];
|
|
|
|
|
}
|
|
|
|
|
this.getAllId = id
|
|
|
|
|
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.id);
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => { });
|
|
|
|
|
},
|
|
|
|
|
// 右边资讯
|
|
|
|
|
getColumn () {
|
|
|
|
|
this.$post(this.api.listWithTreeMenuVisible, {
|
|
|
|
|
siteId: this.site,
|
|
|
|
|
columnName: '',
|
|
|
|
|
templateId: '',
|
|
|
|
|
typeId: '',
|
|
|
|
|
isSort: 1
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.infoColumns = data;
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => { });
|
|
|
|
|
|
|
|
|
|
this.$post(`${this.api.hotContent}?siteId=${this.site}`)
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.hots = Util.removeTag(data);
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => { });
|
|
|
|
|
},
|
|
|
|
|
// 最新资讯
|
|
|
|
|
getNews () {
|
|
|
|
|
this.$post(this.api.newlyPublishedArticles, {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 5,
|
|
|
|
|
siteId: this.site
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.news = Util.removeTag(data.records);
|
|
|
|
|
})
|
|
|
|
|
.catch((res) => { });
|
|
|
|
|
},
|
|
|
|
|
// 会议时间筛选回调
|
|
|
|
|
switchChange (item) {
|
|
|
|
|
this.form.convokeType = item.id;
|
|
|
|
|
this.filter();
|
|
|
|
|
},
|
|
|
|
|
// 点击栏目回调
|
|
|
|
|
columnClick (to, left) {
|
|
|
|
|
this.page = 1
|
|
|
|
|
const { typeId } = to;
|
|
|
|
|
// 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应
|
|
|
|
|
if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
|
|
|
|
|
// 出版物则跳转到出版物列表
|
|
|
|
|
if (to.templateId === 8) {
|
|
|
|
|
this.$router.replace(`/publish?id=${this.id}&siteId=${this.site}`);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 跳转链接
|
|
|
|
|
if (typeId === 2) {
|
|
|
|
|
let href = to.linkAddress;
|
|
|
|
|
const cType = to.connectionType;
|
|
|
|
|
if (cType !== 2) {
|
|
|
|
|
// 非站外链接
|
|
|
|
|
const ids = href.split('-'); // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
|
|
|
|
|
// 站点id：站内链接取当前站点，其他站点链接取siteSelection
|
|
|
|
|
const site = cType === 1 ? this.$route.query.siteId || this.site : to.siteSelection;
|
|
|
|
|
if (ids[1]) {
|
|
|
|
|
// 文章
|
|
|
|
|
href = '/article?articleId=' + ids[1];
|
|
|
|
|
} else {
|
|
|
|
|
// 栏目
|
|
|
|
|
const columnIds = ids[0].split(',');
|
|
|
|
|
href = '/column?id=' + columnIds[columnIds.length - 1];
|
|
|
|
|
}
|
|
|
|
|
href = this.$router.resolve(href + '&siteId=' + site).href;
|
|
|
|
|
}
|
|
|
|
|
// 是否新窗口打开
|
|
|
|
|
if (to.isOpen) {
|
|
|
|
|
var userAgent = navigator.userAgent;
|
|
|
|
|
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
|
|
|
|
|
if (isSafari) {
|
|
|
|
|
window.location.href = href
|
|
|
|
|
} else {
|
|
|
|
|
window.open(href)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
location.href = href;
|
|
|
|
|
}
|
|
|
|
|
} else if (typeId === 3) {
|
|
|
|
|
// 长页栏目直接获取path
|
|
|
|
|
this.$router.push(`/${to.path}?id=${to.id}&siteId=${this.site}`).catch((err) => { });
|
|
|
|
|
} else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
|
|
|
|
|
// 常规栏目，或者没有子级的子级优先栏目，跳转到column页
|
|
|
|
|
this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}&siteId=${this.site}`).catch((err) => { });
|
|
|
|
|
} else if (left && typeId === 4 && to.children.length) {
|
|
|
|
|
// 子级优先栏目，并且有子级
|
|
|
|
|
const el = this.$refs.leftColumn;
|
|
|
|
|
if (el) {
|
|
|
|
|
const exp = el.store.nodesMap[to.id].expanded;
|
|
|
|
|
el.store.nodesMap[to.id].expanded = !exp; // 展开收缩子级
|
|
|
|
|
el.setCurrentKey(this.id);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 查询文章列表
|
|
|
|
|
getArticle (columnIds) {
|
|
|
|
|
const labelName = [];
|
|
|
|
|
// 获取标签名称
|
|
|
|
|
this.labels.map((e) => {
|
|
|
|
|
if (this.lableId.includes(e.id)) labelName.push(e.labelName);
|
|
|
|
|
});
|
|
|
|
|
this.$post(this.api.newlyPublishedArticles, {
|
|
|
|
|
siteId: this.site,
|
|
|
|
|
columnIds,
|
|
|
|
|
pageNum: this.page,
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
labelName,
|
|
|
|
|
...this.form
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
const articles = Util.removeTag(data.records);
|
|
|
|
|
articles.forEach(e => {
|
|
|
|
|
// 把发布日期分割成年月和日，新闻中心-通知公告要展示
|
|
|
|
|
if (e.releaseTime) {
|
|
|
|
|
const date = e.releaseTime.split('-')
|
|
|
|
|
e.date = date[2]
|
|
|
|
|
e.month = date[0] + '/' + date[1]
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.articles = articles
|
|
|
|
|
this.total = +data.total;
|
|
|
|
|
this.loading = false
|
|
|
|
|
// this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`)
|
|
|
|
|
if (this.total) {
|
|
|
|
|
this.$post(`${this.api.findArticle}?id=${articles[0].id}`).then(async ({ data }) => {
|
|
|
|
|
this.article = data
|
|
|
|
|
}).catch(err => { })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((res) => { });
|
|
|
|
|
},
|
|
|
|
|
// 递归获取栏目所有id
|
|
|
|
|
getIds (data, ids) {
|
|
|
|
|
data.map((e) => {
|
|
|
|
|
ids.push(e.id);
|
|
|
|
|
e.children && this.getIds(e.children, ids);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 筛选
|
|
|
|
|
filter () {
|
|
|
|
|
this.page = 1;
|
|
|
|
|
this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length); // 是否在筛选
|
|
|
|
|
let id = [];
|
|
|
|
|
if (this.isFilter) {
|
|
|
|
|
this.getIds(this.columns, id);
|
|
|
|
|
} else if (this.columns.length) {
|
|
|
|
|
id = this.getAllId
|
|
|
|
|
}
|
|
|
|
|
this.getArticle(id);
|
|
|
|
|
},
|
|
|
|
|
currentChange (val) {
|
|
|
|
|
this.page = val;
|
|
|
|
|
this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length);
|
|
|
|
|
let id = [];
|
|
|
|
|
if (this.isFilter) {
|
|
|
|
|
this.getIds(this.columns, id);
|
|
|
|
|
} else if (this.columns.length) {
|
|
|
|
|
id = this.getAllId.length ? this.getAllId : [this.$refs.leftColumn.getCurrentKey()];
|
|
|
|
|
}
|
|
|
|
|
this.getArticle(id);
|
|
|
|
|
},
|
|
|
|
|
// 下载附件
|
|
|
|
|
download (e) {
|
|
|
|
|
Util.downloadFile(e.fileName, e.filePath)
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.banner {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 24rem;
|
|
|
|
|
color: #fff;
|
|
|
|
|
img {
|
|
|
|
|
height: 24rem;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
.texts {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 160px;
|
|
|
|
|
left: 267px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 2.16rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
@include ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sub {
|
|
|
|
|
margin-top: 0.5rem;
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-tree-node__content {
|
|
|
|
|
padding-left: 10px !important;
|
|
|
|
|
}
|
|
|
|
|
.l-title {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.column-wrap {
|
|
|
|
|
padding: 2rem 0;
|
|
|
|
|
background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
|
|
|
|
|
url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
|
|
|
|
|
background-color: #f9fafa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.article {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
width: 83%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.article-wrap {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 2.5rem;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
padding: 0 0.75rem;
|
|
|
|
|
margin-right: 0.5rem;
|
|
|
|
|
line-height: 1.8rem;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
color: #333;
|
|
|
|
|
background: #f7f7f7;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: linear-gradient(126deg, #1150ac 0%, #17beff 100%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.forms {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 1.5rem;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 1.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label {
|
|
|
|
|
font-size: 0.912rem;
|
|
|
|
|
color: #333;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-input__inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 2.4rem;
|
|
|
|
|
line-height: 2.4rem;
|
|
|
|
|
border: 0;
|
|
|
|
|
background: #f7f7f7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
width: 34%;
|
|
|
|
|
margin-top: 0.1rem;
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 2.4rem;
|
|
|
|
|
padding: 0 0.75rem;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
color: #333;
|
|
|
|
|
background: #f7f7f7;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 3.1rem;
|
|
|
|
|
height: 2.4rem;
|
|
|
|
|
background: #1583ff;
|
|
|
|
|
border-radius: 0px 6px 6px 0px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contents {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.columns {
|
|
|
|
|
& + .detail {
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
width: 22%;
|
|
|
|
|
margin-right: 0.6rem;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
span {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #e1e6f2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tree-node__content {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 2.4rem;
|
|
|
|
|
padding-left: 2rem;
|
|
|
|
|
margin-bottom: 1px;
|
|
|
|
|
font-size: 1.04rem;
|
|
|
|
|
color: #666;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-top: 1px solid #f8f9f9;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #0c84eb;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tree-node__label {
|
|
|
|
|
font-size: 1.28rem;
|
|
|
|
|
color: #666;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tree-node__expand-icon.expanded {
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tree-node__expand-icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.is-current > .el-tree-node__content {
|
|
|
|
|
background-color: #e5edf8;
|
|
|
|
|
border-top: 0;
|
|
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #083a93;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tree-node__label,
|
|
|
|
|
.custom-tree-node {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #1150ac;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.articles {
|
|
|
|
|
.readDetail {
|
|
|
|
|
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;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.texts {
|
|
|
|
|
width: 60%;
|
|
|
|
|
padding-left: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
font-size: 1.024rem;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h6 {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
font-size: 1.368rem;
|
|
|
|
|
color: #000;
|
|
|
|
|
@include mul-ellipsis(2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.meta {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 0.88rem;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
font-family: PingFangSC-Medium;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.des {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
@include mul-ellipsis(2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pic {
|
|
|
|
|
width: 30%;
|
|
|
|
|
height: auto;
|
|
|
|
|
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;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
-webkit-line-clamp: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.news-notice {
|
|
|
|
|
.releaseTime {
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 88px;
|
|
|
|
|
padding: 10px 0 16px;
|
|
|
|
|
margin-right: 24px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
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;
|
|
|
|
|
color: #333;
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
@include mul-ellipsis(2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.org {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
width: 17%;
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list {
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
padding: 0.8rem 0;
|
|
|
|
|
border-bottom: 1px solid #d8d8d8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
font-size: 0.98rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: $main-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.date {
|
|
|
|
|
font-size: 0.78rem;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.activity {
|
|
|
|
|
.column-wrap {
|
|
|
|
|
padding: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.article-wrap {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.article {
|
|
|
|
|
.forms {
|
|
|
|
|
padding: 30px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.articles li {
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
padding-bottom: 38px;
|
|
|
|
|
margin-bottom: 38px;
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
padding-top: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.party {
|
|
|
|
|
/deep/.columns {
|
|
|
|
|
.el-tree-node__content {
|
|
|
|
|
&:hover {
|
|
|
|
|
color: $partyTheme;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.is-current > .el-tree-node__content {
|
|
|
|
|
background-color: $lightPartyTheme;
|
|
|
|
|
&:after {
|
|
|
|
|
background-color: $partyTheme;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tree-node__label,
|
|
|
|
|
.custom-tree-node {
|
|
|
|
|
color: $partyTheme;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.article {
|
|
|
|
|
.readDetailBtn {
|
|
|
|
|
width: 100px;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
background-color: $partyTheme;
|
|
|
|
|
border-color: $partyTheme;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
|
|
|
background-color: $partyTheme !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.detail {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
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;
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
line-height: 1.33;
|
|
|
|
|
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;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
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;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.text {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@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;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.item,
|
|
|
|
|
.search {
|
|
|
|
|
margin: 20px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item:first-child {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.article-wrap {
|
|
|
|
|
width: 90%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.articles {
|
|
|
|
|
li:not(.news-notice) {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
width: 95%;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@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;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
