You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
863 lines
23 KiB
863 lines
23 KiB
<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" id="mao1" class="place"></a>
|
|
<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 class="about-font">
|
|
本众创空间以建设专业化、市场化、网络化、品牌化双创孵化基地为目标，致力打造以公共技术服务平台 为支撑，以创新创业服务为主导，以创新创业大讲堂为带动，以创新创业投融资为拓展，线上线下相结合，实 体虚拟相融合的全要素专业化开放式创新创业孵化平台，着力构建“众创空间-孵化器-加速器-产业园”创新创业 孵化链，构筑创新创业生态系统。
|
|
</div>
|
|
<div class="about-font">
|
|
目前空间已引入科创咨询专业服务机构，并与多家 第三方专业机构 建立战略合作，聘请 创业导师 30余名，服务领域涵盖专业技术、企业管理、科创咨询、财务税务、法务咨询等，可随时为入孵企业提供针 对性、一对一创业辅导服务。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact">乔晓阳：18635939333</div>
|
|
</div>
|
|
|
|
|
|
<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" id="mao3" class="place"></a>
|
|
<div class="service-box bg-gray text-center">
|
|
<div class="title w-1500">
|
|
<img src="~assets/about/title4.png" />
|
|
<span>乔晓阳：18635939333</span>
|
|
</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 pointer"
|
|
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-4 service-title">
|
|
<span>{{ item.name }}</span>
|
|
<a-button @click="showModal(item.id)">需求填报</a-button>
|
|
</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 name="mao4" id="mao4" class="place"></a>
|
|
<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">
|
|
<div class="partner-item" v-for="(item, index) in lists" :key="index" :class="!item.logoUrl ? 'partner-txt' : ''">
|
|
<div class="partner-item-img" v-if="item.logoUrl">
|
|
<img :src="item.logoUrl" />
|
|
</div>
|
|
<div class="partner-name">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray" style="height: 100px"></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: '',
|
|
},
|
|
};
|
|
},
|
|
|
|
watch:{
|
|
$route(to){
|
|
if(to.hash){
|
|
this.setJump(to.hash)
|
|
}
|
|
}
|
|
},
|
|
|
|
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: 3,
|
|
},
|
|
};
|
|
await this.getFrontSearchCompany(params);
|
|
|
|
this.lists = [];
|
|
this.listType = [];
|
|
this.partners.forEach(item => {
|
|
item.backendSearchList.forEach(list => {
|
|
this.lists.push(list);
|
|
})
|
|
|
|
// 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('企业');
|
|
// }
|
|
});
|
|
},
|
|
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
if(this.$route.hash){
|
|
this.setJump(this.$route.hash)
|
|
}
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
// ...mapMutations('home', ['setServiceArr']),
|
|
...mapMutations('home', ['setPartners']),
|
|
...mapActions('user', ['sendCode', 'sendPicCode']),
|
|
...mapActions('home', ['getFrontSearchCompany', 'getUserSer']),
|
|
|
|
setJump(hash){
|
|
if(hash === '#mao1'){
|
|
this.$nextTick(() => {
|
|
this.changeIndex(0)
|
|
document.getElementById('mao1').scrollIntoView(true)
|
|
})
|
|
}
|
|
if(hash === '#mao3'){
|
|
this.$nextTick(() => {
|
|
this.changeIndex(2)
|
|
document.getElementById('mao3').scrollIntoView(true)
|
|
})
|
|
}
|
|
if(hash === '#mao4'){
|
|
this.$nextTick(() => {
|
|
this.changeIndex(3)
|
|
document.getElementById('mao4').scrollIntoView(true)
|
|
})
|
|
}
|
|
},
|
|
|
|
// 改变单当前页数
|
|
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;
|
|
width: 82%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.item-intro{
|
|
text-align: left;
|
|
// text-indent: 2em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.contact{
|
|
position: absolute;
|
|
bottom: 24px;
|
|
right: 40px;
|
|
font-size: 24px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.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: 50px 60px 0;
|
|
width: 45%;
|
|
height: 400px;
|
|
background-color: rgba(19, 172, 196, 0.8);
|
|
text-align: left;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
.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;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.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 {
|
|
height: 163px;
|
|
margin: 20px 0;
|
|
padding: 10px 0;
|
|
margin-right: 40px;
|
|
width: calc(((100% - 200px) / 6));
|
|
text-align: center;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:nth-child(6n) {
|
|
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%;
|
|
}
|
|
|
|
.partner-name {
|
|
font-size: 16px;
|
|
color: #000;
|
|
margin: 0;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
.partner-txt{
|
|
height: 163px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.service-title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.margin-0 {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.place{
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -100px;
|
|
}
|
|
</style>
|
|
|