22 changed files with 3462 additions and 19301 deletions
File diff suppressed because it is too large
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 625 KiB |
@ -1,259 +1,297 @@ |
|||
<template> |
|||
<div> |
|||
<div class="nav-box d-flex"> |
|||
<div :class="activeNum === 0 ? 'nav-box-active' : ''" @click="jump(0)"><a href="#about">关于我们</a></div> |
|||
<div :class="activeNum === 1 ? 'nav-box-active' : ''" @click="jump(1)"><a href="#organize">组织结构</a></div> |
|||
<div :class="activeNum === 2 ? 'nav-box-active' : ''" @click="jump(2)"><a href="#partner">合作伙伴</a></div> |
|||
<div :class="activeNum === 3 ? 'nav-box-active' : ''" @click="jump(3)"><a href="#contact">加入我们</a></div> |
|||
</div> |
|||
|
|||
<a name="about"> |
|||
<div class="banner-box"> |
|||
<a-carousel :autoplay-speed="time" autoplay> |
|||
<div class="img-box"> |
|||
<img src="~assets/banner/banner1.png" /> |
|||
</div> |
|||
<div class="img-box"> |
|||
<img src="~assets/banner/banner2.png" /> |
|||
</div> |
|||
<div class="img-box"> |
|||
<img src="~assets/banner/banner3.png" /> |
|||
</div> |
|||
</a-carousel> |
|||
|
|||
<!-- 文字内容 --> |
|||
<div class="banner-con"> |
|||
<h1 class="about-title">关于我们</h1> |
|||
<div class="about-font"> |
|||
山西绿谷生物科技有限公司由山西智汇协同创新研究院有限公司、山西省生物研究院有限公司、天娇红农业科技有限公司、 |
|||
微动互联（北京）科技有限公司和山西力德福科技有限公司共同出资组建。公司立足功能食品、生物医药和数字健康产业，聚焦创新、聚力孵化、聚合产业，致力构建全链条一体化、线上线下一体化开放式创新创业平台，培育打造新型创新创业综合体，促进特色新兴产业集群化发展 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
|
|||
<!-- 组织架构 --> |
|||
<a name="organize"> |
|||
<div class="organize-box bg-gray text-center"> |
|||
<div class="title w-1400"><img src="~assets/about/title1.jpg" /></div> |
|||
<div class="w-1400"><img src="~assets/about/organize.jpg" /></div> |
|||
</div> |
|||
</a> |
|||
|
|||
<!-- 合作伙伴 --> |
|||
<a name="partner"> |
|||
<div class="partner-box text-center"> |
|||
<div class="title w-1400"><img src="~assets/about/title2.jpg" /></div> |
|||
<div class="w-1400"> |
|||
<a-carousel :autoplay-speed="time" autoplay> |
|||
<div class="partner-flex" v-for="(item, index) in lists" :key="index"> |
|||
<div class="partner-item" style="display: inline-block !important" v-for="(v, k) in item" :key="k"> |
|||
<div class="partner-item-img" style="display: inline-block !important"> |
|||
<img style="display: inline-block !important" :src="v.logoUrl" /> |
|||
</div> |
|||
<p>{{ v.name }}</p> |
|||
</div> |
|||
</div> |
|||
</a-carousel> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
|
|||
<!-- 加入我们 --> |
|||
<a name="contact"> |
|||
<div class="contact-box bg-gray text-center"> |
|||
<div class="title w-1400"> |
|||
<img src="~assets/about/title3.jpg" /> |
|||
<model class="mt-8" /> |
|||
</div> |
|||
|
|||
<div class="w-1400" style="text-align: left"> |
|||
<contact /> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations, mapActions } from 'vuex'; |
|||
// import HNav from './components/HNav.vue'; |
|||
import Contact from 'components/Introduce/ContactUs.vue'; |
|||
import Model from 'components/Introduce/Model.vue'; |
|||
|
|||
export default { |
|||
name: 'About', |
|||
components: { Contact, Model }, |
|||
|
|||
data() { |
|||
return { |
|||
time: 10000, |
|||
lists: [], |
|||
activeNum: -1, |
|||
}; |
|||
}, |
|||
|
|||
computed: mapState('home', ['partners']), |
|||
|
|||
async created() { |
|||
this.setPartners([]); |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
type: 1, |
|||
typeOfPlatform: 2, |
|||
}, |
|||
}; |
|||
await this.getFrontSearchCompany(params); |
|||
|
|||
this.lists = []; |
|||
let arr = []; |
|||
this.partners.forEach(item => { |
|||
item.backendSearchList.forEach(value => { |
|||
arr.push(value); |
|||
}); |
|||
}); |
|||
|
|||
let len = Math.ceil(arr.length / 10); |
|||
|
|||
for (let j = 0; j < len; j++) { |
|||
let arr_len = []; |
|||
|
|||
for (let i = 0; i < arr.length; i++) { |
|||
if (Math.floor(i / 10) === j) { |
|||
arr_len.push(arr[i]); |
|||
} |
|||
} |
|||
|
|||
this.lists.push(arr_len); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations('home', ['setPartners']), |
|||
...mapActions('home', ['getFrontSearchCompany']), |
|||
|
|||
jump(i) { |
|||
this.activeNum = i; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.bg-gray { |
|||
background-color: #F5F5F5; |
|||
} |
|||
|
|||
.w-1400 { |
|||
display: inline-block; |
|||
width: 1400px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.nav-box { |
|||
position: fixed; |
|||
top: 70px; |
|||
width: 100%; |
|||
z-index: 99; |
|||
|
|||
a { |
|||
color: unset; |
|||
} |
|||
} |
|||
|
|||
.img-box { |
|||
// height: 380px; |
|||
width: 100%; |
|||
|
|||
img { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.banner-box { |
|||
position: relative; |
|||
|
|||
.banner-con { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
width: 1200px; |
|||
|
|||
.about-title { |
|||
color: white; |
|||
font-size: 55px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.about-font { |
|||
color: white; |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.organize-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 50px; |
|||
text-align: left; |
|||
} |
|||
} |
|||
|
|||
.partner-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 30px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.partner-flex { |
|||
text-align: left; |
|||
|
|||
.partner-item { |
|||
margin: 20px 0; |
|||
width: 20%; |
|||
text-align: center; |
|||
|
|||
.partner-item-img { |
|||
margin-bottom: 20px; |
|||
width: 120px; |
|||
height: 120px; |
|||
text-align: center; |
|||
line-height: 120px; |
|||
} |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
} |
|||
|
|||
p { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contact-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 50px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div> |
|||
<div class="nav-box d-flex"> |
|||
<div :class="activeNum === 0 ? 'nav-box-active' : ''" @click="jump(0)"><a href="#about">关于我们</a></div> |
|||
<div :class="activeNum === 1 ? 'nav-box-active' : ''" @click="jump(1)"><a href="#organize">组织结构</a></div> |
|||
<div :class="activeNum === 2 ? 'nav-box-active' : ''" @click="jump(2)"><a href="#partner">合作伙伴</a></div> |
|||
<div :class="activeNum === 3 ? 'nav-box-active' : ''" @click="jump(3)"><a href="#contact">加入我们</a></div> |
|||
</div> |
|||
|
|||
<a name="about" id="about"> |
|||
<div class="banner-box"> |
|||
<a-carousel :autoplay-speed="time" autoplay> |
|||
<div class="img-box"> |
|||
<img src="~assets/banner/banner1.png" /> |
|||
</div> |
|||
<div class="img-box"> |
|||
<img src="~assets/banner/banner2.png" /> |
|||
</div> |
|||
<div class="img-box"> |
|||
<img src="~assets/banner/banner3.png" /> |
|||
</div> |
|||
</a-carousel> |
|||
|
|||
<!-- 文字内容 --> |
|||
<div class="banner-con"> |
|||
<h1 class="about-title">关于我们</h1> |
|||
<div class="about-font"> |
|||
山西绿谷生物科技有限公司由山西智汇协同创新研究院有限公司、山西省生物研究院有限公司、天娇红农业科技有限公司、 |
|||
微动互联（北京）科技有限公司和山西力德福科技有限公司共同出资组建。公司立足功能食品、生物医药和数字健康产业，聚焦创新、聚力孵化、聚合产业，致力构建全链条一体化、线上线下一体化开放式创新创业平台，培育打造新型创新创业综合体，促进特色新兴产业集群化发展 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
|
|||
<!-- 组织架构 --> |
|||
<a name="organize" id="organize"> |
|||
<div class="organize-box bg-gray text-center"> |
|||
<div class="title w-1400"><img src="~assets/about/title1.jpg" /></div> |
|||
<div class="w-1400"><img src="~assets/about/organize.jpg" /></div> |
|||
</div> |
|||
</a> |
|||
|
|||
<!-- 合作伙伴 --> |
|||
<a name="partner" id="partner"> |
|||
<div class="partner-box text-center"> |
|||
<div class="title w-1400"><img src="~assets/about/title2.jpg" /></div> |
|||
<div class="w-1400"> |
|||
<a-carousel :autoplay-speed="time" autoplay> |
|||
<div class="partner-flex" v-for="(item, index) in lists" :key="index"> |
|||
<div class="partner-item" style="display: inline-block !important" v-for="(v, k) in item" :key="k"> |
|||
<div class="partner-item-img" style="display: inline-block !important"> |
|||
<img style="display: inline-block !important" :src="v.logoUrl" /> |
|||
</div> |
|||
<p>{{ v.name }}</p> |
|||
</div> |
|||
</div> |
|||
</a-carousel> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
|
|||
<!-- 加入我们 --> |
|||
<a name="contact" id="contact"> |
|||
<div class="contact-box bg-gray text-center"> |
|||
<div class="title w-1400"> |
|||
<img src="~assets/about/title3.jpg" /> |
|||
<model class="mt-8" /> |
|||
</div> |
|||
|
|||
<div class="w-1400" style="text-align: left"> |
|||
<contact /> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations, mapActions } from 'vuex'; |
|||
// import HNav from './components/HNav.vue'; |
|||
import Contact from 'components/Introduce/ContactUs.vue'; |
|||
import Model from 'components/Introduce/Model.vue'; |
|||
|
|||
export default { |
|||
name: 'About', |
|||
components: { Contact, Model }, |
|||
|
|||
data() { |
|||
return { |
|||
time: 10000, |
|||
lists: [], |
|||
activeNum: -1, |
|||
}; |
|||
}, |
|||
|
|||
watch:{ |
|||
$route(to){ |
|||
if(to.hash){ |
|||
this.setJump(to.hash) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
computed: mapState('home', ['partners']), |
|||
|
|||
async created() { |
|||
this.setPartners([]); |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
type: 1, |
|||
typeOfPlatform: 2, |
|||
}, |
|||
}; |
|||
await this.getFrontSearchCompany(params); |
|||
|
|||
this.lists = []; |
|||
let arr = []; |
|||
this.partners.forEach(item => { |
|||
item.backendSearchList.forEach(value => { |
|||
arr.push(value); |
|||
}); |
|||
}); |
|||
|
|||
let len = Math.ceil(arr.length / 10); |
|||
|
|||
for (let j = 0; j < len; j++) { |
|||
let arr_len = []; |
|||
|
|||
for (let i = 0; i < arr.length; i++) { |
|||
if (Math.floor(i / 10) === j) { |
|||
arr_len.push(arr[i]); |
|||
} |
|||
} |
|||
|
|||
this.lists.push(arr_len); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
if(this.$route.hash){ |
|||
this.setJump(this.$route.hash) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations('home', ['setPartners']), |
|||
...mapActions('home', ['getFrontSearchCompany']), |
|||
|
|||
jump(i) { |
|||
this.activeNum = i; |
|||
}, |
|||
|
|||
setJump(hash){ |
|||
if(hash === '#organize'){ |
|||
this.$nextTick(() => { |
|||
this.jump(1) |
|||
document.getElementById('organize').scrollIntoView(true) |
|||
}) |
|||
} |
|||
if(hash === '#partner'){ |
|||
this.$nextTick(() => { |
|||
this.jump(2) |
|||
document.getElementById('partner').scrollIntoView(true) |
|||
}) |
|||
} |
|||
if(hash === '#contact'){ |
|||
this.$nextTick(() => { |
|||
this.jump(3) |
|||
document.getElementById('contact').scrollIntoView(true) |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.bg-gray { |
|||
background-color: #F5F5F5; |
|||
} |
|||
|
|||
.w-1400 { |
|||
// display: inline-block; |
|||
// width: 1400px; |
|||
width: 82%; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.nav-box { |
|||
position: fixed; |
|||
top: 70px; |
|||
width: 100%; |
|||
z-index: 99; |
|||
|
|||
a { |
|||
color: unset; |
|||
} |
|||
} |
|||
|
|||
.img-box { |
|||
// height: 380px; |
|||
width: 100%; |
|||
|
|||
img { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.banner-box { |
|||
position: relative; |
|||
|
|||
.banner-con { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
width: 1200px; |
|||
|
|||
.about-title { |
|||
color: white; |
|||
font-size: 55px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.about-font { |
|||
color: white; |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.organize-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 50px; |
|||
text-align: left; |
|||
} |
|||
} |
|||
|
|||
.partner-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 30px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.partner-flex { |
|||
text-align: left; |
|||
|
|||
.partner-item { |
|||
margin: 20px 0; |
|||
width: 20%; |
|||
text-align: center; |
|||
|
|||
.partner-item-img { |
|||
margin-bottom: 20px; |
|||
width: 120px; |
|||
height: 120px; |
|||
text-align: center; |
|||
line-height: 120px; |
|||
} |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
} |
|||
|
|||
p { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contact-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 50px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,423 +1,423 @@ |
|||
<!-- |
|||
Copyright (c) 2020. |
|||
author: bin |
|||
email: binbin0314@126.com |
|||
--> |
|||
<template> |
|||
<div> |
|||
<rotation /> |
|||
<div class="inner"> |
|||
<a-row> |
|||
<a-col :span="24"> |
|||
<a-row class="d-flex justify-center"> |
|||
<a-col id="hy-news" style="padding-right: 30px"> |
|||
<img src="./img/notice.png" /> |
|||
</a-col> |
|||
<a-col :span="6" :style="{ height: height + 'px' }" style="overflow: hidden; padding-left: 50px"> |
|||
<div class="d-flex flex-row justify-center align-center" style="font-size: 26px"> |
|||
<index-new-list :i="1" :lists="lists" /> |
|||
</div> |
|||
</a-col> |
|||
<a-col class="up-arrow"> |
|||
<a-button |
|||
@click="$router.push('/Activity')" |
|||
class="d-flex align-end font-16 baseColor pa-0" |
|||
style="display: inline-block; font-size: 12px; padding-top: 15px" |
|||
type="link" |
|||
> |
|||
更多 |
|||
<img src="./img/right.png" style="width: 7px; height: 10px; margin: 0 10px" /> |
|||
</a-button> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row class="demands d-flex justify-space-between" style="width: 500px"> |
|||
<a-col class="d-flex align-center"> |
|||
<div class="demand" @click="showIntro">需求征集</div> |
|||
<img src="./img/right.png" style="width: 7px; height: 10px" /> |
|||
</a-col> |
|||
<a-col class="d-flex align-center"> |
|||
<div class="demand" @click="$router.push('/Challenge/Solicitation')">创新挑战</div> |
|||
<img src="./img/right.png" style="width: 7px; height: 10px" /> |
|||
</a-col> |
|||
<a-col class="d-flex align-center"> |
|||
<div class="demand">交流社区</div> |
|||
<img src="./img/right.png" style="width: 7px; height: 10px" /> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="d-flex justify-space-between"> |
|||
<div :key="platform.id" style="width: 30%; min-width: 250px" v-for="platform in platforms"> |
|||
<div @click="$router.push(platform.path)" class="d-flex pointer"> |
|||
<div class="white server-box d-flex flex-column fill-width justify-center" style="padding: 15px; height: 300px"> |
|||
<div> |
|||
<img :src="platform.url" style="width: 50px; height: 50px; margin: 10px auto" /> |
|||
</div> |
|||
<p style="font-weight: bold; font-size: 20px">{{ platform.description }}</p> |
|||
<div class="descriptions d-flex flex-column justify-center"> |
|||
<p>{{ platform.descriptionOne }}</p> |
|||
<p>{{ platform.descriptionTow }}</p> |
|||
<p>{{ platform.descriptionThree }}</p> |
|||
</div> |
|||
<div class="titles d-flex justify-center align-center"> |
|||
{{ platform.title }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-space-between" style="margin-top: 80px"> |
|||
<div class="server" :key="server.id" style="width: 30%; min-width: 250px" v-for="server in services"> |
|||
<div class="server-box pointer d-flex fill-width flex-column" id="hy-news" @click="$router.push(server.path)"> |
|||
<div style="border-radius: 10px; overflow: hidden"> |
|||
<img class="d-flex justify-end flex-1" style="width: 100%" :src="server.url" /> |
|||
</div> |
|||
<div style="padding: 15px 0; font-weight: bold; font-size: 20px">{{ server.chinese }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<a-row class="d-flex justify-center"> |
|||
<a-col> |
|||
<div class="divider-text d-flex justify-center">绿谷动态</div> |
|||
<a-divider class="dividers">GREEN VALLER DYNAMICS</a-divider> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row class="mt-4 flex-1"> |
|||
<a-col :span="12"> |
|||
<div class="white d-flex flex-column justify-center mr-4"> |
|||
<index-new-list :i="0" :lists="lists" /> |
|||
</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div class="white d-flex flex-column justify-center"> |
|||
<index-new-list :i="2" :lists="lists" /> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
</a-col> |
|||
</a-row> |
|||
</div> |
|||
<service-demand :model-intro="modelIntro" :source="source" ref="child" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapActions } from 'vuex'; |
|||
import Rotation from 'components/Rotation/Rotation.vue'; |
|||
import IndexNewList from 'components/Index/IndexNewList.vue'; |
|||
import { frontSearchFriend, frontSearchCompany } from 'config/api'; |
|||
import ServiceDemand from 'components/ServiceDemand/ServiceDemand.vue'; |
|||
|
|||
export default { |
|||
components: { Rotation, IndexNewList, ServiceDemand }, |
|||
data() { |
|||
return { |
|||
platforms: [ |
|||
{ |
|||
id: '04', |
|||
path: '/NewPlatform/NewCore', |
|||
url: require('./img/creation.png'), |
|||
description: 'COLLABORATIVE ININOVATION', |
|||
descriptionOne: '依托新型研发机构和技术创新中心', |
|||
descriptionTow: '搭建科技开放、技术转移转化', |
|||
descriptionThree: '科技人才团队平台', |
|||
title: '协同创作中心', |
|||
}, |
|||
{ |
|||
id: '05', |
|||
path: '/IncubationPlatform/MakerSpace', |
|||
url: require('./img/popularCreation.png'), |
|||
description: 'THE SPACE OF CREATION', |
|||
descriptionOne: '本众创空间以建设专业化、', |
|||
descriptionTow: '市场化、网络化、品牌化双创孵化基地为目标，', |
|||
descriptionThree: '致力打造专业化开放式创新创业孵化平台', |
|||
// descriptionFour: '新创业服务为主导，以创新创业...', |
|||
title: '专业化众创空间', |
|||
}, |
|||
{ |
|||
id: '06', |
|||
path: '/Industry/Products', |
|||
url: require('./img/exhibition.png'), |
|||
description: 'PRODUCT DEMONSTRATION', |
|||
descriptionOne: '企业线上研发、自主产品展示平台，', |
|||
descriptionTow: '展示产品功能，特性、研发历程、科研技术等信息。', |
|||
descriptionThree: '为企业建立线上销售渠道，提供专业化产品服务。', |
|||
title: '企业产品展示', |
|||
}, |
|||
], |
|||
services: [ |
|||
{ |
|||
id: '01', |
|||
chinese: '创新服务', |
|||
english: 'INNOVATIVE', |
|||
path: '/NewPlatform/NewService', |
|||
url: 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads/upload/20210818/726a3b5e63931f749943e91fb644ffa.jpg', |
|||
}, |
|||
{ |
|||
id: '02', |
|||
chinese: '创业服务', |
|||
english: 'INCUBATION', |
|||
path: '/IncubationPlatform/Services', |
|||
url: 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads/upload/20210818/7195657085673f68a805bdc6298de2a.jpg', |
|||
}, |
|||
{ |
|||
id: '03', |
|||
chinese: '产业服务', |
|||
english: 'INDUSTRIAL', |
|||
path: '/Industry/Serve', |
|||
url: 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads/upload/20210818/5d3b846e13f7a3d534b8f86f36ed0e0.jpg', |
|||
}, |
|||
], |
|||
lists: [ |
|||
{ |
|||
id: 1, |
|||
name: '行业资讯', |
|||
news: [], |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '活动公告', |
|||
news: [], |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '企业简报', |
|||
news: [], |
|||
}, |
|||
], |
|||
height: 150, |
|||
timer: null, |
|||
modelIntro: '', |
|||
source: 'index', |
|||
}; |
|||
}, |
|||
|
|||
computed: mapState('home', ['actList', 'actIpCon', 'actCurrent']), |
|||
|
|||
created() { |
|||
this.getData1(); |
|||
this.getData2(); |
|||
this.getIndustryInfoLists(); |
|||
this.getFrontListInfoLists(); |
|||
}, |
|||
|
|||
mounted() { |
|||
var oDiv = document.getElementById('hy-news'); |
|||
if (!oDiv.offsetHeight || oDiv.offsetHeight === 0) { |
|||
this.timer = setInterval(() => { |
|||
oDiv = document.getElementById('hy-news'); |
|||
if (oDiv.offsetHeight) { |
|||
this.height = oDiv.offsetHeight; |
|||
this.getFrontLists(); |
|||
} |
|||
}, 1000); |
|||
} else { |
|||
this.height = oDiv.offsetHeight; |
|||
this.getFrontLists(); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions('home', ['getIndustryInfoList', 'getFrontList', 'getFrontInfoList']), |
|||
|
|||
// 查询衍生企业 |
|||
async getData1() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
type: 1, |
|||
typeOfPlatform: 1, |
|||
}, |
|||
}; |
|||
const res = await frontSearchFriend(params); |
|||
const { data, code, msg } = res.data; |
|||
if (code === 200) { |
|||
// console.log(data); |
|||
} else { |
|||
// console.log(msg); |
|||
} |
|||
}, |
|||
|
|||
// 查询合作伙伴 |
|||
async getData2() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
type: 2, |
|||
typeOfPlatform: 2, |
|||
}, |
|||
}; |
|||
const res = await frontSearchCompany(params); |
|||
const { data, code, msg } = res.data; |
|||
if (code === 200) { |
|||
// console.log(data); |
|||
} else { |
|||
// console.log(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取行业资讯列表 |
|||
async getIndustryInfoLists() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}, |
|||
}; |
|||
const res = await this.getIndustryInfoList(params); |
|||
this.lists[0].news = res.list; |
|||
}, |
|||
|
|||
// 获取企业简报列表 |
|||
async getFrontListInfoLists() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}, |
|||
}; |
|||
const res = await this.getFrontInfoList(params); |
|||
this.lists[2].news = res.list; |
|||
}, |
|||
|
|||
// 获取活动公告列表 |
|||
async getFrontLists() { |
|||
clearInterval(this.timer); |
|||
const params = { |
|||
param: { |
|||
activityType: [], |
|||
pageNum: 1, |
|||
pageSize: 3, |
|||
title: '', |
|||
}, |
|||
}; |
|||
const res = await this.getFrontList(params); |
|||
this.lists[1].news = res.list; |
|||
console.log(this.lists[1].news); |
|||
}, |
|||
|
|||
// 打开服务需求 |
|||
showIntro() { |
|||
// this.$refs.child.showModel(); |
|||
this.modelIntro = '服务需求'; |
|||
this.$refs.child.setTypeDataId(0); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.inner { |
|||
margin: 20px auto; |
|||
} |
|||
|
|||
.down-arrow { |
|||
margin: 30px; |
|||
} |
|||
.up-arrow { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.demands { |
|||
margin: 20px auto 50px auto; |
|||
} |
|||
|
|||
.demand { |
|||
margin-right: 15px; |
|||
color: #13acc4; |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.descriptions { |
|||
font-size: 14px; |
|||
height: 170px; |
|||
} |
|||
|
|||
.titles { |
|||
background: #13acc4; |
|||
color: white; |
|||
width: 60%; |
|||
height: 54px; |
|||
font-size: 18px; |
|||
position: relative; |
|||
top: 35px; |
|||
left: 20%; |
|||
} |
|||
|
|||
.divider-text { |
|||
margin-top: 20px; |
|||
font-size: 22px; |
|||
color: #24bad1; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.dividers { |
|||
width: 500px; |
|||
} |
|||
/deep/.ant-divider-horizontal.ant-divider-with-text-center::before, |
|||
.ant-divider-horizontal.ant-divider-with-text-left::before, |
|||
.ant-divider-horizontal.ant-divider-with-text-right::before, |
|||
.ant-divider-horizontal.ant-divider-with-text-center::after, |
|||
.ant-divider-horizontal.ant-divider-with-text-left::after, |
|||
.ant-divider-horizontal.ant-divider-with-text-right::after { |
|||
top: 25%; |
|||
border-top: 1px solid #99e7fa; |
|||
} |
|||
|
|||
/deep/.ant-divider-horizontal.ant-divider-with-text-center, |
|||
.ant-divider-horizontal.ant-divider-with-text-left, |
|||
.ant-divider-horizontal.ant-divider-with-text-right { |
|||
margin: 0 auto 30px auto; |
|||
color: #9be3f5; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.platform-box { |
|||
width: 25%; |
|||
|
|||
.platform-txt { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
@media only screen and (max-width: 1400px) { |
|||
.platform-txt { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.platform-box div { |
|||
transition: all 0.2s ease 0s; |
|||
} |
|||
|
|||
.platform-box:hover div { |
|||
transform: translate(0, -3px); |
|||
} |
|||
|
|||
.server { |
|||
transition: all 0.2s ease 0s; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.server:hover { |
|||
width: 33% !important; |
|||
} |
|||
|
|||
.server-box:hover { |
|||
transform: translate(0, -3px); |
|||
background: #c1e5ea; |
|||
} |
|||
|
|||
.server-box { |
|||
transition: all 0.2s ease 0s; |
|||
} |
|||
|
|||
.hy-news { |
|||
height: 746px; |
|||
} |
|||
|
|||
.hd-news { |
|||
background: white; |
|||
} |
|||
</style> |
|||
<!-- |
|||
Copyright (c) 2020. |
|||
author: bin |
|||
email: binbin0314@126.com |
|||
--> |
|||
<template> |
|||
<div> |
|||
<rotation /> |
|||
<div class="inner"> |
|||
<a-row> |
|||
<a-col :span="24"> |
|||
<a-row class="d-flex justify-center"> |
|||
<a-col id="hy-news" style="padding-right: 30px"> |
|||
<img src="./img/notice.png" /> |
|||
</a-col> |
|||
<a-col :span="6" :style="{ height: height + 'px' }" style="overflow: hidden; padding-left: 50px"> |
|||
<div class="d-flex flex-row justify-center align-center" style="font-size: 26px"> |
|||
<index-new-list :i="1" :lists="lists" /> |
|||
</div> |
|||
</a-col> |
|||
<a-col class="up-arrow"> |
|||
<a-button |
|||
@click="$router.push('/Activity')" |
|||
class="d-flex align-end font-16 baseColor pa-0" |
|||
style="display: inline-block; font-size: 12px; padding-top: 15px" |
|||
type="link" |
|||
> |
|||
更多 |
|||
<img src="./img/right.png" style="width: 7px; height: 10px; margin: 0 10px" /> |
|||
</a-button> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row class="demands d-flex justify-space-between" style="width: 500px"> |
|||
<a-col class="d-flex align-center"> |
|||
<div class="demand" @click="showIntro">需求征集</div> |
|||
<img src="./img/right.png" style="width: 7px; height: 10px" /> |
|||
</a-col> |
|||
<a-col class="d-flex align-center"> |
|||
<div class="demand" @click="$router.push('/Challenge/Solicitation')">创新挑战</div> |
|||
<img src="./img/right.png" style="width: 7px; height: 10px" /> |
|||
</a-col> |
|||
<a-col class="d-flex align-center"> |
|||
<div class="demand">交流社区</div> |
|||
<img src="./img/right.png" style="width: 7px; height: 10px" /> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="d-flex justify-space-between"> |
|||
<div :key="platform.id" style="width: 30%; min-width: 250px" v-for="platform in platforms"> |
|||
<div @click="$router.push(platform.path)" class="d-flex pointer"> |
|||
<div class="white server-box d-flex flex-column fill-width justify-center" style="padding: 15px; height: 300px"> |
|||
<div> |
|||
<img :src="platform.url" style="width: 50px; height: 50px; margin: 10px auto" /> |
|||
</div> |
|||
<p style="font-weight: bold; font-size: 20px">{{ platform.description }}</p> |
|||
<div class="descriptions d-flex flex-column justify-center"> |
|||
<p>{{ platform.descriptionOne }}</p> |
|||
<p>{{ platform.descriptionTow }}</p> |
|||
<p>{{ platform.descriptionThree }}</p> |
|||
</div> |
|||
<div class="titles d-flex justify-center align-center"> |
|||
{{ platform.title }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-space-between" style="margin-top: 80px"> |
|||
<div class="server" :key="server.id" style="width: 30%; min-width: 250px" v-for="server in services"> |
|||
<div class="server-box pointer d-flex fill-width flex-column" id="hy-news" @click="$router.push(server.path)"> |
|||
<div style="border-radius: 10px; overflow: hidden"> |
|||
<img class="d-flex justify-end flex-1" style="width: 100%" :src="server.url" /> |
|||
</div> |
|||
<div style="padding: 15px 0; font-weight: bold; font-size: 20px">{{ server.chinese }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<a-row class="d-flex justify-center"> |
|||
<a-col> |
|||
<div class="divider-text d-flex justify-center">绿谷动态</div> |
|||
<a-divider class="dividers">GREEN VALLER DYNAMICS</a-divider> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row class="mt-4 flex-1"> |
|||
<a-col :span="12"> |
|||
<div class="white d-flex flex-column justify-center mr-4"> |
|||
<index-new-list :i="0" :lists="lists" /> |
|||
</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div class="white d-flex flex-column justify-center"> |
|||
<index-new-list :i="2" :lists="lists" /> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
</a-col> |
|||
</a-row> |
|||
</div> |
|||
<service-demand :model-intro="modelIntro" :source="source" ref="child" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapActions } from 'vuex'; |
|||
import Rotation from 'components/Rotation/Rotation.vue'; |
|||
import IndexNewList from 'components/Index/IndexNewList.vue'; |
|||
import { frontSearchFriend, frontSearchCompany } from 'config/api'; |
|||
import ServiceDemand from 'components/ServiceDemand/ServiceDemand.vue'; |
|||
|
|||
export default { |
|||
components: { Rotation, IndexNewList, ServiceDemand }, |
|||
data() { |
|||
return { |
|||
platforms: [ |
|||
{ |
|||
id: '04', |
|||
path: '/NewPlatform/Index', |
|||
url: require('./img/creation.png'), |
|||
description: 'COLLABORATIVE ININOVATION', |
|||
descriptionOne: '依托新型研发机构和技术创新中心', |
|||
descriptionTow: '搭建科技开放、技术转移转化', |
|||
descriptionThree: '科技人才团队平台', |
|||
title: '协同创作中心', |
|||
}, |
|||
{ |
|||
id: '05', |
|||
path: '/IncubationPlatform/MakerSpace', |
|||
url: require('./img/popularCreation.png'), |
|||
description: 'THE SPACE OF CREATION', |
|||
descriptionOne: '本众创空间以建设专业化、', |
|||
descriptionTow: '市场化、网络化、品牌化双创孵化基地为目标，', |
|||
descriptionThree: '致力打造专业化开放式创新创业孵化平台', |
|||
// descriptionFour: '新创业服务为主导，以创新创业...', |
|||
title: '专业化众创空间', |
|||
}, |
|||
{ |
|||
id: '06', |
|||
path: '/Industry/Products', |
|||
url: require('./img/exhibition.png'), |
|||
description: 'PRODUCT DEMONSTRATION', |
|||
descriptionOne: '企业线上研发、自主产品展示平台，', |
|||
descriptionTow: '展示产品功能，特性、研发历程、科研技术等信息。', |
|||
descriptionThree: '为企业建立线上销售渠道，提供专业化产品服务。', |
|||
title: '企业产品展示', |
|||
}, |
|||
], |
|||
services: [ |
|||
{ |
|||
id: '01', |
|||
chinese: '创新服务', |
|||
english: 'INNOVATIVE', |
|||
path: '/NewPlatform/NewService', |
|||
url: 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads/upload/20210818/726a3b5e63931f749943e91fb644ffa.jpg', |
|||
}, |
|||
{ |
|||
id: '02', |
|||
chinese: '创业服务', |
|||
english: 'INCUBATION', |
|||
path: '/IncubationPlatform/Services', |
|||
url: 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads/upload/20210818/7195657085673f68a805bdc6298de2a.jpg', |
|||
}, |
|||
{ |
|||
id: '03', |
|||
chinese: '产业服务', |
|||
english: 'INDUSTRIAL', |
|||
path: '/Industry/Serve', |
|||
url: 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads/upload/20210818/5d3b846e13f7a3d534b8f86f36ed0e0.jpg', |
|||
}, |
|||
], |
|||
lists: [ |
|||
{ |
|||
id: 1, |
|||
name: '行业资讯', |
|||
news: [], |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '活动公告', |
|||
news: [], |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '企业简报', |
|||
news: [], |
|||
}, |
|||
], |
|||
height: 150, |
|||
timer: null, |
|||
modelIntro: '', |
|||
source: 'index', |
|||
}; |
|||
}, |
|||
|
|||
computed: mapState('home', ['actList', 'actIpCon', 'actCurrent']), |
|||
|
|||
created() { |
|||
this.getData1(); |
|||
this.getData2(); |
|||
this.getIndustryInfoLists(); |
|||
this.getFrontListInfoLists(); |
|||
}, |
|||
|
|||
mounted() { |
|||
var oDiv = document.getElementById('hy-news'); |
|||
if (!oDiv.offsetHeight || oDiv.offsetHeight === 0) { |
|||
this.timer = setInterval(() => { |
|||
oDiv = document.getElementById('hy-news'); |
|||
if (oDiv.offsetHeight) { |
|||
this.height = oDiv.offsetHeight; |
|||
this.getFrontLists(); |
|||
} |
|||
}, 1000); |
|||
} else { |
|||
this.height = oDiv.offsetHeight; |
|||
this.getFrontLists(); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions('home', ['getIndustryInfoList', 'getFrontList', 'getFrontInfoList']), |
|||
|
|||
// 查询衍生企业 |
|||
async getData1() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
type: 1, |
|||
typeOfPlatform: 1, |
|||
}, |
|||
}; |
|||
const res = await frontSearchFriend(params); |
|||
const { data, code, msg } = res.data; |
|||
if (code === 200) { |
|||
// console.log(data); |
|||
} else { |
|||
// console.log(msg); |
|||
} |
|||
}, |
|||
|
|||
// 查询合作伙伴 |
|||
async getData2() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
type: 2, |
|||
typeOfPlatform: 2, |
|||
}, |
|||
}; |
|||
const res = await frontSearchCompany(params); |
|||
const { data, code, msg } = res.data; |
|||
if (code === 200) { |
|||
// console.log(data); |
|||
} else { |
|||
// console.log(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取行业资讯列表 |
|||
async getIndustryInfoLists() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}, |
|||
}; |
|||
const res = await this.getIndustryInfoList(params); |
|||
this.lists[0].news = res.list; |
|||
}, |
|||
|
|||
// 获取企业简报列表 |
|||
async getFrontListInfoLists() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}, |
|||
}; |
|||
const res = await this.getFrontInfoList(params); |
|||
this.lists[2].news = res.list; |
|||
}, |
|||
|
|||
// 获取活动公告列表 |
|||
async getFrontLists() { |
|||
clearInterval(this.timer); |
|||
const params = { |
|||
param: { |
|||
activityType: [], |
|||
pageNum: 1, |
|||
pageSize: 3, |
|||
title: '', |
|||
}, |
|||
}; |
|||
const res = await this.getFrontList(params); |
|||
this.lists[1].news = res.list; |
|||
console.log(this.lists[1].news); |
|||
}, |
|||
|
|||
// 打开服务需求 |
|||
showIntro() { |
|||
// this.$refs.child.showModel(); |
|||
this.modelIntro = '服务需求'; |
|||
this.$refs.child.setTypeDataId(0); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.inner { |
|||
margin: 20px auto; |
|||
} |
|||
|
|||
.down-arrow { |
|||
margin: 30px; |
|||
} |
|||
.up-arrow { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.demands { |
|||
margin: 20px auto 50px auto; |
|||
} |
|||
|
|||
.demand { |
|||
margin-right: 15px; |
|||
color: #13acc4; |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.descriptions { |
|||
font-size: 14px; |
|||
height: 170px; |
|||
} |
|||
|
|||
.titles { |
|||
background: #13acc4; |
|||
color: white; |
|||
width: 60%; |
|||
height: 54px; |
|||
font-size: 18px; |
|||
position: relative; |
|||
top: 35px; |
|||
left: 20%; |
|||
} |
|||
|
|||
.divider-text { |
|||
margin-top: 20px; |
|||
font-size: 22px; |
|||
color: #24bad1; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.dividers { |
|||
width: 500px; |
|||
} |
|||
/deep/.ant-divider-horizontal.ant-divider-with-text-center::before, |
|||
.ant-divider-horizontal.ant-divider-with-text-left::before, |
|||
.ant-divider-horizontal.ant-divider-with-text-right::before, |
|||
.ant-divider-horizontal.ant-divider-with-text-center::after, |
|||
.ant-divider-horizontal.ant-divider-with-text-left::after, |
|||
.ant-divider-horizontal.ant-divider-with-text-right::after { |
|||
top: 25%; |
|||
border-top: 1px solid #99e7fa; |
|||
} |
|||
|
|||
/deep/.ant-divider-horizontal.ant-divider-with-text-center, |
|||
.ant-divider-horizontal.ant-divider-with-text-left, |
|||
.ant-divider-horizontal.ant-divider-with-text-right { |
|||
margin: 0 auto 30px auto; |
|||
color: #9be3f5; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.platform-box { |
|||
width: 25%; |
|||
|
|||
.platform-txt { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
@media only screen and (max-width: 1400px) { |
|||
.platform-txt { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.platform-box div { |
|||
transition: all 0.2s ease 0s; |
|||
} |
|||
|
|||
.platform-box:hover div { |
|||
transform: translate(0, -3px); |
|||
} |
|||
|
|||
.server { |
|||
transition: all 0.2s ease 0s; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.server:hover { |
|||
width: 33% !important; |
|||
} |
|||
|
|||
.server-box:hover { |
|||
transform: translate(0, -3px); |
|||
background: #c1e5ea; |
|||
} |
|||
|
|||
.server-box { |
|||
transition: all 0.2s ease 0s; |
|||
} |
|||
|
|||
.hy-news { |
|||
height: 746px; |
|||
} |
|||
|
|||
.hd-news { |
|||
background: white; |
|||
} |
|||
</style> |
|||
|
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue