20 changed files with 18814 additions and 510 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 542 KiB |
|
After Width: | Height: | Size: 505 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
@ -0,0 +1,259 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,770 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="nav-box d-flex"> |
||||
|
<div :class="activeNum === 0 ? 'nav-box-active' : ''" @click="changeIndex(0)"><a href="#mao1">众创空间</a></div> |
||||
|
<div :class="activeNum === 2 ? 'nav-box-active' : ''" @click="changeIndex(2)"><a href="#mao3">创业服务</a></div> |
||||
|
<div :class="activeNum === 3 ? 'nav-box-active' : ''" @click="changeIndex(3)"><a href="#mao4">合作伙伴</a></div> |
||||
|
</div> |
||||
|
|
||||
|
<a name="mao1"> |
||||
|
<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"> |
||||
|
分为线下实体众创空间与线上虚拟众创空间，重点面向功能食品、生物医药和大健康产业领域科技型中小微企业、 |
||||
|
创客和创新创业团队开展创业孵化，培育高新技术企业，促进科技成果转化和产业集聚发展。 |
||||
|
目前空间已引入科创咨询专业服务机构，并与多家第三方专业机构建立战略合作， |
||||
|
聘请创业导师30余名，服务领域涵盖专业技术、企业管理、科创咨询、财务税务、法务咨询等，可随时为入孵企业提供针对性、一对一创业辅导服务 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<div class="intro-box bg-gray text-center"> |
||||
|
<div class="intro-con w-1500"> |
||||
|
<div @click="jump('/IncubationPlatform/MakerSpace/EntitySpace')"> |
||||
|
<p class="title">实体空间</p> |
||||
|
<div class="split"></div> |
||||
|
<div class="con"> |
||||
|
<p>实体空间由孵化场所、公共实验室、中试基地部分组成。</p> |
||||
|
<p> |
||||
|
孵化场所分为运营办公区、公共空间区、独立空间区和开放办公区。公共空间区包括路演厅(项目路演、知识培训、产品展示等多项功能)、会议室、洽谈室、第三空间(创业咖啡)。开放空间区按功能食品、生物医药、数字健康领域进行分区设置。 |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div @click="jump('/IncubationPlatform/MakerSpace/VirtualSpace')"> |
||||
|
<p class="title">虚拟空间</p> |
||||
|
<div class="split"></div> |
||||
|
<div class="con"> |
||||
|
<p> |
||||
|
虚拟众创空间主要面向非入驻实体空间从事功能食品、生物医药和大健康产业相关研发服务和生产的企业。 |
||||
|
虚拟众创空间依托绿谷数字化平台进行建设，入驻企业可享受实体众创空间的各种创新创业服务，参加相关创新创业活动。 |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="intro-bg"> |
||||
|
<img src="~assets/newPlatform/bg.jpg" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 创新服务 --> |
||||
|
<a name="mao3"> |
||||
|
<div class="service-box bg-gray text-center"> |
||||
|
<div class="title w-1500"><img src="~assets/about/title4.jpg" /></div> |
||||
|
<div class="service-flow"> |
||||
|
<div class="flow-path" style="padding: 15px 9%"> |
||||
|
<div class="flow-title" style="top: 30%">服务流程</div> |
||||
|
<div class="flow-content"> |
||||
|
<img src="~assets/image.png" style="width: 100%" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="w-1500"> |
||||
|
<div class="inner d-flex flex-wrap" style="margin: 20px auto"> |
||||
|
<div |
||||
|
:class="(index + 1) % 4 === 0 ? 'margin-0' : ''" |
||||
|
:key="index" |
||||
|
class="item-box pointer d-flex flex-column" |
||||
|
style="position: relative" |
||||
|
v-for="(item, index) in serviceList" |
||||
|
> |
||||
|
<img |
||||
|
:src="item.picUrl" |
||||
|
:title="item.intro" |
||||
|
@click="showModal(item.id)" |
||||
|
style="height: 220px; width: 100%; border: 1px solid #ccc" |
||||
|
/> |
||||
|
|
||||
|
<p @click="showModal(item.id)" class="font-24 my-2 text-center">{{ item.name }}</p> |
||||
|
|
||||
|
<div class="font-16 textColor item-intro mb-2" v-if="item.intro.length > 45"> |
||||
|
{{ item.intro.slice(0, 45) }} |
||||
|
<a-button @click="showIntro(index)" class="font-16 baseColor" style="height: 20px; float: right; padding: 0px" type="link"> |
||||
|
more |
||||
|
<a-icon style="font-size: 12px" type="right" /> |
||||
|
</a-button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="font-16 textColor item-intro" v-if="item.intro.length <= 45"> |
||||
|
<p>{{ item.intro }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<a name="mao4"> |
||||
|
<div class="partner-box text-center"> |
||||
|
<div class="title w-1500"> |
||||
|
<img src="~assets/about/title2.jpg" /> |
||||
|
|
||||
|
<div class="partner-type"> |
||||
|
<div |
||||
|
class="partner-type-item" |
||||
|
:class="currType === index ? 'active-item' : ''" |
||||
|
v-for="(item, index) in listType" |
||||
|
:key="index" |
||||
|
@click="changeType(index)" |
||||
|
> |
||||
|
{{ item }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="w-1500"> |
||||
|
<div class="partner-flex" v-show="currType === index" 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> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<div class="bg-gray" style="height: 200px"></div> |
||||
|
|
||||
|
<a-modal :footer="null" v-model="showModelIntro"> |
||||
|
<p class="mt-3">{{ modelIntro }}</p> |
||||
|
</a-modal> |
||||
|
|
||||
|
<div class="inner"> |
||||
|
<a-pagination |
||||
|
:current="current" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@change="onShowSizeChange" |
||||
|
class="pagination" |
||||
|
show-less-items |
||||
|
show-quick-jumper |
||||
|
v-show="total > 8" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<a-modal :confirm-loading="confirmLoading" :visible="visible" @cancel="handleCancel" @ok="handleOk" title="技术需求" width="50%"> |
||||
|
<a-form :form="form"> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称"> |
||||
|
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required> |
||||
|
<a-input placeholder="请输入联系人..." v-model.trim="platform.manName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required> |
||||
|
<a-input @change="changePhone" placeholder="请输入联系电话.." type="tel" v-decorator="['tel', { rules: phoneRules }]" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="图片验证码" type="number" v-model="codeNum" /> |
||||
|
<img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" /> |
||||
|
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button> |
||||
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> --> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="请输入验证码" type="number" v-model="platform.code" /> |
||||
|
<a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button> |
||||
|
<a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else |
||||
|
>获取验证码</a-button |
||||
|
> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="需求描述"> |
||||
|
<a-textarea placeholder="请输入需求描述..." style="height: 120px" v-model.trim="platform.describe" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="上传附件" |
||||
|
v-show="typeData.type === 0" |
||||
|
> |
||||
|
<a-upload |
||||
|
:action="action" |
||||
|
:before-upload="beforeUpload" |
||||
|
:default-file-list="fileList" |
||||
|
@change="fileChange" |
||||
|
list-type="picture" |
||||
|
name="files" |
||||
|
> |
||||
|
<a-button> <a-icon type="upload" />点击上传附件 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations, mapActions } from 'vuex'; |
||||
|
import { selService, serviceApply, upload } from 'config/api'; |
||||
|
|
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
name: 'IncubationPlatform', |
||||
|
data() { |
||||
|
return { |
||||
|
time: 10000, |
||||
|
activeNum: 0, |
||||
|
listType: [], |
||||
|
lists: [], |
||||
|
currType: 0, |
||||
|
serviceList: [], |
||||
|
showModelIntro: false, |
||||
|
modelIntro: '', |
||||
|
current: 1, |
||||
|
pageSize: 8, |
||||
|
total: 0, |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
action: upload, |
||||
|
fileList: [], |
||||
|
visible: false, |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
platform: { |
||||
|
companyName: '', // 公司名称 |
||||
|
manName: '', // 联系人 |
||||
|
tel: '', // 联系电话 |
||||
|
describe: '', // 项目描述 |
||||
|
code: '', // 验证码 |
||||
|
files: [], // 附件Id |
||||
|
isTel: false, |
||||
|
}, |
||||
|
codeRules: [ |
||||
|
{ required: true, message: '请输入验证码' }, |
||||
|
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
||||
|
], |
||||
|
codeNum: '', |
||||
|
showInterval: false, |
||||
|
codeTimer: null, |
||||
|
interval: 120, // 验证码有效时间倒计时 |
||||
|
phoneRules: [ |
||||
|
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
||||
|
], |
||||
|
showList: ['查看全部', '查看全部', '查看全部', '查看全部', '查看全部', '查看全部', '查看全部', '查看全部'], |
||||
|
typeData: { |
||||
|
type: 0, |
||||
|
id: '', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapState('home', ['partners']), |
||||
|
...mapState('user', ['picCode']), |
||||
|
}, |
||||
|
|
||||
|
async created() { |
||||
|
this.getService(); |
||||
|
this.sendPicCode(); |
||||
|
await this.getUserSer(); |
||||
|
if (this.userSer) { |
||||
|
if (this.userSer.name) { |
||||
|
this.platform.manName = this.userSer.name; |
||||
|
} |
||||
|
if (this.userSer.phone) { |
||||
|
this.platform.tel = this.userSer.phone; |
||||
|
} |
||||
|
if (this.userSer.companyName) { |
||||
|
this.platform.companyName = this.userSer.companyName; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.setPartners([]); |
||||
|
const params = { |
||||
|
param: { |
||||
|
pageNum: 1, |
||||
|
type: 1, |
||||
|
typeOfPlatform: 2, |
||||
|
}, |
||||
|
}; |
||||
|
await this.getFrontSearchCompany(params); |
||||
|
|
||||
|
this.lists = []; |
||||
|
this.listType = []; |
||||
|
this.partners.forEach(item => { |
||||
|
this.lists.push(item.backendSearchList); |
||||
|
|
||||
|
if (item.typeOfTech === 0 && this.listType.indexOf('高校') === -1) { |
||||
|
this.listType.push('高校'); |
||||
|
} |
||||
|
|
||||
|
if (item.typeOfTech === 1 && this.listType.indexOf('院所') === -1) { |
||||
|
this.listType.push('院所'); |
||||
|
} |
||||
|
|
||||
|
if (item.typeOfTech === 2 && this.listType.indexOf('企业') === -1) { |
||||
|
this.listType.push('企业'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// ...mapMutations('home', ['setServiceArr']), |
||||
|
...mapMutations('home', ['setPartners']), |
||||
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
||||
|
...mapActions('home', ['getFrontSearchCompany', 'getUserSer']), |
||||
|
|
||||
|
// 改变单当前页数 |
||||
|
onShowSizeChange(current, size) { |
||||
|
this.current = current; |
||||
|
}, |
||||
|
|
||||
|
showIntro(index) { |
||||
|
this.showModelIntro = true; |
||||
|
this.modelIntro = this.serviceList[index].intro; |
||||
|
}, |
||||
|
|
||||
|
// 获取服务列表 |
||||
|
async getService() { |
||||
|
try { |
||||
|
const params = { param: { serviceType: 2 } }; |
||||
|
const res = await selService(params); |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.serviceList = data; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
// console.log(data); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
jump(url) { |
||||
|
this.$router.push(url); |
||||
|
}, |
||||
|
|
||||
|
// 显示表单输入框 |
||||
|
showModal(id) { |
||||
|
this.typeData.id = id; |
||||
|
this.visible = true; |
||||
|
}, |
||||
|
|
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
|
||||
|
// 验证电话 |
||||
|
changePhone(e) { |
||||
|
this.platform.tel = e.target.value; |
||||
|
this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel); |
||||
|
}, |
||||
|
|
||||
|
// 点击确定 |
||||
|
handleOk() { |
||||
|
if (!this.platform.manName) { |
||||
|
this.$message.error('请输入联系人'); |
||||
|
} else if (!this.platform.tel) { |
||||
|
this.$message.error('请输入联系电话'); |
||||
|
} else if (!this.platform.code) { |
||||
|
this.$message.error('请输入验证码'); |
||||
|
} else { |
||||
|
if (this.platform.isTel) { |
||||
|
for (var i = 0; i < this.fileList.length; i++) { |
||||
|
this.platform.files = this.platform.files.concat(this.fileList[i].response.data[0].id); |
||||
|
} |
||||
|
this.subMitAdd(); |
||||
|
// console.log(this.platform.files); |
||||
|
} else { |
||||
|
this.$message.error('请输入正确的联系电话'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加入接口 |
||||
|
async subMitAdd() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
code: this.platform.code, |
||||
|
companyName: this.platform.companyName, |
||||
|
contactName: this.platform.manName, |
||||
|
contactPhone: this.platform.tel, |
||||
|
description: this.platform.describe, |
||||
|
filesId: this.platform.files, |
||||
|
serviceId: this.typeData.id, |
||||
|
type: this.typeData.type, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await serviceApply(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('申请成功'); |
||||
|
this.visible = false; |
||||
|
this.confirmLoading = false; |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
|
this.platform.isTel = false; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取验证码 |
||||
|
async getCode() { |
||||
|
// console.log(111); |
||||
|
try { |
||||
|
const params = { |
||||
|
phone: this.platform.tel, |
||||
|
verificationCodeId: this.picCode.verificationCodeId, |
||||
|
verificationCodeValue: this.codeNum, |
||||
|
}; |
||||
|
await this.sendCode(params); |
||||
|
this.getCodeInterval(); |
||||
|
} catch (error) { |
||||
|
// throw new Error(`SignIn.vue method getCode: ${error}`); |
||||
|
// console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 验证码倒计时 |
||||
|
getCodeInterval() { |
||||
|
this.showInterval = true; |
||||
|
this.codeTimer = setInterval(() => { |
||||
|
if (this.interval === 0) { |
||||
|
clearInterval(this.codeTimer); |
||||
|
this.codeTimer = null; |
||||
|
this.showInterval = false; |
||||
|
this.interval = 120; |
||||
|
return; |
||||
|
} |
||||
|
this.interval = this.interval - 1; |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 刷新验证码 |
||||
|
changePicCode() { |
||||
|
this.sendPicCode(); |
||||
|
}, |
||||
|
|
||||
|
beforeUpload(file) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const isLt5M = file.size / 1024 / 1024 < 5; |
||||
|
if (!isLt5M) { |
||||
|
this.$message.warning('上传附件大小不能超过5m！'); |
||||
|
return reject(false); |
||||
|
} |
||||
|
return resolve(true); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
fileChange(info) { |
||||
|
this.fileList = info.fileList; |
||||
|
}, |
||||
|
|
||||
|
changeIndex(i) { |
||||
|
this.activeNum = i; |
||||
|
}, |
||||
|
|
||||
|
changeType(i) { |
||||
|
this.currType = i; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="stylus" scoped> |
||||
|
a { |
||||
|
color: unset; |
||||
|
} |
||||
|
|
||||
|
.wrap { |
||||
|
width: 1260px; |
||||
|
min-height: 1037px; |
||||
|
margin: 80px auto 28px auto; |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.bg-gray { |
||||
|
background-color: #F5F5F5; |
||||
|
} |
||||
|
|
||||
|
.w-1500 { |
||||
|
display: inline-block; |
||||
|
width: 1500px; |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.intro-box { |
||||
|
position: relative; |
||||
|
padding: 95px 0 50px; |
||||
|
width: 100%; |
||||
|
height: 700px; |
||||
|
|
||||
|
.intro-bg { |
||||
|
position: absolute; |
||||
|
bottom: 50px; |
||||
|
} |
||||
|
|
||||
|
.intro-con { |
||||
|
position: relative; |
||||
|
z-index: 9; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
> div { |
||||
|
padding: 80px 60px 0; |
||||
|
width: 700px; |
||||
|
height: 400px; |
||||
|
background-color: rgba(19, 172, 196, 0.8); |
||||
|
text-align: left; |
||||
|
color: white; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 32px; |
||||
|
line-height: 1; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.split { |
||||
|
margin: 20px 0; |
||||
|
display: inline-block; |
||||
|
width: 74px; |
||||
|
height: 1px; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.con p { |
||||
|
font-size: 16px; |
||||
|
line-height: 40px; |
||||
|
margin: 0; |
||||
|
letter-spacing: 1px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.service-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.service-flow { |
||||
|
margin: 50px 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.partner-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 30px; |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.partner-type { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.partner-type-item { |
||||
|
margin-left: 40px; |
||||
|
width: 112px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
color: #717879; |
||||
|
background-color: #EBF8FA; |
||||
|
} |
||||
|
|
||||
|
.partner-type-item.active-item { |
||||
|
color: white; |
||||
|
background-color: #13ACC4; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.partner-flex { |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.partner-item { |
||||
|
margin: 20px 0; |
||||
|
padding: 10px 0; |
||||
|
margin-right: 40px; |
||||
|
width: calc(((100% - 160px) / 5)); |
||||
|
text-align: center; |
||||
|
border: 1px solid #D9D9D9; |
||||
|
border-radius: 5px; |
||||
|
|
||||
|
&:nth-child(5n) { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.partner-item-img { |
||||
|
margin-bottom: 15px; |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
text-align: center; |
||||
|
line-height: 80px; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
max-width: 100%; |
||||
|
max-height: 100%; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contact-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 50px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.inner { |
||||
|
width: 100%; |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
|
||||
|
.content-box { |
||||
|
padding: 0 !important; |
||||
|
width: 30%; |
||||
|
height: auto !important; |
||||
|
margin: 50px 0; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.con-title { |
||||
|
position: absolute; |
||||
|
bottom: 23px; |
||||
|
color: #ffffff; |
||||
|
font-size: 1.6rem; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
background-image: linear-gradient(rgba(#545454, 0), rgba(0, 0, 0, 0.6)); |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 1650px) { |
||||
|
.con-title { |
||||
|
font-size: 1.3rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.con-con { |
||||
|
background: white; |
||||
|
box-shadow: 0 0 6px #ccc; |
||||
|
height: 26%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.item-box { |
||||
|
position: relative; |
||||
|
width: 20.5%; |
||||
|
margin-right: 6%; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.margin-0 { |
||||
|
margin-right: 0 !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,664 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="nav-box d-flex"> |
||||
|
<div :class="activeNum === 0 ? 'nav-box-active' : ''" @click="changeIndex(0)"><a href="#mao1">产业创新联盟</a></div> |
||||
|
<div :class="activeNum === 2 ? 'nav-box-active' : ''" @click="changeIndex(2)"><a href="#mao3">产业服务</a></div> |
||||
|
<div :class="activeNum === 3 ? 'nav-box-active' : ''" @click="changeIndex(3)"><a href="#mao4">合作伙伴</a></div> |
||||
|
</div> |
||||
|
|
||||
|
<a name="mao1"> |
||||
|
<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="mao3"> |
||||
|
<div class="service-box bg-gray text-center"> |
||||
|
<div class="title w-1500"><img src="~assets/about/title5.jpg" /></div> |
||||
|
<div class="service-flow"> |
||||
|
<div class="flow-path" style="padding: 15px 9%"> |
||||
|
<div class="flow-title" style="top: 30%">服务流程</div> |
||||
|
<div class="flow-content"> |
||||
|
<img src="~assets/image.png" style="width: 100%" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="w-1500"> |
||||
|
<div class="inner d-flex flex-wrap" style="margin: 20px auto"> |
||||
|
<div :class="(index + 1) % 3 === 0 ? 'margin-0' : ''" :key="index" class="item-box mb-8" v-for="(item, index) in serviceList"> |
||||
|
<img :src="item.picUrl" @click="showModal(item.id)" style="height: 220px; width: 100%; border: 1px solid #ccc" /> |
||||
|
|
||||
|
<p @click="showModal(item.id)" class="font-24 my-4 text-center"> |
||||
|
<span>{{ item.name }}</span> |
||||
|
</p> |
||||
|
|
||||
|
<div class="font-16 textColor item-intro mb-2" v-if="item.intro.length > 45"> |
||||
|
{{ item.intro.slice(0, 45) }} |
||||
|
<a-button @click="showIntro(index)" class="font-16 baseColor" style="height: 20px; float: right; padding: 0px" type="link"> |
||||
|
more |
||||
|
<a-icon style="font-size: 12px" type="right" /> |
||||
|
</a-button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="font-16 textColor item-intro" v-if="item.intro.length <= 45"> |
||||
|
<p>{{ item.intro }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<a name="mao4"> |
||||
|
<div class="partner-box text-center"> |
||||
|
<div class="title w-1500"> |
||||
|
<img src="~assets/about/title2.jpg" /> |
||||
|
|
||||
|
<div class="partner-type"> |
||||
|
<div |
||||
|
class="partner-type-item" |
||||
|
:class="currType === index ? 'active-item' : ''" |
||||
|
v-for="(item, index) in listType" |
||||
|
:key="index" |
||||
|
@click="changeType(index)" |
||||
|
> |
||||
|
{{ item }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="w-1500"> |
||||
|
<div class="partner-flex" v-show="currType === index" 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> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<div class="bg-gray" style="height: 200px"></div> |
||||
|
|
||||
|
<a-modal :footer="null" v-model="showModelIntro"> |
||||
|
<p class="mt-3">{{ modelIntro }}</p> |
||||
|
</a-modal> |
||||
|
|
||||
|
<a-modal :confirm-loading="confirmLoading" :visible="visible" @cancel="handleCancel" @ok="handleOk" title="技术需求" width="50%"> |
||||
|
<a-form :form="form"> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称"> |
||||
|
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required> |
||||
|
<a-input placeholder="请输入联系人..." v-model.trim="platform.manName" /> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required> |
||||
|
<a-input @change="changePhone" placeholder="请输入联系电话.." type="tel" v-decorator="['tel', { rules: phoneRules }]" /> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="图片验证码" type="number" v-model="codeNum" /> |
||||
|
<img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" /> |
||||
|
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button> |
||||
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> --> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="请输入验证码" type="number" v-model="platform.code" /> |
||||
|
<a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button> |
||||
|
<a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else |
||||
|
>获取验证码</a-button |
||||
|
> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="需求描述"> |
||||
|
<a-textarea placeholder="请输入需求描述..." style="height: 120px" v-model.trim="platform.describe" /> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="上传附件" |
||||
|
v-show="typeData.type === 0" |
||||
|
> |
||||
|
<a-upload |
||||
|
:action="action" |
||||
|
:before-upload="beforeUpload" |
||||
|
:default-file-list="fileList" |
||||
|
@change="fileChange" |
||||
|
list-type="picture" |
||||
|
name="files" |
||||
|
> |
||||
|
<a-button> <a-icon type="upload" />点击上传附件 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations, mapActions } from 'vuex'; |
||||
|
import { selService, serviceApply, upload } from 'config/api'; |
||||
|
|
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
|
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Industry', |
||||
|
data() { |
||||
|
return { |
||||
|
time: 10000, |
||||
|
activeNum: 0, // 当前锚点下标 |
||||
|
listType: [], // 合作伙伴类型 |
||||
|
lists: [], // 合作伙伴列表 |
||||
|
currType: 0, // 当前点击的合作伙伴下标 |
||||
|
serviceList: [], // 服务列表 |
||||
|
showModelIntro: false, |
||||
|
modelIntro: '', |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
action: upload, |
||||
|
fileList: [], |
||||
|
visible: false, |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
platform: { |
||||
|
companyName: '', // 公司名称 |
||||
|
manName: '', // 联系人 |
||||
|
tel: '', // 联系电话 |
||||
|
describe: '', // 项目描述 |
||||
|
code: '', // 验证码 |
||||
|
files: [], // 附件Id |
||||
|
isTel: false, |
||||
|
}, |
||||
|
codeRules: [ |
||||
|
{ required: true, message: '请输入验证码' }, |
||||
|
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
||||
|
], |
||||
|
codeNum: '', |
||||
|
showInterval: false, |
||||
|
codeTimer: null, |
||||
|
interval: 120, // 验证码有效时间倒计时 |
||||
|
phoneRules: [ |
||||
|
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
||||
|
], |
||||
|
typeData: { |
||||
|
type: 0, |
||||
|
id: '', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapState('home', ['partners']), |
||||
|
...mapState('user', ['picCode']), |
||||
|
}, |
||||
|
|
||||
|
async created() { |
||||
|
this.getService(); |
||||
|
this.sendPicCode(); |
||||
|
await this.getUserSer(); |
||||
|
|
||||
|
if (this.userSer) { |
||||
|
if (this.userSer.name) { |
||||
|
this.platform.manName = this.userSer.name; |
||||
|
} |
||||
|
if (this.userSer.phone) { |
||||
|
this.platform.tel = this.userSer.phone; |
||||
|
} |
||||
|
if (this.userSer.companyName) { |
||||
|
this.platform.companyName = this.userSer.companyName; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.setPartners([]); |
||||
|
const params = { |
||||
|
param: { |
||||
|
pageNum: 1, |
||||
|
type: 1, |
||||
|
typeOfPlatform: 2, |
||||
|
}, |
||||
|
}; |
||||
|
await this.getFrontSearchCompany(params); |
||||
|
|
||||
|
this.lists = []; |
||||
|
this.listType = []; |
||||
|
this.partners.forEach(item => { |
||||
|
this.lists.push(item.backendSearchList); |
||||
|
|
||||
|
if (item.typeOfTech === 0 && this.listType.indexOf('高校') === -1) { |
||||
|
this.listType.push('高校'); |
||||
|
} |
||||
|
|
||||
|
if (item.typeOfTech === 1 && this.listType.indexOf('院所') === -1) { |
||||
|
this.listType.push('院所'); |
||||
|
} |
||||
|
|
||||
|
if (item.typeOfTech === 2 && this.listType.indexOf('企业') === -1) { |
||||
|
this.listType.push('企业'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// ...mapMutations('home', ['setServiceArr']), |
||||
|
...mapMutations('home', ['setPartners']), |
||||
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
||||
|
...mapActions('home', ['getUserSer', 'getFrontSearchCompany']), |
||||
|
|
||||
|
showIntro(index) { |
||||
|
this.showModelIntro = true; |
||||
|
this.modelIntro = this.serviceList[index].intro; |
||||
|
}, |
||||
|
|
||||
|
// 获取服务列表 |
||||
|
async getService() { |
||||
|
try { |
||||
|
const params = { param: { serviceType: 3 } }; |
||||
|
const res = await selService(params); |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.serviceList = data; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
// console.log(data); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
jump(url) { |
||||
|
this.$router.push(url); |
||||
|
}, |
||||
|
|
||||
|
// 显示表单输入框 |
||||
|
showModal(id) { |
||||
|
this.typeData.id = id; |
||||
|
this.visible = true; |
||||
|
}, |
||||
|
|
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
|
||||
|
// 验证电话 |
||||
|
changePhone(e) { |
||||
|
this.platform.tel = e.target.value; |
||||
|
this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel); |
||||
|
}, |
||||
|
|
||||
|
// 点击确定 |
||||
|
handleOk() { |
||||
|
if (!this.platform.manName) { |
||||
|
this.$message.error('请输入联系人'); |
||||
|
} else if (!this.platform.tel) { |
||||
|
this.$message.error('请输入联系电话'); |
||||
|
} else if (!this.platform.code) { |
||||
|
this.$message.error('请输入验证码'); |
||||
|
} else { |
||||
|
if (this.platform.isTel) { |
||||
|
for (var i = 0; i < this.fileList.length; i++) { |
||||
|
this.platform.files = this.platform.files.concat(this.fileList[i].response.data[0].id); |
||||
|
} |
||||
|
this.subMitAdd(); |
||||
|
// console.log(this.platform.files); |
||||
|
} else { |
||||
|
this.$message.error('请输入正确的联系电话'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加入接口 |
||||
|
async subMitAdd() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
code: this.platform.code, |
||||
|
companyName: this.platform.companyName, |
||||
|
contactName: this.platform.manName, |
||||
|
contactPhone: this.platform.tel, |
||||
|
description: this.platform.describe, |
||||
|
filesId: this.platform.files, |
||||
|
serviceId: this.typeData.Id, |
||||
|
type: this.typeData.type, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await serviceApply(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('申请成功'); |
||||
|
this.visible = false; |
||||
|
this.confirmLoading = false; |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
|
this.platform.isTel = false; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取验证码 |
||||
|
async getCode() { |
||||
|
// console.log(111); |
||||
|
try { |
||||
|
const params = { |
||||
|
phone: this.platform.tel, |
||||
|
verificationCodeId: this.picCode.verificationCodeId, |
||||
|
verificationCodeValue: this.codeNum, |
||||
|
}; |
||||
|
await this.sendCode(params); |
||||
|
this.getCodeInterval(); |
||||
|
} catch (error) { |
||||
|
throw new Error(`Serve.vue method getCode: ${error}`); |
||||
|
// console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 验证码倒计时 |
||||
|
getCodeInterval() { |
||||
|
this.showInterval = true; |
||||
|
this.codeTimer = setInterval(() => { |
||||
|
if (this.interval === 0) { |
||||
|
clearInterval(this.codeTimer); |
||||
|
this.codeTimer = null; |
||||
|
this.showInterval = false; |
||||
|
this.interval = 120; |
||||
|
return; |
||||
|
} |
||||
|
this.interval = this.interval - 1; |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 刷新验证码 |
||||
|
changePicCode() { |
||||
|
this.sendPicCode(); |
||||
|
}, |
||||
|
|
||||
|
beforeUpload(file) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const isLt5M = file.size / 1024 / 1024 < 5; |
||||
|
if (!isLt5M) { |
||||
|
this.$message.warning('上传附件大小不能超过5m！'); |
||||
|
return reject(false); |
||||
|
} |
||||
|
return resolve(true); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
fileChange(info) { |
||||
|
this.fileList = info.fileList; |
||||
|
}, |
||||
|
|
||||
|
changeIndex(i) { |
||||
|
this.activeNum = i; |
||||
|
}, |
||||
|
|
||||
|
changeType(i) { |
||||
|
this.currType = i; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.wrap { |
||||
|
width: 1260px; |
||||
|
min-height: 1037px; |
||||
|
margin: 80px auto 28px auto; |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.bg-gray { |
||||
|
background-color: #F5F5F5; |
||||
|
} |
||||
|
|
||||
|
.w-1500 { |
||||
|
display: inline-block; |
||||
|
width: 1500px; |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.service-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.service-flow { |
||||
|
margin: 50px 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.partner-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 30px; |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.partner-type { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.partner-type-item { |
||||
|
margin-left: 40px; |
||||
|
width: 112px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
color: #717879; |
||||
|
background-color: #EBF8FA; |
||||
|
} |
||||
|
|
||||
|
.partner-type-item.active-item { |
||||
|
color: white; |
||||
|
background-color: #13ACC4; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.partner-flex { |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.partner-item { |
||||
|
margin: 20px 0; |
||||
|
padding: 10px 0; |
||||
|
margin-right: 40px; |
||||
|
width: calc(((100% - 160px) / 5)); |
||||
|
text-align: center; |
||||
|
border: 1px solid #D9D9D9; |
||||
|
border-radius: 5px; |
||||
|
|
||||
|
&:nth-child(5n) { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.partner-item-img { |
||||
|
margin-bottom: 15px; |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
text-align: center; |
||||
|
line-height: 80px; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
max-width: 100%; |
||||
|
max-height: 100%; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contact-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 50px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.inner { |
||||
|
width: 100%; |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
|
||||
|
.content-box { |
||||
|
padding: 0 !important; |
||||
|
width: 30%; |
||||
|
height: auto !important; |
||||
|
margin: 50px 0; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.con-title { |
||||
|
position: absolute; |
||||
|
bottom: 23px; |
||||
|
color: #ffffff; |
||||
|
font-size: 1.6rem; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
background-image: linear-gradient(rgba(#545454, 0), rgba(0, 0, 0, 0.6)); |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 1650px) { |
||||
|
.con-title { |
||||
|
font-size: 1.3rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.con-con { |
||||
|
background: white; |
||||
|
box-shadow: 0 0 6px #ccc; |
||||
|
height: 26%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.item-box { |
||||
|
position: relative; |
||||
|
width: 26%; |
||||
|
margin-right: 11%; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.margin-0 { |
||||
|
margin-right: 0 !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,494 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="nav-box d-flex"> |
||||
|
<div :class="activeNum === 0 ? 'nav-box-active' : ''" @click="changeIndex(0)"><a href="#mao1">研究院介绍</a></div> |
||||
|
<div :class="activeNum === 1 ? 'nav-box-active' : ''" @click="changeIndex(1)"><a href="#mao2">创新资源平台</a></div> |
||||
|
<div :class="activeNum === 2 ? 'nav-box-active' : ''" @click="changeIndex(2)"><a href="#mao3">创新服务</a></div> |
||||
|
<div :class="activeNum === 3 ? 'nav-box-active' : ''" @click="changeIndex(3)"><a href="#mao4">合作伙伴</a></div> |
||||
|
</div> |
||||
|
|
||||
|
<a name="mao1"> |
||||
|
<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"> |
||||
|
围绕功能食品、生物医药和数字健康产业领域，创新事业部搭建产学研用协同、学科交叉融合、资源开放共享的科技创新平台 |
||||
|
实现从科学到技术的转移转化，促进重大基础研究成果产业化，打造企业的技术创新中心，为科技型中小微企业发展提供全链条一体化科技创新服务， |
||||
|
增强以科技创新为核心的企业竞争力，推动企业高质量发展，发挥更加重要作用。 |
||||
|
<p>依托新型研发机构和技术创新中心，搭建科技开放共享平台、技术转移转化平台、科技人才团队平台。</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<!-- 创新资源平台 --> |
||||
|
<a name="mao2"> |
||||
|
<div class="organize-box bg-gray text-center"> |
||||
|
<div class="title w-1500"><img src="~assets/newPlatform/newPlatform1.jpg" /></div> |
||||
|
|
||||
|
<div class="w-1500"> |
||||
|
<div class="inner d-flex flex-nowrap justify-space-between"> |
||||
|
<div :key="index" @click="jump(item.url)" class="content-box" v-for="(item, index) in list"> |
||||
|
<img :src="item.imgUrl" /> |
||||
|
<div class="con-title">{{ item.title }}</div> |
||||
|
<div class="con-con">{{ item.content }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<!-- 创新服务 --> |
||||
|
<a name="mao3"> |
||||
|
<div class="service-box bg-gray text-center"> |
||||
|
<div class="title w-1500"><img src="~assets/newPlatform/newPlatform2.jpg" /></div> |
||||
|
<div class="service-flow"> |
||||
|
<div class="flow-path" style="padding: 15px 9%"> |
||||
|
<div class="flow-title" style="top: 30%">服务流程</div> |
||||
|
<div class="flow-content"> |
||||
|
<img src="~assets/image.png" style="width: 100%" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="w-1500"> |
||||
|
<div class="inner d-flex flex-wrap" style="margin: 20px auto"> |
||||
|
<div |
||||
|
:class="(index + 1) % 4 === 0 ? 'margin-0' : ''" |
||||
|
:key="index" |
||||
|
class="item-box mb-8 pointer" |
||||
|
v-for="(item, index) in serviceList" |
||||
|
> |
||||
|
<img :src="item.picUrl" @click="showModal(item.id)" style="height: 220px; width: 100%; border: 1px solid #ccc" /> |
||||
|
<p class="font-24 my-4" style="text-align: center"> |
||||
|
<span>{{ item.name }}</span> |
||||
|
</p> |
||||
|
|
||||
|
<div class="font-16 textColor item-intro mb-2" v-if="item.intro === null ? false : item.intro.length > 45"> |
||||
|
{{ item.intro.slice(0, 45) }} |
||||
|
<a-button @click="showIntro(index)" class="font-16 baseColor" style="height: 20px; float: right; padding: 0px" type="link"> |
||||
|
more |
||||
|
<a-icon style="font-size: 12px" type="right" /> |
||||
|
</a-button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="font-16 textColor item-intro" v-if="item.intro === null ? false : item.intro.length <= 45"> |
||||
|
<p>{{ item.intro }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<!-- 合作伙伴 --> |
||||
|
<a name="mao4"> |
||||
|
<div class="partner-box text-center"> |
||||
|
<div class="title w-1500"> |
||||
|
<img src="~assets/about/title2.jpg" /> |
||||
|
|
||||
|
<div class="partner-type"> |
||||
|
<div |
||||
|
class="partner-type-item" |
||||
|
:class="currType === index ? 'active-item' : ''" |
||||
|
v-for="(item, index) in listType" |
||||
|
:key="index" |
||||
|
@click="changeType(index)" |
||||
|
> |
||||
|
{{ item }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="w-1500"> |
||||
|
<div class="partner-flex" v-show="currType === index" 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> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<div class="bg-gray" style="height: 200px"></div> |
||||
|
|
||||
|
<service-demand :model-intro="modelIntro" ref="child" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations, mapActions } from 'vuex'; |
||||
|
import { selService } from 'config/api'; |
||||
|
import ServiceDemand from 'components/ServiceDemand/ServiceDemand.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'NewPlatform', |
||||
|
components: { ServiceDemand }, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
time: 10000, |
||||
|
listType: [], |
||||
|
lists: [], |
||||
|
activeNum: 0, |
||||
|
list: [ |
||||
|
{ |
||||
|
title: '科技资源开放共享服务平台', |
||||
|
content: '研发试验、检验检测、资源共享', |
||||
|
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210120/ccf39757579647cd975ddaebfc571d93.png', |
||||
|
url: '/NewPlatform/Share', |
||||
|
}, |
||||
|
{ |
||||
|
title: '知识产权与技术转移转化服务平台', |
||||
|
content: '知识产权、成果转化、技术转移', |
||||
|
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg', |
||||
|
url: '/NewPlatform/Transfer', |
||||
|
}, |
||||
|
{ |
||||
|
title: '知识培训与科技人才服务平台', |
||||
|
content: '技术培训、管理培训、知识讲座', |
||||
|
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/f5fb570cfd7547279138a591818325e0.jpg', |
||||
|
url: '/NewPlatform/Develop', |
||||
|
}, |
||||
|
], |
||||
|
serviceList: [], |
||||
|
modelIntro: '', |
||||
|
currType: 0, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('home', ['partners']), |
||||
|
|
||||
|
async created() { |
||||
|
this.getService(); |
||||
|
this.setPartners([]); |
||||
|
const params = { |
||||
|
param: { |
||||
|
pageNum: 1, |
||||
|
type: 1, |
||||
|
typeOfPlatform: 2, |
||||
|
}, |
||||
|
}; |
||||
|
await this.getFrontSearchCompany(params); |
||||
|
|
||||
|
this.lists = []; |
||||
|
this.listType = []; |
||||
|
this.partners.forEach(item => { |
||||
|
this.lists.push(item.backendSearchList); |
||||
|
|
||||
|
if (item.typeOfTech === 0 && this.listType.indexOf('高校') === -1) { |
||||
|
this.listType.push('高校'); |
||||
|
} |
||||
|
|
||||
|
if (item.typeOfTech === 1 && this.listType.indexOf('院所') === -1) { |
||||
|
this.listType.push('院所'); |
||||
|
} |
||||
|
|
||||
|
if (item.typeOfTech === 2 && this.listType.indexOf('企业') === -1) { |
||||
|
this.listType.push('企业'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// ...mapMutations('home', ['setServiceArr']), |
||||
|
...mapMutations('home', ['setPartners']), |
||||
|
...mapActions('home', ['getFrontSearchCompany']), |
||||
|
|
||||
|
showIntro(index) { |
||||
|
this.$refs.child.showModel(); |
||||
|
this.modelIntro = this.serviceList[index].intro; |
||||
|
}, |
||||
|
|
||||
|
// 获取服务列表 |
||||
|
async getService() { |
||||
|
try { |
||||
|
const params = { param: { serviceType: 1 } }; |
||||
|
const res = await selService(params); |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.serviceList = data; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
// console.log(data); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
jump(url) { |
||||
|
this.$router.push(url); |
||||
|
}, |
||||
|
|
||||
|
// 查看 服务 详情 |
||||
|
// jumpService(id) { |
||||
|
// this.setServiceArr([]); |
||||
|
// this.setServiceArr(this.arr); |
||||
|
// this.$router.push({ |
||||
|
// path: '/NewPlatform/ServiceDet', |
||||
|
// name: 'ServiceDet', |
||||
|
// params: { id }, |
||||
|
// }); |
||||
|
// }, |
||||
|
|
||||
|
// 显示表单输入框 |
||||
|
showModal(id) { |
||||
|
this.$refs.child.setTypeDataId(id); |
||||
|
}, |
||||
|
|
||||
|
changeIndex(i) { |
||||
|
this.activeNum = i; |
||||
|
}, |
||||
|
|
||||
|
changeType(i) { |
||||
|
this.currType = i; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
a { |
||||
|
color: unset; |
||||
|
} |
||||
|
|
||||
|
.wrap { |
||||
|
width: 1260px; |
||||
|
min-height: 1037px; |
||||
|
margin: 80px auto 28px auto; |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.bg-gray { |
||||
|
background-color: #F5F5F5; |
||||
|
} |
||||
|
|
||||
|
.w-1500 { |
||||
|
display: inline-block; |
||||
|
width: 1500px; |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.organize-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.service-box { |
||||
|
padding: 20px 0 60px; |
||||
|
|
||||
|
.title { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.service-flow { |
||||
|
margin: 50px 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.partner-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 30px; |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.partner-type { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.partner-type-item { |
||||
|
margin-left: 40px; |
||||
|
width: 112px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
color: #717879; |
||||
|
background-color: #EBF8FA; |
||||
|
} |
||||
|
|
||||
|
.partner-type-item.active-item { |
||||
|
color: white; |
||||
|
background-color: #13ACC4; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.partner-flex { |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.partner-item { |
||||
|
margin: 20px 0; |
||||
|
padding: 10px 0; |
||||
|
margin-right: 40px; |
||||
|
width: calc(((100% - 160px) / 5)); |
||||
|
text-align: center; |
||||
|
border: 1px solid #D9D9D9; |
||||
|
border-radius: 5px; |
||||
|
|
||||
|
&:nth-child(5n) { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.partner-item-img { |
||||
|
margin-bottom: 15px; |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
text-align: center; |
||||
|
line-height: 80px; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
max-width: 100%; |
||||
|
max-height: 100%; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.contact-box { |
||||
|
padding: 60px 0; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 50px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.inner { |
||||
|
width: 100%; |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
|
||||
|
.content-box { |
||||
|
padding: 0 !important; |
||||
|
width: 30%; |
||||
|
height: auto !important; |
||||
|
margin: 50px 0; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.con-title { |
||||
|
position: absolute; |
||||
|
bottom: 23px; |
||||
|
color: #ffffff; |
||||
|
font-size: 1.6rem; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
background-image: linear-gradient(rgba(#545454, 0), rgba(0, 0, 0, 0.6)); |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 1650px) { |
||||
|
.con-title { |
||||
|
font-size: 1.3rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.con-con { |
||||
|
background: white; |
||||
|
box-shadow: 0 0 6px #ccc; |
||||
|
height: 26%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.item-box { |
||||
|
position: relative; |
||||
|
width: 20.5%; |
||||
|
margin-right: 6%; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.margin-0 { |
||||
|
margin-right: 0 !important; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue