Compare commits
10 Commits
| Author | SHA1 | Date |
|---|---|---|
 zy_Java
|
bee24a26fb | 3 years ago |
 song
|
b2cd282e6b | 3 years ago |
|
song
|
09461cdc18 | 3 years ago |
|
song
|
a2ad4df66e | 3 years ago |
|
song
|
827a565bd2 | 3 years ago |
|
song
|
cd0a34b47b | 3 years ago |
|
song
|
6d4cd463f6 | 3 years ago |
|
song
|
d764749805 | 3 years ago |
|
zy_Java
|
75a8a34d96 | 3 years ago |
|
song
|
1a7e697249 | 3 years ago |
59 changed files with 4789 additions and 3117 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: 6.3 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 532 KiB |
|
Before Width: | Height: | Size: 542 KiB |
|
Before Width: | Height: | Size: 505 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 625 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<a-carousel arrows dots-class="slick-dots slick-thumb" :autoplay-speed="time" autoplay> |
|||
<a slot="customPaging" slot-scope="props"> |
|||
<img :src="getImgUrl(props.i)" /> |
|||
</a> |
|||
<div v-for="item in num"> |
|||
<div class="mask"> |
|||
<div class="con"> |
|||
<!-- 文字 --> |
|||
<div class="banner-con" v-if="type === 'stkj' ? (item === 1 || item === 2) : item === 1"> |
|||
<h1 class="about-title">路演厅</h1> |
|||
<div class="about-font"> |
|||
路演厅主要用于公司组织举办技术培训、技术交流、创新论坛、专题讲座、项目路演、创业论坛、创业沙龙、创业辅导、创业培训、创业大赛、政策宣讲、产学研合作等各类创新创业活动。路演厅提供投影设施、音响系统、视频会议系统等配套设施及台签、水壶、水杯等基本会议用品。 |
|||
</div> |
|||
<h1 class="about-title"></h1> |
|||
</div> |
|||
<!-- 文字 --> |
|||
<div class="banner-con" v-if="type === 'stkj' ? (item === 3 || item === 4) : item === 2"> |
|||
<h1 class="about-title">会议室</h1> |
|||
<div class="about-font"> |
|||
会议室主要用于公司和入驻企业（含工位注册企业）内部会议、内部培训、公务接待、学习交流等活动，内部使用会议室实行免费。会议室提供投影设施和水壶、水杯等基本用品。 |
|||
</div> |
|||
<h1 class="about-title"></h1> |
|||
</div> |
|||
<!-- 文字 --> |
|||
<div class="banner-con" v-if="type === 'stkj' ? (item === 5 || item === 6) : item === 3"> |
|||
<h1 class="about-title">洽谈室</h1> |
|||
<div class="about-font"> |
|||
洽谈室主要用于入驻企业来访接待、公务洽谈、日常交流、小型会议等活动。公司为洽谈室提供水壶、水杯等基本用品。 |
|||
</div> |
|||
<h1 class="about-title"></h1> |
|||
</div> |
|||
</div> |
|||
<img :src="`${baseUrl}/${type}/1-${item}.jpg`" /> |
|||
</div> |
|||
</div> |
|||
</a-carousel> |
|||
</template> |
|||
|
|||
<script> |
|||
const baseUrl = 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads'; |
|||
export default { |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: 'stkj', |
|||
}, |
|||
num: { |
|||
type: Number, |
|||
default: 3, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
baseUrl, |
|||
time: 10000, |
|||
}; |
|||
}, |
|||
methods: { |
|||
getImgUrl(i) { |
|||
return `${this.baseUrl}/${this.type}/1-${i+1}.jpg`; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* For demo */ |
|||
.ant-carousel >>> .slick-dots { |
|||
height: auto; |
|||
} |
|||
.ant-carousel >>> .slick-dots li { |
|||
margin: 0 8px; |
|||
} |
|||
.ant-carousel >>> .slick-slide img { |
|||
position: absolute; |
|||
display: block; |
|||
margin: auto; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.ant-carousel >>> .slick-thumb { |
|||
bottom: 20px; |
|||
z-index: 99; |
|||
} |
|||
.ant-carousel >>> .slick-thumb li { |
|||
width: 160px; |
|||
height: 64px; |
|||
} |
|||
.ant-carousel >>> .slick-thumb li img { |
|||
width: 100%; |
|||
height: 100%; |
|||
filter: grayscale(100%); |
|||
} |
|||
.ant-carousel >>> .slick-thumb li.slick-active img { |
|||
filter: grayscale(0%); |
|||
} |
|||
|
|||
.mask{ |
|||
/* width: 1457px; */ |
|||
height: 537px; |
|||
margin: auto; |
|||
position: relative; |
|||
} |
|||
|
|||
.mask .con{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0,0,0,.3); |
|||
z-index: 9; |
|||
} |
|||
|
|||
.banner-con { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
width: 1200px; |
|||
} |
|||
.about-title { |
|||
color: white; |
|||
font-size: 80px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.about-font { |
|||
color: white; |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
text-align: left; |
|||
text-indent: 2em; |
|||
} |
|||
</style> |
|||
@ -1,259 +1,358 @@ |
|||
<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" class="place"></a> |
|||
<div class="banner-box"> |
|||
<a-carousel :autoplay-speed="time" autoplay> |
|||
<div class="img-box"> |
|||
<img src="~assets/banner/banner01.png" /> |
|||
</div> |
|||
</a-carousel> |
|||
|
|||
<!-- 文字内容 --> |
|||
<div class="banner-con"> |
|||
<h1 class="about-title">关于我们</h1> |
|||
<div class="about-font"> |
|||
山西绿谷生物科技有限公司由行业领域企业共同出资组建，立足大健康产业，遵循“创新、开放、协同、融合”发展理念，聚焦创新、聚力孵化、聚合产业，致力构建全链条一体化、线上线下一体化开放式新型创新创业服务平台，培育打造新型创新创业综合体。 |
|||
</div> |
|||
<!-- <model /> --> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 组织架构 --> |
|||
<a name="organize" id="organize" class="place"></a> |
|||
<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 class="w-1400"> |
|||
<ul> |
|||
<li v-for="list in contents" :key="list.id"> |
|||
<div class="organize-title">{{ list.title }}</div> |
|||
<div class="organize-con">{{ list.con }}</div> |
|||
<div class="organize-phone">{{ list.name }}：{{ list.phone }}</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 合作伙伴 --> |
|||
<a name="partner" id="partner" class="place"></a> |
|||
<div class="partner-box text-center"> |
|||
<div class="title w-1400"><img src="~assets/about/title2.jpg" /></div> |
|||
<div class="w-1200"> |
|||
<div class="partner-flex"> |
|||
<div class="partner-item" v-for="(item, index) in lists" :key="index"> |
|||
<div class="partner-item-img"> |
|||
<img :src="item.logoUrl" /> |
|||
</div> |
|||
<div class="partner-name">{{ item.name }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 加入我们 --> |
|||
<a name="contact" id="contact" class="place"></a> |
|||
<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"> |
|||
<rich-text :title="title" /> |
|||
<contact /> |
|||
</div> |
|||
</div> |
|||
</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'; |
|||
import RichText from 'components/Introduce/RichText.vue'; |
|||
|
|||
export default { |
|||
name: 'About', |
|||
components: { Contact, Model, RichText }, |
|||
|
|||
data() { |
|||
return { |
|||
time: 10000, |
|||
lists: [], |
|||
activeNum: -1, |
|||
contents: [ |
|||
{ |
|||
id: 1, |
|||
title: '行政事业部', |
|||
name: '武晟君', |
|||
phone: '19935658780', |
|||
con: '负责行政办公、人力资源、财税管理、后勤保障和公共关系等工作，对外组织开展提供财税社保和人力资源服务。', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
title: '创新事业部', |
|||
name: '冯帅', |
|||
phone: '19935658759', |
|||
con: |
|||
'负责创新平台基地建设及运营，搭建专业化科技资源开放共享服务平台和技术转移转化服务平台，组织开展研发设计、成果转化、检验检测、咨询评估、技术培训、技术标准等一站式技术创新服务。', |
|||
}, |
|||
{ |
|||
id: 3, |
|||
title: '孵化事业部', |
|||
name: '乔晓阳', |
|||
phone: '18635939333', |
|||
con: '负责创业孵化平台的建设与运营管理，面向线上线下入孵企业，组织开展空间基础服务及线上线下创业孵化辅导等孵化服务。', |
|||
}, |
|||
{ |
|||
id: 4, |
|||
title: '产业事业部', |
|||
name: '乔晓阳', |
|||
phone: '18635939333', |
|||
con: '负责产业服务平台的建设与运营发展，组织开展产业推广、品牌创建、投融资及联盟建设等产业服务。', |
|||
}, |
|||
], |
|||
title: '联系我们', |
|||
}; |
|||
}, |
|||
|
|||
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]); |
|||
} |
|||
} |
|||
|
|||
arr_len.forEach(list => { |
|||
this.lists.push(list); |
|||
}); |
|||
|
|||
// 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; |
|||
} |
|||
|
|||
.w-1200 { |
|||
width: 70%; |
|||
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: 80px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.about-font { |
|||
color: white; |
|||
font-size: 20px; |
|||
line-height: 40px; |
|||
text-align: left; |
|||
text-indent: 2em; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.organize-box { |
|||
padding: 30px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 50px; |
|||
text-align: left; |
|||
} |
|||
|
|||
ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
li { |
|||
list-style: none; |
|||
background: rgba(19, 172, 196, 0.8); |
|||
width: 49%; |
|||
margin-right: 2%; |
|||
padding: 26px 26px 50px; |
|||
margin-bottom: 30px; |
|||
text-align: left; |
|||
position: relative; |
|||
color: #fff; |
|||
|
|||
.organize-title { |
|||
font-weight: bold; |
|||
font-size: 24px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.organize-con { |
|||
// line-height: 30px; |
|||
} |
|||
|
|||
.organize-phone { |
|||
position: absolute; |
|||
bottom: 16px; |
|||
right: 46px; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
li:nth-child(even) { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.partner-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 30px; |
|||
text-align: left; |
|||
} |
|||
} |
|||
|
|||
.contact-box { |
|||
padding: 60px 0; |
|||
|
|||
.title { |
|||
margin-bottom: 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
.place { |
|||
display: inline-block; |
|||
position: relative; |
|||
top: -100px; |
|||
} |
|||
</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
@ -0,0 +1,339 @@ |
|||
<template> |
|||
<div> |
|||
<h-nav /> |
|||
<div class="inner my-1"> |
|||
<bread-crumb :arr="arr" /> |
|||
</div> |
|||
<div class="top-box"> |
|||
<banner :show-page="49" /> |
|||
<settled-model :type-num="1" class="add-mol" ref="childModel" style="height: 32px" /> |
|||
<information-model :place-type="placeType" class="set-mol" /> |
|||
|
|||
<!-- <div class="top-title">实体众创空间</div> |
|||
<div class="top-content"> |
|||
山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”， |
|||
致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、 |
|||
线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统， |
|||
构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理 |
|||
念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放 |
|||
式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。 |
|||
</div>--> |
|||
</div> |
|||
<!-- 孵化场所 --> |
|||
<div @click="$router.push('')" class="center-box c-box pointer"> |
|||
<div class="center-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">孵化场所</div> |
|||
</div> |
|||
<div class="center-content d-flex flex-nowrap"> |
|||
孵化场所分为运营办公区、公共空间区、独立空间区和开放办公区。公共空间区包括路演厅 |
|||
（项目路演、知识培训、产品展示等多项功能）、会议室、洽谈室、第三空间（创业咖啡）。 |
|||
开放空间区按功能食品、生物医药、数字健康领域进行分区设置。 |
|||
</div> |
|||
</div> |
|||
<!-- 公共实验室 --> |
|||
<div @click="$router.push('')" class="center-box pointer"> |
|||
<div class="center-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">公共实验室</div> |
|||
</div> |
|||
<div class="center-content d-flex flex-column"> |
|||
<span> |
|||
公共实验室位于太原市师范街50号山西省生物研究院有限公司，总面积1320平方米。 |
|||
建有“医药生物技术山西省重点实验室”、“山西省发酵工程中试基地”及“山西省乳品 |
|||
发酵中试基地”等省级科技创新平台；具有检验检测机构资质认定证书（CMA）；实验室 |
|||
拥有20万以上仪器设备26台套，包括AKTA蛋白纯化系统、多功能酶标仪、原子吸收光谱仪、 |
|||
液相色谱仪、万级无菌工作间、P2实验室等多种高端、大型实验仪器设备；可提供生物医药、 |
|||
食品检测、食用菌、肠道微生物等方面的科学实验、检验检测、小试中试等技术服务与科研成果转化。 |
|||
</span> |
|||
<img |
|||
class="center-img" |
|||
src="https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210120/eb472126971a47438a3227df967ed2cb.png" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<!-- 中试基地 --> |
|||
<div @click="$router.push('')" class="center-box c-box pointer"> |
|||
<div class="center-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">中试基地</div> |
|||
</div> |
|||
<div class="center-content d-flex flex-column"> |
|||
<div>发酵工程中试基地位于山西维尔乳制品有限公司，基地具有发酵乳制品等生产加工条件，可提供微生物发酵实验及相关中试。</div> |
|||
<div>超高压食品加工中试基地位于太原市小店区正阳街43号的山西力德福科技有限公司。基地具有非热杀菌保鲜生产线、超高压设备制造生产线及中试车间，可提供超高压加工实验及相关中试和产业化服务。</div> |
|||
<div> |
|||
干果精深加工中试基地位于吕梁的交城天娇红农业科技有限公司 |
|||
，拥有300余万元的先进分析检测仪器设备及免洗干枣生产车间、浓缩枣汁生产车间等生产加工条件，可提供相关中试研究。 |
|||
</div> |
|||
<img |
|||
class="center-img" |
|||
src="https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210120/d80b7f22aabc4c7194324b0f93793a41.png" |
|||
/> |
|||
</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"> |
|||
<div class="join-us-box"> |
|||
<img class="fill-width" src="~assets/join-us.png" /> |
|||
<div class="material-box d-flex flex-row justify-center"> |
|||
<a-tooltip placement="top"> |
|||
<template slot="title"> |
|||
<div> |
|||
<p>资料：</p> |
|||
<p>1.入孵申请表</p> |
|||
<p>2.营业执照复印件（尚未注册的无须提供，未注册提供注册信息登记表）</p> |
|||
<p>3.法定代表或授权代表身份证复印件</p> |
|||
<p>4.主导产品或技术简介</p> |
|||
</div> |
|||
</template> |
|||
<div class="material"></div> |
|||
</a-tooltip> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<add-model :value="2" class="center-btn" style="height: 32px" /> |
|||
</div>--> |
|||
<!-- 入驻企业名录 --> |
|||
<div class="center-box" style="margin-bottom: 15px"> |
|||
<div class="center-title" style="top: 105px;"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">入驻企业名录</div> |
|||
</div> |
|||
<div class="center-content"> |
|||
<settled-enterprise :lists="lists" @searchEnt="searchEnt" /> |
|||
<!-- <div :key="index" class="ent-box" v-for="(item, index) in lists"> |
|||
<p class="ent-index">{{ index + 1 }}</p> |
|||
<span class="ent-name" style="margin-left: 50px">{{ item.company }}</span> |
|||
<span class="ent-mainBusiness" style="margin-left: 50px">{{ item.mainBusiness }}</span> |
|||
</div>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HNav from '../../components/HNav.vue'; |
|||
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
|||
// import AddModel from './../../components/AddModel.vue'; |
|||
import SettledModel from 'components/Introduce/SettledModel.vue'; |
|||
import InformationModel from 'components/Introduce/InformationModel.vue'; |
|||
import Banner from 'components/Banner/Banner.vue'; |
|||
import SettledEnterprise from 'components/SettledEnterprise/SettledEnterprise.vue'; |
|||
import { searchEnt } from 'config/api'; |
|||
|
|||
export default { |
|||
name: 'EntitySpace', |
|||
components: { HNav, BreadCrumb, SettledModel, Banner, SettledEnterprise, InformationModel }, |
|||
data() { |
|||
return { |
|||
title: '实体众创空间', |
|||
arr: [ |
|||
{ name: '创业社区', url: '/IncubationPlatform/MakerSpace' }, |
|||
{ name: '众创空间', url: '/IncubationPlatform/MakerSpace' }, |
|||
{ name: '实体众创空间', url: '' }, |
|||
], |
|||
list: [], |
|||
pageSize: 18, |
|||
current: 1, |
|||
lists: [], |
|||
placeType: 1, |
|||
}; |
|||
}, |
|||
|
|||
beforeRouteEnter(to, from, next) { |
|||
if (from.path === '/login' || from.path === '/register') { |
|||
return next(vm => { |
|||
vm.$refs.childModel.showModal(); |
|||
}); |
|||
} |
|||
next(); |
|||
}, |
|||
|
|||
created() { |
|||
console.log(this.$router); |
|||
this.searchEnt(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 改变单当前页数 |
|||
onShowSizeChange(current, size) { |
|||
this.current = current; |
|||
}, |
|||
async searchEnt(business) { |
|||
try { |
|||
const params = { param: { placeType: 1, company: business ? business : '' } }; |
|||
const res = await searchEnt(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.lists = data; |
|||
} else { |
|||
this.$message.error('查询失败'); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error('查询失败'); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.inner { |
|||
margin: 10px auto 15px; |
|||
} |
|||
|
|||
.center-btn { |
|||
position: absolute; |
|||
left: 26.2%; |
|||
bottom: 100px; |
|||
} |
|||
|
|||
.pagination { |
|||
float: right; |
|||
} |
|||
|
|||
.c-box { |
|||
background: none !important; |
|||
} |
|||
|
|||
.big-btn { |
|||
width: 213px; |
|||
height: 166px; |
|||
background: #13ACC4; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.big-con { |
|||
width: 96px; |
|||
height: 31px; |
|||
font-size: 24px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
line-height: 31px; |
|||
color: #FFFFFF; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.margin-0 { |
|||
margin-right: 0 !important; |
|||
} |
|||
|
|||
.ent-box { |
|||
width: 100%; |
|||
margin-right: 11%; |
|||
position: relative; |
|||
height: 56px; |
|||
line-height: 56px; |
|||
padding: 0 14px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
|||
opacity: 1; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.ent-index { |
|||
width: 28px; |
|||
position: absolute; |
|||
top: 14px; |
|||
line-height: 28px; |
|||
text-align: center; |
|||
font-size: 20px; |
|||
font-family: Segoe UI; |
|||
color: #FFFFFF; |
|||
height: 28px; |
|||
border-radius: 50%; |
|||
background: #13ACC4; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.ent-name { |
|||
position: absolute; |
|||
left: 0; |
|||
width: 50%; |
|||
height: 24px; |
|||
top: 50%; |
|||
margin-top: -12px; |
|||
font-size: 22px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
line-height: 24px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
opacity: 1; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.ent-mainBusiness { |
|||
position: absolute; |
|||
left: 60%; |
|||
width: 30%; |
|||
height: 24px; |
|||
top: 50%; |
|||
margin-top: -12px; |
|||
font-size: 22px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
line-height: 24px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
opacity: 1; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.reg-box { |
|||
position: absolute; |
|||
left: 26.2%; |
|||
bottom: 100px; |
|||
width: 64.8%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.join-us-box { |
|||
width: 100%; |
|||
position: relative; |
|||
|
|||
.material-box { |
|||
width: 100%; |
|||
height: 88px; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
|
|||
.material { |
|||
width: 10%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.add-mol { |
|||
position: absolute; |
|||
bottom: 7%; |
|||
left: 25%; |
|||
} |
|||
|
|||
.set-mol { |
|||
position: absolute; |
|||
bottom: 7%; |
|||
left: 33%; |
|||
} |
|||
|
|||
@media only screen and (max-width: 1500px) { |
|||
.set-mol { |
|||
left: 35%; |
|||
} |
|||
} |
|||
|
|||
@media only screen and (max-width: 950px) { |
|||
.set-mol { |
|||
left: 40%; |
|||
} |
|||
} |
|||
|
|||
.center-img { |
|||
width: 79%; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue