master
parent
61bb8931f0
commit
f211f58792
48 changed files with 213 additions and 21845 deletions
File diff suppressed because it is too large
Load Diff
@ -1,445 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/ABOUT</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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 history gray"> |
||||
<div class="inner c-wrap"> |
||||
<h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2> |
||||
<div class="texts"> |
||||
<div class="left"> |
||||
<h2>{{ modules[1].form.subTitle }}</h2> |
||||
<div class="line"></div> |
||||
<div class="des">{{ modules[1].form.des }}</div> |
||||
</div> |
||||
<img class="bg" width="562" height="506" :src="modules[1].form.pic" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[2].form.title }}</h2> |
||||
<p class="intro">{{ modules[2].form.des }}</p> |
||||
<div class="cover" @click="toSet(2)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="card"> |
||||
<li class="item1"> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<div class="des" v-html="modules[3].form.des"></div> |
||||
<div class="cover" @click="toSet(3)">点击更换标题、概述与跳转</div> |
||||
</li> |
||||
<li class="item2"> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<div class="des" v-html="modules[4].form.des"></div> |
||||
<div class="cover" @click="toSet(4)">点击更换标题、概述与跳转</div> |
||||
</li> |
||||
<li class="item3"> |
||||
<h6>{{ modules[5].form.title }}</h6> |
||||
<div class="des" v-html="modules[5].form.des"></div> |
||||
<div class="cover" @click="toSet(5)">点击更换标题、概述与跳转</div> |
||||
</li> |
||||
<li class="item4"> |
||||
<h6>{{ modules[6].form.title }}</h6> |
||||
<div class="des" v-html="modules[6].form.des"></div> |
||||
<div class="cover" @click="toSet(6)">点击更换标题、概述与跳转</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[7].form.title }}</h2> |
||||
<p class="intro">{{ modules[7].form.des }}</p> |
||||
<div class="cover" @click="toSet(7)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="stat"> |
||||
<li> |
||||
<p class="num">{{ modules[8].form.title }}</p> |
||||
<p class="text">{{ modules[8].form.des }}</p> |
||||
<div class="cover" @click="toSet(8)">点击更换标题与描述</div> |
||||
</li> |
||||
<li> |
||||
<p class="num">{{ modules[9].form.title }}</p> |
||||
<p class="text">{{ modules[9].form.des }}</p> |
||||
<div class="cover" @click="toSet(9)">点击更换标题与描述</div> |
||||
</li> |
||||
<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> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="plan c-wrap"> |
||||
<div class="inner"> |
||||
<img class="pic" :src="modules[14].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[14].form.title }}</h6> |
||||
<div class="des">{{ modules[14].form.des }}</div> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="cover" style="height: calc(100% + 60px);" @click="toSet(14)">点击更换标题、概述与跳转</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[15].form.title }}</h2> |
||||
<p class="intro">{{ modules[15].form.des }}</p> |
||||
<div class="cover" @click="toSet(15)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="people"> |
||||
<template v-for="(item, i) in modules[16].list"> |
||||
<li v-if="item.isEnable" :key="i"> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
<div class="texts"> |
||||
<p class="sub">{{ item.subTitle }}</p> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="des">{{ item.des }}</p> |
||||
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
</template> |
||||
<div class="cover" @click="toSet(16)">点击更改图片、标题概述与链接</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block list-block gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[17].form.title }}</h2> |
||||
<p class="intro">{{ modules[17].form.des }}</p> |
||||
<div class="cover" @click="toSet(17)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="list"> |
||||
<li> |
||||
<img class="pic" :src="modules[18].form.pic" alt=""> |
||||
<h6>{{ modules[18].form.title }}</h6> |
||||
<p class="des">{{ modules[18].form.des }}</p> |
||||
<div class="cover" @click="toSet(18)">点击更改图片、标题概述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[19].form.pic" alt=""> |
||||
<h6>{{ modules[19].form.title }}</h6> |
||||
<p class="des">{{ modules[19].form.des }}</p> |
||||
<div class="cover" @click="toSet(19)">点击更改图片、标题概述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[20].form.pic" alt=""> |
||||
<h6>{{ modules[20].form.title }}</h6> |
||||
<p class="des">{{ modules[20].form.des }}</p> |
||||
<div class="cover" @click="toSet(20)">点击更改图片、标题概述与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[21].form.title }}</h2> |
||||
<p class="intro">{{ modules[21].form.des }}</p> |
||||
<div class="cover" @click="toSet(21)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="staff"> |
||||
<div class="left"> |
||||
<h6>{{ modules[22].form.title }}</h6> |
||||
<div class="des">{{ modules[22].form.des }}</div> |
||||
</div> |
||||
<img class="pic" :src="modules[22].form.pic" alt=""> |
||||
<div class="cover" @click="toSet(22)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.about |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'ABOUT' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.history { |
||||
h2 { |
||||
font-size: 30px; |
||||
color: #333; |
||||
} |
||||
.texts { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 82px 57px 30px; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 100px 0px 0px 0px; |
||||
} |
||||
.left { |
||||
width: 695px; |
||||
} |
||||
.line { |
||||
width: 136px; |
||||
height: 2px; |
||||
margin: 20px 0; |
||||
background: #D7D7D7; |
||||
} |
||||
.des { |
||||
font-size: 22px; |
||||
color: #181818; |
||||
line-height: 31px; |
||||
} |
||||
.bg { |
||||
margin: -122px 0 0 0; |
||||
border-top-right-radius: 40px; |
||||
} |
||||
} |
||||
.card { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
position: relative; |
||||
width: 686px; |
||||
height: 277px; |
||||
padding: 70px 67px 20px; |
||||
margin-bottom: 28px; |
||||
color: #fff; |
||||
&:nth-child(odd) { |
||||
margin-right: 28px; |
||||
} |
||||
} |
||||
.item1 { |
||||
background: url(../../../assets/images/about/3.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
.item2 { |
||||
background-color: #4984B6; |
||||
} |
||||
.item3 { |
||||
background-color: #567180; |
||||
} |
||||
.item4 { |
||||
background: url(../../../assets/images/about/4.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
h6 { |
||||
margin-bottom: 10px; |
||||
font-size: 40px; |
||||
font-family: toppan; |
||||
} |
||||
.des { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
.plan { |
||||
padding: 73px 0; |
||||
background: #072947; |
||||
.inner { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 1575px; |
||||
} |
||||
.pic { |
||||
width: 664px; |
||||
height: 488px; |
||||
margin-bottom: -120px; |
||||
} |
||||
.texts { |
||||
width: 802px; |
||||
margin-top: 36px; |
||||
color: #fff; |
||||
} |
||||
h6 { |
||||
font-size: 36px; |
||||
} |
||||
.des { |
||||
margin: 20px 0; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
.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: 90px; |
||||
} |
||||
h6 { |
||||
margin: 20px 0; |
||||
font-size: 40px; |
||||
} |
||||
.sub { |
||||
font-size: 20px; |
||||
color: #020202; |
||||
} |
||||
.des { |
||||
font-size: 18px; |
||||
color: #020202; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
.list-block { |
||||
.inner { |
||||
width: 80%; |
||||
padding: 90px 0; |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
.list { |
||||
display: flex; |
||||
justify-content: center; |
||||
li { |
||||
position: relative; |
||||
width: calc((100% - 100px) / 3); |
||||
padding-bottom: 30px; |
||||
margin-right: 28px; |
||||
text-align: center; |
||||
background-color: #F5F5F5; |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 353px; |
||||
} |
||||
h6 { |
||||
margin: 35px 0 5px; |
||||
font-size: 24px; |
||||
color: #272727; |
||||
} |
||||
.des { |
||||
font-size: 16px; |
||||
color: #757575; |
||||
} |
||||
} |
||||
.staff { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
background: #F8F8F8; |
||||
.left { |
||||
width: 658px; |
||||
margin: 50px 0 0 46px; |
||||
} |
||||
h6 { |
||||
margin-bottom: 30px; |
||||
font-size: 30px; |
||||
color: #333; |
||||
} |
||||
.des { |
||||
font-size: 20px; |
||||
color: #333; |
||||
line-height: 34px; |
||||
} |
||||
.pic { |
||||
width: 650px; |
||||
} |
||||
} |
||||
.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; |
||||
font-family: toppan; |
||||
color: #035CE1; |
||||
line-height: 49px; |
||||
} |
||||
.text { |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,314 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/APPLICATION</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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 history gray"> |
||||
<div class="inner c-wrap"> |
||||
<h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2> |
||||
<div class="texts"> |
||||
<div class="left"> |
||||
<h2>{{ modules[1].form.subTitle }}</h2> |
||||
<div class="line"></div> |
||||
<div class="des">{{ modules[1].form.des }}</div> |
||||
</div> |
||||
<img class="bg" width="562" height="506" :src="modules[1].form.pic" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner" style="width: 1558px"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[2].form.title }}</h2> |
||||
<p class="intro">{{ modules[2].form.des }}</p> |
||||
<div class="cover" @click="toSet(2)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="app"> |
||||
<li v-for="(item, i) in modules[3].list" :key="i"> |
||||
<img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt=""> |
||||
<img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt=""> |
||||
<p class="text">{{ item.title }}</p> |
||||
<div class="cover" @click="toSet(3, i)">点击更标题与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<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="group"> |
||||
<li v-for="(item, i) in modules[5].list" :key="i"> |
||||
<img :src="item.pic" alt=""> |
||||
<p class="text">{{ item.title }}</p> |
||||
<div class="cover" @click="toSet(5, i)">点击更改图片、标题与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block news-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="news"> |
||||
<li> |
||||
<img src="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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(7)">点击更换标题与描述</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.application |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'APPLICATION' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.history { |
||||
h2 { |
||||
font-size: 30px; |
||||
color: #333; |
||||
} |
||||
.texts { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 82px 57px 30px; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 100px 0px 0px 0px; |
||||
} |
||||
.left { |
||||
width: 695px; |
||||
} |
||||
.des { |
||||
margin: 20px 0; |
||||
font-size: 22px; |
||||
color: #181818; |
||||
line-height: 31px; |
||||
} |
||||
.bg { |
||||
margin: -122px 0 0 0; |
||||
} |
||||
} |
||||
.app { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 368px; |
||||
height: 252px; |
||||
margin: 0 14px 14px 0; |
||||
&:first-child { |
||||
width: 750px; |
||||
} |
||||
&:nth-child(3), &:nth-child(7), &:nth-child(10) { |
||||
margin-right: 0; |
||||
} |
||||
&:nth-child(9) { |
||||
width: 563px; |
||||
} |
||||
&:nth-child(10) { |
||||
width: 555px; |
||||
} |
||||
} |
||||
.bg { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.icon { |
||||
position: relative; |
||||
} |
||||
.text { |
||||
position: relative; |
||||
margin-top: 20px; |
||||
font-size: 32px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.group { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
position: relative; |
||||
width: 448px; |
||||
margin: 0 28px 39px 0; |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 353px; |
||||
} |
||||
.text { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 143px; |
||||
font-size: 30px; |
||||
font-family: SFProDisplay-Bold, SFProDisplay; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
color: #272727; |
||||
background-color: #F5F5F5; |
||||
} |
||||
} |
||||
.news-block { |
||||
background: url(../../../assets/images/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; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,302 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/CAREERS</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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"> |
||||
<ul class="card"> |
||||
<li> |
||||
<img class="pic" :src="modules[1].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<p class="text">{{ modules[1].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(1)">点击更换标题与描述</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[2].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<p class="text">{{ modules[2].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(2)">点击更换标题与描述</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[3].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<p class="text">{{ modules[3].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(3)">点击更换标题与描述</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[4].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<p class="text">{{ modules[4].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(4)">点击更换标题与描述</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[5].form.title }}</h2> |
||||
<p class="intro">{{ modules[5].form.des }}</p> |
||||
<div class="cover" @click="toSet(5)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="people"> |
||||
<template v-for="(item, i) in modules[6].list"> |
||||
<li v-if="item.isEnable" :key="i"> |
||||
<img class="comma" src="@/assets/images/comma.png" alt=""> |
||||
<div class="left"> |
||||
<h6>{{ item.title }}</h6> |
||||
<div class="des">{{ item.des }}</div> |
||||
</div> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
</li> |
||||
</template> |
||||
<div class="cover" style="top: -60px" @click="toSet(6)">点击更换标题与描述</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="shows"> |
||||
<template v-for="(item, i) in modules[7].list"> |
||||
<li v-if="item.isEnable" :key="i"> |
||||
<div class="left"> |
||||
<h6>{{ item.title }}</h6> |
||||
<div class="sub">{{ item.subTitle }}</div> |
||||
<div class="des">{{ item.des }}</div> |
||||
<img class="arrow" src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
</li> |
||||
</template> |
||||
<div class="cover" @click="toSet(7)">点击更换标题与描述</div> |
||||
</ul> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.careers |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'CAREERS' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.card { |
||||
display: flex; |
||||
justify-content: center; |
||||
li { |
||||
position: relative; |
||||
display: inline-flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
width: 368px; |
||||
height: 526px; |
||||
margin-right: 14px; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
&:hover { |
||||
.arrow { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.pic { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: relative; |
||||
} |
||||
h6 { |
||||
margin-bottom: 10px; |
||||
font-size: 35px; |
||||
} |
||||
.text { |
||||
font-size: 24px; |
||||
} |
||||
.arrow { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 177px; |
||||
padding-top: 62px; |
||||
text-align: center; |
||||
background: #36404A; |
||||
opacity: 0; |
||||
transition: .3s; |
||||
} |
||||
} |
||||
} |
||||
.people { |
||||
position: relative; |
||||
li { |
||||
position: relative; |
||||
min-height: 450px; |
||||
padding: 100px 70px 30px 57px; |
||||
margin-bottom: 100px; |
||||
background-color: #fff; |
||||
&:nth-child(even) { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
.comma { |
||||
left: 660px; |
||||
} |
||||
.pic { |
||||
left: 0; |
||||
right: auto; |
||||
} |
||||
} |
||||
} |
||||
.comma { |
||||
position: absolute; |
||||
top: -22px; |
||||
left: 57px; |
||||
} |
||||
.left { |
||||
width: 670px; |
||||
} |
||||
h6 { |
||||
font-size: 24px; |
||||
color: #333; |
||||
} |
||||
.des { |
||||
margin-top: 20px; |
||||
font-size: 20px; |
||||
color: #666; |
||||
line-height: 32px; |
||||
} |
||||
.pic { |
||||
position: absolute; |
||||
top: -60px; |
||||
right: 43px; |
||||
width: 600px; |
||||
height: 450px; |
||||
} |
||||
} |
||||
.shows { |
||||
position: relative; |
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 654px; |
||||
margin-bottom: 40px; |
||||
color: #fff; |
||||
&:nth-child(even) { |
||||
flex-direction: row-reverse; |
||||
} |
||||
&:nth-child(2) { |
||||
.left { |
||||
background-color: rgba(47, 79, 23, .65); |
||||
} |
||||
} |
||||
&:nth-child(3) { |
||||
.left { |
||||
background-color: rgba(91, 58, 35, .65); |
||||
} |
||||
} |
||||
} |
||||
.left { |
||||
position: relative; |
||||
z-index: 1; |
||||
width: 43.3%; |
||||
height: 100%; |
||||
padding: 138px 30px 30px 103px; |
||||
background-color: rgba(54, 54, 54, .65); |
||||
} |
||||
.pic { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
h6 { |
||||
font-size: 46px; |
||||
} |
||||
.sub { |
||||
margin: 20px 0; |
||||
font-size: 36px; |
||||
} |
||||
.des { |
||||
margin-bottom: 40px; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,174 +0,0 @@ |
||||
<template> |
||||
<!-- 联系我们 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/联系我们</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="contact"> |
||||
<div class="fields"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<p class="text">{{ modules[1].form.address }}</p> |
||||
<p class="text">{{ modules[1].form.phone }}</p> |
||||
<p class="text">{{ modules[1].form.email }}</p> |
||||
<div class="cover" |
||||
style="top: -20px;" |
||||
@click="toSet(1)">点击更换文本</div> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<img :src="modules[2].form.pic" |
||||
alt="" |
||||
class="pic"> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换图片</div> |
||||
</div> |
||||
<div class="c-wrap m-t-20"> |
||||
<el-table :data="modules[3].list" |
||||
class="patent-table" |
||||
ref="table" |
||||
stripe |
||||
header-align="center"> |
||||
<el-table-column prop="dep" |
||||
label="部门" |
||||
align="center" |
||||
min-width="250"></el-table-column> |
||||
<el-table-column prop="contacts" |
||||
label="联系人" |
||||
align="center" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="phone" |
||||
label="电话" |
||||
align="center" |
||||
min-width="150"></el-table-column> |
||||
<el-table-column prop="email" |
||||
label="邮箱" |
||||
align="center" |
||||
min-width="150"></el-table-column> |
||||
</el-table> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换文本</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.contactUs |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '联系我们' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@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> |
||||
@ -1,118 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/关于IASF-发展历程</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block history"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<p class="en">{{ modules[1].form.subTitle }}</p> |
||||
<div class="text" |
||||
v-html="modules[1].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换标题、小标题与概述</div> |
||||
</div> |
||||
|
||||
<div class="c-wrap"> |
||||
<h6 style="font-size: 1.6rem">{{ modules[2].form.title }}</h6> |
||||
<p class="en" |
||||
style="margin-top: -15px;font-size: 1.6rem">{{ modules[2].form.subTitle }}</p> |
||||
<div class="text" |
||||
v-html="modules[2].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换标题、小标题与概述</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.devHistory |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '关于IASF-发展历程' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.history { |
||||
h6 { |
||||
position: relative; |
||||
font-size: 2.4rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.en { |
||||
margin-top: -25px; |
||||
font-size: 2.4rem; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #e3e3e3; |
||||
} |
||||
.text { |
||||
max-width: 1200px; |
||||
margin: 30px 0; |
||||
overflow: auto; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,216 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/装置介绍</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" |
||||
: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"> |
||||
<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 share"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<p class="en" |
||||
v-html="modules[1].form.des"></p> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改标题与描述</div> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<div class="sum">{{ modules[2].form.title }}</div> |
||||
<div class="flex"> |
||||
<div class="left"> |
||||
<div class="des" |
||||
v-html="modules[2].form.des"></div> |
||||
</div> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更改标题、描述与图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="intro"> |
||||
<div class="intro-inner c-wrap"> |
||||
<img class="pic" |
||||
:src="modules[3].form.pic" |
||||
alt=""> |
||||
<div class="des" |
||||
v-html="modules[3].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更改描述</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="unit"> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<img class="pic" |
||||
:src="modules[4].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更改标题与图片</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.deviceIntroBeam |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '装置介绍' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.wrap { |
||||
background: url(http://10.10.11.7/images/device/4.png) (100% 1363px) / auto no-repeat; |
||||
} |
||||
.banner { |
||||
background: url(http://10.10.11.7/images/device/13.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
.share { |
||||
position: relative; |
||||
.inner { |
||||
width: 1323px; |
||||
} |
||||
.left { |
||||
width: 547px; |
||||
margin-right: 66px; |
||||
} |
||||
h6 { |
||||
position: relative; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.en { |
||||
margin-top: -35px; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #e3e3e3; |
||||
} |
||||
.sum { |
||||
margin-top: 60px; |
||||
font-size: 28px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
line-height: 44px; |
||||
} |
||||
.des { |
||||
margin-top: 25px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
line-height: 37px; |
||||
overflow: visible; |
||||
} |
||||
.pic { |
||||
width: 710px; |
||||
height: 509px; |
||||
margin-top: -30px; |
||||
border-top-left-radius: 20px; |
||||
} |
||||
} |
||||
.intro { |
||||
width: 80%; |
||||
height: 19.65rem; |
||||
padding-left: 14%; |
||||
margin-bottom: 67px; |
||||
background-color: #2e4984; |
||||
.intro-inner { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 100%; |
||||
} |
||||
.pic { |
||||
width: 50%; |
||||
height: 100%; |
||||
} |
||||
.des { |
||||
width: 50%; |
||||
height: 19.65rem; |
||||
padding: 2.85rem 3rem 1rem 3rem; |
||||
font-size: 0.96rem; |
||||
color: #fff; |
||||
line-height: 2rem; |
||||
-webkit-line-clamp: 7; |
||||
} |
||||
} |
||||
.unit { |
||||
position: relative; |
||||
width: 986px; |
||||
padding-bottom: 60px; |
||||
margin: 0 auto; |
||||
h6 { |
||||
padding-left: 15px; |
||||
margin-bottom: 15px; |
||||
font-size: 20px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #2a2a2a; |
||||
border-left: 4px solid #1583ff; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,208 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/装置介绍</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" |
||||
: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"> |
||||
<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 share"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<p class="en">{{ modules[1].form.subTitle }}</p> |
||||
<div class="card" |
||||
v-html="modules[1].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改标题、小标题与概述</div> |
||||
</div> |
||||
<div class="flex c-wrap" |
||||
style="margin-top: 50px"> |
||||
<div class="left"> |
||||
<div class="des" |
||||
v-html="modules[2].form.des"></div> |
||||
</div> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更改概述与图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="intro"> |
||||
<img class="bg" |
||||
src="http://10.10.11.7/images/device/7.png" |
||||
alt=""> |
||||
<div class="c-wrap" |
||||
style="min-height: 700px"> |
||||
<img class="pic" |
||||
style="max-height: 600px" |
||||
:src="modules[3].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更改图片</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="unit c-wrap"> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<img class="pic" |
||||
:src="modules[4].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更改标题与图片</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.deviceIntroLayout |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '装置介绍' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.wrap { |
||||
background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat; |
||||
} |
||||
.share { |
||||
position: relative; |
||||
.inner { |
||||
width: 90%; |
||||
max-width: 1323px; |
||||
} |
||||
.left { |
||||
width: 547px; |
||||
margin-right: 66px; |
||||
} |
||||
h6 { |
||||
position: relative; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.en { |
||||
margin: -35px 0 40px; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #e3e3e3; |
||||
} |
||||
.card { |
||||
max-width: 1671px; |
||||
width: 90%; |
||||
padding: 32px 52px 25px 16%; |
||||
font-size: 24px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #ffffff; |
||||
line-height: 38px; |
||||
background: url(http://10.10.11.7/images/device/5.png) 0 0 / cover no-repeat; |
||||
} |
||||
.des { |
||||
margin-top: 25px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
line-height: 37px; |
||||
overflow: visible; |
||||
} |
||||
.pic { |
||||
width: 710px; |
||||
height: 509px; |
||||
border-top-left-radius: 20px; |
||||
} |
||||
} |
||||
.intro { |
||||
position: relative; |
||||
height: 794px; |
||||
margin-bottom: 37px; |
||||
.bg { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
.pic { |
||||
position: absolute; |
||||
top: 67px; |
||||
left: 15%; |
||||
width: 74%; |
||||
} |
||||
} |
||||
.unit { |
||||
width: 986px; |
||||
padding-bottom: 60px; |
||||
margin: 0 auto; |
||||
h6 { |
||||
padding-left: 15px; |
||||
margin-bottom: 15px; |
||||
font-size: 20px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #2a2a2a; |
||||
border-left: 4px solid #1583ff; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,218 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/装置介绍</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" |
||||
: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"> |
||||
<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 history gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="wow fadeInLeft" |
||||
v-html="modules[1].form.title"></h2> |
||||
<p class="en">{{ modules[1].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改标题与概述</div> |
||||
</div> |
||||
<div class="texts wow fadeInDown" |
||||
data-wow-delay="0.5s"> |
||||
<div class="left c-wrap"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="line"></div> |
||||
<div class="des" |
||||
v-html="modules[2].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更改标题与概述</div> |
||||
</div> |
||||
<img class="bg" |
||||
src="http://10.10.11.7/images/device/10.png" |
||||
alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block intro"> |
||||
<div class="inner"> |
||||
<div class="left c-wrap"> |
||||
<h5>{{ modules[3].form.title }}</h5> |
||||
<img :src="modules[3].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更改标题与图片</div> |
||||
</div> |
||||
<div class="right c-wrap"> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<img :src="modules[4].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更改标题与图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.deviceIntroLinear |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '装置介绍' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.history { |
||||
.inner { |
||||
width: 90%; |
||||
max-width: 1504px; |
||||
} |
||||
h2 { |
||||
position: relative; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #1c1c1c; |
||||
} |
||||
.en { |
||||
margin: -35px 0 40px; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #e3e3e3; |
||||
} |
||||
.texts { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 82px 0 30px 38px; |
||||
margin-top: 20px; |
||||
background: #1583ff; |
||||
border-radius: 65px 100px 0px 0px; |
||||
transition: 0.3s; |
||||
&:hover { |
||||
transform: scale(1.05); |
||||
} |
||||
} |
||||
.left { |
||||
width: 50%; |
||||
} |
||||
h6 { |
||||
font-size: 28px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #ffffff; |
||||
} |
||||
.line { |
||||
width: 214px; |
||||
height: 5px; |
||||
margin: 54px 0 44px; |
||||
background: #ffffff; |
||||
opacity: 0.52; |
||||
} |
||||
.des { |
||||
font-size: 22px; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
||||
font-weight: 400; |
||||
color: #ffffff; |
||||
line-height: 44px; |
||||
overflow: visible; |
||||
} |
||||
.bg { |
||||
width: 50%; |
||||
margin: -142px -50px 0 0; |
||||
border-top-left-radius: 30px; |
||||
} |
||||
} |
||||
.intro { |
||||
.inner { |
||||
display: flex; |
||||
width: 90%; |
||||
max-width: 1504px; |
||||
} |
||||
.left { |
||||
width: 30%; |
||||
} |
||||
.right { |
||||
width: 68%; |
||||
margin-left: 2%; |
||||
} |
||||
h5 { |
||||
margin-bottom: 15px; |
||||
font-size: 20px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #2a2a2a; |
||||
} |
||||
h6 { |
||||
padding-left: 15px; |
||||
margin-bottom: 15px; |
||||
font-size: 20px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #2a2a2a; |
||||
border-left: 4px solid #1583ff; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 85%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,148 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/EDUCATION & COLLABORATION</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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 gray"> |
||||
<div class="inner c-wrap"> |
||||
<h2 class="b-title">{{ modules[1].form.title }}</h2> |
||||
<p class="intro">{{ modules[1].form.des }}</p> |
||||
<img width="100%" height="536" :src="modules[1].form.pic" alt=""> |
||||
<div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner c-wrap"> |
||||
<h2 class="b-title">{{ modules[2].form.title }}</h2> |
||||
<p class="intro">{{ modules[2].form.des }}</p> |
||||
<img width="100%" height="536" :src="modules[2].form.pic" alt=""> |
||||
<div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[3].form.title }}</h2> |
||||
<p class="intro">{{ modules[3].form.des }}</p> |
||||
<div class="cover" @click="toSet(3)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="list c-wrap"> |
||||
<template v-for="(item, i) in modules[4].list"> |
||||
<li v-if="item.isEnable" :key="i"> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="sub">{{ item.subTitle }}</p> |
||||
<div class="des">{{ item.des }}</div> |
||||
</div> |
||||
</li> |
||||
</template> |
||||
<div class="cover" style="width: calc(100% + 60px);" @click="toSet(4)">点击更改图片、标题概述与链接</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.edu |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'EDUCATION & COLLABORATION' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.list { |
||||
li { |
||||
position: relative; |
||||
&:nth-child(even) { |
||||
text-align: right; |
||||
.texts { |
||||
left: 0; |
||||
text-align: left; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 650px; |
||||
height: 730px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 120px; |
||||
left: 610px; |
||||
width: 850px; |
||||
height: 440px; |
||||
padding: 60px 30px 30px 100px; |
||||
background-color: #fff; |
||||
} |
||||
h6 { |
||||
font-size: 40px; |
||||
color: #3C3C3C; |
||||
} |
||||
.sub { |
||||
margin: 20px 0; |
||||
font-size: 24px; |
||||
color: #1C1C1C; |
||||
line-height: 33px; |
||||
} |
||||
.des { |
||||
font-size: 20px; |
||||
color: #3C3C3C; |
||||
line-height: 32px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,231 +0,0 @@ |
||||
<template> |
||||
<!-- 产业光源-大事记 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/产业光源-概况-大事记</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="block history"> |
||||
<div class="inner c-wrap"> |
||||
<h2 class="wow fadeInLeft">大事记</h2> |
||||
<p class="en">DEVELOPMENT HISTORY</p> |
||||
|
||||
<div v-if="modules[1].list.length" class="event"> |
||||
<ul class="time"> |
||||
<template v-for="(item, i) in modules[1].list"> |
||||
<li v-if="item.isEnable" :key="i" :class="{active: curYear == i}" @click="yearClick(i)">{{ item.title }}</li> |
||||
</template> |
||||
</ul> |
||||
<div class="right"> |
||||
<h6 class="year">{{ modules[1].list[curYear].title }}</h6> |
||||
<ul class="list"> |
||||
<template v-for="(e, j) in modules[1].list[curYear].list"> |
||||
<li v-if="e.isEnable" :key="j"> |
||||
<div class="texts"> |
||||
<p class="date">{{ e.title }}</p> |
||||
<p class="text">{{ e.des }}</p> |
||||
</div> |
||||
<img v-if="e.pic" :src="e.pic" alt="" class="pic"> |
||||
</li> |
||||
</template> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="cover" style="min-height: 300px;" @click="toSet(1)">点击配置历程</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules['estate/event'], |
||||
active: 0, |
||||
tabs: ['大事记'], |
||||
curYear: 0 |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-大事记' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../../../styles/page/page.scss"; |
||||
.wrap { |
||||
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat, |
||||
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
.history { |
||||
h2 { |
||||
position: relative; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #1C1C1C; |
||||
} |
||||
.en { |
||||
margin: -15px 0 40px; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #E3E3E3; |
||||
} |
||||
} |
||||
.event { |
||||
display: flex; |
||||
justify-content: center; |
||||
.time { |
||||
width: 200px; |
||||
padding-right: 10px; |
||||
margin-right: 20px; |
||||
border-right: 1px solid #ddd; |
||||
li { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
width: 190px; |
||||
padding-right: 45px; |
||||
line-height: 60px; |
||||
font-size: 1.4rem; |
||||
font-weight: 600; |
||||
font-family: SFProDisplay-Semibold, SFProDisplay; |
||||
color: #666; |
||||
box-shadow: inset 0px -1px 0px 0px #DDDDDD; |
||||
cursor: pointer; |
||||
&.active { |
||||
font-weight: 800; |
||||
color: #1A81F4; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F3F8FF 100%); |
||||
&:before { |
||||
content: ''; |
||||
width: 18px; |
||||
height: 18px; |
||||
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat; |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.right { |
||||
width: 1000px; |
||||
} |
||||
.year { |
||||
margin: 0 0 20px 20px; |
||||
font-size: 3.8rem; |
||||
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; |
||||
font-weight: 800; |
||||
color: #1A81F4; |
||||
} |
||||
.list { |
||||
border-top: 1px solid #ddd; |
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 30px; |
||||
border-bottom: 1px solid #ddd; |
||||
} |
||||
.texts { |
||||
width: 500px; |
||||
} |
||||
.date { |
||||
margin-bottom: 15px; |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
font-size: 1.1rem; |
||||
color: #333; |
||||
@include mul-ellipsis(3); |
||||
&:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
width: 7px; |
||||
height: 7px; |
||||
margin: 0 10px; |
||||
background-color: #666; |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
.pic { |
||||
width: 350px; |
||||
height: 195px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,580 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/产业光源</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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 banner-block"> |
||||
<div class="inner"> |
||||
<div class="title"> |
||||
<h5> |
||||
{{ modules[1].form.title }} |
||||
<span class="sub">{{ modules[1].form.subTitle }}</span> |
||||
</h5> |
||||
<span class="more">MORE</span> |
||||
<div class="cover" @click="toSet(1)">点击更换标题与小标题</div> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<div class="sfel-banner"> |
||||
<img style="width: 50%;height: 410px;overflow: hidden;" width="100%" height="480" src="http://10.10.11.7/images/about/5.png" alt=""> |
||||
<div class="right"> |
||||
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6> |
||||
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div> |
||||
<p class="meta">2022-07-24 | Research</p> |
||||
</div> |
||||
</div> |
||||
<ul class="card"> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-09-09 | Research</p> |
||||
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> |
||||
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-09-09 | Research</p> |
||||
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> |
||||
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/11.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-09-09 | Research</p> |
||||
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> |
||||
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="cover" @click="toSet(2)">关联栏目</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block talent"> |
||||
<div class="inner"> |
||||
<div class="title wow fadeInUp"> |
||||
<h5> |
||||
{{ modules[3].form.title }} |
||||
<span class="sub">{{ modules[3].form.subTitle }}</span> |
||||
</h5> |
||||
<span class="more">MORE</span> |
||||
<div class="cover" @click="toSet(3)">点击更换标题与小标题</div> |
||||
</div> |
||||
<div class="shows"> |
||||
<div class="left wow fadeInLeft" data-wow-delay="0.5s"> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<div class="text" v-html="modules[4].form.des"></div> |
||||
<el-button type="primary" round>这里跳转</el-button> |
||||
</div> |
||||
<img :src="modules[4].form.pic" alt="" class="pic"> |
||||
<div class="cover" @click="toSet(4)">点击更换标题、描述、图片与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block conference"> |
||||
<div class="inner lg"> |
||||
<div class="title"> |
||||
<h5> |
||||
{{ modules[5].form.title }} |
||||
<span class="sub">{{ modules[5].form.subTitle }}</span> |
||||
</h5> |
||||
<span class="more">MORE</span> |
||||
<div class="cover" @click="toSet(5)">点击更换标题与小标题</div> |
||||
</div> |
||||
<div class="shows c-wrap"> |
||||
<div class="left"> |
||||
<img width="100%" height="100%" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div> |
||||
</div> |
||||
<ul class="card-list"> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>专业技术培训 | 自由电子激光装置中的结构</h6> |
||||
<p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/mine.png" alt=""> |
||||
邵佳航 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/time.png" alt=""> |
||||
会议时间: 2022年8月13日 14:30 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/online.png" alt=""> |
||||
总部四楼大会议室 |
||||
</p> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>专业技术培训 | 自由电子激光装置中的结构</h6> |
||||
<p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/mine.png" alt=""> |
||||
邵佳航 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/time.png" alt=""> |
||||
会议时间: 2022年8月13日 14:30 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/online.png" alt=""> |
||||
总部四楼大会议室 |
||||
</p> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>专业技术培训 | 自由电子激光装置中的结构</h6> |
||||
<p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/mine.png" alt=""> |
||||
邵佳航 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/time.png" alt=""> |
||||
会议时间: 2022年8月13日 14:30 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/online.png" alt=""> |
||||
总部四楼大会议室 |
||||
</p> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="cover" @click="toSet(6)">关联栏目</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block program"> |
||||
<div class="inner c-wrap"> |
||||
<div class="title"> |
||||
<h5> |
||||
{{ modules[7].form.title }} |
||||
<span class="sub">{{ modules[7].form.subTitle }}</span> |
||||
</h5> |
||||
<span class="more">MORE</span> |
||||
<div class="cover" @click="toSet(7)">点击更换标题与小标题</div> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<div class="slide"> |
||||
<div class="texts"> |
||||
<h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6> |
||||
<div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段。对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标，面向国民经济主战场和世界科技前沿…</div> |
||||
<div class="meta">发表日期：2022.01.10  浏览量：备份</div> |
||||
</div> |
||||
<img class="pic" src="@/assets/images/survey3.png" alt=""> |
||||
</div> |
||||
<ul class="list"> |
||||
<li> |
||||
<div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div> |
||||
<p class="date">2022.10.10</p> |
||||
</li> |
||||
<li> |
||||
<div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div> |
||||
<p class="date">2022.10.10</p> |
||||
</li> |
||||
<li> |
||||
<div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div> |
||||
<p class="date">2022.10.10</p> |
||||
</li> |
||||
</ul> |
||||
<div class="cover" @click="toSet(8)">关联栏目</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules['estate/index'] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '产业光源' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../../../styles/page/page.scss"; |
||||
.title { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
padding-bottom: 25px; |
||||
margin-bottom: 30px; |
||||
border-bottom: 1px solid #ddd; |
||||
h5 { |
||||
padding-left: 16px; |
||||
font-size: 36px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
line-height: 1; |
||||
border-left: 6px solid #2B96EF; |
||||
} |
||||
.sub { |
||||
font-size: 22px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #AFB7BF; |
||||
} |
||||
.more { |
||||
font-size: 14px; |
||||
color: #666; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.lg { |
||||
width: 1505px; |
||||
} |
||||
/deep/.articles { |
||||
width: 50%; |
||||
.el-carousel__indicators--horizontal { |
||||
bottom: 20px; |
||||
left: 804px; |
||||
} |
||||
} |
||||
.banner-block { |
||||
background: url(../../../../../assets/images/sfel/2.png) 0 0/cover no-repeat; |
||||
} |
||||
.sfel-banner { |
||||
display: flex; |
||||
cursor: pointer; |
||||
.pic { |
||||
transition: .5s; |
||||
&:hover { |
||||
transform: scale(1.3); |
||||
} |
||||
} |
||||
.right { |
||||
position: relative; |
||||
width: 50%; |
||||
padding: 50px 50px 30px; |
||||
background: #1583FF; |
||||
color: #fff; |
||||
&:hover { |
||||
background: #465f85; |
||||
h6, .des, .meta { |
||||
color: #fff; |
||||
transform: translateY(15px); |
||||
} |
||||
} |
||||
} |
||||
.inds { |
||||
position: absolute; |
||||
bottom: 40px; |
||||
left: 60px; |
||||
display: flex; |
||||
li { |
||||
width: 10px; |
||||
height: 10px; |
||||
margin-right: 12px; |
||||
background: #FFFFFF; |
||||
border-radius: 50%; |
||||
transition: .2s; |
||||
&.active { |
||||
width: 30px; |
||||
background: rgba(255,255,255,0.3); |
||||
border-radius: 5px; |
||||
} |
||||
} |
||||
} |
||||
h6 { |
||||
font-size: 1.3rem; |
||||
transition: .3s; |
||||
} |
||||
.des { |
||||
margin: 30px 0; |
||||
font-size: .9rem; |
||||
line-height: 24px; |
||||
transition: .3s; |
||||
} |
||||
.meta { |
||||
font-size: .8rem; |
||||
transition: .3s; |
||||
} |
||||
} |
||||
.card { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: 40px; |
||||
li { |
||||
width: calc((100% - 56px) / 3); |
||||
margin-right: 28px; |
||||
box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21); |
||||
border-radius: 6px; |
||||
transition: .3s; |
||||
&:hover { |
||||
transform: scale(1.05); |
||||
} |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 240px; |
||||
} |
||||
.texts { |
||||
padding: 40px 30px; |
||||
} |
||||
.meta { |
||||
font-size: 16px; |
||||
color: #666; |
||||
} |
||||
.des { |
||||
margin: 10px 0; |
||||
font-size: 20px; |
||||
font-family: SFProDisplay; |
||||
font-weight: 500; |
||||
color: #333; |
||||
line-height: 28px; |
||||
} |
||||
.arrow { |
||||
width: 36px; |
||||
} |
||||
} |
||||
|
||||
.talent { |
||||
.shows { |
||||
position: relative; |
||||
display: flex; |
||||
color: #fff; |
||||
background: #1A2844; |
||||
border-radius: 0px 100px 0px 100px; |
||||
.left { |
||||
width: 50%; |
||||
padding: 120px 0 0 5%; |
||||
} |
||||
h6 { |
||||
font-size: 1.6rem; |
||||
} |
||||
.text { |
||||
margin: 20px 0; |
||||
font-size: 1rem; |
||||
line-height: 2; |
||||
} |
||||
.pic { |
||||
width: 50%; |
||||
height: 500px; |
||||
} |
||||
} |
||||
} |
||||
.conference { |
||||
background: url(../../../../../assets/images/sfel/4.png) 0 0/cover no-repeat; |
||||
.shows { |
||||
display: flex; |
||||
} |
||||
.left { |
||||
position: relative; |
||||
width: 688px; |
||||
height: 688px; |
||||
margin-right: 20px; |
||||
cursor: pointer; |
||||
.text { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 0 12px; |
||||
line-height: 59px; |
||||
font-size: 18px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
background-color: rgba(0, 0, 0, 0.57); |
||||
} |
||||
} |
||||
.card-list { |
||||
width: 784px; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 14px; |
||||
margin-bottom: 21px; |
||||
background-color: #fff; |
||||
cursor: pointer; |
||||
transition: .3s; |
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
&:hover { |
||||
transform: translateX(20px); |
||||
} |
||||
} |
||||
.pic { |
||||
width: 188px; |
||||
height: 188px; |
||||
margin-right: 36px; |
||||
} |
||||
h6 { |
||||
margin-bottom: 10px; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
.sum { |
||||
font-size: 16px; |
||||
color: #666; |
||||
} |
||||
.text { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 10px 0; |
||||
} |
||||
.icon { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.program { |
||||
background: #fff; |
||||
.slide { |
||||
display: flex; |
||||
margin-bottom: 14px; |
||||
} |
||||
.texts { |
||||
width: 51%; |
||||
padding: 56px; |
||||
background: #FBFBFB; |
||||
h6 { |
||||
font-size: 24px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.des { |
||||
margin: 35px 0 25px; |
||||
font-size: 16px; |
||||
color: #666; |
||||
line-height: 32px; |
||||
} |
||||
.meta { |
||||
font-size: 14px; |
||||
color: #666; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 49%; |
||||
height: 430px; |
||||
} |
||||
.list { |
||||
display: flex; |
||||
li { |
||||
width: calc((100% - 44px) / 3); |
||||
padding: 36px 22px; |
||||
margin-right: 14px; |
||||
background: url(../../../../../assets/images/sfel/7.png) 0 0/cover no-repeat; |
||||
&:nth-child(2) { |
||||
background-image: url(../../../../../assets/images/sfel/8.png); |
||||
} |
||||
&:nth-child(3) { |
||||
margin-right: 0; |
||||
background-image: url(../../../../../assets/images/sfel/9.png); |
||||
} |
||||
} |
||||
.des { |
||||
margin-bottom: 30px; |
||||
font-size: 18px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 30px; |
||||
} |
||||
.date { |
||||
font-size: 16px; |
||||
font-family: LaoSangamMN; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
} |
||||
.tools { |
||||
position: absolute; |
||||
top: 600px; |
||||
left: 0; |
||||
width: 226px; |
||||
text-align: center; |
||||
.logo { |
||||
padding: 44px 0; |
||||
background: #0C60BE; |
||||
box-shadow: 0px 0px 20px 0px rgba(184,191,200,0.3); |
||||
} |
||||
.nav { |
||||
li { |
||||
padding: 0 10px; |
||||
font-size: 24px; |
||||
line-height: 83px; |
||||
color: #fff; |
||||
background-color: #1D1D1D; |
||||
cursor: pointer; |
||||
@include ellipsis; |
||||
&.active { |
||||
background-color: #1583FF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 1520px) { |
||||
.lg { |
||||
width: 98%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,208 +0,0 @@ |
||||
<template> |
||||
<!-- 产业光源-地理位置 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/产业光源-概况-地理位置</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="item wow bounceInLeft" data-wow-delay="0.5s"> |
||||
<div class="img-wrap"> |
||||
<img class="pic" :src="modules[1].form.pic" alt=""> |
||||
</div> |
||||
<div class="texts"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<div class="des">{{ modules[1].form.des }}</div> |
||||
</div> |
||||
<div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
<div class="item wow bounceInRight" data-wow-delay="0.6s"> |
||||
<div class="img-wrap"> |
||||
<img class="pic" :src="modules[2].form.pic" alt=""> |
||||
</div> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="des">{{ modules[2].form.des }}</div> |
||||
</div> |
||||
<div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
<div class="item wow bounceInLeft" data-wow-delay="0.5s"> |
||||
<div class="img-wrap"> |
||||
<img class="pic" :src="modules[3].form.pic" alt=""> |
||||
</div> |
||||
<div class="texts"> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<div class="des">{{ modules[3].form.des }}</div> |
||||
</div> |
||||
<div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules['estate/location'], |
||||
active: 0, |
||||
tabs: ['地理位置'] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-地理位置' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../../../styles/page/page.scss"; |
||||
.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 { |
||||
width: 80%; |
||||
max-width: 1504px; |
||||
padding-bottom: 100px; |
||||
margin: 30px auto 0; |
||||
.item { |
||||
position: relative; |
||||
display: flex; |
||||
padding: 42px; |
||||
margin-bottom: 36px; |
||||
color: #333; |
||||
background: #F5F5F5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat; |
||||
transition: .5s; |
||||
&:nth-child(even) { |
||||
justify-content: space-between; |
||||
flex-direction: row-reverse; |
||||
background-position: 30% 100%; |
||||
.texts { |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
&:hover { |
||||
// color: #fff; |
||||
// background: #005388; |
||||
.pic { |
||||
transform: scale(1.1); |
||||
} |
||||
} |
||||
} |
||||
.img-wrap { |
||||
height: 465px; |
||||
overflow: hidden; |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
transition: .5s; |
||||
} |
||||
.texts { |
||||
width: 707px; |
||||
padding: 98px 72px 30px 80px; |
||||
} |
||||
h6 { |
||||
margin-bottom: 24px; |
||||
font-size: 2.4rem; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
} |
||||
.des { |
||||
font-size: 1rem; |
||||
line-height: 33px; |
||||
-webkit-line-clamp: 8; |
||||
} |
||||
} |
||||
@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{ |
||||
width: 100%; |
||||
padding:15px; |
||||
flex-direction: column; |
||||
.left{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -1,171 +0,0 @@ |
||||
<template> |
||||
<!-- 产业光源-机构设置 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/产业光源-概况-机构设置</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="org"> |
||||
<div class="left c-wrap"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<p class="text" v-html="modules[1].form.des"></p> |
||||
<div class="cover" style="top: -73px;min-height: 300px" @click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
<img class="pic" src="http://10.10.11.7/images/overviewSetup/1.png" alt=""> |
||||
</div> |
||||
<div class="lg-bg c-wrap"> |
||||
<img width="100%" :src="modules[2].form.pic" alt=""> |
||||
<div class="cover" @click="toSet(2)">点击更换图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules['estate/orgSetup'], |
||||
active: 0, |
||||
tabs: ['机构设置'] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-机构设置' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../../../styles/page/page.scss"; |
||||
.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 { |
||||
padding: 77px 0; |
||||
} |
||||
.org { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 1294px; |
||||
padding: 9px 86px 29px 116px; |
||||
margin: 0 auto 50px; |
||||
background: #FCFCFC; |
||||
border-radius: 160px; |
||||
.left { |
||||
width: 705px; |
||||
} |
||||
h6 { |
||||
font-size: 1.4rem; |
||||
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
||||
font-weight: bold; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
margin-top: 10px; |
||||
font-size: 1rem; |
||||
color: #020202; |
||||
line-height: 2rem; |
||||
} |
||||
.pic { |
||||
width: 320px; |
||||
height: 282px; |
||||
} |
||||
} |
||||
.lg-bg { |
||||
width: 85%; |
||||
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{ |
||||
width: 100%; |
||||
padding:15px; |
||||
flex-direction: column; |
||||
.left{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -1,167 +0,0 @@ |
||||
<template> |
||||
<!-- 产业光源-产业光源概况 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/产业光源-概况-产业光源概况</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="survey c-wrap"> |
||||
<h6> |
||||
{{ modules[1].form.title }} |
||||
<img class="title-bg" src="http://10.10.11.7/images/overviewIntro/2.png" alt=""> |
||||
</h6> |
||||
<p class="text" v-html="modules[1].form.des"></p> |
||||
<div class="cover" @click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="lg-bg"> |
||||
<img width="100%" src="http://10.10.11.7/images/estate/3.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules['estate/survey'], |
||||
active: 0, |
||||
tabs: ['产业光源概况'] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-产业光源概况' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../../../styles/page/page.scss"; |
||||
.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 { |
||||
padding-top: 70px; |
||||
} |
||||
.survey { |
||||
width: 1294px; |
||||
min-height: 500px; |
||||
padding: 80px 86px 29px 597px; |
||||
margin: 0 auto 200px; |
||||
background: url(http://10.10.11.7/images/estate/2.png) 0 0/100% 100% no-repeat; |
||||
border-radius: 160px; |
||||
h6 { |
||||
position: relative; |
||||
margin-bottom: 30px; |
||||
font-size: 1.4rem; |
||||
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
||||
font-weight: bold; |
||||
color: #333; |
||||
} |
||||
.title-bg { |
||||
position: absolute; |
||||
top: -40px; |
||||
left: -20px; |
||||
} |
||||
.text { |
||||
margin-top: 10px; |
||||
font-size: 1rem; |
||||
color: #020202; |
||||
line-height: 2rem; |
||||
} |
||||
} |
||||
.lg-bg { |
||||
width: 40%; |
||||
} |
||||
@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{ |
||||
width: 100%; |
||||
padding:15px; |
||||
flex-direction: column; |
||||
.left{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -1,229 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/装置介绍-实验站</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" |
||||
: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"> |
||||
<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 station"> |
||||
<div class="inner c-wrap"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<p class="en">{{ modules[1].form.subTitle }}</p> |
||||
<template v-if="modules[1].form.pic"> |
||||
<video v-if="Util.isVideo(modules[1].form.mediaType)" |
||||
class="pic" |
||||
ref="video" |
||||
autoplay |
||||
controls |
||||
loop> |
||||
<source :src="modules[1].form.pic" |
||||
type="video/mp4"> |
||||
您的浏览器不支持 video 标签。 |
||||
</video> |
||||
<img v-else |
||||
class="pic" |
||||
:src="modules[1].form.pic" |
||||
alt=""> |
||||
</template> |
||||
<div class="des" |
||||
v-html="modules[1].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改图片与概述</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="list"> |
||||
<li class="item1"> |
||||
<img src="@/assets/images/exp/2.png" |
||||
alt=""> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更改标题与链接</div> |
||||
</li> |
||||
<li class="item2"> |
||||
<img src="@/assets/images/exp/3.png" |
||||
alt=""> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更改标题与链接</div> |
||||
</li> |
||||
<li class="item3"> |
||||
<img src="@/assets/images/exp/4.png" |
||||
alt=""> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更改标题与链接</div> |
||||
</li> |
||||
<li class="item4"> |
||||
<img src="@/assets/images/exp/5.png" |
||||
alt=""> |
||||
<h6>{{ modules[5].form.title }}</h6> |
||||
<div class="cover" |
||||
@click="toSet(5)">点击更改标题与链接</div> |
||||
</li> |
||||
<li class="item5"> |
||||
<img src="@/assets/images/exp/6.png" |
||||
alt=""> |
||||
<h6>{{ modules[6].form.title }}</h6> |
||||
<div class="cover" |
||||
@click="toSet(6)">点击更改标题与链接</div> |
||||
</li> |
||||
<li class="item6"> |
||||
<img src="@/assets/images/exp/7.png" |
||||
alt=""> |
||||
<h6>{{ modules[7].form.title }}</h6> |
||||
<div class="cover" |
||||
@click="toSet(7)">点击更改标题与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.exp, |
||||
Util |
||||
} |
||||
}, |
||||
computed: { |
||||
isVideo () { |
||||
const { pic } = this.modules[1].form |
||||
const ext = pic.substr(pic.lastIndexOf('.') + 1) |
||||
console.log(33, pic) |
||||
return Util.isVideo(ext) |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '装置介绍-实验站' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.station { |
||||
.inner { |
||||
width: 1200px; |
||||
} |
||||
h6 { |
||||
position: relative; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
line-height: 1; |
||||
} |
||||
.en { |
||||
margin-bottom: 20px; |
||||
font-size: 45px; |
||||
font-family: AppleSystemUIFont; |
||||
color: #e4e4e4; |
||||
line-height: 1; |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 604px; |
||||
} |
||||
.des { |
||||
margin-top: 55px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
line-height: 34px; |
||||
overflow: visible; |
||||
} |
||||
} |
||||
.list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: 30px; |
||||
li { |
||||
position: relative; |
||||
height: 542px; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
h6 { |
||||
position: absolute; |
||||
top: 192px; |
||||
left: 60px; |
||||
font-size: 30px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #fff; |
||||
} |
||||
.item1, |
||||
.item2 { |
||||
width: 25%; |
||||
} |
||||
.item3 { |
||||
width: 50%; |
||||
} |
||||
.item4 { |
||||
width: 40%; |
||||
} |
||||
.item5 { |
||||
width: 32%; |
||||
} |
||||
.item6 { |
||||
width: 28%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,229 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/关于IASF-治理结构</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block history gray"> |
||||
<div class="inner"> |
||||
<div class="texts c-wrap"> |
||||
<div class="left"> |
||||
<h2 v-html="modules[1].form.title"></h2> |
||||
<div class="des" |
||||
v-html="modules[1].form.des"></div> |
||||
</div> |
||||
<img class="bg" |
||||
width="562" |
||||
height="506" |
||||
:src="modules[1].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
style="top: -100px" |
||||
@click="toSet(1)">点击更换标题、描述与图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="cards"> |
||||
<ul> |
||||
<li v-for="(item, i) in modules[2].list" |
||||
:key="i">{{ item.title }}</li> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击配置文本</div> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="block committee gray"> |
||||
<div class="inner c-wrap"> |
||||
<div class="left"> |
||||
<h2>{{ modules[2].list[curYear].list[0].title }}</h2> |
||||
<div class="text" |
||||
v-html="modules[2].list[curYear].list[0].des"></div> |
||||
</div> |
||||
<img class="pic" |
||||
:src="modules[2].list[curYear].list[0].pic" |
||||
alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.governance, |
||||
curYear: 0 |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '关于IASF-治理结构' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.history { |
||||
h2 { |
||||
padding-bottom: 15px; |
||||
font-size: 1.2rem; |
||||
color: #333; |
||||
&:after { |
||||
content: ''; |
||||
display: block; |
||||
width: 65px; |
||||
height: 3px; |
||||
margin-top: 20px; |
||||
background: #0280f1; |
||||
} |
||||
} |
||||
.texts { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 82px 0 50px 30px; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 100px 0px 0px 0px; |
||||
transition: 0.3s; |
||||
&:hover { |
||||
transform: scale(1.05); |
||||
} |
||||
} |
||||
.left { |
||||
width: 695px; |
||||
} |
||||
.des { |
||||
margin: 20px 0; |
||||
font-size: 1.2rem; |
||||
color: #181818; |
||||
line-height: 31px; |
||||
} |
||||
.bg { |
||||
margin: -122px 0 0 0; |
||||
} |
||||
} |
||||
.cards { |
||||
padding: 60px 0; |
||||
ul { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
} |
||||
li { |
||||
width: 368px; |
||||
margin: 0 30px 50px 0; |
||||
line-height: 84px; |
||||
font-size: 1.2rem; |
||||
color: #333; |
||||
text-align: center; |
||||
@include ellipsis(); |
||||
background: url(http://10.10.11.7/images/governance/3.png) 0 0 / cover no-repeat; |
||||
cursor: pointer; |
||||
&:nth-child(2) { |
||||
background-image: url(http://10.10.11.7/images/governance/4.png); |
||||
} |
||||
&:nth-child(3) { |
||||
background-image: url(http://10.10.11.7/images/governance/5.png); |
||||
} |
||||
&:nth-child(4) { |
||||
background-image: url(http://10.10.11.7/images/governance/4.png); |
||||
} |
||||
&:nth-child(5) { |
||||
background-image: url(http://10.10.11.7/images/governance/7.png); |
||||
} |
||||
&:nth-child(6) { |
||||
background-image: url(http://10.10.11.7/images/governance/6.png); |
||||
} |
||||
&:nth-child(8) { |
||||
background-image: url(http://10.10.11.7/images/governance/6.png); |
||||
} |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
&:hover { |
||||
color: #fff; |
||||
background: #0d84f2; |
||||
} |
||||
} |
||||
} |
||||
.committee { |
||||
.inner { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.left { |
||||
width: 50%; |
||||
margin-right: 2%; |
||||
} |
||||
h2 { |
||||
margin-bottom: 20px; |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
||||
line-height: 1.5; |
||||
color: #333; |
||||
} |
||||
.pic { |
||||
width: 48%; |
||||
height: 300px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,390 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/HOME</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="500px" :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"> |
||||
<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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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="http://10.10.11.7/images/home/3.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"> |
||||
<template v-for="(item, i) in modules[7].list"> |
||||
<li v-if="item.isEnable" :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> |
||||
</template> |
||||
<div class="cover" @click="toSet(7)">点击更改图片、标题概述与链接</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="about"> |
||||
<div class="inner"> |
||||
<img src="@/assets/images/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' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.home |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'HOME' |
||||
} |
||||
]) |
||||
}, |
||||
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/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; |
||||
font-weight: bold; |
||||
font-family: SFProDisplay-Bold, SFProDisplay; |
||||
text-align: center; |
||||
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/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> |
||||
@ -1,756 +0,0 @@ |
||||
<template> |
||||
<!-- iasf中文首页 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/IASF中文首页</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="500px" |
||||
: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"> |
||||
<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 news-title">{{ modules[1].form.title }}</h2> |
||||
<p class="intro wow fadeInUp" |
||||
data-wow-delay="0.5s">{{ modules[1].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="card"> |
||||
<li class="wow fadeInDown" |
||||
data-wow-delay="0.2s"> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<div class="name">SILF</div> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<p class="des">{{ modules[2].form.des }}</p> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换图片、标题、概述与链接</div> |
||||
</li> |
||||
<li class="wow fadeInDown" |
||||
data-wow-delay="0.6s"> |
||||
<img class="pic" |
||||
:src="modules[3].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<div class="name">S³FEL</div> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<p class="des">{{ modules[3].form.des }}</p> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换图片、标题、概述与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title news-title">{{ modules[4].form.title }}</h2> |
||||
<p class="intro wow fadeInUp" |
||||
data-wow-delay="0.5s">{{ modules[4].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<div class="news-banner"> |
||||
<img style="width: 50%;height: 410px;overflow: hidden;" |
||||
width="100%" |
||||
height="480" |
||||
src="http://10.10.11.7/images/about/5.png" |
||||
alt=""> |
||||
<div class="right"> |
||||
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6> |
||||
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div> |
||||
<p class="meta">2022-07-24 | Research</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="news"> |
||||
<li> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/about/5.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-07-24 | 综合新闻</p> |
||||
<div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</div> |
||||
<img class="arrow" |
||||
src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/about/5.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-07-24 | 建设进展</p> |
||||
<div class="des">自由电子激光装置调试及运行过程中提供稳定可靠的单发辐射脉冲纵向信息</div> |
||||
<img class="arrow" |
||||
src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/about/5.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-07-24 | 学术动态</p> |
||||
<div class="des">基于上海软X射线自由电子激光试验装置，科研人员对这一方法进行了实验验证</div> |
||||
<img class="arrow" |
||||
src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="cover" |
||||
@click="toSet(5)">关联栏目</div> |
||||
</div> |
||||
|
||||
<ul class="news-carousel"> |
||||
<li> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/about/5.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>媒体关注</h6> |
||||
<p class="meta">来源人民日报</p> |
||||
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
||||
<p class="date">2022-07-24</p> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(6)">关联栏目</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/about/5.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>媒体关注</h6> |
||||
<p class="meta">来源人民日报</p> |
||||
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
||||
<p class="date">2022-07-24</p> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(7)">关联栏目</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/about/5.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>媒体关注</h6> |
||||
<p class="meta">来源人民日报</p> |
||||
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
||||
<p class="date">2022-07-24</p> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(8)">关联栏目</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2> |
||||
<p class="intro wow fadeInUp" |
||||
data-wow-delay="0.5s">{{ modules[9].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(9)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="people"> |
||||
<li class="wow fadeInDown"> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/careers/6.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>王晓凡</h6> |
||||
<p class="job">岗位：物理组工程师</p> |
||||
<p class="hobby">爱好：慢跑，旅游</p> |
||||
<div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div> |
||||
</div> |
||||
</li> |
||||
<li class="wow fadeInDown"> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/careers/7.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>王晓凡</h6> |
||||
<p class="job">岗位：物理组工程师</p> |
||||
<p class="hobby">爱好：慢跑，旅游</p> |
||||
<div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div> |
||||
</div> |
||||
</li> |
||||
<li class="wow fadeInDown"> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/careers/8.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>王晓凡</h6> |
||||
<p class="job">岗位：物理组工程师</p> |
||||
<p class="hobby">爱好：慢跑，旅游</p> |
||||
<div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div> |
||||
</div> |
||||
</li> |
||||
<div class="cover" |
||||
@click="toSet(10)">关联栏目</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2> |
||||
<p class="intro wow fadeInUp" |
||||
data-wow-delay="0.5s">{{ modules[11].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(11)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="talent"> |
||||
<div class="left wow fadeInLeft" |
||||
data-wow-delay="0.5s"> |
||||
<h6>{{ modules[12].form.title }}</h6> |
||||
<p class="meta">{{ modules[12].form.subTitle }}</p> |
||||
<div class="text" |
||||
v-html="modules[12].form.des"></div> |
||||
</div> |
||||
<img :src="modules[11].form.pic" |
||||
alt="" |
||||
class="pic"> |
||||
<div class="cover" |
||||
@click="toSet(12)">点击更换标题、描述、链接与图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="about"> |
||||
<div class="inner c-wrap"> |
||||
<div class="left"> |
||||
<h6>{{ modules[13].form.title }}</h6> |
||||
<div class="text" |
||||
v-html="modules[13].form.des"></div> |
||||
<img src="@/assets/images/arrow-white.png" |
||||
alt=""> |
||||
</div> |
||||
<img class="pic" |
||||
:src="modules[13].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(13)">点击更换标题、描述、链接与图片</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block" |
||||
style="margin-top: 100px"> |
||||
<div class="inner"> |
||||
<ul class="entry"> |
||||
<li> |
||||
<img class="icon" |
||||
:src="modules[14].form.pic" |
||||
alt=""> |
||||
<p class="text">{{ modules[14].form.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(14)">点击更换</div> |
||||
</li> |
||||
<li> |
||||
<img class="icon" |
||||
:src="modules[15].form.pic" |
||||
alt=""> |
||||
<p class="text">{{ modules[15].form.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(15)">点击更换</div> |
||||
</li> |
||||
<li> |
||||
<img class="icon" |
||||
:src="modules[16].form.pic" |
||||
alt=""> |
||||
<p class="text">{{ modules[16].form.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(16)">点击更换</div> |
||||
</li> |
||||
<li> |
||||
<img class="icon" |
||||
:src="modules[17].form.pic" |
||||
alt=""> |
||||
<p class="text">{{ modules[17].form.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(17)">点击更换</div> |
||||
</li> |
||||
<li> |
||||
<img class="icon" |
||||
:src="modules[18].form.pic" |
||||
alt=""> |
||||
<p class="text">{{ modules[18].form.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(18)">点击更换</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
|
||||
<ul class="tools"> |
||||
<li v-for="(item, i) in modules[19].list" |
||||
:key="i"> |
||||
<img :src="'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'" |
||||
alt="" |
||||
class="icon"> |
||||
{{ item.title }} |
||||
</li> |
||||
<div class="cover" |
||||
@click="toSet(19)">点击更换导航</div> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.iasf |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'iasf中文首页' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.iasf-banner { |
||||
height: 600px; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 120px; |
||||
h6, |
||||
.text { |
||||
padding: 20px 15px; |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0.29); |
||||
} |
||||
h6 { |
||||
margin-bottom: 30px; |
||||
font-size: 3rem; |
||||
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
||||
} |
||||
.text { |
||||
font-size: 1.1rem; |
||||
font-family: AppleSystemUIFont; |
||||
} |
||||
} |
||||
} |
||||
.block { |
||||
padding-top: 3.15rem; |
||||
.b-title { |
||||
font-size: 2.25rem; |
||||
} |
||||
.intro { |
||||
font-size: 1.35rem; |
||||
margin-bottom: 3.6rem; |
||||
} |
||||
} |
||||
.card { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
li { |
||||
position: relative; |
||||
width: 47%; |
||||
height: 366px; |
||||
transition: 0.3s; |
||||
overflow: hidden; |
||||
&:hover { |
||||
.project { |
||||
top: -100%; |
||||
} |
||||
.texts { |
||||
top: 0; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 0 1rem; |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0.3); |
||||
transition: 0.3s; |
||||
} |
||||
.name { |
||||
font-size: 2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
h6 { |
||||
margin: 1rem 0; |
||||
line-height: 2rem; |
||||
font-size: 1.6rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
@include mul-ellipsis(2); |
||||
} |
||||
.des { |
||||
font-size: 1.2rem; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
.news-title:after { |
||||
display: none; |
||||
} |
||||
.news-banner { |
||||
display: flex; |
||||
cursor: pointer; |
||||
.pic { |
||||
transition: 0.5s; |
||||
&:hover { |
||||
transform: scale(1.3); |
||||
} |
||||
} |
||||
.right { |
||||
position: relative; |
||||
width: 50%; |
||||
padding: 50px 50px 30px; |
||||
background: #1583ff; |
||||
color: #fff; |
||||
h6 { |
||||
font-size: 1.34rem; |
||||
} |
||||
.des { |
||||
font-size: 1.02rem; |
||||
} |
||||
.meta { |
||||
font-size: 1.04rem; |
||||
} |
||||
&:hover { |
||||
background: #465f85; |
||||
h6, |
||||
.des, |
||||
.meta { |
||||
color: #fff; |
||||
transform: translateY(15px); |
||||
} |
||||
} |
||||
} |
||||
h6 { |
||||
font-size: 1.3rem; |
||||
transition: 0.3s; |
||||
} |
||||
.des { |
||||
margin: 30px 0; |
||||
font-size: 0.9rem; |
||||
line-height: 24px; |
||||
transition: 0.3s; |
||||
} |
||||
.meta { |
||||
font-size: 0.8rem; |
||||
transition: 0.3s; |
||||
} |
||||
} |
||||
.news { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin: 10px 0; |
||||
li { |
||||
width: calc((100% - 18px) / 3); |
||||
margin-right: 9px; |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 220px; |
||||
} |
||||
.texts { |
||||
padding: 20px 24px; |
||||
background-color: #fff; |
||||
} |
||||
.meta { |
||||
font-size: 0.9rem; |
||||
color: #666; |
||||
} |
||||
h6 { |
||||
margin-top: 5px; |
||||
font-size: 1.1rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
color: #333; |
||||
@include mul-ellipsis(2); |
||||
} |
||||
} |
||||
.news-carousel { |
||||
display: flex; |
||||
li { |
||||
position: relative; |
||||
width: calc((100% - 18px) / 3); |
||||
height: 320px; |
||||
margin-right: 9px; |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 50px 30px; |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0.3); |
||||
} |
||||
h6 { |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.meta { |
||||
margin: 8px 0; |
||||
font-size: 0.9rem; |
||||
color: rgba(255, 255, 255, 0.86); |
||||
} |
||||
.des { |
||||
margin-bottom: 8px; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.date { |
||||
font-size: 0.8rem; |
||||
} |
||||
} |
||||
.people { |
||||
position: relative; |
||||
display: flex; |
||||
li { |
||||
width: 33.33%; |
||||
padding: 30px; |
||||
text-align: center; |
||||
border-right: 1px solid #ddd; |
||||
&:last-child { |
||||
border-right: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 260px; |
||||
height: 260px; |
||||
margin-bottom: 10px; |
||||
border-radius: 50%; |
||||
} |
||||
h6 { |
||||
font-size: 1.1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #333; |
||||
} |
||||
.job { |
||||
margin: 10px 0; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #333; |
||||
} |
||||
.hobby { |
||||
margin-bottom: 15px; |
||||
font-size: 1rem; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
line-height: 1.6; |
||||
color: #333; |
||||
} |
||||
} |
||||
.talent { |
||||
position: relative; |
||||
display: flex; |
||||
color: #fff; |
||||
background: #111c43; |
||||
border-radius: 0px 100px 0px 100px; |
||||
.left { |
||||
width: 50%; |
||||
padding: 120px 0 0 5%; |
||||
} |
||||
h6 { |
||||
font-size: 1.6rem; |
||||
} |
||||
.meta { |
||||
margin-top: 8px; |
||||
font-size: 0.9rem; |
||||
color: #fff; |
||||
} |
||||
.text { |
||||
margin: 20px 0; |
||||
font-size: 1rem; |
||||
line-height: 2; |
||||
} |
||||
.pic { |
||||
width: 50%; |
||||
min-height: 465px; |
||||
} |
||||
} |
||||
.about { |
||||
background: #0a7fec; |
||||
.inner { |
||||
position: relative; |
||||
height: 350px; |
||||
padding: 50px; |
||||
} |
||||
.left { |
||||
width: 48%; |
||||
} |
||||
h6 { |
||||
font-size: 1.8rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
color: #fff; |
||||
} |
||||
.text { |
||||
margin: 20px 0; |
||||
font-size: 1rem; |
||||
color: #fff; |
||||
} |
||||
.pic { |
||||
position: absolute; |
||||
top: -60px; |
||||
right: 0; |
||||
max-width: 48%; |
||||
height: 460px; |
||||
} |
||||
} |
||||
.entry { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 50px 10%; |
||||
background-color: #091733; |
||||
margin-bottom: 100px; |
||||
li { |
||||
position: relative; |
||||
display: inline-flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
} |
||||
img { |
||||
max-width: 100px; |
||||
} |
||||
.text { |
||||
margin-top: 15px; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #fff; |
||||
} |
||||
} |
||||
@media (max-width: 1200px) { |
||||
.block { |
||||
padding: 3.125rem 0; |
||||
.inner { |
||||
width: 95%; |
||||
margin: 0 auto; |
||||
.card { |
||||
flex-direction: column; |
||||
li { |
||||
margin-top: 1.25rem; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.tools { |
||||
z-index: 100; |
||||
position: fixed; |
||||
top: 430px; |
||||
right: 0; |
||||
li { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 160px; |
||||
margin-bottom: 1px; |
||||
font-size: 1rem; |
||||
color: #0084ff; |
||||
line-height: 56px; |
||||
background-color: rgba(19, 18, 19, 0.94); |
||||
cursor: pointer; |
||||
&.active { |
||||
width: 192px; |
||||
color: #fff; |
||||
background-color: rgba(1, 129, 247, 0.94); |
||||
} |
||||
} |
||||
.icon { |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,78 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/首页</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="500px" |
||||
: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"> |
||||
<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> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.index |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '首页' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
</style> |
||||
@ -1,418 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/产业应用</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block history gray"> |
||||
<div class="inner c-wrap"> |
||||
<h2 class="wow fadeInLeft" |
||||
style="margin-left: 57px" |
||||
v-html="modules[1].form.title"></h2> |
||||
<div class="texts wow fadeInDown" |
||||
data-wow-delay="0.5s"> |
||||
<div class="left"> |
||||
<h2>{{ modules[1].form.subTitle }}</h2> |
||||
<div class="des" |
||||
v-html="modules[1].form.des"></div> |
||||
</div> |
||||
<img class="bg" |
||||
width="562" |
||||
height="506" |
||||
:src="modules[1].form.pic" |
||||
alt=""> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block land"> |
||||
<div class="inner"> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="right"> |
||||
<h6 v-html="modules[2].form.title"></h6> |
||||
<div class="text" |
||||
v-html="modules[2].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更改图片、标题与概述</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title" |
||||
v-html="modules[3].form.title"></h2> |
||||
<p class="intro" |
||||
v-html="modules[3].form.des"></p> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="plan"> |
||||
<li> |
||||
<div class="left"> |
||||
<h6 v-html="modules[4].form.title"></h6> |
||||
<div class="text" |
||||
v-html="modules[4].form.des"></div> |
||||
<img src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
<img class="pic" |
||||
:src="modules[4].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更换标题、描述、链接与图片</div> |
||||
</li> |
||||
<li> |
||||
<div class="left"> |
||||
<h6 v-html="modules[5].form.title"></h6> |
||||
<div class="text" |
||||
v-html="modules[5].form.des"></div> |
||||
<img src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
<img class="pic" |
||||
:src="modules[5].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(5)">点击更换标题、描述、链接与图片</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner app-inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title wow fadeInUp" |
||||
v-html="modules[6].form.title"></h2> |
||||
<p class="intro wow fadeInUp" |
||||
data-wow-delay="0.5s">{{ modules[6].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(6)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="app"> |
||||
<li v-for="(item, i) in modules[7].list" |
||||
:key="i" |
||||
class="wow fadeInDown" |
||||
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"> |
||||
<img class="bg" |
||||
:src="require('@/assets/images/industrial/app' + (i + 1) + '.png')" |
||||
alt=""> |
||||
<img class="icon" |
||||
:src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')" |
||||
alt=""> |
||||
<p class="text">{{ item.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(7, i)">点击更标题与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block news-block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title" |
||||
v-html="modules[8].form.title"></h2> |
||||
<p class="intro">{{ modules[8].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(8)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="news"> |
||||
<li> |
||||
<img src="http://10.10.11.7/images/home/3.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<span class="meta">2022-07-24 | 综合新闻</span> |
||||
<h6>X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</h6> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img src="http://10.10.11.7/images/home/3.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<span class="meta">2022-07-24 | 综合新闻</span> |
||||
<h6>X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</h6> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img src="http://10.10.11.7/images/home/3.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<span class="meta">2022-07-24 | 综合新闻</span> |
||||
<h6>X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</h6> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img src="http://10.10.11.7/images/home/3.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<span class="meta">2022-07-24 | 综合新闻</span> |
||||
<h6>X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</h6> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img src="http://10.10.11.7/images/home/3.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<span class="meta">2022-07-24 | 综合新闻</span> |
||||
<h6>X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</h6> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img src="http://10.10.11.7/images/home/3.png" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<span class="meta">2022-07-24 | 综合新闻</span> |
||||
<h6>X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</h6> |
||||
</div> |
||||
</li> |
||||
<div class="cover" |
||||
@click="toSet(9)">关联栏目</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.industrial |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '产业应用' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.history { |
||||
h2 { |
||||
font-size: 1.8rem; |
||||
color: #333; |
||||
} |
||||
.texts { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 82px 57px 30px; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 100px 0px 0px 0px; |
||||
transition: 0.3s; |
||||
&:hover { |
||||
transform: scale(1.05); |
||||
} |
||||
} |
||||
.left { |
||||
width: 695px; |
||||
} |
||||
.des { |
||||
margin: 20px 0; |
||||
font-size: 1.2rem; |
||||
color: #181818; |
||||
line-height: 31px; |
||||
} |
||||
.bg { |
||||
margin: -122px 0 0 0; |
||||
} |
||||
} |
||||
.land { |
||||
.inner { |
||||
position: relative; |
||||
display: flex; |
||||
} |
||||
.pic { |
||||
width: 50%; |
||||
height: 450px; |
||||
} |
||||
.right { |
||||
width: 50%; |
||||
} |
||||
h6 { |
||||
margin-left: 50px; |
||||
font-size: 1.3rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
color: #333; |
||||
@include ellipsis(); |
||||
} |
||||
.text { |
||||
height: 405px; |
||||
padding: 50px; |
||||
margin-top: 1rem; |
||||
background: rgba(242, 246, 248, 0.45); |
||||
border-radius: 0px 100px 0px 0px; |
||||
} |
||||
} |
||||
.plan { |
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
height: 500px; |
||||
margin-bottom: 60px; |
||||
color: #333; |
||||
background-color: #fff; |
||||
border-radius: 100px 0px 0px 0px; |
||||
&:nth-child(even) { |
||||
flex-direction: row-reverse; |
||||
.pic { |
||||
margin: -20px 0 0 -20px; |
||||
border-radius: 0 100px 0 0; |
||||
} |
||||
} |
||||
.left { |
||||
width: 50%; |
||||
padding: 50px; |
||||
} |
||||
h6 { |
||||
font-size: 1.4rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.text { |
||||
margin: 1rem 0; |
||||
font-size: 1rem; |
||||
line-height: 1.6; |
||||
} |
||||
.pic { |
||||
width: 48%; |
||||
height: 500px; |
||||
margin: -20px -20px 0 0; |
||||
border-radius: 100px 0 0 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.app-inner { |
||||
width: 1558px; |
||||
} |
||||
.app { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 368px; |
||||
height: 252px; |
||||
margin: 0 14px 14px 0; |
||||
transition: 0.3s; |
||||
&:hover { |
||||
transform: scale(1.05); |
||||
.icon { |
||||
transform: rotateY(180deg); |
||||
} |
||||
} |
||||
&:nth-child(4n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.bg { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.icon { |
||||
position: relative; |
||||
} |
||||
.text { |
||||
position: relative; |
||||
margin-top: 20px; |
||||
font-size: 32px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.news { |
||||
position: relative; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
width: calc((100% - 34px) / 3); |
||||
margin: 0 17px 20px 0; |
||||
background-color: #fff; |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 220px; |
||||
} |
||||
.texts { |
||||
padding: 20px 24px; |
||||
background-color: #fff; |
||||
} |
||||
h6 { |
||||
margin-top: 8px; |
||||
font-size: 1rem; |
||||
color: #333; |
||||
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21); |
||||
} |
||||
.meta { |
||||
font-size: 0.9rem; |
||||
color: #666; |
||||
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21); |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,254 +0,0 @@ |
||||
<template> |
||||
<!-- 全球先进光源 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/全球先进光源</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner c-wrap"> |
||||
<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" |
||||
width="100%" |
||||
height="536" |
||||
:src="modules[1].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换标题、描述、图片与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block sources"> |
||||
<div class="inner c-wrap"> |
||||
<ul class="tabs wow fadeInLeft"> |
||||
<li v-for="(item, i) in tabs" |
||||
:class="{active: item.id == active}" |
||||
:key="i" |
||||
@click="tabChange(item.id)">{{ item.name }}</li> |
||||
</ul> |
||||
<div v-if="!active" |
||||
class="c-wrap"> |
||||
<table class="table"> |
||||
<thead> |
||||
<tr> |
||||
<th>序号</th> |
||||
<th>光源名称</th> |
||||
<th>国家</th> |
||||
<th>电子束能量（GeV）</th> |
||||
<th>储存环周长(m)</th> |
||||
<th>实验站数量</th> |
||||
<th>代际</th> |
||||
<th>建成/改造时间</th> |
||||
<th>发射度(nm.rad)</th> |
||||
<th>状态</th> |
||||
</tr> |
||||
</thead> |
||||
<template v-if="modules[2].list.length"> |
||||
<tr v-for="(item, i) in modules[2].list" |
||||
:key="i"> |
||||
<td>{{ item.name }}</td> |
||||
<td>{{ item.country }}</td> |
||||
<td>{{ item.gev }}</td> |
||||
<td>{{ item.storage }}</td> |
||||
<td>{{ item.stations }}</td> |
||||
<td>{{ item.intergenerational }}</td> |
||||
<td>{{ item.time }}</td> |
||||
<td>{{ item.name }}</td> |
||||
<td>{{ item.emittance }}</td> |
||||
<td>{{ item.status }}</td> |
||||
</tr> |
||||
</template> |
||||
<tr v-else> |
||||
<td class="none">暂无数据</td> |
||||
</tr> |
||||
</table> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换表格</div> |
||||
</div> |
||||
<div v-else |
||||
class="c-wrap"> |
||||
<table class="table"> |
||||
<thead> |
||||
<tr> |
||||
<th>光源名称</th> |
||||
<th>国家</th> |
||||
<th>地点</th> |
||||
<th>加速器技术</th> |
||||
<th>能量/GeV</th> |
||||
<th>波长范围/nm</th> |
||||
<th>重复频率/Hz Repetition rate</th> |
||||
<th>设施长度/m Overall length</th> |
||||
<th>线站数量</th> |
||||
<th>状态</th> |
||||
<th>出光时间</th> |
||||
</tr> |
||||
</thead> |
||||
<template v-if="modules[3].list.length"> |
||||
<tr v-for="(item, i) in modules[3].list" |
||||
:key="i"> |
||||
<td>{{ item.name }}</td> |
||||
<td>{{ item.country }}</td> |
||||
<td>{{ item.address }}</td> |
||||
<td>{{ item.accelerator }}</td> |
||||
<td>{{ item.gev }}</td> |
||||
<td>{{ item.wavelength }}</td> |
||||
<td>{{ item.repetitive }}</td> |
||||
<td>{{ item.facility }}</td> |
||||
<td>{{ item.stations }}</td> |
||||
<td>{{ item.status }}</td> |
||||
<td>{{ item.time }}</td> |
||||
</tr> |
||||
</template> |
||||
<tr v-else> |
||||
<td class="none" |
||||
colspan="11">暂无数据</td> |
||||
</tr> |
||||
</table> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换表格</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.lightSources, |
||||
active: 0, |
||||
tabs: [ |
||||
{ |
||||
id: 0, |
||||
name: '同步辐射光源' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '自由电子激光' |
||||
}, |
||||
] |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '全球先进光源' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange (i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@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); |
||||
} |
||||
} |
||||
.sources { |
||||
background-color: #fff; |
||||
} |
||||
.tabs { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
.table { |
||||
width: 100%; |
||||
margin-top: 20px; |
||||
border-collapse: collapse; |
||||
th, |
||||
td { |
||||
padding: 10px 10px; |
||||
font-size: 0.9rem; |
||||
text-align: left; |
||||
} |
||||
.none { |
||||
text-align: center; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,253 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/关于IASF-使命愿景价值观</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="item"> |
||||
<img :src="modules[1].form.pic" |
||||
alt="" /> |
||||
<div class="texts"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<div class="text" |
||||
v-html="modules[1].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
style="left: -35px" |
||||
@click="toSet(1)">点击更改标题概述与链接</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img :src="modules[2].form.pic" |
||||
alt="" /> |
||||
<div class="texts rightText"> |
||||
<h6 v-html="modules[2].form.title"></h6> |
||||
<div class="text" |
||||
v-html="modules[2].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
style="right: -35px" |
||||
@click="toSet(2)">点击更改标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block mind gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h6 class="m-title" |
||||
v-html="modules[3].form.title"></h6> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换标题</div> |
||||
</div> |
||||
<ul class="list"> |
||||
<template v-for="(item, i) in modules[4].list"> |
||||
<li v-if="item.isEnable" |
||||
:key="i"> |
||||
<img :src="item.pic" |
||||
alt="" |
||||
class="pic"> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<div class="des" |
||||
v-html="item.des"></div> |
||||
</div> |
||||
</li> |
||||
</template> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更换图片、标题、概述与链接</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.mission |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '关于IASF-使命愿景价值观' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.inner { |
||||
width: 1200px; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
margin-bottom: 58px; |
||||
img { |
||||
width: 100%; |
||||
height: 400px; |
||||
} |
||||
&:nth-child(2) .texts { |
||||
left: auto; |
||||
right: -36px; |
||||
color: #fff; |
||||
background: rgba(40, 179, 255, 0.34); |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 79px; |
||||
left: -34px; |
||||
width: 532px; |
||||
padding: 70px 38px; |
||||
color: #333; |
||||
background: rgba(255, 241, 231, 0.84); |
||||
transition: 0.5s; |
||||
} |
||||
h6 { |
||||
margin-bottom: 14px; |
||||
font-size: 2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
} |
||||
.des { |
||||
font-size: 1rem; |
||||
} |
||||
} |
||||
.mind { |
||||
.m-title { |
||||
margin-bottom: 30px; |
||||
font-size: 2.2rem; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
.list { |
||||
position: relative; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
li { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
width: calc((100% - 22px) / 2); |
||||
margin: 0 22px 22px 0; |
||||
background-color: #fff; |
||||
&:nth-child(even) { |
||||
margin-right: 0; |
||||
} |
||||
.pic { |
||||
width: 250px; |
||||
height: 230px; |
||||
} |
||||
.texts { |
||||
width: calc(100% - 250px); |
||||
padding: 0 20px; |
||||
} |
||||
h6 { |
||||
margin-bottom: 20px; |
||||
font-size: 1.5rem; |
||||
color: #272727; |
||||
@include ellipsis(); |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
color: #666; |
||||
line-height: 1.5; |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 1200px) { |
||||
.inner { |
||||
width: 98%; |
||||
} |
||||
.item { |
||||
img { |
||||
margin-left: 30px; |
||||
} |
||||
.rightText { |
||||
right: 12px !important; |
||||
} |
||||
.texts { |
||||
width: 85%; |
||||
box-sizing: border-box; |
||||
left: 12px; |
||||
.des { |
||||
-webkit-line-clamp: inherit; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 980px) { |
||||
.mind { |
||||
.list { |
||||
flex-direction: column; |
||||
} |
||||
li { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 480px) { |
||||
.mind { |
||||
li { |
||||
.pic { |
||||
width: 150px; |
||||
height: 130px; |
||||
} |
||||
.texts { |
||||
width: calc(100% - 150px); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,539 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/NEWS&EVENTS</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<img width="100%" height="100%" :src="item.pic" alt=""> |
||||
</el-carousel-item> |
||||
</template> |
||||
</el-carousel> |
||||
<div class="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs"> |
||||
<li :class="{active: item.id == active}" v-for="(item, i) in modules[1].list" :key="i"> |
||||
{{ item.columnName }} |
||||
<div class="cover" @click="toSet(1, i)">关联栏目</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="banner"> |
||||
<img width="100%" height="480" src="http://10.10.11.7/images/about/5.png" alt=""> |
||||
<div class="right"> |
||||
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6> |
||||
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div> |
||||
<p class="meta">2022-07-24 | Research</p> |
||||
</div> |
||||
</div> |
||||
<ul class="card"> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-09-09 | Research</p> |
||||
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> |
||||
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-09-09 | Research</p> |
||||
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> |
||||
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/11.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="meta">2022-09-09 | Research</p> |
||||
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> |
||||
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="more">More news ></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner lg"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[2].form.title }}</h2> |
||||
<p class="intro">{{ modules[2].form.des }}</p> |
||||
<div class="cover" @click="toSet(2)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="shop-shows"> |
||||
<div class="left"> |
||||
<img width="100%" height="400" src="http://10.10.11.7/images/about/5.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>2022 New Year Messag President Sun Dongbai….</h6> |
||||
<div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<ul class="show-card"> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="des">Comprises the installation and nanostructuri</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> |
||||
<div class="des">Prof. Stephan V. Roth's research</div> |
||||
</li> |
||||
</ul> |
||||
<ul class="card-list"> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>Hold doctorates or the highest degree in their field</h6> |
||||
<div class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.…</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>This 2019 image depicted a Centers for Disease</h6> |
||||
<div class="des">laboratory technician, dressed in personal protective equipment (PPE), in thelaboratory technician, dressed in personal in the…</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/11.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>Browse premium related images on iStock</h6> |
||||
<div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="cover" @click="toSet(3)">关联栏目</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block conference"> |
||||
<div class="inner lg"> |
||||
<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> |
||||
<div class="shows"> |
||||
<div class="left"> |
||||
<img width="100%" height="558" src="http://10.10.11.7/images/about/5.png" alt=""> |
||||
<div class="texts"> |
||||
<div class="meta"> |
||||
<p class="date">09</p> |
||||
<p class="year">2022-03</p> |
||||
</div> |
||||
<div> |
||||
<h6>Browse premium related images on iStock</h6> |
||||
<div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<ul class="card-list"> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>Professional technical Free electron laser device</h6> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Jiahang Shao |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Time: 2022.8.13 14:30 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Address: Big conference room on the fourth floor of headquarters |
||||
</p> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>Professional technical Free electron laser device</h6> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Jiahang Shao |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Time: 2022.8.13 14:30 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Address: Big conference room on the fourth floor of headquarters |
||||
</p> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>Professional technical Free electron laser device</h6> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Jiahang Shao |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Time: 2022.8.13 14:30 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Address: Big conference room on the fourth floor of headquarters |
||||
</p> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>Professional technical Free electron laser device</h6> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Jiahang Shao |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Time: 2022.8.13 14:30 |
||||
</p> |
||||
<p class="text"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
Address: Big conference room on the fourth floor of headquarters |
||||
</p> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="cover" @click="toSet(5)">关联栏目</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.news, |
||||
tabs: [ |
||||
{ |
||||
id: 1, |
||||
name: 'General news' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: 'Research news' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: 'Journal covers' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: 'General news' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: 'Research news' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: 'Journal covers' |
||||
} |
||||
], |
||||
active: '' |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'NEWS&EVENTS' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.tabs { |
||||
display: flex; |
||||
justify-content: center; |
||||
box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26); |
||||
li { |
||||
position: relative; |
||||
min-width: 100px; |
||||
padding: 25px 19px; |
||||
margin: 0 10px; |
||||
font-size: 22px; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
.banner { |
||||
display: flex; |
||||
height: auto; |
||||
.pic { |
||||
width: 700px; |
||||
height: 380px; |
||||
} |
||||
.right { |
||||
padding: 50px 50px 30px; |
||||
background: #1583FF; |
||||
color: #fff; |
||||
} |
||||
h6 { |
||||
font-size: 24px; |
||||
} |
||||
.des { |
||||
margin: 30px 0; |
||||
font-size: 16px; |
||||
line-height: 24px; |
||||
} |
||||
.meta { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.card { |
||||
display: flex; |
||||
margin-top: 40px; |
||||
li { |
||||
width: 448px; |
||||
margin-right: 28px; |
||||
box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21); |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 240px; |
||||
} |
||||
.texts { |
||||
padding: 40px 30px; |
||||
} |
||||
.meta { |
||||
font-size: 16px; |
||||
color: #666; |
||||
} |
||||
.des { |
||||
margin: 10px 0; |
||||
font-size: 20px; |
||||
color: #333; |
||||
line-height: 28px; |
||||
} |
||||
.arrow { |
||||
width: 36px; |
||||
} |
||||
} |
||||
.more { |
||||
width: 374px; |
||||
margin: 58px auto 0; |
||||
line-height: 64px; |
||||
font-size: 30px; |
||||
text-align: center; |
||||
color: #1583FF; |
||||
border-radius: 35px; |
||||
border: 2px solid #2B6CEF; |
||||
cursor: pointer; |
||||
} |
||||
.shop-shows { |
||||
position: relative; |
||||
display: flex; |
||||
.left { |
||||
width: 660px; |
||||
margin-right: 20px; |
||||
background-color: #fff; |
||||
.texts { |
||||
padding: 40px 30px; |
||||
} |
||||
h6 { |
||||
font-size: 24px; |
||||
color: #272727; |
||||
} |
||||
.des { |
||||
margin-top: 10px; |
||||
font-size: 16px; |
||||
color: #666; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
.right { |
||||
width: 824px; |
||||
} |
||||
.show-card { |
||||
display: flex; |
||||
margin-bottom: 20px; |
||||
li { |
||||
position: relative; |
||||
&:first-child { |
||||
margin-right: 22px; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 401px; |
||||
height: 197px; |
||||
} |
||||
.des { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
line-height: 48px; |
||||
text-align: center; |
||||
background: rgba(0,0,0,0.49); |
||||
box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08); |
||||
} |
||||
} |
||||
.card-list { |
||||
padding: 34px 26px; |
||||
background-color: #fff; |
||||
li { |
||||
display: inline-flex; |
||||
padding-right: 124px; |
||||
margin-bottom: 38px; |
||||
background: url(../../../assets/images/arrow.png) (right 20px)/(23px 23px) no-repeat; |
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 116px; |
||||
height: 85px; |
||||
margin-right: 28px; |
||||
} |
||||
h6 { |
||||
font-size: 20px; |
||||
color: #272727; |
||||
} |
||||
.des { |
||||
margin-top: 15px; |
||||
font-size: 14px; |
||||
color: #666; |
||||
line-height: 24px; |
||||
} |
||||
} |
||||
} |
||||
.conference { |
||||
background: #072947; |
||||
.b-title, .intro { |
||||
color: #fff; |
||||
} |
||||
.shows { |
||||
position: relative; |
||||
display: flex; |
||||
} |
||||
.left { |
||||
width: 688px; |
||||
margin-right: 20px; |
||||
background-color: #fff; |
||||
.texts { |
||||
display: flex; |
||||
padding: 40px 30px; |
||||
} |
||||
.meta { |
||||
padding: 10px 23px 10px 0; |
||||
margin-right: 32px; |
||||
text-align: center; |
||||
border-right: 1px solid #ddd; |
||||
} |
||||
.date { |
||||
font-size: 45px; |
||||
font-family: DINAlternate-Bold, DINAlternate; |
||||
font-weight: bold; |
||||
color: #1F1F1F; |
||||
line-height: 52px; |
||||
} |
||||
.year { |
||||
font-size: 16px; |
||||
white-space: nowrap; |
||||
color: #666; |
||||
} |
||||
h6 { |
||||
font-size: 20px; |
||||
color: #272727; |
||||
} |
||||
.des { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: #666; |
||||
line-height: 24px; |
||||
} |
||||
} |
||||
.card-list { |
||||
width: 784px; |
||||
li { |
||||
display: flex; |
||||
padding: 24px; |
||||
margin-bottom: 13px; |
||||
background-color: #fff; |
||||
} |
||||
.pic { |
||||
width: 188px; |
||||
height: 130px; |
||||
margin-right: 28px; |
||||
} |
||||
h6 { |
||||
margin-bottom: 10px; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 10px 0; |
||||
} |
||||
.icon { |
||||
width: 15px; |
||||
margin-right: 12px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,127 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/NEWS&EVENTS-PRESS ROOM</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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 c-wrap"> |
||||
<ul class="list"> |
||||
<template v-for="(item, i) in modules[1].list"> |
||||
<li v-if="item.isEnable" :key="i"> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="sub">{{ item.subTitle }}</p> |
||||
<div class="des">{{ item.des }}</div> |
||||
<img src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
</template> |
||||
</ul> |
||||
<div class="cover" style="width: calc(100% + 60px);" @click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.newsPress |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'NEWS&EVENTS-PRESS ROOM' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.list { |
||||
li { |
||||
position: relative; |
||||
&:nth-child(even) { |
||||
text-align: right; |
||||
.texts { |
||||
left: 0; |
||||
text-align: left; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 650px; |
||||
height: 730px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 120px; |
||||
left: 610px; |
||||
width: 850px; |
||||
height: 440px; |
||||
padding: 60px 30px 30px 100px; |
||||
background: rgba(247, 247, 247, .72); |
||||
} |
||||
h6 { |
||||
font-size: 40px; |
||||
color: #3C3C3C; |
||||
} |
||||
.sub { |
||||
margin: 20px 0; |
||||
font-size: 24px; |
||||
color: #1C1C1C; |
||||
line-height: 33px; |
||||
} |
||||
.des { |
||||
margin-bottom: 20px; |
||||
font-size: 20px; |
||||
color: #3C3C3C; |
||||
line-height: 32px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,127 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/NEWS&EVENTS-PROCUREMENT</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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 c-wrap"> |
||||
<ul class="list"> |
||||
<template v-for="(item, i) in modules[1].list"> |
||||
<li v-if="item.isEnable" :key="i"> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="sub">{{ item.subTitle }}</p> |
||||
<div class="des">{{ item.des }}</div> |
||||
<img src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
</template> |
||||
</ul> |
||||
<div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.newsProcurement |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'NEWS&EVENTS-PROCUREMENT' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.list { |
||||
li { |
||||
position: relative; |
||||
&:nth-child(even) { |
||||
text-align: right; |
||||
.texts { |
||||
left: 0; |
||||
text-align: left; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 650px; |
||||
height: 730px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 120px; |
||||
left: 610px; |
||||
width: 850px; |
||||
height: 440px; |
||||
padding: 60px 30px 30px 100px; |
||||
background: rgba(247, 247, 247, .72); |
||||
} |
||||
h6 { |
||||
font-size: 40px; |
||||
color: #3C3C3C; |
||||
} |
||||
.sub { |
||||
margin: 20px 0; |
||||
font-size: 24px; |
||||
color: #1C1C1C; |
||||
line-height: 33px; |
||||
} |
||||
.des { |
||||
margin-bottom: 20px; |
||||
font-size: 20px; |
||||
color: #3C3C3C; |
||||
line-height: 32px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,118 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/关于IASF-组织架构</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="org c-wrap"> |
||||
<div class="left"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<p class="text" v-html="modules[1].form.des"></p> |
||||
</div> |
||||
<img class="pic" src="http://10.10.11.7/images/overviewSetup/1.png" alt=""> |
||||
<div class="cover" style="min-height: 300px;" @click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="lg-bg"> |
||||
<img width="100%" :src="modules[2].form.pic" alt=""> |
||||
<div class="cover" @click="toSet(2)">点击更换图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.org |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '关于IASF-组织架构' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.tab-content { |
||||
padding: 77px 0; |
||||
} |
||||
.org { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 1294px; |
||||
padding: 9px 86px 29px 116px; |
||||
margin: 0 auto 50px; |
||||
background: #FCFCFC; |
||||
border-radius: 160px; |
||||
.left { |
||||
width: 705px; |
||||
} |
||||
h6 { |
||||
font-size: 1.4rem; |
||||
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
||||
font-weight: bold; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
margin-top: 10px; |
||||
font-size: 1rem; |
||||
color: #020202; |
||||
line-height: 2rem; |
||||
} |
||||
.pic { |
||||
width: 320px; |
||||
height: 282px; |
||||
} |
||||
} |
||||
.lg-bg { |
||||
position: relative; |
||||
width: 85%; |
||||
margin: 0 auto; |
||||
} |
||||
</style> |
||||
@ -1,436 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/关于IASF-研究院概况</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block history gray"> |
||||
<div class="inner c-wrap"> |
||||
<div class="texts wow fadeInDown" |
||||
data-wow-delay="0.5s"> |
||||
<div class="left"> |
||||
<h2 v-html="modules[1].form.title"></h2> |
||||
<div class="line"></div> |
||||
<div class="des" |
||||
v-html="modules[1].form.des"></div> |
||||
</div> |
||||
<img class="bg" |
||||
width="562" |
||||
height="506" |
||||
:src="modules[1].form.pic" |
||||
alt=""> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="core"> |
||||
<img :src="modules[2].form.pic" |
||||
alt="" |
||||
class="pic"> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="line"></div> |
||||
<div class="text" |
||||
v-html="modules[2].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换图片、标题、描述与链接</div> |
||||
</div> |
||||
<div class="core"> |
||||
<img :src="modules[3].form.pic" |
||||
alt="" |
||||
class="pic"> |
||||
<div class="texts"> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<div class="line"></div> |
||||
<div class="text" |
||||
v-html="modules[3].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换图片、标题、描述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block fac"> |
||||
<div class="inner"> |
||||
<div class="event"> |
||||
<h6 v-html="modules[4].form.title"></h6> |
||||
<p class="en">{{ modules[4].form.subTitle }}</p> |
||||
<div class="text" |
||||
v-html="modules[4].form.des"></div> |
||||
<img src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更换标题、小标题、描述与链接</div> |
||||
</div> |
||||
<ul class="l-card"> |
||||
<li> |
||||
<img :src="modules[5].form.pic" |
||||
alt="" |
||||
class="pic" /> |
||||
<div class="texts"> |
||||
<h6>{{ modules[5].form.title }}</h6> |
||||
<div class="text" |
||||
v-html="modules[5].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(5)">点击更换图片、标题、描述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img :src="modules[6].form.pic" |
||||
alt="" |
||||
class="pic" /> |
||||
<div class="texts"> |
||||
<h6>{{ modules[6].form.title }}</h6> |
||||
<div class="text" |
||||
v-html="modules[6].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(6)">点击更换图片、标题、描述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img :src="modules[7].form.pic" |
||||
alt="" |
||||
class="pic" /> |
||||
<div class="texts"> |
||||
<h6>{{ modules[7].form.title }}</h6> |
||||
<div class="text" |
||||
v-html="modules[7].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(7)">点击更换图片、标题、描述与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block scan gray"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title" |
||||
v-html="modules[8].form.title"></h2> |
||||
<p class="intro">{{ modules[8].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(8)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="scan-inner"> |
||||
<div class="left"> |
||||
<div class="c-wrap"> |
||||
<div class="line" |
||||
v-for="(item, i) in modules[9].list" |
||||
:key="i">{{ item.title }}</div> |
||||
<div class="cover" |
||||
@click="toSet(9)">点击更换标题</div> |
||||
</div> |
||||
<ul class="total"> |
||||
<li> |
||||
<p class="num">{{ modules[10].form.title }}</p> |
||||
<p class="text">{{ modules[10].form.des }}</p> |
||||
<div class="cover" |
||||
style="width: 100px;" |
||||
@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" |
||||
style="width: 100px;" |
||||
@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" |
||||
style="width: 100px;" |
||||
@click="toSet(12)">标题描述</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<img :src="modules[13].form.pic" |
||||
alt="" |
||||
class="pic" /> |
||||
<div class="cover" |
||||
@click="toSet(13)">点击更换图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.overview |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '关于IASF-研究院概况' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.history { |
||||
h2 { |
||||
font-size: 1rem; |
||||
color: #333; |
||||
} |
||||
.texts { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 5.125rem 3.5625rem 1.875rem; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 6.25rem 0px 0px 0px; |
||||
transition: 0.3s; |
||||
&:hover { |
||||
transform: scale(1.05); |
||||
} |
||||
} |
||||
.left { |
||||
width: 43.4375rem; |
||||
} |
||||
.line { |
||||
width: 53px; |
||||
height: 3px; |
||||
margin: 18px 0; |
||||
background: #0280f1; |
||||
} |
||||
.des { |
||||
font-size: 0.9rem; |
||||
color: #181818; |
||||
line-height: 31px; |
||||
-webkit-line-clamp: 6; |
||||
} |
||||
.bg { |
||||
margin: -122px 0 0 0; |
||||
border-top-right-radius: 40px; |
||||
} |
||||
} |
||||
.core { |
||||
position: relative; |
||||
height: 370px; |
||||
margin-bottom: 40px; |
||||
&:last-child { |
||||
.texts { |
||||
left: 40px; |
||||
right: auto; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 80px; |
||||
right: 40px; |
||||
width: 500px; |
||||
color: #fff; |
||||
} |
||||
h6 { |
||||
font-size: 1.4rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.line { |
||||
width: 136px; |
||||
height: 3px; |
||||
margin: 20px 0; |
||||
background: #ffffff; |
||||
opacity: 0.56; |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
line-height: 1.6; |
||||
} |
||||
} |
||||
.fac { |
||||
.event { |
||||
position: relative; |
||||
padding: 70px 250px 70px 60px; |
||||
background: url(http://10.10.11.7/images/overview/16.png) 0 0/100% no-repeat; |
||||
h6 { |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #333; |
||||
} |
||||
.en { |
||||
margin-top: -10px; |
||||
font-size: 2rem; |
||||
font-family: AppleSystemUIFont; |
||||
color: #e4e4e4; |
||||
} |
||||
.text { |
||||
margin: 15px 0; |
||||
font-size: 1rem; |
||||
color: #333; |
||||
} |
||||
} |
||||
.l-card { |
||||
display: flex; |
||||
margin-top: 20px; |
||||
li { |
||||
position: relative; |
||||
width: calc((100% - 40px) / 3); |
||||
height: 380px; |
||||
margin-right: 20px; |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 140px 30px 0; |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
} |
||||
h6 { |
||||
margin-bottom: 15px; |
||||
font-size: 2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
line-height: 2; |
||||
@include mul-ellipsis(4); |
||||
} |
||||
} |
||||
} |
||||
.scan { |
||||
.scan-inner { |
||||
display: flex; |
||||
padding-left: 20%; |
||||
} |
||||
.left { |
||||
width: 30%; |
||||
margin-right: 80px; |
||||
} |
||||
.line { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 30px; |
||||
&:before { |
||||
content: ''; |
||||
min-width: 50px; |
||||
width: 50px; |
||||
height: 50px; |
||||
margin-right: 20px; |
||||
background: url(http://10.10.11.7/images/overview/7.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
&:nth-child(2):before { |
||||
background-image: url(http://10.10.11.7/images/overview/8.png); |
||||
} |
||||
&:nth-child(3):before { |
||||
background-image: url(http://10.10.11.7/images/overview/9.png); |
||||
} |
||||
&:nth-child(4):before { |
||||
background-image: url(http://10.10.11.7/images/overview/10.png); |
||||
} |
||||
&:nth-child(5):before { |
||||
background-image: url(http://10.10.11.7/images/overview/11.png); |
||||
} |
||||
&:nth-child(6):before { |
||||
background-image: url(http://10.10.11.7/images/overview/12.png); |
||||
} |
||||
&:nth-child(7):before { |
||||
background-image: url(http://10.10.11.7/images/overview/13.png); |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #333; |
||||
line-height: 2; |
||||
@include mul-ellipsis(2); |
||||
} |
||||
} |
||||
.total { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 50px; |
||||
li { |
||||
position: relative; |
||||
} |
||||
.num { |
||||
margin-bottom: 10px; |
||||
font-size: 2rem; |
||||
font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN; |
||||
font-weight: 800; |
||||
color: #1583ff; |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
color: #333; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 70%; |
||||
height: 700px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,257 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/SFEL-概况-发展历程</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" |
||||
:key="i" |
||||
@click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="block history"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="wow fadeInLeft" |
||||
v-html="modules[1].form.title"></h2> |
||||
<p class="en">{{ modules[1].form.des }}</p> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
|
||||
<div class="c-wrap"> |
||||
<div v-if="modules[2].list.length" |
||||
class="event"> |
||||
<ul class="time"> |
||||
<template v-for="(item, i) in modules[2].list"> |
||||
<li v-if="item.isEnable" |
||||
:key="i" |
||||
:class="{active: curYear == i}">{{ item.title }}</li> |
||||
</template> |
||||
</ul> |
||||
<div class="right"> |
||||
<h6 class="year">{{ modules[2].list[curYear].title }}</h6> |
||||
<ul class="list"> |
||||
<template v-for="(e, j) in modules[2].list[curYear].list"> |
||||
<li v-if="e.isEnable" |
||||
:key="j"> |
||||
<div class="texts"> |
||||
<p class="date">{{ e.title }}</p> |
||||
<p class="text">{{ e.des }}</p> |
||||
</div> |
||||
<img v-if="e.pic" |
||||
:src="e.pic" |
||||
alt="" |
||||
class="pic"> |
||||
</li> |
||||
</template> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="cover" |
||||
style="min-height: 300px;" |
||||
@click="toSet(2)">点击配置历程</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.overviewDevHistory, |
||||
active: 0, |
||||
tabs: ['发展历程'], |
||||
curYear: 0 |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-发展历程' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange (i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.wrap { |
||||
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat, |
||||
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat; |
||||
background-color: #fff; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
.history { |
||||
h2 { |
||||
position: relative; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #1c1c1c; |
||||
} |
||||
.en { |
||||
margin: -15px 0 40px; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #e3e3e3; |
||||
} |
||||
} |
||||
.event { |
||||
display: flex; |
||||
justify-content: center; |
||||
.time { |
||||
width: 200px; |
||||
padding-right: 10px; |
||||
margin-right: 20px; |
||||
border-right: 1px solid #ddd; |
||||
li { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
width: 190px; |
||||
padding-right: 45px; |
||||
line-height: 60px; |
||||
font-size: 1.4rem; |
||||
font-weight: 600; |
||||
font-family: SFProDisplay-Semibold, SFProDisplay; |
||||
color: #666; |
||||
box-shadow: inset 0px -1px 0px 0px #dddddd; |
||||
cursor: pointer; |
||||
&.active { |
||||
font-weight: 800; |
||||
color: #1a81f4; |
||||
background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%); |
||||
&:before { |
||||
content: ''; |
||||
width: 18px; |
||||
height: 18px; |
||||
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat; |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.right { |
||||
width: 900px; |
||||
} |
||||
.year { |
||||
margin: 0 0 20px 20px; |
||||
font-size: 3.8rem; |
||||
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; |
||||
font-weight: 800; |
||||
color: #1a81f4; |
||||
} |
||||
.list { |
||||
border-top: 1px solid #ddd; |
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 30px; |
||||
border-bottom: 1px solid #ddd; |
||||
} |
||||
.texts { |
||||
width: 500px; |
||||
} |
||||
.date { |
||||
margin-bottom: 15px; |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
font-size: 1.1rem; |
||||
color: #333; |
||||
@include mul-ellipsis(3); |
||||
&:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
width: 7px; |
||||
height: 7px; |
||||
margin: 0 10px; |
||||
background-color: #666; |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
.pic { |
||||
width: 350px; |
||||
height: 195px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,217 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/SFEL-概况-S³FEL介绍</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" |
||||
:key="i" |
||||
@click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="intro"> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/overviewIntro/1.png" |
||||
alt=""> |
||||
<div class="right c-wrap"> |
||||
<div class="relative"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<img class="title-bg" |
||||
src="http://10.10.11.7/images/overviewIntro/2.png" |
||||
alt=""> |
||||
</div> |
||||
|
||||
<div class="text" |
||||
v-html="modules[1].form.des"></div> |
||||
<div class="cover" |
||||
style="min-height: 300px;" |
||||
@click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
</div> |
||||
<div class="intro-bg"> |
||||
<div class="mask"></div> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="des" |
||||
v-html="modules[2].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换标题与描述</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.overviewIntro, |
||||
active: 0, |
||||
tabs: ['S³FEL介绍'] |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-介绍' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange (i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.wrap { |
||||
background: url(../../../assets/images/survey2.png) (bottom right) / auto no-repeat; |
||||
} |
||||
.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 { |
||||
padding-top: 150px; |
||||
.intro { |
||||
display: flex; |
||||
margin-bottom: 110px; |
||||
.pic { |
||||
width: 600px; |
||||
margin-right: 50px; |
||||
} |
||||
.right { |
||||
width: 600px; |
||||
} |
||||
h6 { |
||||
position: relative; |
||||
font-size: 1.2rem; |
||||
color: #333; |
||||
} |
||||
.title-bg { |
||||
position: absolute; |
||||
top: -40px; |
||||
left: -20px; |
||||
} |
||||
.text { |
||||
margin-top: 40px; |
||||
font-size: 1rem; |
||||
color: #020202; |
||||
line-height: 2; |
||||
} |
||||
} |
||||
.intro-bg { |
||||
position: relative; |
||||
height: 275px; |
||||
padding-top: 90px; |
||||
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 { |
||||
margin-bottom: 30px; |
||||
font-size: 2rem; |
||||
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; |
||||
font-weight: 800; |
||||
} |
||||
.des { |
||||
font-size: 1.5rem; |
||||
} |
||||
} |
||||
} |
||||
@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; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,120 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/SFEL-概况-地理位置</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="c-wrap"> |
||||
<div v-html="modules[1].form.des"></div> |
||||
<div class="cover" style="min-height: 300px;" @click="toSet(1)">点击更换描述</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.overviewLocation, |
||||
active: 0, |
||||
tabs: ['地理位置'] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-地理位置' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@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; |
||||
} |
||||
.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: 22px; |
||||
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 { |
||||
width: 1000px; |
||||
padding: 77px 0; |
||||
margin: 0 auto; |
||||
} |
||||
.video { |
||||
width: 100%; |
||||
margin-bottom: 55px; |
||||
} |
||||
.text { |
||||
font-size: 18px; |
||||
color: #020202; |
||||
line-height: 32px; |
||||
} |
||||
</style> |
||||
@ -1,165 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/SFEL-概况-机构设置</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" |
||||
:key="i" |
||||
@click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="org c-wrap"> |
||||
<div class="left"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<p class="text" |
||||
v-html="modules[1].form.des"></p> |
||||
</div> |
||||
<img class="pic" |
||||
src="http://10.10.11.7/images/overviewSetup/1.png" |
||||
alt=""> |
||||
<div class="cover" |
||||
style="min-height: 300px;" |
||||
@click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
<div class="lg-bg"> |
||||
<img width="100%" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换图片</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.overviewSetup, |
||||
active: 0, |
||||
tabs: ['机构设置'] |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-机构设置' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange (i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.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 { |
||||
padding: 77px 0; |
||||
} |
||||
.org { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 1294px; |
||||
padding: 9px 86px 29px 116px; |
||||
margin: 0 auto 50px; |
||||
background: #fcfcfc; |
||||
border-radius: 160px; |
||||
.left { |
||||
width: 705px; |
||||
} |
||||
h6 { |
||||
font-size: 1.4rem; |
||||
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
||||
font-weight: bold; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
margin-top: 10px; |
||||
font-size: 1rem; |
||||
color: #020202; |
||||
line-height: 2rem; |
||||
} |
||||
.pic { |
||||
width: 320px; |
||||
height: 282px; |
||||
} |
||||
} |
||||
.lg-bg { |
||||
position: relative; |
||||
width: 85%; |
||||
margin: 0 auto; |
||||
} |
||||
</style> |
||||
@ -1,124 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/SFEL-概况-S³FEL宣传片</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="tab-content"> |
||||
<div class="c-wrap"> |
||||
<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 class="text" v-html="modules[1].form.des"></div> |
||||
<div class="cover" @click="toSet(1)">点击更换视频与描述</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.overviewTrailer, |
||||
active: 0, |
||||
tabs: ['S³FEL宣传片'] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-宣传片' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@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; |
||||
} |
||||
.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: 22px; |
||||
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 { |
||||
width: 1000px; |
||||
padding: 77px 0; |
||||
margin: 0 auto; |
||||
} |
||||
.video { |
||||
width: 100%; |
||||
margin-bottom: 55px; |
||||
} |
||||
.text { |
||||
font-size: 18px; |
||||
color: #020202; |
||||
line-height: 32px; |
||||
} |
||||
</style> |
||||
@ -1,245 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/RESEARCH</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<el-carousel height="480px" :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"> |
||||
<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="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="area"> |
||||
<template v-for="(item, i) in modules[2].list"> |
||||
<li :key="i"> |
||||
<img :src="item.pic" alt="" class="pic"> |
||||
<div class="texts"> |
||||
<img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon"> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="des">{{ item.des }}</p> |
||||
</div> |
||||
<div class="cover" @click="toSet(2, i)">点击更改图片、标题概述与链接</div> |
||||
</li> |
||||
</template> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[3].form.title }}</h2> |
||||
<p class="intro">{{ modules[3].form.des }}</p> |
||||
<div class="cover" @click="toSet(3)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="group"> |
||||
<li v-for="(item, i) in modules[4].list" :key="i"> |
||||
<img :src="item.pic" alt=""> |
||||
<p class="text">{{ item.title }}</p> |
||||
<div class="cover" @click="toSet(4, i)">点击更改图片、标题与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner" style="width: 1558px"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[5].form.title }}</h2> |
||||
<p class="intro">{{ modules[5].form.des }}</p> |
||||
<div class="cover" @click="toSet(5)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="news"> |
||||
<li v-for="(item, i) in modules[6].list" :key="i"> |
||||
<img :src="item.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<div class="des">{{ item.des }}</div> |
||||
</div> |
||||
<div class="cover" @click="toSet(6, i)">点击更改图片、标题概述与链接</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' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.research |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: 'RESEARCH' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.area { |
||||
display: flex; |
||||
li { |
||||
position: relative; |
||||
width: 19%; |
||||
height: 653px; |
||||
color: #fff; |
||||
background: url(../../../assets/images/research/res1.png) 0 0/100% 100% no-repeat; |
||||
&:nth-child(2) { |
||||
width: 21%; |
||||
margin-top: 70px; |
||||
.texts { |
||||
background: #2B1B1C; |
||||
} |
||||
} |
||||
&:nth-child(3) { |
||||
.texts { |
||||
background: #009C91; |
||||
} |
||||
} |
||||
&:nth-child(4) { |
||||
margin-top: 70px; |
||||
.texts { |
||||
background: #005388; |
||||
} |
||||
} |
||||
&:nth-child(5) { |
||||
width: 22%; |
||||
.texts { |
||||
background: #9A4E10; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 443px; |
||||
} |
||||
.texts { |
||||
width: 100%; |
||||
height: 210px; |
||||
padding: 20px 40px; |
||||
background: #08577B; |
||||
} |
||||
h6 { |
||||
font-size: 30px; |
||||
white-space: nowrap; |
||||
} |
||||
.des { |
||||
font-size: 22px; |
||||
color: rgba(255,255,255,0.55); |
||||
} |
||||
} |
||||
.group { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
position: relative; |
||||
width: 448px; |
||||
margin: 0 28px 39px 0; |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 353px; |
||||
} |
||||
.text { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 143px; |
||||
padding: 0 30px; |
||||
font-size: 30px; |
||||
font-family: SFProDisplay-Bold, SFProDisplay; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
color: #272727; |
||||
background-color: #F5F5F5; |
||||
} |
||||
} |
||||
.news { |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
li { |
||||
position: relative; |
||||
width: 448px; |
||||
padding: 11px; |
||||
margin-right: 28px; |
||||
color: #333; |
||||
background-color: #fff; |
||||
box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08); |
||||
border-radius: 10px; |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
&:hover { |
||||
color: #fff; |
||||
background-color: #0252D9; |
||||
} |
||||
} |
||||
img { |
||||
width: 427px; |
||||
height: 481px; |
||||
} |
||||
.texts { |
||||
padding: 0 18px 50px; |
||||
} |
||||
h6 { |
||||
margin: 35px 0 12px; |
||||
font-size: 24px; |
||||
line-height: 33px; |
||||
} |
||||
.des { |
||||
font-size: 18px; |
||||
line-height: 26px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,540 +0,0 @@ |
||||
<template> |
||||
<!-- 关于IASF-研究团队 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/关于IASF-研究团队</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<div class="article"> |
||||
<div class="left"> |
||||
<ul class="teams"> |
||||
<li> |
||||
<div class="line"> |
||||
<img src="http://10.10.11.7/images/researchTeam/3.png" |
||||
alt="" |
||||
class="icon"> |
||||
<span class="bold">姓名</span> |
||||
<span class="val">/ 岗位</span> |
||||
</div> |
||||
<div class="line"> |
||||
<img src="http://10.10.11.7/images/researchTeam/4.png" |
||||
alt="" |
||||
class="icon"> |
||||
<span class="text">专业 超低温总体</span> |
||||
</div> |
||||
<div class="line"> |
||||
<img src="http://10.10.11.7/images/researchTeam/5.png" |
||||
alt="" |
||||
class="icon"> |
||||
<span class="text">荣誉 杰青 万人</span> |
||||
</div> |
||||
</li> |
||||
<div class="cover" |
||||
@click="toSet(1)">关联栏目</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.researchTeam, |
||||
title: '' |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '关于IASF-研究团队' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.content { |
||||
width: 1400px; |
||||
margin-top: 20px; |
||||
} |
||||
.article { |
||||
display: flex; |
||||
justify-content: center; |
||||
.left { |
||||
width: 66%; |
||||
.search { |
||||
display: inline-flex; |
||||
width: 34%; |
||||
input { |
||||
width: 100%; |
||||
height: 38px; |
||||
padding: 0 15px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
background: #f7f7f7; |
||||
border: 0; |
||||
border-top-left-radius: 6px; |
||||
border-bottom-left-radius: 6px; |
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.teams { |
||||
position: relative; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: 30px; |
||||
li { |
||||
position: relative; |
||||
width: calc((100% - 10px) / 2); |
||||
padding: 20px 30px; |
||||
margin: 0 10px 10px 0; |
||||
background: url(http://10.10.11.7/images/researchTeam/2.png) 0 0 / cover no-repeat; |
||||
&:nth-child(even) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.line { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 8px; |
||||
} |
||||
.icon { |
||||
margin-right: 8px; |
||||
} |
||||
.bold { |
||||
margin-right: 5px; |
||||
font-size: 1.1rem; |
||||
color: #333; |
||||
} |
||||
.val { |
||||
font-size: 1rem; |
||||
color: #999; |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
color: #666; |
||||
} |
||||
} |
||||
.notice { |
||||
display: flex; |
||||
li { |
||||
position: relative; |
||||
width: calc((100% - 20px) / 2); |
||||
height: 300px; |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.text { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
left: 20px; |
||||
width: calc(100% - 40px); |
||||
font-size: 1.6rem; |
||||
line-height: 66px; |
||||
text-align: center; |
||||
color: #fff; |
||||
background: rgba(32, 57, 81, 0.68); |
||||
} |
||||
} |
||||
.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 { |
||||
width: 98%; |
||||
} |
||||
.article { |
||||
flex-direction: column; |
||||
.left, |
||||
.right { |
||||
width: 100%; |
||||
} |
||||
.left { |
||||
margin-bottom: 30px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (min-width: 280px) and (max-width: 750px) { |
||||
.article { |
||||
.recruit { |
||||
li { |
||||
flex-direction: column; |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
.notice { |
||||
flex-direction: column; |
||||
li { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 320px) { |
||||
.wrap { |
||||
.single-banner { |
||||
.banner-img { |
||||
height: 13rem; |
||||
} |
||||
.texts { |
||||
left: 3rem; |
||||
top: 7rem; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
.article { |
||||
.left { |
||||
.recruit { |
||||
li { |
||||
.pic { |
||||
height: 13rem; |
||||
} |
||||
} |
||||
} |
||||
.notice { |
||||
li { |
||||
height: auto; |
||||
.pic { |
||||
height: 13rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 320px) and (max-width: 375px) { |
||||
.wrap { |
||||
.single-banner { |
||||
.banner-img { |
||||
height: 15rem; |
||||
} |
||||
.texts { |
||||
left: 3rem; |
||||
top: 7rem; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
.article { |
||||
.left { |
||||
.recruit { |
||||
li { |
||||
.pic { |
||||
height: 15rem; |
||||
} |
||||
} |
||||
} |
||||
.notice { |
||||
li { |
||||
height: auto; |
||||
.pic { |
||||
height: 15rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 375px) and (max-width: 480px) { |
||||
.wrap { |
||||
.single-banner { |
||||
.banner-img { |
||||
height: 18rem; |
||||
} |
||||
.texts { |
||||
left: 3rem; |
||||
top: 10rem; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
.article { |
||||
.left { |
||||
.recruit { |
||||
li { |
||||
.pic { |
||||
height: 18rem; |
||||
} |
||||
} |
||||
} |
||||
.notice { |
||||
li { |
||||
height: auto; |
||||
.pic { |
||||
height: 18rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 480px) and (max-width: 640px) { |
||||
.wrap { |
||||
.single-banner { |
||||
.banner-img { |
||||
height: 20rem; |
||||
} |
||||
.texts { |
||||
left: 3rem; |
||||
top: 12rem; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
.article { |
||||
.left { |
||||
.recruit { |
||||
li { |
||||
.pic { |
||||
height: 22rem; |
||||
} |
||||
} |
||||
} |
||||
.notice { |
||||
li { |
||||
height: auto; |
||||
.pic { |
||||
height: 22rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 640px) and (max-width: 768px) { |
||||
.wrap { |
||||
.single-banner { |
||||
.banner-img { |
||||
height: 22rem; |
||||
} |
||||
.texts { |
||||
left: 3rem; |
||||
top: 14rem; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
.article { |
||||
.left { |
||||
.recruit { |
||||
li { |
||||
.pic { |
||||
height: 26rem; |
||||
} |
||||
} |
||||
} |
||||
.notice { |
||||
li { |
||||
height: auto; |
||||
.pic { |
||||
height: 26rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 768px) and (max-width: 980px) { |
||||
.wrap { |
||||
.single-banner { |
||||
.banner-img { |
||||
height: 26rem; |
||||
} |
||||
.texts { |
||||
left: 3rem; |
||||
top: 16rem; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
.article { |
||||
.left { |
||||
.recruit { |
||||
li { |
||||
.pic { |
||||
height: 30rem; |
||||
} |
||||
} |
||||
} |
||||
.notice { |
||||
li { |
||||
height: auto; |
||||
.pic { |
||||
height: 30rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 980px) and (max-width: 1200px) { |
||||
.wrap { |
||||
.single-banner { |
||||
.banner-img { |
||||
height: 30rem; |
||||
} |
||||
.texts { |
||||
left: 3rem; |
||||
top: 18rem; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
.article { |
||||
.left { |
||||
.recruit { |
||||
li { |
||||
.pic { |
||||
height: 35rem; |
||||
} |
||||
} |
||||
} |
||||
.notice { |
||||
li { |
||||
height: auto; |
||||
.pic { |
||||
height: 35rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,137 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/科普之窗</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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> |
||||
<p class="banner-des">{{ modules[0].form.des }}</p> |
||||
</div> |
||||
</div> |
||||
<div class="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<div class="item"> |
||||
<img src="@/assets/images/science/1.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<div class="des">{{ modules[1].form.des }}</div> |
||||
</div> |
||||
<div class="cover" style="left: -35px" @click="toSet(1)">点击更改标题概述与链接</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="@/assets/images/science/2.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="des">{{ modules[2].form.des }}</div> |
||||
</div> |
||||
<div class="cover" style="right: -35px" @click="toSet(2)">点击更改标题概述与链接</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="@/assets/images/science/3.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<div class="des">{{ modules[3].form.des }}</div> |
||||
</div> |
||||
<div class="cover" style="left: -35px" @click="toSet(3)">点击更改标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: Modules.science |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '科普之窗' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.inner { |
||||
width: 1200px; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
margin-bottom: 58px; |
||||
img { |
||||
width: 100%; |
||||
height: 508px; |
||||
} |
||||
&:nth-child(2) .texts { |
||||
color: #fff; |
||||
background: #33B3C1; |
||||
} |
||||
&:nth-child(3) .texts { |
||||
color: #fff; |
||||
background: #E47C22; |
||||
} |
||||
&:nth-child(even) .texts { |
||||
left: auto; |
||||
right: -28px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 79px; |
||||
left: -28px; |
||||
width: 532px; |
||||
padding: 70px 38px; |
||||
color: #333; |
||||
background: #FFF6E9; |
||||
} |
||||
h6 { |
||||
margin-bottom: 14px; |
||||
font-size: 36px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
} |
||||
.des { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,297 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/科学研究</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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> |
||||
<p class="banner-des des">{{ modules[0].form.des }}</p> |
||||
</div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner"> |
||||
<ul class="items"> |
||||
<li> |
||||
<img class="pic" |
||||
:src="modules[1].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<div class="text" |
||||
v-html="modules[1].form.des"></div> |
||||
<img class="icon" |
||||
src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换图片、标题、概述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6 v-html="modules[2].form.title"></h6> |
||||
<div class="text" |
||||
v-html="modules[2].form.des"></div> |
||||
<img class="icon" |
||||
src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换图片、标题、概述与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="about"> |
||||
<div class="inner"> |
||||
<div class="texts"> |
||||
<div class="title wow fadeInUp" |
||||
data-wow-delay="0.7s" |
||||
v-html="modules[3].form.title"></div> |
||||
<div class="des wow fadeInDown" |
||||
data-wow-delay="1s" |
||||
v-html="modules[3].form.des"></div> |
||||
<img class="m-t-10" |
||||
width="42" |
||||
src="@/assets/images/arrow-white.png" |
||||
alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换标题、描述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.scientific |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '科学研究' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.items { |
||||
li { |
||||
position: relative; |
||||
height: 600px; |
||||
margin-bottom: 60px; |
||||
&:nth-child(even) { |
||||
.texts { |
||||
left: auto; |
||||
right: 100px; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 100px; |
||||
left: 80px; |
||||
width: 500px; |
||||
min-height: 350px; |
||||
padding: 30px; |
||||
color: #333; |
||||
background-color: rgba(255, 255, 255, 0.85); |
||||
border-radius: 0px 0px 100px 0px; |
||||
border-top: 4px solid #0280f1; |
||||
} |
||||
h6 { |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
||||
.text { |
||||
margin: 1rem 0; |
||||
font-size: 1rem; |
||||
line-height: 1.6; |
||||
} |
||||
.icon { |
||||
width: 40px; |
||||
} |
||||
} |
||||
} |
||||
.program { |
||||
background: #fff; |
||||
.title { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
padding-bottom: 25px; |
||||
margin-bottom: 30px; |
||||
border-bottom: 1px solid #ddd; |
||||
align-items: center; |
||||
h5 { |
||||
padding-left: 16px; |
||||
font-size: 1.6rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
line-height: 1; |
||||
border-left: 6px solid #2b96ef; |
||||
} |
||||
.sub { |
||||
font-size: 1.1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #afb7bf; |
||||
} |
||||
.more { |
||||
font-size: 0.8rem; |
||||
color: #666; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.slide { |
||||
display: flex; |
||||
margin-bottom: 14px; |
||||
cursor: pointer; |
||||
} |
||||
.texts { |
||||
width: 51%; |
||||
padding: 56px; |
||||
background: #fbfbfb; |
||||
h6 { |
||||
font-size: 1.3rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.des { |
||||
margin: 35px 0 25px; |
||||
font-size: 1rem; |
||||
color: #666; |
||||
line-height: 32px; |
||||
} |
||||
.meta { |
||||
font-size: 0.9rem; |
||||
color: #666; |
||||
} |
||||
} |
||||
.img-wrap { |
||||
width: 49%; |
||||
height: 430px; |
||||
overflow: hidden; |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
transition: 0.5s; |
||||
} |
||||
.list { |
||||
display: flex; |
||||
li { |
||||
width: calc((100% - 28px) / 3); |
||||
height: 204px; |
||||
padding: 36px 22px; |
||||
margin-right: 14px; |
||||
background: url(../../../assets/images/sfel/7.png) no-repeat center; |
||||
background-size: 100% 100%; |
||||
transition: 0.5s; |
||||
cursor: pointer; |
||||
&:nth-child(2) { |
||||
background-image: url(../../../assets/images/sfel/8.png); |
||||
} |
||||
&:nth-child(3) { |
||||
margin-right: 0; |
||||
background-image: url(../../../assets/images/sfel/9.png); |
||||
} |
||||
} |
||||
.des { |
||||
height: 90px; |
||||
margin-bottom: 30px; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #ffffff; |
||||
line-height: 30px; |
||||
} |
||||
.date { |
||||
font-size: 0.9rem; |
||||
font-family: LaoSangamMN; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
} |
||||
.about { |
||||
position: relative; |
||||
padding: 10rem 0 3rem; |
||||
text-align: center; |
||||
background: url(../../../assets/images/about-bg.png) no-repeat center center; |
||||
background-size: 100% 100%; |
||||
.texts { |
||||
padding: 2.375rem 3.75rem; |
||||
color: #fff; |
||||
background: rgba(111, 69, 36, 0.56); |
||||
border-radius: 17px; |
||||
transition: 0.3s; |
||||
} |
||||
.title { |
||||
margin-bottom: 1rem; |
||||
font-size: 2.2rem; |
||||
} |
||||
.des { |
||||
font-size: 1rem; |
||||
line-height: 1.6; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,144 +0,0 @@ |
||||
<template> |
||||
<!-- 院长致辞 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/院长致辞</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner c-wrap"> |
||||
<img :src="modules[1].form.pic" |
||||
alt="" |
||||
class="pic"> |
||||
<div class="texts"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<p class="en">{{ modules[1].form.subTitle }}</p> |
||||
<div class="text" |
||||
v-html="modules[1].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换图片、标题、小标题与概述</div> |
||||
</div> |
||||
<div class="sign c-wrap"> |
||||
签名： |
||||
<img :src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换签名</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.speech |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '院长致辞' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@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 { |
||||
width: 1400px; |
||||
min-height: 150px; |
||||
margin: 20px auto 0; |
||||
text-align: right; |
||||
img { |
||||
max-width: 150px; |
||||
} |
||||
.cover { |
||||
left: auto; |
||||
width: 300px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,267 +0,0 @@ |
||||
<template> |
||||
<!-- 人才队伍 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/人才队伍</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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> |
||||
<p class="banner-des">{{ modules[0].form.des }}</p> |
||||
</div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block talent"> |
||||
<div class="inner"> |
||||
<div class="item"> |
||||
<img class="pic" |
||||
:src="modules[1].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<div class="des">{{ modules[1].form.des }}</div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="des">{{ modules[2].form.des }}</div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="style c-wrap"> |
||||
<div class="c-wrap"> |
||||
<h6 v-html="modules[3].form.title"></h6> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换标题</div> |
||||
</div> |
||||
<div class="c-wrap"> |
||||
<el-carousel :interval="4000" |
||||
type="card" |
||||
height="510px"> |
||||
<template v-for="(item, i) in modules[4].list"> |
||||
<el-carousel-item v-if="item.isEnable" |
||||
:key="i"> |
||||
<div class="item"> |
||||
<img :src="item.pic" |
||||
alt=""> |
||||
<p class="text">{{ item.des }}</p> |
||||
</div> |
||||
</el-carousel-item> |
||||
</template> |
||||
</el-carousel> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block intro"> |
||||
<div class="inner"> |
||||
<div class="item"> |
||||
<img class="pic" |
||||
:src="modules[5].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<p class="type">{{ modules[5].form.subTitle }}</p> |
||||
<h6>{{ modules[5].form.title }}</h6> |
||||
<div class="des">{{ modules[5].form.des }}</div> |
||||
<el-button type="primary">查看更多</el-button> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(5)">点击更改图片、标题、小标题、概述与链接</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img class="pic" |
||||
:src="modules[6].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<p class="type">{{ modules[6].form.subTitle }}</p> |
||||
<h6>{{ modules[6].form.title }}</h6> |
||||
<div class="des">{{ modules[6].form.des }}</div> |
||||
<el-button type="primary">查看更多</el-button> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(6)">点击更改图片、标题、小标题、概述与链接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.talent |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '人才队伍' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.wrap { |
||||
background: #f8f9fb; |
||||
} |
||||
.talent { |
||||
.inner { |
||||
width: 1504px; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
display: flex; |
||||
padding: 42px; |
||||
margin-bottom: 36px; |
||||
background: #fff; |
||||
&:nth-child(even) { |
||||
flex-direction: row-reverse; |
||||
.texts { |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 602px; |
||||
height: 465px; |
||||
} |
||||
.texts { |
||||
padding: 98px 72px 30px 80px; |
||||
} |
||||
h6 { |
||||
margin-bottom: 24px; |
||||
font-size: 50px; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #333333; |
||||
} |
||||
.des { |
||||
font-size: 18px; |
||||
color: #333; |
||||
line-height: 33px; |
||||
} |
||||
} |
||||
.style { |
||||
h6 { |
||||
margin-bottom: 59px; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
color: #333333; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.text { |
||||
position: absolute; |
||||
bottom: 45px; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 0 30px; |
||||
line-height: 68px; |
||||
font-size: 24px; |
||||
color: #fff; |
||||
background: rgba(0, 0, 0, 0.38); |
||||
} |
||||
} |
||||
.intro { |
||||
.inner { |
||||
width: 1504px; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 36px; |
||||
background: #fff; |
||||
&:nth-child(even) { |
||||
flex-direction: row-reverse; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 848px; |
||||
height: 505px; |
||||
} |
||||
.texts { |
||||
padding: 0 58px; |
||||
} |
||||
.type { |
||||
font-size: 18px; |
||||
color: #333; |
||||
} |
||||
h6 { |
||||
margin: 20px 0; |
||||
font-size: 28px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.des { |
||||
margin-bottom: 30px; |
||||
font-size: 16px; |
||||
color: #333; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,305 +0,0 @@ |
||||
<template> |
||||
<!-- 人才中心 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/人才中心</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
<div class="content"> |
||||
<div class="article"> |
||||
<div class="left"> |
||||
<div class="c-wrap"> |
||||
<h6 class="title">{{ modules[1].form.title }}</h6> |
||||
<div class="text" |
||||
v-html="modules[1].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="recruit"> |
||||
<li> |
||||
<div class="c-wrap m-r-10"> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换图片</div> |
||||
</div> |
||||
<div class="texts"> |
||||
<div class="c-wrap"> |
||||
<div class="flex j-between a-center"> |
||||
<h6 class="c-title">{{ modules[3].form.title }}</h6> |
||||
<div class="more">查看更多 ></div> |
||||
</div> |
||||
<div class="des" |
||||
v-html="modules[3].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换标题、链接与描述</div> |
||||
</div> |
||||
<p class="hot">热门岗位</p> |
||||
<div class="labels"> |
||||
<p v-for="(item, i) in modules[4].list" |
||||
:key="i" |
||||
class="label">{{ item.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更换标签</div> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div class="c-wrap m-r-10"> |
||||
<img class="pic" |
||||
:src="modules[5].form.pic" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(5)">点击更换图片</div> |
||||
</div> |
||||
<div class="texts"> |
||||
<div class="c-wrap"> |
||||
<div class="flex j-between a-center"> |
||||
<h6 class="c-title">{{ modules[6].form.title }}</h6> |
||||
<div class="more">查看更多 ></div> |
||||
</div> |
||||
<div class="des" |
||||
v-html="modules[6].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(6)">点击更换标题、链接与描述</div> |
||||
</div> |
||||
<p class="hot">热门岗位</p> |
||||
<div class="labels"> |
||||
<p v-for="(item, i) in modules[7].list" |
||||
:key="i" |
||||
class="label">{{ item.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(7)">点击更换标签</div> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<ul class="notice"> |
||||
<li class="m-r-10"> |
||||
<img class="pic" |
||||
:src="modules[8].form.pic" |
||||
alt=""> |
||||
<p class="text">{{ modules[8].form.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(8)">点击更换图片、标题与链接</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" |
||||
:src="modules[9].form.pic" |
||||
alt=""> |
||||
<p class="text">{{ modules[9].form.title }}</p> |
||||
<div class="cover" |
||||
@click="toSet(9)">点击更换图片、标题与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.talentCenter |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '人才中心' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.wrap { |
||||
background-color: #f9fafa; |
||||
} |
||||
.content { |
||||
width: 1400px; |
||||
padding-top: 40px; |
||||
} |
||||
.article { |
||||
display: flex; |
||||
justify-content: center; |
||||
.left { |
||||
width: 66%; |
||||
.title { |
||||
padding-bottom: 10px; |
||||
font-size: 1.2rem; |
||||
color: #666; |
||||
border-bottom: 1px solid #eaeef2; |
||||
} |
||||
.text { |
||||
margin-top: 20px; |
||||
font-size: 1.1rem; |
||||
color: #333; |
||||
line-height: 28px; |
||||
p { |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
} |
||||
.recruit { |
||||
li { |
||||
display: flex; |
||||
padding: 20px; |
||||
margin-bottom: 24px; |
||||
background-color: #fff; |
||||
} |
||||
.pic { |
||||
width: 410px; |
||||
height: 250px; |
||||
margin-right: 20px; |
||||
} |
||||
.c-title { |
||||
font-size: 1.2rem; |
||||
columns: #333; |
||||
} |
||||
.more { |
||||
font-size: 0.8rem; |
||||
color: #0648a8; |
||||
cursor: pointer; |
||||
} |
||||
.des { |
||||
margin: 20px 0; |
||||
font-size: 1rem; |
||||
color: #666; |
||||
line-height: 22px; |
||||
} |
||||
.hot { |
||||
margin-bottom: 10px; |
||||
font-size: 1.1rem; |
||||
color: #333; |
||||
} |
||||
.labels { |
||||
position: relative; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
.label { |
||||
padding: 5px 15px; |
||||
margin: 0 15px 15px 0; |
||||
font-size: 1rem; |
||||
border-radius: 22px; |
||||
border: 1px solid #666; |
||||
} |
||||
} |
||||
.notice { |
||||
display: flex; |
||||
li { |
||||
position: relative; |
||||
width: calc((100% - 20px) / 2); |
||||
height: 300px; |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.text { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
left: 20px; |
||||
width: calc(100% - 40px); |
||||
font-size: 1.6rem; |
||||
line-height: 66px; |
||||
text-align: center; |
||||
color: #fff; |
||||
background: rgba(32, 57, 81, 0.68); |
||||
} |
||||
} |
||||
.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 { |
||||
width: 98%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,276 +0,0 @@ |
||||
<template> |
||||
<!-- 人才中心 --> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/人才中心</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<div class="article"> |
||||
<div class="left"> |
||||
<div class="c-wrap"> |
||||
<h6 class="talent-title">{{ modules[1].form.title }}</h6> |
||||
<div class="talent-text" |
||||
v-html="modules[1].form.des"></div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换标题与概述</div> |
||||
</div> |
||||
<ul class="people"> |
||||
<li> |
||||
<img class="pic" |
||||
:src="modules[2].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="line"></div> |
||||
<div class="text" |
||||
v-html="modules[2].form.des"></div> |
||||
<img src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换图片、标题、概述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" |
||||
:src="modules[3].form.pic" |
||||
alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<div class="line"></div> |
||||
<div class="text" |
||||
v-html="modules[3].form.des"></div> |
||||
<img src="@/assets/images/arrow.png" |
||||
alt=""> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换图片、标题、概述与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="right"> |
||||
<div class="c-wrap"> |
||||
<el-tree class="column" |
||||
ref="column" |
||||
:data="modules[4].list" |
||||
highlight-current |
||||
:expand-on-click-node="false" |
||||
:props="defaultProps" |
||||
node-key="id"></el-tree> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更换标题与链接</div> |
||||
</div> |
||||
|
||||
<p class="l-title">人才资讯</p> |
||||
<ul class="list"> |
||||
<li> |
||||
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p> |
||||
<span class="date">2022-08-09</span> |
||||
</li> |
||||
<div class="cover" |
||||
@click="toSet(5)">点击关联栏目</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.talentCentre, |
||||
defaultProps: { |
||||
value: 'id', |
||||
label: 'title' |
||||
}, |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '人才中心' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.content { |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
} |
||||
.l-title { |
||||
position: relative; |
||||
padding-bottom: 20px; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #000; |
||||
line-height: 1.6; |
||||
border-bottom: 1px solid #ddd; |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 30px; |
||||
height: 2px; |
||||
background-color: #156ceb; |
||||
} |
||||
} |
||||
.article { |
||||
display: flex; |
||||
justify-content: center; |
||||
.left { |
||||
width: 66%; |
||||
margin-right: 20px; |
||||
.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 { |
||||
position: relative; |
||||
height: 450px; |
||||
margin-bottom: 2rem; |
||||
&:nth-child(even) { |
||||
.texts { |
||||
left: 50px; |
||||
right: auto; |
||||
background: rgba(255, 255, 255, 0.43); |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 60px; |
||||
right: 50px; |
||||
width: 380px; |
||||
padding: 50px 25px; |
||||
background: rgba(243, 251, 255, 0.82); |
||||
} |
||||
h6 { |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #2a4b65; |
||||
} |
||||
.line { |
||||
width: 93px; |
||||
height: 1px; |
||||
margin: 1rem 0; |
||||
background: #3e6473; |
||||
} |
||||
.text { |
||||
margin-bottom: 1rem; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
||||
color: #2a4b65; |
||||
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 { |
||||
position: relative; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,139 +0,0 @@ |
||||
<template> |
||||
<!-- 人才中心 --> |
||||
<div class="wrap p-b-30"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/关于IASF-核心团队</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<div class="left"> |
||||
<ul class="list"> |
||||
<li v-for="(item, i) in modules[1].list" |
||||
:key="i"> |
||||
<img :src="item.pic" |
||||
alt="" |
||||
class="pic"> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="job">{{ item.subTitle }}</p> |
||||
<div class="text" |
||||
v-html="item.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(1, i)">点击更换图片、标题、描述</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' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.team |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '关于IASF-核心团队' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.wrap { |
||||
background-color: #fff; |
||||
} |
||||
.content { |
||||
display: flex; |
||||
width: 1200px; |
||||
margin: 30px auto; |
||||
.list { |
||||
position: relative; |
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
padding-bottom: 30px; |
||||
margin-bottom: 30px; |
||||
border-bottom: 1px solid #ddd; |
||||
&:last-child { |
||||
border-bottom: 0; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 224px; |
||||
height: 268px; |
||||
margin-right: 25px; |
||||
} |
||||
h6 { |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #333; |
||||
} |
||||
.job { |
||||
margin: 10px 0; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,216 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<p class="page-name">页面设置/用户共享</p> |
||||
<div> |
||||
<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="back">放弃编辑</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modules"> |
||||
<div class="relative"> |
||||
<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> |
||||
<p class="banner-des">{{ modules[0].form.des }}</p> |
||||
</div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(0)">点击更换banner与链接</div> |
||||
</div> |
||||
|
||||
<div class="block share"> |
||||
<div class="inner c-wrap"> |
||||
<div class="left"> |
||||
<h6 v-html="modules[1].form.title"></h6> |
||||
<p class="en">USERS SHARE</p> |
||||
<div class="des" |
||||
v-html="modules[1].form.des"></div> |
||||
</div> |
||||
<div class="cover" |
||||
@click="toSet(1)">点击更换描述</div> |
||||
<img class="pic" |
||||
src="@/assets/images/userSharing/1.png" |
||||
alt=""> |
||||
<div class="card"> |
||||
<p class="title">{{ modules[1].form.subTitle }}</p> |
||||
<p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<ul class="group"> |
||||
<li> |
||||
<img src="@/assets/images/userSharing/2.png" |
||||
alt=""> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<div class="des">{{ modules[2].form.des }}</div> |
||||
<div class="cover" |
||||
@click="toSet(2)">点击更换标题、描述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img src="@/assets/images/userSharing/3.png" |
||||
alt=""> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<div class="des">{{ modules[3].form.des }}</div> |
||||
<div class="cover" |
||||
@click="toSet(3)">点击更换标题、描述与链接</div> |
||||
</li> |
||||
<li> |
||||
<img src="@/assets/images/userSharing/4.png" |
||||
alt=""> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<div class="des">{{ modules[4].form.des }}</div> |
||||
<div class="cover" |
||||
@click="toSet(4)">点击更换标题、描述与链接</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module ref="module" |
||||
:data.sync="curData" |
||||
:visible.sync="diaVisible" |
||||
@moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Modules from '@/const/modules' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
return { |
||||
modules: Modules.userSharing |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '用户共享' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../styles/page/page.scss'; |
||||
.share { |
||||
position: relative; |
||||
.inner { |
||||
display: flex; |
||||
width: 1476px; |
||||
} |
||||
.left { |
||||
width: 509px; |
||||
} |
||||
h6 { |
||||
position: relative; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.en { |
||||
margin-top: -35px; |
||||
font-size: 45px; |
||||
font-family: AppleSystemUIFont; |
||||
color: #e4e4e4; |
||||
} |
||||
.des { |
||||
margin-top: 25px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
line-height: 37px; |
||||
overflow: visible; |
||||
} |
||||
.pic { |
||||
width: 944px; |
||||
height: 568px; |
||||
border-top-left-radius: 20px; |
||||
} |
||||
.card { |
||||
position: absolute; |
||||
bottom: 29px; |
||||
left: 0; |
||||
width: 1068px; |
||||
height: 145px; |
||||
padding: 20px 0 0 11%; |
||||
background: #7bacc4; |
||||
border-radius: 0px 100px 0px 0px; |
||||
opacity: 0.88; |
||||
} |
||||
.title { |
||||
margin-bottom: 10px; |
||||
font-size: 40px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #fff; |
||||
} |
||||
.en-text { |
||||
font-size: 28px; |
||||
font-family: AppleSystemUIFont; |
||||
color: #fff; |
||||
letter-spacing: 2px; |
||||
} |
||||
} |
||||
.group { |
||||
display: flex; |
||||
justify-content: center; |
||||
li { |
||||
position: relative; |
||||
width: 420px; |
||||
height: 390px; |
||||
padding: 195px 0 0 32px; |
||||
margin-right: 20px; |
||||
color: #fff; |
||||
} |
||||
img { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
h6 { |
||||
position: relative; |
||||
font-size: 36px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
} |
||||
.des { |
||||
position: relative; |
||||
margin-top: 16px; |
||||
font-size: 18px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
line-height: 31px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue