forked from TALL/check-work
15 changed files with 645 additions and 5 deletions
@ -0,0 +1,154 @@ |
|||
.nav-box { |
|||
height: 66px; |
|||
background: #000000; |
|||
line-height: 66px; |
|||
padding: 0 12%; |
|||
color: #fff; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
div { |
|||
margin-right: 56px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.nav-box-active { |
|||
color: #13ACC4 !important; |
|||
} |
|||
|
|||
.top-box { |
|||
overflow: hidden; |
|||
background: -webkit-linear-gradient(left, #6569FA , #13ACC4); |
|||
position: relative; |
|||
} |
|||
.top-title { |
|||
position: absolute; |
|||
top: 70px; |
|||
left: 4%; |
|||
padding: 0; |
|||
font-size: 50px; |
|||
color: #fff; |
|||
} |
|||
.top-content { |
|||
float: right; |
|||
margin: 70px 0; |
|||
margin-right: 12%; |
|||
width: 60%; |
|||
padding: 0; |
|||
font-size: 16px; |
|||
color: #fff; |
|||
line-height: 36px; |
|||
} |
|||
|
|||
.circular { |
|||
height: 20px; |
|||
width: 20px; |
|||
background: #13ACC4; |
|||
border-radius: 50%; |
|||
top: 50%; |
|||
margin-top: -10px; |
|||
position: absolute; |
|||
} |
|||
|
|||
.center-box { |
|||
overflow: hidden; |
|||
background: #fff; |
|||
padding: 0 12%; |
|||
position: relative; |
|||
} |
|||
.center-title { |
|||
position: absolute; |
|||
top: 40%; |
|||
font-size: 30px; |
|||
color: #000; |
|||
} |
|||
.center-content { |
|||
float: right; |
|||
margin: 160px 0; |
|||
width: 79%; |
|||
line-height: 36px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
|
|||
|
|||
.bottom-box { |
|||
// height: 830px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
padding: 0 12%; |
|||
} |
|||
.bottom-title { |
|||
position: absolute; |
|||
top: 20%; |
|||
font-size: 30px; |
|||
color: #000; |
|||
} |
|||
.bottom-content { |
|||
float: right; |
|||
margin: 100px 0; |
|||
width: 79%; |
|||
} |
|||
|
|||
.partner-box { |
|||
// height: 1060px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
padding: 0 12%; |
|||
background: #fff; |
|||
} |
|||
.partner-title { |
|||
position: absolute; |
|||
top: 15%; |
|||
font-size: 30px; |
|||
color: #000; |
|||
} |
|||
.partner-content { |
|||
float: right; |
|||
margin: 100px 0; |
|||
width: 79%; |
|||
} |
|||
|
|||
.join-box { |
|||
// height: 300px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
padding: 0 12%; |
|||
} |
|||
.join-title { |
|||
position: absolute; |
|||
top: 40%; |
|||
font-size: 30px; |
|||
color: #000; |
|||
} |
|||
.join-content { |
|||
float: right; |
|||
margin: 70px 0; |
|||
font-size: 16px; |
|||
width: 79%; |
|||
color: rgba(0,0,0,0.65); |
|||
line-height: 36px; |
|||
} |
|||
|
|||
.content-box { |
|||
position: relative; |
|||
padding: 0 12%; |
|||
|
|||
} |
|||
.introduce-box { |
|||
width: 942px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
background: #fff; |
|||
box-shadow: 0 3px 6px rgba(0,0,0,0.16) |
|||
cursor: pointer; |
|||
padding: 30px; |
|||
} |
|||
.introduce-title { |
|||
margin-top: 24px; |
|||
font-size: 30px; |
|||
color: rgba(0,0,0,0.85); |
|||
} |
|||
.introduce-content { |
|||
font-size: 16px; |
|||
color: rgba(0,0,0,0.65); |
|||
} |
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
<div> |
|||
<h-nav /> |
|||
<div class="top-box"> |
|||
<div class="top-title">协同创新中心</div> |
|||
<div class="top-content"> |
|||
山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”， |
|||
致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、 |
|||
线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统， |
|||
构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理 |
|||
念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放 |
|||
式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。 |
|||
</div> |
|||
</div> |
|||
<div class="center-box"> |
|||
<div class="center-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">组织机构</div> |
|||
</div> |
|||
<div class="center-content"> |
|||
公司采取理事会、经理层、事业部组织架构，公司理事会组成按理事会章程执行，经理层设总经理 1 名、副总经理 2-3 名，各事业部设部长 1 |
|||
名、副部长 1 名。 |
|||
</div> |
|||
</div> |
|||
<div class="bottom-box"> |
|||
<div class="bottom-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">中心架构</div> |
|||
</div> |
|||
<div class="bottom-content"> |
|||
<div id="treeChart" :style="{ height: '500px' }"></div> |
|||
</div> |
|||
</div> |
|||
<div class="partner-box"> |
|||
<div class="partner-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">合作伙伴</div> |
|||
</div> |
|||
<div class="partner-content"></div> |
|||
</div> |
|||
<div class="join-box"> |
|||
<div class="join-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">申请加入</div> |
|||
</div> |
|||
<div class="join-content"> |
|||
申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍 |
|||
申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍 |
|||
申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍申请加入文字介绍 |
|||
<div> |
|||
<a-button type="primary">申请加入</a-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import '@/common/platform.styl'; |
|||
import HNav from './../components/HNav.vue'; |
|||
export default { |
|||
name: 'Core', |
|||
components: { HNav }, |
|||
data() { |
|||
return { |
|||
str: '这是中心界面', |
|||
list: [], |
|||
treedata: [ |
|||
{ |
|||
//一定一定要注意这里有[] |
|||
name: '本科发展方向', |
|||
children: [ |
|||
{ name: '考研' }, |
|||
{ |
|||
name: '就业', |
|||
children: [{ name: '相关就业详见菜单栏‘培养方向’' }], |
|||
}, |
|||
{ name: '考公' }, |
|||
{ |
|||
name: '留学', |
|||
children: [{ name: '相关文件（申请流程、交换要求）' }], |
|||
}, |
|||
{ name: '创业' }, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.showChart(); |
|||
}, |
|||
methods: { |
|||
showChart() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
var myChart = this.$echarts.init(document.getElementById('treeChart')); |
|||
// 指定图表的配置项和数据 |
|||
var option = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
triggerOn: 'mousemove', |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'tree', |
|||
data: this.treedata, |
|||
top: '1%', |
|||
left: '8%', |
|||
bottom: '1%', |
|||
right: '30%', |
|||
symbolSize: 7, |
|||
label: { |
|||
position: 'left', |
|||
verticalAlign: 'middle', |
|||
align: 'right', |
|||
fontSize: 13, |
|||
}, |
|||
|
|||
leaves: { |
|||
label: { |
|||
position: 'right', |
|||
verticalAlign: 'middle', |
|||
align: 'left', |
|||
}, |
|||
}, |
|||
expandAndCollapse: true, |
|||
animationDuration: 550, |
|||
animationDurationUpdate: 750, |
|||
}, |
|||
], |
|||
}; |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped></style> |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<div> |
|||
<sen-nav /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import SenNav from './components/SenNav.vue'; |
|||
export default { |
|||
name: 'Develop', |
|||
components: { SenNav }, |
|||
data() { |
|||
return { |
|||
str: '这是资源开发利用平台', |
|||
list: [], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<div style="padding-bottom: 50px"> |
|||
<rotation /> |
|||
<h-nav /> |
|||
<div class="content-box"> |
|||
<div v-for="(item, index) in list" :key="index" style="margin-top: 50px; cursor: pointer" @click="jump(item.url)"> |
|||
<div v-if="index % 2 === 0" class="d-flex justify-space-between"> |
|||
<div class="introduce-box"> |
|||
<p class="introduce-title">{{ item.title }}</p> |
|||
<p class="introduce-content">{{ item.content }}</p> |
|||
</div> |
|||
<img style="width: 452px" :src="item.imgUrl" /> |
|||
</div> |
|||
<div v-else class="d-flex justify-space-between"> |
|||
<img style="width: 452px" :src="item.imgUrl" /> |
|||
<div class="introduce-box"> |
|||
<p class="introduce-title">{{ item.title }}</p> |
|||
<p class="introduce-content">{{ item.content }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Rotation from 'components/Rotation/Rotation.vue'; |
|||
import HNav from './../components/HNav.vue'; |
|||
export default { |
|||
name: 'News', |
|||
components: { HNav, Rotation }, |
|||
data() { |
|||
return { |
|||
str: '这是政策界面', |
|||
list: [ |
|||
{ |
|||
title: '科技资源开放共享服务平台', |
|||
content: |
|||
'山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，' + |
|||
'致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业...', |
|||
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg', |
|||
url: '/NewPlatform/Share', |
|||
}, |
|||
{ |
|||
title: '知识产权与技术转移转化服务平台', |
|||
content: |
|||
'山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，' + |
|||
'致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业...', |
|||
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg', |
|||
url: '/NewPlatform/Transfer', |
|||
}, |
|||
{ |
|||
title: '资源开发利用平台', |
|||
content: |
|||
'山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，' + |
|||
'致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业...', |
|||
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/f5fb570cfd7547279138a591818325e0.jpg', |
|||
url: '/NewPlatform/Develop', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
methods: { |
|||
jump(url) { |
|||
this.$router.push(url); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped></style> |
|||
@ -0,0 +1,24 @@ |
|||
<template> |
|||
<div> |
|||
<h-nav /> |
|||
{{ str }} |
|||
{{ str }} |
|||
{{ str }} |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HNav from './../components/HNav.vue'; |
|||
export default { |
|||
name: 'Service', |
|||
components: { HNav }, |
|||
data() { |
|||
return { |
|||
str: '这是服务界面', |
|||
list: [], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped></style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div> |
|||
<sen-nav /> |
|||
<div style="width: 100%; height: 50px; background: skyblue; color: #000">搜索条</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import SenNav from './components/SenNav.vue'; |
|||
export default { |
|||
name: 'Share', |
|||
components: { SenNav }, |
|||
data() { |
|||
return { |
|||
str: '这是科技资源开放共享服务平台', |
|||
list: [], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<div> |
|||
<sen-nav /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import SenNav from './components/SenNav.vue'; |
|||
export default { |
|||
name: 'Transfer', |
|||
components: { SenNav }, |
|||
data() { |
|||
return { |
|||
str: '这是知识产权与技术转移转化服务平台', |
|||
list: [], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<div class="nav-box d-flex"> |
|||
<div v-for="(item, index) in list" :key="index" :class="activeNum === index ? 'nav-box-active' : ''" @click="jump(item.url)"> |
|||
{{ item.title }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HNav', |
|||
data() { |
|||
return { |
|||
str: '导航条', |
|||
activeNum: 0, |
|||
list: [ |
|||
{ |
|||
title: '科技资源开放共享服务平台', |
|||
url: '/NewPlatform/Share', |
|||
}, |
|||
{ |
|||
title: '知识产权与技术转移转化服务平台', |
|||
url: '/NewPlatform/Transfer', |
|||
}, |
|||
{ |
|||
title: '资源开发利用平台', |
|||
url: '/NewPlatform/Develop', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() { |
|||
console.log(); |
|||
if (this.$route.fullPath === '/NewPlatform/Transfer') { |
|||
this.activeNum = 1; |
|||
} else if (this.$route.fullPath === '/NewPlatform/Develop') { |
|||
this.activeNum = 2; |
|||
} else { |
|||
this.activeNum = 0; |
|||
} |
|||
}, |
|||
methods: { |
|||
jump(url) { |
|||
if (this.$route.fullPath === url) { |
|||
this.$message.success('已在当前界面'); |
|||
} else { |
|||
this.$router.push(url); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped></style> |
|||
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<div> |
|||
<router-view></router-view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'NewPlatform', |
|||
data() { |
|||
return { |
|||
str: '创新平台界面', |
|||
list: [], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.wrap { |
|||
width: 1260px; |
|||
min-height: 1037px; |
|||
margin: 80px auto 28px auto; |
|||
overflow: hidden; |
|||
opacity: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<div class="nav-box d-flex"> |
|||
<div v-for="(item, index) in list" :key="index" :class="activeNum === index ? 'nav-box-active' : ''" @click="jump(item.url)"> |
|||
{{ item.title }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HNav', |
|||
data() { |
|||
return { |
|||
str: '导航条', |
|||
activeNum: 0, |
|||
list: [ |
|||
{ |
|||
title: '协同创新中心', |
|||
url: '/NewPlatform/NewCore', |
|||
}, |
|||
{ |
|||
title: '创新资源平台', |
|||
url: '/NewPlatform/News', |
|||
}, |
|||
{ |
|||
title: '科技创新服务', |
|||
url: '/NewPlatform/NewService', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() { |
|||
console.log(); |
|||
if (this.$route.fullPath === '/NewPlatform/News') { |
|||
this.activeNum = 1; |
|||
} else if (this.$route.fullPath === '/NewPlatform/NewService') { |
|||
this.activeNum = 2; |
|||
} else { |
|||
this.activeNum = 0; |
|||
} |
|||
}, |
|||
methods: { |
|||
jump(url) { |
|||
if (this.$route.fullPath === url) { |
|||
this.$message.success('已在当前界面'); |
|||
} else { |
|||
this.$router.push(url); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped></style> |
|||
Loading…
Reference in new issue