|
|
|
|
@ -1,11 +1,7 @@ |
|
|
|
|
<template> |
|
|
|
|
<div v-show="loaded" |
|
|
|
|
:class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]"> |
|
|
|
|
<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="" /> |
|
|
|
|
<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 +11,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 +36,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 +79,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 === 73" |
|
|
|
|
class="detail"> |
|
|
|
|
<div v-if="info.listStyleId === 73" 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 +115,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 +125,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 +135,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 +194,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 +239,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 +248,14 @@ |
|
|
|
|
src="https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521" |
|
|
|
|
:preview-src-list="['https://new.iasf.ac.cn/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://new.iasf.ac.cn/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://new.iasf.ac.cn/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,95 +265,68 @@ |
|
|
|
|
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> |
|
|
|
|
</div> |
|
|
|
|
<!-- <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> --> |
|
|
|
|
<template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> |
|
|
|
|
<div v-if="site == 2" |
|
|
|
|
class="right"> |
|
|
|
|
<div v-if="site == 2" class="right"> |
|
|
|
|
<p class="l-title">{{ $t('column.latestNews') }}</p> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li v-for="(item, i) in site2News" |
|
|
|
|
:key="i" |
|
|
|
|
:title="item.title" |
|
|
|
|
@click="toArtice(item)"> |
|
|
|
|
<li v-for="(item, i) in site2News" :key="i" :title="item.title" @click="toArtice(item)"> |
|
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
|
<span class="date">{{ item.releaseTime }}</span> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<!-- 选择了“列表样式”，不用显示右侧部分 --> |
|
|
|
|
<div v-else |
|
|
|
|
class="right"> |
|
|
|
|
<div v-else 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> |
|
|
|
|
@ -467,25 +334,20 @@ |
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<div v-else |
|
|
|
|
class="right"></div> |
|
|
|
|
<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'; |
|
|
|
|
@ -909,10 +771,12 @@ export default { |
|
|
|
|
position: relative; |
|
|
|
|
height: 24rem; |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
height: 24rem; |
|
|
|
|
object-fit: cover; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 160px; |
|
|
|
|
@ -930,9 +794,11 @@ export default { |
|
|
|
|
font-size: 1.6rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tree-node__content { |
|
|
|
|
padding-left: 10px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.l-title { |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
@ -1047,9 +913,11 @@ export default { |
|
|
|
|
&+.detail { |
|
|
|
|
padding-left: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
width: 22%; |
|
|
|
|
margin-right: 0.6rem; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow: hidden; |
|
|
|
|
@ -1125,33 +993,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; |
|
|
|
|
@ -1203,34 +1079,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; |
|
|
|
|
@ -1239,6 +1123,7 @@ export default { |
|
|
|
|
-webkit-line-clamp: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.news-notice { |
|
|
|
|
.releaseTime { |
|
|
|
|
width: 88px; |
|
|
|
|
@ -1249,16 +1134,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; |
|
|
|
|
@ -1267,9 +1155,11 @@ export default { |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.org { |
|
|
|
|
padding: 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: 17%; |
|
|
|
|
padding-left: 20px; |
|
|
|
|
@ -1329,6 +1219,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.party { |
|
|
|
|
/deep/.columns { |
|
|
|
|
.el-tree-node__content { |
|
|
|
|
@ -1336,8 +1227,10 @@ export default { |
|
|
|
|
color: $partyTheme; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.is-current>.el-tree-node__content { |
|
|
|
|
background-color: $lightPartyTheme; |
|
|
|
|
|
|
|
|
|
&:after { |
|
|
|
|
background-color: $partyTheme; |
|
|
|
|
} |
|
|
|
|
@ -1348,6 +1241,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.article { |
|
|
|
|
.readDetailBtn { |
|
|
|
|
width: 100px; |
|
|
|
|
@ -1357,26 +1251,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; |
|
|
|
|
@ -1385,32 +1284,40 @@ 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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ul { |
|
|
|
|
padding-left: 40px; |
|
|
|
|
list-style: disc; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
list-style: inherit; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ol { |
|
|
|
|
padding-left: 40px; |
|
|
|
|
list-style: decimal; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
list-style: inherit; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.annex { |
|
|
|
|
margin-top: 30px; |
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
|
padding-left: 8px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
@ -1421,21 +1328,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; |
|
|
|
|
@ -1443,6 +1354,7 @@ export default { |
|
|
|
|
align-items: center; |
|
|
|
|
flex: 1; |
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
font-size: 0.9rem; |
|
|
|
|
@ -1453,20 +1365,25 @@ 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%; |
|
|
|
|
|
|
|
|
|
@ -1501,19 +1418,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; |
|
|
|
|
@ -1530,56 +1451,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; |
|
|
|
|
|
