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