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