diff --git a/public/static/img/about/aboutBanner.png b/public/static/img/about/aboutBanner.png
new file mode 100644
index 0000000..2560fd8
Binary files /dev/null and b/public/static/img/about/aboutBanner.png differ
diff --git a/src/components/FootBar.vue b/src/components/FootBar.vue
index 7c2e80d..d67ee22 100644
--- a/src/components/FootBar.vue
+++ b/src/components/FootBar.vue
@@ -148,17 +148,17 @@ export default {
         {
           title: '关于我们',
           children: [
-            { title: '简介', path: '/', hash: 'develop-bar' },
-            { title: '使命', path: '/', hash: 'work-bar' },
-            { title: '远景', path: '/', hash: 'life-bar' },
-            { title: '价值观', path: '/' },
+            { title: '简介' },
+            { title: '使命' },
+            { title: '远景' },
+            { title: '价值观' },
           ],
         },
         {
           title: '业务领域',
           children: [
-            { title: '资本服务', path: '/' },
-            { title: '高薪技术', path: '/' },
+            { title: '资本服务', path: '/business/capitalServices' },
+            { title: '高薪技术', path: '/business/highTech' },
             { title: '能源环保', path: '/' },
             { title: '全球供应链', path: '/' },
             { title: '商业管理', path: '/' },
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 805e1a0..16a734d 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -88,20 +88,12 @@ export default {
           title: '首页',
           path: '/',
         },
-        {
-          title: '关于我们',
-          children: [
-            { title: '简介', path: '/' },
-            { title: '使命', path: '/' },
-            { title: '远景', path: '/' },
-            { title: '价值观', path: '/' },
-          ],
-        },
+        { title: '关于我们', path: '/about/companyIntroduction' },
         {
           title: '业务领域',
           children: [
-            { title: '资本服务', path: '/' },
-            { title: '高薪技术', path: '/' },
+            { title: '资本服务', path: '/business/capitalServices' },
+            { title: '高薪技术', path: '/business/highTech' },
             { title: '能源环保', path: '/' },
             { title: '全球供应链', path: '/' },
             { title: '商业管理', path: '/' },
diff --git a/src/router/index.js b/src/router/index.js
index c428560..5853f64 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,6 +20,16 @@ const routes = [
     path: '/business',
     component: RouteView,
     children: [
+      {
+        path: '/business/capitalServices',
+        component: (resolve) =>
+          require(['../views/Business/CapitalServices/Index.vue'], resolve),
+      },
+      {
+        path: '/business/highTech',
+        component: (resolve) =>
+          require(['../views/Business/HighTech/Index.vue'], resolve),
+      },
       {
         path: '/business/index',
         component: (resolve) =>
diff --git a/src/views/About/CompanyIntroduction/Index.vue b/src/views/About/CompanyIntroduction/Index.vue
index e36c10d..44a1083 100644
--- a/src/views/About/CompanyIntroduction/Index.vue
+++ b/src/views/About/CompanyIntroduction/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-company">
     <div class="screen1">
-      <video
+      <!-- <video
         ref="video"
         :src="playingVideoSrc"
         style="width: 100%;filter: blur(2rem);"
@@ -9,19 +9,31 @@
         :controls="false"
         loop="true"
         muted="true"
-      ></video>
+      ></video> -->
+      <img
+        src="/static/img/about/aboutBanner.png"
+        alt=""
+        style="width: 100%;height: 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: center;transform: translateY(-50%);"
+        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: 40rem;font-family: MicrosoftYaHeiLight;">
+        <div style="font-size: 48rem;line-height: 1;margin-bottom: 24rem;font-family: MicrosoftYaHeiLight;">
           {{ screen1.introduction.businessName }}
         </div>
-        <div style="font-size: 72rem;line-height: 1;letter-spacing: 8rem;">
-          {{ screen1.introduction.titleChinese }}
+        <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: 16rem;width: 608rem;line-height: 40rem;margin-bottom: 70rem;letter-spacing: 0rem;"
+        >
+          {{ textEn }}
         </div>
         <div style="flex: 1;"></div>
-        <div
+        <!-- <div
           style="width: 61rem;height: 61rem;cursor: pointer;"
           @click="handleShowVideo"
         >
@@ -30,13 +42,13 @@
             alt=""
             style="width: 100%;height: 100%;"
           >
-        </div>
-        <div style="font-size: 24rem;line-height: 1;margin-top: 34rem;font-family: MicrosoftYaHeiLight;">
+        </div> -->
+        <!-- <div style="font-size: 24rem;line-height: 1;margin-top: 34rem;font-family: MicrosoftYaHeiLight;">
           观看视频
-        </div>
+        </div> -->
       </div>
     </div>
-    <div class="screen2">
+    <!-- <div class="screen2">
       <div class="wrapper1920">
         <div class="list-wrapper">
           <div
@@ -89,7 +101,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
     <div
       v-for="(item, index) in screenList"
       :key="index"
@@ -147,7 +159,7 @@
           <transition name="fade-slide-bottom">
             <div
               v-show="item.offsetLevel >= 0"
-              style="--tde:0.8s;width: 66rem; height: 4rem; background-color: #D70D18;margin-top:40rem;"
+              style="--tde:0.8s;width: 66rem; height: 4rem; background-color: #FFAE00;margin-top:40rem;"
             ></div>
           </transition>
         </div>
@@ -177,7 +189,7 @@
           <div
             v-show="screen5.offsetLevel >= 0"
             class="box-posi-abs"
-            style="--tde:0.5s;--l: 50%; --t: 311rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
+            style="--tde:0.5s;--l: 50%; --t: 311rem;--w: 66rem; --h: 4rem; background-color: #FFAE00;transform: translateX(-50%);"
           ></div>
         </transition>
         <div
@@ -268,6 +280,7 @@ export default {
         videoLink: '',
         introduction: {
           businessName: '',
+          businessNameEnglish: '',
           titleChinese: '',
         },
         videoVisible: false,
@@ -298,7 +311,7 @@ export default {
         offsets: [3200],
         offsetLevel: -1,
         title: '我们的价值观',
-        contentCn: '我们的价值观体现并定义了在昊坤能源工作的意义。\n它们是我们文化和经营哲学的核心。',
+        contentCn: '我们的价值观体现并定义了未来之星工作的意义。\n它们是我们文化和经营方式的核心。',
         list: [],
       },
       screen6: {
@@ -358,9 +371,9 @@ export default {
   },
   created () {
     this.$event.$emit('nav-theme', 'dark');
-    this.getScreen1Banner();
+    // this.getScreen1Banner();
     this.getScreen1DialogVideo();
-    this.getScreen2ListData();
+    // this.getScreen2ListData();
     this.getScreenListContent('我们的使命', this.screen3);
     this.getScreenListContent('我们的愿景', this.screen4);
     this.getScreen5ListData();
@@ -452,7 +465,7 @@ export default {
   overflow: hidden;
   position: relative;
 }
-.screen1::after {
+/* .screen1::after {
   content: '';
   position: absolute;
   left: 0;
@@ -461,7 +474,7 @@ export default {
   width: 100%;
   height: 100%;
   background-color: #000000aa;
-}
+} */
 
 .screen2 {
   background-color: #ffffff;
@@ -534,6 +547,9 @@ export default {
   height: 720rem;
   background: #FFFFFF;
 }
+.screen3{
+  margin-top: 90rem;
+}
 .screen4{
   margin-top: 90rem;
 }
diff --git a/src/views/About/SocialResponsibility/Index.vue b/src/views/About/SocialResponsibility/Index.vue
index a717048..cc9ee33 100644
--- a/src/views/About/SocialResponsibility/Index.vue
+++ b/src/views/About/SocialResponsibility/Index.vue
@@ -27,7 +27,7 @@
                 v-html="screen2.contentCn"
               ></div>
             </transition>
-            <transition name="fade-slide-bottom">
+            <!-- <transition name="fade-slide-bottom">
               <div
                 v-show="screen2.offsetLevel >= 0"
                 class="learn-more"
@@ -41,7 +41,7 @@
                   <ArrowHalfRound />
                 </div>
               </div>
-            </transition>
+            </transition> -->
           </div>
         </div>
       </div>
@@ -52,12 +52,12 @@
 
 <script>
 import { mapState } from 'vuex';
-import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
+// import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
 import FootBar from '@/components/FootBar.vue';
 
 export default {
   components: {
-    ArrowHalfRound,
+    // ArrowHalfRound,
     FootBar,
   },
   data () {
diff --git a/src/views/Business/CapitalServices/Index.vue b/src/views/Business/CapitalServices/Index.vue
new file mode 100644
index 0000000..1785144
--- /dev/null
+++ b/src/views/Business/CapitalServices/Index.vue
@@ -0,0 +1,733 @@
+<template>
+  <div class="page-construction">
+    <div class="screen1">
+      <div style="height:104rem;"></div>
+    </div>
+    <div class="screen2">
+      <div class="wrapper1680">
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="text-posi-abs"
+            style="--t:53rem;--l:0rem;--c:#ff0000;"
+          >
+            {{ screen2.title }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="text-posi-abs"
+            style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
+          >
+            资本服务
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="text-posi-abs"
+            style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;"
+          >
+            {{ screen2.contentCn }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="image-posi-abs"
+            style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
+          >
+            <img
+              :src="screen2.imageSrc"
+              alt=""
+              style="width:100%;height:100%;"
+            >
+          </div>
+        </transition>
+      </div>
+    </div>
+    <div class="screen3">
+      <div class="wrapper1680">
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen3.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
+          >
+            {{ screen3.titleCn }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen3.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
+          >
+            {{ screen3.contentCn }}
+          </div>
+        </transition>
+        <!-- <transition name="fade-slide-bottom">
+          <div
+            v-show="screen3.offsetLevel >= 0"
+            class="box-posi-abs"
+            style="--tde:0.5s;--l: 50%; --t: 342rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
+          ></div>
+        </transition> -->
+        <div class="list-wrapper">
+          <div
+            v-for="(item, index) in screen3.list"
+            :key="item.id"
+            class="list-item"
+          >
+            <transition name="scale">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-img"
+                :style="`--tde:${0.6 + index * 0.05}s;`"
+              >
+                <img
+                  :src="item.imageurl"
+                  alt=""
+                >
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-title"
+                :style="`--tde:${0.9 + index * 0.05}s;`"
+              >
+                {{ item.businessName }}
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-content"
+                :style="`--tde:${1.2 + index * 0.05}s;`"
+              >
+                {{ item.titleChinese }}
+              </div>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="screen6">
+      <div class="wrapper1680">
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen6.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
+          >
+            {{ screen6.titleCn }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen6.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
+          >
+            {{ screen6.contentCn }}
+          </div>
+        </transition>
+        <div class="list-wrapper">
+          <div
+            v-for="(item, index) in screen6.list"
+            :key="item.id"
+            class="list-item"
+          >
+            <transition name="scale">
+              <div
+                v-show="screen6.offsetLevel >= 0"
+                class="list-img"
+                :style="`--tde:${0.6 + index * 0.05}s;`"
+              >
+                <img
+                  :src="item.imageurl"
+                  alt=""
+                >
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen6.offsetLevel >= 0"
+                class="list-title"
+                :style="`--tde:${0.9 + index * 0.05}s;`"
+              >
+                {{ item.businessName }}
+              </div>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="screen4">
+      <div class="wrapper1680">
+        <div
+          v-for="(item, index) in screen4.list"
+          :key="item.id"
+          class="list-item"
+        >
+          <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
+            <div
+              class="content-wrapper"
+              :style="`--tdu:0.5s;--initial:#f5f5f8;`"
+            >
+              <div class="title">
+                {{ item.businessName }}
+              </div>
+              <div class="content">
+                {{ item.titleChinese }}
+              </div>
+              <!-- <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
+                <div
+                  v-show="screen4.offsetLevel >= index"
+                  style="--tdu:0.5s;--tde:0.3s;width:66rem;height:4rem;background-color:#D70D18;margin:40rem 5rem 0;"
+                ></div>
+              </transition> -->
+            </div>
+          </transition>
+          <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
+            <div
+              class="image-wrapper"
+              :style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
+            >
+              <img
+                :src="item.imageurl"
+                alt=""
+                style="width:100%;height:100%;"
+              >
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+    <div class="screen5">
+      <div class="wrapper1680">
+        <!-- <transition name="fade-slide-bottom">
+          <div
+            v-show="screen5.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:120rem;--l:0rem;--w:100%;--fs:24rem;--c:#111111;--ta:center;"
+          >
+            项目案例
+          </div>
+        </transition> -->
+        <!-- <transition name="fade-slide-bottom">
+          <div
+            v-show="screen5.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:174rem;--l:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ta:center;--tde:0.3s;"
+          >
+            {{ screen5.keyCase.title }}
+          </div>
+        </transition> -->
+        <!-- <transition name="fade-slide-bottom">
+          <div
+            v-show="screen5.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:255rem;--l:0rem;--w:100%;--fs:20rem;--lh:34rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ta:center;--ws:pre-line;--tde:0.6s;"
+          >
+            {{ screen5.keyCase.contentCn }}
+          </div>
+        </transition> -->
+        <!-- <transition name="fade-slide-bottom">
+          <div
+            v-show="screen5.offsetLevel >= 0"
+            class="box-posi-abs"
+            style="--tde:0.5s;--l: 50%; --t: 397rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
+          ></div>
+        </transition>
+        <div
+          class="box-posi-abs plate-wrapper"
+          style="--l:0;--r:0;--t:545rem;--w:100%;--h:550rem;"
+        >
+          <div
+            v-for="(item, index) in screen5.plateList"
+            :key="item.id"
+            class="plate-item"
+          >
+            <transition name="fade-slide-bottom">
+              <img
+                v-show="screen5.offsetLevel >= 0"
+                :src="item.imageurl"
+                alt=""
+                :style="`width:100%;height:100%;--tde:${0.9+0.1*index}s;`"
+              />
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen5.offsetLevel >= 0"
+                class="text-posi-abs"
+                :style="`--t:121rem;--l:0;--w:100%;--h:auto;--fs:30rem;--c:#ffffff;--ta:center;--tde:${0.9+0.1*index}s;`"
+              >
+                {{ item.businessName }}
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen5.offsetLevel >= 0"
+                class="text-posi-abs"
+                :style="`--t:166rem;--l:0;--w:100%;--h:auto;--fs:18rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:center;--tde:${0.9+0.1*index}s;`"
+              >
+                {{ item.businessNameEnglish }}
+              </div>
+            </transition>
+          </div>
+        </div> -->
+        <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="screen5.joinUs.imageSrc"
+            alt=""
+            style="width:100%;height:100%;"
+          >
+        </div>
+        <transition name="fade-slide-left">
+          <div
+            v-show="screen5.offsetLevel >= 1"
+            class="text-posi-abs"
+            style="--t:243rem;--l:118rem;--fs:30rem;--c:#ffffff;"
+          >
+            {{ screen5.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;"
+        >
+          {{ screen5.joinUs.contentCn }}
+        </div>
+        <div
+          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;"
+        >
+          <!-- @click="$router.push('/recruit/socialRecruit')" -->
+          <span class="join-btn-text">JOIN US</span>
+        </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 {
+      screen2: {
+        show: false,
+        title: '',
+        contentCn: '',
+        imageSrc: '',
+      },
+      screen3: {
+        offsets: [800],
+        offsetLevel: -1,
+        titleCn: '',
+        contentCn: '',
+        list: [],
+      },
+      screen4: {
+        offsets: [1700, 2000],
+        offsetLevel: -1,
+        list: [],
+      },
+      screen5: {
+        offsets: [2900, 3900],
+        offsetLevel: -1,
+        keyCase: {
+          title: '',
+          contentCn: '',
+        },
+        plateList: [],
+        joinUs: {
+          title: '',
+          contentCn: '',
+          imageSrc: '',
+        },
+      },
+      screen6: {
+        offsets: [800],
+        offsetLevel: 1,
+        titleCn: '',
+        contentCn: '',
+        list: [],
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      scrollTop: state => state.scroll.scrollTop,
+      webScale: state => state.web.scale,
+    }),
+  },
+  watch: {
+    scrollTop (val) {
+      const v = val / this.webScale;
+      const i3 = this.screen3.offsetLevel + 1;
+      if (v >= this.screen3.offsets[i3]) {
+        this.screen3.offsetLevel = i3;
+      }
+      const i4 = this.screen4.offsetLevel + 1;
+      if (v >= this.screen4.offsets[i4]) {
+        this.screen4.offsetLevel = i4;
+      }
+      const i5 = this.screen5.offsetLevel + 1;
+      if (v >= this.screen5.offsets[i5]) {
+        this.screen5.offsetLevel = i5;
+      }
+    },
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen2Data();
+    this.getScreen3Data();
+    this.getScreen3ListData();
+    this.getScreen4ListData();
+    // this.getScreen5KeyCaseData();
+    // this.getScreen5PlateListData();
+    this.getScreen5JoinusData();
+    this.getScreen6Data();
+    this.getScreen6ListData();
+  },
+  methods: {
+    async getScreen2Data () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/主要内容' } },
+        );
+        this.screen2.title = res.rows[0].businessName;
+        this.screen2.contentCn = res.rows[0].titleChinese;
+        this.screen2.imageSrc = res.rows[0].imageurl;
+        this.screen2.show = true;
+      } catch (error) {}
+    },
+    async getScreen3Data () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/项目描述' } },
+        );
+        this.screen3.titleCn = res.rows[0].businessName;
+        this.screen3.contentCn = res.rows[0].titleChinese;
+      } catch (error) {}
+    },
+    async getScreen3ListData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 6, captionName: '业务领域/资本服务/项目案例' } },
+        );
+        this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
+      } catch (error) {}
+    },
+    async getScreen4ListData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 3, captionName: '业务领域/资本服务/技术支持' } },
+        );
+        this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
+      } catch (error) {}
+    },
+    // async getScreen5KeyCaseData () {
+    //   try {
+    //     const res = await this.$request.get(
+    //       '/official/index/list',
+    //       { params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/重点案例' } },
+    //     );
+    //     this.screen5.keyCase.title = res.rows[0].businessName;
+    //     this.screen5.keyCase.contentCn = res.rows[0].titleChinese;
+    //   } catch (error) {}
+    // },
+    // async getScreen5PlateListData () {
+    //   try {
+    //     const res = await this.$request.get(
+    //       '/official/index/list',
+    //       { params: { pageNum: 1, pageSize: 4, captionName: '业务范围/基建业务/重点案例主题' } },
+    //     );
+    //     this.screen5.plateList = res.rows.sort((a, b) => a.orders - b.orders);
+    //   } catch (error) {}
+    // },
+    async getScreen5JoinusData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/joinus' } },
+        );
+        this.screen5.joinUs.title = res.rows[0].businessName;
+        this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
+        this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
+      } catch (error) {}
+    },
+    async getScreen6Data () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/渠道描述' } },
+        );
+        this.screen6.titleCn = res.rows[0].businessName;
+        this.screen6.contentCn = res.rows[0].titleChinese;
+      } catch (error) {}
+    },
+    async getScreen6ListData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/资本服务/资本渠道' } },
+        );
+        this.screen6.list = res.rows.sort((a, b) => a.orders - b.orders);
+      } catch (error) {}
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page-construction {
+  width: 100%;
+}
+.screen1 {
+  position: relative;
+  z-index: 1;
+  background-color: #ffffff;
+}
+.screen2 {
+  position: relative;
+  height: 1186rem;
+  background-color: #ffffff;
+}
+.screen2 .wrapper1680 {
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  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;
+}
+.screen3 {
+  position: relative;
+  height: 1260rem;
+  background-color: #ffffff;
+}
+.screen3 .wrapper1680 {
+  height: 100%;
+  position: relative;
+}
+.screen3 .list-wrapper {
+  /* position: absolute;
+  top: 443rem;
+  width: 100%;
+  display: flex; */
+  position: absolute;
+    top: 400rem;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0px 140rem;
+    box-sizing: border-box;
+}
+.screen3 .list-item {
+  /* width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform: scale(1, 1);
+  transition: transform 0.3s;
+  transform-origin: center center;
+  cursor: pointer; */
+    margin: 0 58rem;
+    width: 350rem;
+    height: 350rem;
+    margin-bottom: 90rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+.screen3 .list-item:hover {
+  transform: scale(1.1, 1.1);
+}
+.screen3 .list-img {
+  width: 150rem;
+  height: 150rem;
+  margin-bottom: 40rem;
+}
+.screen3 .list-title {
+  text-align: center;
+  font-size: 20rem;
+  line-height: 1;
+  color: #111111;
+  margin-bottom: 26rem;
+}
+.screen3 .list-content {
+  width: 280rem;
+  white-space: normal;
+  text-align: center;
+  font-family: MicrosoftYaHeiLight;
+  font-size: 14rem;
+  line-height: 22rem;
+  color: #333333;
+}
+.screen4 {
+  position: relative;
+  height: 1850rem;
+  background-color: #FFFFFF;
+}
+.screen4 .wrapper1680 {
+  padding: 124rem 0;
+}
+.screen4 .list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.screen4 .list-item:nth-of-type(2n-1) {
+  flex-direction: row;
+}
+.screen4 .list-item:nth-of-type(2n) {
+  flex-direction: row-reverse;
+}
+.screen4 .list-item + .list-item {
+  margin-top: 52rem;
+}
+.screen4 .content-wrapper {
+  width: 755rem;
+}
+.screen4 .content-wrapper .title {
+  padding: 0 1rem;
+  font-family: MicrosoftYaHeiLight;
+  font-size: 42rem;
+  color: #111111;
+  margin-bottom: 36rem;
+}
+.screen4 .content-wrapper .content {
+  padding: 5rem;
+  font-family: MicrosoftYaHeiLight;
+  font-size: 20rem;
+  line-height: 36rem;
+}
+.screen4 .list-item:nth-of-type(2n) .content-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
+  text-align: left;
+}
+.screen4 .image-wrapper {
+  width: 752rem;
+  height: 510rem;
+  border-radius: 20rem;
+  overflow: hidden;
+}
+.screen4 .image-wrapper img {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s;
+}
+.screen4 .image-wrapper:hover img {
+  transform: scale(1.1);
+}
+.screen5 {
+  position: relative;
+  height: 733rem;
+  background-color: #ffffff;
+}
+.screen5 .wrapper1680 {
+  height: 100%;
+  position: relative;
+}
+.screen5 .plate-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.screen5 .plate-item {
+  width: 325rem;
+  height: 302rem;
+  position: relative;
+  cursor: pointer;
+  border-radius: 20rem;
+}
+.screen5 .plate-item:hover {
+  overflow: hidden;
+  box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
+}
+.screen5 .plate-item:hover img {
+  transition: transform 0.4s;
+  transform: scale(1.1, 1.1);
+}
+.screen5 .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;
+}
+.screen5 .join-btn-text {
+  background-image: linear-gradient(90deg, #FF0300, #FFAA05);
+  background-clip: text;
+  color: transparent;
+}
+.screen6 {
+  position: relative;
+  height: 800rem;
+  background-color: rgb(245, 244, 249);
+}
+.screen6 .wrapper1680 {
+  height: 100%;
+  position: relative;
+}
+.screen6 .list-wrapper {
+  position: absolute;
+  top: 400rem;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0px 140rem;
+  box-sizing: border-box;
+}
+.screen6 .list-item {
+  border-radius: 20rem;
+  background: #ffffff;
+  margin: 0 45rem;
+  width: 260rem;
+  height: 260rem;
+  margin-bottom: 90rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.screen6 .list-item:hover {
+  transform: scale(1.1, 1.1);
+}
+.screen6 .list-img {
+  width: 150rem;
+  height: 150rem;
+  display: contents;
+}
+.screen6 .list-title {
+  text-align: center;
+  font-size: 20rem;
+  line-height: 1;
+  color: #111111;
+  margin-top: 26rem;
+}
+</style>
diff --git a/src/views/Business/HighTech/Index.vue b/src/views/Business/HighTech/Index.vue
new file mode 100644
index 0000000..0d9bca6
--- /dev/null
+++ b/src/views/Business/HighTech/Index.vue
@@ -0,0 +1,538 @@
+<template>
+  <div class="page-construction">
+    <div class="screen1">
+      <div style="height:104rem;"></div>
+    </div>
+    <div class="screen2">
+      <div class="wrapper1680">
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="text-posi-abs"
+            style="--t:53rem;--l:0rem;--c:#ff0000;"
+          >
+            {{ screen2.title }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="text-posi-abs"
+            style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
+          >
+            高薪技术
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="text-posi-abs"
+            style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
+          >
+            {{ screen2.contentCn }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen2.show"
+            class="image-posi-abs"
+            style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
+          >
+            <img
+              :src="screen2.imageSrc"
+              alt=""
+              style="width:100%;height:100%;"
+            >
+          </div>
+        </transition>
+      </div>
+    </div>
+    <div class="screen3">
+      <div class="wrapper1680">
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen3.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
+          >
+            {{ screen3.titleCn }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen3.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
+          >
+            {{ screen3.contentCn }}
+          </div>
+        </transition>
+        <div class="list-wrapper">
+          <div
+            v-for="(item, index) in screen3.list.slice(0,3)"
+            :key="item.id"
+            class="list-item"
+          >
+            <transition name="scale">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-img"
+                :style="`--tde:${0.6 + index * 0.05}s;`"
+              >
+                <img
+                  :src="item.imageurl"
+                  alt=""
+                >
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-title"
+                :style="`--tde:${0.9 + index * 0.05}s;`"
+              >
+                {{ item.businessName }}
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-content"
+                :style="`--tde:${1.2 + index * 0.05}s;`"
+              >
+                {{ item.titleChinese }}
+              </div>
+            </transition>
+          </div>
+        </div>
+        <div class="list-wrapper2">
+          <div
+            v-for="(item, index) in screen3.list.slice(3,5)"
+            :key="item.id"
+            class="list-item"
+          >
+            <transition name="scale">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-img"
+                :style="`--tde:${0.6 + index * 0.05}s;`"
+              >
+                <img
+                  :src="item.imageurl"
+                  alt=""
+                >
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-title"
+                :style="`--tde:${0.9 + index * 0.05}s;`"
+              >
+                {{ item.businessName }}
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen3.offsetLevel >= 0"
+                class="list-content"
+                :style="`--tde:${1.2 + index * 0.05}s;`"
+              >
+                {{ item.titleChinese }}
+              </div>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="screen4">
+      <div class="wrapper1680">
+        <div
+          v-for="(item, index) in screen4.list"
+          :key="item.id"
+          class="list-item"
+        >
+          <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
+            <div
+              class="content-wrapper"
+              :style="`--tdu:0.5s;--initial:#f5f5f8;`"
+            >
+              <div class="title">
+                {{ item.businessName }}
+              </div>
+              <div class="content">
+                {{ item.titleChinese }}
+              </div>
+            </div>
+          </transition>
+          <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
+            <div
+              class="image-wrapper"
+              :style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
+            >
+              <img
+                :src="item.imageurl"
+                alt=""
+                style="width:100%;height:100%;"
+              >
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+    <div class="screen5">
+      <div class="wrapper1680">
+        <div
+          class="box-posi-abs"
+          style="--t:90rem;--w:100%;--h:1rem;"
+        >
+          <div class="split-line"></div>
+        </div>
+        <div
+          class="image-posi-abs"
+          style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
+        >
+          <img
+            :src="screen5.joinUs.imageSrc"
+            alt=""
+            style="width:100%;height:100%;"
+          >
+        </div>
+        <transition name="fade-slide-left">
+          <div
+            v-show="screen5.offsetLevel >= 1"
+            class="text-posi-abs"
+            style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
+          >
+            {{ screen5.joinUs.title }}
+          </div>
+        </transition>
+        <div
+          class="text-posi-abs"
+          style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
+        >
+          {{ screen5.joinUs.contentCn }}
+        </div>
+        <div
+          class="text-posi-abs"
+          style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
+        >
+          <!-- @click="$router.push('/recruit/socialRecruit')" -->
+          <span class="join-btn-text">JOIN US</span>
+        </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 {
+      screen2: {
+        show: false,
+        title: '',
+        contentCn: '',
+        imageSrc: '',
+      },
+      screen3: {
+        offsets: [800],
+        offsetLevel: -1,
+        titleCn: '',
+        contentCn: '',
+        list: [],
+      },
+      screen4: {
+        offsets: [1700, 2000],
+        offsetLevel: -1,
+        list: [],
+      },
+      screen5: {
+        offsets: [2900, 3900],
+        offsetLevel: -1,
+        keyCase: {
+          title: '',
+          contentCn: '',
+        },
+        plateList: [],
+        joinUs: {
+          title: '',
+          contentCn: '',
+          imageSrc: '',
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      scrollTop: state => state.scroll.scrollTop,
+      webScale: state => state.web.scale,
+    }),
+  },
+  watch: {
+    scrollTop (val) {
+      const v = val / this.webScale;
+      const i3 = this.screen3.offsetLevel + 1;
+      if (v >= this.screen3.offsets[i3]) {
+        this.screen3.offsetLevel = i3;
+      }
+      const i4 = this.screen4.offsetLevel + 1;
+      if (v >= this.screen4.offsets[i4]) {
+        this.screen4.offsetLevel = i4;
+      }
+      const i5 = this.screen5.offsetLevel + 1;
+      if (v >= this.screen5.offsets[i5]) {
+        this.screen5.offsetLevel = i5;
+      }
+    },
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen2Data();
+    this.getScreen3Data();
+    this.getScreen3ListData();
+    this.getScreen4ListData();
+    this.getScreen5JoinusData();
+  },
+  methods: {
+    async getScreen2Data () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/高薪技术/主要内容' } },
+        );
+        this.screen2.title = res.rows[0].businessName;
+        this.screen2.contentCn = res.rows[0].titleChinese;
+        this.screen2.imageSrc = res.rows[0].imageurl;
+        this.screen2.show = true;
+      } catch (error) {}
+    },
+    async getScreen3Data () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/高薪技术/项目描述' } },
+        );
+        this.screen3.titleCn = res.rows[0].businessName;
+        this.screen3.contentCn = res.rows[0].titleChinese;
+      } catch (error) {}
+    },
+    async getScreen3ListData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 6, captionName: '业务领域/高薪技术/项目案例' } },
+        );
+        this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
+      } catch (error) {}
+    },
+    async getScreen4ListData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/高薪技术/技术支持' } },
+        );
+        this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
+      } catch (error) {}
+    },
+    async getScreen5JoinusData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/高薪技术/joinus' } },
+        );
+        this.screen5.joinUs.title = res.rows[0].businessName;
+        this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
+        this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
+      } catch (error) {}
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page-construction {
+  width: 100%;
+}
+.screen1 {
+  position: relative;
+  z-index: 1;
+  background-color: #ffffff;
+}
+.screen2 {
+  position: relative;
+  height: 1186rem;
+  background-color: #ffffff;
+}
+.screen2 .wrapper1680 {
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  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;
+}
+.screen3 {
+  position: relative;
+  height: 1300rem;
+  background-color: #ffffff;
+}
+.screen3 .wrapper1680 {
+  height: 100%;
+  position: relative;
+}
+.screen3 .list-wrapper {
+  position: absolute;
+  top: 400rem;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0px 140rem;
+  box-sizing: border-box;
+}
+.screen3 .list-wrapper2 {
+  position: absolute;
+  top: 840rem;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0px 370rem;
+  box-sizing: border-box;
+}
+.screen3 .list-item {
+  margin: 0 58rem;
+  width: 350rem;
+  height: 350rem;
+  margin-bottom: 90rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.screen3 .list-item:hover {
+  transform: scale(1.1, 1.1);
+}
+.screen3 .list-img {
+  width: 150rem;
+  height: 150rem;
+  margin-bottom: 40rem;
+}
+.screen3 .list-title {
+  text-align: center;
+  font-size: 20rem;
+  line-height: 1;
+  color: #111111;
+  margin-bottom: 26rem;
+}
+.screen3 .list-content {
+  width: 280rem;
+  white-space: normal;
+  text-align: center;
+  font-family: MicrosoftYaHeiLight;
+  font-size: 14rem;
+  line-height: 22rem;
+  color: #333333;
+}
+.screen4 {
+  position: relative;
+  height: 2410rem;
+  background-color: #F5F5F8;
+}
+.screen4 .wrapper1680 {
+  padding: 124rem 0;
+}
+.screen4 .list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.screen4 .list-item:nth-of-type(2n-1) {
+  flex-direction: row;
+}
+.screen4 .list-item:nth-of-type(2n) {
+  flex-direction: row-reverse;
+}
+.screen4 .list-item + .list-item {
+  margin-top: 52rem;
+}
+.screen4 .content-wrapper {
+  width: 755rem;
+}
+.screen4 .content-wrapper .title {
+  padding: 0 1rem;
+  font-family: MicrosoftYaHeiLight;
+  font-size: 42rem;
+  color: #111111;
+  margin-bottom: 36rem;
+}
+.screen4 .content-wrapper .content {
+  padding: 5rem;
+  font-family: MicrosoftYaHeiLight;
+  font-size: 20rem;
+  line-height: 36rem;
+  text-indent: 1.5em;
+}
+.screen4 .list-item:nth-of-type(2n) .content-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
+  text-align: left;
+}
+.screen4 .image-wrapper {
+  width: 752rem;
+  height: 510rem;
+  border-radius: 20rem;
+  overflow: hidden;
+}
+.screen4 .image-wrapper img {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s;
+}
+.screen4 .image-wrapper:hover img {
+  transform: scale(1.1);
+}
+.screen5 {
+  position: relative;
+  height: 823rem;
+  background-color: #ffffff;
+}
+.screen5 .wrapper1680 {
+  height: 100%;
+  position: relative;
+}
+.screen5 .plate-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.screen5 .plate-item {
+  width: 325rem;
+  height: 302rem;
+  position: relative;
+  cursor: pointer;
+  border-radius: 20rem;
+}
+.screen5 .plate-item:hover {
+  overflow: hidden;
+  box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
+}
+.screen5 .plate-item:hover img {
+  transition: transform 0.4s;
+  transform: scale(1.1, 1.1);
+}
+.screen5 .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;
+}
+.screen5 .join-btn-text {
+  background-image: linear-gradient(90deg, #FF0300, #FFAA05);
+  background-clip: text;
+  color: transparent;
+}
+</style>
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 799cf71..dad16a1 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -40,7 +40,7 @@
             class="text-posi-abs"
             style="--r:1rem;--t:95rem;--ff:MicrosoftYaHeiSemibold;--fs:14rem;--fw:400;"
           >
-            HAOKUN ENERGY
+            Future Star&nbsp;&nbsp;&nbsp;&nbsp;—为世界创造价值
           </div>
         </transition>
         <transition name="fade-slide-left">