diff --git a/public/static/img/tempNews.png b/public/static/img/tempNews.png
new file mode 100644
index 0000000..f427002
Binary files /dev/null and b/public/static/img/tempNews.png differ
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index cb9e3e1..0f20334 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -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;
diff --git a/src/components/FootBar.vue b/src/components/FootBar.vue
index dd61bb7..50a0b77 100644
--- a/src/components/FootBar.vue
+++ b/src/components/FootBar.vue
@@ -179,9 +179,9 @@ export default {
         {
           title: '投资与合作',
           children: [
-            { title: '投资者', path: '/' },
-            { title: '合作邀约', path: '/' },
-            { title: '合作伙伴', path: '/' },
+            { title: '投资者', path: '/investor' },
+            { title: '合作邀约', path: '/cooperationOffer' },
+            { title: '合作伙伴', path: '/businesspartner' },
           ],
         },
         {
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index cf0f206..95e36cb 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -114,9 +114,9 @@ export default {
         {
           title: '投资与合作',
           children: [
-            { title: '投资者', path: '/' },
-            { title: '合作邀约', path: '/' },
-            { title: '合作伙伴', path: '/' },
+            { title: '投资者', path: '/investor' },
+            { title: '合作邀约', path: '/cooperationOffer' },
+            { title: '合作伙伴', path: '/businesspartner' },
           ],
         },
         {
diff --git a/src/router/index.js b/src/router/index.js
index d2d4318..3bc614b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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
diff --git a/src/views/About/ContactUs/Index.vue b/src/views/About/ContactUs/Index.vue
index 9000c32..0913a7e 100644
--- a/src/views/About/ContactUs/Index.vue
+++ b/src/views/About/ContactUs/Index.vue
@@ -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>
diff --git a/src/views/Invest/BusinessPartner/Index.vue b/src/views/Invest/BusinessPartner/Index.vue
new file mode 100644
index 0000000..f886bb7
--- /dev/null
+++ b/src/views/Invest/BusinessPartner/Index.vue
@@ -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>
diff --git a/src/views/Invest/CooperationOffer/Index.vue b/src/views/Invest/CooperationOffer/Index.vue
new file mode 100644
index 0000000..d767c3b
--- /dev/null
+++ b/src/views/Invest/CooperationOffer/Index.vue
@@ -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>
diff --git a/src/views/Invest/Investor/Index.vue b/src/views/Invest/Investor/Index.vue
new file mode 100644
index 0000000..8567852
--- /dev/null
+++ b/src/views/Invest/Investor/Index.vue
@@ -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>
diff --git a/src/views/Recruit/TalentStrategy/Index.vue b/src/views/Recruit/TalentStrategy/Index.vue
index 0d4c263..ee7508c 100644
--- a/src/views/Recruit/TalentStrategy/Index.vue
+++ b/src/views/Recruit/TalentStrategy/Index.vue
@@ -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>