补齐业务模块及新闻界面，添加导航定位

src/components/FootBar.vue

@@ -148,32 +148,32 @@ export default {
         {
           title: '关于我们',
           children: [
-            { title: '简介' },
+            { title: '简介', path: '/fshg.cc/about#screen1' },
-            { title: '使命' },
+            { title: '使命', path: '/fshg.cc/about#screen3' },
-            { title: '远景' },
+            { title: '远景', path: '/fshg.cc/about#screen4' },
-            { title: '价值观' },
+            { title: '价值观', path: '/fshg.cc/about#screen5' },
           ],
         },
         {
           title: '业务领域',
           children: [
-            { title: '资本服务', path: '/business/capitalServices' },
+            { title: '资本服务', path: '/Cs.futurestar.cc' },
-            { title: '高新技术', path: '/business/highTech' },
+            { title: '高新技术', path: '/Tech.futurestar.cc' },
-            { title: '能源与环境', path: '/business/hnergyEnvironment' },
+            { title: '能源与环境', path: '/EE.futurestar.cc' },
-            { title: '全球供应链', path: '/' },
+            { title: '全球供应链', path: '/GSC.futurestar.cc' },
-            { title: '商业管理', path: '/' },
+            { title: '商业管理', path: '/BM.futurestar.cc' },
-            { title: '健康产业', path: '/' },
+            { title: '健康产业', path: '/HI.futurestar.cc' },
-            { title: '基础设施', path: '/' },
+            { title: '基础设施', path: '/BI.futurestar.cc' },
-            { title: '未来农业', path: '/' },
+            { title: '未来农业', path: '/FA.futurestar.cc' },
           ],
         },
         {
-          title: '新闻咨询',
+          title: '新闻资讯',
           children: [
-            { title: '公告通知', path: '/' },
+            { title: '公告通知', path: '/newsTrend' },
-            { title: '公司咨询', path: '/' },
+            { title: '公司资讯', path: '/companyInformation' },
-            { title: '政策法规', path: '/' },
+            { title: '政策法规', path: '/policyRegulations' },
-            { title: '行业动态', path: '/' },
+            { title: '行业动态', path: '/industryDynamics' },
           ],
         },
         {
@@ -188,7 +188,7 @@ export default {
           title: '人才招募',
           children: [
             { title: '人才战略', path: '/' },
-            { title: '招募信息', path: '/' },
+            { title: '招募信息', path: '/recruit/socialRecruit' },
           ],
         },
       ],

src/components/NavBar.vue

@@ -29,7 +29,7 @@
             :key="menu.path"
             class="nav-menu"
             :class="{ 'current-route': $route.path.startsWith(menu.path) && menu.path !== '/' }"
-            @click.stop="menu.children || $router.push(menu.path)"
+            @click.stop="menu.children || $router.push({ path: menu.hash ? '' : menu.path , hash: menu?.hash || ''})"
           >
             <span>{{ menu.title }}</span>
             <div
@@ -86,20 +86,29 @@ export default {
       menus: [
         {
           title: '首页',
-          path: '/',
+          path: '/fshg.cc/home',
         },
-        { title: '关于我们', path: '/about/companyIntroduction' },
+        { title: '关于我们', path: '/fshg.cc/about' },
         {
           title: '业务领域',
           children: [
-            { title: '资本服务', path: '/business/capitalServices' },
+            { title: '资本服务', path: '/Cs.futurestar.cc' },
-            { title: '高新技术', path: '/business/highTech' },
+            { title: '高新技术', path: '/Tech.futurestar.cc' },
-            { title: '能源与环境', path: '/business/hnergyEnvironment' },
+            { title: '能源与环境', path: '/EE.futurestar.cc' },
-            { title: '全球供应链', path: '/' },
+            { title: '全球供应链', path: '/GSC.futurestar.cc' },
-            { title: '商业管理', path: '/' },
+            { title: '商业管理', path: '/BM.futurestar.cc' },
-            { title: '健康产业', path: '/' },
+            { title: '健康产业', path: '/HI.futurestar.cc' },
-            { title: '基础设施', path: '/' },
+            { title: '基础设施', path: '/BI.futurestar.cc' },
-            { title: '未来农业', path: '/' },
+            { title: '未来农业', path: '/FA.futurestar.cc' },
+          ],
+        },
+        {
+          title: '新闻资讯',
+          children: [
+            { title: '公告通知', path: '/newsTrend' },
+            { title: '公司资讯', path: '/companyInformation' },
+            { title: '政策法规', path: '/policyRegulations' },
+            { title: '行业动态', path: '/industryDynamics' },
           ],
         },
         {
@@ -114,12 +123,13 @@ export default {
           title: '人才招募',
           children: [
             { title: '人才战略', path: '/' },
-            { title: '招募信息', path: '/' },
+            { title: '招募信息', path: '/recruit/socialRecruit' },
           ],
         },
         {
           title: '联系我们',
           path: '/',
+          hash: 'myfooter',
         }, {
           title: '登录',
           path: '/',
@@ -190,7 +200,8 @@ export default {
   position: relative;
 }
 .nav-menu:not(:last-of-type) {
-  margin-right: 100rem;
+  /* margin-right: 100rem; */
+  margin-right: 70rem;
 }
 .nav-menu:hover::after {
   content: '';

src/core/request.js

@@ -3,8 +3,8 @@ import axios from 'axios';
 
 // 创建 axios 实例
 const request = axios.create({
-  baseURL: process.env.VUE_APP_API_BASE_URL,
+  // baseURL: process.env.VUE_APP_API_BASE_URL,
-  // baseURL: process.env.VUE_APP_API_TARGET_URL,
+  baseURL: process.env.VUE_APP_API_TARGET_URL,
   timeout: 10000,
 });
 request.interceptors.request.use(

src/router/index.js

@@ -8,33 +8,58 @@ const RouteView = {
 };
 
 const routes = [
-  /* {
-    path: '/',
-    redirect: '/home',
-  }, */
   {
     path: '/',
+    redirect: '/fshg.cc/home',
+  },
+  {
+    path: '/fshg.cc/home',
     component: (resolve) => require(['../views/Home/Index.vue'], resolve),
   },
   {
-    path: '/business',
+    path: '/fshg.cc/business',
     component: RouteView,
     children: [
       {
-        path: '/business/capitalServices',
+        path: '/Cs.futurestar.cc',
         component: (resolve) =>
           require(['../views/Business/CapitalServices/Index.vue'], resolve),
       },
       {
-        path: '/business/highTech',
+        path: '/Tech.futurestar.cc',
         component: (resolve) =>
           require(['../views/Business/HighTech/Index.vue'], resolve),
       },
       {
-        path: '/business/hnergyEnvironment',
+        path: '/EE.futurestar.cc',
         component: (resolve) =>
           require(['../views/Business/EnergyEnvironment/Index.vue'], resolve),
       },
+      {
+        path: '/GSC.futurestar.cc',
+        component: (resolve) =>
+          require(['../views/Business/GlobalSupplyChain/Index.vue'], resolve),
+      },
+      {
+        path: '/BM.futurestar.cc',
+        component: (resolve) =>
+          require(['../views/Business/Commercial/Index.vue'], resolve),
+      },
+      {
+        path: '/HI.futurestar.cc',
+        component: (resolve) =>
+          require(['../views/Business/HealthIndustry/Index.vue'], resolve),
+      },
+      {
+        path: '/BI.futurestar.cc',
+        component: (resolve) =>
+          require(['../views/Business/Construction/Index.vue'], resolve),
+      },
+      {
+        path: '/FA.futurestar.cc',
+        component: (resolve) =>
+          require(['../views/Business/FutureAgriculture/Index.vue'], resolve),
+      },
       {
         path: '/business/index',
         component: (resolve) =>
@@ -45,11 +70,6 @@ const routes = [
         component: (resolve) =>
           require(['../views/Business/Petrochemical/Index.vue'], resolve),
       },
-      {
-        path: '/business/construction',
-        component: (resolve) =>
-          require(['../views/Business/Construction/Index.vue'], resolve),
-      },
       {
         path: '/business/ironOre',
         component: (resolve) =>
@@ -77,6 +97,36 @@ const routes = [
         component: (resolve) =>
           require(['../views/NewsTrends/NewsDetail.vue'], resolve),
       },
+      {
+        path: '/companyInformation',
+        component: (resolve) =>
+          require(['../views/CompanyInformation/Index.vue'], resolve),
+      },
+      {
+        path: '/companyInformation/detail/:newsId',
+        component: (resolve) =>
+          require(['../views/CompanyInformation/InformDetail.vue'], resolve),
+      },
+      {
+        path: '/policyRegulations',
+        component: (resolve) =>
+          require(['../views/PolicyRegulations/Index.vue'], resolve),
+      },
+      {
+        path: '/policyRegulations/detail/:newsId',
+        component: (resolve) =>
+          require(['../views/PolicyRegulations/InformDetail.vue'], resolve),
+      },
+      {
+        path: '/industryDynamics',
+        component: (resolve) =>
+          require(['../views/IndustryDynamics/Index.vue'], resolve),
+      },
+      {
+        path: '/IndustryDynamics/detail/:newsId',
+        component: (resolve) =>
+          require(['../views/IndustryDynamics/InformDetail.vue'], resolve),
+      },
     ],
   },
   {
@@ -84,7 +134,7 @@ const routes = [
     component: RouteView,
     children: [
       {
-        path: '/about/companyIntroduction',
+        path: '/fshg.cc/about',
         component: (resolve) =>
           require(['../views/About/CompanyIntroduction/Index.vue'], resolve),
       },

src/views/About/CompanyIntroduction/Index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="page-company">
-    <div class="screen1">
+    <div
+      class="screen1"
+      id="screen1"
+    >
       <!-- <video
         ref="video"
         :src="playingVideoSrc"
@@ -105,6 +108,7 @@
     <div
       v-for="(item, index) in screenList"
       :key="index"
+      :id="['screen'+ (index + 3)]"
       :class="['screen' + (index + 3), item.class]"
     >
       <div class="wrapper1920">
@@ -165,7 +169,10 @@
         </div>
       </div>
     </div>
-    <div class="screen5">
+    <div
+      class="screen5"
+      id="screen5"
+    >
       <div class="wrapper1680">
         <transition name="fade-slide-bottom">
           <div
@@ -242,7 +249,10 @@
         </div>
       </div>
     </div>
-    <FootBar theme="dark"></FootBar>
+    <FootBar
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
     <el-dialog
       :visible.sync="screen1.videoVisible"
       v-if="screen1.videoVisible"
@@ -263,7 +273,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
 import FootBar from '@/components/FootBar.vue';
 import ValuesAccordion from './components/ValuesAccordion.vue';
@@ -368,6 +378,14 @@ export default {
         this.screen6.offsetLevel = i6;
       }
     },
+    $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');
@@ -379,7 +397,16 @@ export default {
     this.getScreen5ListData();
     this.getScreen6ListData();
   },
+  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(

src/views/Business/CapitalServices/Index.vue

@@ -311,20 +311,23 @@
           {{ screen5.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;"
         >
-          <!-- @click="$router.push('/recruit/socialRecruit')" -->
           <span class="join-btn-text">JOIN US</span>
         </div>
       </div>
     </div>
-    <FootBar theme="dark"></FootBar>
+    <FootBar
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 import FootBar from '@/components/FootBar.vue';
 export default {
   components: { FootBar },
@@ -393,6 +396,22 @@ export default {
         this.screen5.offsetLevel = i5;
       }
     },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
   },
   created () {
     this.$event.$emit('nav-theme', 'light');
@@ -407,6 +426,7 @@ export default {
     this.getScreen6ListData();
   },
   methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
     async getScreen2Data () {
       try {
         const res = await this.$request.get(

src/views/Business/Commercial/Index.vue

@@ -0,0 +1,511 @@
+<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"
+            :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
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
+  </div>
+</template>
+
+<script>
+import { mapMutations, 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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen2Data();
+    this.getScreen3Data();
+    this.getScreen3ListData();
+    this.getScreen4ListData();
+    this.getScreen5JoinusData();
+  },
+  methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
+    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-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>

src/views/Business/Construction/Index.vue

@@ -20,14 +20,14 @@
             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;"
+            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>
@@ -67,13 +67,6 @@
             {{ 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"
@@ -123,7 +116,6 @@
         >
           <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
             <div
-              v-show="screen4.offsetLevel >= index"
               class="content-wrapper"
               :style="`--tdu:0.5s;--initial:#f5f5f8;`"
             >
@@ -133,17 +125,10 @@
               <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
-              v-show="screen4.offsetLevel >= index"
               class="image-wrapper"
               :style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
             >
@@ -159,86 +144,15 @@
     </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:971rem;--w:100%;--h:1rem;"
+          style="--t:90rem;--w:100%;--h:1rem;"
         >
           <div class="split-line"></div>
         </div>
         <div
           class="image-posi-abs"
-          style="--l:1rem;--r:1rem;--t:1091rem;--w:1680rem;--h:550rem;"
+          style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
         >
           <img
             :src="screen5.joinUs.imageSrc"
@@ -250,32 +164,35 @@
           <div
             v-show="screen5.offsetLevel >= 1"
             class="text-posi-abs"
-            style="--t:1243rem;--l:118rem;--fs:30rem;--c:#ffffff;"
+            style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
           >
             {{ screen5.joinUs.title }}
           </div>
         </transition>
         <div
           class="text-posi-abs"
-          style="--t:1312rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
+          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:1433rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
+          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>
+    <FootBar
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 import FootBar from '@/components/FootBar.vue';
 export default {
   components: { FootBar },
@@ -337,6 +254,22 @@ export default {
         this.screen5.offsetLevel = i5;
       }
     },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
   },
   created () {
     this.$event.$emit('nav-theme', 'light');
@@ -344,16 +277,15 @@ export default {
     this.getScreen3Data();
     this.getScreen3ListData();
     this.getScreen4ListData();
-    this.getScreen5KeyCaseData();
-    this.getScreen5PlateListData();
     this.getScreen5JoinusData();
   },
   methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
     async getScreen2Data () {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/主要内容' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/基础设施/主要内容' } },
         );
         this.screen2.title = res.rows[0].businessName;
         this.screen2.contentCn = res.rows[0].titleChinese;
@@ -365,7 +297,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/项目描述' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/基础设施/项目描述' } },
         );
         this.screen3.titleCn = res.rows[0].businessName;
         this.screen3.contentCn = res.rows[0].titleChinese;
@@ -375,7 +307,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 3, captionName: '业务范围/基建业务/项目案例' } },
+          { params: { pageNum: 1, pageSize: 6, captionName: '业务领域/基础设施/项目案例' } },
         );
         this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -384,35 +316,16 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 2, captionName: '业务范围/基建业务/技术支持' } },
+          { params: { pageNum: 1, pageSize: 4, 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' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/基础设施/joinus' } },
         );
         this.screen5.joinUs.title = res.rows[0].businessName;
         this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
@@ -446,7 +359,7 @@ export default {
 }
 .screen3 {
   position: relative;
-  height: 871rem;
+  height: 1300rem;
   background-color: #ffffff;
 }
 .screen3 .wrapper1680 {
@@ -455,19 +368,22 @@ export default {
 }
 .screen3 .list-wrapper {
   position: absolute;
-  top: 443rem;
+  top: 400rem;
   width: 100%;
   display: flex;
+  flex-wrap: wrap;
+  padding: 0px 140rem;
+  box-sizing: border-box;
 }
 .screen3 .list-item {
-  width: 0;
+  margin: 0 58rem;
-  flex: 1;
+  width: 350rem;
+  height: 350rem;
+  margin-bottom: 90rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  transform: scale(1, 1);
+  justify-content: center;
-  transition: transform 0.3s;
-  transform-origin: center center;
   cursor: pointer;
 }
 .screen3 .list-item:hover {
@@ -488,7 +404,7 @@ export default {
 .screen3 .list-content {
   width: 280rem;
   white-space: normal;
-  text-align: left;
+  text-align: center;
   font-family: MicrosoftYaHeiLight;
   font-size: 14rem;
   line-height: 22rem;
@@ -496,7 +412,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 1320rem;
+  height: 2410rem;
   background-color: #F5F5F8;
 }
 .screen4 .wrapper1680 {
@@ -531,11 +447,12 @@ export default {
   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-end;
+  align-items: flex-start;
 }
 .screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
   text-align: left;
@@ -556,7 +473,7 @@ export default {
 }
 .screen5 {
   position: relative;
-  height: 1833rem;
+  height: 823rem;
   background-color: #ffffff;
 }
 .screen5 .wrapper1680 {

src/views/Business/EnergyEnvironment/Index.vue

@@ -178,18 +178,21 @@
         <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')"
         >
-          <!-- @click="$router.push('/recruit/socialRecruit')" -->
           <span class="join-btn-text">JOIN US</span>
         </div>
       </div>
     </div>
-    <FootBar theme="dark"></FootBar>
+    <FootBar
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 import FootBar from '@/components/FootBar.vue';
 export default {
   components: { FootBar },
@@ -251,6 +254,22 @@ export default {
         this.screen5.offsetLevel = i5;
       }
     },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
   },
   created () {
     this.$event.$emit('nav-theme', 'light');
@@ -261,6 +280,7 @@ export default {
     this.getScreen5JoinusData();
   },
   methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
     async getScreen2Data () {
       try {
         const res = await this.$request.get(

src/views/Business/FutureAgriculture/Index.vue

@@ -0,0 +1,511 @@
+<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"
+            :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
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
+  </div>
+</template>
+
+<script>
+import { mapMutations, 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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen2Data();
+    this.getScreen3Data();
+    this.getScreen3ListData();
+    this.getScreen4ListData();
+    this.getScreen5JoinusData();
+  },
+  methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
+    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-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>

src/views/Business/GlobalSupplyChain/Index.vue

@@ -0,0 +1,511 @@
+<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"
+            :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
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
+  </div>
+</template>
+
+<script>
+import { mapMutations, 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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen2Data();
+    this.getScreen3Data();
+    this.getScreen3ListData();
+    this.getScreen4ListData();
+    this.getScreen5JoinusData();
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
+  methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
+    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-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>

src/views/Business/HealthIndustry/Index.vue

@@ -0,0 +1,511 @@
+<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"
+            :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
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
+  </div>
+</template>
+
+<script>
+import { mapMutations, 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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen2Data();
+    this.getScreen3Data();
+    this.getScreen3ListData();
+    this.getScreen4ListData();
+    this.getScreen5JoinusData();
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
+  methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
+    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-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>

src/views/Business/HighTech/Index.vue

@@ -216,18 +216,21 @@
         <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')"
         >
-          <!-- @click="$router.push('/recruit/socialRecruit')" -->
           <span class="join-btn-text">JOIN US</span>
         </div>
       </div>
     </div>
-    <FootBar theme="dark"></FootBar>
+    <FootBar
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 import FootBar from '@/components/FootBar.vue';
 export default {
   components: { FootBar },
@@ -289,6 +292,22 @@ export default {
         this.screen5.offsetLevel = i5;
       }
     },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
   },
   created () {
     this.$event.$emit('nav-theme', 'light');
@@ -299,6 +318,7 @@ export default {
     this.getScreen5JoinusData();
   },
   methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
     async getScreen2Data () {
       try {
         const res = await this.$request.get(

src/views/CompanyInformation/Index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="news-trends-page">
+    <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">
+          公司资讯
+        </div>
+        <div class="news-wrapper">
+          <div
+            v-for="item in screen2.newsData"
+            :key="item.id"
+            class="news-item"
+            @click="() => $router.push('/companyInformation/detail/' + item.id)"
+          >
+            <div class="news-cover">
+              <img
+                :src="item.cover"
+                alt=""
+                style="width:100%;height:100%;object-fit:cover;"
+              >
+            </div>
+            <div class="news-info">
+              <div class="title">
+                {{ item.captionName }}
+              </div>
+              <div class="abstracts">
+                {{ item.abstracts }}
+              </div>
+              <div class="date">
+                {{ item.releaseTime.slice(0, 10) }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pagination-wrapper">
+          <div
+            class="page-prev"
+            :class="{ 'page-btn-disabled': screen2.pageNum <= 1 }"
+            @click="handlePrev"
+          >
+            <i class="el-icon-arrow-left"></i>
+          </div>
+          <div class="page-num">
+            <span style="color: #E12F16;">{{ screen2.pageNum }}</span>
+            <span>/{{ screen2.totalPage }}</span>
+          </div>
+          <div
+            class="page-next"
+            :class="{ 'page-btn-disabled': screen2.pageNum >= screen2.totalPage }"
+            @click="handleNext"
+          >
+            <i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="screen3">
+      <FootBar
+        id="myfooter"
+        theme="dark"
+      ></FootBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex';
+import FootBar from '@/components/FootBar.vue';
+
+export default {
+  components: {
+    FootBar,
+  },
+  data () {
+    return {
+      screen1: {
+        bannerUrl: '',
+      },
+      screen2: {
+        newsData: [],
+        pageSize: 6,
+        pageNum: 1,
+        totalPage: 0,
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      scrollTop: state => state.scroll.scrollTop,
+      webScale: state => state.web.scale,
+    }),
+  },
+  watch: {
+    scrollTop (val) {
+      const v = val / this.webScale;
+      if (v < 50) {
+        this.$event.$emit('nav-theme', 'dark');
+      } else {
+        this.$event.$emit('nav-theme', 'light');
+      }
+      const i2 = this.screen2.offsetLevel + 1;
+      if (v >= this.screen2.offsets[i2]) {
+        this.screen2.offsetLevel = i2;
+      }
+      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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen1Banner();
+    this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
+  },
+  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.bannerUrl = res.rows[0].imageurl;
+      } catch (error) {}
+    },
+    async getScreen2NewsData (params) {
+      try {
+        const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '1' } });
+        this.screen2.newsData = res.rows;
+        this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
+        this.screen2.pageNum = params.pageNum;
+      } catch (error) {}
+    },
+    handlePrev () {
+      if (this.screen2.pageNum <= 1) return;
+      this.getScreen2NewsData({ pageNum: this.screen2.pageNum - 1, pageSize: this.screen2.pageSize });
+    },
+    handleNext () {
+      if (this.screen2.pageNum >= this.screen2.totalPage) return;
+      this.getScreen2NewsData({ pageNum: this.screen2.pageNum + 1, pageSize: this.screen2.pageSize });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.news-trends-page{
+  width: 100%;
+  background: #F5F5F7;
+}
+.screen1 {
+  min-height: 600rem;
+}
+.screen2 {
+  box-sizing: border-box;
+  padding: 59rem 0;
+}
+.screen2 .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 30rem;
+  color: #111111;
+  line-height: 64rem;
+  margin-bottom: 23rem;
+}
+.screen2 .news-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.screen2 .news-item {
+  width: 510rem;
+  height: 505rem;
+  border-radius: 10rem;
+  background-color: #ffffff;
+  box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
+  overflow: hidden;
+  margin-bottom: 60rem;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.screen2 .news-item:not(:nth-of-type(3n)) {
+  margin-right: calc((1680rem - 510rem * 3) / 2);
+}
+.screen2 .news-item:hover {
+  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
+  z-index: 10;
+}
+.screen2 .news-cover {
+  width: 510rem;
+  height: 302rem;
+  overflow: hidden;
+}
+.screen2 .news-cover img {
+  transition: transform 0.4s;
+}
+.screen2 .news-cover:hover img {
+  transform: scale(1.1, 1.1);
+}
+.screen2 .news-info {
+  padding: 55rem 35rem 0;
+}
+.screen2 .news-info .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  line-height: 16rem;
+  color: #000000;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 16rem;
+}
+.screen2 .news-info .abstracts {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 14rem;
+  color: #666666;
+  margin-bottom: 20rem;
+}
+.screen2 .news-info .date {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 12rem;
+  color: #666666;
+}
+.screen2 .pagination-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.screen2 .pagination-wrapper .page-prev,
+.screen2 .pagination-wrapper .page-next {
+  width: 35rem;
+  height: 35rem;
+  box-sizing: border-box;
+  border: 1rem solid #818692;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #818692;
+  border-radius: 4rem;
+  cursor: pointer;
+}
+.screen2 .pagination-wrapper .page-prev.page-btn-disabled,
+.screen2 .pagination-wrapper .page-next.page-btn-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.screen2 .pagination-wrapper .page-prev:not(.page-btn-disabled):hover,
+.screen2 .pagination-wrapper .page-next:not(.page-btn-disabled):hover {
+  border-color: #111111;
+  color: #111111;
+}
+.screen2 .pagination-wrapper .page-num {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 18rem;
+  line-height: 18rem;
+  color: #818692;
+  width: 90rem;
+  text-align: center;
+}
+</style>

src/views/CompanyInformation/InformDetail.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="page-news-detail">
+    <div style="height:104rem;"></div>
+    <div class="screen1">
+      <img
+        :src="screen1.bannerUrl"
+        alt=""
+        style="width:100%;"
+      />
+    </div>
+    <div class="screen2">
+      <div class="wrapper1400">
+        <div class="news-title">
+          {{ newsDetail.captionName }}
+        </div>
+        <div class="news-info">
+          <span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
+          <span>{{ newsDetail.groupName }}</span>
+        </div>
+        <div
+          class="news-content ql-editor"
+          v-html="newsDetail.newsContent"
+        >
+        </div>
+      </div>
+    </div>
+    <div class="screen3">
+      <div class="wrapper1400">
+        <div class="title">
+          更多推荐
+        </div>
+        <div class="news-wrapper">
+          <div
+            v-for="item in recommendData"
+            :key="item.id"
+            class="news-item"
+            @click="() => $router.push('/companyInformation/detail/' + item.id)"
+          >
+            <div class="news-cover">
+              <img
+                :src="item.cover"
+                alt=""
+                style="width:100%;height:100%;object-fit:cover;"
+              >
+            </div>
+            <div class="news-info">
+              <div class="title">
+                {{ item.captionName }}
+              </div>
+              <div class="abstracts">
+                {{ item.abstracts }}
+              </div>
+              <div class="date">
+                {{ item.releaseTime.slice(0, 10) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      screen1: {
+        bannerUrl: '',
+      },
+      currentNewsId: '',
+      prevNewsId: '',
+      nextNewsId: '',
+      newsDetail: {
+        releaseTime: '',
+      },
+    };
+  },
+  computed: {
+    currentId () {
+      return this.$route.params.newsId;
+    },
+    recommendData () {
+      return [].concat(
+        this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
+        [this.newsDetail],
+        this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
+      );
+    },
+  },
+  watch: {
+    currentId: {
+      handler (v) {
+        document.getElementById('app').scrollTop = 0;
+        this.getNewsDetail(v);
+      },
+      immediate: true,
+    },
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen1Banner();
+  },
+  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 getNewsDetail (currentNewsId) {
+      try {
+        const res = await this.$request.get('/official/slideshow/' + currentNewsId);
+        this.newsDetail = res.data;
+        this.prevNewsId = res.data.slideshowMap.previous?.id || '';
+        this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
+      } catch (error) {}
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page-news-detail{
+  width: 100%;
+  overflow-x: hidden;
+}
+.screen1 {
+  min-height: 600rem;
+}
+.screen2 {
+  background-color: #ffffff;
+  padding-top: 135rem;
+  padding-bottom: 90rem;
+}
+.screen2 .news-title {
+  text-align: center;
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 30rem;
+  color: #111111;
+  line-height: 36rem;
+}
+.screen2 .news-info {
+  height: 58rem;
+  padding-top: 50rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rem solid #999999;
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  color: #999999;
+  line-height: 36rem;
+}
+.screen2 .news-content {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 18rem;
+  color: #111111;
+  line-height: 36rem;
+  margin-top: 30rem;
+}
+.screen2 .news-content >>> p {
+  margin-bottom: 10rem;
+}
+.screen3 {
+  height: auto;
+  display: flex;
+  padding: 10rem;
+  background-color: #f5f5f5;
+}
+.screen3 .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 24rem;
+  line-height: 88rem;
+  color: #141414;
+}
+.screen3 .news-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.screen3 .news-item {
+  width: 430rem;
+  height: 505rem;
+  border-radius: 10rem;
+  background-color: #ffffff;
+  box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
+  overflow: hidden;
+  margin-bottom: 60rem;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.screen3 .news-item:not(:nth-of-type(3n)) {
+  margin-right: calc((1400rem - 430rem * 3) / 2);
+}
+.screen3 .news-item:hover {
+  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
+  z-index: 10;
+}
+.screen3 .news-cover {
+  width: 510rem;
+  height: 302rem;
+  overflow: hidden;
+}
+.screen3 .news-cover img {
+  transition: transform 0.4s;
+  width: 100%;
+}
+.screen3 .news-cover:hover img {
+  transform: scale(1.1, 1.1);
+}
+.screen3 .news-info {
+  padding: 55rem 35rem 0;
+}
+.screen3 .news-info .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  line-height: 16rem;
+  color: #000000;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 16rem;
+}
+.screen3 .news-info .abstracts {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 14rem;
+  color: #666666;
+  margin-bottom: 20rem;
+}
+.screen3 .news-info .date {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 12rem;
+  color: #666666;
+}
+.ql-editor {
+  padding-left: 0;
+  padding-right: 0;
+}
+.news-content >>> .ql-align-center {
+  width: 100%;
+}
+.news-content >>> .ql-align-center img {
+  width: 100%!important;
+}
+</style>

src/views/Home/Index.vue

@@ -186,12 +186,15 @@
         </div>
       </div>
     </div>
-    <FootBar theme="dark"></FootBar>
+    <FootBar
+      id="myfooter"
+      theme="dark"
+    ></FootBar>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
 import HomeCarousel from './components/HomeCarousel.vue';
 import HomeCarouselIndicator from './components/HomeCarouselIndicator.vue';
@@ -260,6 +263,14 @@ export default {
         this.screen4.offsetLevel = i4;
       }
     },
+    $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');
@@ -268,7 +279,16 @@ export default {
     this.getScreen3CarouselData();
     this.getScreen4NewsData();
   },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
   methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
     async getScreen1CarouselData () {
       try {
         const res = await this.$request.get(

src/views/IndustryDynamics/Index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="news-trends-page">
+    <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">
+          行业动态
+        </div>
+        <div class="news-wrapper">
+          <div
+            v-for="item in screen2.newsData"
+            :key="item.id"
+            class="news-item"
+            @click="() => $router.push('/industryDynamics/detail/' + item.id)"
+          >
+            <div class="news-cover">
+              <img
+                :src="item.cover"
+                alt=""
+                style="width:100%;height:100%;object-fit:cover;"
+              >
+            </div>
+            <div class="news-info">
+              <div class="title">
+                {{ item.captionName }}
+              </div>
+              <div class="abstracts">
+                {{ item.abstracts }}
+              </div>
+              <div class="date">
+                {{ item.releaseTime.slice(0, 10) }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pagination-wrapper">
+          <div
+            class="page-prev"
+            :class="{ 'page-btn-disabled': screen2.pageNum <= 1 }"
+            @click="handlePrev"
+          >
+            <i class="el-icon-arrow-left"></i>
+          </div>
+          <div class="page-num">
+            <span style="color: #E12F16;">{{ screen2.pageNum }}</span>
+            <span>/{{ screen2.totalPage }}</span>
+          </div>
+          <div
+            class="page-next"
+            :class="{ 'page-btn-disabled': screen2.pageNum >= screen2.totalPage }"
+            @click="handleNext"
+          >
+            <i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="screen3">
+      <FootBar
+        id="myfooter"
+        theme="dark"
+      ></FootBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex';
+import FootBar from '@/components/FootBar.vue';
+
+export default {
+  components: {
+    FootBar,
+  },
+  data () {
+    return {
+      screen1: {
+        bannerUrl: '',
+      },
+      screen2: {
+        newsData: [],
+        pageSize: 6,
+        pageNum: 1,
+        totalPage: 0,
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      scrollTop: state => state.scroll.scrollTop,
+      webScale: state => state.web.scale,
+    }),
+  },
+  watch: {
+    scrollTop (val) {
+      const v = val / this.webScale;
+      if (v < 50) {
+        this.$event.$emit('nav-theme', 'dark');
+      } else {
+        this.$event.$emit('nav-theme', 'light');
+      }
+      const i2 = this.screen2.offsetLevel + 1;
+      if (v >= this.screen2.offsets[i2]) {
+        this.screen2.offsetLevel = i2;
+      }
+      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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen1Banner();
+    this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
+  },
+  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.bannerUrl = res.rows[0].imageurl;
+      } catch (error) {}
+    },
+    async getScreen2NewsData (params) {
+      try {
+        const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '3' } });
+        this.screen2.newsData = res.rows;
+        this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
+        this.screen2.pageNum = params.pageNum;
+      } catch (error) {}
+    },
+    handlePrev () {
+      if (this.screen2.pageNum <= 1) return;
+      this.getScreen2NewsData({ pageNum: this.screen2.pageNum - 1, pageSize: this.screen2.pageSize });
+    },
+    handleNext () {
+      if (this.screen2.pageNum >= this.screen2.totalPage) return;
+      this.getScreen2NewsData({ pageNum: this.screen2.pageNum + 1, pageSize: this.screen2.pageSize });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.news-trends-page{
+  width: 100%;
+  background: #F5F5F7;
+}
+.screen1 {
+  min-height: 600rem;
+}
+.screen2 {
+  box-sizing: border-box;
+  padding: 59rem 0;
+}
+.screen2 .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 30rem;
+  color: #111111;
+  line-height: 64rem;
+  margin-bottom: 23rem;
+}
+.screen2 .news-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.screen2 .news-item {
+  width: 510rem;
+  height: 505rem;
+  border-radius: 10rem;
+  background-color: #ffffff;
+  box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
+  overflow: hidden;
+  margin-bottom: 60rem;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.screen2 .news-item:not(:nth-of-type(3n)) {
+  margin-right: calc((1680rem - 510rem * 3) / 2);
+}
+.screen2 .news-item:hover {
+  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
+  z-index: 10;
+}
+.screen2 .news-cover {
+  width: 510rem;
+  height: 302rem;
+  overflow: hidden;
+}
+.screen2 .news-cover img {
+  transition: transform 0.4s;
+}
+.screen2 .news-cover:hover img {
+  transform: scale(1.1, 1.1);
+}
+.screen2 .news-info {
+  padding: 55rem 35rem 0;
+}
+.screen2 .news-info .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  line-height: 16rem;
+  color: #000000;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 16rem;
+}
+.screen2 .news-info .abstracts {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 14rem;
+  color: #666666;
+  margin-bottom: 20rem;
+}
+.screen2 .news-info .date {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 12rem;
+  color: #666666;
+}
+.screen2 .pagination-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.screen2 .pagination-wrapper .page-prev,
+.screen2 .pagination-wrapper .page-next {
+  width: 35rem;
+  height: 35rem;
+  box-sizing: border-box;
+  border: 1rem solid #818692;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #818692;
+  border-radius: 4rem;
+  cursor: pointer;
+}
+.screen2 .pagination-wrapper .page-prev.page-btn-disabled,
+.screen2 .pagination-wrapper .page-next.page-btn-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.screen2 .pagination-wrapper .page-prev:not(.page-btn-disabled):hover,
+.screen2 .pagination-wrapper .page-next:not(.page-btn-disabled):hover {
+  border-color: #111111;
+  color: #111111;
+}
+.screen2 .pagination-wrapper .page-num {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 18rem;
+  line-height: 18rem;
+  color: #818692;
+  width: 90rem;
+  text-align: center;
+}
+</style>

src/views/IndustryDynamics/InformDetail.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="page-news-detail">
+    <div style="height:104rem;"></div>
+    <div class="screen1">
+      <img
+        :src="screen1.bannerUrl"
+        alt=""
+        style="width:100%;"
+      />
+    </div>
+    <div class="screen2">
+      <div class="wrapper1400">
+        <div class="news-title">
+          {{ newsDetail.captionName }}
+        </div>
+        <div class="news-info">
+          <span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
+          <span>{{ newsDetail.groupName }}</span>
+        </div>
+        <div
+          class="news-content ql-editor"
+          v-html="newsDetail.newsContent"
+        >
+        </div>
+      </div>
+    </div>
+    <div class="screen3">
+      <div class="wrapper1400">
+        <div class="title">
+          更多推荐
+        </div>
+        <div class="news-wrapper">
+          <div
+            v-for="item in recommendData"
+            :key="item.id"
+            class="news-item"
+            @click="() => $router.push('/industryDynamics/detail/' + item.id)"
+          >
+            <div class="news-cover">
+              <img
+                :src="item.cover"
+                alt=""
+                style="width:100%;height:100%;object-fit:cover;"
+              >
+            </div>
+            <div class="news-info">
+              <div class="title">
+                {{ item.captionName }}
+              </div>
+              <div class="abstracts">
+                {{ item.abstracts }}
+              </div>
+              <div class="date">
+                {{ item.releaseTime.slice(0, 10) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      screen1: {
+        bannerUrl: '',
+      },
+      currentNewsId: '',
+      prevNewsId: '',
+      nextNewsId: '',
+      newsDetail: {
+        releaseTime: '',
+      },
+    };
+  },
+  computed: {
+    currentId () {
+      return this.$route.params.newsId;
+    },
+    recommendData () {
+      return [].concat(
+        this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
+        [this.newsDetail],
+        this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
+      );
+    },
+  },
+  watch: {
+    currentId: {
+      handler (v) {
+        document.getElementById('app').scrollTop = 0;
+        this.getNewsDetail(v);
+      },
+      immediate: true,
+    },
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen1Banner();
+  },
+  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 getNewsDetail (currentNewsId) {
+      try {
+        const res = await this.$request.get('/official/slideshow/' + currentNewsId);
+        this.newsDetail = res.data;
+        this.prevNewsId = res.data.slideshowMap.previous?.id || '';
+        this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
+      } catch (error) {}
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page-news-detail{
+  width: 100%;
+  overflow-x: hidden;
+}
+.screen1 {
+  min-height: 600rem;
+}
+.screen2 {
+  background-color: #ffffff;
+  padding-top: 135rem;
+  padding-bottom: 90rem;
+}
+.screen2 .news-title {
+  text-align: center;
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 30rem;
+  color: #111111;
+  line-height: 36rem;
+}
+.screen2 .news-info {
+  height: 58rem;
+  padding-top: 50rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rem solid #999999;
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  color: #999999;
+  line-height: 36rem;
+}
+.screen2 .news-content {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 18rem;
+  color: #111111;
+  line-height: 36rem;
+  margin-top: 30rem;
+}
+.screen2 .news-content >>> p {
+  margin-bottom: 10rem;
+}
+.screen3 {
+  height: auto;
+  display: flex;
+  padding: 10rem;
+  background-color: #f5f5f5;
+}
+.screen3 .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 24rem;
+  line-height: 88rem;
+  color: #141414;
+}
+.screen3 .news-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.screen3 .news-item {
+  width: 430rem;
+  height: 505rem;
+  border-radius: 10rem;
+  background-color: #ffffff;
+  box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
+  overflow: hidden;
+  margin-bottom: 60rem;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.screen3 .news-item:not(:nth-of-type(3n)) {
+  margin-right: calc((1400rem - 430rem * 3) / 2);
+}
+.screen3 .news-item:hover {
+  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
+  z-index: 10;
+}
+.screen3 .news-cover {
+  width: 510rem;
+  height: 302rem;
+  overflow: hidden;
+}
+.screen3 .news-cover img {
+  transition: transform 0.4s;
+  width: 100%;
+}
+.screen3 .news-cover:hover img {
+  transform: scale(1.1, 1.1);
+}
+.screen3 .news-info {
+  padding: 55rem 35rem 0;
+}
+.screen3 .news-info .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  line-height: 16rem;
+  color: #000000;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 16rem;
+}
+.screen3 .news-info .abstracts {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 14rem;
+  color: #666666;
+  margin-bottom: 20rem;
+}
+.screen3 .news-info .date {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 12rem;
+  color: #666666;
+}
+.ql-editor {
+  padding-left: 0;
+  padding-right: 0;
+}
+.news-content >>> .ql-align-center {
+  width: 100%;
+}
+.news-content >>> .ql-align-center img {
+  width: 100%!important;
+}
+</style>

src/views/NewsTrends/Index.vue

@@ -11,7 +11,7 @@
     <div class="screen2">
       <div class="wrapper1680">
         <div class="title">
-          新闻动态
+          公告通知
         </div>
         <div class="news-wrapper">
           <div
@@ -63,12 +63,16 @@
       </div>
     </div>
     <div class="screen3">
-      <FootBar theme="dark"></FootBar>
+      <FootBar
+        id="myfooter"
+        theme="dark"
+      ></FootBar>
     </div>
   </div>
 </template>
 
 <script>
+import { mapMutations, mapState } from 'vuex';
 import FootBar from '@/components/FootBar.vue';
 
 export default {
@@ -88,24 +92,69 @@ export default {
       },
     };
   },
+  computed: {
+    ...mapState({
+      scrollTop: state => state.scroll.scrollTop,
+      webScale: state => state.web.scale,
+    }),
+  },
+  watch: {
+    scrollTop (val) {
+      const v = val / this.webScale;
+      if (v < 50) {
+        this.$event.$emit('nav-theme', 'dark');
+      } else {
+        this.$event.$emit('nav-theme', 'light');
+      }
+      const i2 = this.screen2.offsetLevel + 1;
+      if (v >= this.screen2.offsets[i2]) {
+        this.screen2.offsetLevel = i2;
+      }
+      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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
   created () {
     this.$event.$emit('nav-theme', 'light');
     this.getScreen1Banner();
     this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
   },
   methods: {
+    ...mapMutations(['forceScroll', 'setScrollTop']),
     async getScreen1Banner () {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 1, captionName: '新闻动态/banner' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/公告通知/banner' } },
         );
         this.screen1.bannerUrl = res.rows[0].imageurl;
       } catch (error) {}
     },
     async getScreen2NewsData (params) {
       try {
-        const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '1' } });
+        const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '0' } });
         this.screen2.newsData = res.rows;
         this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
         this.screen2.pageNum = params.pageNum;

src/views/NewsTrends/NewsDetail.vue

@@ -106,7 +106,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 1, captionName: '新闻动态/新闻详情/banner' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/公告通知/公告通知详情/banner' } },
         );
         this.screen1.bannerUrl = res.rows[0].imageurl;
       } catch (error) {}

src/views/PolicyRegulations/Index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="news-trends-page">
+    <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">
+          政策法规
+        </div>
+        <div class="news-wrapper">
+          <div
+            v-for="item in screen2.newsData"
+            :key="item.id"
+            class="news-item"
+            @click="() => $router.push('/policyRegulations/detail/' + item.id)"
+          >
+            <div class="news-cover">
+              <img
+                :src="item.cover"
+                alt=""
+                style="width:100%;height:100%;object-fit:cover;"
+              >
+            </div>
+            <div class="news-info">
+              <div class="title">
+                {{ item.captionName }}
+              </div>
+              <div class="abstracts">
+                {{ item.abstracts }}
+              </div>
+              <div class="date">
+                {{ item.releaseTime.slice(0, 10) }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pagination-wrapper">
+          <div
+            class="page-prev"
+            :class="{ 'page-btn-disabled': screen2.pageNum <= 1 }"
+            @click="handlePrev"
+          >
+            <i class="el-icon-arrow-left"></i>
+          </div>
+          <div class="page-num">
+            <span style="color: #E12F16;">{{ screen2.pageNum }}</span>
+            <span>/{{ screen2.totalPage }}</span>
+          </div>
+          <div
+            class="page-next"
+            :class="{ 'page-btn-disabled': screen2.pageNum >= screen2.totalPage }"
+            @click="handleNext"
+          >
+            <i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="screen3">
+      <FootBar
+        id="myfooter"
+        theme="dark"
+      ></FootBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex';
+import FootBar from '@/components/FootBar.vue';
+
+export default {
+  components: {
+    FootBar,
+  },
+  data () {
+    return {
+      screen1: {
+        bannerUrl: '',
+      },
+      screen2: {
+        newsData: [],
+        pageSize: 6,
+        pageNum: 1,
+        totalPage: 0,
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      scrollTop: state => state.scroll.scrollTop,
+      webScale: state => state.web.scale,
+    }),
+  },
+  watch: {
+    scrollTop (val) {
+      const v = val / this.webScale;
+      if (v < 50) {
+        this.$event.$emit('nav-theme', 'dark');
+      } else {
+        this.$event.$emit('nav-theme', 'light');
+      }
+      const i2 = this.screen2.offsetLevel + 1;
+      if (v >= this.screen2.offsets[i2]) {
+        this.screen2.offsetLevel = i2;
+      }
+      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;
+      }
+    },
+    $route () {
+      if (this.$route.hash) {
+        this.forceScroll({
+          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  },
+  mounted () {
+    if (this.$route.hash) {
+      this.forceScroll({
+        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen1Banner();
+    this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
+  },
+  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.bannerUrl = res.rows[0].imageurl;
+      } catch (error) {}
+    },
+    async getScreen2NewsData (params) {
+      try {
+        const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '2' } });
+        this.screen2.newsData = res.rows;
+        this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
+        this.screen2.pageNum = params.pageNum;
+      } catch (error) {}
+    },
+    handlePrev () {
+      if (this.screen2.pageNum <= 1) return;
+      this.getScreen2NewsData({ pageNum: this.screen2.pageNum - 1, pageSize: this.screen2.pageSize });
+    },
+    handleNext () {
+      if (this.screen2.pageNum >= this.screen2.totalPage) return;
+      this.getScreen2NewsData({ pageNum: this.screen2.pageNum + 1, pageSize: this.screen2.pageSize });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.news-trends-page{
+  width: 100%;
+  background: #F5F5F7;
+}
+.screen1 {
+  min-height: 600rem;
+}
+.screen2 {
+  box-sizing: border-box;
+  padding: 59rem 0;
+}
+.screen2 .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 30rem;
+  color: #111111;
+  line-height: 64rem;
+  margin-bottom: 23rem;
+}
+.screen2 .news-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.screen2 .news-item {
+  width: 510rem;
+  height: 505rem;
+  border-radius: 10rem;
+  background-color: #ffffff;
+  box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
+  overflow: hidden;
+  margin-bottom: 60rem;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.screen2 .news-item:not(:nth-of-type(3n)) {
+  margin-right: calc((1680rem - 510rem * 3) / 2);
+}
+.screen2 .news-item:hover {
+  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
+  z-index: 10;
+}
+.screen2 .news-cover {
+  width: 510rem;
+  height: 302rem;
+  overflow: hidden;
+}
+.screen2 .news-cover img {
+  transition: transform 0.4s;
+}
+.screen2 .news-cover:hover img {
+  transform: scale(1.1, 1.1);
+}
+.screen2 .news-info {
+  padding: 55rem 35rem 0;
+}
+.screen2 .news-info .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  line-height: 16rem;
+  color: #000000;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 16rem;
+}
+.screen2 .news-info .abstracts {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 14rem;
+  color: #666666;
+  margin-bottom: 20rem;
+}
+.screen2 .news-info .date {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 12rem;
+  color: #666666;
+}
+.screen2 .pagination-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.screen2 .pagination-wrapper .page-prev,
+.screen2 .pagination-wrapper .page-next {
+  width: 35rem;
+  height: 35rem;
+  box-sizing: border-box;
+  border: 1rem solid #818692;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #818692;
+  border-radius: 4rem;
+  cursor: pointer;
+}
+.screen2 .pagination-wrapper .page-prev.page-btn-disabled,
+.screen2 .pagination-wrapper .page-next.page-btn-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.screen2 .pagination-wrapper .page-prev:not(.page-btn-disabled):hover,
+.screen2 .pagination-wrapper .page-next:not(.page-btn-disabled):hover {
+  border-color: #111111;
+  color: #111111;
+}
+.screen2 .pagination-wrapper .page-num {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 18rem;
+  line-height: 18rem;
+  color: #818692;
+  width: 90rem;
+  text-align: center;
+}
+</style>

src/views/PolicyRegulations/InformDetail.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="page-news-detail">
+    <div style="height:104rem;"></div>
+    <div class="screen1">
+      <img
+        :src="screen1.bannerUrl"
+        alt=""
+        style="width:100%;"
+      />
+    </div>
+    <div class="screen2">
+      <div class="wrapper1400">
+        <div class="news-title">
+          {{ newsDetail.captionName }}
+        </div>
+        <div class="news-info">
+          <span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
+          <span>{{ newsDetail.groupName }}</span>
+        </div>
+        <div
+          class="news-content ql-editor"
+          v-html="newsDetail.newsContent"
+        >
+        </div>
+      </div>
+    </div>
+    <div class="screen3">
+      <div class="wrapper1400">
+        <div class="title">
+          更多推荐
+        </div>
+        <div class="news-wrapper">
+          <div
+            v-for="item in recommendData"
+            :key="item.id"
+            class="news-item"
+            @click="() => $router.push('/policyRegulations/detail/' + item.id)"
+          >
+            <div class="news-cover">
+              <img
+                :src="item.cover"
+                alt=""
+                style="width:100%;height:100%;object-fit:cover;"
+              >
+            </div>
+            <div class="news-info">
+              <div class="title">
+                {{ item.captionName }}
+              </div>
+              <div class="abstracts">
+                {{ item.abstracts }}
+              </div>
+              <div class="date">
+                {{ item.releaseTime.slice(0, 10) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      screen1: {
+        bannerUrl: '',
+      },
+      currentNewsId: '',
+      prevNewsId: '',
+      nextNewsId: '',
+      newsDetail: {
+        releaseTime: '',
+      },
+    };
+  },
+  computed: {
+    currentId () {
+      return this.$route.params.newsId;
+    },
+    recommendData () {
+      return [].concat(
+        this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
+        [this.newsDetail],
+        this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
+      );
+    },
+  },
+  watch: {
+    currentId: {
+      handler (v) {
+        document.getElementById('app').scrollTop = 0;
+        this.getNewsDetail(v);
+      },
+      immediate: true,
+    },
+  },
+  created () {
+    this.$event.$emit('nav-theme', 'light');
+    this.getScreen1Banner();
+  },
+  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 getNewsDetail (currentNewsId) {
+      try {
+        const res = await this.$request.get('/official/slideshow/' + currentNewsId);
+        this.newsDetail = res.data;
+        this.prevNewsId = res.data.slideshowMap.previous?.id || '';
+        this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
+      } catch (error) {}
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page-news-detail{
+  width: 100%;
+  overflow-x: hidden;
+}
+.screen1 {
+  min-height: 600rem;
+}
+.screen2 {
+  background-color: #ffffff;
+  padding-top: 135rem;
+  padding-bottom: 90rem;
+}
+.screen2 .news-title {
+  text-align: center;
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 30rem;
+  color: #111111;
+  line-height: 36rem;
+}
+.screen2 .news-info {
+  height: 58rem;
+  padding-top: 50rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rem solid #999999;
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  color: #999999;
+  line-height: 36rem;
+}
+.screen2 .news-content {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 18rem;
+  color: #111111;
+  line-height: 36rem;
+  margin-top: 30rem;
+}
+.screen2 .news-content >>> p {
+  margin-bottom: 10rem;
+}
+.screen3 {
+  height: auto;
+  display: flex;
+  padding: 10rem;
+  background-color: #f5f5f5;
+}
+.screen3 .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 24rem;
+  line-height: 88rem;
+  color: #141414;
+}
+.screen3 .news-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.screen3 .news-item {
+  width: 430rem;
+  height: 505rem;
+  border-radius: 10rem;
+  background-color: #ffffff;
+  box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
+  overflow: hidden;
+  margin-bottom: 60rem;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.screen3 .news-item:not(:nth-of-type(3n)) {
+  margin-right: calc((1400rem - 430rem * 3) / 2);
+}
+.screen3 .news-item:hover {
+  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
+  z-index: 10;
+}
+.screen3 .news-cover {
+  width: 510rem;
+  height: 302rem;
+  overflow: hidden;
+}
+.screen3 .news-cover img {
+  transition: transform 0.4s;
+  width: 100%;
+}
+.screen3 .news-cover:hover img {
+  transform: scale(1.1, 1.1);
+}
+.screen3 .news-info {
+  padding: 55rem 35rem 0;
+}
+.screen3 .news-info .title {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 16rem;
+  line-height: 16rem;
+  color: #000000;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 16rem;
+}
+.screen3 .news-info .abstracts {
+  font-family: MicrosoftYaHei;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 14rem;
+  color: #666666;
+  margin-bottom: 20rem;
+}
+.screen3 .news-info .date {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 400;
+  font-size: 12rem;
+  line-height: 12rem;
+  color: #666666;
+}
+.ql-editor {
+  padding-left: 0;
+  padding-right: 0;
+}
+.news-content >>> .ql-align-center {
+  width: 100%;
+}
+.news-content >>> .ql-align-center img {
+  width: 100%!important;
+}
+</style>

src/views/Recruit/SocialRecruit/Index.vue

@@ -185,15 +185,25 @@ export default {
           baseSite: '',
           releaseState: '1',
         },
+        // locationOptions: [
+        //   {
+        //     label: '国内',
+        //     children: [{ label: '北京' }, { label: '上海' }],
+        //   },
+        //   {
+        //     label: '国外',
+        //     children: [{ label: '中东' }],
+        //   },
+        // ],
         locationOptions: [
           {
             label: '国内',
-            children: [{ label: '北京' }, { label: '上海' }],
+            children: [{ label: '北京' }, { label: '上海' }, { label: '广州' }],
-          },
-          {
-            label: '国外',
-            children: [{ label: '中东' }],
           },
+          // {
+          //   label: '国外',
+          //   children: [{ label: '中东' }],
+          // },
         ],
         recruitData: [],
         total: 0,
@@ -238,7 +248,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 1, captionName: '加入我们/社会招聘/banner' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '人才招募/招募信息/banner' } },
         );
         this.screen1.bannerUrl = res.rows[0].imageurl;
       } catch (error) {}