文章页右侧菜单抽离成组件,media修复

master
yujialong 2 years ago
parent 297928c1fd
commit 640f460295
  1. 133
      src/components/rightColumns/index.vue
  2. 105
      src/pages/article/activity.vue
  3. 180
      src/pages/article/index.vue
  4. 312
      src/pages/column/index.vue
  5. 183
      src/pages/contactUs/index.vue
  6. 6
      src/pages/estate/orgSetup/index.vue
  7. 116
      src/pages/lightSources/index.vue
  8. 328
      src/pages/news/index.vue
  9. 34
      src/pages/overviewDevHistory/index.vue
  10. 215
      src/pages/overviewIntro/index.vue
  11. 214
      src/pages/overviewLocation/index.vue
  12. 34
      src/pages/overviewSetup/index.vue
  13. 258
      src/pages/overviewTrailer/index.vue
  14. 121
      src/pages/speech/index.vue
  15. 300
      src/pages/talentCentre/index.vue
  16. 14
      src/router/modules/contactUs.js
  17. 14
      src/router/modules/lightSources.js
  18. 14
      src/router/modules/speech.js
  19. 14
      src/router/modules/talentCentre.js
  20. 31
      src/styles/page/page.scss

@ -0,0 +1,133 @@
<template>
<div class="right">
<el-tree class="column"
ref="column"
:data="columns"
highlight-current
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"
@node-click="columnTo"></el-tree>
<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>
<script>
import Util from '@/libs/util'
import mixins from '@/mixins/article'
export default {
props: {},
mixins: [mixins],
data () {
return {
columns: [],
defaultProps: {
value: 'id',
label: 'columnName'
},
news: [],
hots: []
}
},
mounted () {
this.getColumn()
},
methods: {
//
getColumn () {
this.$post(this.api.listWithTreeMenuVisible, {
siteId: this.site,
columnName: '',
templateId: '',
typeId: '',
isSort: 1
}).then(({ data }) => {
this.columns = data
this.$parent.getInfo && this.$parent.getInfo()
}).catch(err => { })
this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => {
this.hots = Util.removeTag(data)
}).catch(err => { })
this.$post(this.api.newlyPublishedArticles, {
pageNum: 1,
pageSize: 5,
siteId: this.site
}).then(({ data }) => {
this.news = Util.removeTag(data.records)
}).catch(res => { })
},
}
}
</script>
<style lang="scss" scoped>
.right {
width: 20%;
/deep/ .el-tree-node__label {
font-size: 0.78rem;
}
}
.column {
width: 100%;
margin-bottom: 1.56rem;
.el-tree-node:focus > .el-tree-node__content {
background-color: #e5edf8;
}
/deep/.el-tree-node__content {
height: 2.75rem;
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;
&:hover {
color: $main-color;
}
}
.date {
font-size: 12px;
color: #999;
}
}
@media (max-width: 1200px) {
.right {
width: 100%;
}
}
</style>

@ -1,51 +1,42 @@
<template>
<div class="wrap">
<div class="content">
<Breadcrumb ref="breadcrumb" :data.sync="routes"/>
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">{{$t('column.time')}}{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div>
<div v-if="form.offlineLocation" class="meta">{{$t('column.address')}}{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation" class="meta">{{$t('column.online')}}{{ form.onlineLocation }}</div>
<div v-if="form.offlineLocation" class="meta">{{$t('column.offline')}}{{ form.offlineLocation }}</div>
<div v-if="form.keynoteSpeaker" class="meta">{{$t('column.speaker')}}{{ form.keynoteSpeaker }}</div>
<div v-if="form.lectureSeries" class="meta">{{$t('column.series')}}{{ form.lectureSeries }}</div>
<div v-if="form.offlineLocation"
class="meta">{{$t('column.address')}}{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation"
class="meta">{{$t('column.online')}}{{ form.onlineLocation }}</div>
<div v-if="form.offlineLocation"
class="meta">{{$t('column.offline')}}{{ form.offlineLocation }}</div>
<div v-if="form.keynoteSpeaker"
class="meta">{{$t('column.speaker')}}{{ form.keynoteSpeaker }}</div>
<div v-if="form.lectureSeries"
class="meta">{{$t('column.series')}}{{ form.lectureSeries }}</div>
<h6>{{$t('column.ActivityIntroduction')}}</h6>
<div> {{ form.eventProfile }}</div>
<h6>{{$t('column.content')}}</h6>
<div v-html="form.mainBody"></div>
<div v-if="form.fileList && form.fileList.length" class="annex">
<div v-if="form.fileList && form.fileList.length"
class="annex">
<h6>{{$t('column.attachmentDownload')}}</h6>
<ul class="files">
<li v-for="(file, i) in form.fileList" :key="i">
<li v-for="(file, i) in form.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>
</div>
<div class="right">
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
<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" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
</div>
<RightColumns ref="right" />
</div>
</div>
</div>
@ -55,6 +46,7 @@
import Setting from '@/setting'
import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import RightColumns from '@/components/rightColumns'
import mixins from '@/mixins/article'
export default {
mixins: [mixins],
@ -75,7 +67,8 @@ export default {
}
},
components: {
Breadcrumb
Breadcrumb,
RightColumns
},
watch: {
'$route' () {
@ -162,7 +155,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "./editor.css";
@import './editor.css';
.content {
width: 1400px;
}
@ -182,7 +175,7 @@ export default {
h2 {
margin-bottom: 20px;
font-size: 36px;
color: #1C1C1C;
color: #1c1c1c;
}
.meta {
margin: 10px 0;
@ -205,7 +198,7 @@ export default {
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583FF;
border-left: 4px solid #1583ff;
}
li {
display: flex;
@ -217,7 +210,7 @@ export default {
font-size: 14px;
}
.download {
color: #1583FF;
color: #1583ff;
cursor: pointer;
}
}
@ -225,41 +218,6 @@ export default {
margin: 30px 0 10px;
font-size: 18px;
}
.right {
width: 20%;
}
.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;
&:hover {
color: $main-color;
}
}
.date {
font-size: 12px;
color: #999;
}
}
}
@media (max-width: 1420px) {
.content {
@ -267,7 +225,7 @@ export default {
}
}
@media (min-width: 280px) and (max-width: 750px) {
@media (max-width: 1200px) {
.banner {
height: 15rem;
}
@ -279,15 +237,6 @@ export default {
font-size: 1.5rem;
}
}
.right{
width: 100%;
.el-tree{
display: none;
}
}
}
}
</style>

@ -1,46 +1,36 @@
<template>
<div v-show="loaded" class="wrap">
<div v-if="form.articleTemplate !== 23" class="banner" :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
<div v-show="loaded"
class="wrap">
<div v-if="form.articleTemplate !== 23"
class="banner"
:style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
{{ form.columnName }}
</div>
<div class="content">
<Breadcrumb ref="breadcrumb" :data.sync="routes"/>
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} {{$t('column.views')}} | {{ form.releaseTime }}</div>
<div class="meta">{{ form.edit && $t('column.edit') + ':' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + ':' + form.audit }} {{ form.label && ' | ' + $t('column.label') + ':' + form.label }}</div>
<p class="brief">{{ form.summary }}</p>
<div class="des" v-html="form.mainBody"></div>
<div v-if="form.fileList && form.fileList.length" class="annex">
<div class="des"
v-html="form.mainBody"></div>
<div v-if="form.fileList && form.fileList.length"
class="annex">
<h6>{{$t('column.attachmentDownload')}}</h6>
<ul class="files">
<li v-for="(file, i) in form.fileList" :key="i">
<li v-for="(file, i) in form.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>
</div>
<div class="right">
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
<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>
<RightColumns ref="right" />
</div>
</div>
</div>
@ -50,6 +40,7 @@
import Setting from '@/setting'
import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import RightColumns from '@/components/rightColumns'
import mixins from '@/mixins/article'
export default {
mixins: [mixins],
@ -61,17 +52,11 @@ export default {
columnId: '',
form: {},
columnBanner: '',
columns: [],
defaultProps: {
value: 'id',
label: 'columnName'
},
news: [],
hots: []
}
},
components: {
Breadcrumb
Breadcrumb,
RightColumns
},
watch: {
'$route' () {
@ -80,8 +65,7 @@ export default {
}
},
mounted () {
this.getColumn()
this.getArticle()
},
methods: {
//
@ -115,7 +99,7 @@ export default {
this.columnId = data.columnId
// banner
if (!data.bannerImg) {
this.getBanner(this.columns)
this.getBanner(this.$refs.right.columns)
this.form.bannerImg = this.columnBanner || require('@/assets/images/article-banner.png')
}
this.loaded = true
@ -137,33 +121,6 @@ export default {
}
}
},
//
getColumn() {
this.$post(this.api.listWithTreeMenuVisible, {
siteId: this.site,
columnName: '',
templateId: '',
typeId : '',
isSort: 1
}).then(({ data }) => {
this.columns = data
this.getInfo()
}).catch(err => {})
this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => {
this.hots = Util.removeTag(data)
}).catch(err => {})
},
//
getArticle() {
this.$post(this.api.newlyPublishedArticles, {
pageNum: 1,
pageSize: 5,
siteId: this.site
}).then(({ data }) => {
this.news = Util.removeTag(data.records)
}).catch(res => {})
},
//
download (e) {
Util.downloadFile(e.fileName, e.filePath)
@ -173,11 +130,11 @@ export default {
</script>
<style lang="scss" scoped>
@import "./editor.css";
@import './editor.css';
.content {
width: 1200px;
/deep/ .el-breadcrumb {
font-size: .98rem;
font-size: 0.98rem;
}
}
.banner {
@ -196,12 +153,12 @@ export default {
}
h2 {
font-size: 1.9rem;
color: #1C1C1C;
color: #1c1c1c;
}
.meta {
margin: 1rem 0;
font-size: .88rem;
color: #9B9B9B;
font-size: 0.88rem;
color: #9b9b9b;
}
.brief {
padding-bottom: 1.5rem;
@ -209,7 +166,7 @@ export default {
font-size: 1.2rem;
line-height: 1.33;
color: #606060;
border-bottom: 1px solid #D8D8D8;
border-bottom: 1px solid #d8d8d8;
}
/deep/.des {
img {
@ -226,7 +183,7 @@ export default {
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583FF;
border-left: 4px solid #1583ff;
}
li {
display: flex;
@ -238,46 +195,8 @@ export default {
font-size: 14px;
}
.download {
color: #1583FF;
cursor: pointer;
}
}
.right {
width: 20%;
/deep/ .el-tree-node__label{
font-size: .78rem;
}
}
.column {
width: 100%;
margin-bottom: 1.56rem;
}
/deep/.el-tree-node__content {
height: 2.75rem;
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;
color: #1583ff;
cursor: pointer;
&:hover {
color: $main-color;
}
}
.date {
font-size: 12px;
color: #999;
}
}
}
@ -287,23 +206,6 @@ export default {
}
}
@media (max-width: 1200px) {
.article {
flex-direction: column;
.left, .right{
width: 95%;
margin: 0 auto;
.el-tree{
position: fixed;
right: 10px;
top: 160px;
z-index: 9;;
width: 180px;
}
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.article {
/deep/.des {
img {
@ -323,12 +225,6 @@ export default {
font-size: 1.5rem;
}
}
.right{
width: 100%;
.el-tree{
display: none;
}
}
}
.article {
.des {
@ -338,24 +234,8 @@ export default {
}
}
}
@media (max-width: 320px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 13rem;
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 15rem;
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
@media (max-width: 480px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;

@ -1,7 +1,11 @@
<template>
<div v-show="loaded" :class="['wrap', { activity: info.listStyleId === 15 }]">
<div v-show="loaded"
:class="['wrap', { activity: info.listStyleId === 15 }]">
<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>
@ -11,66 +15,99 @@
<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="" />
</i> -->
</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>
@ -84,17 +121,31 @@
</template>
<template v-else-if="!columns.find(i=>i.children.length) && info.listStyleId ===15 || info.listStyleId ===10 || info.listStyleId ===16">
</template>
<el-tree v-else 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 }" style="padding-left: 10px;">
<el-tree v-else
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 }"
style="padding-left: 10px;">
<span :title="node.label">{{ node.label }}</span>
</span>
</el-tree>
<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>
@ -103,7 +154,10 @@
<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';" />
<img class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';" />
<div class="texts">
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
class="type">
@ -112,34 +166,53 @@
<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 + ' ~ ' + 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 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"
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"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
</div>
</template>
@ -147,7 +220,11 @@
<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}" class="otherData" @click="toArtice(item)">
<li v-for="(item, i) in articles"
:key="i"
:class="{'news-notice': info.listStyleId === 55}"
class="otherData"
@click="toArtice(item)">
<template v-if="info.listStyleId === 55">
<div class="releaseTime">
<p class="d">{{ item.date }}</p>
@ -170,38 +247,62 @@
</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 + ' ~ ' + 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 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="" onerror="javascript:this.src='./images/1.png';" />
<img class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';" />
</template>
</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 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>
</template>
<template v-else>
<div class="article-wrap">
<ul class="articles">
<li v-for="(item, i) in articles" :key="i" :class="{'news-notice': info.listStyleId === 55}" class="overDetail" @click="toArtice(item)">
<li v-for="(item, i) in articles"
:key="i"
:class="{'news-notice': info.listStyleId === 55}"
class="overDetail"
@click="toArtice(item)">
<template v-if="info.listStyleId === 55">
<div class="releaseTime">
<p class="d">{{ item.date }}</p>
@ -210,7 +311,10 @@
<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';" />
<img class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';" />
<div class="texts">
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
class="type">
@ -219,35 +323,55 @@
<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 + ' ~ ' + 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 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" type="primary" class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
<el-button v-if="item.listStyleId === 15"
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"
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"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
</div>
</template>
@ -256,7 +380,10 @@
<div class="right">
<p class="l-title">{{ $t('column.hot') }}</p>
<ul class="list">
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
<li v-for="(item, i) in hots"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
@ -264,12 +391,14 @@
<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 class="shadow"></div>
</div>
</div>
</div>
@ -691,7 +820,7 @@ export default {
}
.sub {
margin-top: .5rem;
margin-top: 0.5rem;
font-size: 1.6rem;
}
}
@ -703,7 +832,6 @@ export default {
background-color: #f9fafa;
}
.article {
display: flex;
justify-content: center;
@ -724,8 +852,8 @@ export default {
margin-right: 2.5rem;
li {
padding: 0 .75rem;
margin-right: .5rem;
padding: 0 0.75rem;
margin-right: 0.5rem;
line-height: 1.8rem;
font-size: 1rem;
color: #333;
@ -753,7 +881,7 @@ export default {
}
.label {
font-size: .912rem;
font-size: 0.912rem;
color: #333;
white-space: nowrap;
}
@ -769,12 +897,12 @@ export default {
.search {
display: inline-flex;
width: 34%;
margin-top: .1rem;
margin-top: 0.1rem;
input {
width: 100%;
height: 2.4rem;
padding: 0 .75rem;
padding: 0 0.75rem;
font-size: 1rem;
color: #333;
background: #f7f7f7;
@ -805,7 +933,7 @@ export default {
/deep/.columns {
width: 22%;
margin-right: .6rem;
margin-right: 0.6rem;
overflow: auto;
span {
white-space: nowrap;
@ -882,7 +1010,6 @@ export default {
.custom-tree-node {
font-weight: 600;
color: #1150ac;
}
}
}
@ -914,7 +1041,7 @@ export default {
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
margin-top: .8rem;
margin-top: 0.8rem;
}
.readDetailBtn {
margin-top: 1.3rem;
@ -954,7 +1081,7 @@ export default {
.meta {
display: flex;
align-items: center;
font-size: .88rem;
font-size: 0.88rem;
font-family: PingFangSC-Medium;
color: #333;
}
@ -981,7 +1108,7 @@ export default {
margin-right: 24px;
color: #fff;
text-align: center;
background: #0B5086;
background: #0b5086;
}
.d {
font-size: 2rem;
@ -990,7 +1117,7 @@ export default {
line-height: 43px;
}
.m {
font-size: .9rem;
font-size: 0.9rem;
line-height: 20px;
}
.news-title {
@ -1027,13 +1154,13 @@ export default {
margin-bottom: 1rem;
li {
padding: .8rem 0;
padding: 0.8rem 0;
border-bottom: 1px solid #d8d8d8;
}
.text {
margin-bottom: 5px;
font-size: .98rem;
font-size: 0.98rem;
cursor: pointer;
@include ellipsis;
@ -1043,7 +1170,7 @@ export default {
}
.date {
font-size: .78rem;
font-size: 0.78rem;
color: #999;
}
}
@ -1079,7 +1206,6 @@ export default {
border-bottom: 1px solid #ddd;
}
.right {
padding-top: 30px;
}
@ -1183,7 +1309,6 @@ export default {
}
@media (min-width: 280px) and (max-width: 1200px) {
.banner {
height: 15rem !important;
img {
@ -1199,7 +1324,6 @@ export default {
width: 40%;
.el-tree-node__content {
padding: 0 !important;
}
span {
font-size: 0.8rem;
@ -1222,7 +1346,6 @@ export default {
li:not(.news-notice) {
flex-direction: column;
.pic {
width: 95%;
margin: 0 auto;
@ -1231,7 +1354,6 @@ export default {
}
}
}
}
}
}

@ -0,0 +1,183 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<div class="block">
<div class="inner">
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<div class="contact">
<div class="fields">
<h6>Contact us</h6>
<p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
<p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
<p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
</div>
<img src="http://10.10.11.7/images/contactUs/2.png"
alt=""
class="pic">
<el-table :data="list"
class="patent-table"
ref="table"
stripe
header-align="center">
<el-table-column prop="title"
label="部门"
align="center"
min-width="250"></el-table-column>
<el-table-column prop="publishingHouse"
label="联系人"
align="center"
min-width="100"></el-table-column>
<el-table-column prop="writersAndEditors"
label="电话"
align="center"
min-width="150"></el-table-column>
<el-table-column prop="publicationYear"
label="邮箱"
align="center"
min-width="150"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js'
export default {
mixins: [mixins],
data () {
return {
routes: [],
list: []
};
},
components: {
Breadcrumb
},
mounted () {
new WOW().init();
this.getColumn()
},
methods: {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
this.preview
? data
: data[data.length - 1][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
);
this.modules = json;
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
}
})
.catch((err) => { });
},
// id
getParent (data, id) {
for (const e of data) {
if (e.id == id) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
break
} else if (e.children.length) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
this.getParent(e.children, id)
}
}
},
//
getColumn () {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
this.getParent(data, this.id)
}).catch(err => { })
},
},
};
</script>
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.single-banner {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: 0.95rem;
}
.banner-des {
font-size: 0.96rem;
}
}
}
.block {
padding: 2rem 0;
background: url(http://10.10.11.7/images/contactUs/3.png) 0 130px no-repeat,
url(http://10.10.11.7/images/contactUs/4.png) bottom right no-repeat;
background-color: #f7f8fa;
}
.inner {
.contact {
padding: 3rem 6rem;
background-color: #fff;
}
.fields {
position: relative;
padding: 2rem;
border: 4px solid #f9f9f9;
h6 {
position: absolute;
top: -16px;
left: 60px;
font-size: 1.1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
background-color: #fff;
}
.text {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
}
.pic {
width: 100%;
margin: 2rem 0 1.5rem;
}
}
</style>

@ -30,8 +30,7 @@
alt="">
</div>
<div class="lg-bg">
<img width="100%"
:src="modules[2].form.pic"
<img :src="modules[2].form.pic"
alt="">
</div>
</div>
@ -112,8 +111,9 @@ export default {
}
}
.lg-bg {
width: 85%;
max-width: 85%;
margin: 0 auto;
text-align: center;
}
@media (max-width: 1200px) {
.tabs {

@ -0,0 +1,116 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<!-- <div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
<img class="block-pic br wow fadeInLeft"
data-wow-delay="0.8s"
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
width="100%"
height="536"
:src="modules[1].form.pic"
alt=""
@click="openLink(modules[1].form)">
</div>
</div> -->
<div class="block sources">
<div class="inner">
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}"
:key="i"
@click="tabChange(item)">{{ item.name }}</li>
</template>
</ul>
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
export default {
mixins: [mixins],
data () {
return {
active: 0,
tabs: [
{
id: 0,
name: '同步辐射光源'
},
{
id: 1,
name: '自由电子激光'
},
]
}
},
mounted () {
new WOW().init()
},
methods: {
//
getInfo () {
// /
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
}
}).catch(err => { })
},
}
};
</script>
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.block {
padding: 3.15rem 0;
.inner {
.b-title {
font-size: 2.25rem;
margin-bottom: 2.25rem;
}
.intro {
margin-bottom: 2.25rem;
}
}
}
.block-pic {
transition: 0.3s;
height: auto;
&.br {
border-radius: 270px;
}
&:hover {
transform: scale(1.05);
}
}
.tabs {
justify-content: flex-start;
}
</style>

@ -1,93 +1,152 @@
<template>
<div class="wrap">
<el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<el-carousel :interval="6000"
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
</template>
</el-carousel>
<div class="tabs">
<ul class="scollBox wow fadeInLeft" ref="tabs">
<div class="newsTab">
<ul class="scollBox wow fadeInLeft"
ref="newsTab">
<template v-for="(item, i) in modules[1].list">
<li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange($event,i)">{{ item.columnName }}</li>
<li v-if="item.columnName"
:class="{active: i == curColumn}"
:key="i"
@click="tabChange($event,i)">{{ item.columnName }}</li>
</template>
</ul>
</div>
<div class="block">
<div class="inner" v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
<div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
<img width="50%" height="410" class="titileImg" :src="curArticle.titleImg" alt="" onerror="javascript:this.src='./images/3.png';">
<div class="inner"
v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
<div class="news-banner wow fadeInDown"
data-wow-delay="0.5s"
@click="toArtice(curArticle, modules[1].list[curColumn])">
<img width="50%"
height="410"
class="titileImg"
:src="curArticle.titleImg"
alt=""
onerror="javascript:this.src='./images/3.png';">
<div class="right">
<h6>{{ curArticle.title }}</h6>
<div class="des" v-html="curArticle.mainBody"></div>
<div class="des"
v-html="curArticle.mainBody"></div>
<p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
<ul class="inds">
<li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
<li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
:key="i"
:class="{active: curInd == i - 1}"
@click.stop="switchCarousel(i - 1)"></li>
</ul>
</div>
</div>
<ul class="card">
<template v-for="(item, i) in modules[1].list[curColumn].articles">
<li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<img class="pic" :src="item.titleImg" alt="">
<li v-if="i > 2"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<img class="pic"
:src="item.titleImg"
alt="">
<div class="texts">
<p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p>
<div class="des">{{ item.title }}</div>
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])">
<img class="arrow"
src="@/assets/images/arrow.png"
alt=""
@click="toArtice(item, modules[1].list[curColumn])">
</div>
</li>
</template>
</ul>
<div class="more wow fadeInDown" data-wow-delay="0.5s" @click="toMore">More news ></div>
<div class="more wow fadeInDown"
data-wow-delay="0.5s"
@click="toMore">More news ></div>
</div>
</div>
<div class="block gray">
<div class="inner lg">
<h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<div class="shop-shows" v-if="articles.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
<img class="pic" width="100%" height="400" :src="articles[0].titleImg" alt="" onerror="javascript:this.src='./images/2.png';">
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<div class="shop-shows"
v-if="articles.length">
<div class="left wow fadeInLeft"
data-wow-delay="0.5s"
@click="toArtice(articles[0], modules[3].form)">
<img class="pic"
width="100%"
height="400"
:src="articles[0].titleImg"
alt=""
onerror="javascript:this.src='./images/2.png';">
<div class="texts">
<h6>{{ articles[0].title }}</h6>
<div class="des" v-html="articles[0].mainBody"></div>
<div class="des"
v-html="articles[0].mainBody"></div>
</div>
</div>
<div v-if="articles.length > 1" class="right wow fadeInRight" data-wow-delay="0.5s">
<div v-if="articles.length > 1"
class="right wow fadeInRight"
data-wow-delay="0.5s">
<ul class="show-card">
<li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
<img class="pic" :src="articles[1].titleImg" alt="">
<li v-if="articles[1]"
@click="toArtice(articles[1], modules[3].form)">
<img class="pic"
:src="articles[1].titleImg"
alt="">
<div class="text">{{ articles[1].title }}</div>
</li>
<li v-if="articles[2]" @click="toArtice(articles[2], modules[3].form)">
<img class="pic" :src="articles[2].titleImg" alt="">
<li v-if="articles[2]"
@click="toArtice(articles[2], modules[3].form)">
<img class="pic"
:src="articles[2].titleImg"
alt="">
<div class="text">{{ articles[2].title }}</div>
</li>
</ul>
<ul class="card-list">
<template v-for="(item, i) in articles">
<li v-if="i > 2" :key="i">
<img class="pic" :src="item.titleImg" alt="">
<li v-if="i > 2"
:key="i">
<img class="pic"
:src="item.titleImg"
alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<div class="des" v-html="item.mainBody"></div>
<div class="des"
v-html="item.mainBody"></div>
</div>
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[3].form)">
<img class="arrow"
src="@/assets/images/arrow.png"
alt=""
@click="toArtice(item, modules[3].form)">
</li>
</template>
</ul>
</div>
</div>
<div class="all-link m-t-10" @click="toAll(modules[3].form)">
<span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
<div class="all-link m-t-10"
@click="toAll(modules[3].form)">
<span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div>
</div>
</div>
@ -95,10 +154,19 @@
<div class="block conference">
<div class="inner lg">
<h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<div class="shows" v-if="articles1.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
<img class="pic" width="100%" height="558" :src="articles1[0].titleImg" alt="" onerror="javascript:this.src='./images/1.png';">
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<div class="shows"
v-if="articles1.length">
<div class="left wow fadeInLeft"
data-wow-delay="0.5s"
@click="toArtice(articles1[0], modules[5].form)">
<img class="pic"
width="100%"
height="558"
:src="articles1[0].titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';">
<div class="texts">
<div class="meta">
<p class="date">09</p>
@ -106,30 +174,48 @@
</div>
<div>
<h6>{{ articles1[0].title }}</h6>
<div class="des" v-html="articles1[0].mainBody"></div>
<div class="des"
v-html="articles1[0].mainBody"></div>
</div>
</div>
</div>
<ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
<ul class="card-list wow fadeInRight"
data-wow-delay="0.5s">
<template v-for="(item, i) in articles1">
<li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
<img class="pic" :src="item.titleImg" alt="">
<li v-if="i"
:key="i"
@click="toArtice(item, modules[5].form)">
<img class="pic"
:src="item.titleImg"
alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<p v-if="item.keynoteSpeaker" class="text">
<img class="icon" src="@/assets/images/mine.png" alt="">
<p v-if="item.keynoteSpeaker"
class="text">
<img class="icon"
src="@/assets/images/mine.png"
alt="">
{{ item.keynoteSpeaker }}
</p>
<p v-if="item.activityStartTime" class="text">
<img class="icon" src="@/assets/images/time.png" alt="">
<p v-if="item.activityStartTime"
class="text">
<img class="icon"
src="@/assets/images/time.png"
alt="">
Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
</p>
<p v-if="item.onlineLocation" class="text">
<img class="icon" src="@/assets/images/online.png" alt="">
<p v-if="item.onlineLocation"
class="text">
<img class="icon"
src="@/assets/images/online.png"
alt="">
Onlone: {{ item.onlineLocation }}
</p>
<p v-if="item.offlineLocation" class="text">
<img class="icon" src="@/assets/images/location.png" alt="">
<p v-if="item.offlineLocation"
class="text">
<img class="icon"
src="@/assets/images/location.png"
alt="">
Address: {{ item.offlineLocation }}
</p>
</div>
@ -137,8 +223,11 @@
</template>
</ul>
</div>
<div class="all-link m-t-10" @click="toAll(modules[5].form)">
<span style="color: #fff">{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
<div class="all-link m-t-10"
@click="toAll(modules[5].form)">
<span style="color: #fff">{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div>
</div>
</div>
@ -233,8 +322,8 @@ export default {
},
// tab
tabChange (e, i) {
const tabs = this.$refs.tabs
tabs.scrollLeft = e.target.offsetLeft
const newsTab = this.$refs.newsTab
newsTab.scrollLeft = e.target.offsetLeft
// e.target.offsetLeft
const { column } = this.modules[1].list[i]
if (column && column.length) {
@ -297,7 +386,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
height: 24rem;
@ -317,7 +406,7 @@ export default {
.block {
padding: 3.85rem 0;
}
.tabs {
.newsTab {
box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
.scollBox {
width: 85.714rem;
@ -328,7 +417,7 @@ export default {
li {
flex: 1;
text-align: center;
padding: 1.25rem .95rem;
padding: 1.25rem 0.95rem;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
@ -336,8 +425,8 @@ export default {
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
@ -370,11 +459,13 @@ export default {
position: relative;
width: 50%;
padding: 2.5rem 2.5rem 1.5rem;
background: #1583FF;
background: #1583ff;
color: #fff;
&:hover {
background: #465f85;
h6, .des, .meta {
h6,
.des,
.meta {
color: #fff;
transform: translateY(15px);
}
@ -386,12 +477,12 @@ export default {
left: 3.75rem;
display: flex;
li {
width: .625rem;
height: .625rem;
margin-right: .75rem;
background: #FFFFFF;
width: 0.625rem;
height: 0.625rem;
margin-right: 0.75rem;
background: #ffffff;
border-radius: 50%;
transition: .2s;
transition: 0.2s;
&.active {
width: 1.875rem;
background: rgba(255, 255, 255, 0.3);
@ -401,17 +492,17 @@ export default {
}
h6 {
font-size: 1.2rem;
transition: .3s;
transition: 0.3s;
}
.des {
margin: 1.5rem 0;
font-size: .88rem;
font-size: 0.88rem;
line-height: 1.3714rem;
transition: .3s;
transition: 0.3s;
}
.meta {
font-size: .88rem;
transition: .3s;
font-size: 0.88rem;
transition: 0.3s;
}
}
.card {
@ -422,10 +513,10 @@ export default {
li {
flex: 1;
margin-right: .88rem;
margin-right: 0.88rem;
box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
border-radius: 6px;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
@ -441,7 +532,7 @@ export default {
padding: 2rem 1.5rem;
}
.meta {
font-size: .88rem;
font-size: 0.88rem;
color: #666;
}
.des {
@ -464,9 +555,9 @@ export default {
line-height: 64px;
font-size: 1.875rem;
text-align: center;
color: #1583FF;
color: #1583ff;
border-radius: 35px;
border: 2px solid #2B6CEF;
border: 2px solid #2b6cef;
cursor: pointer;
}
.shop-shows {
@ -478,7 +569,7 @@ export default {
cursor: pointer;
overflow: hidden;
.pic {
transition: .3s;
transition: 0.3s;
height: auto;
&:hover {
transform: scale(1.05);
@ -493,7 +584,7 @@ export default {
}
.des {
margin-top: 10px;
font-size: .88rem;
font-size: 0.88rem;
color: #666;
line-height: 1.714rem;
}
@ -518,7 +609,7 @@ export default {
.pic {
width: 25rem;
height: 12.3125rem;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
@ -528,7 +619,7 @@ export default {
bottom: 0;
left: 0;
width: 100%;
font-size: .88rem;
font-size: 0.88rem;
color: #fff;
padding: 0 1rem;
line-height: 48px;
@ -544,8 +635,8 @@ export default {
li {
display: inline-flex;
align-items: center;
margin-bottom: .9rem;
transition: .3s;
margin-bottom: 0.9rem;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
@ -573,7 +664,7 @@ export default {
overflow: hidden;
}
.des {
font-size: .7rem;
font-size: 0.7rem;
color: #666;
line-height: 1.3714rem;
text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
@ -586,7 +677,8 @@ export default {
}
.conference {
background: #072947;
.b-title, .intro {
.b-title,
.intro {
color: #fff;
}
.shows {
@ -598,7 +690,7 @@ export default {
overflow: hidden;
cursor: pointer;
.pic {
transition: .3s;
transition: 0.3s;
height: auto;
&:hover {
transform: scale(1.05);
@ -610,7 +702,7 @@ export default {
background-color: #fff;
}
.meta {
padding: .5714rem 1.314rem .5714rem 0;
padding: 0.5714rem 1.314rem 0.5714rem 0;
margin-right: 1.828rem;
text-align: center;
border-right: 1px solid #ddd;
@ -619,7 +711,7 @@ export default {
font-size: 2.5714rem;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #1F1F1F;
color: #1f1f1f;
line-height: 2.9714rem;
}
.year {
@ -633,7 +725,7 @@ export default {
}
.des {
margin-top: 10px;
font-size: .8rem;
font-size: 0.8rem;
color: #666;
line-height: 1.3714rem;
}
@ -647,7 +739,7 @@ export default {
background-color: #fff;
cursor: pointer;
align-items: center;
transition: .3s;
transition: 0.3s;
height: 9rem;
&:last-child {
margin-bottom: 0;
@ -684,10 +776,8 @@ export default {
}
}
@media (max-width: 1200px) {
.tabs {
.newsTab {
overflow-x: scroll;
display: -webkit-box;
}
@ -729,7 +819,8 @@ export default {
.shop-shows {
flex-direction: column;
.left {
width: 95%;margin: 0 auto;
width: 95%;
margin: 0 auto;
}
.right {
width: 93%;
@ -771,7 +862,7 @@ export default {
.banner-item .banner-name {
font-size: 1.5rem;
}
.tabs {
.newsTab {
li {
padding: 15px 10px;
font-size: 15px;
@ -804,7 +895,7 @@ export default {
.text {
font-size: 13px;
line-height: 20px;
white-space: inherit
white-space: inherit;
}
}
.card-list {
@ -853,7 +944,8 @@ export default {
}
.texts {
h6 {
font-size: 15px;font-weight: bold;
font-size: 15px;
font-weight: bold;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
@ -899,7 +991,7 @@ export default {
bottom: 2rem;
}
}
.tabs {
.newsTab {
.scollBox {
width: auto;
li {
@ -976,7 +1068,6 @@ export default {
height: auto !important;
}
}
}
}
}
@ -1005,7 +1096,7 @@ export default {
bottom: 2rem;
}
}
.tabs {
.newsTab {
.scollBox {
width: auto;
li {
@ -1082,7 +1173,6 @@ export default {
height: auto !important;
}
}
}
}
}
@ -1111,7 +1201,7 @@ export default {
bottom: 2rem;
}
}
.tabs {
.newsTab {
.scollBox {
width: auto;
li {
@ -1189,7 +1279,6 @@ export default {
height: auto !important;
}
}
}
}
}
@ -1218,7 +1307,7 @@ export default {
bottom: 2rem;
}
}
.tabs {
.newsTab {
.scollBox {
width: auto;
li {
@ -1296,7 +1385,6 @@ export default {
height: auto !important;
}
}
}
}
}
@ -1325,7 +1413,7 @@ export default {
bottom: 2rem;
}
}
.tabs {
.newsTab {
.scollBox {
width: auto;
li {
@ -1351,8 +1439,8 @@ export default {
flex-direction: row;
li {
width: 30% !important;
margin-right: .5rem;
margin: 0 .5rem 0 0 !important;
margin-right: 0.5rem;
margin: 0 0.5rem 0 0 !important;
.pic {
height: auto;
}
@ -1360,12 +1448,11 @@ export default {
margin-right: 0 !important;
}
}
}
.shop-shows {
flex-direction: row;
.left {
margin-right: .5rem;
margin-right: 0.5rem;
.pic {
height: auto;
}
@ -1384,7 +1471,7 @@ export default {
font-size: 1rem;
}
&:nth-child(2) {
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}
@ -1423,7 +1510,6 @@ export default {
height: auto !important;
}
}
}
}
}
@ -1452,7 +1538,7 @@ export default {
bottom: 2rem;
}
}
.tabs {
.newsTab {
.scollBox {
width: auto;
li {
@ -1478,8 +1564,8 @@ export default {
flex-direction: row;
li {
width: 30% !important;
margin-right: .5rem;
margin: 0 .5rem 0 0 !important;
margin-right: 0.5rem;
margin: 0 0.5rem 0 0 !important;
.pic {
height: auto;
}
@ -1487,12 +1573,11 @@ export default {
margin-right: 0 !important;
}
}
}
.shop-shows {
flex-direction: row;
.left {
margin-right: .5rem;
margin-right: 0.5rem;
.pic {
height: auto;
}
@ -1511,7 +1596,7 @@ export default {
font-size: 1rem;
}
&:nth-child(2) {
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}
@ -1550,12 +1635,10 @@ export default {
height: auto !important;
}
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
@ -1580,7 +1663,7 @@ export default {
bottom: 2rem;
}
}
.tabs {
.newsTab {
.scollBox {
width: auto;
li {
@ -1606,8 +1689,8 @@ export default {
flex-direction: row;
li {
width: 30% !important;
margin-right: .5rem;
margin: 0 .5rem 0 0 !important;
margin-right: 0.5rem;
margin: 0 0.5rem 0 0 !important;
.pic {
height: auto;
}
@ -1615,12 +1698,11 @@ export default {
margin-right: 0 !important;
}
}
}
.shop-shows {
flex-direction: row;
.left {
margin-right: .5rem;
margin-right: 0.5rem;
.pic {
height: auto;
}
@ -1679,11 +1761,9 @@ export default {
height: auto !important;
}
}
}
}
}
}
}
</style>

@ -89,33 +89,9 @@ export default {
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
}
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem;
}
}
}
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li {
padding: 1.25rem 0.95rem;
margin: 0 0.5rem;
font-size: 1.05rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
.history {
@ -228,16 +204,6 @@ export default {
}
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content {
width: 90%;
span {

@ -1,7 +1,10 @@
<template>
<div class="wrap" v-if="modules.length>=1">
<div class="wrap"
v-if="modules.length>=1">
<div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -9,26 +12,35 @@
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
<li :class="{active: item.id == active}"
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template>
</ul>
<div class="tab-content">
<div class="intro">
<img class="pic" src="http://10.10.11.7/images/overviewIntro/1.png" alt="">
<img class="pic"
src="http://10.10.11.7/images/overviewIntro/1.png"
alt="">
<div class="right">
<h6>
{{ modules[1].form.title }}
<img class="title-bg" src="http://10.10.11.7/images/overviewIntro/2.png" alt="">
<img class="title-bg"
src="http://10.10.11.7/images/overviewIntro/2.png"
alt="">
</h6>
<div class="text" v-html="modules[1].form.des"></div>
<div class="text"
v-html="modules[1].form.des"></div>
</div>
</div>
<div class="intro-bg" v-if="modules[2]">
<div class="intro-bg"
v-if="modules[2]">
<div class="mask"></div>
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<div class="des" v-html="modules[2].form.des"></div>
<div class="des"
v-html="modules[2].form.des"></div>
</div>
</div>
</div>
@ -66,38 +78,14 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
}
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem
}
}
}
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li {
padding: 1.25rem .95rem;
margin: 0 .5rem;
font-size: 1.05rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.tab-content {
@ -124,7 +112,7 @@ export default {
}
.text {
margin-top: 2rem;
font-size: .99rem;
font-size: 0.99rem;
color: #020202;
line-height: 2;
}
@ -144,7 +132,7 @@ export default {
bottom: 0;
left: 0;
content: '';
background-color: rgba(0, 0, 0, .3);
background-color: rgba(0, 0, 0, 0.3);
}
.texts {
position: relative;
@ -173,14 +161,14 @@ export default {
line-height: 26px;
font-weight: 600;
font-size: 16px;
color: #1583FF;
color: #1583ff;
&:before {
content: '';
width: 4px;
height: 4px;
margin-right: 8px;
border-radius: 50%;
background-color: #1583FF;
background-color: #1583ff;
}
}
}
@ -199,16 +187,6 @@ export default {
}
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content {
width: 90%;
margin: auto;
@ -238,148 +216,5 @@ export default {
font-size: 1.35rem;
}
}
}
@media (max-width: 320px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
</style>

@ -1,7 +1,9 @@
<template>
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -9,7 +11,9 @@
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
<li :class="{active: item.id == active}"
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template>
</ul>
@ -41,39 +45,15 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
}
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem
}
}
}
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li {
padding: 1.25rem .95rem;
margin: 0 .5rem;
font-size: 1.05rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.tab-content {
@ -92,194 +72,16 @@ export default {
margin-bottom: 2.75rem;
}
.text {
font-size: .9rem;
font-size: 0.9rem;
color: #020202;
line-height: 1.6rem;
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content {
width: 90%;
span {
font-size: 1.35rem;
}
}
}
@media (min-width: 280px) and (max-width: 120px) {
.single-banner {
.banner-img {
height: 15rem;
}
.texts {
top: 9rem !important;
left: 22rem !important;
}
}
}
@media (max-width: 320px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
}
</style>

@ -62,33 +62,9 @@ export default {
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem;
}
}
}
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
.tab-content {
@ -128,16 +104,6 @@ export default {
margin: 0 auto;
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content {
padding: 20px 0;
.org {

@ -1,7 +1,9 @@
<template>
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -9,13 +11,21 @@
<ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
<li :class="{active: item.id == active}"
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template>
</ul>
<div class="tab-content">
<video v-if="modules[1].form.video" class="video" ref="video" autoplay controls loop>
<source :src="modules[1].form.video" type="video/mp4">
<video v-if="modules[1].form.video"
class="video"
ref="video"
autoplay
controls
loop>
<source :src="modules[1].form.video"
type="video/mp4">
您的浏览器不支持 video 标签
</video>
<div v-html="modules[1].form.des"></div>
@ -45,40 +55,16 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
}
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem
}
}
}
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li {
padding: 1.25rem .95rem;
margin: 0 .5rem;
font-size: 1.05rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.tab-content {
@ -94,226 +80,16 @@ export default {
margin-bottom: 2.75rem;
}
.text {
font-size: .9rem;
font-size: 0.9rem;
color: #020202;
line-height: 1.6rem;
}
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content {
width: 95%;
margin: 0 auto;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.single-banner {
.banner-img {
height: 15rem;
}
.texts {
top: 9rem !important;
left: 22rem !important;
}
}
}
@media (max-width: 320px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content {
.video {
height: 18rem;
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content {
.video {
height: 18rem;
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content {
.video {
height: 18rem;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content {
.video {
height: 18rem;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content {
.video {
height: 18rem;
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content {
.video {
height: 18rem;
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.banner-img {
height: 12rem;
}
.single-banner {
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
}
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content {
.video {
height: 18rem;
max-height: 18rem;
}
}
}

@ -0,0 +1,121 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<div class="block">
<div class="inner">
<img src="http://10.10.11.7/images/speech/3.png"
alt=""
class="pic">
<div class="texts">
<h6>院长致辞</h6>
<p class="en">President Speech</p>
<div class="text">各位朋友
加快实现高水平科技自立自强是推动高质量发展的必由之路当前粤港澳大湾区正朝着建成具有全球影响力的科技和产业创新高地这一宏伟蓝图奋力前进而在大科学时代我们实现科学技术的前沿突破在产业发展上取得颠覆式创新和持续性创新从根本上解决气候变暖重大疾病挑等人类可持续发展问题上越来越离不开大科学装置的支持
建设综合粒子设施是深圳推进粤港澳大湾区深圳先行示范区建设重大战略落地实施以主阵地作为推进大湾区综合性国家科学中心建设的重要决策部署项目的建成不仅将成为支撑大湾区集成电路生物医药先进制造新材料新能源等众多产业领域创新发展的先进工具和强大平台也将是面向国家重大需求和国际科学前沿突破产业技术瓶颈解决其相关根源性科学问题的大国重器
综合粒子设施一期项目包括深圳产业光源和深圳自由电子激光自2021年初深圳综合粒子设施研究院筹备建立以来我们的首要任务便是全力推进两个项目的设计立项关键技术突破核心设备研制等前期准备工作为接下来工程建设及建成运行打下坚实基础
面对重重挑战我们坚信没有一座高山不可逾越我们将牢记深圳市委市政府设立研究院的初心和期望传承改革开放杀出一条血路的魄力万众一心迎难而上不负众望建设好综合粒子设施为全体深圳人民及合作伙伴交上一份优质答卷我们将秉持开放合作的建设理念面向国内外创新资源敞开共建共享共赢的合作大门携手大湾区创新资源共同建设世界一流大科学装置我们将坚持需求牵引的宗旨探索在地方政府主导下研究机构高校企业金融机构共建重大科技基础设施的新途径为粤港澳大湾区建设国际科技创新中心提供坚实支撑我们还将进一步加强与港澳的创新融合让科学进步之光照亮大湾区高质量发展之路点亮东方之珠璀璨的明天</div>
<div class="sign">
签名
<img src="http://10.10.11.7/images/speech/3.png"
alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import mixins from "@/mixins/page";
import Setting from "@/setting";
import Util from "@/libs/util";
import WOW from "wow.js";
export default {
mixins: [mixins],
data () {
return {
};
},
mounted () {
new WOW().init();
},
methods: {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
this.preview
? data
: data[data.length - 1][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
);
this.modules = json;
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
}
})
.catch((err) => { });
},
},
};
</script>
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.block {
background: url(http://10.10.11.7/images/speech/2.png) no-repeat;
}
.inner {
display: flex;
align-items: flex-start;
.pic {
max-width: 480px;
margin-top: 2rem;
}
.texts {
margin-left: 113px;
}
h6 {
position: relative;
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #333;
}
.en {
margin: -25px 0 40px;
font-size: 2.2rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(216, 216, 216, 0.34);
}
.text {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
.sign {
margin-top: 20px;
text-align: right;
img {
max-width: 150px;
}
}
}
</style>

@ -0,0 +1,300 @@
<template>
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<div class="content">
<div class="article">
<div class="left">
<h6 class="talent-title">{{ modules[1].form.title }}</h6>
<div class="talent-text"
v-html="modules[1].form.des"></div>
<ul class="people">
<li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }"
@click="openLink(modules[8].form)">
<img class="pic"
:src="modules[8].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[8].form.title }}</h6>
<div class="line"></div>
<div class="text">提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不文字不超过两</div>
<img src="@/assets/images/arrow.png"
alt="">
</div>
</li>
<li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }"
@click="openLink(modules[8].form)">
<img class="pic"
:src="modules[8].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[8].form.title }}</h6>
<div class="line"></div>
<div class="text">提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不文字不超过两</div>
<img src="@/assets/images/arrow.png"
alt="">
</div>
</li>
</ul>
</div>
<div class="right">
<el-tree class="column"
ref="column"
:data="columns"
highlight-current
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"
@node-click="columnTo"></el-tree>
<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>
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/page'
import articleMixins from '@/mixins/article';
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
export default {
mixins: [mixins, articleMixins],
data () {
return {
columnId: '',
form: {},
columns: [],
defaultProps: {
value: 'id',
label: 'columnName'
},
news: [],
hots: []
}
},
mounted () {
this.getColumn()
this.getArticle()
},
methods: {
//
getInfo () {
// /
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
}
}).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.columns = data
this.getInfo()
}).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 => { })
},
//
getArticle () {
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 => { })
},
}
};
</script>
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.wrap {
background-color: #fff;
}
.content {
width: 1400px;
}
.article {
display: flex;
justify-content: space-between;
.left {
width: 66%;
.talent-title {
padding-bottom: 10px;
font-size: 1.2rem;
color: #666;
border-bottom: 1px solid #eaeef2;
}
.talent-text {
margin: 20px 0;
font-size: 1.1rem;
color: #333;
line-height: 28px;
p {
margin-bottom: 20px;
}
}
}
.people {
margin-top: 4rem;
li {
display: flex;
align-items: center;
margin-bottom: 2rem;
&:nth-child(even) {
flex-direction: row-reverse;
.texts {
padding: 75px 83px 75px 40px;
margin: 0 -50px 0 0;
}
}
}
.pic {
width: 430px;
height: 430px;
}
.texts {
position: relative;
width: 530px;
height: 330px;
padding: 75px 41px 75px 83px;
margin-left: -50px;
background-color: rgba(247, 247, 247, 0.72);
}
h6 {
font-size: 1.2rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
}
.line {
width: 93px;
height: 1px;
margin: 1rem 0;
background: #d8d8d8;
}
.text {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
line-height: 1.6;
}
}
.right {
width: 20%;
}
.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;
&:hover {
color: $main-color;
}
}
.date {
font-size: 12px;
color: #999;
}
}
}
@media (max-width: 1200px) {
.content {
.article {
flex-direction: column;
.left {
width: 100%;
.recruit {
li {
flex-direction: column;
.pic {
width: 100%;
}
.texts {
margin-top: 0.8rem;
}
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
.right {
width: 100%;
.el-tree {
display: none;
}
}
}
}
}
</style>

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'contactUs'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '应用产业-联系我们' }
}
]
};

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'lightSources'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '全球先进光源' }
}
]
};

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'speech'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '' }
}
]
};

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'talentCentre'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '' }
}
]
};

@ -66,7 +66,7 @@
color: #fff;
.banner-img {
width: 100%;
height: 480px;
height: 24rem;
}
.texts {
position: absolute;
@ -111,6 +111,25 @@
margin-left: 8px;
}
}
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li {
padding: 1.25rem 0.95rem;
margin: 0 0.5rem;
font-size: 1.05rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
@media (max-width: 1410px) {
.inner {
width: 80%;
@ -129,6 +148,16 @@
}
}
}
.tabs {
overflow: hidden;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
}
@media (max-width: 980px) {
.wrap {

Loading…
Cancel
Save