jialong.yu
/
FE_IASF_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

长页修改

Browse Source
master
yujialong 1 year ago
parent c8278c2259
commit d1f4161e8c
5 changed files with 648 additions and 290 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/components/modules/module.vue
  2. 250
      src/const/modules.js
  3. 33
      src/pages/column/page/iasf.vue
  4. 299
      src/pages/column/page/overview.vue
  5. 121
      src/pages/column/page/talentCentre.vue

3
src/components/modules/module.vue
Unescape View File

@ -81,7 +81,8 @@
width="60" width="60"
label="序号" label="序号"
align="center"></el-table-column> align="center"></el-table-column>
<el-table-column label="图片" <el-table-column v-if="!data.notPic"
label="图片"
min-width="140" min-width="140"
align="center"> align="center">
<template slot-scope="scope"> <template slot-scope="scope">

250
src/const/modules.js
Unescape View File

@ -6935,20 +6935,17 @@ export default {
label: '图片', label: '图片',
required: true required: true
}, },
],
form: {
pic: 'http://10.10.11.7/images/overview/2.png',
}
},
{
type: 'form',
forms: [
{ {
type: 'input', type: 'input',
prop: 'title', prop: 'title',
label: '标题', label: '标题',
required: true required: true
}, },
{
type: 'link',
prop: 'link',
label: '链接'
},
{ {
type: 'textarea', type: 'textarea',
prop: 'des', prop: 'des',
@ -6956,7 +6953,19 @@ export default {
} }
], ],
form: { form: {
pic: 'http://10.10.11.7/images/overview/2.png',
title: '关于我们', title: '关于我们',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
des: `深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。` des: `深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。`
} }
}, },
@ -6964,31 +6973,22 @@ export default {
type: 'form', type: 'form',
forms: [ forms: [
{ {
type: 'input', type: 'upload',
prop: 'title', prop: 'pic',
label: '标题', label: '图片',
required: true required: true
}, },
{
type: 'textarea',
prop: 'des',
label: '描述'
}
],
form: {
title: '核心宗旨',
des: `研究院的宗旨是紧密围绕高水平建设大湾区综合性国家科学中心的战略目标，面向经济主战场和世界科技前沿，充分吸纳国际国内高端创新资源，依托先行示范区政策、产业、资本、市场和技术等优势，建设世界一流重大科技基础设施和重大科研平台，建设国际一流科研机构。`
}
},
{
type: 'form',
forms: [
{ {
type: 'input', type: 'input',
prop: 'title', prop: 'title',
label: '标题', label: '标题',
required: true required: true
}, },
{
type: 'link',
prop: 'link',
label: '链接'
},
{ {
type: 'textarea', type: 'textarea',
prop: 'des', prop: 'des',
@ -6996,8 +6996,20 @@ export default {
} }
], ],
form: { form: {
title: '深圳综合粒子设施', pic: 'http://10.10.11.7/images/overview/17.png',
des: `支撑大湾区综合性国家科学中心建设的公益性科研事业单位` title: '核心宗旨',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
des: `研究院紧密围绕高水平建设大湾区综合性国家科学中心的战略目标，面向国民经济主战场和世界科技前沿，承担“世界一流、深圳特色”的综合粒子设施设计、建设、运营、管理等全生命周期任务，打造世界一流重大科技基础设施和重大科研平台。`
} }
}, },
{ {
@ -7027,8 +7039,8 @@ export default {
} }
], ],
form: { form: {
pic: 'http://10.10.11.7/images/home/3.png', pic: 'http://10.10.11.7/images/overview/18.png',
title: '深圳自由电子激光', title: '首要任务',
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -7040,22 +7052,23 @@ export default {
otherArticleId: '', otherArticleId: '',
isOpen: 1 isOpen: 1
}, },
des: `建设一台基于超导高频技术的高重复频率X射线自由电子激光装置。` des: `全力推进国际一流科学城标志性、稀缺性、先进性的综合粒子设施一期工程建设，是研究院当前落实深圳市委市政府有关决策部署的首要任务。助力产业核心关键技术发展相关的物理、化学、生物、材料、医学等多学科的前沿基础研究取得重大突破，为大湾区建成具有全球影响力的科技和产业创新高地，贡献源源创新动力。`
} }
}, },
{ {
type: 'form', type: 'form',
forms: [ forms: [
{ {
type: 'upload', type: 'input',
prop: 'pic', prop: 'title',
label: '图片', label: '标题',
required: true required: true
}, },
{ {
type: 'input', type: 'input',
prop: 'title', prop: 'subTitle',
label: '标题', label: '小标题',
required: true required: true
}, },
{ {
@ -7070,8 +7083,8 @@ export default {
} }
], ],
form: { form: {
pic: 'http://10.10.11.7/images/home/2.png', title: '发展大事记',
title: '深圳产业光源', subTitle: 'DEVELOPMENT HISTORY',
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -7083,7 +7096,7 @@ export default {
otherArticleId: '', otherArticleId: '',
isOpen: 1 isOpen: 1
}, },
des: `建成国内首个服务于产业经济发展和科技创新的第四代同步辐射光源装置。` des: `深圳综合粒子设施研究院的诞生，源于粤港澳大湾区建设这个重大国家战略建设的实际须要。2017年7月，习近平总书记在香港亲自见证《深化粤港澳合作推进大湾区建设框架协议》的签署，首次提出建设粤港澳大湾区国际科技创新中心。而在深圳布局建设代表国际科技创新中心标志性、稀缺性、先进性的重大科技基础设，成为各界共识。`
} }
}, },
{ {
@ -7114,7 +7127,7 @@ export default {
], ],
form: { form: {
pic: 'http://10.10.11.7/images/overview/3.png', pic: 'http://10.10.11.7/images/overview/3.png',
title: '机制创新', title: '以产业需求为牵引',
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -7157,7 +7170,7 @@ export default {
], ],
form: { form: {
pic: 'http://10.10.11.7/images/overview/4.png', pic: 'http://10.10.11.7/images/overview/4.png',
title: '综合粒子设施', title: '大湾区合作典范',
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -7200,7 +7213,7 @@ export default {
], ],
form: { form: {
pic: 'http://10.10.11.7/images/overview/5.png', pic: 'http://10.10.11.7/images/overview/5.png',
title: '人才队伍', title: '勇当新时代“拓荒牛”',
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -7212,7 +7225,7 @@ export default {
otherArticleId: '', otherArticleId: '',
isOpen: 1 isOpen: 1
}, },
des: `“以宏伟事业吸引人才、以发展空间留住人才,以优厚待遇保障人才”的原则，高质量建设稳定自主的科学研究、工程技术和管理服务队伍。` des: `凭借“敢闯敢试、敢为人先、埋头苦干”的特区精神`
} }
}, },
{ {
@ -8550,6 +8563,63 @@ export default {
isOpen: 1 isOpen: 1
} }
} }
},
{
type: 'introduce',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'link',
prop: 'link',
label: '链接'
},
],
form: {
title: '',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
}
},
list: [
{
title: '人才中心',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
}
}
],
notPic: true
},
{
type: 'column',
form: {
site: '',
column: '',
articleNum: '',
columnTitle: 1,
columnTitleCustom: ''
}
}, },
], ],
contactUs: [ contactUs: [
@ -9577,7 +9647,7 @@ export default {
} }
}, },
{ {
type: 'form', type: 'introduce',
forms: [ forms: [
{ {
type: 'upload', type: 'upload',
@ -9612,6 +9682,100 @@ export default {
isOpen: 1 isOpen: 1
} }
} }
},
{
type: 'introduce',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'link',
prop: 'link',
label: '链接'
}
],
form: {
title: '',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
isEnable: 1
},
list: [
{
title: '网站地图',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
isEnable: 1
},
{
title: '新闻中心',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
isEnable: 1
},
{
title: '热点阅读',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
isEnable: 1
},
{
title: '党建文化',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
site: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
isEnable: 1
}
],
notPic: true
}, },
], ],
} }

33
src/pages/column/page/iasf.vue
Unescape View File

@ -314,6 +314,13 @@
:data.sync="curData" :data.sync="curData"
:visible.sync="diaVisible" :visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" /> @moduleSubmit="moduleSubmit" />
<ul class="tools">
<li v-for="(item, i) in modules[18].list"
:key="i">{{ item.title }}</li>
<div class="cover"
@click="toSet(18)">点击更换导航</div>
</ul>
</div> </div>
</template> </template>
@ -707,4 +714,30 @@ export default {
} }
} }
} }
.tools {
z-index: 100;
position: fixed;
top: 430px;
right: 0;
li {
display: flex;
justify-content: center;
align-items: center;
width: 160px;
margin-bottom: 1px;
font-size: 1rem;
color: #0084ff;
line-height: 56px;
background-color: rgba(255, 255, 255, 0.94);
cursor: pointer;
&.active {
width: 192px;
color: #fff;
background-color: rgba(1, 129, 247, 0.94);
}
}
.icon {
margin-right: 10px;
}
}
</style> </style>

299
src/pages/column/page/overview.vue
Unescape View File

@ -3,9 +3,11 @@
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/关于IASF-研究院概况</p> <p class="page-name">页面设置/关于IASF-研究院概况</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>
<el-button type="primary" @click="save(1)">发布</el-button> <el-button type="primary"
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
@ -13,86 +15,116 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" :src="modules[0].form.pic" alt="" /> <img class="banner-img"
: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" @click="toSet(0)">点击更换banner与链接</div> <div class="cover"
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block about gray"> <div class="block history gray">
<div class="inner"> <div class="inner c-wrap">
<div class="c-wrap" style="width: 40%"> <div class="texts wow fadeInDown"
<img :src="modules[1].form.pic" alt="" class="pic" /> data-wow-delay="0.5s">
<div class="cover" @click="toSet(1)">点击更换图片</div> <div class="left">
<h2>{{ modules[1].form.title }}</h2>
<div class="line"></div>
<div class="des">{{ modules[1].form.des }}</div>
</div>
<img class="bg"
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div>
<div class="cover"
@click="toSet(1)">点击更改图片、标题概述与链接</div>
</div>
</div> </div>
<div class="block">
<div class="inner">
<div class="core">
<img :src="modules[2].form.pic"
alt=""
class="pic">
<div class="texts"> <div class="texts">
<div class="c-wrap">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" v-html="modules[2].form.des"></div> <div class="line"></div>
<div class="cover" @click="toSet(2)">点击更换标题与描述</div> <div class="text"
v-html="modules[2].form.des"></div>
</div> </div>
<div class="c-wrap"> <div class="cover"
@click="toSet(2)">点击更换图片、标题、描述与链接</div>
</div>
<div class="core">
<img :src="modules[3].form.pic"
alt=""
class="pic">
<div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des" v-html="modules[3].form.des"></div> <div class="line"></div>
<div class="cover" @click="toSet(3)">点击更换标题与描述</div> <div class="text"
v-html="modules[3].form.des"></div>
</div> </div>
<div class="cover"
@click="toSet(3)">点击更换图片、标题、描述与链接</div>
</div> </div>
</div> </div>
</div> </div>
<div class="block fac"> <div class="block fac">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="event">
<h2 class="b-title">{{ modules[4].form.title }}</h2> <h6>{{ modules[4].form.title }}</h6>
<p class="intro">{{ modules[4].form.des }}</p> <p class="en">{{ modules[4].form.subTitle }}</p>
<div class="cover" @click="toSet(4)">点击更换标题与描述</div> <div class="text"
v-html="modules[4].form.des"></div>
<img src="@/assets/images/arrow.png"
alt="">
<div class="cover"
@click="toSet(4)">点击更换标题、小标题、描述与链接</div>
</div> </div>
<ul class="card"> <ul class="l-card">
<li> <li>
<img :src="modules[5].form.pic" alt="" class="pic" /> <img :src="modules[5].form.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" v-html="modules[5].form.des"></div> <div class="text"
<img src="@/assets/images/arrow.png" alt="" class="arrow"> v-html="modules[5].form.des"></div>
</div> </div>
<div class="cover" @click="toSet(5)">点击更换图片、标题、描述与链接</div> <div class="cover"
@click="toSet(5)">点击更换图片、标题、描述与链接</div>
</li> </li>
<li> <li>
<img :src="modules[6].form.pic" alt="" class="pic" /> <img :src="modules[6].form.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" v-html="modules[6].form.des"></div> <div class="text"
<img src="@/assets/images/arrow.png" alt="" class="arrow"> v-html="modules[6].form.des"></div>
</div> </div>
<div class="cover" @click="toSet(6)">点击更换图片、标题、描述与链接</div> <div class="cover"
@click="toSet(6)">点击更换图片、标题、描述与链接</div>
</li> </li>
</ul>
<ul class="l-card">
<li> <li>
<img :src="modules[7].form.pic" alt="" class="pic" /> <img :src="modules[7].form.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" v-html="modules[7].form.des"></div> <div class="text"
</div> v-html="modules[7].form.des"></div>
<div class="cover" @click="toSet(7)">点击更换图片、标题、描述与链接</div>
</li>
<li>
<img :src="modules[8].form.pic" alt="" class="pic" />
<div class="texts">
<h6>{{ modules[8].form.title }}</h6>
<div class="text" v-html="modules[8].form.des"></div>
</div> </div>
<div class="cover" @click="toSet(8)">点击更换图片、标题、描述与链接</div> <div class="cover"
</li> @click="toSet(7)">点击更换图片、标题、描述与链接</div>
<li>
<img :src="modules[9].form.pic" alt="" class="pic" />
<div class="texts">
<h6>{{ modules[9].form.title }}</h6>
<div class="text" v-html="modules[9].form.des"></div>
</div>
<div class="cover" @click="toSet(9)">点击更换图片、标题、描述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -100,43 +132,59 @@
<div class="block scan gray"> <div class="block scan gray">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[10].form.title }}</h2> <h2 class="b-title">{{ modules[8].form.title }}</h2>
<p class="intro">{{ modules[10].form.des }}</p> <p class="intro">{{ modules[8].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover"
@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">
<div class="line" v-for="(item, i) in modules[11].list" :key="i">{{ item.title }}</div> <div class="line"
<div class="cover" @click="toSet(11)">点击更换标题</div> v-for="(item, i) in modules[9].list"
:key="i">{{ item.title }}</div>
<div class="cover"
@click="toSet(9)">点击更换标题</div>
</div> </div>
<ul class="total"> <ul class="total">
<li> <li>
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
<div class="cover" style="width: 100px;" @click="toSet(12)">标题描述</div> <div class="cover"
style="width: 100px;"
@click="toSet(10)">标题描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[13].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
<div class="cover" style="width: 100px;" @click="toSet(13)">标题描述</div> <div class="cover"
style="width: 100px;"
@click="toSet(11)">标题描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[14].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[14].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
<div class="cover" style="width: 100px;" @click="toSet(14)">标题描述</div> <div class="cover"
style="width: 100px;"
@click="toSet(12)">标题描述</div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="c-wrap"> <div class="c-wrap">
<img :src="modules[15].form.pic" alt="" class="pic" /> <img :src="modules[13].form.pic"
<div class="cover" @click="toSet(15)">点击更换图片</div> alt=""
class="pic" />
<div class="cover"
@click="toSet(13)">点击更换图片</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> <Module ref="module"
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -176,70 +224,101 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import '../../../styles/page/page.scss';
.about { .history {
padding-top: 0; h2 {
.inner { font-size: 1rem;
position: relative; color: #333;
}
.texts {
display: flex; display: flex;
padding: 20px; justify-content: space-between;
padding: 5.125rem 3.5625rem 1.875rem;
margin-top: 20px;
background-color: #fff; background-color: #fff;
border-radius: 6.25rem 0px 0px 0px;
transition: 0.3s;
&:hover {
transform: scale(1.05);
} }
.pic {
width: 100%;
height: 330px;
margin-right: 30px;
}
.texts {
width: 50%;
margin-left: 20px;
} }
h6 { .left {
font-size: 1.2rem; width: 43.4375rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
&:before {
content: '';
display: block;
width: 28px;
height: 4px;
margin-bottom: 12px;
background: #0280F1;
} }
.line {
width: 53px;
height: 3px;
margin: 18px 0;
background: #0280f1;
} }
.des { .des {
margin: 20px 0; font-size: 0.9rem;
font-size: 1rem; color: #181818;
color: #666; line-height: 31px;
line-height: 2; -webkit-line-clamp: 6;
} }
.bg {
margin: -122px 0 0 0;
border-top-right-radius: 40px;
} }
.fac { }
.card { .core {
display: flex;
li {
position: relative; position: relative;
width: calc((100% - 20px) / 2); height: 370px;
color: #333; margin-bottom: 40px;
background-color: #FCFBFB; &:last-child {
&:first-child { .texts {
margin-right: 20px; left: 40px;
right: auto;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 350px; height: 100%;
} }
.texts { .texts {
padding: 20px; position: absolute;
top: 80px;
right: 40px;
width: 500px;
color: #fff;
} }
h6 { h6 {
margin-bottom: 10px; font-size: 1.4rem;
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.line {
width: 136px;
height: 3px;
margin: 20px 0;
background: #ffffff;
opacity: 0.56;
}
.text { .text {
font-size: 1rem; font-size: 1rem;
line-height: 1.6;
}
}
.fac {
.event {
position: relative;
padding: 70px 250px 70px 60px;
background: url(http://10.10.11.7/images/overview/16.png) 0 0/100% no-repeat;
h6 {
font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
}
.en {
margin-top: -10px;
font-size: 2rem;
font-family: AppleSystemUIFont;
color: #e4e4e4;
}
.text {
margin: 15px 0;
font-size: 1rem;
color: #333;
} }
} }
.l-card { .l-card {
@ -266,7 +345,7 @@ export default {
height: 100%; height: 100%;
padding: 140px 30px 0; padding: 140px 30px 0;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, 0.5);
} }
h6 { h6 {
margin-bottom: 15px; margin-bottom: 15px;
@ -340,7 +419,7 @@ export default {
font-size: 2rem; font-size: 2rem;
font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN; font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
font-weight: 800; font-weight: 800;
color: #1583FF; color: #1583ff;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;

121
src/pages/column/page/talentCentre.vue
Unescape View File

@ -70,6 +70,30 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="right">
<div class="c-wrap">
<el-tree class="column"
ref="column"
:data="modules[4].list"
highlight-current
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"></el-tree>
<div class="cover"
@click="toSet(4)">点击更换标题与链接</div>
</div>
<p class="l-title">人才资讯</p>
<ul class="list">
<li>
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p>
<span class="date">2022-08-09</span>
</li>
<div class="cover"
@click="toSet(5)">点击关联栏目</div>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -88,7 +112,11 @@ export default {
mixins: [mixins], mixins: [mixins],
data () { data () {
return { return {
modules: Modules.talentCentre modules: Modules.talentCentre,
defaultProps: {
value: 'id',
label: 'title'
},
} }
}, },
mounted () { mounted () {
@ -122,11 +150,30 @@ export default {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
} }
.l-title {
position: relative;
padding-bottom: 20px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #000;
line-height: 1.6;
border-bottom: 1px solid #ddd;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background-color: #156ceb;
}
}
.article { .article {
display: flex; display: flex;
justify-content: center; justify-content: center;
.left { .left {
width: 80%; width: 66%;
margin-right: 20px;
.talent-title { .talent-title {
padding-bottom: 10px; padding-bottom: 10px;
font-size: 1.2rem; font-size: 1.2rem;
@ -147,49 +194,83 @@ export default {
margin-top: 4rem; margin-top: 4rem;
li { li {
position: relative; position: relative;
display: flex; height: 450px;
align-items: center;
margin-bottom: 2rem; margin-bottom: 2rem;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse;
.texts { .texts {
padding: 75px 83px 75px 40px; left: 50px;
margin: 0 -50px 0 0; right: auto;
background: rgba(255, 255, 255, 0.43);
} }
} }
} }
.pic { .pic {
width: 430px; width: 100%;
height: 430px; height: 100%;
} }
.texts { .texts {
position: relative; position: absolute;
width: 530px; top: 60px;
height: 330px; right: 50px;
padding: 75px 41px 75px 83px; width: 380px;
margin-left: -50px; padding: 50px 25px;
background-color: rgba(247, 247, 247, 0.72); 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: #333; color: #2a4b65;
} }
.line { .line {
width: 93px; width: 93px;
height: 1px; height: 1px;
margin: 1rem 0; margin: 1rem 0;
background: #d8d8d8; background: #3e6473;
} }
.text { .text {
margin-bottom: 1rem;
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
color: #666; color: #2a4b65;
line-height: 1.6; line-height: 1.6;
} }
} }
.right {
width: 20%;
}
.column {
width: 100%;
margin-bottom: 25px;
}
/deep/.el-tree-node__content {
height: 44px;
background-color: #e5edf8;
border-bottom: 2px solid #fff;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
color: #fff;
background-color: #0f5698;
}
.list {
position: relative;
margin-bottom: 20px;
li {
padding: 16px 0;
border-bottom: 1px solid #d8d8d8;
}
.text {
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
&:hover {
color: $main-color;
}
}
.date {
font-size: 12px;
color: #999;
}
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save