|
|
|
|
@ -3,9 +3,11 @@ |
|
|
|
|
<div class="actions"> |
|
|
|
|
<p class="page-name">页面设置/SFEL-概况-发展历程</p> |
|
|
|
|
<div> |
|
|
|
|
<el-button type="primary" @click="preview">预览</el-button> |
|
|
|
|
<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 type="primary" |
|
|
|
|
@click="save(1)">发布</el-button> |
|
|
|
|
<el-button @click="back">放弃编辑</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -13,57 +15,76 @@ |
|
|
|
|
<div class="modules"> |
|
|
|
|
<div class="relative"> |
|
|
|
|
<div class="single-banner single-banner-overview"> |
|
|
|
|
<img class="banner-img" :src="modules[0].form.pic" alt=""> |
|
|
|
|
<img class="banner-img" |
|
|
|
|
:src="modules[0].form.pic" |
|
|
|
|
alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6 class="banner-title">{{ modules[0].form.title }}</h6> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cover" @click="toSet(0)">点击更换banner与链接</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> |
|
|
|
|
<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">{{ modules[1].form.title }}</h2> |
|
|
|
|
<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 class="cover" |
|
|
|
|
@click="toSet(1)">点击更换标题与描述</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="c-wrap"> |
|
|
|
|
<div v-if="modules[2].list.length" class="event"> |
|
|
|
|
<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> |
|
|
|
|
<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"> |
|
|
|
|
<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"> |
|
|
|
|
<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 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" /> |
|
|
|
|
<Module ref="module" |
|
|
|
|
:data.sync="curData" |
|
|
|
|
:visible.sync="diaVisible" |
|
|
|
|
@moduleSubmit="moduleSubmit" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -72,7 +93,7 @@ import mixins from '@/mixins/page' |
|
|
|
|
import Modules from '@/const/modules' |
|
|
|
|
export default { |
|
|
|
|
mixins: [mixins], |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
modules: Modules.overviewDevHistory, |
|
|
|
|
active: 0, |
|
|
|
|
@ -80,7 +101,7 @@ export default { |
|
|
|
|
curYear: 0 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.$store.commit('user/setCrumbs', [ |
|
|
|
|
{ |
|
|
|
|
name: '站点管理', |
|
|
|
|
@ -101,7 +122,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// tab回调 |
|
|
|
|
tabChange(i) { |
|
|
|
|
tabChange (i) { |
|
|
|
|
this.active = i |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
@ -109,128 +130,128 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import "../../../styles/page/page.scss"; |
|
|
|
|
@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; |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
.right { |
|
|
|
|
width: 900px; |
|
|
|
|
} |
|
|
|
|
.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); |
|
|
|
|
} |
|
|
|
|
.year { |
|
|
|
|
margin: 0 0 20px 20px; |
|
|
|
|
font-size: 3.8rem; |
|
|
|
|
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; |
|
|
|
|
font-weight: 800; |
|
|
|
|
color: #1a81f4; |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
width: 350px; |
|
|
|
|
height: 195px; |
|
|
|
|
.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> |
