From 2c953b596cf60ca4f9c3c799b3cef11e76ebaa83 Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Mon, 4 Nov 2024 17:04:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Business/CapitalServices/Index.vue  |   4 +-
 src/views/Business/Commercial/Index.vue       |  10 +-
 src/views/Business/Construction/Index.vue     |  10 +-
 .../Business/EnergyEnvironment/Index.vue      |   4 +-
 .../Business/GlobalSupplyChain/Index.vue      | 129 +++++++++++++++++-
 src/views/Business/HealthIndustry/Index.vue   |  10 +-
 src/views/Business/HighTech/Index.vue         |   4 +-
 7 files changed, 148 insertions(+), 23 deletions(-)

diff --git a/src/views/Business/CapitalServices/Index.vue b/src/views/Business/CapitalServices/Index.vue
index fdb2863..b95711a 100644
--- a/src/views/Business/CapitalServices/Index.vue
+++ b/src/views/Business/CapitalServices/Index.vue
@@ -462,7 +462,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 3, captionName: '业务领域/资本服务/技术支持' } },
+          { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/资本服务/技术支持' } },
         );
         this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -609,7 +609,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 1850rem;
+  height: 1286rem;
   background-color: #FFFFFF;
 }
 .screen4 .wrapper1680 {
diff --git a/src/views/Business/Commercial/Index.vue b/src/views/Business/Commercial/Index.vue
index 7da886f..1bcb660 100644
--- a/src/views/Business/Commercial/Index.vue
+++ b/src/views/Business/Commercial/Index.vue
@@ -316,7 +316,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/商业管理/技术支持' } },
+          { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/商业管理/技术支持' } },
         );
         this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -359,7 +359,7 @@ export default {
 }
 .screen3 {
   position: relative;
-  height: 1300rem;
+  height: 850rem;
   background-color: #ffffff;
 }
 .screen3 .wrapper1680 {
@@ -377,8 +377,8 @@ export default {
 }
 .screen3 .list-item {
   margin: 0 58rem;
-  width: 350rem;
-  height: 350rem;
+  width: 234rem;
+  height: 330rem;
   margin-bottom: 90rem;
   display: flex;
   flex-direction: column;
@@ -412,7 +412,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 2410rem;
+  height: 1286rem;
   background-color: #F5F5F8;
 }
 .screen4 .wrapper1680 {
diff --git a/src/views/Business/Construction/Index.vue b/src/views/Business/Construction/Index.vue
index 4369fd7..cc7d043 100644
--- a/src/views/Business/Construction/Index.vue
+++ b/src/views/Business/Construction/Index.vue
@@ -316,7 +316,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/基础设施/技术支持' } },
+          { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/基础设施/技术支持' } },
         );
         this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -359,7 +359,7 @@ export default {
 }
 .screen3 {
   position: relative;
-  height: 1300rem;
+  height: 850rem;
   background-color: #ffffff;
 }
 .screen3 .wrapper1680 {
@@ -377,8 +377,8 @@ export default {
 }
 .screen3 .list-item {
   margin: 0 58rem;
-  width: 350rem;
-  height: 350rem;
+  width: 234rem;
+  height: 330rem;
   margin-bottom: 90rem;
   display: flex;
   flex-direction: column;
@@ -412,7 +412,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 2410rem;
+  height: 1286rem;
   background-color: #F5F5F8;
 }
 .screen4 .wrapper1680 {
diff --git a/src/views/Business/EnergyEnvironment/Index.vue b/src/views/Business/EnergyEnvironment/Index.vue
index adaf729..bfbc5bb 100644
--- a/src/views/Business/EnergyEnvironment/Index.vue
+++ b/src/views/Business/EnergyEnvironment/Index.vue
@@ -316,7 +316,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/能源与环境/技术支持' } },
+          { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/能源与环境/技术支持' } },
         );
         this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -412,7 +412,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 2410rem;
+  height: 1286rem;
   background-color: #F5F5F8;
 }
 .screen4 .wrapper1680 {
diff --git a/src/views/Business/GlobalSupplyChain/Index.vue b/src/views/Business/GlobalSupplyChain/Index.vue
index bf1a8d8..9e202a7 100644
--- a/src/views/Business/GlobalSupplyChain/Index.vue
+++ b/src/views/Business/GlobalSupplyChain/Index.vue
@@ -107,6 +107,57 @@
         </div>
       </div>
     </div>
+    <!-- <div class="screen6">
+      <div class="wrapper1680">
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen6.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
+          >
+            {{ screen6.titleCn }}
+          </div>
+        </transition>
+        <transition name="fade-slide-bottom">
+          <div
+            v-show="screen6.offsetLevel >= 0"
+            class="text-posi-abs"
+            style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
+          >
+            {{ screen6.contentCn }}
+          </div>
+        </transition>
+        <div class="list-wrapper">
+          <div
+            v-for="(item, index) in screen6.list"
+            :key="item.id"
+            class="list-item"
+          >
+            <transition name="scale">
+              <div
+                v-show="screen6.offsetLevel >= 0"
+                class="list-img"
+                :style="`--tde:${0.6 + index * 0.05}s;`"
+              >
+                <img
+                  :src="item.imageurl"
+                  alt=""
+                >
+              </div>
+            </transition>
+            <transition name="fade-slide-bottom">
+              <div
+                v-show="screen6.offsetLevel >= 0"
+                class="list-title"
+                :style="`--tde:${0.9 + index * 0.05}s;`"
+              >
+                {{ item.businessName }}
+              </div>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div> -->
     <div class="screen4">
       <div class="wrapper1680">
         <div
@@ -230,6 +281,13 @@ export default {
           imageSrc: '',
         },
       },
+      screen6: {
+        offsets: [800],
+        offsetLevel: 1,
+        titleCn: '',
+        contentCn: '',
+        list: [],
+      },
     };
   },
   computed: {
@@ -270,6 +328,8 @@ export default {
     this.getScreen3ListData();
     this.getScreen4ListData();
     this.getScreen5JoinusData();
+    // this.getScreen6Data();
+    // this.getScreen6ListData();
   },
   mounted () {
     if (this.$route.hash) {
@@ -316,7 +376,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/全球供应链/技术支持' } },
+          { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/全球供应链/技术支持' } },
         );
         this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -332,6 +392,25 @@ export default {
         this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
       } catch (error) {}
     },
+    async getScreen6Data () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/全球供应链/供应链描述' } },
+        );
+        this.screen6.titleCn = res.rows[0].businessName;
+        this.screen6.contentCn = res.rows[0].titleChinese;
+      } catch (error) {}
+    },
+    async getScreen6ListData () {
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 5, captionName: '业务领域/全球供应链/供应链流程' } },
+        );
+        this.screen6.list = res.rows.sort((a, b) => a.orders - b.orders);
+      } catch (error) {}
+    },
   },
 };
 </script>
@@ -412,7 +491,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 2410rem;
+  height: 1286rem;
   background-color: #F5F5F8;
 }
 .screen4 .wrapper1680 {
@@ -508,4 +587,50 @@ export default {
   background-clip: text;
   color: transparent;
 }
+.screen6 {
+  position: relative;
+  height: 800rem;
+  background-color: rgb(245, 244, 249);
+}
+.screen6 .wrapper1680 {
+  height: 100%;
+  position: relative;
+}
+.screen6 .list-wrapper {
+  position: absolute;
+  top: 400rem;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0px 115rem;
+  box-sizing: border-box;
+}
+.screen6 .list-item {
+  border-radius: 20rem;
+  background: #ffffff;
+  margin: 0 25rem;
+  width: 240rem;
+  height: 260rem;
+  margin-bottom: 90rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.screen6 .list-item:hover {
+  transform: scale(1.1, 1.1);
+}
+.screen6 .list-img {
+  width: 150rem;
+  height: 150rem;
+  display: contents;
+}
+.screen6 .list-title {
+  text-align: center;
+  font-size: 20rem;
+  line-height: 1;
+  color: #111111;
+  margin-top: 26rem;
+}
 </style>
diff --git a/src/views/Business/HealthIndustry/Index.vue b/src/views/Business/HealthIndustry/Index.vue
index 7e9c9da..af609c4 100644
--- a/src/views/Business/HealthIndustry/Index.vue
+++ b/src/views/Business/HealthIndustry/Index.vue
@@ -316,7 +316,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/健康产业/技术支持' } },
+          { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/健康产业/技术支持' } },
         );
         this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -359,7 +359,7 @@ export default {
 }
 .screen3 {
   position: relative;
-  height: 1300rem;
+  height: 850rem;
   background-color: #ffffff;
 }
 .screen3 .wrapper1680 {
@@ -377,8 +377,8 @@ export default {
 }
 .screen3 .list-item {
   margin: 0 58rem;
-  width: 350rem;
-  height: 350rem;
+  width: 234rem;
+  height: 330rem;
   margin-bottom: 90rem;
   display: flex;
   flex-direction: column;
@@ -412,7 +412,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 2410rem;
+  height: 1286rem;
   background-color: #F5F5F8;
 }
 .screen4 .wrapper1680 {
diff --git a/src/views/Business/HighTech/Index.vue b/src/views/Business/HighTech/Index.vue
index 11274b8..a826391 100644
--- a/src/views/Business/HighTech/Index.vue
+++ b/src/views/Business/HighTech/Index.vue
@@ -354,7 +354,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/高新技术/技术支持' } },
+          { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/高新技术/技术支持' } },
         );
         this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
       } catch (error) {}
@@ -459,7 +459,7 @@ export default {
 }
 .screen4 {
   position: relative;
-  height: 2410rem;
+  height: 1286rem;
   background-color: #F5F5F8;
 }
 .screen4 .wrapper1680 {