16 changed files with 884 additions and 341 deletions
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<a-carousel arrows dots-class="slick-dots slick-thumb"> |
|||
<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> |
|||
<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, |
|||
}; |
|||
}, |
|||
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: 517px; |
|||
margin: auto; |
|||
position: relative; |
|||
} |
|||
|
|||
.mask .con{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
/* background: rgba(0,0,0,.5); */ |
|||
z-index: 9; |
|||
} |
|||
</style> |
|||
@ -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> |
|||
Loading…
Reference in new issue