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

master
yujialong 2 years ago
parent 297928c1fd
commit 640f460295
  1. 133
      src/components/rightColumns/index.vue
  2. 259
      src/pages/article/activity.vue
  3. 396
      src/pages/article/index.vue
  4. 2050
      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. 2684
      src/pages/news/index.vue
  9. 34
      src/pages/overviewDevHistory/index.vue
  10. 447
      src/pages/overviewIntro/index.vue
  11. 266
      src/pages/overviewLocation/index.vue
  12. 34
      src/pages/overviewSetup/index.vue
  13. 304
      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,10 +46,11 @@
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],
data() {
data () {
return {
id: this.$route.query.articleId,
columnId: '',
@ -75,21 +67,22 @@ export default {
}
},
components: {
Breadcrumb
Breadcrumb,
RightColumns
},
watch: {
'$route'() {
'$route' () {
this.id = this.$route.query.articleId
this.getInfo()
}
},
mounted() {
mounted () {
this.getColumn()
this.getArticle()
},
methods: {
//
getInfo() {
getInfo () {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
//
const { columnName, path, id } = this.$route.query
@ -109,13 +102,13 @@ export default {
this.columnId = data.columnId
data.bannerImg || this.getBanner(this.columns)
if (this.columnBanner) this.form.bannerImg = this.columnBanner
}).catch(err => {})
}).catch(err => { })
// +1
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {})
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
},
// banner
getBanner(data) {
getBanner (data) {
this.columnBanner = ''
for (const e of data) {
if (e.columnBanner) this.columnBanner = e.columnBanner
@ -127,34 +120,34 @@ export default {
}
},
//
getColumn() {
getColumn () {
this.$post(this.api.listWithTreeMenuVisible, {
siteId: this.site,
columnName: '',
templateId: '',
typeId : '',
typeId: '',
isSort: 1
}).then(({ data }) => {
this.columns = data
this.getInfo()
}).catch(err => {})
}).catch(err => { })
this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => {
this.hots = Util.removeTag(data)
}).catch(err => {})
}).catch(err => { })
},
//
getArticle() {
getArticle () {
this.$post(this.api.newlyPublishedArticles, {
pageNum: 1,
pageSize: 5,
siteId: this.site
}).then(({ data }) => {
this.news = Util.removeTag(data.records)
}).catch(res => {})
}).catch(res => { })
},
//
download(e) {
download (e) {
Util.downloadFile(e.fileName, e.filePath)
}
}
@ -162,132 +155,88 @@ export default {
</script>
<style lang="scss" scoped>
@import "./editor.css";
@import './editor.css';
.content {
width: 1400px;
width: 1400px;
}
.banner {
height: 280px;
padding: 123px 0 0 243px;
font-size: 48px;
color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
height: 280px;
padding: 123px 0 0 243px;
font-size: 48px;
color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
}
.article {
display: flex;
justify-content: space-between;
.left {
width: 66%;
}
h2 {
margin-bottom: 20px;
font-size: 36px;
color: #1C1C1C;
}
.meta {
margin: 10px 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
/deep/.des {
img {
max-width: 100%;
}
}
.annex {
margin-top: 30px;
h6 {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583FF;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
.left {
width: 66%;
}
.name {
margin-right: 8px;
font-size: 14px;
h2 {
margin-bottom: 20px;
font-size: 36px;
color: #1c1c1c;
}
.download {
color: #1583FF;
cursor: pointer;
.meta {
margin: 10px 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
}
h6 {
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;
/deep/.des {
img {
max-width: 100%;
}
}
.text {
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
&:hover {
color: $main-color;
}
.annex {
margin-top: 30px;
h6 {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583ff;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.name {
margin-right: 8px;
font-size: 14px;
}
.download {
color: #1583ff;
cursor: pointer;
}
}
.date {
font-size: 12px;
color: #999;
h6 {
margin: 30px 0 10px;
font-size: 18px;
}
}
}
@media (max-width: 1420px) {
.content {
width: 98%;
}
.content {
width: 98%;
}
}
@media (min-width: 280px) and (max-width: 750px) {
.banner {
height: 15rem;
}
.article{
flex-direction: column;
.left{
width: 100%;
h2 {
font-size: 1.5rem;
}
@media (max-width: 1200px) {
.banner {
height: 15rem;
}
.right{
width: 100%;
.el-tree{
display: none;
}
.article {
flex-direction: column;
.left {
width: 100%;
h2 {
font-size: 1.5rem;
}
}
}
}
}
</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,10 +40,11 @@
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],
data() {
data () {
return {
id: this.$route.query.articleId,
loaded: false,
@ -61,31 +52,24 @@ export default {
columnId: '',
form: {},
columnBanner: '',
columns: [],
defaultProps: {
value: 'id',
label: 'columnName'
},
news: [],
hots: []
}
},
components: {
Breadcrumb
Breadcrumb,
RightColumns
},
watch: {
'$route'() {
'$route' () {
this.id = this.$route.query.articleId
this.getInfo()
}
},
mounted() {
this.getColumn()
this.getArticle()
mounted () {
},
methods: {
//
getInfo() {
getInfo () {
this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
//
const { columnName, path, id } = this.$route.query
@ -115,19 +99,19 @@ 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
}
}
}).catch(err => {})
}).catch(err => { })
// +1
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {})
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
},
// banner
getBanner(data) {
getBanner (data) {
for (const e of data) {
if (e.columnBanner) this.columnBanner = e.columnBanner
if (e.id == this.columnId) {
@ -137,35 +121,8 @@ 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) {
download (e) {
Util.downloadFile(e.fileName, e.filePath)
},
}
@ -173,226 +130,149 @@ export default {
</script>
<style lang="scss" scoped>
@import "./editor.css";
@import './editor.css';
.content {
width: 1200px;
/deep/ .el-breadcrumb {
font-size: .98rem;
}
width: 1200px;
/deep/ .el-breadcrumb {
font-size: 0.98rem;
}
}
.banner {
height: 21.6rem;
padding: 14.68rem 0 0 22.1875rem;
font-size: 2.16rem;
font-weight: 600;
color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
height: 21.6rem;
padding: 14.68rem 0 0 22.1875rem;
font-size: 2.16rem;
font-weight: 600;
color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
}
.article {
display: flex;
justify-content: space-between;
.left {
width: 70%;
}
h2 {
font-size: 1.9rem;
color: #1C1C1C;
}
.meta {
margin: 1rem 0;
font-size: .88rem;
color: #9B9B9B;
}
.brief {
padding-bottom: 1.5rem;
margin-bottom: 1rem;
font-size: 1.2rem;
line-height: 1.33;
color: #606060;
border-bottom: 1px solid #D8D8D8;
}
/deep/.des {
img {
max-width: 100%;
}
}
.annex {
margin-top: 30px;
h6 {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583FF;
display: flex;
justify-content: space-between;
.left {
width: 70%;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
h2 {
font-size: 1.9rem;
color: #1c1c1c;
}
.name {
margin-right: 8px;
font-size: 14px;
.meta {
margin: 1rem 0;
font-size: 0.88rem;
color: #9b9b9b;
}
.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;
.brief {
padding-bottom: 1.5rem;
margin-bottom: 1rem;
font-size: 1.2rem;
line-height: 1.33;
color: #606060;
border-bottom: 1px solid #d8d8d8;
}
.text {
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
&:hover {
color: $main-color;
}
/deep/.des {
img {
max-width: 100%;
}
}
.date {
font-size: 12px;
color: #999;
.annex {
margin-top: 30px;
h6 {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583ff;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.name {
margin-right: 8px;
font-size: 14px;
}
.download {
color: #1583ff;
cursor: pointer;
}
}
}
}
@media (max-width: 1420px) {
.content {
width: 98%;
}
}
@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;
}
.content {
width: 98%;
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.article {
/deep/.des {
img {
max-width: 100%;
height: 15rem;
}
@media (max-width: 1200px) {
.article {
/deep/.des {
img {
max-width: 100%;
height: 15rem;
}
}
}
}
.banner {
font-size: 1.5rem;
}
.article{
flex-direction: column;
.left{
width: 100%;
h2 {
.banner {
font-size: 1.5rem;
}
}
.right{
width: 100%;
.el-tree{
display: none;
}
}
}
.article {
.des {
img{
height: 15rem !important;
}
.article {
flex-direction: column;
.left {
width: 100%;
h2 {
font-size: 1.5rem;
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 13rem;
.article {
.des {
img {
height: 15rem !important;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 15rem;
@media (max-width: 480px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 17rem;
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 17rem;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.banner {
padding: 12rem 0 0 10rem;
height: 20rem;
.wrap {
.banner {
padding: 12rem 0 0 10rem;
height: 20rem;
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.banner {
padding: 14rem 0 0 10rem;
height: 22rem;
.wrap {
.banner {
padding: 14rem 0 0 10rem;
height: 22rem;
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.banner {
padding: 16rem 0 0 10rem;
height: 26rem;
.wrap {
.banner {
padding: 16rem 0 0 10rem;
height: 26rem;
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.banner {
padding: 18rem 0 0 10rem;
height: 30rem;
.wrap {
.banner {
padding: 18rem 0 0 10rem;
height: 30rem;
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

@ -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>

File diff suppressed because it is too large Load Diff

@ -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>
@ -50,336 +62,159 @@ import overview from '@/mixins/overview'
import WOW from 'wow.js'
export default {
mixins: [mixins, overview],
data() {
data () {
return {
}
},
mounted() {
mounted () {
new WOW().init()
},
methods: {
}
};
</script>
<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;
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 {
padding-top: 3.85rem;
.intro {
display: flex;
margin-bottom: 5.5rem;
.pic {
width: 40%;
margin-right: 2.5rem;
}
.right {
width: 40%;
}
h6 {
position: relative;
font-size: 1.36rem;
color: #333;
}
.title-bg {
position: absolute;
top: -2rem;
left: -1rem;
}
.text {
margin-top: 2rem;
font-size: .99rem;
color: #020202;
line-height: 2;
}
}
.intro-bg {
position: relative;
height: auto;
padding-top: 4.5rem;
padding-bottom: 2rem;
color: #fff;
text-align: center;
background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(0, 0, 0, .3);
}
.texts {
position: relative;
}
h6 {
margin-bottom: 1.5rem;
font-size: 1.6rem;
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
font-weight: 800;
top: auto !important;
bottom: 2rem;
}
.des {
font-size: 1.2rem;
}
}
}
.ads {
position: fixed;
top: 30%;
right: 1%;
padding: 20px;
animation: move 20s linear infinite alternate;
li {
display: flex;
align-items: center;
padding-left: 20px;
line-height: 26px;
font-weight: 600;
font-size: 16px;
color: #1583FF;
&:before {
content: '';
width: 4px;
height: 4px;
margin-right: 8px;
border-radius: 50%;
background-color: #1583FF;
}
}
}
@keyframes move {
0% {
top: 30%;
right: 1%;
}
50% {
top: 40%;
right: 40%;
}
100% {
top: 90%;
right: 90%;
}
}
@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;
padding-top: 1.25rem;
.tab-content {
padding-top: 3.85rem;
.intro {
flex-direction: column;
.pic {
width: 100%;
}
display: flex;
margin-bottom: 5.5rem;
.pic {
width: 40%;
margin-right: 2.5rem;
}
.right {
width: 40%;
}
h6 {
position: relative;
font-size: 1.36rem;
color: #333;
}
.title-bg {
position: absolute;
top: -2rem;
left: -1rem;
}
.text {
margin-top: 2rem;
font-size: 0.99rem;
color: #020202;
line-height: 2;
}
}
.intro-bg {
padding-top: 3rem;
.texts {
position: relative;
height: auto;
padding-top: 4.5rem;
padding-bottom: 2rem;
color: #fff;
text-align: center;
background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(0, 0, 0, 0.3);
}
.texts {
position: relative;
}
h6 {
font-size: 1.6rem;
margin-bottom: 1.5rem;
font-size: 1.6rem;
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
font-weight: 800;
}
.des {
font-size: 1.2rem;
}
}
}
.right {
width: 100% !important;
margin-top: 1.25rem;
.text {
margin-top: 1.25rem;
}
}
span {
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 {
.ads {
position: fixed;
top: 30%;
right: 1%;
padding: 20px;
animation: move 20s linear infinite alternate;
li {
padding: 1rem .5rem;
font-size: .85rem;
display: flex;
align-items: center;
padding-left: 20px;
line-height: 26px;
font-weight: 600;
font-size: 16px;
color: #1583ff;
&:before {
content: '';
width: 4px;
height: 4px;
margin-right: 8px;
border-radius: 50%;
background-color: #1583ff;
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.single-banner {
.banner-img {
height: 12rem;
@keyframes move {
0% {
top: 30%;
right: 1%;
}
.texts {
bottom: 2rem !important;
left: 2rem !important;
.banner-title {
font-size: 1.5rem;
}
50% {
top: 40%;
right: 40%;
}
}
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
100% {
top: 90%;
right: 90%;
}
}
}
@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;
@media (max-width: 1200px) {
.tab-content {
width: 90%;
margin: auto;
padding-top: 1.25rem;
.intro {
flex-direction: column;
.pic {
width: 100%;
}
}
.intro-bg {
padding-top: 3rem;
.texts {
h6 {
font-size: 1.6rem;
}
}
}
.right {
width: 100% !important;
margin-top: 1.25rem;
.text {
margin-top: 1.25rem;
}
}
span {
font-size: 1.35rem;
}
}
}
}
</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>
@ -25,261 +29,59 @@ import overview from '@/mixins/overview'
import WOW from 'wow.js'
export default {
mixins: [mixins, overview],
data() {
data () {
return {
}
},
mounted() {
mounted () {
new WOW().init()
},
methods: {
}
};
</script>
<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;
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;
.texts {
top: auto !important;
bottom: 2rem;
}
}
}
.tab-content {
width: 50rem;
padding: 3.85rem 0;
margin: 0 auto;
span {
font-size: 1.35rem;
}
/deep/ img {
width: 100% !important;
}
}
.video {
width: 100%;
margin-bottom: 2.75rem;
}
.text {
font-size: .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%;
width: 50rem;
padding: 3.85rem 0;
margin: 0 auto;
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;
}
}
font-size: 1.35rem;
}
}
.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;
/deep/ img {
width: 100% !important;
}
}
}
@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;
}
}
.video {
width: 100%;
margin-bottom: 2.75rem;
}
@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;
}
}
.text {
font-size: 0.9rem;
color: #020202;
line-height: 1.6rem;
}
@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;
@media (max-width: 1200px) {
.tab-content {
width: 90%;
span {
font-size: 1.35rem;
}
}
}
}
.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>
@ -29,292 +39,58 @@ import overview from '@/mixins/overview'
import WOW from 'wow.js'
export default {
mixins: [mixins, overview],
data() {
data () {
return {
}
},
mounted() {
mounted () {
new WOW().init()
},
methods: {
}
};
</script>
<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;
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;
.texts {
top: auto !important;
bottom: 2rem;
}
}
}
.tab-content {
width: 50rem;
padding: 3.85rem 0;
margin: 0 auto;
span {
font-size: 1.08rem;
}
width: 50rem;
padding: 3.85rem 0;
margin: 0 auto;
span {
font-size: 1.08rem;
}
}
.video {
width: 100%;
margin-bottom: 2.75rem;
width: 100%;
margin-bottom: 2.75rem;
}
.text {
font-size: .9rem;
color: #020202;
line-height: 1.6rem;
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;
.tab-content {
width: 95%;
margin: 0 auto;
.video {
max-height: 18rem;
}
}
}
}
.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;
}
}
}
</style>

@ -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