所有长页的标题和面包屑改成取栏目名称

master
yujialong 4 months ago
parent b5e7d41a0f
commit 3e1c8159de
  1. 24
      src/mixins/page/index.js
  2. 8
      src/pages/column/add/index.vue
  3. 208
      src/pages/column/page/about.vue
  4. 181
      src/pages/column/page/aboutNew.vue
  5. 22
      src/pages/column/page/aboutUs.vue
  6. 22
      src/pages/column/page/application.vue
  7. 55
      src/pages/column/page/careers.vue
  8. 88
      src/pages/column/page/contactUs.vue
  9. 22
      src/pages/column/page/devHistory.vue
  10. 96
      src/pages/column/page/deviceIntroBeam.vue
  11. 102
      src/pages/column/page/deviceIntroLayout.vue
  12. 96
      src/pages/column/page/deviceIntroLinear.vue
  13. 35
      src/pages/column/page/edu.vue
  14. 85
      src/pages/column/page/estate/event/index.vue
  15. 244
      src/pages/column/page/estate/index/index.vue
  16. 101
      src/pages/column/page/estate/location/index.vue
  17. 77
      src/pages/column/page/estate/orgSetup/index.vue
  18. 72
      src/pages/column/page/estate/survey/index.vue
  19. 116
      src/pages/column/page/exp.vue
  20. 89
      src/pages/column/page/governance.vue
  21. 22
      src/pages/column/page/home.vue
  22. 22
      src/pages/column/page/iasf.vue
  23. 22
      src/pages/column/page/index.vue
  24. 188
      src/pages/column/page/industrial.vue
  25. 100
      src/pages/column/page/lightSources.vue
  26. 22
      src/pages/column/page/member.vue
  27. 103
      src/pages/column/page/mission.vue
  28. 263
      src/pages/column/page/news.vue
  29. 35
      src/pages/column/page/newsPress.vue
  30. 35
      src/pages/column/page/newsProcurement.vue
  31. 65
      src/pages/column/page/org.vue
  32. 192
      src/pages/column/page/overview.vue
  33. 89
      src/pages/column/page/overviewDevHistory.vue
  34. 85
      src/pages/column/page/overviewIntro.vue
  35. 39
      src/pages/column/page/overviewLocation.vue
  36. 72
      src/pages/column/page/overviewSetup.vue
  37. 39
      src/pages/column/page/overviewTrailer.vue
  38. 57
      src/pages/column/page/research.vue
  39. 96
      src/pages/column/page/researchNew.vue
  40. 135
      src/pages/column/page/researchTeam.vue
  41. 33
      src/pages/column/page/science.vue
  42. 113
      src/pages/column/page/scientific.vue
  43. 348
      src/pages/column/page/sfel.vue
  44. 268
      src/pages/column/page/sfelNew.vue
  45. 22
      src/pages/column/page/shop.vue
  46. 66
      src/pages/column/page/speech.vue
  47. 105
      src/pages/column/page/talent.vue
  48. 131
      src/pages/column/page/talentCenter.vue
  49. 114
      src/pages/column/page/talentCentre.vue
  50. 62
      src/pages/column/page/team.vue
  51. 83
      src/pages/column/page/userSharing.vue

@ -17,6 +17,7 @@ export default {
curListIndex: 0, curListIndex: 0,
curData: {}, curData: {},
pass: false, pass: false,
columnName: '',
} }
}, },
components: { components: {
@ -40,6 +41,7 @@ export default {
}, },
mounted () { mounted () {
this.getInfo() this.getInfo()
this.getColumnInfo()
}, },
methods: { methods: {
// 获取详情 // 获取详情
@ -88,6 +90,28 @@ export default {
this.pass = true this.pass = true
} }
}, },
// 获取栏目信息
async getColumnInfo () {
const { data } = await this.$post(`${this.api.findColumn}?id=${this.columnId}`)
this.columnName = data.columnName
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: data.columnName
}
])
},
// 展开模块设置 // 展开模块设置
toSet (i, listIndex) { toSet (i, listIndex) {
this.curModule = i this.curModule = i

@ -566,6 +566,14 @@ export default {
token: Util.local.get(Setting.tokenKey) token: Util.local.get(Setting.tokenKey)
}, },
}).then(({ data }) => { }).then(({ data }) => {
if (data.code === 401) {
Util.errorMsg("登录过期,请重新登录");
setTimeout(() => {
this.$store.dispatch('user/logout')
}, 1000);
return false
}
let url = this.form.columnBanner let url = this.form.columnBanner
url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => { }).catch(e => { }) // url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => { }).catch(e => { }) //
this.form.columnBanner = data.url this.form.columnBanner = data.url

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/ABOUT</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,17 +15,12 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block history gray"> <div class="block history gray">
@ -39,14 +32,9 @@
<div class="line"></div> <div class="line"></div>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div>
@click="toSet(1)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
@ -55,37 +43,28 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[2].form.title }}</h2> <h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p> <p class="intro">{{ modules[2].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
@click="toSet(2)">点击更换标题与描述</div>
</div> </div>
<ul class="card"> <ul class="card">
<li class="item1"> <li class="item1">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div> <div class="cover" @click="toSet(3)">点击更换标题概述与跳转</div>
<div class="cover"
@click="toSet(3)">点击更换标题概述与跳转</div>
</li> </li>
<li class="item2"> <li class="item2">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <div class="cover" @click="toSet(4)">点击更换标题概述与跳转</div>
<div class="cover"
@click="toSet(4)">点击更换标题概述与跳转</div>
</li> </li>
<li class="item3"> <li class="item3">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[5].form.des"></div>
v-html="modules[5].form.des"></div> <div class="cover" @click="toSet(5)">点击更换标题概述与跳转</div>
<div class="cover"
@click="toSet(5)">点击更换标题概述与跳转</div>
</li> </li>
<li class="item4"> <li class="item4">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[6].form.des"></div>
v-html="modules[6].form.des"></div> <div class="cover" @click="toSet(6)">点击更换标题概述与跳转</div>
<div class="cover"
@click="toSet(6)">点击更换标题概述与跳转</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -96,45 +75,38 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[7].form.title }}</h2> <h2 class="b-title">{{ modules[7].form.title }}</h2>
<p class="intro">{{ modules[7].form.des }}</p> <p class="intro">{{ modules[7].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(7)">点击更换标题与描述</div>
@click="toSet(7)">点击更换标题与描述</div>
</div> </div>
<ul class="stat"> <ul class="stat">
<li> <li>
<p class="num">{{ modules[8].form.title }}</p> <p class="num">{{ modules[8].form.title }}</p>
<p class="text">{{ modules[8].form.des }}</p> <p class="text">{{ modules[8].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
@click="toSet(8)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[9].form.title }}</p> <p class="num">{{ modules[9].form.title }}</p>
<p class="text">{{ modules[9].form.des }}</p> <p class="text">{{ modules[9].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(9)">点击更换标题与描述</div>
@click="toSet(9)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[10].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
@click="toSet(10)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[11].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(11)">点击更换标题与描述</div>
@click="toSet(11)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(12)">点击更换标题与描述</div>
@click="toSet(12)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[13].form.title }}</p> <p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[13].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(13)">点击更换标题与描述</div>
@click="toSet(13)">点击更换标题与描述</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -142,19 +114,14 @@
<div class="plan c-wrap"> <div class="plan c-wrap">
<div class="inner"> <div class="inner">
<img class="pic" <img class="pic" :src="modules[14].form.pic" alt="">
:src="modules[14].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[14].form.title }}</h6> <h6>{{ modules[14].form.title }}</h6>
<div class="des">{{ modules[14].form.des }}</div> <div class="des">{{ modules[14].form.des }}</div>
<img src="@/assets/images/arrow-white.png" <img src="@/assets/images/arrow-white.png" alt="">
alt="">
</div> </div>
</div> </div>
<div class="cover" <div class="cover" style="height: calc(100% + 60px);" @click="toSet(14)">点击更换标题概述与跳转</div>
style="height: calc(100% + 60px);"
@click="toSet(14)">点击更换标题概述与跳转</div>
</div> </div>
<div class="block"> <div class="block">
@ -162,28 +129,21 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[15].form.title }}</h2> <h2 class="b-title">{{ modules[15].form.title }}</h2>
<p class="intro">{{ modules[15].form.des }}</p> <p class="intro">{{ modules[15].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(15)">点击更换标题与描述</div>
@click="toSet(15)">点击更换标题与描述</div>
</div> </div>
<ul class="people"> <ul class="people">
<template v-for="(item, i) in modules[16].list"> <template v-for="(item, i) in modules[16].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i">
:key="i"> <img class="pic" :src="item.pic" alt="">
<img class="pic"
:src="item.pic"
alt="">
<div class="texts"> <div class="texts">
<p class="sub">{{ item.subTitle }}</p> <p class="sub">{{ item.subTitle }}</p>
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p> <p class="des">{{ item.des }}</p>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
</template> </template>
<div class="cover" <div class="cover" @click="toSet(16)">点击更改图片标题概述与链接</div>
@click="toSet(16)">点击更改图片标题概述与链接</div>
</ul> </ul>
</div> </div>
</div> </div>
@ -193,36 +153,26 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[17].form.title }}</h2> <h2 class="b-title">{{ modules[17].form.title }}</h2>
<p class="intro">{{ modules[17].form.des }}</p> <p class="intro">{{ modules[17].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(17)">点击更换标题与描述</div>
@click="toSet(17)">点击更换标题与描述</div>
</div> </div>
<ul class="list"> <ul class="list">
<li> <li>
<img class="pic" <img class="pic" :src="modules[18].form.pic" alt="">
:src="modules[18].form.pic"
alt="">
<h6>{{ modules[18].form.title }}</h6> <h6>{{ modules[18].form.title }}</h6>
<p class="des">{{ modules[18].form.des }}</p> <p class="des">{{ modules[18].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(18)">点击更改图片标题概述与链接</div>
@click="toSet(18)">点击更改图片标题概述与链接</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" :src="modules[19].form.pic" alt="">
:src="modules[19].form.pic"
alt="">
<h6>{{ modules[19].form.title }}</h6> <h6>{{ modules[19].form.title }}</h6>
<p class="des">{{ modules[19].form.des }}</p> <p class="des">{{ modules[19].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(19)">点击更改图片标题概述与链接</div>
@click="toSet(19)">点击更改图片标题概述与链接</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" :src="modules[20].form.pic" alt="">
:src="modules[20].form.pic"
alt="">
<h6>{{ modules[20].form.title }}</h6> <h6>{{ modules[20].form.title }}</h6>
<p class="des">{{ modules[20].form.des }}</p> <p class="des">{{ modules[20].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(20)">点击更改图片标题概述与链接</div>
@click="toSet(20)">点击更改图片标题概述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -233,28 +183,21 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[21].form.title }}</h2> <h2 class="b-title">{{ modules[21].form.title }}</h2>
<p class="intro">{{ modules[21].form.des }}</p> <p class="intro">{{ modules[21].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(21)">点击更换标题与描述</div>
@click="toSet(21)">点击更换标题与描述</div>
</div> </div>
<div class="staff"> <div class="staff">
<div class="left"> <div class="left">
<h6>{{ modules[22].form.title }}</h6> <h6>{{ modules[22].form.title }}</h6>
<div class="des">{{ modules[22].form.des }}</div> <div class="des">{{ modules[22].form.des }}</div>
</div> </div>
<img class="pic" <img class="pic" :src="modules[22].form.pic" alt="">
:src="modules[22].form.pic" <div class="cover" @click="toSet(22)">点击更改图片标题概述与链接</div>
alt="">
<div class="cover"
@click="toSet(22)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -268,25 +211,7 @@ export default {
modules: Modules.about modules: Modules.about
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'ABOUT'
}
])
},
methods: { methods: {
} }
@ -295,11 +220,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.history { .history {
h2 { h2 {
font-size: 30px; font-size: 30px;
color: #333; color: #333;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -308,28 +235,34 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
} }
.left { .left {
width: 695px; width: 695px;
} }
.line { .line {
width: 136px; width: 136px;
height: 2px; height: 2px;
margin: 20px 0; margin: 20px 0;
background: #d7d7d7; background: #d7d7d7;
} }
.des { .des {
font-size: 22px; font-size: 22px;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
} }
.bg { .bg {
margin: -122px 0 0 0; margin: -122px 0 0 0;
border-top-right-radius: 40px; border-top-right-radius: 40px;
} }
} }
.card { .card {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
width: 686px; width: 686px;
@ -337,89 +270,111 @@ export default {
padding: 70px 67px 20px; padding: 70px 67px 20px;
margin-bottom: 28px; margin-bottom: 28px;
color: #fff; color: #fff;
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 28px; margin-right: 28px;
} }
} }
.item1 { .item1 {
background: url(../../../assets/images/about/3.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
} }
.item2 { .item2 {
background-color: #4984b6; background-color: #4984b6;
} }
.item3 { .item3 {
background-color: #567180; background-color: #567180;
} }
.item4 { .item4 {
background: url(../../../assets/images/about/4.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 40px; font-size: 40px;
font-family: toppan; font-family: toppan;
} }
.des { .des {
font-size: 18px; font-size: 18px;
} }
} }
.plan { .plan {
padding: 73px 0; padding: 73px 0;
background: #072947; background: #072947;
.inner { .inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 1575px; width: 1575px;
} }
.pic { .pic {
width: 664px; width: 664px;
height: 488px; height: 488px;
margin-bottom: -120px; margin-bottom: -120px;
} }
.texts { .texts {
width: 802px; width: 802px;
margin-top: 36px; margin-top: 36px;
color: #fff; color: #fff;
} }
h6 { h6 {
font-size: 36px; font-size: 36px;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
font-size: 20px; font-size: 20px;
} }
} }
.people { .people {
position: relative; position: relative;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 126px; margin-bottom: 126px;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
} }
.pic { .pic {
width: 660px; width: 660px;
height: 465px; height: 465px;
} }
.texts { .texts {
width: 680px; width: 680px;
padding-top: 90px; padding-top: 90px;
} }
h6 { h6 {
margin: 20px 0; margin: 20px 0;
font-size: 40px; font-size: 40px;
} }
.sub { .sub {
font-size: 20px; font-size: 20px;
color: #020202; color: #020202;
} }
.des { .des {
font-size: 18px; font-size: 18px;
color: #020202; color: #020202;
line-height: 30px; line-height: 30px;
} }
} }
.list-block { .list-block {
.inner { .inner {
width: 80%; width: 80%;
@ -427,9 +382,11 @@ export default {
background-color: #fff; background-color: #fff;
} }
} }
.list { .list {
display: flex; display: flex;
justify-content: center; justify-content: center;
li { li {
position: relative; position: relative;
width: calc((100% - 100px) / 3); width: calc((100% - 100px) / 3);
@ -437,57 +394,69 @@ export default {
margin-right: 28px; margin-right: 28px;
text-align: center; text-align: center;
background-color: #f5f5f5; background-color: #f5f5f5;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 353px; height: 353px;
} }
h6 { h6 {
margin: 35px 0 5px; margin: 35px 0 5px;
font-size: 24px; font-size: 24px;
color: #272727; color: #272727;
} }
.des { .des {
font-size: 16px; font-size: 16px;
color: #757575; color: #757575;
} }
} }
.staff { .staff {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #f8f8f8; background: #f8f8f8;
.left { .left {
width: 658px; width: 658px;
margin: 50px 0 0 46px; margin: 50px 0 0 46px;
} }
h6 { h6 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 30px; font-size: 30px;
color: #333; color: #333;
} }
.des { .des {
font-size: 20px; font-size: 20px;
color: #333; color: #333;
line-height: 34px; line-height: 34px;
} }
.pic { .pic {
width: 650px; width: 650px;
} }
} }
.stat { .stat {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 60px; margin-top: 60px;
li { li {
position: relative; position: relative;
width: 30%; width: 30%;
margin-bottom: 50px; margin-bottom: 50px;
} }
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 60px; font-size: 60px;
@ -496,6 +465,7 @@ export default {
color: #035ce1; color: #035ce1;
line-height: 49px; line-height: 49px;
} }
.text { .text {
font-size: 24px; font-size: 24px;
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/ABOUT</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,17 +15,12 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block history gray"> <div class="block history gray">
@ -39,14 +32,9 @@
<div class="line"></div> <div class="line"></div>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div>
@click="toSet(1)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
@ -55,45 +43,38 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[7].form.title }}</h2> <h2 class="b-title">{{ modules[7].form.title }}</h2>
<p class="intro">{{ modules[7].form.des }}</p> <p class="intro">{{ modules[7].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(7)">点击更换标题与描述</div>
@click="toSet(7)">点击更换标题与描述</div>
</div> </div>
<ul class="stat"> <ul class="stat">
<li> <li>
<p class="num">{{ modules[8].form.title }}</p> <p class="num">{{ modules[8].form.title }}</p>
<p class="text">{{ modules[8].form.des }}</p> <p class="text">{{ modules[8].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
@click="toSet(8)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[9].form.title }}</p> <p class="num">{{ modules[9].form.title }}</p>
<p class="text">{{ modules[9].form.des }}</p> <p class="text">{{ modules[9].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(9)">点击更换标题与描述</div>
@click="toSet(9)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[10].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
@click="toSet(10)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[11].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(11)">点击更换标题与描述</div>
@click="toSet(11)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(12)">点击更换标题与描述</div>
@click="toSet(12)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[13].form.title }}</p> <p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[13].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(13)">点击更换标题与描述</div>
@click="toSet(13)">点击更换标题与描述</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -101,19 +82,14 @@
<div class="plan c-wrap"> <div class="plan c-wrap">
<div class="inner"> <div class="inner">
<img class="pic" <img class="pic" :src="modules[14].form.pic" alt="">
:src="modules[14].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[14].form.title }}</h6> <h6>{{ modules[14].form.title }}</h6>
<div class="des">{{ modules[14].form.des }}</div> <div class="des">{{ modules[14].form.des }}</div>
<img src="@/assets/images/arrow-white.png" <img src="@/assets/images/arrow-white.png" alt="">
alt="">
</div> </div>
</div> </div>
<div class="cover" <div class="cover" style="height: calc(100% + 60px);" @click="toSet(14)">点击更换标题概述与跳转</div>
style="height: calc(100% + 60px);"
@click="toSet(14)">点击更换标题概述与跳转</div>
</div> </div>
<div class="block"> <div class="block">
@ -121,28 +97,21 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[15].form.title }}</h2> <h2 class="b-title">{{ modules[15].form.title }}</h2>
<p class="intro">{{ modules[15].form.des }}</p> <p class="intro">{{ modules[15].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(15)">点击更换标题与描述</div>
@click="toSet(15)">点击更换标题与描述</div>
</div> </div>
<ul class="people"> <ul class="people">
<template v-for="(item, i) in modules[16].list"> <template v-for="(item, i) in modules[16].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i">
:key="i"> <img class="pic" :src="item.pic" alt="">
<img class="pic"
:src="item.pic"
alt="">
<div class="texts"> <div class="texts">
<p class="sub">{{ item.subTitle }}</p> <p class="sub">{{ item.subTitle }}</p>
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p> <p class="des">{{ item.des }}</p>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
</template> </template>
<div class="cover" <div class="cover" @click="toSet(16)">点击更改图片标题概述与链接</div>
@click="toSet(16)">点击更改图片标题概述与链接</div>
</ul> </ul>
</div> </div>
</div> </div>
@ -152,36 +121,26 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[17].form.title }}</h2> <h2 class="b-title">{{ modules[17].form.title }}</h2>
<p class="intro">{{ modules[17].form.des }}</p> <p class="intro">{{ modules[17].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(17)">点击更换标题与描述</div>
@click="toSet(17)">点击更换标题与描述</div>
</div> </div>
<ul class="list"> <ul class="list">
<li> <li>
<img class="pic" <img class="pic" :src="modules[18].form.pic" alt="">
:src="modules[18].form.pic"
alt="">
<h6>{{ modules[18].form.title }}</h6> <h6>{{ modules[18].form.title }}</h6>
<p class="des">{{ modules[18].form.des }}</p> <p class="des">{{ modules[18].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(18)">点击更改图片标题概述与链接</div>
@click="toSet(18)">点击更改图片标题概述与链接</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" :src="modules[19].form.pic" alt="">
:src="modules[19].form.pic"
alt="">
<h6>{{ modules[19].form.title }}</h6> <h6>{{ modules[19].form.title }}</h6>
<p class="des">{{ modules[19].form.des }}</p> <p class="des">{{ modules[19].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(19)">点击更改图片标题概述与链接</div>
@click="toSet(19)">点击更改图片标题概述与链接</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" :src="modules[20].form.pic" alt="">
:src="modules[20].form.pic"
alt="">
<h6>{{ modules[20].form.title }}</h6> <h6>{{ modules[20].form.title }}</h6>
<p class="des">{{ modules[20].form.des }}</p> <p class="des">{{ modules[20].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(20)">点击更改图片标题概述与链接</div>
@click="toSet(20)">点击更改图片标题概述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -192,28 +151,21 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[21].form.title }}</h2> <h2 class="b-title">{{ modules[21].form.title }}</h2>
<p class="intro">{{ modules[21].form.des }}</p> <p class="intro">{{ modules[21].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(21)">点击更换标题与描述</div>
@click="toSet(21)">点击更换标题与描述</div>
</div> </div>
<div class="staff"> <div class="staff">
<div class="left"> <div class="left">
<h6>{{ modules[22].form.title }}</h6> <h6>{{ modules[22].form.title }}</h6>
<div class="des">{{ modules[22].form.des }}</div> <div class="des">{{ modules[22].form.des }}</div>
</div> </div>
<img class="pic" <img class="pic" :src="modules[22].form.pic" alt="">
:src="modules[22].form.pic" <div class="cover" @click="toSet(22)">点击更改图片标题概述与链接</div>
alt="">
<div class="cover"
@click="toSet(22)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -227,25 +179,7 @@ export default {
modules: Modules.about modules: Modules.about
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'ABOUT'
}
])
},
methods: { methods: {
} }
@ -254,11 +188,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.history { .history {
h2 { h2 {
font-size: 30px; font-size: 30px;
color: #333; color: #333;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -267,28 +203,34 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
} }
.left { .left {
width: 695px; width: 695px;
} }
.line { .line {
width: 136px; width: 136px;
height: 2px; height: 2px;
margin: 20px 0; margin: 20px 0;
background: #d7d7d7; background: #d7d7d7;
} }
.des { .des {
font-size: 22px; font-size: 22px;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
} }
.bg { .bg {
margin: -122px 0 0 0; margin: -122px 0 0 0;
border-top-right-radius: 40px; border-top-right-radius: 40px;
} }
} }
.card { .card {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
width: 686px; width: 686px;
@ -296,89 +238,111 @@ export default {
padding: 70px 67px 20px; padding: 70px 67px 20px;
margin-bottom: 28px; margin-bottom: 28px;
color: #fff; color: #fff;
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 28px; margin-right: 28px;
} }
} }
.item1 { .item1 {
background: url(../../../assets/images/about/3.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
} }
.item2 { .item2 {
background-color: #4984b6; background-color: #4984b6;
} }
.item3 { .item3 {
background-color: #567180; background-color: #567180;
} }
.item4 { .item4 {
background: url(../../../assets/images/about/4.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 40px; font-size: 40px;
font-family: toppan; font-family: toppan;
} }
.des { .des {
font-size: 18px; font-size: 18px;
} }
} }
.plan { .plan {
padding: 73px 0; padding: 73px 0;
background: #072947; background: #072947;
.inner { .inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 1575px; width: 1575px;
} }
.pic { .pic {
width: 664px; width: 664px;
height: 488px; height: 488px;
margin-bottom: -120px; margin-bottom: -120px;
} }
.texts { .texts {
width: 802px; width: 802px;
margin-top: 36px; margin-top: 36px;
color: #fff; color: #fff;
} }
h6 { h6 {
font-size: 36px; font-size: 36px;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
font-size: 20px; font-size: 20px;
} }
} }
.people { .people {
position: relative; position: relative;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 126px; margin-bottom: 126px;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
} }
.pic { .pic {
width: 660px; width: 660px;
height: 465px; height: 465px;
} }
.texts { .texts {
width: 680px; width: 680px;
padding-top: 90px; padding-top: 90px;
} }
h6 { h6 {
margin: 20px 0; margin: 20px 0;
font-size: 40px; font-size: 40px;
} }
.sub { .sub {
font-size: 20px; font-size: 20px;
color: #020202; color: #020202;
} }
.des { .des {
font-size: 18px; font-size: 18px;
color: #020202; color: #020202;
line-height: 30px; line-height: 30px;
} }
} }
.list-block { .list-block {
.inner { .inner {
width: 80%; width: 80%;
@ -386,9 +350,11 @@ export default {
background-color: #fff; background-color: #fff;
} }
} }
.list { .list {
display: flex; display: flex;
justify-content: center; justify-content: center;
li { li {
position: relative; position: relative;
width: calc((100% - 100px) / 3); width: calc((100% - 100px) / 3);
@ -396,57 +362,69 @@ export default {
margin-right: 28px; margin-right: 28px;
text-align: center; text-align: center;
background-color: #f5f5f5; background-color: #f5f5f5;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 353px; height: 353px;
} }
h6 { h6 {
margin: 35px 0 5px; margin: 35px 0 5px;
font-size: 24px; font-size: 24px;
color: #272727; color: #272727;
} }
.des { .des {
font-size: 16px; font-size: 16px;
color: #757575; color: #757575;
} }
} }
.staff { .staff {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #f8f8f8; background: #f8f8f8;
.left { .left {
width: 658px; width: 658px;
margin: 50px 0 0 46px; margin: 50px 0 0 46px;
} }
h6 { h6 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 30px; font-size: 30px;
color: #333; color: #333;
} }
.des { .des {
font-size: 20px; font-size: 20px;
color: #333; color: #333;
line-height: 34px; line-height: 34px;
} }
.pic { .pic {
width: 650px; width: 650px;
} }
} }
.stat { .stat {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 60px; margin-top: 60px;
li { li {
position: relative; position: relative;
width: 30%; width: 30%;
margin-bottom: 50px; margin-bottom: 50px;
} }
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 60px; font-size: 60px;
@ -455,6 +433,7 @@ export default {
color: #035ce1; color: #035ce1;
line-height: 49px; line-height: 49px;
} }
.text { .text {
font-size: 24px; font-size: 24px;
} }

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap index"> <div class="wrap index">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于我们</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -191,25 +191,7 @@ export default {
components: { components: {
scroll scroll
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于我们'
}
])
},
methods: { methods: {
} }

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/APPLICATION</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -161,25 +161,7 @@ export default {
modules: Modules.application modules: Modules.application
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'APPLICATION'
}
])
},
methods: { methods: {
} }

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/CAREERS</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -12,7 +12,8 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <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"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img width="100%" height="100%" :src="item.pic" alt=""> <img width="100%" height="100%" :src="item.pic" alt="">
@ -121,30 +122,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.careers modules: Modules.careers
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'CAREERS'
}
])
},
methods: { methods: {
} }
@ -153,9 +136,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.card { .card {
display: flex; display: flex;
justify-content: center; justify-content: center;
li { li {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -167,11 +152,13 @@ export default {
margin-right: 14px; margin-right: 14px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
.arrow { .arrow {
opacity: 1; opacity: 1;
} }
} }
.pic { .pic {
position: absolute; position: absolute;
top: 0; top: 0;
@ -179,16 +166,20 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.texts { .texts {
position: relative; position: relative;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 35px; font-size: 35px;
} }
.text { .text {
font-size: 24px; font-size: 24px;
} }
.arrow { .arrow {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -202,44 +193,54 @@ export default {
} }
} }
} }
.people { .people {
position: relative; position: relative;
li { li {
position: relative; position: relative;
min-height: 450px; min-height: 450px;
padding: 100px 70px 30px 57px; padding: 100px 70px 30px 57px;
margin-bottom: 100px; margin-bottom: 100px;
background-color: #fff; background-color: #fff;
&:nth-child(even) { &:nth-child(even) {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.comma { .comma {
left: 660px; left: 660px;
} }
.pic { .pic {
left: 0; left: 0;
right: auto; right: auto;
} }
} }
} }
.comma { .comma {
position: absolute; position: absolute;
top: -22px; top: -22px;
left: 57px; left: 57px;
} }
.left { .left {
width: 670px; width: 670px;
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
color: #333; color: #333;
} }
.des { .des {
margin-top: 20px; margin-top: 20px;
font-size: 20px; font-size: 20px;
color: #666; color: #666;
line-height: 32px; line-height: 32px;
} }
.pic { .pic {
position: absolute; position: absolute;
top: -60px; top: -60px;
@ -248,8 +249,10 @@ export default {
height: 450px; height: 450px;
} }
} }
.shows { .shows {
position: relative; position: relative;
li { li {
position: relative; position: relative;
display: flex; display: flex;
@ -258,20 +261,24 @@ export default {
height: 654px; height: 654px;
margin-bottom: 40px; margin-bottom: 40px;
color: #fff; color: #fff;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
&:nth-child(2) { &:nth-child(2) {
.left { .left {
background-color: rgba(47, 79, 23, .65); background-color: rgba(47, 79, 23, .65);
} }
} }
&:nth-child(3) { &:nth-child(3) {
.left { .left {
background-color: rgba(91, 58, 35, .65); background-color: rgba(91, 58, 35, .65);
} }
} }
} }
.left { .left {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -280,6 +287,7 @@ export default {
padding: 138px 30px 30px 103px; padding: 138px 30px 30px 103px;
background-color: rgba(54, 54, 54, .65); background-color: rgba(54, 54, 54, .65);
} }
.pic { .pic {
position: absolute; position: absolute;
top: 0; top: 0;
@ -287,13 +295,16 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
h6 { h6 {
font-size: 46px; font-size: 46px;
} }
.sub { .sub {
margin: 20px 0; margin: 20px 0;
font-size: 36px; font-size: 36px;
} }
.des { .des {
margin-bottom: 40px; margin-bottom: 40px;
font-size: 24px; font-size: 24px;

@ -2,13 +2,11 @@
<!-- 联系我们 --> <!-- 联系我们 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/联系我们</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,15 +14,12 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block"> <div class="block">
@ -33,52 +28,27 @@
<div class="fields"> <div class="fields">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div v-html="modules[1].form.info"></div> <div v-html="modules[1].form.info"></div>
<div class="cover" <div class="cover" style="top: -20px;" @click="toSet(1)">点击更换文本</div>
style="top: -20px;"
@click="toSet(1)">点击更换文本</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<img :src="modules[2].form.pic" <img :src="modules[2].form.pic" alt="" class="pic">
alt="" <div class="cover" @click="toSet(2)">点击更换图片</div>
class="pic">
<div class="cover"
@click="toSet(2)">点击更换图片</div>
</div> </div>
<div class="c-wrap m-t-20"> <div class="c-wrap m-t-20">
<el-table :data="modules[3].list" <el-table :data="modules[3].list" class="patent-table" ref="table" stripe header-align="center">
class="patent-table" <el-table-column prop="dep" label="部门" align="center" min-width="250"></el-table-column>
ref="table" <el-table-column prop="contacts" label="联系人" align="center" min-width="100"></el-table-column>
stripe <el-table-column prop="phone" label="电话" align="center" min-width="150"></el-table-column>
header-align="center"> <el-table-column prop="email" label="邮箱" align="center" min-width="150"></el-table-column>
<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> </el-table>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换文本</div>
@click="toSet(3)">点击更换文本</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -92,25 +62,7 @@ export default {
modules: Modules.contactUs modules: Modules.contactUs
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '联系我们'
}
])
},
methods: { methods: {
} }
@ -124,31 +76,37 @@ export default {
.banner-img { .banner-img {
height: 21.6rem; height: 21.6rem;
} }
.texts { .texts {
h6 { h6 {
font-size: 2.16rem; font-size: 2.16rem;
margin-bottom: 0.95rem; margin-bottom: 0.95rem;
} }
.banner-des { .banner-des {
font-size: 0.96rem; font-size: 0.96rem;
} }
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
background: url(https://huorantech.com/images/contactUs/3.png) 0 130px no-repeat, background: url(https://huorantech.com/images/contactUs/3.png) 0 130px no-repeat,
url(https://huorantech.com/images/contactUs/4.png) bottom right no-repeat; url(https://huorantech.com/images/contactUs/4.png) bottom right no-repeat;
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.inner { .inner {
.contact { .contact {
padding: 3rem 6rem; padding: 3rem 6rem;
background-color: #fff; background-color: #fff;
} }
.fields { .fields {
position: relative; position: relative;
padding: 2rem; padding: 2rem;
border: 4px solid #f9f9f9; border: 4px solid #f9f9f9;
h6 { h6 {
position: absolute; position: absolute;
top: -16px; top: -16px;
@ -158,12 +116,14 @@ export default {
color: #333; color: #333;
background-color: #fff; background-color: #fff;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
line-height: 1.6; line-height: 1.6;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
margin: 2rem 0 1.5rem; margin: 2rem 0 1.5rem;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-发展历程</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -54,25 +54,7 @@ export default {
modules: Modules.devHistory modules: Modules.devHistory
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于IASF-发展历程'
}
])
},
methods: { methods: {
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/装置介绍</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,72 +15,50 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block share"> <div class="block share">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en" <p class="en" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p> <div class="cover" @click="toSet(1)">点击更改标题与描述</div>
<div class="cover"
@click="toSet(1)">点击更改标题与描述</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<div class="sum">{{ modules[2].form.title }}</div> <div class="sum">{{ modules[2].form.title }}</div>
<div class="flex"> <div class="flex">
<div class="left"> <div class="left">
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更改标题描述与图片</div>
@click="toSet(2)">点击更改标题描述与图片</div>
</div> </div>
</div> </div>
</div> </div>
<div class="intro"> <div class="intro">
<div class="intro-inner c-wrap"> <div class="intro-inner c-wrap">
<img class="pic" <img class="pic" :src="modules[3].form.pic" alt="">
:src="modules[3].form.pic" <div class="des" v-html="modules[3].form.des"></div>
alt=""> <div class="cover" @click="toSet(3)">点击更改描述</div>
<div class="des"
v-html="modules[3].form.des"></div>
<div class="cover"
@click="toSet(3)">点击更改描述</div>
</div> </div>
</div> </div>
<div class="unit"> <div class="unit">
<div class="title" <div class="title" v-html="modules[4].form.title"></div>
v-html="modules[4].form.title"></div> <img class="pic" :src="modules[4].form.pic" alt="">
<img class="pic" <div class="cover" @click="toSet(4)">点击更改标题与图片</div>
:src="modules[4].form.pic"
alt="">
<div class="cover"
@click="toSet(4)">点击更改标题与图片</div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -96,25 +72,7 @@ export default {
modules: Modules.deviceIntroBeam modules: Modules.deviceIntroBeam
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '装置介绍'
}
])
},
methods: { methods: {
} }
@ -123,21 +81,27 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background: url(https://huorantech.com/images/device/4.png) (100% 1363px) / auto no-repeat; background: url(https://huorantech.com/images/device/4.png) (100% 1363px) / auto no-repeat;
} }
.banner { .banner {
background: url(https://huorantech.com/images/device/13.png) 0 0/100% 100% no-repeat; background: url(https://huorantech.com/images/device/13.png) 0 0/100% 100% no-repeat;
} }
.share { .share {
position: relative; position: relative;
.inner { .inner {
width: 1323px; width: 1323px;
} }
.left { .left {
width: 547px; width: 547px;
margin-right: 66px; margin-right: 66px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 48px; font-size: 48px;
@ -145,6 +109,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.en { .en {
margin-top: -35px; margin-top: -35px;
font-size: 48px; font-size: 48px;
@ -152,6 +117,7 @@ export default {
font-weight: 300; font-weight: 300;
color: #e3e3e3; color: #e3e3e3;
} }
.sum { .sum {
margin-top: 60px; margin-top: 60px;
font-size: 28px; font-size: 28px;
@ -160,6 +126,7 @@ export default {
color: #333333; color: #333333;
line-height: 44px; line-height: 44px;
} }
.des { .des {
margin-top: 25px; margin-top: 25px;
font-size: 18px; font-size: 18px;
@ -167,6 +134,7 @@ export default {
line-height: 37px; line-height: 37px;
overflow: visible; overflow: visible;
} }
.pic { .pic {
width: 710px; width: 710px;
height: 509px; height: 509px;
@ -174,21 +142,25 @@ export default {
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
} }
.intro { .intro {
width: 80%; width: 80%;
height: 19.65rem; height: 19.65rem;
padding-left: 14%; padding-left: 14%;
margin-bottom: 67px; margin-bottom: 67px;
background-color: #2e4984; background-color: #2e4984;
.intro-inner { .intro-inner {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
} }
.pic { .pic {
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
.des { .des {
width: 50%; width: 50%;
height: 19.65rem; height: 19.65rem;
@ -199,11 +171,13 @@ export default {
-webkit-line-clamp: 7; -webkit-line-clamp: 7;
} }
} }
.unit { .unit {
position: relative; position: relative;
width: 986px; width: 986px;
padding-bottom: 60px; padding-bottom: 60px;
margin: 0 auto; margin: 0 auto;
.title { .title {
padding-left: 15px; padding-left: 15px;
margin-bottom: 15px; margin-bottom: 15px;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/装置介绍</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,17 +15,12 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block share"> <div class="block share">
@ -35,56 +28,35 @@
<div class="c-wrap"> <div class="c-wrap">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p> <p class="en">{{ modules[1].form.subTitle }}</p>
<div class="card" <div class="card" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div> <div class="cover" @click="toSet(1)">点击更改标题小标题与概述</div>
<div class="cover"
@click="toSet(1)">点击更改标题小标题与概述</div>
</div> </div>
<div class="flex c-wrap" <div class="flex c-wrap" style="margin-top: 50px">
style="margin-top: 50px">
<div class="left"> <div class="left">
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic" <div class="cover" @click="toSet(2)">点击更改概述与图片</div>
alt="">
<div class="cover"
@click="toSet(2)">点击更改概述与图片</div>
</div> </div>
</div> </div>
</div> </div>
<div class="intro"> <div class="intro">
<img class="bg" <img class="bg" src="https://huorantech.com/images/device/7.png" alt="">
src="https://huorantech.com/images/device/7.png" <div class="c-wrap" style="min-height: 700px">
alt=""> <img class="pic" style="max-height: 600px" :src="modules[3].form.pic" alt="">
<div class="c-wrap" <div class="cover" @click="toSet(3)">点击更改图片</div>
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> </div>
<div class="unit c-wrap"> <div class="unit c-wrap">
<div class="title" <div class="title" v-html="modules[4].form.title"></div>
v-html="modules[4].form.title"></div> <img class="pic" :src="modules[4].form.pic" alt="">
<img class="pic" <div class="cover" @click="toSet(4)">点击更改标题与图片</div>
:src="modules[4].form.pic"
alt="">
<div class="cover"
@click="toSet(4)">点击更改标题与图片</div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -98,25 +70,7 @@ export default {
modules: Modules.deviceIntroLayout modules: Modules.deviceIntroLayout
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '装置介绍'
}
])
},
methods: { methods: {
} }
@ -125,19 +79,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background: url(https://huorantech.com/images/device/4.png) bottom right/auto no-repeat; background: url(https://huorantech.com/images/device/4.png) bottom right/auto no-repeat;
} }
.share { .share {
position: relative; position: relative;
.inner { .inner {
width: 90%; width: 90%;
max-width: 1323px; max-width: 1323px;
} }
.left { .left {
width: 547px; width: 547px;
margin-right: 66px; margin-right: 66px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 48px; font-size: 48px;
@ -145,6 +104,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.en { .en {
margin: -35px 0 40px; margin: -35px 0 40px;
font-size: 48px; font-size: 48px;
@ -152,6 +112,7 @@ export default {
font-weight: 300; font-weight: 300;
color: #e3e3e3; color: #e3e3e3;
} }
.card { .card {
max-width: 1671px; max-width: 1671px;
width: 90%; width: 90%;
@ -163,6 +124,7 @@ export default {
line-height: 38px; line-height: 38px;
background: url(https://huorantech.com/images/device/5.png) 0 0 / cover no-repeat; background: url(https://huorantech.com/images/device/5.png) 0 0 / cover no-repeat;
} }
.des { .des {
margin-top: 25px; margin-top: 25px;
font-size: 18px; font-size: 18px;
@ -170,21 +132,25 @@ export default {
line-height: 37px; line-height: 37px;
overflow: visible; overflow: visible;
} }
.pic { .pic {
width: 710px; width: 710px;
height: 509px; height: 509px;
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
} }
.intro { .intro {
position: relative; position: relative;
height: 794px; height: 794px;
margin-bottom: 37px; margin-bottom: 37px;
.bg { .bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.pic { .pic {
position: absolute; position: absolute;
top: 67px; top: 67px;
@ -192,10 +158,12 @@ export default {
width: 74%; width: 74%;
} }
} }
.unit { .unit {
width: 986px; width: 986px;
padding-bottom: 60px; padding-bottom: 60px;
margin: 0 auto; margin: 0 auto;
.title { .title {
padding-left: 15px; padding-left: 15px;
margin-bottom: 15px; margin-bottom: 15px;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/装置介绍</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,41 +15,29 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block history gray"> <div class="block history gray">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="wow fadeInLeft" <h2 class="wow fadeInLeft" v-html="modules[1].form.title"></h2>
v-html="modules[1].form.title"></h2>
<p class="en">{{ modules[1].form.des }}</p> <p class="en">{{ modules[1].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(1)">点击更改标题与概述</div>
@click="toSet(1)">点击更改标题与概述</div>
</div> </div>
<div class="texts wow fadeInDown" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<div class="left c-wrap"> <div class="left c-wrap">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="line"></div> <div class="line"></div>
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div> <div class="cover" @click="toSet(2)">点击更改标题与概述</div>
<div class="cover"
@click="toSet(2)">点击更改标题与概述</div>
</div> </div>
<img class="bg" <img class="bg" src="https://huorantech.com/images/device/10.png" alt="">
src="https://huorantech.com/images/device/10.png"
alt="">
</div> </div>
</div> </div>
</div> </div>
@ -59,29 +45,20 @@
<div class="block intro"> <div class="block intro">
<div class="inner"> <div class="inner">
<div class="left c-wrap"> <div class="left c-wrap">
<div class="title1" <div class="title1" v-html="modules[3].form.title"></div>
v-html="modules[3].form.title"></div> <img :src="modules[3].form.pic" alt="">
<img :src="modules[3].form.pic" <div class="cover" @click="toSet(3)">点击更改标题与图片</div>
alt="">
<div class="cover"
@click="toSet(3)">点击更改标题与图片</div>
</div> </div>
<div class="right c-wrap"> <div class="right c-wrap">
<div class="title2" <div class="title2" v-html="modules[4].form.title"></div>
v-html="modules[4].form.title"></div> <img :src="modules[4].form.pic" alt="">
<img :src="modules[4].form.pic" <div class="cover" @click="toSet(4)">点击更改标题与图片</div>
alt="">
<div class="cover"
@click="toSet(4)">点击更改标题与图片</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -95,25 +72,7 @@ export default {
modules: Modules.deviceIntroLinear modules: Modules.deviceIntroLinear
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '装置介绍'
}
])
},
methods: { methods: {
} }
@ -122,11 +81,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.history { .history {
.inner { .inner {
width: 90%; width: 90%;
max-width: 1504px; max-width: 1504px;
} }
h2 { h2 {
position: relative; position: relative;
font-size: 48px; font-size: 48px;
@ -134,6 +95,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #1c1c1c; color: #1c1c1c;
} }
.en { .en {
margin: -35px 0 40px; margin: -35px 0 40px;
font-size: 48px; font-size: 48px;
@ -141,6 +103,7 @@ export default {
font-weight: 300; font-weight: 300;
color: #e3e3e3; color: #e3e3e3;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -149,19 +112,23 @@ export default {
background: #1583ff; background: #1583ff;
border-radius: 65px 100px 0px 0px; border-radius: 65px 100px 0px 0px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 50%; width: 50%;
} }
h6 { h6 {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
} }
.line { .line {
width: 214px; width: 214px;
height: 5px; height: 5px;
@ -169,6 +136,7 @@ export default {
background: #ffffff; background: #ffffff;
opacity: 0.52; opacity: 0.52;
} }
.des { .des {
font-size: 22px; font-size: 22px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
@ -177,25 +145,30 @@ export default {
line-height: 44px; line-height: 44px;
overflow: visible; overflow: visible;
} }
.bg { .bg {
width: 50%; width: 50%;
margin: -142px -50px 0 0; margin: -142px -50px 0 0;
border-top-left-radius: 30px; border-top-left-radius: 30px;
} }
} }
.intro { .intro {
.inner { .inner {
display: flex; display: flex;
width: 90%; width: 90%;
max-width: 1504px; max-width: 1504px;
} }
.left { .left {
width: 30%; width: 30%;
} }
.right { .right {
width: 68%; width: 68%;
margin-left: 2%; margin-left: 2%;
} }
.title1 { .title1 {
margin-bottom: 0.93rem; margin-bottom: 0.93rem;
font-size: 0.88rem; font-size: 0.88rem;
@ -213,6 +186,7 @@ export default {
color: #2a2a2a; color: #2a2a2a;
border-left: 4px solid #1583ff; border-left: 4px solid #1583ff;
} }
img { img {
width: 100%; width: 100%;
height: 85%; height: 85%;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/EDUCATION & COLLABORATION</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -12,7 +12,8 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <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"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img width="100%" height="100%" :src="item.pic" alt=""> <img width="100%" height="100%" :src="item.pic" alt="">
@ -73,30 +74,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.edu modules: Modules.edu
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'EDUCATION & COLLABORATION'
}
])
},
methods: { methods: {
} }
@ -105,21 +88,26 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.list { .list {
li { li {
position: relative; position: relative;
&:nth-child(even) { &:nth-child(even) {
text-align: right; text-align: right;
.texts { .texts {
left: 0; left: 0;
text-align: left; text-align: left;
} }
} }
} }
.pic { .pic {
width: 650px; width: 650px;
height: 730px; height: 730px;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 120px; top: 120px;
@ -129,16 +117,19 @@ export default {
padding: 60px 30px 30px 100px; padding: 60px 30px 30px 100px;
background-color: #fff; background-color: #fff;
} }
h6 { h6 {
font-size: 40px; font-size: 40px;
color: #3C3C3C; color: #3C3C3C;
} }
.sub { .sub {
margin: 20px 0; margin: 20px 0;
font-size: 24px; font-size: 24px;
color: #1C1C1C; color: #1C1C1C;
line-height: 33px; line-height: 33px;
} }
.des { .des {
font-size: 20px; font-size: 20px;
color: #3C3C3C; color: #3C3C3C;

@ -2,13 +2,11 @@
<!-- 产业光源-大事记 --> <!-- 产业光源-大事记 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/产业光源-概况-大事记</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,22 +14,17 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" <li :class="{ active: i == active }" :key="i" @click="tabChange(i)">{{ item }}</li>
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
@ -40,46 +33,34 @@
<h2 class="wow fadeInLeft">大事记</h2> <h2 class="wow fadeInLeft">大事记</h2>
<p class="en">DEVELOPMENT HISTORY</p> <p class="en">DEVELOPMENT HISTORY</p>
<div v-if="modules[1].list.length" <div v-if="modules[1].list.length" class="event">
class="event">
<ul class="time"> <ul class="time">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }" @click="yearClick(i)">{{ item.title }}
:key="i" </li>
:class="{active: curYear == i}"
@click="yearClick(i)">{{ item.title }}</li>
</template> </template>
</ul> </ul>
<div class="right"> <div class="right">
<h6 class="year">{{ modules[1].list[curYear].title }}</h6> <h6 class="year">{{ modules[1].list[curYear].title }}</h6>
<ul class="list"> <ul class="list">
<template v-for="(e, j) in modules[1].list[curYear].list"> <template v-for="(e, j) in modules[1].list[curYear].list">
<li v-if="e.isEnable" <li v-if="e.isEnable" :key="j">
:key="j">
<div class="texts"> <div class="texts">
<p class="date">{{ e.title }}</p> <p class="date">{{ e.title }}</p>
<p class="text">{{ e.des }}</p> <p class="text">{{ e.des }}</p>
</div> </div>
<img v-if="e.pic" <img v-if="e.pic" :src="e.pic" alt="" class="pic">
:src="e.pic"
alt=""
class="pic">
</li> </li>
</template> </template>
</ul> </ul>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" style="min-height: 300px;" @click="toSet(1)">点击配置历程</div>
style="min-height: 300px;"
@click="toSet(1)">点击配置历程</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -96,25 +77,7 @@ export default {
curYear: 0 curYear: 0
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-大事记'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -126,14 +89,17 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../../../styles/page/page.scss'; @import '../../../../../styles/page/page.scss';
.wrap { .wrap {
background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat, background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat; url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -142,12 +108,14 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.history { .history {
h2 { h2 {
position: relative; position: relative;
@ -156,6 +124,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #1c1c1c; color: #1c1c1c;
} }
.en { .en {
margin: -15px 0 40px; margin: -15px 0 40px;
font-size: 2.2rem; font-size: 2.2rem;
@ -164,14 +133,17 @@ export default {
color: #e3e3e3; color: #e3e3e3;
} }
} }
.event { .event {
display: flex; display: flex;
justify-content: center; justify-content: center;
.time { .time {
width: 200px; width: 200px;
padding-right: 10px; padding-right: 10px;
margin-right: 20px; margin-right: 20px;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -185,10 +157,12 @@ export default {
color: #666; color: #666;
box-shadow: inset 0px -1px 0px 0px #dddddd; box-shadow: inset 0px -1px 0px 0px #dddddd;
cursor: pointer; cursor: pointer;
&.active { &.active {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%); background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
&:before { &:before {
content: ''; content: '';
width: 18px; width: 18px;
@ -199,9 +173,11 @@ export default {
} }
} }
} }
.right { .right {
width: 1000px; width: 1000px;
} }
.year { .year {
margin: 0 0 20px 20px; margin: 0 0 20px 20px;
font-size: 3.8rem; font-size: 3.8rem;
@ -209,8 +185,10 @@ export default {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
} }
.list { .list {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -218,9 +196,11 @@ export default {
padding: 30px; padding: 30px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.texts { .texts {
width: 500px; width: 500px;
} }
.date { .date {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.2rem; font-size: 1.2rem;
@ -228,10 +208,12 @@ export default {
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.text { .text {
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
@include mul-ellipsis(3); @include mul-ellipsis(3);
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -242,6 +224,7 @@ export default {
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
.pic { .pic {
width: 350px; width: 350px;
height: 195px; height: 195px;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/产业光源</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,17 +15,12 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block banner-block"> <div class="block banner-block">
@ -38,62 +31,49 @@
<span class="sub">{{ modules[1].form.subTitle }}</span> <span class="sub">{{ modules[1].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换标题与小标题</div>
@click="toSet(1)">点击更换标题与小标题</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<div class="sfel-banner"> <div class="sfel-banner">
<img style="width: 50%;height: 410px;overflow: hidden;" <img style="width: 50%;height: 410px;overflow: hidden;" width="100%" height="480"
width="100%" src="https://huorantech.com/images/about/5.png" alt="">
height="480"
src="https://huorantech.com/images/about/5.png"
alt="">
<div class="right"> <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> <h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and
<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> 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> <p class="meta">2022-07-24 | Research</p>
</div> </div>
</div> </div>
<ul class="card"> <ul class="card">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/11.png" alt="">
src="https://huorantech.com/images/about/11.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
</ul> </ul>
<div class="cover" <div class="cover" @click="toSet(2)">关联栏目</div>
@click="toSet(2)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
@ -106,23 +86,16 @@
<span class="sub">{{ modules[3].form.subTitle }}</span> <span class="sub">{{ modules[3].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换标题与小标题</div>
@click="toSet(3)">点击更换标题与小标题</div>
</div> </div>
<div class="shows"> <div class="shows">
<div class="left wow fadeInLeft" <div class="left wow fadeInLeft" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <el-button type="primary" round>这里跳转</el-button>
<el-button type="primary"
round>这里跳转</el-button>
</div> </div>
<img :src="modules[4].form.pic" <img :src="modules[4].form.pic" alt="" class="pic">
alt="" <div class="cover" @click="toSet(4)">点击更换标题描述图片与链接</div>
class="pic">
<div class="cover"
@click="toSet(4)">点击更换标题描述图片与链接</div>
</div> </div>
</div> </div>
</div> </div>
@ -135,102 +108,73 @@
<span class="sub">{{ modules[5].form.subTitle }}</span> <span class="sub">{{ modules[5].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(5)">点击更换标题与小标题</div>
@click="toSet(5)">点击更换标题与小标题</div>
</div> </div>
<div class="shows c-wrap"> <div class="shows c-wrap">
<div class="left"> <div class="left">
<img width="100%" <img width="100%" height="100%" src="https://huorantech.com/images/about/9.png" alt="">
height="100%"
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div> <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
</div> </div>
<ul class="card-list"> <ul class="card-list">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<h6>专业技术培训 | 自由电子激光装置中的结构</h6> <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
<p class="sum">加速器总体-直线加速器总体-高重频电子枪组</p> <p class="sum">加速器总体-直线加速器总体-高重频电子枪组</p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/mine.png" alt="">
src="@/assets/images/mine.png"
alt="">
邵佳航 邵佳航
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/time.png" alt="">
src="@/assets/images/time.png"
alt="">
会议时间: 2022年8月13日 14:30 会议时间: 2022年8月13日 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/online.png" alt="">
src="@/assets/images/online.png"
alt="">
总部四楼大会议室 总部四楼大会议室
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<h6>专业技术培训 | 自由电子激光装置中的结构</h6> <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
<p class="sum">加速器总体-直线加速器总体-高重频电子枪组</p> <p class="sum">加速器总体-直线加速器总体-高重频电子枪组</p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/mine.png" alt="">
src="@/assets/images/mine.png"
alt="">
邵佳航 邵佳航
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/time.png" alt="">
src="@/assets/images/time.png"
alt="">
会议时间: 2022年8月13日 14:30 会议时间: 2022年8月13日 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/online.png" alt="">
src="@/assets/images/online.png"
alt="">
总部四楼大会议室 总部四楼大会议室
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<h6>专业技术培训 | 自由电子激光装置中的结构</h6> <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
<p class="sum">加速器总体-直线加速器总体-高重频电子枪组</p> <p class="sum">加速器总体-直线加速器总体-高重频电子枪组</p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/mine.png" alt="">
src="@/assets/images/mine.png"
alt="">
邵佳航 邵佳航
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/time.png" alt="">
src="@/assets/images/time.png"
alt="">
会议时间: 2022年8月13日 14:30 会议时间: 2022年8月13日 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/online.png" alt="">
src="@/assets/images/online.png"
alt="">
总部四楼大会议室 总部四楼大会议室
</p> </p>
</div> </div>
</li> </li>
</ul> </ul>
<div class="cover" <div class="cover" @click="toSet(6)">关联栏目</div>
@click="toSet(6)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
@ -243,19 +187,18 @@
<span class="sub">{{ modules[7].form.subTitle }}</span> <span class="sub">{{ modules[7].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(7)">点击更换标题与小标题</div>
@click="toSet(7)">点击更换标题与小标题</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<div class="slide"> <div class="slide">
<div class="texts"> <div class="texts">
<h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6> <h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6>
<div class="des">X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标面向国民经济主战场和世界科技前沿</div> <div class="des">
X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标面向国民经济主战场和世界科技前沿
</div>
<div class="meta">发表日期2022.01.10 &emsp;浏览量备份</div> <div class="meta">发表日期2022.01.10 &emsp;浏览量备份</div>
</div> </div>
<img class="pic" <img class="pic" src="@/assets/images/survey3.png" alt="">
src="@/assets/images/survey3.png"
alt="">
</div> </div>
<ul class="list"> <ul class="list">
<li> <li>
@ -271,17 +214,13 @@
<p class="date">2022.10.10</p> <p class="date">2022.10.10</p>
</li> </li>
</ul> </ul>
<div class="cover" <div class="cover" @click="toSet(8)">关联栏目</div>
@click="toSet(8)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -295,25 +234,7 @@ export default {
modules: Modules['estate/index'] modules: Modules['estate/index']
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '产业光源'
}
])
},
methods: { methods: {
} }
@ -322,6 +243,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../../../styles/page/page.scss'; @import '../../../../../styles/page/page.scss';
.title { .title {
position: relative; position: relative;
display: flex; display: flex;
@ -330,6 +252,7 @@ export default {
padding-bottom: 25px; padding-bottom: 25px;
margin-bottom: 30px; margin-bottom: 30px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
h5 { h5 {
padding-left: 16px; padding-left: 16px;
font-size: 36px; font-size: 36px;
@ -339,48 +262,60 @@ export default {
line-height: 1; line-height: 1;
border-left: 6px solid #2b96ef; border-left: 6px solid #2b96ef;
} }
.sub { .sub {
font-size: 22px; font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #afb7bf; color: #afb7bf;
} }
.more { .more {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
} }
} }
.lg { .lg {
width: 1505px; width: 1505px;
} }
/deep/.articles { /deep/.articles {
width: 50%; width: 50%;
.el-carousel__indicators--horizontal { .el-carousel__indicators--horizontal {
bottom: 20px; bottom: 20px;
left: 804px; left: 804px;
} }
} }
.banner-block { .banner-block {
background: url(../../../../../assets/images/sfel/2.png) 0 0 / cover no-repeat; background: url(../../../../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
} }
.sfel-banner { .sfel-banner {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.pic { .pic {
transition: 0.5s; transition: 0.5s;
&:hover { &:hover {
transform: scale(1.3); transform: scale(1.3);
} }
} }
.right { .right {
position: relative; position: relative;
width: 50%; width: 50%;
padding: 50px 50px 30px; padding: 50px 50px 30px;
background: #1583ff; background: #1583ff;
color: #fff; color: #fff;
&:hover { &:hover {
background: #465f85; background: #465f85;
h6, h6,
.des, .des,
.meta { .meta {
@ -389,11 +324,13 @@ export default {
} }
} }
} }
.inds { .inds {
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
left: 60px; left: 60px;
display: flex; display: flex;
li { li {
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -401,6 +338,7 @@ export default {
background: #ffffff; background: #ffffff;
border-radius: 50%; border-radius: 50%;
transition: 0.2s; transition: 0.2s;
&.active { &.active {
width: 30px; width: 30px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
@ -408,49 +346,60 @@ export default {
} }
} }
} }
h6 { h6 {
font-size: 1.3rem; font-size: 1.3rem;
transition: 0.3s; transition: 0.3s;
} }
.des { .des {
margin: 30px 0; margin: 30px 0;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 24px; line-height: 24px;
transition: 0.3s; transition: 0.3s;
} }
.meta { .meta {
font-size: 0.8rem; font-size: 0.8rem;
transition: 0.3s; transition: 0.3s;
} }
} }
.card { .card {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 40px; margin-top: 40px;
li { li {
width: calc((100% - 56px) / 3); width: calc((100% - 56px) / 3);
margin-right: 28px; margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21); box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
border-radius: 6px; border-radius: 6px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 240px; height: 240px;
} }
.texts { .texts {
padding: 40px 30px; padding: 40px 30px;
} }
.meta { .meta {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
} }
.des { .des {
margin: 10px 0; margin: 10px 0;
font-size: 20px; font-size: 20px;
@ -459,6 +408,7 @@ export default {
color: #333; color: #333;
line-height: 28px; line-height: 28px;
} }
.arrow { .arrow {
width: 36px; width: 36px;
} }
@ -471,35 +421,43 @@ export default {
color: #fff; color: #fff;
background: #1a2844; background: #1a2844;
border-radius: 0px 100px 0px 100px; border-radius: 0px 100px 0px 100px;
.left { .left {
width: 50%; width: 50%;
padding: 120px 0 0 5%; padding: 120px 0 0 5%;
} }
h6 { h6 {
font-size: 1.6rem; font-size: 1.6rem;
} }
.text { .text {
margin: 20px 0; margin: 20px 0;
font-size: 1rem; font-size: 1rem;
line-height: 2; line-height: 2;
} }
.pic { .pic {
width: 50%; width: 50%;
height: 500px; height: 500px;
} }
} }
} }
.conference { .conference {
background: url(../../../../../assets/images/sfel/4.png) 0 0 / cover no-repeat; background: url(../../../../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
.shows { .shows {
display: flex; display: flex;
} }
.left { .left {
position: relative; position: relative;
width: 688px; width: 688px;
height: 688px; height: 688px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
.text { .text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -514,8 +472,10 @@ export default {
background-color: rgba(0, 0, 0, 0.57); background-color: rgba(0, 0, 0, 0.57);
} }
} }
.card-list { .card-list {
width: 784px; width: 784px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
@ -524,32 +484,39 @@ export default {
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
transform: translateX(20px); transform: translateX(20px);
} }
} }
.pic { .pic {
width: 188px; width: 188px;
height: 188px; height: 188px;
margin-right: 36px; margin-right: 36px;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 20px; font-size: 20px;
color: #333; color: #333;
} }
.sum { .sum {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
} }
.text { .text {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 10px 0;
} }
.icon { .icon {
margin-right: 5px; margin-right: 5px;
} }
@ -558,50 +525,61 @@ export default {
.program { .program {
background: #fff; background: #fff;
.slide { .slide {
display: flex; display: flex;
margin-bottom: 14px; margin-bottom: 14px;
} }
.texts { .texts {
width: 51%; width: 51%;
padding: 56px; padding: 56px;
background: #fbfbfb; background: #fbfbfb;
h6 { h6 {
font-size: 24px; font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.des { .des {
margin: 35px 0 25px; margin: 35px 0 25px;
font-size: 16px; font-size: 16px;
color: #666; color: #666;
line-height: 32px; line-height: 32px;
} }
.meta { .meta {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
} }
.pic { .pic {
width: 49%; width: 49%;
height: 430px; height: 430px;
} }
.list { .list {
display: flex; display: flex;
li { li {
width: calc((100% - 44px) / 3); width: calc((100% - 44px) / 3);
padding: 36px 22px; padding: 36px 22px;
margin-right: 14px; margin-right: 14px;
background: url(../../../../../assets/images/sfel/7.png) 0 0 / cover no-repeat; background: url(../../../../../assets/images/sfel/7.png) 0 0 / cover no-repeat;
&:nth-child(2) { &:nth-child(2) {
background-image: url(../../../../../assets/images/sfel/8.png); background-image: url(../../../../../assets/images/sfel/8.png);
} }
&:nth-child(3) { &:nth-child(3) {
margin-right: 0; margin-right: 0;
background-image: url(../../../../../assets/images/sfel/9.png); background-image: url(../../../../../assets/images/sfel/9.png);
} }
} }
.des { .des {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 18px; font-size: 18px;
@ -610,6 +588,7 @@ export default {
color: #ffffff; color: #ffffff;
line-height: 30px; line-height: 30px;
} }
.date { .date {
font-size: 16px; font-size: 16px;
font-family: LaoSangamMN; font-family: LaoSangamMN;
@ -617,17 +596,20 @@ export default {
} }
} }
} }
.tools { .tools {
position: absolute; position: absolute;
top: 600px; top: 600px;
left: 0; left: 0;
width: 226px; width: 226px;
text-align: center; text-align: center;
.logo { .logo {
padding: 44px 0; padding: 44px 0;
background: #0c60be; background: #0c60be;
box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3); box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
} }
.nav { .nav {
li { li {
padding: 0 10px; padding: 0 10px;
@ -637,12 +619,14 @@ export default {
background-color: #1d1d1d; background-color: #1d1d1d;
cursor: pointer; cursor: pointer;
@include ellipsis; @include ellipsis;
&.active { &.active {
background-color: #1583ff; background-color: #1583ff;
} }
} }
} }
} }
@media (max-width: 1520px) { @media (max-width: 1520px) {
.lg { .lg {
width: 98%; width: 98%;

@ -2,13 +2,11 @@
<!-- 产业光源-地理位置 --> <!-- 产业光源-地理位置 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/产业光源-概况-地理位置</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,78 +14,55 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" <li :class="{ active: i == active }" :key="i" @click="tabChange(i)">{{ item }}</li>
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="item wow bounceInLeft" <div class="item wow bounceInLeft" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" <img class="pic" :src="modules[1].form.pic" alt="">
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div>
@click="toSet(1)">点击更改图片标题概述与链接</div>
</div> </div>
<div class="item wow bounceInRight" <div class="item wow bounceInRight" data-wow-delay="0.6s">
data-wow-delay="0.6s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更改图片标题概述与链接</div>
@click="toSet(2)">点击更改图片标题概述与链接</div>
</div> </div>
<div class="item wow bounceInLeft" <div class="item wow bounceInLeft" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" <img class="pic" :src="modules[3].form.pic" alt="">
:src="modules[3].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(3)">点击更改图片标题概述与链接</div>
@click="toSet(3)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -103,25 +78,7 @@ export default {
tabs: ['地理位置'] tabs: ['地理位置']
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-地理位置'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -133,10 +90,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../../../styles/page/page.scss'; @import '../../../../../styles/page/page.scss';
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -145,6 +104,7 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
@ -157,6 +117,7 @@ export default {
max-width: 1504px; max-width: 1504px;
padding-bottom: 100px; padding-bottom: 100px;
margin: 30px auto 0; margin: 30px auto 0;
.item { .item {
position: relative; position: relative;
display: flex; display: flex;
@ -165,15 +126,19 @@ export default {
color: #333; color: #333;
background: #f5f5f5 url(https://huorantech.com/images/overviewSetup/1.png) right bottom/auto no-repeat; background: #f5f5f5 url(https://huorantech.com/images/overviewSetup/1.png) right bottom/auto no-repeat;
transition: 0.5s; transition: 0.5s;
&:nth-child(even) { &:nth-child(even) {
justify-content: space-between; justify-content: space-between;
flex-direction: row-reverse; flex-direction: row-reverse;
background-position: 30% 100%; background-position: 30% 100%;
.texts { .texts {
padding-left: 0; padding-left: 0;
} }
} }
&:hover { &:hover {
// color: #fff; // color: #fff;
// background: #005388; // background: #005388;
.pic { .pic {
@ -181,31 +146,37 @@ export default {
} }
} }
} }
.img-wrap { .img-wrap {
height: 465px; height: 465px;
overflow: hidden; overflow: hidden;
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.5s; transition: 0.5s;
} }
.texts { .texts {
width: 707px; width: 707px;
padding: 98px 72px 30px 80px; padding: 98px 72px 30px 80px;
} }
h6 { h6 {
margin-bottom: 24px; margin-bottom: 24px;
font-size: 2.4rem; font-size: 2.4rem;
font-family: PingFangSC-Light, PingFang SC; font-family: PingFangSC-Light, PingFang SC;
font-weight: 300; font-weight: 300;
} }
.des { .des {
font-size: 1rem; font-size: 1rem;
line-height: 33px; line-height: 33px;
-webkit-line-clamp: 8; -webkit-line-clamp: 8;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs { .tabs {
overflow: hidden; overflow: hidden;
@ -213,16 +184,20 @@ export default {
white-space: normal; white-space: normal;
justify-content: normal; justify-content: normal;
display: -webkit-box; display: -webkit-box;
li { li {
white-space: normal; white-space: normal;
} }
} }
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
} }

@ -2,13 +2,11 @@
<!-- 产业光源-机构设置 --> <!-- 产业光源-机构设置 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/产业光源-概况-机构设置</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,22 +14,17 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" <li :class="{ active: i == active }" :key="i" @click="tabChange(i)">{{ item }}</li>
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
@ -39,30 +32,19 @@
<div class="org"> <div class="org">
<div class="left c-wrap"> <div class="left c-wrap">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<p class="text" <p class="text" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p> <div class="cover" style="top: -73px;min-height: 300px" @click="toSet(1)">点击更换标题与描述</div>
<div class="cover"
style="top: -73px;min-height: 300px"
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<img class="pic" <img class="pic" src="https://huorantech.com/images/overviewSetup/1.png" alt="">
src="https://huorantech.com/images/overviewSetup/1.png"
alt="">
</div> </div>
<div class="lg-bg c-wrap"> <div class="lg-bg c-wrap">
<img width="100%" <img width="100%" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic" <div class="cover" @click="toSet(2)">点击更换图片</div>
alt="">
<div class="cover"
@click="toSet(2)">点击更换图片</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -78,25 +60,7 @@ export default {
tabs: ['机构设置'] tabs: ['机构设置']
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-机构设置'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -108,10 +72,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../../../styles/page/page.scss'; @import '../../../../../styles/page/page.scss';
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -120,15 +86,18 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.tab-content { .tab-content {
padding: 77px 0; padding: 77px 0;
} }
.org { .org {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -138,30 +107,36 @@ export default {
margin: 0 auto 50px; margin: 0 auto 50px;
background: #fcfcfc; background: #fcfcfc;
border-radius: 160px; border-radius: 160px;
.left { .left {
width: 705px; width: 705px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
color: #020202; color: #020202;
line-height: 2rem; line-height: 2rem;
} }
.pic { .pic {
width: 320px; width: 320px;
height: 282px; height: 282px;
} }
} }
.lg-bg { .lg-bg {
width: 85%; width: 85%;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs { .tabs {
overflow: hidden; overflow: hidden;
@ -169,16 +144,20 @@ export default {
white-space: normal; white-space: normal;
justify-content: normal; justify-content: normal;
display: -webkit-box; display: -webkit-box;
li { li {
white-space: normal; white-space: normal;
} }
} }
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
} }

@ -2,13 +2,11 @@
<!-- 产业光源-产业光源概况 --> <!-- 产业光源-产业光源概况 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/产业光源-概况-产业光源概况</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,22 +14,17 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" <li :class="{ active: i == active }" :key="i" @click="tabChange(i)">{{ item }}</li>
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
@ -39,27 +32,18 @@
<div class="survey c-wrap"> <div class="survey c-wrap">
<h6> <h6>
{{ modules[1].form.title }} {{ modules[1].form.title }}
<img class="title-bg" <img class="title-bg" src="https://huorantech.com/images/overviewIntro/2.png" alt="">
src="https://huorantech.com/images/overviewIntro/2.png"
alt="">
</h6> </h6>
<p class="text" <p class="text" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p> <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<div class="lg-bg"> <div class="lg-bg">
<img width="100%" <img width="100%" src="https://huorantech.com/images/estate/3.png" alt="">
src="https://huorantech.com/images/estate/3.png"
alt="">
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -75,25 +59,7 @@ export default {
tabs: ['产业光源概况'] tabs: ['产业光源概况']
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-产业光源概况'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -105,10 +71,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../../../styles/page/page.scss'; @import '../../../../../styles/page/page.scss';
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -117,15 +85,18 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.tab-content { .tab-content {
padding-top: 70px; padding-top: 70px;
} }
.survey { .survey {
width: 1294px; width: 1294px;
min-height: 500px; min-height: 500px;
@ -133,6 +104,7 @@ export default {
margin: 0 auto 200px; margin: 0 auto 200px;
background: url(https://huorantech.com/images/estate/2.png) 0 0/100% 100% no-repeat; background: url(https://huorantech.com/images/estate/2.png) 0 0/100% 100% no-repeat;
border-radius: 160px; border-radius: 160px;
h6 { h6 {
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 30px;
@ -141,11 +113,13 @@ export default {
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.title-bg { .title-bg {
position: absolute; position: absolute;
top: -40px; top: -40px;
left: -20px; left: -20px;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
@ -153,9 +127,11 @@ export default {
line-height: 2rem; line-height: 2rem;
} }
} }
.lg-bg { .lg-bg {
width: 40%; width: 40%;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs { .tabs {
overflow: hidden; overflow: hidden;
@ -163,16 +139,20 @@ export default {
white-space: normal; white-space: normal;
justify-content: normal; justify-content: normal;
display: -webkit-box; display: -webkit-box;
li { li {
white-space: normal; white-space: normal;
} }
} }
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/装置介绍-实验站</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,17 +15,12 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block station"> <div class="block station">
@ -35,78 +28,52 @@
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p> <p class="en">{{ modules[1].form.subTitle }}</p>
<template v-if="modules[1].form.pic"> <template v-if="modules[1].form.pic">
<video v-if="Util.isVideo(modules[1].form.mediaType)" <video v-if="Util.isVideo(modules[1].form.mediaType)" class="pic" ref="video" autoplay controls loop>
class="pic" <source :src="modules[1].form.pic" type="video/mp4">
ref="video"
autoplay
controls
loop>
<source :src="modules[1].form.pic"
type="video/mp4">
您的浏览器不支持 video 标签 您的浏览器不支持 video 标签
</video> </video>
<img v-else <img v-else class="pic" :src="modules[1].form.pic" alt="">
class="pic"
:src="modules[1].form.pic"
alt="">
</template> </template>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div> <div class="cover" @click="toSet(1)">点击更改图片与概述</div>
<div class="cover"
@click="toSet(1)">点击更改图片与概述</div>
</div> </div>
</div> </div>
<ul class="list"> <ul class="list">
<li class="item1"> <li class="item1">
<img src="@/assets/images/exp/2.png" <img src="@/assets/images/exp/2.png" alt="">
alt="">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="cover" <div class="cover" @click="toSet(2)">点击更改标题与链接</div>
@click="toSet(2)">点击更改标题与链接</div>
</li> </li>
<li class="item2"> <li class="item2">
<img src="@/assets/images/exp/3.png" <img src="@/assets/images/exp/3.png" alt="">
alt="">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="cover" <div class="cover" @click="toSet(3)">点击更改标题与链接</div>
@click="toSet(3)">点击更改标题与链接</div>
</li> </li>
<li class="item3"> <li class="item3">
<img src="@/assets/images/exp/4.png" <img src="@/assets/images/exp/4.png" alt="">
alt="">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="cover" <div class="cover" @click="toSet(4)">点击更改标题与链接</div>
@click="toSet(4)">点击更改标题与链接</div>
</li> </li>
<li class="item4"> <li class="item4">
<img src="@/assets/images/exp/5.png" <img src="@/assets/images/exp/5.png" alt="">
alt="">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="cover" <div class="cover" @click="toSet(5)">点击更改标题与链接</div>
@click="toSet(5)">点击更改标题与链接</div>
</li> </li>
<li class="item5"> <li class="item5">
<img src="@/assets/images/exp/6.png" <img src="@/assets/images/exp/6.png" alt="">
alt="">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="cover" <div class="cover" @click="toSet(6)">点击更改标题与链接</div>
@click="toSet(6)">点击更改标题与链接</div>
</li> </li>
<li class="item6"> <li class="item6">
<img src="@/assets/images/exp/7.png" <img src="@/assets/images/exp/7.png" alt="">
alt="">
<h6>{{ modules[7].form.title }}</h6> <h6>{{ modules[7].form.title }}</h6>
<div class="cover" <div class="cover" @click="toSet(7)">点击更改标题与链接</div>
@click="toSet(7)">点击更改标题与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -126,29 +93,10 @@ export default {
isVideo () { isVideo () {
const { pic } = this.modules[1].form const { pic } = this.modules[1].form
const ext = pic.substr(pic.lastIndexOf('.') + 1) const ext = pic.substr(pic.lastIndexOf('.') + 1)
console.log(33, pic)
return Util.isVideo(ext) return Util.isVideo(ext)
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '装置介绍-实验站'
}
])
},
methods: { methods: {
} }
@ -157,10 +105,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.station { .station {
.inner { .inner {
width: 1200px; width: 1200px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 48px; font-size: 48px;
@ -169,6 +119,7 @@ export default {
color: #333333; color: #333333;
line-height: 1; line-height: 1;
} }
.en { .en {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 45px; font-size: 45px;
@ -176,10 +127,12 @@ export default {
color: #e4e4e4; color: #e4e4e4;
line-height: 1; line-height: 1;
} }
.pic { .pic {
width: 100%; width: 100%;
height: 604px; height: 604px;
} }
.des { .des {
margin-top: 55px; margin-top: 55px;
font-size: 18px; font-size: 18px;
@ -188,18 +141,22 @@ export default {
overflow: visible; overflow: visible;
} }
} }
.list { .list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 30px; margin-top: 30px;
li { li {
position: relative; position: relative;
height: 542px; height: 542px;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
h6 { h6 {
position: absolute; position: absolute;
top: 192px; top: 192px;
@ -209,19 +166,24 @@ export default {
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.item1, .item1,
.item2 { .item2 {
width: 25%; width: 25%;
} }
.item3 { .item3 {
width: 50%; width: 50%;
} }
.item4 { .item4 {
width: 40%; width: 40%;
} }
.item5 { .item5 {
width: 32%; width: 32%;
} }
.item6 { .item6 {
width: 28%; width: 28%;
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-治理结构</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,15 +13,12 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block history gray"> <div class="block history gray">
@ -31,27 +26,18 @@
<div class="texts c-wrap"> <div class="texts c-wrap">
<div class="left"> <div class="left">
<h2 v-html="modules[1].form.title"></h2> <h2 v-html="modules[1].form.title"></h2>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
width="562" <div class="cover" style="top: -100px" @click="toSet(1)">点击更换标题描述与图片</div>
height="506"
:src="modules[1].form.pic"
alt="">
<div class="cover"
style="top: -100px"
@click="toSet(1)">点击更换标题描述与图片</div>
</div> </div>
</div> </div>
</div> </div>
<div class="cards"> <div class="cards">
<ul> <ul>
<li v-for="(item, i) in modules[2].list" <li v-for="(item, i) in modules[2].list" :key="i">{{ item.title }}</li>
:key="i">{{ item.title }}</li> <div class="cover" @click="toSet(2)">点击配置文本</div>
<div class="cover"
@click="toSet(2)">点击配置文本</div>
</ul> </ul>
</div> </div>
@ -59,20 +45,14 @@
<div class="inner c-wrap"> <div class="inner c-wrap">
<div class="left"> <div class="left">
<h2>{{ modules[2].list[curYear].list[0].title }}</h2> <h2>{{ modules[2].list[curYear].list[0].title }}</h2>
<div class="text" <div class="text" v-html="modules[2].list[curYear].list[0].des"></div>
v-html="modules[2].list[curYear].list[0].des"></div>
</div> </div>
<img class="pic" <img class="pic" :src="modules[2].list[curYear].list[0].pic" alt="">
:src="modules[2].list[curYear].list[0].pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -87,25 +67,7 @@ export default {
curYear: 0 curYear: 0
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于IASF-治理结构'
}
])
},
methods: { methods: {
} }
@ -114,11 +76,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.history { .history {
h2 { h2 {
padding-bottom: 15px; padding-bottom: 15px;
font-size: 1.2rem; font-size: 1.2rem;
color: #333; color: #333;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
@ -128,6 +92,7 @@ export default {
background: #0280f1; background: #0280f1;
} }
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -136,25 +101,31 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 695px; width: 695px;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
font-size: 1.2rem; font-size: 1.2rem;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
} }
.bg { .bg {
margin: -122px 0 0 0; margin: -122px 0 0 0;
} }
} }
.cards { .cards {
padding: 60px 0; padding: 60px 0;
ul { ul {
position: relative; position: relative;
display: flex; display: flex;
@ -163,6 +134,7 @@ export default {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
li { li {
width: 368px; width: 368px;
margin: 0 30px 50px 0; margin: 0 30px 50px 0;
@ -173,54 +145,67 @@ export default {
@include ellipsis(); @include ellipsis();
background: url(https://huorantech.com/images/governance/3.png) 0 0 / cover no-repeat; background: url(https://huorantech.com/images/governance/3.png) 0 0 / cover no-repeat;
cursor: pointer; cursor: pointer;
&:nth-child(2) { &:nth-child(2) {
background-image: url(https://huorantech.com/images/governance/4.png); background-image: url(https://huorantech.com/images/governance/4.png);
} }
&:nth-child(3) { &:nth-child(3) {
background-image: url(https://huorantech.com/images/governance/5.png); background-image: url(https://huorantech.com/images/governance/5.png);
} }
&:nth-child(4) { &:nth-child(4) {
background-image: url(https://huorantech.com/images/governance/4.png); background-image: url(https://huorantech.com/images/governance/4.png);
} }
&:nth-child(5) { &:nth-child(5) {
background-image: url(https://huorantech.com/images/governance/7.png); background-image: url(https://huorantech.com/images/governance/7.png);
} }
&:nth-child(6) { &:nth-child(6) {
background-image: url(https://huorantech.com/images/governance/6.png); background-image: url(https://huorantech.com/images/governance/6.png);
} }
&:nth-child(8) { &:nth-child(8) {
background-image: url(https://huorantech.com/images/governance/6.png); background-image: url(https://huorantech.com/images/governance/6.png);
} }
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
color: #fff; color: #fff;
background: #0d84f2; background: #0d84f2;
} }
} }
} }
.committee { .committee {
.inner { .inner {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.left { .left {
width: 50%; width: 50%;
margin-right: 2%; margin-right: 2%;
} }
h2 { h2 {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.2rem; font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333; color: #333;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
line-height: 1.5; line-height: 1.5;
color: #333; color: #333;
} }
.pic { .pic {
width: 48%; width: 48%;
height: 300px; height: 300px;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/HOME</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -215,25 +215,7 @@ export default {
modules: Modules.home modules: Modules.home
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'HOME'
}
])
},
methods: { methods: {
} }

@ -2,7 +2,7 @@
<!-- iasf中文首页 --> <!-- iasf中文首页 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/IASF中文首页</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -266,25 +266,7 @@ export default {
modules: Modules.iasf modules: Modules.iasf
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'iasf中文首页'
}
])
},
methods: { methods: {
} }

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/首页</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -51,25 +51,7 @@ export default {
modules: Modules.index modules: Modules.index
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '首页'
}
])
},
methods: { methods: {
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/产业应用</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,93 +13,64 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block history gray"> <div class="block history gray">
<div class="inner c-wrap"> <div class="inner c-wrap">
<h2 class="wow fadeInLeft" <h2 class="wow fadeInLeft" style="margin-left: 57px" v-html="modules[1].form.title"></h2>
style="margin-left: 57px" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
v-html="modules[1].form.title"></h2>
<div class="texts wow fadeInDown"
data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2>{{ modules[1].form.subTitle }}</h2> <h2>{{ modules[1].form.subTitle }}</h2>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div>
@click="toSet(1)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
<div class="block land"> <div class="block land">
<div class="inner"> <div class="inner">
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
<div class="right"> <div class="right">
<h6 v-html="modules[2].form.title"></h6> <h6 v-html="modules[2].form.title"></h6>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更改图片标题与概述</div>
@click="toSet(2)">点击更改图片标题与概述</div>
</div> </div>
</div> </div>
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title" <h2 class="b-title" v-html="modules[3].form.title"></h2>
v-html="modules[3].form.title"></h2> <p class="intro" v-html="modules[3].form.des"></p>
<p class="intro" <div class="cover" @click="toSet(3)">点击更换标题与描述</div>
v-html="modules[3].form.des"></p>
<div class="cover"
@click="toSet(3)">点击更换标题与描述</div>
</div> </div>
<ul class="plan"> <ul class="plan">
<li> <li>
<div class="left"> <div class="left">
<h6 v-html="modules[4].form.title"></h6> <h6 v-html="modules[4].form.title"></h6>
<div class="text" <div class="text" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <img src="@/assets/images/arrow.png" alt="">
<img src="@/assets/images/arrow.png"
alt="">
</div> </div>
<img class="pic" <img class="pic" :src="modules[4].form.pic" alt="">
:src="modules[4].form.pic" <div class="cover" @click="toSet(4)">点击更换标题描述链接与图片</div>
alt="">
<div class="cover"
@click="toSet(4)">点击更换标题描述链接与图片</div>
</li> </li>
<li> <li>
<div class="left"> <div class="left">
<h6 v-html="modules[5].form.title"></h6> <h6 v-html="modules[5].form.title"></h6>
<div class="text" <div class="text" v-html="modules[5].form.des"></div>
v-html="modules[5].form.des"></div> <img src="@/assets/images/arrow.png" alt="">
<img src="@/assets/images/arrow.png"
alt="">
</div> </div>
<img class="pic" <img class="pic" :src="modules[5].form.pic" alt="">
:src="modules[5].form.pic" <div class="cover" @click="toSet(5)">点击更换标题描述链接与图片</div>
alt="">
<div class="cover"
@click="toSet(5)">点击更换标题描述链接与图片</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -110,27 +79,17 @@
<div class="block"> <div class="block">
<div class="inner app-inner"> <div class="inner app-inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title wow fadeInUp" <h2 class="b-title wow fadeInUp" v-html="modules[6].form.title"></h2>
v-html="modules[6].form.title"></h2> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<p class="intro wow fadeInUp" <div class="cover" @click="toSet(6)">点击更换标题与描述</div>
data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<div class="cover"
@click="toSet(6)">点击更换标题与描述</div>
</div> </div>
<ul class="app"> <ul class="app">
<li v-for="(item, i) in modules[7].list" <li v-for="(item, i) in modules[7].list" :key="i" class="wow fadeInDown"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"> :data-wow-delay="(0.2 * i).toFixed(1) + 's'">
<img class="bg" <img class="bg" :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')" alt="">
:src="require('@/assets/images/industrial/app' + (i + 1) + '.png')" <img class="icon" :src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')" alt="">
alt="">
<img class="icon"
:src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')"
alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<div class="cover" <div class="cover" @click="toSet(7, i)">点击更标题与链接</div>
@click="toSet(7, i)">点击更标题与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -139,72 +98,60 @@
<div class="block news-block"> <div class="block news-block">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title" <h2 class="b-title" v-html="modules[8].form.title"></h2>
v-html="modules[8].form.title"></h2>
<p class="intro">{{ modules[8].form.des }}</p> <p class="intro">{{ modules[8].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
@click="toSet(8)">点击更换标题与描述</div>
</div> </div>
<ul class="news"> <ul class="news">
<li> <li>
<img src="https://huorantech.com/images/home/3.png" <img src="https://huorantech.com/images/home/3.png" alt="">
alt="">
<div class="texts"> <div class="texts">
<span class="meta">2022-07-24 | 综合新闻</span> <span class="meta">2022-07-24 | 综合新闻</span>
<h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6> <h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6>
</div> </div>
</li> </li>
<li> <li>
<img src="https://huorantech.com/images/home/3.png" <img src="https://huorantech.com/images/home/3.png" alt="">
alt="">
<div class="texts"> <div class="texts">
<span class="meta">2022-07-24 | 综合新闻</span> <span class="meta">2022-07-24 | 综合新闻</span>
<h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6> <h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6>
</div> </div>
</li> </li>
<li> <li>
<img src="https://huorantech.com/images/home/3.png" <img src="https://huorantech.com/images/home/3.png" alt="">
alt="">
<div class="texts"> <div class="texts">
<span class="meta">2022-07-24 | 综合新闻</span> <span class="meta">2022-07-24 | 综合新闻</span>
<h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6> <h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6>
</div> </div>
</li> </li>
<li> <li>
<img src="https://huorantech.com/images/home/3.png" <img src="https://huorantech.com/images/home/3.png" alt="">
alt="">
<div class="texts"> <div class="texts">
<span class="meta">2022-07-24 | 综合新闻</span> <span class="meta">2022-07-24 | 综合新闻</span>
<h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6> <h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6>
</div> </div>
</li> </li>
<li> <li>
<img src="https://huorantech.com/images/home/3.png" <img src="https://huorantech.com/images/home/3.png" alt="">
alt="">
<div class="texts"> <div class="texts">
<span class="meta">2022-07-24 | 综合新闻</span> <span class="meta">2022-07-24 | 综合新闻</span>
<h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6> <h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6>
</div> </div>
</li> </li>
<li> <li>
<img src="https://huorantech.com/images/home/3.png" <img src="https://huorantech.com/images/home/3.png" alt="">
alt="">
<div class="texts"> <div class="texts">
<span class="meta">2022-07-24 | 综合新闻</span> <span class="meta">2022-07-24 | 综合新闻</span>
<h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6> <h6>X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段</h6>
</div> </div>
</li> </li>
<div class="cover" <div class="cover" @click="toSet(9)">关联栏目</div>
@click="toSet(9)">关联栏目</div>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -218,25 +165,7 @@ export default {
modules: Modules.industrial modules: Modules.industrial
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '产业应用'
}
])
},
methods: { methods: {
} }
@ -245,11 +174,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.history { .history {
h2 { h2 {
font-size: 1.8rem; font-size: 1.8rem;
color: #333; color: #333;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -258,35 +189,43 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 695px; width: 695px;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
font-size: 1.2rem; font-size: 1.2rem;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
} }
.bg { .bg {
margin: -122px 0 0 0; margin: -122px 0 0 0;
} }
} }
.land { .land {
.inner { .inner {
position: relative; position: relative;
display: flex; display: flex;
} }
.pic { .pic {
width: 50%; width: 50%;
height: 450px; height: 450px;
} }
.right { .right {
width: 50%; width: 50%;
} }
h6 { h6 {
margin-left: 50px; margin-left: 50px;
font-size: 1.3rem; font-size: 1.3rem;
@ -294,6 +233,7 @@ export default {
color: #333; color: #333;
@include ellipsis(); @include ellipsis();
} }
.text { .text {
height: 405px; height: 405px;
padding: 50px; padding: 50px;
@ -302,6 +242,7 @@ export default {
border-radius: 0px 100px 0px 0px; border-radius: 0px 100px 0px 0px;
} }
} }
.plan { .plan {
li { li {
position: relative; position: relative;
@ -311,26 +252,32 @@ export default {
color: #333; color: #333;
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
.pic { .pic {
margin: -20px 0 0 -20px; margin: -20px 0 0 -20px;
border-radius: 0 100px 0 0; border-radius: 0 100px 0 0;
} }
} }
.left { .left {
width: 50%; width: 50%;
padding: 50px; padding: 50px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.text { .text {
margin: 1rem 0; margin: 1rem 0;
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
} }
.pic { .pic {
width: 48%; width: 48%;
height: 500px; height: 500px;
@ -343,9 +290,11 @@ export default {
.app-inner { .app-inner {
width: 1558px; width: 1558px;
} }
.app { .app {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
display: flex; display: flex;
@ -356,16 +305,20 @@ export default {
height: 252px; height: 252px;
margin: 0 14px 14px 0; margin: 0 14px 14px 0;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
.icon { .icon {
transform: rotateY(180deg); transform: rotateY(180deg);
} }
} }
&:nth-child(4n) { &:nth-child(4n) {
margin-right: 0; margin-right: 0;
} }
} }
.bg { .bg {
position: absolute; position: absolute;
top: 0; top: 0;
@ -373,9 +326,11 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.icon { .icon {
position: relative; position: relative;
} }
.text { .text {
position: relative; position: relative;
margin-top: 20px; margin-top: 20px;
@ -383,32 +338,39 @@ export default {
color: #fff; color: #fff;
} }
} }
.news { .news {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
width: calc((100% - 34px) / 3); width: calc((100% - 34px) / 3);
margin: 0 17px 20px 0; margin: 0 17px 20px 0;
background-color: #fff; background-color: #fff;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
img { img {
width: 100%; width: 100%;
height: 220px; height: 220px;
} }
.texts { .texts {
padding: 20px 24px; padding: 20px 24px;
background-color: #fff; background-color: #fff;
} }
h6 { h6 {
margin-top: 8px; margin-top: 8px;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21); text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
} }
.meta { .meta {
font-size: 0.9rem; font-size: 0.9rem;
color: #666; color: #666;

@ -2,13 +2,11 @@
<!-- 全球先进光源 --> <!-- 全球先进光源 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/全球先进光源</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,43 +14,31 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block gray"> <div class="block gray">
<div class="inner c-wrap"> <div class="inner c-wrap">
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro wow fadeInUp" <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
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"
<img class="block-pic br wow fadeInLeft" :src="modules[1].form.pic" alt="">
data-wow-delay="0.8s" <div class="cover" @click="toSet(1)">点击更换标题描述图片与链接</div>
width="100%"
height="536"
:src="modules[1].form.pic"
alt="">
<div class="cover"
@click="toSet(1)">点击更换标题描述图片与链接</div>
</div> </div>
</div> </div>
<div class="block sources"> <div class="block sources">
<div class="inner c-wrap"> <div class="inner c-wrap">
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<li v-for="(item, i) in tabs" <li v-for="(item, i) in tabs" :class="{ active: item.id == active }" :key="i" @click="tabChange(item.id)">{{
:class="{active: item.id == active}" item.name }}</li>
:key="i"
@click="tabChange(item.id)">{{ item.name }}</li>
</ul> </ul>
<div v-if="!active" <div v-if="!active" class="c-wrap">
class="c-wrap">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -69,8 +55,7 @@
</tr> </tr>
</thead> </thead>
<template v-if="modules[2].list.length"> <template v-if="modules[2].list.length">
<tr v-for="(item, i) in modules[2].list" <tr v-for="(item, i) in modules[2].list" :key="i">
:key="i">
<td>{{ item.name }}</td> <td>{{ item.name }}</td>
<td>{{ item.country }}</td> <td>{{ item.country }}</td>
<td>{{ item.address }}</td> <td>{{ item.address }}</td>
@ -87,11 +72,9 @@
<td class="none">暂无数据</td> <td class="none">暂无数据</td>
</tr> </tr>
</table> </table>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换表格</div>
@click="toSet(2)">点击更换表格</div>
</div> </div>
<div v-else <div v-else class="c-wrap">
class="c-wrap">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -109,8 +92,7 @@
</tr> </tr>
</thead> </thead>
<template v-if="modules[3].list.length"> <template v-if="modules[3].list.length">
<tr v-for="(item, i) in modules[3].list" <tr v-for="(item, i) in modules[3].list" :key="i">
:key="i">
<td>{{ item.name }}</td> <td>{{ item.name }}</td>
<td>{{ item.country }}</td> <td>{{ item.country }}</td>
<td>{{ item.address }}</td> <td>{{ item.address }}</td>
@ -125,27 +107,20 @@
</tr> </tr>
</template> </template>
<tr v-else> <tr v-else>
<td class="none" <td class="none" colspan="11">暂无数据</td>
colspan="11">暂无数据</td>
</tr> </tr>
</table> </table>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换表格</div>
@click="toSet(3)">点击更换表格</div>
</div> </div>
<div class="c-wrap m-t-20"> <div class="c-wrap m-t-20">
<div class="copyright" <div class="copyright" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <div class="cover" @click="toSet(4)">点击更换描述</div>
<div class="cover"
@click="toSet(4)">点击更换描述</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -170,25 +145,7 @@ export default {
] ]
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '全球先进光源'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -200,35 +157,44 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.block { .block {
padding: 3.15rem 0; padding: 3.15rem 0;
.inner { .inner {
.b-title { .b-title {
font-size: 2.25rem; font-size: 2.25rem;
margin-bottom: 2.25rem; margin-bottom: 2.25rem;
} }
.intro { .intro {
margin-bottom: 2.25rem; margin-bottom: 2.25rem;
} }
} }
} }
.block-pic { .block-pic {
transition: 0.3s; transition: 0.3s;
height: auto; height: auto;
&.br { &.br {
border-radius: 270px; border-radius: 270px;
} }
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.sources { .sources {
background-color: #fff; background-color: #fff;
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -237,22 +203,26 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.table { .table {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
border-collapse: collapse; border-collapse: collapse;
th, th,
td { td {
padding: 10px 10px; padding: 10px 10px;
font-size: 0.9rem; font-size: 0.9rem;
text-align: left; text-align: left;
} }
.none { .none {
text-align: center; text-align: center;
} }

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/会员中心</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -60,25 +60,7 @@ export default {
modules: Modules.member, modules: Modules.member,
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '会员中心'
}
])
},
methods: { methods: {
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-使命愿景价值观</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,42 +13,31 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="item"> <div class="item">
<img :src="modules[1].form.pic" <img :src="modules[1].form.pic" alt="" />
alt="" />
<div class="texts"> <div class="texts">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" style="left: -35px" @click="toSet(1)">点击更改标题概述与链接</div>
style="left: -35px"
@click="toSet(1)">点击更改标题概述与链接</div>
</div> </div>
<div class="item"> <div class="item">
<img :src="modules[2].form.pic" <img :src="modules[2].form.pic" alt="" />
alt="" />
<div class="texts rightText"> <div class="texts rightText">
<h6 v-html="modules[2].form.title"></h6> <h6 v-html="modules[2].form.title"></h6>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" style="right: -35px" @click="toSet(2)">点击更改标题概述与链接</div>
style="right: -35px"
@click="toSet(2)">点击更改标题概述与链接</div>
</div> </div>
</div> </div>
</div> </div>
@ -58,36 +45,26 @@
<div class="block mind gray"> <div class="block mind gray">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h6 class="m-title" <h6 class="m-title" v-html="modules[3].form.title"></h6>
v-html="modules[3].form.title"></h6> <div class="cover" @click="toSet(3)">点击更换标题</div>
<div class="cover"
@click="toSet(3)">点击更换标题</div>
</div> </div>
<ul class="list"> <ul class="list">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i">
:key="i"> <img :src="item.pic" alt="" class="pic">
<img :src="item.pic"
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="des" <div class="des" v-html="item.des"></div>
v-html="item.des"></div>
</div> </div>
</li> </li>
</template> </template>
<div class="cover" <div class="cover" @click="toSet(4)">点击更换图片标题概述与链接</div>
@click="toSet(4)">点击更换图片标题概述与链接</div>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -101,25 +78,7 @@ export default {
modules: Modules.mission modules: Modules.mission
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于IASF-使命愿景价值观'
}
])
},
methods: { methods: {
} }
@ -128,22 +87,27 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.inner { .inner {
width: 1200px; width: 1200px;
} }
.item { .item {
position: relative; position: relative;
margin-bottom: 58px; margin-bottom: 58px;
img { img {
width: 100%; width: 100%;
height: 400px; height: 400px;
} }
&:nth-child(2) .texts { &:nth-child(2) .texts {
left: auto; left: auto;
right: -36px; right: -36px;
color: #fff; color: #fff;
background: rgba(40, 179, 255, 0.34); background: rgba(40, 179, 255, 0.34);
} }
.texts { .texts {
position: absolute; position: absolute;
top: 79px; top: 79px;
@ -154,16 +118,19 @@ export default {
background: rgba(255, 241, 231, 0.84); background: rgba(255, 241, 231, 0.84);
transition: 0.5s; transition: 0.5s;
} }
h6 { h6 {
margin-bottom: 14px; margin-bottom: 14px;
font-size: 2rem; font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.des { .des {
font-size: 1rem; font-size: 1rem;
} }
} }
.mind { .mind {
.m-title { .m-title {
margin-bottom: 30px; margin-bottom: 30px;
@ -171,34 +138,41 @@ export default {
text-align: center; text-align: center;
color: #333; color: #333;
} }
.list { .list {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
li { li {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
width: calc((100% - 22px) / 2); width: calc((100% - 22px) / 2);
margin: 0 22px 22px 0; margin: 0 22px 22px 0;
background-color: #fff; background-color: #fff;
&:nth-child(even) { &:nth-child(even) {
margin-right: 0; margin-right: 0;
} }
.pic { .pic {
width: 250px; width: 250px;
height: 230px; height: 230px;
} }
.texts { .texts {
width: calc(100% - 250px); width: calc(100% - 250px);
padding: 0 20px; padding: 0 20px;
} }
h6 { h6 {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.5rem; font-size: 1.5rem;
color: #272727; color: #272727;
@include ellipsis(); @include ellipsis();
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
color: #666; color: #666;
@ -206,37 +180,45 @@ export default {
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.inner { .inner {
width: 98%; width: 98%;
} }
.item { .item {
img { img {
margin-left: 30px; margin-left: 30px;
} }
.rightText { .rightText {
right: 12px !important; right: 12px !important;
} }
.texts { .texts {
width: 85%; width: 85%;
box-sizing: border-box; box-sizing: border-box;
left: 12px; left: 12px;
.des { .des {
-webkit-line-clamp: inherit; -webkit-line-clamp: inherit;
} }
} }
} }
} }
@media (max-width: 980px) { @media (max-width: 980px) {
.mind { .mind {
.list { .list {
flex-direction: column; flex-direction: column;
} }
li { li {
width: 100%; width: 100%;
} }
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.mind { .mind {
li { li {
@ -244,6 +226,7 @@ export default {
width: 150px; width: 150px;
height: 130px; height: 130px;
} }
.texts { .texts {
width: calc(100% - 150px); width: calc(100% - 150px);
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/NEWS&EVENTS</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,77 +15,57 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs"> <ul class="tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" v-for="(item, i) in modules[1].list" :key="i">
v-for="(item, i) in modules[1].list"
:key="i">
{{ item.columnName }} {{ item.columnName }}
<div class="cover" <div class="cover" @click="toSet(1, i)">关联栏目</div>
@click="toSet(1, i)">关联栏目</div>
</li> </li>
</ul> </ul>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="news-banner"> <div class="news-banner">
<img width="100%" <img width="100%" height="480" src="https://huorantech.com/images/about/5.png" alt="">
height="480"
src="https://huorantech.com/images/about/5.png"
alt="">
<div class="right"> <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> <h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and
<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> 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> <p class="meta">2022-07-24 | Research</p>
</div> </div>
</div> </div>
<ul class="card"> <ul class="card">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/11.png" alt="">
src="https://huorantech.com/images/about/11.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
</ul> </ul>
@ -100,67 +78,59 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[2].form.title }}</h2> <h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p> <p class="intro">{{ modules[2].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
@click="toSet(2)">点击更换标题与描述</div>
</div> </div>
<div class="shop-shows"> <div class="shop-shows">
<div class="left"> <div class="left">
<img width="100%" <img width="100%" height="400" src="https://huorantech.com/images/about/5.png" alt="">
height="400"
src="https://huorantech.com/images/about/5.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Messag President Sun Dongbai.</h6> <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 class="des">2021 is another challenging year for the Institute of Advanced Science Facilities,
Shenzhen
(IASF)</div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<ul class="show-card"> <ul class="show-card">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="des">Comprises the installation and nanostructuri</div> <div class="des">Comprises the installation and nanostructuri</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="des">Prof. Stephan V. Roth's research</div> <div class="des">Prof. Stephan V. Roth's research</div>
</li> </li>
</ul> </ul>
<ul class="card-list"> <ul class="card-list">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Hold doctorates or the highest degree in their field</h6> <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 class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of
Technology.Characteriza Royal Institute of technology.</div>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<h6>This 2019 image depicted a Centers for Disease</h6> <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 class="des">laboratory technician, dressed in personal protective equipment (PPE), in
thelaboratory
technician, dressed in personal in the</div>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/11.png" alt="">
src="https://huorantech.com/images/about/11.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Browse premium related images on iStock</h6> <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 class="des">which would undergo analysis, here, in this laboratory environment.which would
undergo
analysis, here, in this laboratory environment.</div>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(3)">关联栏目</div>
@click="toSet(3)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
@ -170,15 +140,11 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[4].form.title }}</h2> <h2 class="b-title">{{ modules[4].form.title }}</h2>
<p class="intro">{{ modules[4].form.des }}</p> <p class="intro">{{ modules[4].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
@click="toSet(4)">点击更换标题与描述</div>
</div> </div>
<div class="shows"> <div class="shows">
<div class="left"> <div class="left">
<img width="100%" <img width="100%" height="558" src="https://huorantech.com/images/about/5.png" alt="">
height="558"
src="https://huorantech.com/images/about/5.png"
alt="">
<div class="texts"> <div class="texts">
<div class="meta"> <div class="meta">
<p class="date">09</p> <p class="date">09</p>
@ -186,127 +152,93 @@
</div> </div>
<div> <div>
<h6>Browse premium related images on iStock</h6> <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 class="des">which would undergo analysis, here, in this laboratory environment.which would
undergo
analysis, here, in this laboratory environment.</div>
</div> </div>
</div> </div>
</div> </div>
<ul class="card-list"> <ul class="card-list">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
</ul> </ul>
<div class="cover" <div class="cover" @click="toSet(5)">关联栏目</div>
@click="toSet(5)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -347,25 +279,7 @@ export default {
active: '' active: ''
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'NEWS&EVENTS'
}
])
},
methods: { methods: {
} }
@ -374,10 +288,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26); box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
li { li {
position: relative; position: relative;
min-width: 100px; min-width: 100px;
@ -388,70 +304,86 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.news-banner { .news-banner {
display: flex; display: flex;
height: auto; height: auto;
.pic { .pic {
width: 700px; width: 700px;
height: 380px; height: 380px;
} }
.right { .right {
padding: 50px 50px 30px; padding: 50px 50px 30px;
background: #1583ff; background: #1583ff;
color: #fff; color: #fff;
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
} }
.des { .des {
margin: 30px 0; margin: 30px 0;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
} }
.meta { .meta {
font-size: 16px; font-size: 16px;
} }
} }
.card { .card {
display: flex; display: flex;
margin-top: 40px; margin-top: 40px;
li { li {
width: 448px; width: 448px;
margin-right: 28px; margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21); box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 240px; height: 240px;
} }
.texts { .texts {
padding: 40px 30px; padding: 40px 30px;
} }
.meta { .meta {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
} }
.des { .des {
margin: 10px 0; margin: 10px 0;
font-size: 20px; font-size: 20px;
color: #333; color: #333;
line-height: 28px; line-height: 28px;
} }
.arrow { .arrow {
width: 36px; width: 36px;
} }
} }
.more { .more {
width: 374px; width: 374px;
margin: 58px auto 0; margin: 58px auto 0;
@ -463,20 +395,25 @@ export default {
border: 2px solid #2b6cef; border: 2px solid #2b6cef;
cursor: pointer; cursor: pointer;
} }
.shop-shows { .shop-shows {
position: relative; position: relative;
display: flex; display: flex;
.left { .left {
width: 660px; width: 660px;
margin-right: 20px; margin-right: 20px;
background-color: #fff; background-color: #fff;
.texts { .texts {
padding: 40px 30px; padding: 40px 30px;
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
color: #272727; color: #272727;
} }
.des { .des {
margin-top: 10px; margin-top: 10px;
font-size: 16px; font-size: 16px;
@ -484,22 +421,28 @@ export default {
line-height: 30px; line-height: 30px;
} }
} }
.right { .right {
width: 824px; width: 824px;
} }
.show-card { .show-card {
display: flex; display: flex;
margin-bottom: 20px; margin-bottom: 20px;
li { li {
position: relative; position: relative;
&:first-child { &:first-child {
margin-right: 22px; margin-right: 22px;
} }
} }
.pic { .pic {
width: 401px; width: 401px;
height: 197px; height: 197px;
} }
.des { .des {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -513,27 +456,33 @@ export default {
box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08); box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
} }
} }
.card-list { .card-list {
padding: 34px 26px; padding: 34px 26px;
background-color: #fff; background-color: #fff;
li { li {
display: inline-flex; display: inline-flex;
padding-right: 124px; padding-right: 124px;
margin-bottom: 38px; margin-bottom: 38px;
background: url(../../../assets/images/arrow.png) (right 20px)/ (23px 23px) no-repeat; background: url(../../../assets/images/arrow.png) (right 20px)/ (23px 23px) no-repeat;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.pic { .pic {
width: 116px; width: 116px;
height: 85px; height: 85px;
margin-right: 28px; margin-right: 28px;
} }
h6 { h6 {
font-size: 20px; font-size: 20px;
color: #272727; color: #272727;
} }
.des { .des {
margin-top: 15px; margin-top: 15px;
font-size: 14px; font-size: 14px;
@ -542,30 +491,37 @@ export default {
} }
} }
} }
.conference { .conference {
background: #072947; background: #072947;
.b-title, .b-title,
.intro { .intro {
color: #fff; color: #fff;
} }
.shows { .shows {
position: relative; position: relative;
display: flex; display: flex;
} }
.left { .left {
width: 688px; width: 688px;
margin-right: 20px; margin-right: 20px;
background-color: #fff; background-color: #fff;
.texts { .texts {
display: flex; display: flex;
padding: 40px 30px; padding: 40px 30px;
} }
.meta { .meta {
padding: 10px 23px 10px 0; padding: 10px 23px 10px 0;
margin-right: 32px; margin-right: 32px;
text-align: center; text-align: center;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} }
.date { .date {
font-size: 45px; font-size: 45px;
font-family: DINAlternate-Bold, DINAlternate; font-family: DINAlternate-Bold, DINAlternate;
@ -573,15 +529,18 @@ export default {
color: #1f1f1f; color: #1f1f1f;
line-height: 52px; line-height: 52px;
} }
.year { .year {
font-size: 16px; font-size: 16px;
white-space: nowrap; white-space: nowrap;
color: #666; color: #666;
} }
h6 { h6 {
font-size: 20px; font-size: 20px;
color: #272727; color: #272727;
} }
.des { .des {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
@ -589,29 +548,35 @@ export default {
line-height: 24px; line-height: 24px;
} }
} }
.card-list { .card-list {
width: 784px; width: 784px;
li { li {
display: flex; display: flex;
padding: 24px; padding: 24px;
margin-bottom: 13px; margin-bottom: 13px;
background-color: #fff; background-color: #fff;
} }
.pic { .pic {
width: 188px; width: 188px;
height: 130px; height: 130px;
margin-right: 28px; margin-right: 28px;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 20px; font-size: 20px;
color: #333; color: #333;
} }
.text { .text {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 10px 0;
} }
.icon { .icon {
width: 15px; width: 15px;
margin-right: 12px; margin-right: 12px;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/NEWS&EVENTS-PRESS ROOM</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -12,7 +12,8 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <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"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img width="100%" height="100%" :src="item.pic" alt=""> <img width="100%" height="100%" :src="item.pic" alt="">
@ -51,30 +52,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.newsPress modules: Modules.newsPress
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'NEWS&EVENTS-PRESS ROOM'
}
])
},
methods: { methods: {
} }
@ -83,21 +66,26 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.list { .list {
li { li {
position: relative; position: relative;
&:nth-child(even) { &:nth-child(even) {
text-align: right; text-align: right;
.texts { .texts {
left: 0; left: 0;
text-align: left; text-align: left;
} }
} }
} }
.pic { .pic {
width: 650px; width: 650px;
height: 730px; height: 730px;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 120px; top: 120px;
@ -107,16 +95,19 @@ export default {
padding: 60px 30px 30px 100px; padding: 60px 30px 30px 100px;
background: rgba(247, 247, 247, .72); background: rgba(247, 247, 247, .72);
} }
h6 { h6 {
font-size: 40px; font-size: 40px;
color: #3C3C3C; color: #3C3C3C;
} }
.sub { .sub {
margin: 20px 0; margin: 20px 0;
font-size: 24px; font-size: 24px;
color: #1C1C1C; color: #1C1C1C;
line-height: 33px; line-height: 33px;
} }
.des { .des {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 20px; font-size: 20px;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/NEWS&EVENTS-PROCUREMENT</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -12,7 +12,8 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <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"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img width="100%" height="100%" :src="item.pic" alt=""> <img width="100%" height="100%" :src="item.pic" alt="">
@ -51,30 +52,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.newsProcurement modules: Modules.newsProcurement
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'NEWS&EVENTS-PROCUREMENT'
}
])
},
methods: { methods: {
} }
@ -83,21 +66,26 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.list { .list {
li { li {
position: relative; position: relative;
&:nth-child(even) { &:nth-child(even) {
text-align: right; text-align: right;
.texts { .texts {
left: 0; left: 0;
text-align: left; text-align: left;
} }
} }
} }
.pic { .pic {
width: 650px; width: 650px;
height: 730px; height: 730px;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 120px; top: 120px;
@ -107,16 +95,19 @@ export default {
padding: 60px 30px 30px 100px; padding: 60px 30px 30px 100px;
background: rgba(247, 247, 247, .72); background: rgba(247, 247, 247, .72);
} }
h6 { h6 {
font-size: 40px; font-size: 40px;
color: #3C3C3C; color: #3C3C3C;
} }
.sub { .sub {
margin: 20px 0; margin: 20px 0;
font-size: 24px; font-size: 24px;
color: #1C1C1C; color: #1C1C1C;
line-height: 33px; line-height: 33px;
} }
.des { .des {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 20px; font-size: 20px;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-组织架构</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,45 +13,31 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="tab-content"> <div class="tab-content">
<div class="org c-wrap"> <div class="org c-wrap">
<div class="left"> <div class="left">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<p class="text" <p class="text" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p>
</div> </div>
<img class="pic" <img class="pic" src="https://huorantech.com/images/overviewSetup/1.png" alt="">
src="https://huorantech.com/images/overviewSetup/1.png" <div class="cover" style="min-height: 300px;" @click="toSet(1)">点击更换标题与描述</div>
alt="">
<div class="cover"
style="min-height: 300px;"
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<div class="lg-bg"> <div class="lg-bg">
<img width="100%" <img width="100%" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic" <div class="cover" @click="toSet(2)">点击更换图片</div>
alt="">
<div class="cover"
@click="toSet(2)">点击更换图片</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -67,25 +51,7 @@ export default {
modules: Modules.org modules: Modules.org
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于IASF-组织架构'
}
])
},
methods: { methods: {
} }
@ -94,9 +60,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.tab-content { .tab-content {
padding: 77px 0; padding: 77px 0;
} }
.org { .org {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -106,26 +74,31 @@ export default {
margin: 0 auto 50px; margin: 0 auto 50px;
background: #fcfcfc; background: #fcfcfc;
border-radius: 160px; border-radius: 160px;
.left { .left {
width: 705px; width: 705px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
color: #020202; color: #020202;
line-height: 2rem; line-height: 2rem;
} }
.pic { .pic {
width: 320px; width: 320px;
height: 282px; height: 282px;
} }
} }
.lg-bg { .lg-bg {
position: relative; position: relative;
width: 85%; width: 85%;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-研究院概况</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,65 +13,47 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block history gray"> <div class="block history gray">
<div class="inner c-wrap"> <div class="inner c-wrap">
<div class="texts wow fadeInDown" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2 v-html="modules[1].form.title"></h2> <h2 v-html="modules[1].form.title"></h2>
<div class="line"></div> <div class="line"></div>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div>
@click="toSet(1)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="core"> <div class="core">
<img :src="modules[2].form.pic" <img :src="modules[2].form.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <div class="core-title" v-html="modules[2].form.title"></div>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换图片标题描述与链接</div>
@click="toSet(2)">点击更换图片标题描述与链接</div>
</div> </div>
<div class="core"> <div class="core">
<img :src="modules[3].form.pic" <img :src="modules[3].form.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <div class="core-title" v-html="modules[3].form.title"></div>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换图片标题描述与链接</div>
@click="toSet(3)">点击更换图片标题描述与链接</div>
</div> </div>
</div> </div>
</div> </div>
@ -83,49 +63,34 @@
<div class="event"> <div class="event">
<h6 v-html="modules[4].form.title"></h6> <h6 v-html="modules[4].form.title"></h6>
<p class="en">{{ modules[4].form.subTitle }}</p> <p class="en">{{ modules[4].form.subTitle }}</p>
<div class="text" <div class="text" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <img src="@/assets/images/arrow.png" alt="">
<img src="@/assets/images/arrow.png" <div class="cover" @click="toSet(4)">点击更换标题小标题描述与链接</div>
alt="">
<div class="cover"
@click="toSet(4)">点击更换标题小标题描述与链接</div>
</div> </div>
<ul class="l-card"> <ul class="l-card">
<li> <li>
<img :src="modules[5].form.pic" <img :src="modules[5].form.pic" alt="" class="pic" />
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[5].form.des"></div>
v-html="modules[5].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(5)">点击更换图片标题描述与链接</div>
@click="toSet(5)">点击更换图片标题描述与链接</div>
</li> </li>
<li> <li>
<img :src="modules[6].form.pic" <img :src="modules[6].form.pic" alt="" class="pic" />
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[6].form.des"></div>
v-html="modules[6].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(6)">点击更换图片标题描述与链接</div>
@click="toSet(6)">点击更换图片标题描述与链接</div>
</li> </li>
<li> <li>
<img :src="modules[7].form.pic" <img :src="modules[7].form.pic" alt="" class="pic" />
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[7].form.title }}</h6> <h6>{{ modules[7].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[7].form.des"></div>
v-html="modules[7].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(7)">点击更换图片标题描述与链接</div>
@click="toSet(7)">点击更换图片标题描述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -133,68 +98,48 @@
<div class="block scan gray"> <div class="block scan gray">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title" <h2 class="b-title" v-html="modules[8].form.title"></h2>
v-html="modules[8].form.title"></h2>
<p class="intro">{{ modules[8].form.des }}</p> <p class="intro">{{ modules[8].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
@click="toSet(8)">点击更换标题与描述</div>
</div> </div>
<div class="scan-inner"> <div class="scan-inner">
<div class="left"> <div class="left">
<div class="c-wrap"> <div class="c-wrap">
<template v-for="(item, i) in modules[9].list"> <template v-for="(item, i) in modules[9].list">
<div v-if="item.isEnable" <div v-if="item.isEnable" class="line" :key="i">
class="line" <img v-if="item.pic" :src="item.pic" alt="" class="icon">
:key="i">
<img v-if="item.pic"
:src="item.pic"
alt=""
class="icon">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</div> </div>
</template> </template>
<div class="cover" <div class="cover" @click="toSet(9)">点击更换标题</div>
@click="toSet(9)">点击更换标题</div>
</div> </div>
<ul class="total"> <ul class="total">
<li> <li>
<p class="num">{{ modules[10].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
<div class="cover" <div class="cover" style="width: 100px;" @click="toSet(10)">标题描述</div>
style="width: 100px;"
@click="toSet(10)">标题描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[11].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
<div class="cover" <div class="cover" style="width: 100px;" @click="toSet(11)">标题描述</div>
style="width: 100px;"
@click="toSet(11)">标题描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
<div class="cover" <div class="cover" style="width: 100px;" @click="toSet(12)">标题描述</div>
style="width: 100px;"
@click="toSet(12)">标题描述</div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<img :src="modules[13].form.pic" <img :src="modules[13].form.pic" alt="" class="pic" />
alt="" <div class="cover" @click="toSet(13)">点击更换图片</div>
class="pic" />
<div class="cover"
@click="toSet(13)">点击更换图片</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -208,25 +153,7 @@ export default {
modules: Modules.overview modules: Modules.overview
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于IASF-研究院概况'
}
])
},
methods: { methods: {
} }
@ -235,11 +162,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.history { .history {
h2 { h2 {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -248,44 +177,53 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 6.25rem 0px 0px 0px; border-radius: 6.25rem 0px 0px 0px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 43.4375rem; width: 43.4375rem;
} }
.line { .line {
width: 53px; width: 53px;
height: 3px; height: 3px;
margin: 18px 0; margin: 18px 0;
background: #0280f1; background: #0280f1;
} }
.des { .des {
font-size: 0.9rem; font-size: 0.9rem;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
} }
.bg { .bg {
margin: -122px 0 0 0; margin: -122px 0 0 0;
border-top-right-radius: 40px; border-top-right-radius: 40px;
} }
} }
.core { .core {
position: relative; position: relative;
height: 370px; height: 370px;
margin-bottom: 40px; margin-bottom: 40px;
&:last-child { &:last-child {
.texts { .texts {
left: 40px; left: 40px;
right: auto; right: auto;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 80px; top: 80px;
@ -293,10 +231,12 @@ export default {
width: 500px; width: 500px;
color: #fff; color: #fff;
} }
h6 {
.core-title {
font-size: 1.4rem; font-size: 1.4rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.line { .line {
width: 136px; width: 136px;
height: 3px; height: 3px;
@ -304,49 +244,59 @@ export default {
background: #ffffff; background: #ffffff;
opacity: 0.56; opacity: 0.56;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
} }
} }
.fac { .fac {
.event { .event {
position: relative; position: relative;
padding: 70px 250px 70px 60px; padding: 70px 250px 70px 60px;
background: url(https://huorantech.com/images/overview/16.png) 0 0/100% no-repeat; background: url(https://huorantech.com/images/overview/16.png) 0 0/100% no-repeat;
h6 { h6 {
font-size: 2.2rem; font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333; color: #333;
} }
.en { .en {
margin-top: -10px; margin-top: -10px;
font-size: 2rem; font-size: 2rem;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #e4e4e4; color: #e4e4e4;
} }
.text { .text {
margin: 15px 0; margin: 15px 0;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
} }
.l-card { .l-card {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
li { li {
position: relative; position: relative;
width: calc((100% - 40px) / 3); width: calc((100% - 40px) / 3);
height: 380px; height: 380px;
margin-right: 20px; margin-right: 20px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 0; top: 0;
@ -357,11 +307,13 @@ export default {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
h6 { h6 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 2rem; font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -370,24 +322,29 @@ export default {
} }
} }
} }
.scan { .scan {
.scan-inner { .scan-inner {
display: flex; display: flex;
padding-left: 20%; padding-left: 20%;
} }
.left { .left {
width: 30%; width: 30%;
margin-right: 80px; margin-right: 80px;
} }
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
.icon { .icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: 20px; margin-right: 20px;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -396,13 +353,16 @@ export default {
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
} }
.total { .total {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 50px; margin-top: 50px;
li { li {
position: relative; position: relative;
} }
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 2rem; font-size: 2rem;
@ -410,11 +370,13 @@ export default {
font-weight: 800; font-weight: 800;
color: #1583ff; color: #1583ff;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
} }
.pic { .pic {
width: 70%; width: 70%;
height: 700px; height: 700px;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/SFEL-概况-发展历程</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,76 +13,57 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" <li :class="{ active: i == active }" :key="i" @click="tabChange(i)">{{ item }}</li>
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
<div class="block history"> <div class="block history">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="wow fadeInLeft" <h2 class="wow fadeInLeft" v-html="modules[1].form.title"></h2>
v-html="modules[1].form.title"></h2>
<p class="en">{{ modules[1].form.des }}</p> <p class="en">{{ modules[1].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<div v-if="modules[2].list.length" <div v-if="modules[2].list.length" class="event">
class="event">
<ul class="time"> <ul class="time">
<template v-for="(item, i) in modules[2].list"> <template v-for="(item, i) in modules[2].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }">{{ item.title }}</li>
:key="i"
:class="{active: curYear == i}">{{ item.title }}</li>
</template> </template>
</ul> </ul>
<div class="right"> <div class="right">
<h6 class="year">{{ modules[2].list[curYear].title }}</h6> <h6 class="year">{{ modules[2].list[curYear].title }}</h6>
<ul class="list"> <ul class="list">
<template v-for="(e, j) in modules[2].list[curYear].list"> <template v-for="(e, j) in modules[2].list[curYear].list">
<li v-if="e.isEnable" <li v-if="e.isEnable" :key="j">
:key="j">
<div class="texts"> <div class="texts">
<p class="date">{{ e.title }}</p> <p class="date">{{ e.title }}</p>
<p class="text">{{ e.des }}</p> <p class="text">{{ e.des }}</p>
</div> </div>
<img v-if="e.pic" <img v-if="e.pic" :src="e.pic" alt="" class="pic">
:src="e.pic"
alt=""
class="pic">
</li> </li>
</template> </template>
</ul> </ul>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" style="min-height: 300px;" @click="toSet(2)">点击配置历程</div>
style="min-height: 300px;"
@click="toSet(2)">点击配置历程</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -101,25 +80,7 @@ export default {
curYear: 0 curYear: 0
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-发展历程'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -131,15 +92,18 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat, background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat; url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
background-color: #fff; background-color: #fff;
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -148,12 +112,14 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.history { .history {
h2 { h2 {
position: relative; position: relative;
@ -162,6 +128,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #1c1c1c; color: #1c1c1c;
} }
.en { .en {
margin: -15px 0 40px; margin: -15px 0 40px;
font-size: 2.2rem; font-size: 2.2rem;
@ -170,14 +137,17 @@ export default {
color: #e3e3e3; color: #e3e3e3;
} }
} }
.event { .event {
display: flex; display: flex;
justify-content: center; justify-content: center;
.time { .time {
width: 200px; width: 200px;
padding-right: 10px; padding-right: 10px;
margin-right: 20px; margin-right: 20px;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -191,10 +161,12 @@ export default {
color: #666; color: #666;
box-shadow: inset 0px -1px 0px 0px #dddddd; box-shadow: inset 0px -1px 0px 0px #dddddd;
cursor: pointer; cursor: pointer;
&.active { &.active {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%); background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
&:before { &:before {
content: ''; content: '';
width: 18px; width: 18px;
@ -205,9 +177,11 @@ export default {
} }
} }
} }
.right { .right {
width: 900px; width: 900px;
} }
.year { .year {
margin: 0 0 20px 20px; margin: 0 0 20px 20px;
font-size: 3.8rem; font-size: 3.8rem;
@ -215,8 +189,10 @@ export default {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
} }
.list { .list {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -224,9 +200,11 @@ export default {
padding: 30px; padding: 30px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.texts { .texts {
width: 500px; width: 500px;
} }
.date { .date {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.2rem; font-size: 1.2rem;
@ -234,10 +212,12 @@ export default {
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.text { .text {
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
@include mul-ellipsis(3); @include mul-ellipsis(3);
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -248,6 +228,7 @@ export default {
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
.pic { .pic {
width: 350px; width: 350px;
height: 195px; height: 195px;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/SFEL-概况-S³FEL介绍</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,62 +13,45 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" <li :class="{ active: i == active }" :key="i" @click="tabChange(i)">{{ item }}</li>
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="intro c-wrap"> <div class="intro c-wrap">
<img class="pic" <img class="pic" :src="modules[1].form.pic" alt="">
:src="modules[1].form.pic"
alt="">
<div class="right"> <div class="right">
<div class="relative"> <div class="relative">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<img class="title-bg" <img class="title-bg" src="https://huorantech.com/images/overviewIntro/2.png" alt="">
src="https://huorantech.com/images/overviewIntro/2.png"
alt="">
</div> </div>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" style="min-height: 300px;" @click="toSet(1)">点击更换图片标题与描述</div>
style="min-height: 300px;"
@click="toSet(1)">点击更换图片标题与描述</div>
</div> </div>
<div class="intro-bg"> <div class="intro-bg">
<div class="mask"></div> <div class="mask"></div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
@click="toSet(2)">点击更换标题与描述</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -86,25 +67,7 @@ export default {
tabs: ['S³FEL介绍'] tabs: ['S³FEL介绍']
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-介绍'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -116,13 +79,16 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background: url(../../../assets/images/survey2.png) (bottom right) / auto no-repeat; background: url(../../../assets/images/survey2.png) (bottom right) / auto no-repeat;
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -131,34 +97,42 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.tab-content { .tab-content {
padding-top: 150px; padding-top: 150px;
.intro { .intro {
display: flex; display: flex;
margin-bottom: 110px; margin-bottom: 110px;
.pic { .pic {
width: 600px; width: 600px;
margin-right: 50px; margin-right: 50px;
} }
.right { .right {
width: 600px; width: 600px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 1.2rem; font-size: 1.2rem;
color: #333; color: #333;
} }
.title-bg { .title-bg {
position: absolute; position: absolute;
top: -40px; top: -40px;
left: -20px; left: -20px;
} }
.text { .text {
margin-top: 40px; margin-top: 40px;
font-size: 1rem; font-size: 1rem;
@ -166,6 +140,7 @@ export default {
line-height: 2; line-height: 2;
} }
} }
.intro-bg { .intro-bg {
position: relative; position: relative;
height: 275px; height: 275px;
@ -173,6 +148,7 @@ export default {
color: #fff; color: #fff;
text-align: center; text-align: center;
background: url(https://huorantech.com/images/overviewIntro/3.png) 0 0/100% 100% no-repeat; background: url(https://huorantech.com/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
.mask { .mask {
position: absolute; position: absolute;
top: 0; top: 0;
@ -182,20 +158,24 @@ export default {
content: ''; content: '';
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.texts { .texts {
position: relative; position: relative;
} }
h6 { h6 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 2rem; font-size: 2rem;
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
font-weight: 800; font-weight: 800;
} }
.des { .des {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs { .tabs {
overflow: hidden; overflow: hidden;
@ -203,12 +183,15 @@ export default {
white-space: normal; white-space: normal;
justify-content: normal; justify-content: normal;
display: -webkit-box; display: -webkit-box;
li { li {
white-space: normal; white-space: normal;
} }
} }
.tab-content { .tab-content {
width: 90%; width: 90%;
span { span {
font-size: 1.35rem; font-size: 1.35rem;
} }

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/SFEL-概况-地理位置</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -23,7 +23,7 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <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> </template>
</ul> </ul>
@ -44,35 +44,17 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.overviewLocation, modules: Modules.overviewLocation,
active: 0, active: 0,
tabs: ['地理位置'] tabs: ['地理位置']
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-地理位置'
}
])
},
methods: { methods: {
// tab // tab
tabChange(i) { tabChange (i) {
this.active = i this.active = i
}, },
} }
@ -81,37 +63,44 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.wrap { .wrap {
background: url(../../../assets/images/survey1.png) (0 559px)/auto no-repeat, background: url(../../../assets/images/survey1.png) (0 559px)/auto no-repeat,
url(../../../assets/images/survey2.png) (bottom right)/auto no-repeat; url(../../../assets/images/survey2.png) (bottom right)/auto no-repeat;
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
font-size: 22px; font-size: 22px;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583FF; color: #1583FF;
border-bottom-color: #1583FF; border-bottom-color: #1583FF;
} }
} }
} }
.tab-content { .tab-content {
width: 1000px; width: 1000px;
padding: 77px 0; padding: 77px 0;
margin: 0 auto; margin: 0 auto;
} }
.video { .video {
width: 100%; width: 100%;
margin-bottom: 55px; margin-bottom: 55px;
} }
.text { .text {
font-size: 18px; font-size: 18px;
color: #020202; color: #020202;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/SFEL-概况-机构设置</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,22 +13,17 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" <li :class="{ active: i == active }" :key="i" @click="tabChange(i)">{{ item }}</li>
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
@ -38,30 +31,19 @@
<div class="org c-wrap"> <div class="org c-wrap">
<div class="left"> <div class="left">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="text" <p class="text" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p>
</div> </div>
<img class="pic" <img class="pic" src="https://huorantech.com/images/overviewSetup/1.png" alt="">
src="https://huorantech.com/images/overviewSetup/1.png" <div class="cover" style="min-height: 300px;" @click="toSet(1)">点击更换标题与描述</div>
alt="">
<div class="cover"
style="min-height: 300px;"
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<div class="lg-bg"> <div class="lg-bg">
<img width="100%" <img width="100%" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic" <div class="cover" @click="toSet(2)">点击更换图片</div>
alt="">
<div class="cover"
@click="toSet(2)">点击更换图片</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -77,25 +59,7 @@ export default {
tabs: ['机构设置'] tabs: ['机构设置']
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-机构设置'
}
])
},
methods: { methods: {
// tab // tab
tabChange (i) { tabChange (i) {
@ -107,10 +71,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -119,15 +85,18 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
.tab-content { .tab-content {
padding: 77px 0; padding: 77px 0;
} }
.org { .org {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -137,26 +106,31 @@ export default {
margin: 0 auto 50px; margin: 0 auto 50px;
background: #fcfcfc; background: #fcfcfc;
border-radius: 160px; border-radius: 160px;
.left { .left {
width: 705px; width: 705px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
color: #020202; color: #020202;
line-height: 2rem; line-height: 2rem;
} }
.pic { .pic {
width: 320px; width: 320px;
height: 282px; height: 282px;
} }
} }
.lg-bg { .lg-bg {
position: relative; position: relative;
width: 85%; width: 85%;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/SFEL-概况-S³FEL宣传片</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -23,7 +23,7 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <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> </template>
</ul> </ul>
@ -48,35 +48,17 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.overviewTrailer, modules: Modules.overviewTrailer,
active: 0, active: 0,
tabs: ['S³FEL宣传片'] tabs: ['S³FEL宣传片']
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '概况-宣传片'
}
])
},
methods: { methods: {
// tab // tab
tabChange(i) { tabChange (i) {
this.active = i this.active = i
}, },
} }
@ -85,37 +67,44 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.wrap { .wrap {
background: url(../../../assets/images/survey1.png) (0 559px)/auto no-repeat, background: url(../../../assets/images/survey1.png) (0 559px)/auto no-repeat,
url(../../../assets/images/survey2.png) (bottom right)/auto no-repeat; url(../../../assets/images/survey2.png) (bottom right)/auto no-repeat;
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
font-size: 22px; font-size: 22px;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583FF; color: #1583FF;
border-bottom-color: #1583FF; border-bottom-color: #1583FF;
} }
} }
} }
.tab-content { .tab-content {
width: 1000px; width: 1000px;
padding: 77px 0; padding: 77px 0;
margin: 0 auto; margin: 0 auto;
} }
.video { .video {
width: 100%; width: 100%;
margin-bottom: 55px; margin-bottom: 55px;
} }
.text { .text {
font-size: 18px; font-size: 18px;
color: #020202; color: #020202;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/RESEARCH</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -12,7 +12,8 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <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"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img width="100%" height="100%" :src="item.pic" alt=""> <img width="100%" height="100%" :src="item.pic" alt="">
@ -90,30 +91,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.research modules: Modules.research
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'RESEARCH'
}
])
},
methods: { methods: {
} }
@ -122,73 +105,91 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.area { .area {
display: flex; display: flex;
li { li {
position: relative; position: relative;
width: 19%; width: 19%;
height: 653px; height: 653px;
color: #fff; color: #fff;
background: url(../../../assets/images/research/res1.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
&:nth-child(2) { &:nth-child(2) {
width: 21%; width: 21%;
margin-top: 70px; margin-top: 70px;
.texts { .texts {
background: #2B1B1C; background: #2B1B1C;
} }
} }
&:nth-child(3) { &:nth-child(3) {
.texts { .texts {
background: #009C91; background: #009C91;
} }
} }
&:nth-child(4) { &:nth-child(4) {
margin-top: 70px; margin-top: 70px;
.texts { .texts {
background: #005388; background: #005388;
} }
} }
&:nth-child(5) { &:nth-child(5) {
width: 22%; width: 22%;
.texts { .texts {
background: #9A4E10; background: #9A4E10;
} }
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 443px; height: 443px;
} }
.texts { .texts {
width: 100%; width: 100%;
height: 210px; height: 210px;
padding: 20px 40px; padding: 20px 40px;
background: #08577B; background: #08577B;
} }
h6 { h6 {
font-size: 30px; font-size: 30px;
white-space: nowrap; white-space: nowrap;
} }
.des { .des {
font-size: 22px; font-size: 22px;
color: rgba(255,255,255,0.55); color: rgba(255, 255, 255, 0.55);
} }
} }
.group { .group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
width: 448px; width: 448px;
margin: 0 28px 39px 0; margin: 0 28px 39px 0;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
img { img {
width: 100%; width: 100%;
height: 353px; height: 353px;
} }
.text { .text {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -204,10 +205,12 @@ export default {
background-color: #F5F5F5; background-color: #F5F5F5;
} }
} }
.news { .news {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
width: 448px; width: 448px;
@ -215,28 +218,34 @@ export default {
margin-right: 28px; margin-right: 28px;
color: #333; color: #333;
background-color: #fff; background-color: #fff;
box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08); box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
border-radius: 10px; border-radius: 10px;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
color: #fff; color: #fff;
background-color: #0252D9; background-color: #0252D9;
} }
} }
img { img {
width: 427px; width: 427px;
height: 481px; height: 481px;
} }
.texts { .texts {
padding: 0 18px 50px; padding: 0 18px 50px;
} }
h6 { h6 {
margin: 35px 0 12px; margin: 35px 0 12px;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
} }
.des { .des {
font-size: 18px; font-size: 18px;
line-height: 26px; line-height: 26px;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/RESEARCH</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,41 +15,30 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block"> <div class="block">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[1].form.title }}</h2> <h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p> <p class="intro">{{ modules[1].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<ul class="area"> <ul class="area">
<template v-for="(item, i) in modules[2].list"> <template v-for="(item, i) in modules[2].list">
<li :key="i"> <li :key="i">
<img :src="item.pic" <img :src="item.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
alt=""
class="icon">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p> <p class="des">{{ item.des }}</p>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2, i)">点击更改图片标题概述与链接</div>
@click="toSet(2, i)">点击更改图片标题概述与链接</div>
</li> </li>
</template> </template>
</ul> </ul>
@ -62,27 +49,20 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[3].form.title }}</h2> <h2 class="b-title">{{ modules[3].form.title }}</h2>
<p class="intro">{{ modules[3].form.des }}</p> <p class="intro">{{ modules[3].form.des }}</p>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换标题与描述</div>
@click="toSet(3)">点击更换标题与描述</div>
</div> </div>
<ul class="group"> <ul class="group">
<li v-for="(item, i) in modules[4].list" <li v-for="(item, i) in modules[4].list" :key="i">
:key="i"> <img :src="item.pic" alt="">
<img :src="item.pic"
alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<div class="cover" <div class="cover" @click="toSet(4, i)">点击更改图片标题与链接</div>
@click="toSet(4, i)">点击更改图片标题与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -96,25 +76,7 @@ export default {
modules: Modules.research modules: Modules.research
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'RESEARCH'
}
])
},
methods: { methods: {
} }
@ -123,73 +85,91 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.area { .area {
display: flex; display: flex;
li { li {
position: relative; position: relative;
width: 19%; width: 19%;
height: 653px; height: 653px;
color: #fff; color: #fff;
background: url(../../../assets/images/research/res1.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
&:nth-child(2) { &:nth-child(2) {
width: 21%; width: 21%;
margin-top: 70px; margin-top: 70px;
.texts { .texts {
background: #2b1b1c; background: #2b1b1c;
} }
} }
&:nth-child(3) { &:nth-child(3) {
.texts { .texts {
background: #009c91; background: #009c91;
} }
} }
&:nth-child(4) { &:nth-child(4) {
margin-top: 70px; margin-top: 70px;
.texts { .texts {
background: #005388; background: #005388;
} }
} }
&:nth-child(5) { &:nth-child(5) {
width: 22%; width: 22%;
.texts { .texts {
background: #9a4e10; background: #9a4e10;
} }
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 443px; height: 443px;
} }
.texts { .texts {
width: 100%; width: 100%;
height: 210px; height: 210px;
padding: 20px 40px; padding: 20px 40px;
background: #08577b; background: #08577b;
} }
h6 { h6 {
font-size: 30px; font-size: 30px;
white-space: nowrap; white-space: nowrap;
} }
.des { .des {
font-size: 22px; font-size: 22px;
color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.55);
} }
} }
.group { .group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
width: 448px; width: 448px;
margin: 0 28px 39px 0; margin: 0 28px 39px 0;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
img { img {
width: 100%; width: 100%;
height: 353px; height: 353px;
} }
.text { .text {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -205,10 +185,12 @@ export default {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
} }
.news { .news {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
width: 448px; width: 448px;
@ -218,26 +200,32 @@ export default {
background-color: #fff; background-color: #fff;
box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08); box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
border-radius: 10px; border-radius: 10px;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
color: #fff; color: #fff;
background-color: #0252d9; background-color: #0252d9;
} }
} }
img { img {
width: 427px; width: 427px;
height: 481px; height: 481px;
} }
.texts { .texts {
padding: 0 18px 50px; padding: 0 18px 50px;
} }
h6 { h6 {
margin: 35px 0 12px; margin: 35px 0 12px;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
} }
.des { .des {
font-size: 18px; font-size: 18px;
line-height: 26px; line-height: 26px;

@ -2,13 +2,11 @@
<!-- 关于IASF-研究团队 --> <!-- 关于IASF-研究团队 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-研究团队</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,15 +14,12 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="content"> <div class="content">
@ -33,37 +28,27 @@
<ul class="teams"> <ul class="teams">
<li> <li>
<div class="line"> <div class="line">
<img src="https://huorantech.com/images/researchTeam/3.png" <img src="https://huorantech.com/images/researchTeam/3.png" alt="" class="icon">
alt=""
class="icon">
<span class="bold">姓名</span> <span class="bold">姓名</span>
<span class="val">/ 岗位</span> <span class="val">/ 岗位</span>
</div> </div>
<div class="line"> <div class="line">
<img src="https://huorantech.com/images/researchTeam/4.png" <img src="https://huorantech.com/images/researchTeam/4.png" alt="" class="icon">
alt=""
class="icon">
<span class="text">专业 超低温总体</span> <span class="text">专业 超低温总体</span>
</div> </div>
<div class="line"> <div class="line">
<img src="https://huorantech.com/images/researchTeam/5.png" <img src="https://huorantech.com/images/researchTeam/5.png" alt="" class="icon">
alt=""
class="icon">
<span class="text">荣誉 杰青 万人</span> <span class="text">荣誉 杰青 万人</span>
</div> </div>
</li> </li>
<div class="cover" <div class="cover" @click="toSet(1)">关联栏目</div>
@click="toSet(1)">关联栏目</div>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -78,25 +63,7 @@ export default {
title: '' title: ''
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于IASF-研究团队'
}
])
},
methods: { methods: {
} }
@ -105,18 +72,23 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.content { .content {
width: 1400px; width: 1400px;
margin-top: 20px; margin-top: 20px;
} }
.article { .article {
display: flex; display: flex;
justify-content: center; justify-content: center;
.left { .left {
width: 66%; width: 66%;
.search { .search {
display: inline-flex; display: inline-flex;
width: 34%; width: 34%;
input { input {
width: 100%; width: 100%;
height: 38px; height: 38px;
@ -127,51 +99,62 @@ export default {
border: 0; border: 0;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
&:focus { &:focus {
outline: none; outline: none;
} }
} }
} }
} }
.teams { .teams {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 30px; margin-top: 30px;
li { li {
position: relative; position: relative;
width: calc((100% - 10px) / 2); width: calc((100% - 10px) / 2);
padding: 20px 30px; padding: 20px 30px;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
background: url(https://huorantech.com/images/researchTeam/2.png) 0 0 / cover no-repeat; background: url(https://huorantech.com/images/researchTeam/2.png) 0 0 / cover no-repeat;
&:nth-child(even) { &:nth-child(even) {
margin-right: 0; margin-right: 0;
} }
} }
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
} }
.icon { .icon {
margin-right: 8px; margin-right: 8px;
} }
.bold { .bold {
margin-right: 5px; margin-right: 5px;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
} }
.val { .val {
font-size: 1rem; font-size: 1rem;
color: #999; color: #999;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
color: #666; color: #666;
} }
} }
.notice { .notice {
display: flex; display: flex;
li { li {
position: relative; position: relative;
width: calc((100% - 20px) / 2); width: calc((100% - 20px) / 2);
@ -179,10 +162,12 @@ export default {
padding: 20px; padding: 20px;
background-color: #fff; background-color: #fff;
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.text { .text {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
@ -195,52 +180,65 @@ export default {
background: rgba(32, 57, 81, 0.68); background: rgba(32, 57, 81, 0.68);
} }
} }
.right { .right {
width: 20%; width: 20%;
} }
.column { .column {
width: 100%; width: 100%;
margin-bottom: 25px; margin-bottom: 25px;
} }
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 44px; height: 44px;
background-color: #e5edf8; background-color: #e5edf8;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
} }
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: #fff; color: #fff;
background-color: #0f5698; background-color: #0f5698;
} }
.list { .list {
margin-bottom: 20px; margin-bottom: 20px;
li { li {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }
.text { .text {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $main-color; color: $main-color;
} }
} }
.date { .date {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.content { .content {
width: 98%; width: 98%;
} }
.article { .article {
flex-direction: column; flex-direction: column;
.left, .left,
.right { .right {
width: 100%; width: 100%;
} }
.left { .left {
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -253,45 +251,57 @@ export default {
li { li {
flex-direction: column; flex-direction: column;
} }
.pic { .pic {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.notice { .notice {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
} }
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.content { .content {
.article { .article {
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
.recruit { .recruit {
li { li {
flex-direction: column; flex-direction: column;
.pic { .pic {
width: 100%; width: 100%;
} }
.texts { .texts {
margin-top: 0.8rem; margin-top: 0.8rem;
} }
} }
} }
.notice { .notice {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
} }
} }
} }
.right { .right {
width: 100%; width: 100%;
.el-tree { .el-tree {
display: none; display: none;
} }
@ -299,18 +309,21 @@ export default {
} }
} }
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 13rem; height: 13rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 7rem; top: 7rem;
} }
} }
} }
.content { .content {
.article { .article {
.left { .left {
@ -321,9 +334,11 @@ export default {
} }
} }
} }
.notice { .notice {
li { li {
height: auto; height: auto;
.pic { .pic {
height: 13rem; height: 13rem;
} }
@ -333,18 +348,21 @@ export default {
} }
} }
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 15rem; height: 15rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 7rem; top: 7rem;
} }
} }
} }
.content { .content {
.article { .article {
.left { .left {
@ -355,9 +373,11 @@ export default {
} }
} }
} }
.notice { .notice {
li { li {
height: auto; height: auto;
.pic { .pic {
height: 15rem; height: 15rem;
} }
@ -367,18 +387,21 @@ export default {
} }
} }
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 18rem; height: 18rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 10rem; top: 10rem;
} }
} }
} }
.content { .content {
.article { .article {
.left { .left {
@ -389,9 +412,11 @@ export default {
} }
} }
} }
.notice { .notice {
li { li {
height: auto; height: auto;
.pic { .pic {
height: 18rem; height: 18rem;
} }
@ -401,18 +426,21 @@ export default {
} }
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 20rem; height: 20rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 12rem; top: 12rem;
} }
} }
} }
.content { .content {
.article { .article {
.left { .left {
@ -423,9 +451,11 @@ export default {
} }
} }
} }
.notice { .notice {
li { li {
height: auto; height: auto;
.pic { .pic {
height: 22rem; height: 22rem;
} }
@ -435,18 +465,21 @@ export default {
} }
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 22rem; height: 22rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 14rem; top: 14rem;
} }
} }
} }
.content { .content {
.article { .article {
.left { .left {
@ -457,9 +490,11 @@ export default {
} }
} }
} }
.notice { .notice {
li { li {
height: auto; height: auto;
.pic { .pic {
height: 26rem; height: 26rem;
} }
@ -469,18 +504,21 @@ export default {
} }
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 26rem; height: 26rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 16rem; top: 16rem;
} }
} }
} }
.content { .content {
.article { .article {
.left { .left {
@ -491,9 +529,11 @@ export default {
} }
} }
} }
.notice { .notice {
li { li {
height: auto; height: auto;
.pic { .pic {
height: 30rem; height: 30rem;
} }
@ -503,18 +543,21 @@ export default {
} }
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 30rem; height: 30rem;
} }
.texts { .texts {
left: 3rem; left: 3rem;
top: 18rem; top: 18rem;
} }
} }
} }
.content { .content {
.article { .article {
.left { .left {
@ -525,9 +568,11 @@ export default {
} }
} }
} }
.notice { .notice {
li { li {
height: auto; height: auto;
.pic { .pic {
height: 35rem; height: 35rem;
} }

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/科普之窗</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -61,30 +61,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.science modules: Modules.science
} }
}, },
mounted() { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '科普之窗'
}
])
},
methods: { methods: {
} }
@ -93,28 +75,35 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import "../../../styles/page/page.scss";
.inner { .inner {
width: 1200px; width: 1200px;
} }
.item { .item {
position: relative; position: relative;
margin-bottom: 58px; margin-bottom: 58px;
img { img {
width: 100%; width: 100%;
height: 508px; height: 508px;
} }
&:nth-child(2) .texts { &:nth-child(2) .texts {
color: #fff; color: #fff;
background: #33B3C1; background: #33B3C1;
} }
&:nth-child(3) .texts { &:nth-child(3) .texts {
color: #fff; color: #fff;
background: #E47C22; background: #E47C22;
} }
&:nth-child(even) .texts { &:nth-child(even) .texts {
left: auto; left: auto;
right: -28px; right: -28px;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 79px; top: 79px;
@ -124,12 +113,14 @@ export default {
color: #333; color: #333;
background: #FFF6E9; background: #FFF6E9;
} }
h6 { h6 {
margin-bottom: 14px; margin-bottom: 14px;
font-size: 36px; font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.des { .des {
font-size: 18px; font-size: 18px;
} }

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/科学研究</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,50 +13,35 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des des">{{ modules[0].form.des }}</p> <p class="banner-des des">{{ modules[0].form.des }}</p>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<ul class="items"> <ul class="items">
<li> <li>
<img class="pic" <img class="pic" :src="modules[1].form.pic" alt="">
:src="modules[1].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div> <img class="icon" src="@/assets/images/arrow.png" alt="">
<img class="icon"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换图片标题概述与链接</div>
@click="toSet(1)">点击更换图片标题概述与链接</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 v-html="modules[2].form.title"></h6> <h6 v-html="modules[2].form.title"></h6>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div> <img class="icon" src="@/assets/images/arrow.png" alt="">
<img class="icon"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换图片标题概述与链接</div>
@click="toSet(2)">点击更换图片标题概述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -67,27 +50,16 @@
<div class="about"> <div class="about">
<div class="inner"> <div class="inner">
<div class="texts"> <div class="texts">
<div class="title wow fadeInUp" <div class="title wow fadeInUp" data-wow-delay="0.7s" v-html="modules[3].form.title"></div>
data-wow-delay="0.7s" <div class="des wow fadeInDown" data-wow-delay="1s" v-html="modules[3].form.des"></div>
v-html="modules[3].form.title"></div> <img class="m-t-10" width="42" src="@/assets/images/arrow-white.png" alt="">
<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> </div>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换标题描述与链接</div>
@click="toSet(3)">点击更换标题描述与链接</div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -101,25 +73,7 @@ export default {
modules: Modules.scientific modules: Modules.scientific
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '科学研究'
}
])
},
methods: { methods: {
} }
@ -128,21 +82,25 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.items { .items {
li { li {
position: relative; position: relative;
height: 600px; height: 600px;
margin-bottom: 60px; margin-bottom: 60px;
&:nth-child(even) { &:nth-child(even) {
.texts { .texts {
left: auto; left: auto;
right: 100px; right: 100px;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 100px; top: 100px;
@ -155,22 +113,27 @@ export default {
border-radius: 0px 0px 100px 0px; border-radius: 0px 0px 100px 0px;
border-top: 4px solid #0280f1; border-top: 4px solid #0280f1;
} }
h6 { h6 {
font-size: 1.2rem; font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.text { .text {
margin: 1rem 0; margin: 1rem 0;
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
} }
.icon { .icon {
width: 40px; width: 40px;
} }
} }
} }
.program { .program {
background: #fff; background: #fff;
.title { .title {
position: relative; position: relative;
display: flex; display: flex;
@ -180,6 +143,7 @@ export default {
margin-bottom: 30px; margin-bottom: 30px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
align-items: center; align-items: center;
h5 { h5 {
padding-left: 16px; padding-left: 16px;
font-size: 1.6rem; font-size: 1.6rem;
@ -189,56 +153,67 @@ export default {
line-height: 1; line-height: 1;
border-left: 6px solid #2b96ef; border-left: 6px solid #2b96ef;
} }
.sub { .sub {
font-size: 1.1rem; font-size: 1.1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #afb7bf; color: #afb7bf;
} }
.more { .more {
font-size: 0.8rem; font-size: 0.8rem;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
} }
} }
.slide { .slide {
display: flex; display: flex;
margin-bottom: 14px; margin-bottom: 14px;
cursor: pointer; cursor: pointer;
} }
.texts { .texts {
width: 51%; width: 51%;
padding: 56px; padding: 56px;
background: #fbfbfb; background: #fbfbfb;
h6 { h6 {
font-size: 1.3rem; font-size: 1.3rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.des { .des {
margin: 35px 0 25px; margin: 35px 0 25px;
font-size: 1rem; font-size: 1rem;
color: #666; color: #666;
line-height: 32px; line-height: 32px;
} }
.meta { .meta {
font-size: 0.9rem; font-size: 0.9rem;
color: #666; color: #666;
} }
} }
.img-wrap { .img-wrap {
width: 49%; width: 49%;
height: 430px; height: 430px;
overflow: hidden; overflow: hidden;
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.5s; transition: 0.5s;
} }
.list { .list {
display: flex; display: flex;
li { li {
width: calc((100% - 28px) / 3); width: calc((100% - 28px) / 3);
height: 204px; height: 204px;
@ -248,14 +223,17 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
transition: 0.5s; transition: 0.5s;
cursor: pointer; cursor: pointer;
&:nth-child(2) { &:nth-child(2) {
background-image: url(../../../assets/images/sfel/8.png); background-image: url(../../../assets/images/sfel/8.png);
} }
&:nth-child(3) { &:nth-child(3) {
margin-right: 0; margin-right: 0;
background-image: url(../../../assets/images/sfel/9.png); background-image: url(../../../assets/images/sfel/9.png);
} }
} }
.des { .des {
height: 90px; height: 90px;
margin-bottom: 30px; margin-bottom: 30px;
@ -265,6 +243,7 @@ export default {
color: #ffffff; color: #ffffff;
line-height: 30px; line-height: 30px;
} }
.date { .date {
font-size: 0.9rem; font-size: 0.9rem;
font-family: LaoSangamMN; font-family: LaoSangamMN;
@ -272,12 +251,14 @@ export default {
} }
} }
} }
.about { .about {
position: relative; position: relative;
padding: 10rem 0 3rem; padding: 10rem 0 3rem;
text-align: center; text-align: center;
background: url(../../../assets/images/about-bg.png) no-repeat center center; background: url(../../../assets/images/about-bg.png) no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
.texts { .texts {
padding: 2.375rem 3.75rem; padding: 2.375rem 3.75rem;
color: #fff; color: #fff;
@ -285,10 +266,12 @@ export default {
border-radius: 17px; border-radius: 17px;
transition: 0.3s; transition: 0.3s;
} }
.title { .title {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 2.2rem; font-size: 2.2rem;
} }
.des { .des {
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;

File diff suppressed because it is too large Load Diff

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/SFEL</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -17,17 +15,12 @@
<el-carousel height="480px" <el-carousel height="480px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <img width="100%" height="100%" :src="item.pic" alt="">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block banner-block"> <div class="block banner-block">
@ -38,61 +31,48 @@
<span class="sub">{{ modules[1].form.subTitle }}</span> <span class="sub">{{ modules[1].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换标题与小标题</div>
@click="toSet(1)">点击更换标题与小标题</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<div class="sfel-banner"> <div class="sfel-banner">
<img width="100%" <img width="100%" height="480" src="https://huorantech.com/images/about/5.png" alt="">
height="480"
src="https://huorantech.com/images/about/5.png"
alt="">
<div class="right"> <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> <h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and
<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> 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> <p class="meta">2022-07-24 | Research</p>
</div> </div>
</div> </div>
<ul class="card"> <ul class="card">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/10.png" alt="">
src="https://huorantech.com/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/11.png" alt="">
src="https://huorantech.com/images/about/11.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="">
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
</ul> </ul>
<div class="cover" <div class="cover" @click="toSet(2)">关联栏目</div>
@click="toSet(2)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
@ -105,61 +85,49 @@
<span class="sub">{{ modules[3].form.subTitle }}</span> <span class="sub">{{ modules[3].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换标题与小标题</div>
@click="toSet(3)">点击更换标题与小标题</div>
</div> </div>
<div class="shop-shows c-wrap"> <div class="shop-shows c-wrap">
<div class="left wow fadeInLeft" <div class="left wow fadeInLeft" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<el-carousel height="432px"> <el-carousel height="432px">
<el-carousel-item> <el-carousel-item>
<div class="item"> <div class="item">
<img src="@/assets/images/survey3.png" <img src="@/assets/images/survey3.png" alt="">
alt="">
<p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p> <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="item"> <div class="item">
<img src="@/assets/images/survey3.png" <img src="@/assets/images/survey3.png" alt="">
alt="">
<p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p> <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="item"> <div class="item">
<img src="@/assets/images/survey3.png" <img src="@/assets/images/survey3.png" alt="">
alt="">
<p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p> <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="right wow fadeInRight" <div class="right wow fadeInRight" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<ul class="card-list"> <ul class="card-list">
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>喜讯储存环三次谐波腔的带束实验验证及超导高频频腔</h6> <h6>喜讯储存环三次谐波腔的带束实验验证及超导高频频腔</h6>
<div class="des">1月20日上午光明区总工会组织的关爱职工·情暖光明春节工会关爱活动走进深圳综合粒子设施研究院为奋战在综合性</div> <div class="des">1月20日上午光明区总工会组织的关爱职工·情暖光明春节工会关爱活动走进深圳综合粒子设施研究院为奋战在综合性</div>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>光明区总工会为一线科研人员送上新春祝福</h6> <h6>光明区总工会为一线科研人员送上新春祝福</h6>
<div class="des">1月11日上午深圳综合粒子设施研究院与深圳大学签署战略合作框架协议深圳大学党委书记校长李清泉深圳综合粒子设施研究院与深圳大学党委</div> <div class="des">1月11日上午深圳综合粒子设施研究院与深圳大学签署战略合作框架协议深圳大学党委书记校长李清泉深圳综合粒子设施研究院与深圳大学党委</div>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" src="https://huorantech.com/images/about/9.png" alt="">
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>深圳综合粒子设施研究院与中国科学院</h6> <h6>深圳综合粒子设施研究院与中国科学院</h6>
<div class="des">1月20日上午光明区总工会组织的关爱职工·情暖光明春节工会关爱活动走进深圳综合粒子设施研究院为奋战在综合性</div> <div class="des">1月20日上午光明区总工会组织的关爱职工·情暖光明春节工会关爱活动走进深圳综合粒子设施研究院为奋战在综合性</div>
@ -167,8 +135,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(4)">关联栏目</div>
@click="toSet(4)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
@ -181,27 +148,17 @@
<span class="sub">{{ modules[7].form.subTitle }}</span> <span class="sub">{{ modules[7].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(7)">点击更换标题与小标题</div>
@click="toSet(7)">点击更换标题与小标题</div>
</div> </div>
<div class="media-wrap c-wrap"> <div class="media-wrap c-wrap">
<div class="left"> <div class="left">
<div class="slides"> <div class="slides">
<div class="item wow fadeInLeft" <div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px">
data-wow-delay="0.5s" <img width="100%" height="100%" src="https://huorantech.com/images/about/9.png" alt="">
style="margin-right: 20px">
<img width="100%"
height="100%"
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div> <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
</div> </div>
<div class="item wow fadeInLeft" <div class="item wow fadeInLeft" data-wow-delay="0.5s">
data-wow-delay="0.5s"> <img width="100%" height="100%" src="https://huorantech.com/images/about/9.png" alt="">
<img width="100%"
height="100%"
src="https://huorantech.com/images/about/9.png"
alt="">
<div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div> <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
</div> </div>
</div> </div>
@ -221,15 +178,13 @@
</ul> </ul>
</div> </div>
<div class="right"> <div class="right">
<img src="@/assets/images/survey3.png" <img src="@/assets/images/survey3.png" alt="">
alt="">
<div class="texts"> <div class="texts">
<h6>关于2021年度深圳综合粒子设施研究院采购公开表</h6> <h6>关于2021年度深圳综合粒子设施研究院采购公开表</h6>
<div class="des">把一个基因切成两段分别翻译成两段蛋白片段还会有原来的功能吗实多数蛋白片段会</div> <div class="des">把一个基因切成两段分别翻译成两段蛋白片段还会有原来的功能吗实多数蛋白片段会</div>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(8)">关联栏目</div>
@click="toSet(8)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
@ -242,19 +197,18 @@
<span class="sub">{{ modules[11].form.subTitle }}</span> <span class="sub">{{ modules[11].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
<div class="cover" <div class="cover" @click="toSet(11)">点击更换标题与小标题</div>
@click="toSet(11)">点击更换标题与小标题</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<div class="slide"> <div class="slide">
<div class="texts"> <div class="texts">
<h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6> <h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6>
<div class="des">X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标面向国民经济主战场和世界科技前沿</div> <div class="des">
X射线自由电子激光已经成为了化学生物物理等领域不可或缺的研究手段对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标面向国民经济主战场和世界科技前沿
</div>
<div class="meta">发表日期2022.01.10 &emsp;浏览量备份</div> <div class="meta">发表日期2022.01.10 &emsp;浏览量备份</div>
</div> </div>
<img class="pic" <img class="pic" src="@/assets/images/survey3.png" alt="">
src="@/assets/images/survey3.png"
alt="">
</div> </div>
<ul class="list"> <ul class="list">
<li> <li>
@ -270,17 +224,13 @@
<p class="date">2022.10.10</p> <p class="date">2022.10.10</p>
</li> </li>
</ul> </ul>
<div class="cover" <div class="cover" @click="toSet(12)">关联栏目</div>
@click="toSet(12)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -294,25 +244,7 @@ export default {
modules: Modules.sfel modules: Modules.sfel
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: 'SFEL'
}
])
},
methods: { methods: {
} }
@ -321,6 +253,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.title { .title {
position: relative; position: relative;
display: flex; display: flex;
@ -329,6 +262,7 @@ export default {
padding-bottom: 25px; padding-bottom: 25px;
margin-bottom: 30px; margin-bottom: 30px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
h5 { h5 {
padding-left: 16px; padding-left: 16px;
font-size: 36px; font-size: 36px;
@ -338,46 +272,57 @@ export default {
line-height: 1; line-height: 1;
border-left: 6px solid #2b96ef; border-left: 6px solid #2b96ef;
} }
.sub { .sub {
font-size: 22px; font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #afb7bf; color: #afb7bf;
} }
.more { .more {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
} }
} }
.lg { .lg {
width: 1505px; width: 1505px;
} }
/deep/.articles { /deep/.articles {
width: 50%; width: 50%;
.el-carousel__indicators--horizontal { .el-carousel__indicators--horizontal {
bottom: 20px; bottom: 20px;
left: 804px; left: 804px;
} }
} }
.banner-block { .banner-block {
background: url(../../../assets/images/sfel/2.png) 0 0 / cover no-repeat; background: url(../../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
} }
.sfel-banner { .sfel-banner {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.pic { .pic {
width: 700px; width: 700px;
height: 380px; height: 380px;
} }
.right { .right {
position: relative; position: relative;
width: 50%; width: 50%;
padding: 50px 50px 30px; padding: 50px 50px 30px;
background: #1583ff; background: #1583ff;
color: #fff; color: #fff;
&:hover { &:hover {
background: #465f85; background: #465f85;
h6, h6,
.des, .des,
.meta { .meta {
@ -386,11 +331,13 @@ export default {
} }
} }
} }
.inds { .inds {
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
left: 60px; left: 60px;
display: flex; display: flex;
li { li {
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -398,6 +345,7 @@ export default {
background: #ffffff; background: #ffffff;
border-radius: 50%; border-radius: 50%;
transition: 0.2s; transition: 0.2s;
&.active { &.active {
width: 30px; width: 30px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
@ -405,49 +353,60 @@ export default {
} }
} }
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
transition: 0.3s; transition: 0.3s;
} }
.des { .des {
margin: 30px 0; margin: 30px 0;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
transition: 0.3s; transition: 0.3s;
} }
.meta { .meta {
font-size: 16px; font-size: 16px;
transition: 0.3s; transition: 0.3s;
} }
} }
.card { .card {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 40px; margin-top: 40px;
li { li {
width: calc((100% - 56px) / 3); width: calc((100% - 56px) / 3);
margin-right: 28px; margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21); box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
border-radius: 6px; border-radius: 6px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 240px; height: 240px;
} }
.texts { .texts {
padding: 40px 30px; padding: 40px 30px;
} }
.meta { .meta {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
} }
.des { .des {
margin: 10px 0; margin: 10px 0;
font-size: 20px; font-size: 20px;
@ -456,6 +415,7 @@ export default {
color: #333; color: #333;
line-height: 28px; line-height: 28px;
} }
.arrow { .arrow {
width: 36px; width: 36px;
} }
@ -464,18 +424,23 @@ export default {
.notice { .notice {
background: url(../../../assets/images/sfel/3.png) 0 0 / cover no-repeat; background: url(../../../assets/images/sfel/3.png) 0 0 / cover no-repeat;
} }
.shop-shows { .shop-shows {
display: flex; display: flex;
.left { .left {
width: 660px; width: 660px;
margin-right: 20px; margin-right: 20px;
.item { .item {
position: relative; position: relative;
height: 100%; height: 100%;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.text { .text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -488,32 +453,39 @@ export default {
background-color: rgba(0, 0, 0, 0.57); background-color: rgba(0, 0, 0, 0.57);
} }
} }
.card-wrap { .card-wrap {
display: flex; display: flex;
margin-top: 18px; margin-top: 18px;
} }
.cards { .cards {
padding: 20px; padding: 20px;
background-color: #fff; background-color: #fff;
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; font-size: 18px;
color: #48525e; color: #48525e;
} }
.sum { .sum {
font-size: 14px; font-size: 14px;
color: #6d7c8e; color: #6d7c8e;
} }
.date { .date {
margin-top: 24px; margin-top: 24px;
font-size: 14px; font-size: 14px;
color: #c4ccd7; color: #c4ccd7;
} }
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
color: #272727; color: #272727;
} }
.des { .des {
margin-top: 10px; margin-top: 10px;
font-size: 16px; font-size: 16px;
@ -521,9 +493,11 @@ export default {
line-height: 30px; line-height: 30px;
} }
} }
.right { .right {
width: 824px; width: 824px;
} }
.card-list { .card-list {
li { li {
display: flex; display: flex;
@ -532,19 +506,23 @@ export default {
margin-bottom: 18px; margin-bottom: 18px;
background-color: #fff; background-color: #fff;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.pic { .pic {
width: 116px; width: 116px;
height: 85px; height: 85px;
margin-right: 28px; margin-right: 28px;
} }
.texts { .texts {
width: 504px; width: 504px;
margin-right: 60px; margin-right: 60px;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; font-size: 18px;
@ -552,6 +530,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #1583ff; color: #1583ff;
} }
.des { .des {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
@ -559,13 +538,16 @@ export default {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
} }
.slide { .slide {
position: relative; position: relative;
height: 284px; height: 284px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.text { .text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -581,17 +563,21 @@ export default {
} }
} }
} }
.conference { .conference {
background: url(../../../assets/images/sfel/4.png) 0 0 / cover no-repeat; background: url(../../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
.shows { .shows {
display: flex; display: flex;
} }
.left { .left {
position: relative; position: relative;
width: 688px; width: 688px;
height: 688px; height: 688px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
.text { .text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -606,8 +592,10 @@ export default {
background-color: rgba(0, 0, 0, 0.57); background-color: rgba(0, 0, 0, 0.57);
} }
} }
.card-list { .card-list {
width: 784px; width: 784px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
@ -616,32 +604,39 @@ export default {
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
transform: translateX(20px); transform: translateX(20px);
} }
} }
.pic { .pic {
width: 188px; width: 188px;
height: 188px; height: 188px;
margin-right: 36px; margin-right: 36px;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 20px; font-size: 20px;
color: #333; color: #333;
} }
.sum { .sum {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
} }
.text { .text {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 10px 0;
} }
.icon { .icon {
margin-right: 5px; margin-right: 5px;
} }
@ -650,24 +645,30 @@ export default {
.media { .media {
background: #fff; background: #fff;
.media-wrap { .media-wrap {
display: flex; display: flex;
} }
.left { .left {
width: 55%; width: 55%;
margin-right: 1%; margin-right: 1%;
.slides { .slides {
display: flex; display: flex;
margin-bottom: 20px; margin-bottom: 20px;
} }
.item { .item {
position: relative; position: relative;
width: 366px; width: 366px;
height: 197px; height: 197px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.text { .text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -681,16 +682,20 @@ export default {
background-color: rgba(0, 0, 0, 0.49); background-color: rgba(0, 0, 0, 0.49);
} }
} }
.list { .list {
padding: 34px 36px; padding: 34px 36px;
background: #fff; background: #fff;
box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08); box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
li { li {
margin-bottom: 41px; margin-bottom: 41px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
h6 { h6 {
margin-bottom: 17px; margin-bottom: 17px;
font-size: 20px; font-size: 20px;
@ -700,23 +705,28 @@ export default {
line-height: 20px; line-height: 20px;
text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08); text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
} }
.des { .des {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
} }
} }
.right { .right {
width: 44%; width: 44%;
box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08); box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
img { img {
width: 100%; width: 100%;
height: 422px; height: 422px;
} }
.texts { .texts {
padding: 40px 28px; padding: 40px 28px;
background: #fff; background: #fff;
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -725,6 +735,7 @@ export default {
line-height: 39px; line-height: 39px;
text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08); text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
} }
.des { .des {
margin-top: 16px; margin-top: 16px;
font-size: 16px; font-size: 16px;
@ -732,17 +743,21 @@ export default {
} }
} }
} }
.news { .news {
background: url(../../../assets/images/sfel/5.png) (0 504px) / auto no-repeat, background: url(../../../assets/images/sfel/5.png) (0 504px) / auto no-repeat,
url(../../../assets/images/sfel/6.png) (bottom right) / auto no-repeat; url(../../../assets/images/sfel/6.png) (bottom right) / auto no-repeat;
.inner { .inner {
width: 1400px; width: 1400px;
} }
} }
.news { .news {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
position: relative; position: relative;
width: calc((100% - 56px) / 3); width: calc((100% - 56px) / 3);
@ -753,80 +768,99 @@ export default {
box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08); box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
border-radius: 10px; border-radius: 10px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: translateY(20px); transform: translateY(20px);
} }
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
color: #fff; color: #fff;
background-color: #0252d9; background-color: #0252d9;
} }
} }
img { img {
width: 100%; width: 100%;
height: 481px; height: 481px;
} }
.texts { .texts {
padding: 0 18px 50px; padding: 0 18px 50px;
} }
h6 { h6 {
margin: 35px 0 12px; margin: 35px 0 12px;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
} }
.des { .des {
font-size: 18px; font-size: 18px;
line-height: 26px; line-height: 26px;
} }
} }
.program { .program {
background: #fff; background: #fff;
.slide { .slide {
display: flex; display: flex;
margin-bottom: 14px; margin-bottom: 14px;
} }
.texts { .texts {
width: 51%; width: 51%;
padding: 56px; padding: 56px;
background: #fbfbfb; background: #fbfbfb;
h6 { h6 {
font-size: 24px; font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.des { .des {
margin: 35px 0 25px; margin: 35px 0 25px;
font-size: 16px; font-size: 16px;
color: #666; color: #666;
line-height: 32px; line-height: 32px;
} }
.meta { .meta {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
} }
.pic { .pic {
width: 49%; width: 49%;
height: 430px; height: 430px;
} }
.list { .list {
display: flex; display: flex;
li { li {
width: calc((100% - 44px) / 3); width: calc((100% - 44px) / 3);
padding: 36px 22px; padding: 36px 22px;
margin-right: 14px; margin-right: 14px;
background: url(../../../assets/images/sfel/7.png) 0 0 / cover no-repeat; background: url(../../../assets/images/sfel/7.png) 0 0 / cover no-repeat;
&:nth-child(2) { &:nth-child(2) {
background-image: url(../../../assets/images/sfel/8.png); background-image: url(../../../assets/images/sfel/8.png);
} }
&:nth-child(3) { &:nth-child(3) {
margin-right: 0; margin-right: 0;
background-image: url(../../../assets/images/sfel/9.png); background-image: url(../../../assets/images/sfel/9.png);
} }
} }
.des { .des {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 18px; font-size: 18px;
@ -835,6 +869,7 @@ export default {
color: #ffffff; color: #ffffff;
line-height: 30px; line-height: 30px;
} }
.date { .date {
font-size: 16px; font-size: 16px;
font-family: LaoSangamMN; font-family: LaoSangamMN;
@ -842,17 +877,20 @@ export default {
} }
} }
} }
.tools { .tools {
position: absolute; position: absolute;
top: 600px; top: 600px;
left: 0; left: 0;
width: 226px; width: 226px;
text-align: center; text-align: center;
.logo { .logo {
padding: 44px 0; padding: 44px 0;
background: #0c60be; background: #0c60be;
box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3); box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
} }
.nav { .nav {
li { li {
padding: 0 10px; padding: 0 10px;
@ -862,12 +900,14 @@ export default {
background-color: #1d1d1d; background-color: #1d1d1d;
cursor: pointer; cursor: pointer;
@include ellipsis; @include ellipsis;
&.active { &.active {
background-color: #1583ff; background-color: #1583ff;
} }
} }
} }
} }
@media (max-width: 1520px) { @media (max-width: 1520px) {
.lg { .lg {
width: 98%; width: 98%;

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/首页</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <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 @click="save(0)">保存为草稿</el-button>
@ -51,25 +51,7 @@ export default {
modules: Modules.shop modules: Modules.shop
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '产品中心'
}
])
},
methods: { methods: {
} }

@ -2,13 +2,11 @@
<!-- 院长致辞 --> <!-- 院长致辞 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/院长致辞</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,45 +14,33 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block"> <div class="block">
<div class="inner c-wrap"> <div class="inner c-wrap">
<img :src="modules[1].form.pic" <img :src="modules[1].form.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p> <p class="en">{{ modules[1].form.subTitle }}</p>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换图片标题小标题与概述</div>
@click="toSet(1)">点击更换图片标题小标题与概述</div>
</div> </div>
<div class="sign c-wrap"> <div class="sign c-wrap">
签名 签名
<img :src="modules[2].form.pic" <img :src="modules[2].form.pic" alt="">
alt=""> <div class="cover" @click="toSet(2)">点击更换签名</div>
<div class="cover"
@click="toSet(2)">点击更换签名</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -68,25 +54,7 @@ export default {
modules: Modules.speech modules: Modules.speech
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '院长致辞'
}
])
},
methods: { methods: {
} }
@ -95,19 +63,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.block { .block {
background: url(https://huorantech.com/images/speech/2.png) no-repeat; background: url(https://huorantech.com/images/speech/2.png) no-repeat;
} }
.inner { .inner {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
.pic { .pic {
max-width: 480px; max-width: 480px;
margin-top: 2rem; margin-top: 2rem;
} }
.texts { .texts {
margin-left: 113px; margin-left: 113px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 2rem; font-size: 2rem;
@ -115,6 +88,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.en { .en {
margin: -25px 0 40px; margin: -25px 0 40px;
font-size: 2.2rem; font-size: 2.2rem;
@ -122,20 +96,24 @@ export default {
font-weight: 600; font-weight: 600;
color: rgba(216, 216, 216, 0.34); color: rgba(216, 216, 216, 0.34);
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
line-height: 1.6; line-height: 1.6;
} }
} }
.sign { .sign {
width: 1400px; width: 1400px;
min-height: 150px; min-height: 150px;
margin: 20px auto 0; margin: 20px auto 0;
text-align: right; text-align: right;
img { img {
max-width: 150px; max-width: 150px;
} }
.cover { .cover {
left: auto; left: auto;
width: 300px; width: 300px;

@ -2,13 +2,11 @@
<!-- 人才队伍 --> <!-- 人才队伍 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/人才队伍</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,41 +14,32 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des">{{ modules[0].form.des }}</p> <p class="banner-des">{{ modules[0].form.des }}</p>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block talent"> <div class="block talent">
<div class="inner"> <div class="inner">
<div class="item"> <div class="item">
<img class="pic" <img class="pic" :src="modules[1].form.pic" alt="">
:src="modules[1].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div>
@click="toSet(1)">点击更改图片标题概述与链接</div>
</div> </div>
<div class="item"> <div class="item">
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更改图片标题概述与链接</div>
@click="toSet(2)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
</div> </div>
@ -58,65 +47,50 @@
<div class="style c-wrap"> <div class="style c-wrap">
<div class="c-wrap"> <div class="c-wrap">
<h6 v-html="modules[3].form.title"></h6> <h6 v-html="modules[3].form.title"></h6>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换标题</div>
@click="toSet(3)">点击更换标题</div>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<el-carousel :interval="4000" <el-carousel :interval="4000" type="card" height="510px">
type="card"
height="510px">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<el-carousel-item v-if="item.isEnable" <el-carousel-item v-if="item.isEnable" :key="i">
:key="i">
<div class="item"> <div class="item">
<img :src="item.pic" <img :src="item.pic" alt="">
alt="">
<p class="text">{{ item.des }}</p> <p class="text">{{ item.des }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" <div class="cover" @click="toSet(4)">点击更改图片标题概述与链接</div>
@click="toSet(4)">点击更改图片标题概述与链接</div>
</div> </div>
</div> </div>
<div class="block intro"> <div class="block intro">
<div class="inner"> <div class="inner">
<div class="item"> <div class="item">
<img class="pic" <img class="pic" :src="modules[5].form.pic" alt="">
:src="modules[5].form.pic"
alt="">
<div class="texts"> <div class="texts">
<p class="type">{{ modules[5].form.subTitle }}</p> <p class="type">{{ modules[5].form.subTitle }}</p>
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="des">{{ modules[5].form.des }}</div> <div class="des">{{ modules[5].form.des }}</div>
<el-button type="primary">查看更多</el-button> <el-button type="primary">查看更多</el-button>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(5)">点击更改图片标题小标题概述与链接</div>
@click="toSet(5)">点击更改图片标题小标题概述与链接</div>
</div> </div>
<div class="item"> <div class="item">
<img class="pic" <img class="pic" :src="modules[6].form.pic" alt="">
:src="modules[6].form.pic"
alt="">
<div class="texts"> <div class="texts">
<p class="type">{{ modules[6].form.subTitle }}</p> <p class="type">{{ modules[6].form.subTitle }}</p>
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="des">{{ modules[6].form.des }}</div> <div class="des">{{ modules[6].form.des }}</div>
<el-button type="primary">查看更多</el-button> <el-button type="primary">查看更多</el-button>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(6)">点击更改图片标题小标题概述与链接</div>
@click="toSet(6)">点击更改图片标题小标题概述与链接</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -130,25 +104,7 @@ export default {
modules: Modules.talent modules: Modules.talent
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '人才队伍'
}
])
},
methods: { methods: {
} }
@ -157,33 +113,41 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background: #f8f9fb; background: #f8f9fb;
} }
.talent { .talent {
.inner { .inner {
width: 1504px; width: 1504px;
} }
.item { .item {
position: relative; position: relative;
display: flex; display: flex;
padding: 42px; padding: 42px;
margin-bottom: 36px; margin-bottom: 36px;
background: #fff; background: #fff;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
.texts { .texts {
padding-left: 0; padding-left: 0;
} }
} }
} }
.pic { .pic {
width: 602px; width: 602px;
height: 465px; height: 465px;
} }
.texts { .texts {
padding: 98px 72px 30px 80px; padding: 98px 72px 30px 80px;
} }
h6 { h6 {
margin-bottom: 24px; margin-bottom: 24px;
font-size: 50px; font-size: 50px;
@ -191,12 +155,14 @@ export default {
font-weight: 300; font-weight: 300;
color: #333333; color: #333333;
} }
.des { .des {
font-size: 18px; font-size: 18px;
color: #333; color: #333;
line-height: 33px; line-height: 33px;
} }
} }
.style { .style {
h6 { h6 {
margin-bottom: 59px; margin-bottom: 59px;
@ -206,13 +172,16 @@ export default {
text-align: center; text-align: center;
color: #333333; color: #333333;
} }
.item { .item {
position: relative; position: relative;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.text { .text {
position: absolute; position: absolute;
bottom: 45px; bottom: 45px;
@ -225,31 +194,38 @@ export default {
background: rgba(0, 0, 0, 0.38); background: rgba(0, 0, 0, 0.38);
} }
} }
.intro { .intro {
.inner { .inner {
width: 1504px; width: 1504px;
} }
.item { .item {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 36px; margin-bottom: 36px;
background: #fff; background: #fff;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
} }
.pic { .pic {
width: 848px; width: 848px;
height: 505px; height: 505px;
} }
.texts { .texts {
padding: 0 58px; padding: 0 58px;
} }
.type { .type {
font-size: 18px; font-size: 18px;
color: #333; color: #333;
} }
h6 { h6 {
margin: 20px 0; margin: 20px 0;
font-size: 28px; font-size: 28px;
@ -257,6 +233,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.des { .des {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 16px; font-size: 16px;

@ -2,13 +2,11 @@
<!-- 人才中心 --> <!-- 人才中心 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/人才中心</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,34 +14,26 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="content"> <div class="content">
<div class="article"> <div class="article">
<div class="left"> <div class="left">
<div class="c-wrap"> <div class="c-wrap">
<h6 class="title">{{ modules[1].form.title }}</h6> <h6 class="title">{{ modules[1].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div> <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<ul class="recruit"> <ul class="recruit">
<li> <li>
<div class="c-wrap m-r-10"> <div class="c-wrap m-r-10">
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic" <div class="cover" @click="toSet(2)">点击更换图片</div>
alt="">
<div class="cover"
@click="toSet(2)">点击更换图片</div>
</div> </div>
<div class="texts"> <div class="texts">
<div class="c-wrap"> <div class="c-wrap">
@ -51,30 +41,22 @@
<h6 class="c-title">{{ modules[3].form.title }}</h6> <h6 class="c-title">{{ modules[3].form.title }}</h6>
<div class="more">查看更多 ></div> <div class="more">查看更多 ></div>
</div> </div>
<div class="des" <div class="des" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div> <div class="cover" @click="toSet(3)">点击更换标题链接与描述</div>
<div class="cover"
@click="toSet(3)">点击更换标题链接与描述</div>
</div> </div>
<p class="hot">热门岗位</p> <p class="hot">热门岗位</p>
<div class="labels"> <div class="labels">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<p v-if="item.isEnable" <p v-if="item.isEnable" :key="i" class="label">{{ item.title }}</p>
:key="i"
class="label">{{ item.title }}</p>
</template> </template>
<div class="cover" <div class="cover" @click="toSet(4)">点击更换标签</div>
@click="toSet(4)">点击更换标签</div>
</div> </div>
</div> </div>
</li> </li>
<li> <li>
<div class="c-wrap m-r-10"> <div class="c-wrap m-r-10">
<img class="pic" <img class="pic" :src="modules[5].form.pic" alt="">
:src="modules[5].form.pic" <div class="cover" @click="toSet(5)">点击更换图片</div>
alt="">
<div class="cover"
@click="toSet(5)">点击更换图片</div>
</div> </div>
<div class="texts"> <div class="texts">
<div class="c-wrap"> <div class="c-wrap">
@ -82,40 +64,29 @@
<h6 class="c-title">{{ modules[6].form.title }}</h6> <h6 class="c-title">{{ modules[6].form.title }}</h6>
<div class="more">查看更多 ></div> <div class="more">查看更多 ></div>
</div> </div>
<div class="des" <div class="des" v-html="modules[6].form.des"></div>
v-html="modules[6].form.des"></div> <div class="cover" @click="toSet(6)">点击更换标题链接与描述</div>
<div class="cover"
@click="toSet(6)">点击更换标题链接与描述</div>
</div> </div>
<p class="hot">热门岗位</p> <p class="hot">热门岗位</p>
<div class="labels"> <div class="labels">
<template v-for="(item, i) in modules[7].list"> <template v-for="(item, i) in modules[7].list">
<p v-if="item.isEnable" <p v-if="item.isEnable" :key="i" class="label">{{ item.title }}</p>
:key="i"
class="label">{{ item.title }}</p>
</template> </template>
<div class="cover" <div class="cover" @click="toSet(7)">点击更换标签</div>
@click="toSet(7)">点击更换标签</div>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
<ul class="notice"> <ul class="notice">
<li class="m-r-10"> <li class="m-r-10">
<img class="pic" <img class="pic" :src="modules[8].form.pic" alt="">
:src="modules[8].form.pic"
alt="">
<p class="text">{{ modules[8].form.title }}</p> <p class="text">{{ modules[8].form.title }}</p>
<div class="cover" <div class="cover" @click="toSet(8)">点击更换图片标题与链接</div>
@click="toSet(8)">点击更换图片标题与链接</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" :src="modules[9].form.pic" alt="">
:src="modules[9].form.pic"
alt="">
<p class="text">{{ modules[9].form.title }}</p> <p class="text">{{ modules[9].form.title }}</p>
<div class="cover" <div class="cover" @click="toSet(9)">点击更换图片标题与链接</div>
@click="toSet(9)">点击更换图片标题与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -123,10 +94,7 @@
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -140,25 +108,7 @@ export default {
modules: Modules.talentCenter modules: Modules.talentCenter
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '人才中心'
}
])
},
methods: { methods: {
} }
@ -167,34 +117,42 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background-color: #f9fafa; background-color: #f9fafa;
} }
.content { .content {
width: 1400px; width: 1400px;
padding-top: 40px; padding-top: 40px;
} }
.article { .article {
display: flex; display: flex;
justify-content: center; justify-content: center;
.left { .left {
width: 66%; width: 66%;
.title { .title {
padding-bottom: 10px; padding-bottom: 10px;
font-size: 1.2rem; font-size: 1.2rem;
color: #666; color: #666;
border-bottom: 1px solid #eaeef2; border-bottom: 1px solid #eaeef2;
} }
.text { .text {
margin-top: 20px; margin-top: 20px;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
line-height: 28px; line-height: 28px;
p { p {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
} }
.recruit { .recruit {
li { li {
display: flex; display: flex;
@ -202,36 +160,43 @@ export default {
margin-bottom: 24px; margin-bottom: 24px;
background-color: #fff; background-color: #fff;
} }
.pic { .pic {
width: 410px; width: 410px;
height: 250px; height: 250px;
margin-right: 20px; margin-right: 20px;
} }
.c-title { .c-title {
font-size: 1.2rem; font-size: 1.2rem;
columns: #333; columns: #333;
} }
.more { .more {
font-size: 0.8rem; font-size: 0.8rem;
color: #0648a8; color: #0648a8;
cursor: pointer; cursor: pointer;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
font-size: 1rem; font-size: 1rem;
color: #666; color: #666;
line-height: 22px; line-height: 22px;
} }
.hot { .hot {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
} }
.labels { .labels {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.label { .label {
padding: 5px 15px; padding: 5px 15px;
margin: 0 15px 15px 0; margin: 0 15px 15px 0;
@ -240,8 +205,10 @@ export default {
border: 1px solid #666; border: 1px solid #666;
} }
} }
.notice { .notice {
display: flex; display: flex;
li { li {
position: relative; position: relative;
width: calc((100% - 20px) / 2); width: calc((100% - 20px) / 2);
@ -249,10 +216,12 @@ export default {
padding: 20px; padding: 20px;
background-color: #fff; background-color: #fff;
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.text { .text {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
@ -265,42 +234,52 @@ export default {
background: rgba(32, 57, 81, 0.68); background: rgba(32, 57, 81, 0.68);
} }
} }
.right { .right {
width: 20%; width: 20%;
} }
.column { .column {
width: 100%; width: 100%;
margin-bottom: 25px; margin-bottom: 25px;
} }
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 44px; height: 44px;
background-color: #e5edf8; background-color: #e5edf8;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
} }
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: #fff; color: #fff;
background-color: #0f5698; background-color: #0f5698;
} }
.list { .list {
margin-bottom: 20px; margin-bottom: 20px;
li { li {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }
.text { .text {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $main-color; color: $main-color;
} }
} }
.date { .date {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
} }
} }
@media (max-width: 1420px) { @media (max-width: 1420px) {
.content { .content {
width: 98%; width: 98%;

@ -2,13 +2,11 @@
<!-- 人才中心 --> <!-- 人才中心 -->
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/人才中心</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,15 +14,12 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="content"> <div class="content">
@ -32,56 +27,38 @@
<div class="left"> <div class="left">
<div class="c-wrap"> <div class="c-wrap">
<h6 class="talent-title">{{ modules[1].form.title }}</h6> <h6 class="talent-title">{{ modules[1].form.title }}</h6>
<div class="talent-text" <div class="talent-text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div> <div class="cover" @click="toSet(1)">点击更换标题与概述</div>
<div class="cover"
@click="toSet(1)">点击更换标题与概述</div>
</div> </div>
<ul class="people"> <ul class="people">
<li> <li>
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div> <img src="@/assets/images/arrow.png" alt="">
<img src="@/assets/images/arrow.png"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换图片标题概述与链接</div>
@click="toSet(2)">点击更换图片标题概述与链接</div>
</li> </li>
<li> <li>
<img class="pic" <img class="pic" :src="modules[3].form.pic" alt="">
:src="modules[3].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div> <img src="@/assets/images/arrow.png" alt="">
<img src="@/assets/images/arrow.png"
alt="">
</div> </div>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换图片标题概述与链接</div>
@click="toSet(3)">点击更换图片标题概述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="right"> <div class="right">
<div class="c-wrap"> <div class="c-wrap">
<el-tree class="column" <el-tree class="column" ref="column" :data="modules[4].list" highlight-current
ref="column" :expand-on-click-node="false" :props="defaultProps" node-key="id"></el-tree>
:data="modules[4].list" <div class="cover" @click="toSet(4)">点击更换标题与链接</div>
highlight-current
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"></el-tree>
<div class="cover"
@click="toSet(4)">点击更换标题与链接</div>
</div> </div>
<p class="l-title">人才资讯</p> <p class="l-title">人才资讯</p>
@ -90,18 +67,14 @@
<p class="text">喜报 | 深圳粒子研究院荣获全国科研</p> <p class="text">喜报 | 深圳粒子研究院荣获全国科研</p>
<span class="date">2022-08-09</span> <span class="date">2022-08-09</span>
</li> </li>
<div class="cover" <div class="cover" @click="toSet(5)">点击关联栏目</div>
@click="toSet(5)">点击关联栏目</div>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -119,25 +92,7 @@ export default {
}, },
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '人才中心'
}
])
},
methods: { methods: {
} }
@ -146,10 +101,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.content { .content {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
} }
.l-title { .l-title {
position: relative; position: relative;
padding-bottom: 20px; padding-bottom: 20px;
@ -158,6 +115,7 @@ export default {
color: #000; color: #000;
line-height: 1.6; line-height: 1.6;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -168,34 +126,42 @@ export default {
background-color: #156ceb; background-color: #156ceb;
} }
} }
.article { .article {
display: flex; display: flex;
justify-content: center; justify-content: center;
.left { .left {
width: 66%; width: 66%;
margin-right: 20px; margin-right: 20px;
.talent-title { .talent-title {
padding-bottom: 10px; padding-bottom: 10px;
font-size: 1.2rem; font-size: 1.2rem;
color: #666; color: #666;
border-bottom: 1px solid #eaeef2; border-bottom: 1px solid #eaeef2;
} }
.talent-text { .talent-text {
margin: 20px 0; margin: 20px 0;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
line-height: 28px; line-height: 28px;
p { p {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
} }
.people { .people {
margin-top: 4rem; margin-top: 4rem;
li { li {
position: relative; position: relative;
height: 450px; height: 450px;
margin-bottom: 2rem; margin-bottom: 2rem;
&:nth-child(even) { &:nth-child(even) {
.texts { .texts {
left: 50px; left: 50px;
@ -204,10 +170,12 @@ export default {
} }
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 60px; top: 60px;
@ -216,18 +184,21 @@ export default {
padding: 50px 25px; padding: 50px 25px;
background: rgba(243, 251, 255, 0.82); background: rgba(243, 251, 255, 0.82);
} }
h6 { h6 {
font-size: 1.2rem; font-size: 1.2rem;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #2a4b65; color: #2a4b65;
} }
.line { .line {
width: 93px; width: 93px;
height: 1px; height: 1px;
margin: 1rem 0; margin: 1rem 0;
background: #3e6473; background: #3e6473;
} }
.text { .text {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1rem; font-size: 1rem;
@ -236,37 +207,46 @@ export default {
line-height: 1.6; line-height: 1.6;
} }
} }
.right { .right {
width: 20%; width: 20%;
} }
.column { .column {
width: 100%; width: 100%;
margin-bottom: 25px; margin-bottom: 25px;
} }
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 44px; height: 44px;
background-color: #e5edf8; background-color: #e5edf8;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
} }
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: #fff; color: #fff;
background-color: #0f5698; background-color: #0f5698;
} }
.list { .list {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
li { li {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }
.text { .text {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $main-color; color: $main-color;
} }
} }
.date { .date {
font-size: 12px; font-size: 12px;
color: #999; color: #999;

@ -2,13 +2,11 @@
<!-- 人才中心 --> <!-- 人才中心 -->
<div class="wrap p-b-30"> <div class="wrap p-b-30">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-核心团队</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -16,43 +14,32 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="content"> <div class="content">
<div class="left c-wrap"> <div class="left c-wrap">
<ul class="list"> <ul class="list">
<li v-for="(item, i) in modules[1].list" <li v-for="(item, i) in modules[1].list" :key="i">
:key="i"> <img :src="item.pic" alt="" class="pic">
<img :src="item.pic"
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="job">{{ item.subTitle }}</p> <p class="job">{{ item.subTitle }}</p>
<div class="text" <div class="text" v-html="item.des"></div>
v-html="item.des"></div>
</div> </div>
</li> </li>
</ul> </ul>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换图片标题描述</div>
@click="toSet(1)">点击更换图片标题描述</div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -66,25 +53,7 @@ export default {
modules: Modules.team modules: Modules.team
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '关于IASF-核心团队'
}
])
},
methods: { methods: {
} }
@ -93,15 +62,19 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background-color: #fff; background-color: #fff;
} }
.content { .content {
display: flex; display: flex;
width: 1200px; width: 1200px;
margin: 30px auto; margin: 30px auto;
.list { .list {
position: relative; position: relative;
li { li {
position: relative; position: relative;
display: flex; display: flex;
@ -109,26 +82,31 @@ export default {
padding-bottom: 30px; padding-bottom: 30px;
margin-bottom: 30px; margin-bottom: 30px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
.pic { .pic {
width: 224px; width: 224px;
height: 268px; height: 268px;
margin-right: 25px; margin-right: 25px;
} }
h6 { h6 {
font-size: 1.2rem; font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333; color: #333;
} }
.job { .job {
margin: 10px 0; margin: 10px 0;
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
color: #333; color: #333;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;

@ -1,13 +1,11 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/用户共享</p> <p class="page-name">页面设置/{{ columnName }}</p>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="preview">预览</el-button>
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" <el-button type="primary" @click="save(1)">发布</el-button>
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -15,16 +13,13 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des">{{ modules[0].form.des }}</p> <p class="banner-des">{{ modules[0].form.des }}</p>
</div> </div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block share"> <div class="block share">
@ -32,14 +27,10 @@
<div class="left"> <div class="left">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en">USERS SHARE</p> <p class="en">USERS SHARE</p>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<div class="cover" <div class="cover" @click="toSet(1)">点击更换描述</div>
@click="toSet(1)">点击更换描述</div> <img class="pic" :src="modules[1].form.pic" alt="">
<img class="pic"
:src="modules[1].form.pic"
alt="">
<div class="card"> <div class="card">
<p class="title">{{ modules[1].form.subTitle }}</p> <p class="title">{{ modules[1].form.subTitle }}</p>
<p class="en-text">{{ modules[1].form.enTitle }}</p> <p class="en-text">{{ modules[1].form.enTitle }}</p>
@ -50,37 +41,28 @@
<div class="block gray"> <div class="block gray">
<ul class="group"> <ul class="group">
<li> <li>
<img src="@/assets/images/userSharing/2.png" <img src="@/assets/images/userSharing/2.png" alt="">
alt="">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
<div class="cover" <div class="cover" @click="toSet(2)">点击更换标题描述与链接</div>
@click="toSet(2)">点击更换标题描述与链接</div>
</li> </li>
<li> <li>
<img src="@/assets/images/userSharing/3.png" <img src="@/assets/images/userSharing/3.png" alt="">
alt="">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div> <div class="des">{{ modules[3].form.des }}</div>
<div class="cover" <div class="cover" @click="toSet(3)">点击更换标题描述与链接</div>
@click="toSet(3)">点击更换标题描述与链接</div>
</li> </li>
<li> <li>
<img src="@/assets/images/userSharing/4.png" <img src="@/assets/images/userSharing/4.png" alt="">
alt="">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="des">{{ modules[4].form.des }}</div> <div class="des">{{ modules[4].form.des }}</div>
<div class="cover" <div class="cover" @click="toSet(4)">点击更换标题描述与链接</div>
@click="toSet(4)">点击更换标题描述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<Module ref="module" <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -94,25 +76,7 @@ export default {
modules: Modules.userSharing modules: Modules.userSharing
} }
}, },
mounted () { mounted () { },
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理',
route: '/column'
},
{
name: '栏目管理',
route: '/column'
},
{
name: '用户共享'
}
])
},
methods: { methods: {
} }
@ -121,15 +85,19 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.share { .share {
position: relative; position: relative;
.inner { .inner {
display: flex; display: flex;
width: 1476px; width: 1476px;
} }
.left { .left {
width: 509px; width: 509px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 48px; font-size: 48px;
@ -137,12 +105,14 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.en { .en {
margin-top: -35px; margin-top: -35px;
font-size: 45px; font-size: 45px;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #e4e4e4; color: #e4e4e4;
} }
.des { .des {
margin-top: 25px; margin-top: 25px;
font-size: 18px; font-size: 18px;
@ -150,11 +120,13 @@ export default {
line-height: 37px; line-height: 37px;
overflow: visible; overflow: visible;
} }
.pic { .pic {
width: 944px; width: 944px;
height: 568px; height: 568px;
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
.card { .card {
position: absolute; position: absolute;
bottom: 29px; bottom: 29px;
@ -166,6 +138,7 @@ export default {
border-radius: 0px 100px 0px 0px; border-radius: 0px 100px 0px 0px;
opacity: 0.88; opacity: 0.88;
} }
.title { .title {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 40px; font-size: 40px;
@ -173,6 +146,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.en-text { .en-text {
font-size: 28px; font-size: 28px;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
@ -180,9 +154,11 @@ export default {
letter-spacing: 2px; letter-spacing: 2px;
} }
} }
.group { .group {
display: flex; display: flex;
justify-content: center; justify-content: center;
li { li {
position: relative; position: relative;
width: 420px; width: 420px;
@ -191,6 +167,7 @@ export default {
margin-right: 20px; margin-right: 20px;
color: #fff; color: #fff;
} }
img { img {
position: absolute; position: absolute;
top: 0; top: 0;
@ -198,12 +175,14 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 36px; font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.des { .des {
position: relative; position: relative;
margin-top: 16px; margin-top: 16px;

Loading…
Cancel
Save