添加投资者相关界面
This commit is contained in:
wangchengming
parent
46e9549476
commit
6bbd973147
BIN
public/static/img/tempNews.png
Normal file
BIN
public/static/img/tempNews.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
|
|
@ -71,6 +71,10 @@ a:focus {
|
||||||
width: 1400rem;
|
width: 1400rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
.wrapper1518 {
|
||||||
|
width: 1518rem;
|
||||||
|
margin: 0 auto 0 0;
|
||||||
|
}
|
||||||
.wrapper1680 {
|
.wrapper1680 {
|
||||||
width: 1680rem;
|
width: 1680rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
|
||||||
|
|
@ -179,9 +179,9 @@ export default {
|
||||||
{
|
{
|
||||||
title: '投资与合作',
|
title: '投资与合作',
|
||||||
children: [
|
children: [
|
||||||
{ title: '投资者', path: '/' },
|
{ title: '投资者', path: '/investor' },
|
||||||
{ title: '合作邀约', path: '/' },
|
{ title: '合作邀约', path: '/cooperationOffer' },
|
||||||
{ title: '合作伙伴', path: '/' },
|
{ title: '合作伙伴', path: '/businesspartner' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -114,9 +114,9 @@ export default {
|
||||||
{
|
{
|
||||||
title: '投资与合作',
|
title: '投资与合作',
|
||||||
children: [
|
children: [
|
||||||
{ title: '投资者', path: '/' },
|
{ title: '投资者', path: '/investor' },
|
||||||
{ title: '合作邀约', path: '/' },
|
{ title: '合作邀约', path: '/cooperationOffer' },
|
||||||
{ title: '合作伙伴', path: '/' },
|
{ title: '合作伙伴', path: '/businesspartner' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -183,6 +183,28 @@ const routes = [
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/Invest',
|
||||||
|
component: RouteView,
|
||||||
|
redirect: '/cooperationOffer',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/investor',
|
||||||
|
component: (resolve) =>
|
||||||
|
require(['../views/Invest/Investor/Index.vue'], resolve),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/cooperationOffer',
|
||||||
|
component: (resolve) =>
|
||||||
|
require(['../views/Invest/CooperationOffer/Index.vue'], resolve),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/businesspartner',
|
||||||
|
component: (resolve) =>
|
||||||
|
require(['../views/Invest/BusinessPartner/Index.vue'], resolve),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// hack router push callback
|
// hack router push callback
|
||||||
|
|
|
||||||
|
|
@ -55,46 +55,50 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="screen3">
|
<div class="screen3">
|
||||||
<div class="wrapper1680">
|
<div class="wrapper1680">
|
||||||
<div class="fkContent">
|
<div class="formContent">
|
||||||
<div class="fkBar"></div>
|
<div class="formBarContent">
|
||||||
<div class="fkTitle">
|
<div class="formBar"></div>
|
||||||
留言反馈
|
<div class="formTitle">
|
||||||
|
留言反馈
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-form
|
<el-form
|
||||||
:model="form"
|
:model="form"
|
||||||
label-width="110rem"
|
label-width="110rem"
|
||||||
style="margin-top: 40rem"
|
style="margin-top: 40rem"
|
||||||
>
|
>
|
||||||
<el-row>
|
<div class="formBarContent">
|
||||||
<el-col :span="10">
|
<el-row>
|
||||||
<el-form-item label="标题">
|
<el-col :span="10">
|
||||||
<el-input v-model="form.title" />
|
<el-form-item label="标题">
|
||||||
</el-form-item>
|
<el-input v-model="form.title" />
|
||||||
</el-col>
|
</el-form-item>
|
||||||
<el-col :span="7">
|
</el-col>
|
||||||
<el-form-item label="反馈人">
|
<el-col :span="7">
|
||||||
<el-input v-model="form.feedbackPerson" />
|
<el-form-item label="反馈人">
|
||||||
</el-form-item>
|
<el-input v-model="form.feedbackPerson" />
|
||||||
</el-col>
|
</el-form-item>
|
||||||
<el-col :span="7">
|
</el-col>
|
||||||
<el-form-item label="联系方式">
|
<el-col :span="7">
|
||||||
<el-input v-model="form.contactWay" />
|
<el-form-item label="联系方式">
|
||||||
</el-form-item>
|
<el-input v-model="form.contactWay" />
|
||||||
</el-col>
|
</el-form-item>
|
||||||
</el-row>
|
</el-col>
|
||||||
<el-form-item label="反馈内容">
|
</el-row>
|
||||||
<el-input
|
<el-form-item label="反馈内容">
|
||||||
v-model="form.feedbackContent"
|
<el-input
|
||||||
:autosize="{ minRows: 6, maxRows: 6 }"
|
v-model="form.feedbackContent"
|
||||||
type="textarea"
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
||||||
/>
|
type="textarea"
|
||||||
</el-form-item>
|
/>
|
||||||
<el-form-item label="">
|
</el-form-item>
|
||||||
<div class="fkRemark">
|
<el-form-item label="">
|
||||||
我们敬重每一位反馈人的留言，如您对我们有任何想法、要求或建议，敬请留言，我们会在第一时间受理并向您表示衷心的感谢。
|
<div class="formRemark">
|
||||||
</div>
|
我们敬重每一位反馈人的留言，如您对我们有任何想法、要求或建议，敬请留言，我们会在第一时间受理并向您表示衷心的感谢。
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item style="text-align: center">
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
|
||||||
<el-button class="subBtn">
|
<el-button class="subBtn">
|
||||||
提交
|
提交
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
@ -264,16 +268,86 @@ export default {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 10rem 10rem 10rem 10rem;
|
border-radius: 10rem 10rem 10rem 10rem;
|
||||||
}
|
}
|
||||||
.fkContent {
|
.el-form-item {
|
||||||
padding: 20rem 30rem;
|
margin-bottom: 22rem !important;
|
||||||
}
|
}
|
||||||
.fkBar {
|
/deep/.el-form-item__label {
|
||||||
|
font-size: 14rem;
|
||||||
|
line-height: 40rem;
|
||||||
|
padding: 0 12rem 0 0;
|
||||||
|
}
|
||||||
|
/deep/.el-form-item__content {
|
||||||
|
line-height: 40rem;
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-input {
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-input__inner {
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 1rem solid #DCDFE6;
|
||||||
|
height: 40rem;
|
||||||
|
line-height: 40rem;
|
||||||
|
padding: 0 15rem;
|
||||||
|
}
|
||||||
|
/deep/.el-checkbox {
|
||||||
|
font-size: 14rem;
|
||||||
|
margin-right: 30rem;
|
||||||
|
}
|
||||||
|
/deep/.el-checkbox__inner {
|
||||||
|
border: 1rem solid #DCDFE6;
|
||||||
|
border-radius: 2rem;
|
||||||
|
width: 14rem;
|
||||||
|
height: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-checkbox__label {
|
||||||
|
padding-left: 10rem;
|
||||||
|
line-height: 19rem;
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-textarea {
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-textarea__inner {
|
||||||
|
padding: 5rem 15rem;
|
||||||
|
border: 1rem solid #DCDFE6;
|
||||||
|
border-radius: 4rem;
|
||||||
|
height: 138rem !important;
|
||||||
|
min-height: 138rem !important;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list__item {
|
||||||
|
font-size: 14rem;
|
||||||
|
margin-top: 5rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
}
|
||||||
|
/deep/.el-button--small {
|
||||||
|
padding: 9rem 15rem;
|
||||||
|
font-size: 12rem;
|
||||||
|
border-radius: 3rem;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list{
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list__item-name {
|
||||||
|
margin-right: 40rem;
|
||||||
|
padding-left: 4rem;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list__item-status-label {
|
||||||
|
right: 5rem;
|
||||||
|
}
|
||||||
|
.formContent {
|
||||||
|
padding: 20rem 0rem;
|
||||||
|
}
|
||||||
|
.formBarContent {
|
||||||
|
padding: 0rem 30rem;
|
||||||
|
}
|
||||||
|
.formBar {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 20rem;
|
height: 20rem;
|
||||||
background: #014DB5;
|
background: #014DB5;
|
||||||
}
|
}
|
||||||
.fkTitle {
|
.formTitle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: 10rem;
|
padding-left: 10rem;
|
||||||
font-family: MicrosoftYaHeiSemibold;
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
|
@ -284,7 +358,7 @@ export default {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
.fkRemark {
|
.formRemark {
|
||||||
font-family: MicrosoftYaHei;
|
font-family: MicrosoftYaHei;
|
||||||
font-size: 18rem;
|
font-size: 18rem;
|
||||||
color: #BBBBBB;
|
color: #BBBBBB;
|
||||||
|
|
@ -304,5 +378,6 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
|
padding: 12rem 20rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
600
src/views/Invest/BusinessPartner/Index.vue
Normal file
600
src/views/Invest/BusinessPartner/Index.vue
Normal file
|
|
@ -0,0 +1,600 @@
|
||||||
|
<template>
|
||||||
|
<div class="part-building">
|
||||||
|
<div style="height:104rem;"></div>
|
||||||
|
<div class="screen1">
|
||||||
|
<img
|
||||||
|
:src="screen1.bannerUrl"
|
||||||
|
alt=""
|
||||||
|
style="width:100%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="screen11">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in screen1.Partner"
|
||||||
|
:key="'itemkey' + index"
|
||||||
|
class="list-item"
|
||||||
|
>
|
||||||
|
<transition name="scale">
|
||||||
|
<div
|
||||||
|
class="list-img"
|
||||||
|
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="item.imageurl"
|
||||||
|
alt=""
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen2">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="formContent">
|
||||||
|
<div class="formBarContent">
|
||||||
|
<div class="formBar"></div>
|
||||||
|
<div class="formTitle">
|
||||||
|
成为合作伙伴
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-form
|
||||||
|
:model="form1"
|
||||||
|
label-width="130rem"
|
||||||
|
style="margin-top: 40rem"
|
||||||
|
>
|
||||||
|
<div class="formBarContent">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="公司名称(个人)">
|
||||||
|
<el-input v-model="form1.companyName" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="地址">
|
||||||
|
<el-input v-model="form1.companyAddress" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="联系电话">
|
||||||
|
<el-input v-model="form1.phone" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="电子邮箱">
|
||||||
|
<el-input v-model="form1.email" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="擅长方向">
|
||||||
|
<el-checkbox-group v-model="form1.excelIn">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in excelInList"
|
||||||
|
:key="'excelIn' + index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="优势概念">
|
||||||
|
<el-input
|
||||||
|
v-model="form1.dominanceConcept"
|
||||||
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="合作意向概述">
|
||||||
|
<el-input
|
||||||
|
v-model="form1.intention"
|
||||||
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="附件">
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
action="https://jsonplaceholder.typicode.com/posts/"
|
||||||
|
:file-list="fileList1"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
>
|
||||||
|
上传
|
||||||
|
</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
|
||||||
|
<el-button class="subBtn">
|
||||||
|
提交
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen3">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="formContent">
|
||||||
|
<div class="formBarContent">
|
||||||
|
<div class="formBar"></div>
|
||||||
|
<div class="formTitle">
|
||||||
|
成为供应商
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-form
|
||||||
|
:model="form"
|
||||||
|
label-width="130rem"
|
||||||
|
style="margin-top: 40rem"
|
||||||
|
>
|
||||||
|
<div class="formBarContent">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="公司名称">
|
||||||
|
<el-input v-model="form.companyName" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="公司地址">
|
||||||
|
<el-input v-model="form.companyAddress" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="统一社会信用代码">
|
||||||
|
<el-input v-model="form.uniformCode" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="电子邮箱">
|
||||||
|
<el-input v-model="form.email" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="企业性质">
|
||||||
|
<el-checkbox-group v-model="form.enterpriseProperty">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in enterprisePropertyList"
|
||||||
|
:key="'enterpriseProperty' + index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="行业领域">
|
||||||
|
<el-input v-model="form.industryField" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="主要产品">
|
||||||
|
<el-input v-model="form.mainProduct" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="联系电话">
|
||||||
|
<el-input v-model="form.phone" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="网址">
|
||||||
|
<el-input v-model="form.website" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="设计开发能力">
|
||||||
|
<el-checkbox-group v-model="form.designCapability">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in designCapabilityList"
|
||||||
|
:key="'designCapability' + index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="遵守标准">
|
||||||
|
<el-checkbox-group v-model="form.standards">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in standardsList"
|
||||||
|
:key="'standards' + index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="产品已获得的认证">
|
||||||
|
<el-checkbox-group v-model="form.authentication">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in authenticationList"
|
||||||
|
:key="'authentication' + index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-input v-model="form.otherRemark" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="质量体系情况">
|
||||||
|
<el-checkbox-group v-model="form.qualitySystem">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in qualitySystemList"
|
||||||
|
:key="'qualitySystem' + index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否具备相关资质">
|
||||||
|
<el-checkbox-group v-model="form.relevantQualification">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in relevantQualificationList"
|
||||||
|
:key="'relevantQualification' + index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="优势概念">
|
||||||
|
<el-input
|
||||||
|
v-model="form.dominanceConcept"
|
||||||
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="合作意向概述">
|
||||||
|
<el-input
|
||||||
|
v-model="form.intention"
|
||||||
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="附件">
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
action="https://jsonplaceholder.typicode.com/posts/"
|
||||||
|
:file-list="fileList2"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
>
|
||||||
|
上传
|
||||||
|
</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
|
||||||
|
<el-button class="subBtn">
|
||||||
|
提交
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<FootBar theme="dark"></FootBar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex';
|
||||||
|
import FootBar from '@/components/FootBar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FootBar,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
screen1: {
|
||||||
|
bannerUrl: '',
|
||||||
|
Partner: [],
|
||||||
|
},
|
||||||
|
fileList1: [],
|
||||||
|
fileList2: [],
|
||||||
|
excelInList: [
|
||||||
|
{ label: '项目合作', value: '项目合作' },
|
||||||
|
{ label: '人脉资源', value: '人脉资源' },
|
||||||
|
{ label: '创新技术', value: '创新技术' },
|
||||||
|
{ label: '法律咨询', value: '法律咨询' },
|
||||||
|
{ label: '投融资', value: '投融资' },
|
||||||
|
{ label: '行业经验', value: '行业经验' },
|
||||||
|
{ label: '产品', value: '产品' },
|
||||||
|
{ label: '资质优势', value: '资质优势' },
|
||||||
|
],
|
||||||
|
enterprisePropertyList: [
|
||||||
|
{ label: '国营', value: '国营' },
|
||||||
|
{ label: '私营', value: '私营' },
|
||||||
|
{ label: '合资', value: '合资' },
|
||||||
|
{ label: '其他', value: '其他' },
|
||||||
|
],
|
||||||
|
designCapabilityList: [
|
||||||
|
{ label: '自主设计开发', value: '自主设计开发' },
|
||||||
|
{ label: '来料加工', value: '来料加工' },
|
||||||
|
{ label: '贸易代理', value: '贸易代理' },
|
||||||
|
],
|
||||||
|
standardsList: [
|
||||||
|
{ label: '国际标准', value: '国际标准' },
|
||||||
|
{ label: '国家标准', value: '国家标准' },
|
||||||
|
{ label: '行业标准', value: '行业标准' },
|
||||||
|
{ label: '企业标准', value: '企业标准' },
|
||||||
|
],
|
||||||
|
authenticationList: [
|
||||||
|
{ label: '3C', value: '3C' },
|
||||||
|
{ label: 'ROHS', value: 'ROHS' },
|
||||||
|
{ label: '其他说明', value: '其他说明' },
|
||||||
|
],
|
||||||
|
qualitySystemList: [
|
||||||
|
{ label: 'IS09001', value: 'IS09001' },
|
||||||
|
{ label: 'ISO14001', value: 'ISO14001' },
|
||||||
|
{ label: 'ISO27001', value: 'ISO27001' },
|
||||||
|
{ label: 'QS9000', value: 'QS9000' },
|
||||||
|
{ label: 'TS16849', value: 'TS16849' },
|
||||||
|
],
|
||||||
|
relevantQualificationList: [
|
||||||
|
{ label: '专利', value: '专利' },
|
||||||
|
{ label: '软件著作权', value: '软件著作权' },
|
||||||
|
{ label: '食品生产许可证', value: '食品生产许可证' },
|
||||||
|
{ label: '食品经营许可证', value: '食品经营许可证' },
|
||||||
|
{ label: '其他证书', value: '其他证书' },
|
||||||
|
],
|
||||||
|
form1: {
|
||||||
|
companyName: '',
|
||||||
|
companyAddress: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
excelIn: [],
|
||||||
|
dominanceConcept: '',
|
||||||
|
intention: '',
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
companyName: '',
|
||||||
|
companyAddress: '',
|
||||||
|
uniformCode: '',
|
||||||
|
email: '',
|
||||||
|
enterpriseProperty: [],
|
||||||
|
industryField: '',
|
||||||
|
mainProduct: '',
|
||||||
|
phone: '',
|
||||||
|
website: '',
|
||||||
|
designCapability: [],
|
||||||
|
standards: [],
|
||||||
|
authentication: [],
|
||||||
|
otherRemark: '',
|
||||||
|
qualitySystem: [],
|
||||||
|
relevantQualification: [],
|
||||||
|
dominanceConcept: '',
|
||||||
|
intention: '',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
scrollTop: state => state.scroll.scrollTop,
|
||||||
|
webScale: state => state.web.scale,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.$event.$emit('nav-theme', 'light');
|
||||||
|
this.getScreen1Banner();
|
||||||
|
this.getScreen1Partner();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getScreen1Banner () {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get(
|
||||||
|
'/official/index/list',
|
||||||
|
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/合作伙伴/banner' } },
|
||||||
|
);
|
||||||
|
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||||
|
} catch (error) {}
|
||||||
|
},
|
||||||
|
async getScreen1Partner () {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get(
|
||||||
|
'/official/index/list',
|
||||||
|
{ params: { pageNum: 1, pageSize: 10, captionName: '投资与合作/合作伙伴/合伙人' } },
|
||||||
|
);
|
||||||
|
this.screen1.Partner = res.rows.sort((a, b) => a.orders - b.orders);
|
||||||
|
} catch (error) {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.part-building {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.screen11 {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.screen11 .wrapper1680 {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.screen11 .list-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 240rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0px 140rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.screen11 .list-item {
|
||||||
|
border-radius: 20rem;
|
||||||
|
background: #ffffff;
|
||||||
|
margin: 0 20rem;
|
||||||
|
width: 240rem;
|
||||||
|
height: 160rem;
|
||||||
|
margin-bottom: 40rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.screen11 .list-item:hover {
|
||||||
|
transform: scale(1.1, 1.1);
|
||||||
|
}
|
||||||
|
.screen11 .list-img {
|
||||||
|
width: 160rem;
|
||||||
|
height: 760rem;
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
.screen2 {
|
||||||
|
padding: 80rem 120rem;
|
||||||
|
background: #F5F5F7;
|
||||||
|
}
|
||||||
|
.screen2 .wrapper1680 {
|
||||||
|
height: 565rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 10rem 10rem 10rem 10rem;
|
||||||
|
}
|
||||||
|
.screen3 {
|
||||||
|
padding: 0rem 120rem 80rem;
|
||||||
|
background: #F5F5F7;
|
||||||
|
}
|
||||||
|
.screen3 .wrapper1680 {
|
||||||
|
height: 830rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 10rem 10rem 10rem 10rem;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 22rem !important;
|
||||||
|
}
|
||||||
|
/deep/.el-form-item__label {
|
||||||
|
font-size: 14rem;
|
||||||
|
line-height: 40rem;
|
||||||
|
padding: 0 12rem 0 0;
|
||||||
|
}
|
||||||
|
/deep/.el-form-item__content {
|
||||||
|
line-height: 40rem;
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-input {
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-input__inner {
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 1rem solid #DCDFE6;
|
||||||
|
height: 40rem;
|
||||||
|
line-height: 40rem;
|
||||||
|
padding: 0 15rem;
|
||||||
|
}
|
||||||
|
/deep/.el-checkbox {
|
||||||
|
font-size: 14rem;
|
||||||
|
margin-right: 30rem;
|
||||||
|
}
|
||||||
|
/deep/.el-checkbox__inner {
|
||||||
|
border: 1rem solid #DCDFE6;
|
||||||
|
border-radius: 2rem;
|
||||||
|
width: 14rem;
|
||||||
|
height: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-checkbox__label {
|
||||||
|
padding-left: 10rem;
|
||||||
|
line-height: 19rem;
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-textarea {
|
||||||
|
font-size: 14rem;
|
||||||
|
}
|
||||||
|
/deep/.el-textarea__inner {
|
||||||
|
padding: 5rem 15rem;
|
||||||
|
border: 1rem solid #DCDFE6;
|
||||||
|
border-radius: 4rem;
|
||||||
|
height: 138rem !important;
|
||||||
|
min-height: 138rem !important;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list__item {
|
||||||
|
font-size: 14rem;
|
||||||
|
margin-top: 5rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
}
|
||||||
|
/deep/.el-button--small {
|
||||||
|
padding: 9rem 15rem;
|
||||||
|
font-size: 12rem;
|
||||||
|
border-radius: 3rem;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list{
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list__item-name {
|
||||||
|
margin-right: 40rem;
|
||||||
|
padding-left: 4rem;
|
||||||
|
}
|
||||||
|
/deep/.el-upload-list__item-status-label {
|
||||||
|
right: 5rem;
|
||||||
|
}
|
||||||
|
.formContent {
|
||||||
|
padding: 20rem 0rem;
|
||||||
|
}
|
||||||
|
.formBarContent {
|
||||||
|
padding: 0rem 30rem;
|
||||||
|
}
|
||||||
|
.formBar {
|
||||||
|
display: inline-block;
|
||||||
|
width: 4rem;
|
||||||
|
height: 20rem;
|
||||||
|
background: #014DB5;
|
||||||
|
}
|
||||||
|
.formTitle {
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 10rem;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 24rem;
|
||||||
|
color: #014DB5;
|
||||||
|
line-height: 64rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.subBtn {
|
||||||
|
width: 140rem;
|
||||||
|
height: 50rem;
|
||||||
|
background: #014DB5;
|
||||||
|
border-radius: 4rem;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 18rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding: 12rem 20rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
443
src/views/Invest/CooperationOffer/Index.vue
Normal file
443
src/views/Invest/CooperationOffer/Index.vue
Normal file
|
|
@ -0,0 +1,443 @@
|
||||||
|
<template>
|
||||||
|
<div class="part-building">
|
||||||
|
<div style="height:104rem;"></div>
|
||||||
|
<div class="screen1">
|
||||||
|
<img
|
||||||
|
:src="screen1.bannerUrl"
|
||||||
|
alt=""
|
||||||
|
style="width:100%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="screen2">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="title">
|
||||||
|
{{ screen2.businessName }}
|
||||||
|
</div>
|
||||||
|
<div class="titleChinese">
|
||||||
|
{{ screen2.titleChinese }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen3">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="title">
|
||||||
|
{{ partner.title }}
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="content-cn">
|
||||||
|
<ul
|
||||||
|
v-for="(item, index) in partner.children"
|
||||||
|
:key="'partner' + index"
|
||||||
|
>
|
||||||
|
<li class="itemLi">
|
||||||
|
{{ item.value }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen4">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="title">
|
||||||
|
{{ advantage.title }}
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="content-cn">
|
||||||
|
<ul
|
||||||
|
v-for="(item, index) in advantage.children"
|
||||||
|
:key="'advantage' + index"
|
||||||
|
>
|
||||||
|
<li class="itemLi">
|
||||||
|
{{ item.value }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen5">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="title">
|
||||||
|
{{ estate.title }}
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="content-cn">
|
||||||
|
<ul
|
||||||
|
v-for="(item, index) in estate.children"
|
||||||
|
:key="'advantage' + index"
|
||||||
|
>
|
||||||
|
<li class="estateLi">
|
||||||
|
{{ item.value }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen6">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="title">
|
||||||
|
{{ share.title }}
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="content-cn">
|
||||||
|
<ul
|
||||||
|
v-for="(item, index) in share.children"
|
||||||
|
:key="'advantage' + index"
|
||||||
|
>
|
||||||
|
<li class="itemLi">
|
||||||
|
{{ item.value }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen7">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="title">
|
||||||
|
{{ partnersEquity.title }}
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<transition name="fade-slide-bottom">
|
||||||
|
<div class="content-cn">
|
||||||
|
<ul
|
||||||
|
v-for="(item, index) in partnersEquity.children"
|
||||||
|
:key="'partnersEquity' + index"
|
||||||
|
>
|
||||||
|
<li class="estateLi">
|
||||||
|
{{ item.value }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="screen8">
|
||||||
|
<div class="wrapper1680">
|
||||||
|
<div class="remarks">
|
||||||
|
<span>如果您有【产业/产品/项目】需要策划操盘、资源导入、资本加持，如果您需要拓展华北、华东、华南或者国际市场，请填写申请表或者发送您的合作方案至以下</span>
|
||||||
|
<a>邮箱：Info@futurestar.cc</a>
|
||||||
|
<span>若您的来信真实、完整、有效，我们将在5个工作日内给予回复，期待您的加入!</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FootBar theme="dark"></FootBar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex';
|
||||||
|
import FootBar from '@/components/FootBar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FootBar,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
screen1: {
|
||||||
|
bannerUrl: '',
|
||||||
|
},
|
||||||
|
screen2: {
|
||||||
|
businessName: '',
|
||||||
|
businessNameEnglish: '',
|
||||||
|
titleChinese: '',
|
||||||
|
},
|
||||||
|
partner: {
|
||||||
|
title: '三大合伙人',
|
||||||
|
children: [
|
||||||
|
{ value: '高级合伙人：拥有资源、资本、市场均可成为高级合伙人，实现价值兑现和丰厚回报；' },
|
||||||
|
{ value: '产业合伙人：拥有创意、技术、产品均可成为产业合伙人，共享集团资源和资本赋能；' },
|
||||||
|
{ value: '区域合伙人：拥有区域能力或市场通道均可成为区域合伙人，共享集团产品和解决方案' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
advantage: {
|
||||||
|
title: '四大优势',
|
||||||
|
children: [
|
||||||
|
{ value: '资源优势：共享集团资本资源、政府资源红利；' },
|
||||||
|
{ value: '技术优势：共享集团各产业链领先的技术支持；' },
|
||||||
|
{ value: '市场优势：共享集团各行业和区域的市场通路；' },
|
||||||
|
{ value: '品牌优势：共享品牌价值，实现共同的发展目标；' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
estate: {
|
||||||
|
title: '八大产业',
|
||||||
|
children: [
|
||||||
|
{ value: '资本服务' },
|
||||||
|
{ value: '高新技术' },
|
||||||
|
{ value: '能源环保' },
|
||||||
|
{ value: '全球供应链' },
|
||||||
|
{ value: '商业发展' },
|
||||||
|
{ value: '未来农业' },
|
||||||
|
{ value: '健康产业' },
|
||||||
|
{ value: '基础设施' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
share: {
|
||||||
|
title: '共享共赢',
|
||||||
|
children: [
|
||||||
|
{ value: '共享：GR资源、资本渠道、市场通路；' },
|
||||||
|
{ value: '共赢：总部分红、蓝海市场、全球战略；' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
partnersEquity: {
|
||||||
|
title: '合伙人权益',
|
||||||
|
children: [
|
||||||
|
{ value: '独立核算' },
|
||||||
|
{ value: '产业中心' },
|
||||||
|
{ value: '区域运营' },
|
||||||
|
{ value: '项目对接' },
|
||||||
|
{ value: '会议/活动' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
scrollTop: state => state.scroll.scrollTop,
|
||||||
|
webScale: state => state.web.scale,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.$event.$emit('nav-theme', 'light');
|
||||||
|
this.getScreen1Banner();
|
||||||
|
this.getScreen2Remark();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getScreen1Banner () {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get(
|
||||||
|
'/official/index/list',
|
||||||
|
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/合作邀约/banner' } },
|
||||||
|
);
|
||||||
|
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||||
|
} catch (error) {}
|
||||||
|
},
|
||||||
|
async getScreen2Remark () {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get(
|
||||||
|
'/official/index/list',
|
||||||
|
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/合作邀约/简介' } },
|
||||||
|
);
|
||||||
|
Object.assign(this.screen2, res.rows[0]);
|
||||||
|
} catch (error) {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.part-building {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen2 {
|
||||||
|
padding: 90rem 130rem;
|
||||||
|
background: #F5F5F7;
|
||||||
|
}
|
||||||
|
.screen2 .title {
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 28rem;
|
||||||
|
color: #111111;
|
||||||
|
line-height: 28rem;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
margin-bottom: 40rem;
|
||||||
|
}
|
||||||
|
.screen2 .titleChinese {
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 18rem;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.itemLi {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
.estateLi{
|
||||||
|
list-style-type: disc;
|
||||||
|
float:left;
|
||||||
|
padding-right: 50rem;
|
||||||
|
}
|
||||||
|
.screen3 {
|
||||||
|
margin-top: 100rem;
|
||||||
|
}
|
||||||
|
.screen3 .list-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.screen3 .list-wrapper .title {
|
||||||
|
width: 210rem;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 24rem;
|
||||||
|
color: #014DB5;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.screen3 .list-wrapper .content-cn {
|
||||||
|
width: 100%;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 18rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 40rem;
|
||||||
|
letter-spacing:2.8rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.screen4 {
|
||||||
|
margin-top: 60rem;
|
||||||
|
}
|
||||||
|
.screen4 .list-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.screen4 .list-wrapper .title {
|
||||||
|
width: 210rem;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 24rem;
|
||||||
|
color: #014DB5;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.screen4 .list-wrapper .content-cn {
|
||||||
|
width: 100%;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 18rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 40rem;
|
||||||
|
letter-spacing:2.8rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.screen5 {
|
||||||
|
margin-top: 60rem;
|
||||||
|
}
|
||||||
|
.screen5 .list-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.screen5 .list-wrapper .title {
|
||||||
|
width: 210rem;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 24rem;
|
||||||
|
color: #014DB5;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.screen5 .list-wrapper .content-cn {
|
||||||
|
width: 100%;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 18rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 40rem;
|
||||||
|
letter-spacing:2.8rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.screen6 {
|
||||||
|
margin-top: 140rem;
|
||||||
|
}
|
||||||
|
.screen6 .list-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.screen6 .list-wrapper .title {
|
||||||
|
width: 210rem;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 24rem;
|
||||||
|
color: #014DB5;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.screen6 .list-wrapper .content-cn {
|
||||||
|
width: 100%;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 18rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 40rem;
|
||||||
|
letter-spacing:2.8rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.screen7 {
|
||||||
|
margin-top: 110rem;
|
||||||
|
}
|
||||||
|
.screen7 .list-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.screen7 .list-wrapper .title {
|
||||||
|
width: 210rem;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 24rem;
|
||||||
|
color: #014DB5;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.screen7 .list-wrapper .content-cn {
|
||||||
|
width: 100%;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
font-size: 18rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 40rem;
|
||||||
|
letter-spacing:2.8rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.screen8 {
|
||||||
|
margin-top: 120rem;
|
||||||
|
}
|
||||||
|
.screen8 .remarks{
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 18rem;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.screen8 .remarks a {
|
||||||
|
color: #0049b3;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
84
src/views/Invest/Investor/Index.vue
Normal file
84
src/views/Invest/Investor/Index.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-company">
|
||||||
|
<div style="height:104rem;"></div>
|
||||||
|
<div class="screen1">
|
||||||
|
<img
|
||||||
|
:src="screen1.imageurl"
|
||||||
|
alt=""
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="screen2">
|
||||||
|
<img
|
||||||
|
:src="tempImg"
|
||||||
|
alt=""
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FootBar theme="dark"></FootBar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapMutations, mapState } from 'vuex';
|
||||||
|
import FootBar from '@/components/FootBar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FootBar,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
screen1: {
|
||||||
|
imageurl: '',
|
||||||
|
introduction: {
|
||||||
|
businessName: '',
|
||||||
|
businessNameEnglish: '',
|
||||||
|
titleChinese: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tempImg: '/static/img/tempNews.png',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
scrollTop: state => state.scroll.scrollTop,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.$event.$emit('nav-theme', 'light');
|
||||||
|
this.getScreen1Banner();
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
if (this.$route.hash) {
|
||||||
|
this.forceScroll({
|
||||||
|
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||||
|
async getScreen1Banner () {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get(
|
||||||
|
'/official/index/list',
|
||||||
|
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/投资者/banner' } },
|
||||||
|
);
|
||||||
|
this.screen1.imageurl = res.rows[0].imageurl;
|
||||||
|
} catch (error) {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-company {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen2 {
|
||||||
|
padding: 90rem 130rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,289 +1,67 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-company">
|
<div class="page-company">
|
||||||
|
<div style="height:104rem;"></div>
|
||||||
<div class="screen1">
|
<div class="screen1">
|
||||||
<img
|
<img
|
||||||
:src="screen1.imageurl"
|
:src="screen1.imageurl"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 100%;height: 100%;"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
<div
|
</div>
|
||||||
class="box-posi-abs"
|
<div class="screen2">
|
||||||
style="--w:100%;--h: 407rem;--t:50%;--l:0;z-index:10;color:#ffffff;display: flex;flex-direction: column;align-items: left;padding: 0rem 60rem;transform: translateY(-50%);"
|
<div class="wrapper1680">
|
||||||
>
|
<div class="title">
|
||||||
<div style="font-size: 48rem;line-height: 1;margin-bottom: 24rem;font-family: MicrosoftYaHeiLight;">
|
|
||||||
{{ screen1.introduction.businessName }}
|
{{ screen1.introduction.businessName }}
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 48rem;line-height: 1;margin-bottom: 80rem;font-family: MicrosoftYaHeiLight;">
|
<div class="titleChinese">
|
||||||
{{ screen1.introduction.businessNameEnglish }}
|
{{ screen1.introduction.titleChinese }}
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="(textEn, i) in screen1.introduction.titleChinese.split('\n')"
|
|
||||||
:key="'text-en-' + i"
|
|
||||||
style="font-size: 24rem;width: 608rem;line-height: 40rem;margin-bottom: 70rem;letter-spacing: 0rem;"
|
|
||||||
>
|
|
||||||
{{ textEn }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="wrapper1518">
|
||||||
<div
|
<div class="detailTitle">
|
||||||
id="develop-bar"
|
加入我们，您将体验到以前优势和基于：
|
||||||
class="screen2"
|
|
||||||
>
|
|
||||||
<div class="wrapper1680 screen-content">
|
|
||||||
<div class="screen-content-left">
|
|
||||||
<div
|
|
||||||
class="screen-content-num"
|
|
||||||
>
|
|
||||||
<img src="/static/img/recruit/01.png"/>
|
|
||||||
<div class="mini-title">
|
|
||||||
{{screen2.miniTitle}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="screen-content-title"
|
|
||||||
v-html="screen2.title"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="screen-content-line"></div>
|
|
||||||
<div class="carousel-item-title">
|
|
||||||
{{screen2.subtitle}}
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item-desc">
|
|
||||||
{{screen2.carouselData[screen2.currentIndicator]?.titleChinese}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="screen-content-right">
|
|
||||||
<el-carousel
|
|
||||||
ref="screen2-carousel"
|
|
||||||
height="700rem"
|
|
||||||
arrow="never"
|
|
||||||
:autoplay="screen2.carouselAutoplay"
|
|
||||||
:interval="3000"
|
|
||||||
@change="(v) => screen2.currentIndicator = v"
|
|
||||||
>
|
|
||||||
<el-carousel-item
|
|
||||||
v-for="(carousel) in screen2.carouselData"
|
|
||||||
:key="carousel.id"
|
|
||||||
>
|
|
||||||
<div class="college-item">
|
|
||||||
<div class="college-image">
|
|
||||||
<img
|
|
||||||
:src="carousel.imageurl"
|
|
||||||
alt=""
|
|
||||||
style="width:100%;height:100%; display: block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
<!-- <div
|
|
||||||
class="carousel-tab"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="carousel-tab-item"
|
|
||||||
:class="{'active': index === screen2.currentIndicator}"
|
|
||||||
v-for="(carousel, index) in screen2.carouselData"
|
|
||||||
:key="carousel.id"
|
|
||||||
@click="() => startScreen4Carousel(index, 2)"
|
|
||||||
>
|
|
||||||
{{carousel.businessName}}
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="discli itemDetailTitle">
|
||||||
|
{{ screen2.businessName }}
|
||||||
|
</li>
|
||||||
|
<li class="itemDetailContent">
|
||||||
|
{{ screen2.titleChinese }}
|
||||||
|
</li>
|
||||||
|
<li class="discli itemDetailTitle">
|
||||||
|
{{ screen3.businessName }}
|
||||||
|
</li>
|
||||||
|
<li class="itemDetailContent">
|
||||||
|
{{ screen3.titleChinese }}
|
||||||
|
</li>
|
||||||
|
<li class="discli itemDetailTitle">
|
||||||
|
{{ screen4.businessName }}
|
||||||
|
</li>
|
||||||
|
<li class="itemDetailContent">
|
||||||
|
{{ screen4.titleChinese }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="screen3">
|
||||||
<div
|
<div class="wrapper1680">
|
||||||
id="work-bar"
|
<div class="remarks">
|
||||||
class="screen3"
|
<span>{{ screen6.joinUs.contentCn }}</span>
|
||||||
>
|
|
||||||
<div class="wrapper1680 screen-content">
|
|
||||||
<div class="screen-content-right">
|
|
||||||
<el-carousel
|
|
||||||
ref="screen3-carousel"
|
|
||||||
height="700rem"
|
|
||||||
arrow="never"
|
|
||||||
:autoplay="screen3.carouselAutoplay"
|
|
||||||
:interval="3000"
|
|
||||||
@change="(v) => screen3.currentIndicator = v"
|
|
||||||
>
|
|
||||||
<el-carousel-item
|
|
||||||
v-for="(carousel) in screen3.carouselData"
|
|
||||||
:key="carousel.id"
|
|
||||||
>
|
|
||||||
<div class="college-item">
|
|
||||||
<div class="college-image">
|
|
||||||
<img
|
|
||||||
:src="carousel.imageurl"
|
|
||||||
alt=""
|
|
||||||
style="width:100%;height:100%; display: block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
<!-- <div
|
|
||||||
class="carousel-tab"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="carousel-tab-item"
|
|
||||||
:class="{'active': index === screen3.currentIndicator}"
|
|
||||||
v-for="(carousel, index) in screen3.carouselData"
|
|
||||||
:key="carousel.id"
|
|
||||||
@click="() => startScreen4Carousel(index, 3)"
|
|
||||||
>
|
|
||||||
{{carousel.businessName}}
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="screen-content-left"
|
|
||||||
style="margin-right: 0; margin-left: 120rem; text-align: right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="screen-content-num"
|
|
||||||
>
|
|
||||||
<img src="/static/img/recruit/02.png"/>
|
|
||||||
<div
|
|
||||||
class="mini-title"
|
|
||||||
style="right: 0; left: auto"
|
|
||||||
>
|
|
||||||
{{screen3.miniTitle}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="screen-content-title"
|
|
||||||
v-html="screen3.title"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="screen-content-line"></div>
|
|
||||||
<div class="carousel-item-title">
|
|
||||||
{{screen3.subtitle}}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="carousel-item-desc"
|
|
||||||
style="text-align: left"
|
|
||||||
>
|
|
||||||
{{screen3.carouselData[screen3.currentIndicator]?.titleChinese}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<FootBar theme="dark"></FootBar>
|
||||||
id="life-bar"
|
|
||||||
class="screen4"
|
|
||||||
>
|
|
||||||
<div class="wrapper1680 screen-content">
|
|
||||||
<div class="screen-content-left">
|
|
||||||
<div
|
|
||||||
class="screen-content-num"
|
|
||||||
>
|
|
||||||
<img src="/static/img/recruit/03.png"/>
|
|
||||||
<div class="mini-title">
|
|
||||||
{{screen4.miniTitle}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="screen-content-title"
|
|
||||||
v-html="screen4.title"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="screen-content-line"></div>
|
|
||||||
<div class="carousel-item-title">
|
|
||||||
{{screen4.subtitle}}
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item-desc">
|
|
||||||
{{screen4.carouselData[screen4.currentIndicator]?.titleChinese}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="screen-content-right">
|
|
||||||
<el-carousel
|
|
||||||
ref="screen4-carousel"
|
|
||||||
height="700rem"
|
|
||||||
arrow="never"
|
|
||||||
:autoplay="screen4.carouselAutoplay"
|
|
||||||
:interval="3000"
|
|
||||||
@change="(v) => screen4.currentIndicator = v"
|
|
||||||
>
|
|
||||||
<el-carousel-item
|
|
||||||
v-for="(carousel) in screen4.carouselData"
|
|
||||||
:key="carousel.id"
|
|
||||||
>
|
|
||||||
<div class="college-item">
|
|
||||||
<div class="college-image">
|
|
||||||
<img
|
|
||||||
:src="carousel.imageurl"
|
|
||||||
alt=""
|
|
||||||
style="width:100%;height:100%; display: block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
<!-- <div
|
|
||||||
class="carousel-tab"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="carousel-tab-item"
|
|
||||||
:class="{'active': index === screen4.currentIndicator}"
|
|
||||||
v-for="(carousel, index) in screen4.carouselData"
|
|
||||||
:key="carousel.id"
|
|
||||||
@click="() => startScreen4Carousel(index, 4)"
|
|
||||||
>
|
|
||||||
{{carousel.businessNameEnglish}}
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="screen6">
|
|
||||||
<div class="wrapper1680">
|
|
||||||
<div
|
|
||||||
class="box-posi-abs"
|
|
||||||
style="--t:0rem;--w:100%;--h:1rem;"
|
|
||||||
>
|
|
||||||
<div class="split-line"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="image-posi-abs"
|
|
||||||
style="--l:1rem;--r:1rem;--t:90rem;--w:1680rem;--h:550rem;"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="screen6.joinUs.imageSrc"
|
|
||||||
alt=""
|
|
||||||
style="width:100%;height:100%;"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<transition name="fade-slide-left">
|
|
||||||
<div
|
|
||||||
v-show="screen6.offsetLevel >= 1"
|
|
||||||
class="text-posi-abs"
|
|
||||||
style="--t:243rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
|
||||||
>
|
|
||||||
{{ screen6.joinUs.title }}
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
<div
|
|
||||||
class="text-posi-abs"
|
|
||||||
style="--t:312rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
|
||||||
>
|
|
||||||
{{ screen6.joinUs.contentCn }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click="$router.push('/recruit/socialRecruit')"
|
|
||||||
class="text-posi-abs"
|
|
||||||
style="--l:118rem;--t:433rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
|
||||||
>
|
|
||||||
<span class="join-btn-text">JOIN US</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapMutations, mapState } from 'vuex';
|
import { mapMutations, mapState } from 'vuex';
|
||||||
|
import FootBar from '@/components/FootBar.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
FootBar,
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
screen1: {
|
screen1: {
|
||||||
|
|
@ -295,43 +73,21 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
screen2: {
|
screen2: {
|
||||||
miniTitle: '',
|
businessName: '',
|
||||||
title: '跨领域<br />的综合发展',
|
businessNameEnglish: '',
|
||||||
subtitle: '',
|
titleChinese: '',
|
||||||
titleEn: '',
|
|
||||||
carouselData: [],
|
|
||||||
carouselAutoplay: false,
|
|
||||||
currentIndicator: -1,
|
|
||||||
timer: null,
|
|
||||||
},
|
},
|
||||||
screen3: {
|
screen3: {
|
||||||
miniTitle: '',
|
businessName: '',
|
||||||
title: '创新与<br />探索的氛围',
|
businessNameEnglish: '',
|
||||||
subtitle: '',
|
titleChinese: '',
|
||||||
titleEn: '',
|
|
||||||
carouselData: [],
|
|
||||||
carouselAutoplay: false,
|
|
||||||
currentIndicator: -1,
|
|
||||||
timer: null,
|
|
||||||
},
|
},
|
||||||
screen4: {
|
screen4: {
|
||||||
miniTitle: '',
|
businessName: '',
|
||||||
title: '合作共赢<br />的伙伴关系',
|
businessNameEnglish: '',
|
||||||
subtitle: '',
|
titleChinese: '',
|
||||||
titleEn: '',
|
|
||||||
carouselData: [],
|
|
||||||
carouselAutoplay: false,
|
|
||||||
currentIndicator: -1,
|
|
||||||
timer: null,
|
|
||||||
},
|
},
|
||||||
screen6: {
|
screen6: {
|
||||||
offsets: [2900, 3900],
|
|
||||||
offsetLevel: 1,
|
|
||||||
keyCase: {
|
|
||||||
title: '',
|
|
||||||
contentCn: '',
|
|
||||||
},
|
|
||||||
plateList: [],
|
|
||||||
joinUs: {
|
joinUs: {
|
||||||
title: '',
|
title: '',
|
||||||
contentCn: '',
|
contentCn: '',
|
||||||
|
|
@ -344,29 +100,9 @@ export default {
|
||||||
...mapState({
|
...mapState({
|
||||||
scrollTop: state => state.scroll.scrollTop,
|
scrollTop: state => state.scroll.scrollTop,
|
||||||
}),
|
}),
|
||||||
// playingVideoSrc () {
|
|
||||||
// return process.env.VUE_APP_FILE_TARGET_URL + '/video' + this.screen1.videoLink;
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
scrollTop (v) {
|
|
||||||
if (v < 50) {
|
|
||||||
this.$event.$emit('nav-theme', 'dark');
|
|
||||||
} else {
|
|
||||||
this.$event.$emit('nav-theme', 'light');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$route () {
|
|
||||||
if (this.$route.hash) {
|
|
||||||
this.forceScroll({
|
|
||||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
|
||||||
behavior: 'smooth',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.$event.$emit('nav-theme', 'dark');
|
this.$event.$emit('nav-theme', 'light');
|
||||||
this.getScreen1Banner();
|
this.getScreen1Banner();
|
||||||
this.getScreen1Info();
|
this.getScreen1Info();
|
||||||
this.getScreen2CarouselData(0);
|
this.getScreen2CarouselData(0);
|
||||||
|
|
@ -382,14 +118,6 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
|
||||||
if (this.screen2.timer) {
|
|
||||||
clearTimeout(this.screen2.timer);
|
|
||||||
}
|
|
||||||
if (this.screen4.timer) {
|
|
||||||
clearTimeout(this.screen4.timer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||||
async getScreen1Banner () {
|
async getScreen1Banner () {
|
||||||
|
|
@ -398,7 +126,6 @@ export default {
|
||||||
'/official/index/list',
|
'/official/index/list',
|
||||||
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/banner' } },
|
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/banner' } },
|
||||||
);
|
);
|
||||||
console.log(res);
|
|
||||||
this.screen1.imageurl = res.rows[0].imageurl;
|
this.screen1.imageurl = res.rows[0].imageurl;
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
|
|
@ -415,36 +142,27 @@ export default {
|
||||||
try {
|
try {
|
||||||
const res = await this.$request.get(
|
const res = await this.$request.get(
|
||||||
'/official/index/list',
|
'/official/index/list',
|
||||||
{ params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/跨领域的综合发展' } },
|
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/跨领域的综合发展' } },
|
||||||
);
|
);
|
||||||
this.screen2.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
|
Object.assign(this.screen2, res.rows[0]);
|
||||||
setTimeout(() => {
|
|
||||||
this.startScreen4Carousel(0, 2);
|
|
||||||
}, 100);
|
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
async getScreen3ListData () {
|
async getScreen3ListData () {
|
||||||
try {
|
try {
|
||||||
const res = await this.$request.get(
|
const res = await this.$request.get(
|
||||||
'/official/index/list',
|
'/official/index/list',
|
||||||
{ params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/创新与探索的氛围' } },
|
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/创新与探索的氛围' } },
|
||||||
);
|
);
|
||||||
this.screen3.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
|
Object.assign(this.screen3, res.rows[0]);
|
||||||
setTimeout(() => {
|
|
||||||
this.startScreen4Carousel(0, 3);
|
|
||||||
}, 100);
|
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
async getScreen4CarouselData () {
|
async getScreen4CarouselData () {
|
||||||
try {
|
try {
|
||||||
const res = await this.$request.get(
|
const res = await this.$request.get(
|
||||||
'/official/index/list',
|
'/official/index/list',
|
||||||
{ params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/合作共赢的伙伴关系' } },
|
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/合作共赢的伙伴关系' } },
|
||||||
);
|
);
|
||||||
this.screen4.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
|
Object.assign(this.screen4, res.rows[0]);
|
||||||
setTimeout(() => {
|
|
||||||
this.startScreen4Carousel(0, 4);
|
|
||||||
}, 100);
|
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
async getScreen6ListData () {
|
async getScreen6ListData () {
|
||||||
|
|
@ -453,23 +171,9 @@ export default {
|
||||||
'/official/index/list',
|
'/official/index/list',
|
||||||
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/joinus' } },
|
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/joinus' } },
|
||||||
);
|
);
|
||||||
this.screen6.joinUs.title = res.rows[0].businessName;
|
|
||||||
this.screen6.joinUs.contentCn = res.rows[0].titleChinese;
|
this.screen6.joinUs.contentCn = res.rows[0].titleChinese;
|
||||||
this.screen6.joinUs.imageSrc = res.rows[0].imageurl;
|
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
startScreen4Carousel (indicator, num) {
|
|
||||||
this[`screen${ num }`].currentIndicator = indicator;
|
|
||||||
if (this.$refs[`screen${ num }-carousel`]) {
|
|
||||||
this.$refs[`screen${ num }-carousel`].setActiveItem(indicator);
|
|
||||||
}
|
|
||||||
if (this[`screen${ num }`].timer) {
|
|
||||||
clearTimeout(this[`screen${ num }`].timer);
|
|
||||||
}
|
|
||||||
this[`screen${ num }`].timer = setTimeout(() => {
|
|
||||||
this.startScreen4Carousel((this[`screen${ num }`].currentIndicator + 1) % this[`screen${ num }`].carouselData.length, num);
|
|
||||||
}, 6000);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -477,201 +181,73 @@ export default {
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page-company {
|
.page-company {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screen1 {
|
|
||||||
height: calc(100vw / 1920 * 1080);
|
|
||||||
max-height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.screen2 {
|
.screen2 {
|
||||||
margin-top: 134rem;
|
padding: 90rem 130rem;
|
||||||
padding: 134rem 0;
|
background: #F5F5F7;
|
||||||
}
|
}
|
||||||
.screen3 {
|
.screen2 .title {
|
||||||
padding: 134rem 0;
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
}
|
font-size: 28rem;
|
||||||
.screen4 {
|
|
||||||
padding: 90rem 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.screen4 .title-cn {
|
|
||||||
font-family: MicrosoftYaHeiSemiBold;
|
|
||||||
font-size: 36rem;
|
|
||||||
color: #111111;
|
color: #111111;
|
||||||
line-height: 1;
|
line-height: 28rem;
|
||||||
text-align: center;
|
font-style: normal;
|
||||||
margin-bottom: 30rem;
|
text-transform: none;
|
||||||
|
margin-bottom: 40rem;
|
||||||
}
|
}
|
||||||
.screen4 .title-en {
|
.screen2 .titleChinese {
|
||||||
font-family: MicrosoftYaHeiLight;
|
font-family: MicrosoftYaHei;
|
||||||
font-size: 16rem;
|
font-size: 18rem;
|
||||||
color: #111111;
|
color: #333333;
|
||||||
line-height: 1;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 61rem;
|
|
||||||
}
|
|
||||||
.college-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-radius: 20rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.college-image {
|
|
||||||
margin-right: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 20rem;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.4s ease;
|
|
||||||
}
|
|
||||||
.college-image:hover {
|
|
||||||
transform: scale(1.1, 1.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.screen4 .college-main {
|
|
||||||
width: 565rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
.screen4 .college-mark {
|
|
||||||
font-size: 32rem;
|
|
||||||
line-height: 40rem;
|
line-height: 40rem;
|
||||||
color: #1E242E;
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
.screen4 .college-content {
|
|
||||||
font-family: MicrosoftYaHeiLight;
|
|
||||||
font-size: 18rem;
|
|
||||||
color: #111111;
|
|
||||||
line-height: 30rem;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
white-space: pre-line;
|
font-style: normal;
|
||||||
margin-top: 50rem;
|
text-transform: none;
|
||||||
padding: 0 2rem;
|
margin-bottom: 98rem;
|
||||||
}
|
}
|
||||||
.screen-content {
|
.screen2 .detailTitle {
|
||||||
display: flex;
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
justify-content: space-between;
|
font-size: 22rem;
|
||||||
align-items: center;
|
color: #000000;
|
||||||
|
line-height: 22rem;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
margin-bottom: 62rem;
|
||||||
}
|
}
|
||||||
.screen-content-left {
|
.discli {
|
||||||
width: 425rem;
|
list-style-type: disc;
|
||||||
margin-right: 120rem;
|
margin-left: 28rem;
|
||||||
}
|
}
|
||||||
.screen-content-num img {
|
.itemDetailTitle {
|
||||||
width: 190rem;
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
height: 127rem;
|
font-size: 24rem;
|
||||||
|
color: #014DB5;
|
||||||
|
line-height: 24rem;
|
||||||
|
margin-bottom: 25rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
}
|
}
|
||||||
.screen-content-num {
|
.itemDetailContent {
|
||||||
position: relative;
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
}
|
|
||||||
.mini-title {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 70rem;
|
|
||||||
margin-left: 7rem;
|
|
||||||
}
|
|
||||||
.screen-content-title {
|
|
||||||
position: relative;
|
|
||||||
font-family: MicrosoftYaHeiRegular;
|
|
||||||
margin-top: -40rem;
|
|
||||||
font-size: 60rem;
|
|
||||||
}
|
|
||||||
.screen-content-line {
|
|
||||||
margin: 30rem 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4rem;
|
|
||||||
background-color: #cccccc;
|
|
||||||
}
|
|
||||||
.carousel-item-title {
|
|
||||||
font-family: MicrosoftYaHeiLight;
|
|
||||||
font-size: 34rem;
|
|
||||||
margin: 20rem 0;
|
|
||||||
}
|
|
||||||
.carousel-item-desc {
|
|
||||||
font-family: MicrosoftYaHeiLight;
|
|
||||||
font-size: 18rem;
|
font-size: 18rem;
|
||||||
margin: 14rem 0;
|
color: #000000;
|
||||||
line-height: 36rem;
|
line-height: 40rem;
|
||||||
color: #363636;
|
margin-bottom: 94rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
}
|
}
|
||||||
.carousel-tab {
|
.screen3 .remarks{
|
||||||
position: absolute;
|
font-family: MicrosoftYaHei;
|
||||||
left: 0;
|
font-size: 18rem;
|
||||||
right: 0;
|
color: #333333;
|
||||||
bottom: 0;
|
line-height: 40rem;
|
||||||
display: flex;
|
text-align: left;
|
||||||
background: #f5f5f8;
|
font-style: normal;
|
||||||
z-index: 20;
|
text-transform: none;
|
||||||
}
|
|
||||||
.carousel-tab-item {
|
|
||||||
font-family: MicrosoftYaHeiLight;
|
|
||||||
flex: 1;
|
|
||||||
padding: 20rem 0;
|
|
||||||
font-size: 20rem;
|
|
||||||
color: #111111;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.carousel-tab-item.active {
|
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(135deg, #FF6500 0%, #FF414A 100%);
|
|
||||||
}
|
|
||||||
.screen-content-right {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
height: 700rem;
|
|
||||||
border-radius: 20rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screen6 {
|
|
||||||
position: relative;
|
|
||||||
height: 733rem;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
.screen6 .wrapper1680 {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.screen6 .plate-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.screen6 .plate-item {
|
|
||||||
width: 325rem;
|
|
||||||
height: 302rem;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 20rem;
|
|
||||||
}
|
|
||||||
.screen6 .plate-item:hover {
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
|
|
||||||
}
|
|
||||||
.screen6 .plate-item:hover img {
|
|
||||||
transition: transform 0.4s;
|
|
||||||
transform: scale(1.1, 1.1);
|
|
||||||
}
|
|
||||||
.screen6 .split-line {
|
|
||||||
border-bottom: 1rem solid;
|
|
||||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
|
||||||
}
|
|
||||||
.screen6 .join-btn-text {
|
|
||||||
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user