You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
789 lines
22 KiB
789 lines
22 KiB
<template> |
|
<div class="wrap"> |
|
<div class="actions"> |
|
<el-button type="primary" @click="preview">预览</el-button> |
|
<el-button @click="save(0)">保存为草稿</el-button> |
|
<el-button type="primary" @click="save(1)">发布</el-button> |
|
<el-button @click="$router.back()">放弃编辑</el-button> |
|
</div> |
|
|
|
<div class="modules"> |
|
<p class="page-name mb">页面设置</p> |
|
<div class="relative"> |
|
<el-carousel height="500px"> |
|
<template v-for="(item, i) in modules[0].list"> |
|
<el-carousel-item v-if="item.pic" :key="i"> |
|
<img width="100%" height="100%" :src="item.pic" alt=""> |
|
</el-carousel-item> |
|
</template> |
|
</el-carousel> |
|
<div class="cover" @click="toSet(0)">点击更换banner与链接</div> |
|
</div> |
|
|
|
<div class="block"> |
|
<div class="inner"> |
|
<div class="c-wrap"> |
|
<h2 class="b-title">{{ modules[1].form.title }}</h2> |
|
<p class="intro">{{ modules[1].form.des }}</p> |
|
<div class="cover" @click="toSet(1)">点击更换标题与描述</div> |
|
</div> |
|
<ul class="card"> |
|
<li> |
|
<img width="100%" :src="modules[2].form.pic" alt=""> |
|
<div class="texts"> |
|
<h6>{{ modules[2].form.title }}</h6> |
|
<p class="des">{{ modules[2].form.des }}</p> |
|
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
|
</div> |
|
<div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div> |
|
</li> |
|
<li> |
|
<img width="100%" :src="modules[3].form.pic" alt=""> |
|
<div class="texts"> |
|
<h6>{{ modules[3].form.title }}</h6> |
|
<p class="des">{{ modules[3].form.des }}</p> |
|
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
|
</div> |
|
<div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="block news-block"> |
|
<div class="inner"> |
|
<div class="c-wrap"> |
|
<h2 class="b-title">{{ modules[4].form.title }}</h2> |
|
<p class="intro">{{ modules[4].form.des }}</p> |
|
<div class="cover" @click="toSet(4)">点击更换标题与描述</div> |
|
</div> |
|
<ul class="news"> |
|
<li> |
|
<img src="@/assets/images/channel/channel1.png" alt=""> |
|
<div class="texts"> |
|
<h6>2022 New Year Message from President Sun Dongbai</h6> |
|
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p> |
|
<span class="meta">2022.08.12</span> |
|
</div> |
|
</li> |
|
<li> |
|
<img src="@/assets/images/channel/channel1.png" alt=""> |
|
<div class="texts"> |
|
<h6>2022 New Year Message from President Sun Dongbai</h6> |
|
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p> |
|
<span class="meta">2022.08.12</span> |
|
</div> |
|
</li> |
|
<li> |
|
<img src="@/assets/images/channel/channel1.png" alt=""> |
|
<div class="texts"> |
|
<h6>2022 New Year Message from President Sun Dongbai</h6> |
|
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p> |
|
<span class="meta">2022.08.12</span> |
|
</div> |
|
</li> |
|
<li> |
|
<img src="@/assets/images/channel/channel1.png" alt=""> |
|
<div class="texts"> |
|
<h6>2022 New Year Message from President Sun Dongbai</h6> |
|
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p> |
|
<span class="meta">2022.08.12</span> |
|
</div> |
|
</li> |
|
<li> |
|
<img src="@/assets/images/channel/channel1.png" alt=""> |
|
<div class="texts"> |
|
<h6>2022 New Year Message from President Sun Dongbai</h6> |
|
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p> |
|
<span class="meta">2022.08.12</span> |
|
</div> |
|
</li> |
|
<li> |
|
<img src="@/assets/images/channel/channel1.png" alt=""> |
|
<div class="texts"> |
|
<h6>2022 New Year Message from President Sun Dongbai</h6> |
|
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p> |
|
<span class="meta">2022.08.12</span> |
|
</div> |
|
</li> |
|
<div class="cover" @click="toSet(5)">点击更换标题与描述</div> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="block"> |
|
<div class="inner"> |
|
<div class="c-wrap"> |
|
<h2 class="b-title">{{ modules[6].form.title }}</h2> |
|
<p class="intro">{{ modules[6].form.des }}</p> |
|
<div class="cover" @click="toSet(6)">点击更换标题与描述</div> |
|
</div> |
|
<ul class="people"> |
|
<li v-for="(item, i) in modules[7].list" :key="i"> |
|
<img class="pic" :src="item.pic" alt=""> |
|
<div class="texts"> |
|
<h6>{{ item.title }}</h6> |
|
<p class="des">{{ item.des }}</p> |
|
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
|
</div> |
|
</li> |
|
<div class="cover" @click="toSet(7)">点击更改图片、标题概述与链接</div> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="about"> |
|
<div class="inner"> |
|
<img src="@/assets/images/channel/about.png" alt=""> |
|
<div class="line"></div> |
|
<div class="text">{{ modules[8].form.title }}</div> |
|
<div class="des" v-html="modules[8].form.des"></div> |
|
</div> |
|
<div class="cover" @click="toSet(8)">点击更换标题与描述</div> |
|
</div> |
|
|
|
<div class="block" style="padding-bottom: 0"> |
|
<div class="inner"> |
|
<div class="c-wrap"> |
|
<h2 class="glance">{{ modules[9].form.title }}</h2> |
|
<div class="cover" @click="toSet(9)">点击更换标题与描述</div> |
|
</div> |
|
<ul class="stat"> |
|
<li> |
|
<p class="num">{{ modules[10].form.title }}</p> |
|
<p class="text">{{ modules[10].form.des }}</p> |
|
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> |
|
</li> |
|
<li> |
|
<p class="num">{{ modules[11].form.title }}</p> |
|
<p class="text">{{ modules[11].form.des }}</p> |
|
<div class="cover" @click="toSet(11)">点击更换标题与描述</div> |
|
</li> |
|
<li> |
|
<p class="num">{{ modules[12].form.title }}</p> |
|
<p class="text">{{ modules[12].form.des }}</p> |
|
<div class="cover" @click="toSet(12)">点击更换标题与描述</div> |
|
</li> |
|
<li> |
|
<p class="num">{{ modules[13].form.title }}</p> |
|
<p class="text">{{ modules[13].form.des }}</p> |
|
<div class="cover" @click="toSet(13)">点击更换标题与描述</div> |
|
</li> |
|
<li> |
|
<p class="num">{{ modules[14].form.title }}</p> |
|
<p class="text">{{ modules[14].form.des }}</p> |
|
<div class="cover" @click="toSet(14)">点击更换标题与描述</div> |
|
</li> |
|
<li> |
|
<p class="num">{{ modules[15].form.title }}</p> |
|
<p class="text">{{ modules[15].form.des }}</p> |
|
<div class="cover" @click="toSet(15)">点击更换标题与描述</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import mixins from '@/mixins/page' |
|
export default { |
|
mixins: [mixins], |
|
data() { |
|
return { |
|
modules: [ |
|
{ |
|
type: 'banner', |
|
list: [ |
|
{ |
|
pic: require('@/assets/images/channel/channel-bg.png'), |
|
link: { |
|
linkName: '无', |
|
connectionType: 1, |
|
columnId: [], |
|
articleId: '', |
|
linkAddress : '', |
|
site: '', |
|
otherColumnId: [], |
|
otherArticleId: '', |
|
isOpen: 1 |
|
}, |
|
isEnable: 1 |
|
} |
|
] |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: 'OUR FACILITIES', |
|
des: 'IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'upload', |
|
prop: 'pic', |
|
label: '图片', |
|
required: true |
|
}, |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'link', |
|
prop: 'link', |
|
label: '链接' |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '描述' |
|
} |
|
], |
|
form: { |
|
pic: require('@/assets/images/channel/channel1.png'), |
|
title: 'Shenzhen Innovation Lightsource Facility', |
|
link: { |
|
linkName: '无', |
|
connectionType: 1, |
|
columnId: [], |
|
articleId: '', |
|
linkAddress : '', |
|
site: '', |
|
otherColumnId: [], |
|
otherArticleId: '', |
|
isOpen: 1 |
|
}, |
|
des: 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'upload', |
|
prop: 'pic', |
|
label: '图片', |
|
required: true |
|
}, |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'link', |
|
prop: 'link', |
|
label: '链接' |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '描述' |
|
} |
|
], |
|
form: { |
|
pic: require('@/assets/images/channel/channel1.png'), |
|
title: 'Shenzhen Innovation Lightsource Facility', |
|
link: { |
|
linkName: '无', |
|
connectionType: 1, |
|
columnId: [], |
|
articleId: '', |
|
linkAddress : '', |
|
site: '', |
|
otherColumnId: [], |
|
otherArticleId: '', |
|
isOpen: 1 |
|
}, |
|
des: 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: 'Latest information', |
|
des: 'Keep up with what happen with IASF' |
|
} |
|
}, |
|
{ |
|
type: 'column', |
|
form: { |
|
site: '', |
|
column: '', |
|
articleNum: '', |
|
columnTitle: 1, |
|
columnTitleCustom: '' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: "Light Chasers' Home at IASF", |
|
des: 'Keep up with what happen with IASF' |
|
} |
|
}, |
|
{ |
|
type: 'introduce', |
|
forms: [ |
|
{ |
|
type: 'upload', |
|
prop: 'pic', |
|
label: '图片', |
|
required: true |
|
}, |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'subTitle', |
|
label: '小标题' |
|
}, |
|
{ |
|
type: 'link', |
|
prop: 'link', |
|
label: '链接' |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '描述' |
|
} |
|
], |
|
form: { |
|
pic: '', |
|
title: '', |
|
subTitle: '', |
|
link: { |
|
linkName: '无', |
|
connectionType: 1, |
|
columnId: [], |
|
articleId: '', |
|
linkAddress : '', |
|
site: '', |
|
otherColumnId: [], |
|
otherArticleId: '', |
|
isOpen: 1 |
|
}, |
|
des: '' |
|
}, |
|
list: [ |
|
{ |
|
pic: require('@/assets/images/channel/channel1.png'), |
|
title: 'Shenzhen Innovation Lightsource Facility', |
|
subTitle: '', |
|
link: { |
|
linkName: '无', |
|
connectionType: 1, |
|
columnId: [], |
|
articleId: '', |
|
linkAddress : '', |
|
site: '', |
|
otherColumnId: [], |
|
otherArticleId: '', |
|
isOpen: 1 |
|
}, |
|
isEnable: 1, |
|
des: 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' |
|
} |
|
] |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'link', |
|
prop: 'link', |
|
label: '链接' |
|
}, |
|
{ |
|
type: 'editor', |
|
prop: 'des', |
|
label: '概述', |
|
required: true |
|
} |
|
], |
|
form: { |
|
title: 'ABOUT', |
|
link: { |
|
linkName: '无', |
|
connectionType: 1, |
|
columnId: [], |
|
articleId: '', |
|
linkAddress : '', |
|
site: '', |
|
otherColumnId: [], |
|
otherArticleId: '', |
|
isOpen: 1 |
|
}, |
|
des: '' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: 'IASF at a glance', |
|
des: '' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: '2020', |
|
des: 'The year IASF was founded' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: '2', |
|
des: 'Facility projects' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: '240', |
|
des: 'Employees' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: '10', |
|
des: 'Academicians' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: '45%', |
|
des: 'Hold doctorates or the highest degree in their field' |
|
} |
|
}, |
|
{ |
|
type: 'form', |
|
forms: [ |
|
{ |
|
type: 'input', |
|
prop: 'title', |
|
label: '标题', |
|
required: true |
|
}, |
|
{ |
|
type: 'textarea', |
|
prop: 'des', |
|
label: '概述' |
|
} |
|
], |
|
form: { |
|
title: '$32B+', |
|
des: 'Facility construction need-based grant aid provided ' |
|
} |
|
}, |
|
], |
|
} |
|
}, |
|
mounted() { |
|
|
|
}, |
|
methods: { |
|
|
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../../styles/page/page.scss"; |
|
.block { |
|
.card { |
|
display: flex; |
|
justify-content: space-between; |
|
li { |
|
position: relative; |
|
width: 660px; |
|
} |
|
.texts { |
|
padding-left: 22px; |
|
margin-top: 60px; |
|
border-left: 2px solid #DFE4E9; |
|
} |
|
h6 { |
|
margin-bottom: 25px; |
|
font-size: 24px; |
|
color: #333; |
|
} |
|
.des { |
|
font-size: 18px; |
|
color: #222; |
|
line-height: 30px; |
|
} |
|
.arrow { |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
&.news-block { |
|
background: url(../../../assets/images/channel/info-bg.png) 0 0/100% 100% no-repeat; |
|
} |
|
.news { |
|
position: relative; |
|
display: flex; |
|
flex-wrap: wrap; |
|
li { |
|
display: inline-flex; |
|
width: 686px; |
|
padding: 34px; |
|
margin-bottom: 28px; |
|
background-color: #fff; |
|
&:nth-child(odd) { |
|
margin-right: 28px; |
|
} |
|
} |
|
img { |
|
width: 237px; |
|
height: 167px; |
|
} |
|
.texts { |
|
margin-left: 34px; |
|
} |
|
h6 { |
|
font-size: 18px; |
|
color: #0648A8; |
|
} |
|
.des { |
|
margin: 14px 0; |
|
font-size: 16px; |
|
color: #333; |
|
line-height: 22px; |
|
} |
|
.meta { |
|
font-size: 16px; |
|
color: #999; |
|
} |
|
} |
|
|
|
.people { |
|
position: relative; |
|
li { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 126px; |
|
&:nth-child(even) { |
|
flex-direction: row-reverse; |
|
} |
|
} |
|
.pic { |
|
width: 660px; |
|
height: 465px; |
|
} |
|
.texts { |
|
width: 680px; |
|
padding-top: 150px; |
|
} |
|
h6 { |
|
font-size: 40px; |
|
} |
|
.des { |
|
font-size: 18px; |
|
color: #020202; |
|
line-height: 30px; |
|
} |
|
} |
|
|
|
.glance { |
|
padding-bottom: 50px; |
|
font-size: 45px; |
|
border-bottom: 1px solid #DEDEDE; |
|
} |
|
.stat { |
|
display: flex; |
|
justify-content: space-around; |
|
flex-wrap: wrap; |
|
margin-top: 60px; |
|
li { |
|
position: relative; |
|
width: 30%; |
|
margin-bottom: 50px; |
|
} |
|
.num { |
|
margin-bottom: 10px; |
|
font-size: 60px; |
|
font-weight: 800; |
|
color: #035CE1; |
|
line-height: 49px; |
|
} |
|
.text { |
|
font-size: 24px; |
|
} |
|
} |
|
} |
|
.about { |
|
position: relative; |
|
padding: 77px 0 198px; |
|
background: url(../../../assets/images/channel/about-bg.png) 0 0/100% 100% no-repeat; |
|
.line { |
|
display: flex; |
|
align-items: center; |
|
margin: 50px 0 30px; |
|
width: 88px; |
|
height: 6px; |
|
background-color: #fff; |
|
&:after { |
|
content: ''; |
|
width: 6px; |
|
height: 6px; |
|
} |
|
} |
|
.text { |
|
font-size: 30px; |
|
color: #fff; |
|
} |
|
.des { |
|
padding: 38px 60px; |
|
margin-top: 84px; |
|
font-size: 30px; |
|
color: #fff; |
|
line-height: 42px; |
|
text-align: center; |
|
background: rgba(111, 69, 36, .56); |
|
border-radius: 17px; |
|
} |
|
} |
|
</style> |