You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
739 lines
22 KiB
739 lines
22 KiB
<template> |
|
<div v-show="loaded" :class="['wrap', {activity: info.listStyleId === 15}]"> |
|
<div class="banner"> |
|
<img width="100%" height="280" :src="info.columnBanner" alt=""> |
|
<div class="texts"> |
|
<p class="text">{{ info.columnName }}</p> |
|
<p class="sub">{{ info.subtitle }}</p> |
|
</div> |
|
</div> |
|
<div class="column-wrap"> |
|
<div class="article"> |
|
<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 === 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="!isFilter && showNav" 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)"> |
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
<span :title="node.label">{{ node.label }}</span> |
|
</span> |
|
</el-tree> |
|
|
|
<div class="article-wrap"> |
|
<ul class="articles"> |
|
<li v-for="(item, i) in articles" :key="i" @click="toArtice(item)"> |
|
<div class="texts"> |
|
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName" class="type">{{ item.classificationName }}</p> |
|
<h6>{{ item.title }}</h6> |
|
<template v-if="item.listStyleId === 11"> |
|
<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 + ' ~ ' + item.activityEndTime }}</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';"> |
|
</li> |
|
</ul> |
|
<div v-if="articles.length" class="pagination"> |
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<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 class="shadow"></div> |
|
</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 { |
|
loaded: false, |
|
fromColumn: this.$route.query.column, |
|
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], // 显示侧导航的模板id |
|
isFilter: false, |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
articles: [], |
|
defaultProps: { |
|
value: 'id', |
|
label: 'columnName' |
|
}, |
|
news: [], |
|
hots: [], |
|
deepestId: '' |
|
} |
|
}, |
|
components: { |
|
Breadcrumb |
|
}, |
|
watch: { |
|
'$route'() { |
|
this.id = this.$route.query.id |
|
this.init() |
|
}, |
|
'form.title': function(val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.filter() |
|
}, 500) |
|
}, |
|
}, |
|
mounted() { |
|
this.convokeTypes = [ |
|
{ |
|
id: null, |
|
name: this.$t('column.all') |
|
}, |
|
{ |
|
id: 1, |
|
name: this.$t('column.comingSoon') |
|
}, |
|
{ |
|
id: 2, |
|
name: this.$t('column.alreadyHeld') |
|
} |
|
] |
|
this.init() |
|
}, |
|
methods: { |
|
init() { |
|
this.getInfo() |
|
this.getColumn() |
|
this.getNews() |
|
this.getLabel() |
|
}, |
|
// 获取栏目详情 |
|
getInfo() { |
|
this.id && this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => { |
|
this.columnClick(data) |
|
if (data.typeId !== 3) this.loaded = true // 非长页，才展示页面 |
|
this.info = data |
|
this.showNav = this.showNavIds.includes(data.listStyleId) |
|
this.getLeftColumn() |
|
this.getClassification() |
|
}).catch(res => {}) |
|
}, |
|
// 获取banner 规则：当前栏目有上传的，用当前的，没有上传的话，读取上级的（上级没有读上上级，以此类推）都没有的读取默认的 |
|
getBanner(data) { |
|
for (const e of data) { |
|
if (e.columnBanner) this.columnBanner = e.columnBanner |
|
if (e.id == this.info.id) { |
|
break |
|
} else if (e.children.length) { |
|
this.getBanner(e.children) |
|
} |
|
} |
|
}, |
|
// 获取所属分类 |
|
getClassification() { |
|
// 会议分类 |
|
if (this.info.templateId === 7) { |
|
this.$post(`${this.api.queryClassif}?siteId=${this.site}&templateId=${7}`).then(({ data }) => { |
|
this.classifications = data |
|
}).catch(err => {}) |
|
} else { // 其他类型的分类 |
|
this.$post(`${this.api.getTheFullArticleByColumn}?id=${this.id}`).then(({ data }) => { |
|
this.classifications = data |
|
}).catch(err => {}) |
|
} |
|
}, |
|
// 获取标签 |
|
getLabel() { |
|
this.$post(`${this.api.queryLabel}?siteId=${this.$route.query.siteId || this.site}`).then(({ data }) => { |
|
this.labels = data |
|
// 修改placeholder |
|
this.$nextTick(() => { |
|
setTimeout(() => { |
|
const el = this.$refs.search |
|
if (el) el.$el.querySelector('.el-input__inner').placeholder = this.$t('column.selectPlaceholder') |
|
}, 500) |
|
|
|
}) |
|
}).catch(err => {}) |
|
}, |
|
// 递归查询是否每个层级的栏目都是同一列表样式，如果是，则查询全部栏目下的文章，否则查询当前栏目下的 |
|
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.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1`).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.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.$route.query.siteId || this.$store.state.content.site, |
|
columnName: '', |
|
templateId: '', |
|
typeId : '', |
|
isSort: 1 |
|
}).then(({ data }) => { |
|
this.infoColumns = data |
|
}).catch(err => {}) |
|
|
|
this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => { |
|
this.hots = Util.removeTag(data) |
|
}).catch(err => {}) |
|
}, |
|
// 最新资讯 |
|
getNews() { |
|
this.$post(this.api.newlyPublishedArticles, { |
|
|
|
|
|
pageNum: 1, |
|
pageSize: 5, |
|
siteId: this.$route.query.siteId || this.$store.state.content.site |
|
}).then(({ data }) => { |
|
this.news = Util.removeTag(data.records) |
|
}).catch(res => {}) |
|
}, |
|
// 会议时间筛选回调 |
|
switchChange(item) { |
|
this.form.convokeType = item.id |
|
this.filter() |
|
}, |
|
// 点击栏目回调 |
|
columnClick(to, left) { |
|
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.$route.query.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?id=' + 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) { |
|
window.open(href) |
|
} else { |
|
location.href = href |
|
} |
|
} else if (typeId === 3) { |
|
// 长页栏目直接获取path |
|
this.$router.push(`/${to.path}?id=${to.id}`).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' : '')}`).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.$route.query.siteId || this.site, |
|
columnIds, |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
labelName, |
|
...this.form |
|
}).then(({ data }) => { |
|
this.articles = Util.removeTag(data.records) |
|
this.total = +data.total |
|
// 如果栏目那勾选了“只有一篇文章时，以详情方式展示”，并且只有一篇文章，则跳转到详情页 |
|
// this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`) |
|
}).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.columns[0].id] |
|
} |
|
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.$refs.leftColumn.getCurrentKey()] |
|
} |
|
this.getArticle(id) |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.l-title { |
|
font-weight: 600; |
|
} |
|
.banner { |
|
position: relative; |
|
height: 280px; |
|
|
|
color: #fff; |
|
.texts { |
|
position: absolute; |
|
top: 123px; |
|
left: 243px; |
|
} |
|
.text { |
|
font-size: 48px; |
|
font-weight: 600; |
|
@include ellipsis; |
|
} |
|
.sub { |
|
margin-top: 10px; |
|
font-size: 28px; |
|
} |
|
} |
|
.column-wrap { |
|
padding: 40px 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: center; |
|
margin: 0 auto; |
|
.left { |
|
width: 66%; |
|
margin-right: 28px; |
|
} |
|
.article-wrap { |
|
width: 78%; |
|
} |
|
.switch { |
|
display: inline-flex; |
|
align-items: center; |
|
margin-right: 50px; |
|
li { |
|
padding: 0 15px; |
|
margin-right: 10px; |
|
line-height: 36px; |
|
font-size: 14px; |
|
color: #333; |
|
background: #F7F7F7; |
|
cursor: pointer; |
|
} |
|
.active { |
|
color: #fff; |
|
background: linear-gradient(126deg, #1150AC 0%, #17BEFF 100%); |
|
} |
|
} |
|
.forms { |
|
display: flex; |
|
align-items: center; |
|
padding: 30px; |
|
margin-bottom: 20px; |
|
background-color: #fff; |
|
.item { |
|
display: inline-flex; |
|
align-items: center; |
|
margin-right: 30px; |
|
} |
|
.label { |
|
font-size: 16px; |
|
color: #333; |
|
white-space: nowrap; |
|
} |
|
/deep/.el-input__inner { |
|
width: 100%; |
|
height: 48px; |
|
line-height: 48px; |
|
border: 0; |
|
background: #F7F7F7; |
|
} |
|
.search { |
|
display: inline-flex; |
|
width: 34%; |
|
input { |
|
width: 100%; |
|
height: 48px; |
|
padding: 0 15px; |
|
font-size: 14px; |
|
color: #333; |
|
background: #F7F7F7; |
|
border: 0; |
|
border-top-left-radius: 6px; |
|
border-bottom-left-radius: 6px; |
|
&:focus { |
|
outline: none; |
|
} |
|
} |
|
} |
|
.icon { |
|
display: inline-flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 62px; |
|
height: 48px; |
|
background: #1583FF; |
|
border-radius: 0px 6px 6px 0px; |
|
cursor: pointer; |
|
} |
|
} |
|
.contents { |
|
display: flex; |
|
} |
|
/deep/.columns { |
|
width: 22%; |
|
margin-right: 12px; |
|
overflow: auto; |
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 2px; |
|
height: 100%; |
|
background-color: #E1E6F2; |
|
} |
|
.el-tree-node__content { |
|
position: relative; |
|
height: 48px; |
|
padding-left: 40px; |
|
margin-bottom: 1px; |
|
font-size: 18px; |
|
color: #666; |
|
background-color: #fff; |
|
border-top: 1px solid #F8F9F9; |
|
cursor: pointer; |
|
&:before { |
|
content: ''; |
|
width: 2px; |
|
height: 2px; |
|
margin: 0 10px 0 20px; |
|
background-color: #666; |
|
border-radius: 50%; |
|
} |
|
&:hover { |
|
color: #0c84eb; |
|
} |
|
} |
|
.el-tree-node__label { |
|
font-size: 18px; |
|
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 { |
|
li { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
background-color: #fff; |
|
cursor: pointer; |
|
} |
|
.texts { |
|
max-width: 620px; |
|
padding-left: 30px; |
|
margin-right: 20px; |
|
} |
|
.type { |
|
margin-bottom: 15px; |
|
font-size: 18px; |
|
color: #333; |
|
} |
|
h6 { |
|
margin-bottom: 15px; |
|
font-size: 24px; |
|
color: #000; |
|
line-height: 38px; |
|
@include mul-ellipsis(2); |
|
} |
|
.meta { |
|
display: flex; |
|
align-items: center; |
|
font-size: 14px; |
|
font-family: PingFangSC-Medium; |
|
color: #333; |
|
} |
|
.icon { |
|
margin-right: 10px; |
|
} |
|
.des { |
|
margin-top: 15px; |
|
@include mul-ellipsis(2); |
|
} |
|
.pic { |
|
width: 430px; |
|
// min-width: 380px; |
|
height: 244px; |
|
} |
|
} |
|
.right { |
|
width: 14%; |
|
min-width: 240px; |
|
overflow: hidden; |
|
} |
|
.column { |
|
width: 100%; |
|
margin-bottom: 25px; |
|
/deep/.el-tree-node__content { |
|
height: 44px; |
|
background-color: #E5EDF8; |
|
border-bottom: 2px solid #fff; |
|
} |
|
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { |
|
color: #fff; |
|
background-color: #0f5698; |
|
} |
|
} |
|
.list { |
|
margin-bottom: 20px; |
|
li { |
|
padding: 16px 0; |
|
border-bottom: 1px solid #D8D8D8; |
|
} |
|
.text { |
|
margin-bottom: 5px; |
|
font-size: 14px; |
|
cursor: pointer; |
|
@include ellipsis; |
|
&:hover { |
|
color: $main-color; |
|
} |
|
} |
|
.date { |
|
font-size: 12px; |
|
color: #999; |
|
} |
|
} |
|
} |
|
.activity { |
|
.column-wrap { |
|
padding: 0; |
|
background: none; |
|
} |
|
.article-wrap { |
|
width: 100%; |
|
} |
|
.article { |
|
justify-content: center; |
|
.left { |
|
width: 1136px; |
|
margin-right: 36px; |
|
} |
|
.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; |
|
} |
|
} |
|
} |
|
</style> |