guowenhao/weilaizhixing_official_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加投资者相关界面

Browse Source
This commit is contained in:
wangchengming 2024-11-29 17:06:26 +08:00
parent 46e9549476
commit 6bbd973147
10 changed files with 1383 additions and 579 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/static/img/tempNews.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 470 KiB

4
src/assets/css/common.css
View File

@ -71,6 +71,10 @@ a:focus {
width: 1400rem;
margin: 0 auto;
}
.wrapper1518 {
width: 1518rem;
margin: 0 auto 0 0;
}
.wrapper1680 {
width: 1680rem;
margin: 0 auto;

6
src/components/FootBar.vue
View File

@ -179,9 +179,9 @@ export default {
{
title: '投资与合作',
children: [
{ title: '投资者', path: '/' },
{ title: '合作邀约', path: '/' },
{ title: '合作伙伴', path: '/' },
{ title: '投资者', path: '/investor' },
{ title: '合作邀约', path: '/cooperationOffer' },
{ title: '合作伙伴', path: '/businesspartner' },
],
},
{

6
src/components/NavBar.vue
View File

@ -114,9 +114,9 @@ export default {
{
title: '投资与合作',
children: [
{ title: '投资者', path: '/' },
{ title: '合作邀约', path: '/' },
{ title: '合作伙伴', path: '/' },
{ title: '投资者', path: '/investor' },
{ title: '合作邀约', path: '/cooperationOffer' },
{ title: '合作伙伴', path: '/businesspartner' },
],
},
{

22
src/router/index.js
View File

@ -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

153
src/views/About/ContactUs/Index.vue
View File

@ -55,46 +55,50 @@
</div>
<div class="screen3">
<div class="wrapper1680">
<div class="fkContent">
<div class="fkBar"></div>
<div class="fkTitle">
留言反馈
<div class="formContent">
<div class="formBarContent">
<div class="formBar"></div>
<div class="formTitle">
留言反馈
</div>
</div>
<el-form
:model="form"
label-width="110rem"
style="margin-top: 40rem"
>
<el-row>
<el-col :span="10">
<el-form-item label="标题">
<el-input v-model="form.title" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="反馈人">
<el-input v-model="form.feedbackPerson" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系方式">
<el-input v-model="form.contactWay" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="反馈内容">
<el-input
v-model="form.feedbackContent"
:autosize="{ minRows: 6, maxRows: 6 }"
type="textarea"
/>
</el-form-item>
<el-form-item label="">
<div class="fkRemark">
我们敬重每一位反馈人的留言，如您对我们有任何想法、要求或建议，敬请留言，我们会在第一时间受理并向您表示衷心的感谢。
</div>
</el-form-item>
<el-form-item style="text-align: center">
<div class="formBarContent">
<el-row>
<el-col :span="10">
<el-form-item label="标题">
<el-input v-model="form.title" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="反馈人">
<el-input v-model="form.feedbackPerson" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系方式">
<el-input v-model="form.contactWay" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="反馈内容">
<el-input
v-model="form.feedbackContent"
:autosize="{ minRows: 6, maxRows: 6 }"
type="textarea"
/>
</el-form-item>
<el-form-item label="">
<div class="formRemark">
我们敬重每一位反馈人的留言，如您对我们有任何想法、要求或建议，敬请留言，我们会在第一时间受理并向您表示衷心的感谢。
</div>
</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>
@ -264,16 +268,86 @@ export default {
background: #FFFFFF;
border-radius: 10rem 10rem 10rem 10rem;
}
.fkContent {
padding: 20rem 30rem;
.el-form-item {
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;
width: 4rem;
height: 20rem;
background: #014DB5;
}
.fkTitle {
.formTitle {
display: inline-block;
padding-left: 10rem;
font-family: MicrosoftYaHeiSemibold;
@ -284,7 +358,7 @@ export default {
font-style: normal;
text-transform: none;
}
.fkRemark {
.formRemark {
font-family: MicrosoftYaHei;
font-size: 18rem;
color: #BBBBBB;
@ -304,5 +378,6 @@ export default {
text-align: center;
font-style: normal;
text-transform: none;
padding: 12rem 20rem;
}
</style>

600
src/views/Invest/BusinessPartner/Index.vue Normal file
View 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
View 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
View 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>

644
src/views/Recruit/TalentStrategy/Index.vue
View File

@ -1,289 +1,67 @@
<template>
<div class="page-company">
<div style="height:104rem;"></div>
<div class="screen1">
<img
:src="screen1.imageurl"
alt=""
style="width: 100%;height: 100%;"
style="width: 100%"
/>
<div
class="box-posi-abs"
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 style="font-size: 48rem;line-height: 1;margin-bottom: 24rem;font-family: MicrosoftYaHeiLight;">
</div>
<div class="screen2">
<div class="wrapper1680">
<div class="title">
{{ screen1.introduction.businessName }}
</div>
<div style="font-size: 48rem;line-height: 1;margin-bottom: 80rem;font-family: MicrosoftYaHeiLight;">
{{ screen1.introduction.businessNameEnglish }}
</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 class="titleChinese">
{{ screen1.introduction.titleChinese }}
</div>
</div>
</div>
<div
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 class="wrapper1518">
<div class="detailTitle">
加入我们，您将体验到以前优势和基于：
</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
id="work-bar"
class="screen3"
>
<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 class="screen3">
<div class="wrapper1680">
<div class="remarks">
<span>{{ screen6.joinUs.contentCn }}</span>
</div>
</div>
</div>
</div>
<div
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>
<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: {
@ -295,43 +73,21 @@ export default {
},
},
screen2: {
miniTitle: '',
title: '跨领域<br />的综合发展',
subtitle: '',
titleEn: '',
carouselData: [],
carouselAutoplay: false,
currentIndicator: -1,
timer: null,
businessName: '',
businessNameEnglish: '',
titleChinese: '',
},
screen3: {
miniTitle: '',
title: '创新与<br />探索的氛围',
subtitle: '',
titleEn: '',
carouselData: [],
carouselAutoplay: false,
currentIndicator: -1,
timer: null,
businessName: '',
businessNameEnglish: '',
titleChinese: '',
},
screen4: {
miniTitle: '',
title: '合作共赢<br />的伙伴关系',
subtitle: '',
titleEn: '',
carouselData: [],
carouselAutoplay: false,
currentIndicator: -1,
timer: null,
businessName: '',
businessNameEnglish: '',
titleChinese: '',
},
screen6: {
offsets: [2900, 3900],
offsetLevel: 1,
keyCase: {
title: '',
contentCn: '',
},
plateList: [],
joinUs: {
title: '',
contentCn: '',
@ -344,29 +100,9 @@ export default {
...mapState({
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 () {
this.$event.$emit('nav-theme', 'dark');
this.$event.$emit('nav-theme', 'light');
this.getScreen1Banner();
this.getScreen1Info();
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: {
...mapMutations(['forceScroll', 'setScrollTop']),
async getScreen1Banner () {
@ -398,7 +126,6 @@ export default {
'/official/index/list',
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/banner' } },
);
console.log(res);
this.screen1.imageurl = res.rows[0].imageurl;
} catch (error) {}
},
@ -415,36 +142,27 @@ export default {
try {
const res = await this.$request.get(
'/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);
setTimeout(() => {
this.startScreen4Carousel(0, 2);
}, 100);
Object.assign(this.screen2, res.rows[0]);
} catch (error) {}
},
async getScreen3ListData () {
try {
const res = await this.$request.get(
'/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);
setTimeout(() => {
this.startScreen4Carousel(0, 3);
}, 100);
Object.assign(this.screen3, res.rows[0]);
} catch (error) {}
},
async getScreen4CarouselData () {
try {
const res = await this.$request.get(
'/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);
setTimeout(() => {
this.startScreen4Carousel(0, 4);
}, 100);
Object.assign(this.screen4, res.rows[0]);
} catch (error) {}
},
async getScreen6ListData () {
@ -453,23 +171,9 @@ export default {
'/official/index/list',
{ 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.imageSrc = res.rows[0].imageurl;
} 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>
@ -477,201 +181,73 @@ export default {
<style scoped>
.page-company {
width: 100%;
margin: 0 auto;
}
.screen1 {
height: calc(100vw / 1920 * 1080);
max-height: 100vh;
overflow: hidden;
position: relative;
}
.screen2 {
margin-top: 134rem;
padding: 134rem 0;
padding: 90rem 130rem;
background: #F5F5F7;
}
.screen3 {
padding: 134rem 0;
}
.screen4 {
padding: 90rem 0;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.screen4 .title-cn {
font-family: MicrosoftYaHeiSemiBold;
font-size: 36rem;
.screen2 .title {
font-family: MicrosoftYaHeiSemibold;
font-size: 28rem;
color: #111111;
line-height: 1;
text-align: center;
margin-bottom: 30rem;
line-height: 28rem;
font-style: normal;
text-transform: none;
margin-bottom: 40rem;
}
.screen4 .title-en {
font-family: MicrosoftYaHeiLight;
font-size: 16rem;
color: #111111;
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;
.screen2 .titleChinese {
font-family: MicrosoftYaHei;
font-size: 18rem;
color: #333333;
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;
white-space: pre-line;
margin-top: 50rem;
padding: 0 2rem;
font-style: normal;
text-transform: none;
margin-bottom: 98rem;
}
.screen-content {
display: flex;
justify-content: space-between;
align-items: center;
.screen2 .detailTitle {
font-family: MicrosoftYaHeiSemibold;
font-size: 22rem;
color: #000000;
line-height: 22rem;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: 62rem;
}
.screen-content-left {
width: 425rem;
margin-right: 120rem;
.discli {
list-style-type: disc;
margin-left: 28rem;
}
.screen-content-num img {
width: 190rem;
height: 127rem;
.itemDetailTitle {
font-family: MicrosoftYaHeiSemibold;
font-size: 24rem;
color: #014DB5;
line-height: 24rem;
margin-bottom: 25rem;
text-align: justifyLeft;
font-style: italic;
text-transform: none;
}
.screen-content-num {
position: relative;
}
.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;
.itemDetailContent {
font-family: MicrosoftYaHeiSemibold;
font-size: 18rem;
margin: 14rem 0;
line-height: 36rem;
color: #363636;
color: #000000;
line-height: 40rem;
margin-bottom: 94rem;
text-align: left;
white-space: pre-wrap;
font-style: italic;
text-transform: none;
}
.carousel-tab {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
background: #f5f5f8;
z-index: 20;
}
.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;
.screen3 .remarks{
font-family: MicrosoftYaHei;
font-size: 18rem;
color: #333333;
line-height: 40rem;
text-align: left;
font-style: normal;
text-transform: none;
}
</style>