From 7e968ced6e064b709b8f63e220bea5676cd43578 Mon Sep 17 00:00:00 2001
From: ZSH <3150957306@qq.com>
Date: Thu, 20 Mar 2025 10:43:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B9=E7=9B=AE=EF=BC=8C?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=BA=86=E6=AC=A2=E8=BF=8E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=94=B9=E5=8F=98=E4=BA=86=E6=B5=8F=E8=A7=88=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NavMenu.vue |    4 +-
 pages/home.vue         | 1280 +++++++---------------------------------
 pages/index.vue        | 1274 ++++++++++++++++++++++++++++++++-------
 3 files changed, 1279 insertions(+), 1279 deletions(-)

diff --git a/components/NavMenu.vue b/components/NavMenu.vue
index ac6e980..2b84840 100644
--- a/components/NavMenu.vue
+++ b/components/NavMenu.vue
@@ -34,7 +34,7 @@
     <!-- Drawer Menu -->
     <div v-if="isMenuChecked" class="drawer-menu" ref="drawerMenu">
       <ul class="navbar-list2">
-        <nuxt-link :class="{ active: isActive('/home') }" to="/home">
+        <nuxt-link :class="{ active: isActive('/') }" to="/">
           <li>首页</li>
         </nuxt-link>
         <nuxt-link :class="{ active: isActive('/calculatePrice') }" to="/calculatePrice">
@@ -55,7 +55,7 @@
     <!-- Desktop Menu -->
     <div v-else class="pc-menu">
       <ul class="navbar-list">
-        <li><nuxt-link :class="{ active: isActive('/home') }" to="/home">首页</nuxt-link></li>
+        <li><nuxt-link :class="{ active: isActive('/') }" to="/">首页</nuxt-link></li>
         <li><nuxt-link :class="{ active: isActive('/calculatePrice') }" to="/calculatePrice">AWS价格计算</nuxt-link></li>
         <li><img src="../assets/logo.png" alt="Buddy.com" class="logo" /></li>
         <li><nuxt-link :class="{ active: isActive('/aboutUs') }" to="/aboutUs">关于我们</nuxt-link></li>
diff --git a/pages/home.vue b/pages/home.vue
index c7dabe0..e9655c4 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,1150 +1,298 @@
 <template>
   <div>
-    <NavMenu></NavMenu>
-    <div class="home_heroSection">
-      <div class="homeView_leftBox">
-        <div class="homeView_leftBox_padding_top"></div>
-        <div class="logoContainer">
-          <img src="@/assets/logo2.png" alt="Logo"/>
-        </div>
-        <div class="textContainer">
-          <div class="textContainer_title">Buddy’s Cloud</div>
-          <div class="textContainer_title2">AWS云服务全球代理商</div>
-          <div class="right_to"><a :href="contactLinks.Arrow" target="_blank"><img src="../assets/icon/Arrow.png" alt="buddy.com"></a></div>
-          <div class="font-size-subtitle3">可信任的AWS云上伙伴，量身定制的AWS云解决方案</div>
-          <div class="font-size-paragraph2">Trusted AWS partners on the cloud, Tailor-made AWS cloud solutions</div>
+    <!-- Banner Section -->
+    <div class="banner-view">
+      <div class="banner-view-leftBox">
+        <div class="banner-view-title">Buddy’S</div>
+        <div class="banner-view-CloudTitle">Buddy‘s Cloud</div>
+        <div class="banner-view-CloudMassage">Hey buddy!<br/>
+          Welcome back ,we have prepared a suitable AWS plan for you
         </div>
+        <!--      <div class="banner-view-buttons">-->
+        <!--        <button>进入首页</button> <button>联系我们</button>-->
+        <!--      </div>-->
       </div>
-      <div class="homeView_rightBox"></div>
-    </div>
-    <div class="personalized-service">
-      <div class="personalized-service-left">
-        <img src="../assets/back/diannao.jpg" alt="Personalized Service Icon"/>
-      </div>
-      <div class="personalized-service-right">
-        <div class="top-content">
-          <div class="personalized-service-right-h2">个性化服务</div>
-          <h3>Personalized service</h3>
-        </div>
-        <div class="bottom-content">
-          <p>在Buddy's
-            Cloud，我们相信没有一种云解决方案能够适合所有人，这就是为什么我们提供个性化的咨询服务，帮助客户了解他们的需求，并从众多云服务中选择最合适的。</p>
-          <p>At Buddy's Cloud, we believe that no one cloud solution is right for everyone, which is why we offer one
-            personalized consulting services to help customers understand their needs and choose the most suitable one
-            from a wide range of cloud services.</p>
-        </div>
+      <div class="banner-view-rightBox">
+        <img src="../assets/helloIMG/StartHere.png" alt="buddy.com"/>
       </div>
     </div>
-    <div class="service-section">
-      <div class="service-section-mini">
-        <div class="service-card">
-          <img src="../assets/icon/Question.png" alt="Technical advice" class="service-icon"/>
-          <h3>技术咨询 <span>Technical advice</span></h3>
-          <p>免费提供技术咨询，解答您使用AWS服务过程中遇到的任何问题，帮助您的业务增长。</p>
-          <p>Free technical consultation to answer all your questions about using AWS services and help your business
-            grow.</p>
+
+    <!-- Welcome Message Section -->
+    <div class="welcomeMessage-view">
+      <div class="welcomeMessage-content">
+        <p class="welcomeMessage-content-title">Buddy’s Cloud</p>
+        <p class="welcomeMessage-content-text">More than just your AWS cloud service reseller, but also a reliable
+          partner for your cloud journey</p>
+        <div class="welcomeMessage-content-buttons">
+          <button @click="goToHomePage">进入首页</button>
+          <button @click="goToContactPage">联系我们</button>
         </div>
 
-        <div class="service-card">
-          <img src="../assets/icon/File.png" alt="Bill payment" class="service-icon"/>
-          <h3>账单代付 <span>Bill payment</span></h3>
-          <p>与我们合作的组织，接受多种货币支付，包括人民币、美元和其它外币。</p>
-          <p>Affiliated with our organization, accepting a wide range of currencies,including RMB, USD, and tokens.</p>
-        </div>
-
-        <div class="service2-card">
-          <h3>服务类型 <span>type of service</span></h3>
-          <div>
-            <p>我们的服务不仅限于技术层面，更包括帮助客户理解云服务，助力他们的业务成长。</p>
-            <p>Our services not only on the technical side, but also on helping customers understand cloud services and
-              help their businesses grow.</p>
-          </div>
-        </div>
-
-        <div class="service-card">
-          <img src="../assets/icon/User.png" alt="Account opening" class="service-icon"/>
-          <h3>账户开通 <span>Account opening</span></h3>
-          <p>免费安全开设AWS账户，账户信息安全无忧，您不需要担心账户安全。</p>
-          <p>No real-name and no card registration,safe and stable, and account secretsTake control of your own and
-            don't need to worry about account security.</p>
-        </div>
-
-        <div class="service-card">
-          <img src="../assets/icon/Checklist.png" alt="Account management" class="service-icon"/>
-          <h3>账户解锁 <span>Unblock your account</span></h3>
-          <p>AWS原生技术支持，稳定的账户注册与续期服务。</p>
-          <p>AWS original technical support, stable account unblocking and renewal.</p>
-        </div>
-
-        <div class="service-card">
-          <img src="../assets/icon/Refresh.png" alt="Channel conversion" class="service-icon"/>
-          <h3>渠道转换 <span>Channel conversion</span></h3>
-          <p>转接代理商，原价续费。</p>
-          <p>Convert the agent and renew the originalprice.</p>
-        </div>
       </div>
-      <div class="service-menu-wrapper">
-        <div class="service-card-item">
-          <div class="service-card-icon-container">
-            <img src="../assets/icon/Question.png" alt="Technical advice"/>
-          </div>
-          <div class="service-card-text">
-            <span class="service-card-text-chinese">技术咨询</span>
-            <span class="service-card-text-english">Technical advice</span>
-          </div>
-        </div>
-
-        <div class="service-card-item tem-borderleft">
-          <div class="service-card-icon-container">
-            <img src="../assets/icon/File.png" alt="Bill payment"/>
-          </div>
-          <div class="service-card-text">
-            <span class="service-card-text-chinese">账单代付</span>
-            <span class="service-card-text-english">Bill payment</span>
-          </div>
-        </div>
-
-        <div class="service-card-item">
-          <div class="service-card-icon-container">
-            <img src="../assets/icon/User.png" alt="Account opening"/>
-          </div>
-          <div class="service-card-text">
-            <span class="service-card-text-chinese">账户开通</span>
-            <span class="service-card-text-english">Account opening</span>
-          </div>
-        </div>
-
-        <div class="service-card-item tem-borderleft">
-          <div class="service-card-icon-container">
-            <img src="../assets/icon/Checklist.png" alt="Unblock your account"/>
-          </div>
-          <div class="service-card-text">
-            <span class="service-card-text-chinese">账户解封</span>
-            <span class="service-card-text-english">Unblock your account</span>
-          </div>
-        </div>
-
-        <div class="service-card-item">
-          <div class="service-card-icon-container">
-            <img src="../assets/icon/Refresh.png" alt="Channel conversion"/>
-          </div>
-          <div class="service-card-text">
-            <span class="service-card-text-chinese">渠道转换</span>
-            <span class="service-card-text-english">Channel conversion</span>
-          </div>
-        </div>
-      </div>
-      <div class="service-process">
-        <div class="service-process-title">
-          <span class="service-process-main-title">服务流程</span>
-          <span class="service-process-sub-title">Service process</span>
-        </div>
-
-        <div class="service-process-icons">
-          <div class="service-process-icons-box">
-            <div class="service-process-icon">
-              <img src="../assets/icon/Smile.png" alt="Pre-sale" class="icon-image"/>
-            </div>
-            <div class="service-process-icon-title">售前</div>
-            <div class="service-process-icon-p">联系客户经理，免费咨询</div>
-          </div>
-
-          <div class="service-process-icons-box service-process-icons-box2">
-            <div class="service-process-icon">
-              <img src="../assets/icon/Cart.png" alt="In progress" class="icon-image"/>
-            </div>
-            <div class="service-process-icon-title">售中</div>
-            <div class="service-process-icon-p">多种支付方式可选</div>
-          </div>
-          <div class="service-process-icons-box3">
-
-            <div class="service-process-icon-title">售中</div>
-            <div class="service-process-icon-p">多种支付方式可选</div>
-            <div class="service-process-icon">
-              <img src="../assets/icon/Cart.png" alt="In progress" class="icon-image"/>
-            </div>
-          </div>
-          <div class="service-process-icons-box">
-            <div class="service-process-icon">
-              <img src="../assets/icon/24h.png" alt="After sale" class="icon-image"/>
-            </div>
-            <div class="service-process-icon-title">售后</div>
-            <div class="service-process-icon-p">技术支持，24小时运维</div>
-          </div>
-        </div>
+      <div class="footer">
+        <p>
+          <a href="#">隐私</a> |
+          <a href="#">网站条款</a> |
+          <a href="#">Cookie 首选项</a> |
+          &copy; 2022 Raylinx Inc. 或其附属公司. 保留所有权利.
+        </p>
       </div>
     </div>
-    <contactUs></contactUs>
-    <div style="background: #ff6702;padding: 5% 0">
-      <div class="team-member-card">
-        <div class="team-member-photo">
-          <div class="team-member-photo-right-icon"><img src="../assets/icon/img_2.png"></div>
-          <div class="team-card-header">
-            <p>Buddy's Cloud</p>
-            <p class="org_bar"></p>
-          </div>
-          <div class="team-card-body">
-            <div class="team-photo">
-              <img src="../assets/back/FRANK-03.png" alt="Frank Wang"/>
-            </div>
-          </div>
-          <div class="team-card-footer">
-            <div class="team-card-footer-name">Frank Wang <span>AWS Service</span></div>
-            <p>知云 懂云 用云 <img src="../assets/icon/img.png" alt=""></p>
-          </div>
-        </div>
-        <div class="team-member-info">
-          <h2>Frank Wang</h2>
-          <p class="description">
-            AWS中国代理，超过十年专业AWS使用经验，解决3000+客户的技术问题，专业素质强，人脉广泛，结识AWS原厂技术员和阿里国际总代理。</p>
-          <p class="description">AWS China general agent, more than 10 years of professional AWS experience, Solve the
-            technical problems of 3000+ customers, strong professional quality and connections. Extensively, get
-            acquainted with AWS original technicians and Ali international distributors.</p>
-        </div>
-      </div>
-
-    </div>
-    <div class="service-table">
-      <div style="width: 80%;margin: 0 auto;border-top: 8px solid #ff6702;">
-        <div class="service-table-row">
-          <div class="service-table-icon"><img src="../assets/icon/Building.png" alt=""></div>
-          <div class="service-table-row-mini">
-            <div class="service-table-cell title">服务类型</div>
-            <div class="row-mini-lie">
-              <div class="service-table-cell">
-                <div>轻量云服务器</div>
-                <div>ec2服务器</div>
-              </div>
-              <div class="service-table-cell">
-                <div>站群服务器</div>
-                <div>高防服务器</div>
-              </div>
-            </div>
-            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
-              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                   xmlns="http://www.w3.org/2000/svg"
-                   p-id="4090" width="200" height="200">
-                <path
-                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
-                  fill="#7e7d7d" p-id="4091"></path>
-              </svg>
-            </a></div>
-          </div>
-
-        </div>
-
-        <div class="service-table-row">
-          <div class="service-table-icon"><img src="../assets/icon/Location.png" alt=""></div>
-          <div class="service-table-row-mini">
-            <div class="service-table-cell title">地址范围</div>
-            <div class="row-mini-lie">
-              <div class="service-table-cell">
-                <div>中国香港</div>
-                <div>新加坡</div>
-              </div>
-              <div class="service-table-cell">
-                <div>美国</div>
-                <div>日本</div>
-              </div>
-            </div>
-            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
-              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                   xmlns="http://www.w3.org/2000/svg"
-                   p-id="4090" width="200" height="200">
-                <path
-                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
-                  fill="#7e7d7d" p-id="4091"></path>
-              </svg>
-            </a></div>
-          </div>
-
-        </div>
-
-        <div class="service-table-row">
-          <div class="service-table-icon"><img src="../assets/icon/Wi-Fi.png" alt=""></div>
-          <div class="service-table-row-mini">
-            <div class="service-table-cell title">带宽范围</div>
-            <div class="row-mini-lie">
-              <div class="service-table-cell">
-                <div>5M</div>
-                <div>10M</div>
-              </div>
-              <div class="service-table-cell">
-                <div>100M</div>
-                <div>1000M</div>
-              </div>
-            </div>
-            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
-              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                   xmlns="http://www.w3.org/2000/svg"
-                   p-id="4090" width="200" height="200">
-                <path
-                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
-                  fill="#7e7d7d" p-id="4091"></path>
-              </svg>
-            </a></div>
-          </div>
-
-        </div>
-
-        <div class="service-table-row">
-          <div class="service-table-icon"><img src="../assets/icon/Grid.png" alt=""></div>
-          <div class="service-table-row-mini">
-            <div class="service-table-cell title">配置大小</div>
-            <div class="row-mini-lie">
-              <div class="service-table-cell">
-                <div>2核0.5G</div>
-                <div>2核1G</div>
-              </div>
-              <div class="service-table-cell">
-                <div>2核2G</div>
-                <div>2核4G</div>
-              </div>
-            </div>
-            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
-              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                   xmlns="http://www.w3.org/2000/svg"
-                   p-id="4090" width="200" height="200">
-                <path
-                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
-                  fill="#7e7d7d" p-id="4091"></path>
-              </svg>
-            </a></div>
-          </div>
-
-
-        </div>
-      </div>
-    </div>
-    <FooterMenu></FooterMenu>
   </div>
 </template>
 
 <script>
-import NavMenu from "../components/NavMenu.vue";
-import contactUs from "./contactUs.vue";
-import FooterMenu from "../components/FooterMenu.vue";
 import '../assets/CSS/styles.css';
-import { contactLinks } from '../static/js/contact_link.js';
+
 export default {
-  components: {NavMenu, contactUs, FooterMenu},
-  setup() {
-    return {contactLinks}
+  name: 'IndexPage',
+  methods: {
+    goToHomePage() {
+      this.$router.push(`/home`);
+    },
+    goToContactPage() {
+      this.$router.push(`/contactUs`);
+    }
   }
+//   data() {
+//     return {
+//       showHomeAndroid: false,
+//       screenWidth: null,
+//     }
+//   },
+//   methods: {
+//     bodyScale() {
+//       var devicewidth = document.documentElement.clientWidth; // 获取当前分辨率下的可视区域宽度
+//       if(devicewidth <= 1600) {
+//         var scale = devicewidth / 1600; // 分母——设计稿的尺寸
+//         requestAnimationFrame(() => {
+//           document.body.style.zoom = scale; // 放大缩小相应倍数
+//         });
+//       }
+//     },
+//   },
+//
+//   mounted() {
+//     this.screenWidth = document.body.clientWidth; // 在客户端设置
+//     window.onresize = () => {
+//       setTimeout(() => {
+//         this.screenWidth = document.body.clientWidth;
+//       }, 0);  // 使用0延时将任务放入事件循环的尾部
+//     };
+//   },
+//
+//   watch: {
+//     screenWidth: {
+//       handler: function (val) {
+//         setTimeout(() => { // 使用setTimeout异步处理
+//           if (val >= 800) {
+//             this.bodyScale();
+//             this.showHomeAndroid = false;
+//             // console.log(this.showHomeAndroid);
+//           } else if (val < 800) {
+//             // this.bodyScale();
+//             this.showHomeAndroid = true;
+//             // console.log(this.showHomeAndroid);
+//           }
+//           // this.$forceUpdate();
+//         }, 0);
+//       },
+//       immediate: true,
+//       deep: true,
+//     },
+//   },
 }
 </script>
 
 <style scoped>
-/*home_heroSection*/
-.home_heroSection {
+
+
+/* Banner Section */
+.banner-view {
   width: 100%;
-  height: 560px;
-  display: flex;
-  justify-content: space-between;
-  border: 1px solid #ff6702;
-}
-
-.homeView_leftBox {
-  background: var(--footer-link-color);
-  width: 50%;
-  height: 100%;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.logoContainer img {
-  width: 160px;
-  height: auto;
-}
-
-
-
-.textContainer {
-  text-align: center;
+  height: 70vh;
+  background-color: #ff6702;
   color: white;
-}
-
-.textContainer_title {
-  font-size: var(--font-size-subtitle2);
-  font-weight: bold;
-}
-
-.textContainer_title2 {
-  font-size: var(--font-size-title2);
-  margin-bottom: 10px;
-}
-
-.font-size-subtitle3 {
-  font-size: var(--font-size-subtitle3);
-}
-
-.font-size-paragraph2 {
-  margin: 5px 0;
-  font-size: var(--font-size-subtitle3);
-
-}
-
-.right_to {
-  width: 50px;
-  height: 50px;
-  margin: 0 auto 8% auto;
-}
-
-.right_to img {
-  width: 100%;
-  height: 100%;
-}
-
-.homeView_rightBox {
-  width: 50%;
-  height: 100%;
-  background: url("../assets/back/jianzhu.jpg") no-repeat center center;
-  background-size: cover;
-}
-
-/*personalized-service*/
-
-.personalized-service {
-  display: flex;
-  padding: 5rem 0;
-  background-color: #fff;
-  margin-bottom: 20px;
-  width: 100%;
-}
-
-.personalized-service-left {
-  width: 40%;
+  padding: 0 5rem;
   display: flex;
   justify-content: right;
+  align-items: center;
+  z-index: 1;
 }
 
-.personalized-service-left img {
-  width: 70%; /* 图标的宽度 */
-  height: auto;
+.banner-view-rightBox {
+  width: var(--dynamic-width-rightBox); /* 使用 root 中的动态宽度 */
+  transition: width 0.5s ease; /* 平滑过渡 */
+  z-index: 2;
 }
 
-.personalized-service-right {
-  width: 50%;
-  padding-left: 5rem;
-  position: relative;
-}
-
-.personalized-service-right-h2 {
-  font-size: var(--font-size-title3);
-  color: #ff6702;
-  margin-bottom: 10px;
-  font-weight: bold;
-}
-
-.personalized-service-right h3 {
-  font-size: 1.2rem;
-  color: #ff6702;
-  margin-bottom: 15px;
-}
-
-.personalized-service-right p {
-  font-size: var(--font-size-paragraph2);
-  line-height: 1.6;
-  color: #333;
-}
-
-.bottom-content {
-  position: absolute;
-  bottom: 0;
-}
-
-/*service-section*/
-.service-section {
+.banner-view-rightBox img {
   width: 100%;
-  background-color: #ff6702;
-}
-
-.service-section-mini {
-  width: 80%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px; /* 卡片之间的间距 */
-  justify-content: space-between; /* 将卡片均匀分布 */
-  padding: 5rem 2rem;
+  height: var(--dynamic-width-rightBox);
   margin: 0 auto;
 }
 
-.service-card {
-  background-color: #fff;
-  color: #000;
-  padding: 20px;
-  width: 30%; /* 每个卡片占三分之一宽度 */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  text-align: left;
-}
-
-.service2-card {
-  width: 30%; /* 宽度占满整行 */
-  border-left: 4px solid white;
-  color: white;
-  padding-left: 25px;
-}
-
-.service-icon {
-  width: clamp(0.2rem, 5vw, 10rem);
-  height: clamp(0.2rem, 5vw, 10rem);
-  margin-bottom: 15px;
-}
-
-.service-card h3 {
-  font-size: clamp(0.2rem, 1.5vw, 2rem);
-  margin-bottom: 10px;
-  color: #ff6702;
-}
-
-.service2-card h3 {
-  font-size: clamp(0.2rem, 1.5vw, 2rem);
-  position: relative;
-}
-
-.service2-card div {
-  height: 70%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  font-size: clamp(0.2rem, 1.5vw, 1rem);
-}
-
-.service-card h3 span {
-  font-size: clamp(0.2rem, 1.4vw, 1.3rem);
-}
-
-.service-card p {
-  font-size: clamp(0.2rem, 1.5vw, 1rem);
-  line-height: 1.5;
-  margin-bottom: 0;
-}
-
-.team-member-photo-right-icon {
-  display: none;
-}
-
-/* Container for the service process */
-.service-process {
-  background-color: #ff6702;
-  padding: 30px;
-  color: white;
-}
-
-.service-process-title {
-  text-align: center;
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-.service-process-main-title {
-  font-size: clamp(1.3rem, 2vw, 2rem);
-  margin-bottom: 5px;
-}
-
-.service-process-sub-title {
-  font-size: clamp(1rem, 1.5vw, 1.5rem);
-}
-
-/* Icons section */
-.service-process-icons {
-  display: flex;
-  justify-content: center;
-  gap: 5rem;
-  flex-wrap: wrap;
-  width: 80%;
-  margin: 0 auto;
-}
-
-.service-process-icons-box {
-  color: #000;
-  padding: 20px;
-  width: 15%;
-  text-align: center;
-
-}
-
-.service-process-icons-box3 {
-  color: #000;
-  padding: 20px 0;
-  width: 31%;
-  text-align: center;
-  display: none;
-}
-
-.service-process-icon {
-  background-color: white;
-  border-radius: 100%;
-  width: clamp(3.2rem, 6vw, 6rem);
-  height: clamp(3.2rem, 6vw, 6rem);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto 15px auto;
-}
-
-.icon-image {
-  width: 90%;
-  height: 90%;
-}
-
-.service-process-icon-title {
-  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: white;
-}
-
-.service-process-icon-p {
-  font-size: clamp(0.8rem, 1.5vw, 1rem);
-  line-height: 1.5;
-  color: white;
-}
-
-/*team-member-car*/
-.team-member-card {
-  display: flex;
-  background-color: #ff6702;
-
-  align-items: flex-end;
-  width: 80%;
-  height: 600px;
-  margin: 0 auto;
-}
-
-/* Header Styling */
-.team-card-header {
-  background-color: #fff;
-  color: #ff6702;
-  font-size: 15px;
-  font-weight: bold;
-  display: flex;
-  justify-content: center;
-}
-
-.org_bar {
-  width: 70%;
-  border-bottom: 1px solid #ff6702;
-}
-
-/* Body Styling */
-.team-card-body {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.team-photo {
-  background: #ff6702;
-}
-
-.team-photo img {
-  width: 400px;
-  height: 400px;
-}
-
-.team-info h2 {
-  font-size: 24px;
-  margin: 0;
-  color: #333;
-}
-
-.team-info .role {
-  font-size: 16px;
-  color: #ff6702;
-  margin: 5px 0;
-}
-
-.team-info .description {
-  font-size: 14px;
-  color: #777;
-  line-height: 1.5;
-  margin-top: 10px;
-}
-
-/* Footer Styling */
-.team-card-footer {
-  background-color: white;
-  padding: 10px;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.team-card-footer p {
-  color: #ff6702;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
-  font-weight: 400;
-}
-
-.team-card-footer-name {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid #333;
-  font-size: clamp(0.2rem, 1.5vw, 3rem);
-  position: relative;
-}
-
-.team-card-footer-name span {
-  font-size: 15px;
-  color: #ff6702;
+.banner-view-leftBox {
+  width: var(--dynamic-width-leftBox); /* 使用 root 中的动态宽度 */
+  transition: width 0.5s ease; /* 平滑过渡 */
   position: absolute;
-  bottom: 0;
-  right: 0;
+  left: 5%;
 }
 
-.team-card-footer p img {
-  width: 73px;
-  height: 24px;
-}
-
-.team-member-photo {
-  background: #ffffff;
-  padding: 20px;
-}
-
-.team-member-info {
-  width: 50%;
-  padding: 0 1%;
-  margin-left: 4%;
-  border-left: 4px solid #fff;
-}
-
-.team-member-info h2 {
-  font-size: clamp(1.2rem, 2.5vw, 3rem);
-  color: #fff;
-  margin: 0 0 5% 0;
+.banner-view-title {
+  font-size: var(--font-size-title); /* 使用 clamp() 调整字体大小 */
   font-weight: bold;
 }
 
-.team-member-info .role {
-  font-size: 1.2rem;
-  color: #fff;
-  margin-top: 5px;
+.banner-view-CloudTitle {
+  font-size: var(--font-size-subtitle); /* 动态调整字体大小 */
+  font-weight: 500;
+  margin-left: 10px;
 }
 
-.team-member-info .description {
-  font-size: clamp(0.8rem, 1.5vw, 1.5rem);
-  color: #fff;
-  margin-top: 10px;
+.banner-view-CloudMassage {
+  font-size: var(--font-size-paragraph); /* 动态调整段落字体 */
+  font-weight: 400;
+  width: 60%;
+  margin-left: 10px;
 }
 
-.service-table {
-  padding: 5% 0;
+.banner-view-buttons {
+  margin-left: 10px;
+  margin-top: 5%;
 }
 
-.service-table-row {
+.banner-view-buttons button {
+  border-radius: 10px;
+  padding: 5px;
+  border: none;
+  color: #ff6702;
+  text-align: center;
+  width: 15%;
+  margin-right: 5%;
+  font-size: var(--button-font-size); /* 使用 clamp() 调整按钮字体 */
+}
+
+/* Welcome Message Section */
+.welcomeMessage-view {
+  width: 100%;
+  height: 30vh;
+  background-color: #ffffff;
+  color: #000;
+  text-align: center;
   display: flex;
-  padding: 10px 5%;
-  border-bottom: 8px solid #ff6702;
+  justify-content: center;
   align-items: center;
+  position: relative;
+}
+
+.welcomeMessage-content {
+  font-size: var(--font-size-paragraph); /* 动态调整段落字体 */
+}
+
+.welcomeMessage-content-title {
+  font-size: var(--font-size-subtitle); /* 动态调整标题字体 */
+  font-weight: 500;
+  color: #ff6702;
+}
+
+.welcomeMessage-content-buttons {
+  margin: 0 auto;
+  display: flex;
   justify-content: space-between;
+  width: 40%;
+  gap: 10px;
+  padding: 0 2%;
 }
 
-.service-table-row:hover {
-  background-color: rgba(255, 103, 2, 0.2);
+.welcomeMessage-content-buttons button {
+  background-color: #ff6702;
+  text-align: center;
+
+  width: 50%;
+  border-radius: 10px;
+  padding: 5px;
+  border: none;
+  font-size: var(--button-font-size); /* 使用 clamp() 调整按钮字体 */
+  color: #fff;
 }
 
-.service-table-icon {
-  width: 30%;
+/* Footer Section */
+.footer {
+  background-color: var(--footer-bg-color);
+  color: var(--footer-text-color);
+  text-align: center;
+  font-size: var(--footer-size-paragraph); /* 动态调整字体大小 */
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex; /* 添加 flex 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  height: auto; /* 如果没有固定高度，允许内容根据内容自动调整 */
 }
 
-.service-table-icon img {
-  width: 150px;
-  height: 150px;
-}
-
-.service-table-cell {
-  text-align: left;
-  padding: 10px;
-  color: #ff6702;
-  width: 30%;
-  font-size: clamp(0.2rem, 1vw, 1.2rem);
-}
-
-.service-table-cell div {
-  margin-top: 10px;
-}
-
-.service-table-cell.title {
-  font-weight: bold;
-  color: #ff6702;
-  font-size: clamp(0.2rem, 1.5vw, 3rem);
-
-}
-
-.service-table-cell a {
-  color: #7e7d7d;
-  text-decoration: none;
+.footer p {
+  margin: 0;
   display: flex;
+  justify-content: center;
   align-items: center;
-  font-size: clamp(0.2rem, 1vw, 1.2rem);
+  font-size: var(--footer-size-paragraph);
 }
 
-.service-table-cell a svg {
-  width: 25px;
-  height: 25px;
+.footer a {
+  color: var(--footer-link-color);
+  text-decoration: none;
+  margin: 0 0.5rem;
+  font-size: var(--footer-size-paragraph);
 }
 
-.service-table-cell a:hover {
+.footer a:hover {
   text-decoration: underline;
 }
 
-.service-menu-wrapper {
-  display: none;
-}
-
-.service-table-row-mini {
-  width: 70%;
-  display: flex;
-  align-items: center;
-}
-
-.row-mini-lie {
-  width: 80%;
-  display: flex;
-  align-items: center;
-}
-
+/* 当页面宽度小于 800px 时，动态调整宽度 */
 @media (max-width: 800px) {
-  .home_heroSection {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .homeView_leftBox {
-    width: 100%;
-    padding: 20px 0 0 0;
-  }
-
-  .homeView_rightBox {
-    width: 100%;
-    height: 100%;
-  }
-
-  .logoContainer img {
-    width: 120px;
-    height: auto;
-  }
-
-  .right_to {
-    width: 40px;
-    height: 40px;
-    margin: 0 auto 0 auto;
-  }
-
-  .personalized-service {
-    margin-bottom: 0;
-    padding: 40px 0;
-  }
-
-  .personalized-service-left {
-    width: 40%;
-    display: none;
-  }
-
-  .personalized-service-right {
-    width: 90%;
-    padding-left: 5%;
-    position: static;
-    margin: 0 auto;
-    border-left: 4px solid #ff6702;
-  }
-
-  .bottom-content {
-    position: static;
-  }
-  .bottom-content p{
-    position: static;
-    font-size: 1rem !important;
-  }
-  .personalized-service-right-h2 {
-    color: #ff6702;
-    margin-bottom: 1%;
-    font-weight: bold;
-  }
-
-  .personalized-service-right p {
-    color: #333;
-    line-height: 1.2;
-    margin-bottom: 0;
-  }
-
-  .personalized-service-right h3 {
-    margin-bottom: 1%;
-  }
-
-  .service-section {
-    background-color: #ffffff;
-  }
-
-  .service-section-mini {
-    width: 90%;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0;
-    justify-content: space-between;
-    padding: 0;
-    margin: 0 auto 30px auto;
-  }
-
-  .service-card {
-    display: none;
-  }
-
-  .service2-card {
-    width: 90%;
-    border-left: 4px solid #ff6702;
-    color: #000000;
-    padding-left: 25px;
-  }
-
-  .service2-card h3 {
-    font-size: var(--font-size-title3);
-    position: static;
-    color: #ff6702;
-    font-weight: bold;
-  }
-
-  .service2-card h3 span {
+  .banner-view {
     display: block;
-    font-size: 1.2rem;
-    font-weight: 400;
+    z-index: 1;
+    padding: 1rem;
   }
 
-  .service2-card div {
-    height: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    font-size: var(--font-size-paragraph2);
-  }
-
-  .service2-card div p {
-    margin-bottom: 0;
-    font-size: 1rem !important;
-  }
-
-  .service-process {
-    background-color: #ff6702;
-    padding: 10px 0;
-    color: white;
-  }
-
-  .service-process-title {
-    text-align: left;
-    width: 90%;
-    margin: 0 auto;
-    font-weight: 400;
-  }
-
-  .service-process-icons {
-    display: flex;
-    justify-content: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    width: 90%;
-  }
-
-  .service-process-icons-box {
-    color: #000;
-    padding: 20px 0;
-    width: 31%;
-    text-align: center;
-  }
-
-  .service-process-icons-box2 {
-    color: #000;
-    padding: 20px 0;
-    width: 31%;
-    text-align: center;
-    display: none;
-  }
-
-  .service-process-icons-box3 {
-    color: #000;
-    padding: 20px 0;
-    width: 31%;
-    text-align: center;
-    display: inline-block;
-  }
-
-  .service-process-icon {
-    margin-top: 8%;
-  }
-
-  .service-menu-wrapper {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    padding: 10px;
-  }
-
-  .service-card-item {
-    display: flex;
-    align-items: center;
-  }
-
-  .service-card-icon-container {
-    width: 60px;
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 10px;
-    margin-bottom: 10px;
-
-  }
-
-  .service-card-icon-container img {
-    width: 40px;
-    height: 40px;
-  }
-
-  .service-card-text {
-    text-align: center;
-    font-weight: bold;
-  }
-
-  .service-card-text-chinese {
-    display: block;
-    font-size: 16px;
-    color: #ff6702;
-  }
-
-  .service-card-text-english {
-    display: block;
-    font-size: 12px;
-    color: #ff6702;
-  }
-
-  .tem-borderleft {
-    border-left: 2px solid #ff6702;
-  }
-
-  .team-member-card {
-    display: flex;
-    background-color: #ff6702;
-    align-items: flex-end;
-    flex-direction: column;
-    width: 90%;
-    height: 600px;
-    margin: 0 auto;
-  }
-
-  .team-card-header {
-    display: none;
-  }
-
-  .team-member-photo {
-    background: #ff6702;
-    padding: 3% 0;
-    width: 90%;
-    margin: 0 auto;
-    border-top: 2px solid #fff;
-    border-right: 2px solid #fff;
-  }
-
-  .team-card-footer {
-    display: none;
-  }
-
-  .team-photo img {
-    width: 200px;
-    height: 200px;
-  }
-
-  .team-member-card {
-    height: auto;
+  .banner-view-leftBox {
+    width: 100%; /* 当宽度小于 800px 时，左边盒子宽度变为100% */
     position: relative;
   }
 
-  .team-member-info {
+  .banner-view-CloudMassage {
     width: 90%;
-    padding: 0;
+  }
+
+  .banner-view-rightBox {
+    width: 90%;
+    z-index: 2;
     margin: 0 auto;
-    border-left: none;
   }
 
-  .team-member-info h2 {
-    font-size: max(1.5rem, min(2.5vw, 3rem));
-    color: #fff;
-    margin: 0;
-    font-weight: bold;
-    text-align: right;
-  }
-
-  .team-member-info .description {
-    color: rgba(255, 255, 255, 0.77);
-  }
-
-  .team-member-photo-right-icon {
-    display: inline-block;
-  }
-
-  .team-member-photo-right-icon img {
-    width: 66px;
-    height: 20px;
-    position: absolute;
-    right: 1rem;
-    top: 0;
-  }
-
-  .service-table-icon img {
-    width: 100px;
-    height: 100px;
-  }
-  .service-table-row-mini{
-    width: 100%;
+  .welcomeMessage-content-buttons {
+    margin: 0 auto;
     display: flex;
-    align-items:stretch;
-    flex-direction: column;
+    justify-content: space-between;
+    gap: 1rem;
+    width: 50%;
+    padding: 0 2%;
   }
-  .service-table-cell.title{
-    font-size: max(1.2rem, min(1.5vw, 3rem));
+
+  .welcomeMessage-view {
     width: 100%;
+    height: 25vh;
+    background-color: #ffffff;
+    color: #000;
     text-align: center;
-    padding: 0;
-  }
-  .service-table-cell {
-    color: #ff6702;
-    width: 100%;
-    font-size: max(0.9rem, min(1vw, 1.2rem));
-    text-align: center;
-    padding: 3px;
-  }
-  .row-mini-lie {
-    width: 100%;
-    display: flex
-  ;
-    align-items: center;
-  }
-  .service-table-cell a{
-    color: #7e7d7d;
-    text-decoration: none;
-    display: flex
-  ;
+    display: flex;
     justify-content: center;
     align-items: center;
-    font-size: max(0.9rem, min(1vw, 1.2rem));
-    margin: 0 auto;
-  }
-  .service-table-cell a svg {
-    width: 20px;
-    height: 20px;
-    margin-bottom: 1px;
-  }
-  .service-table-cell div{
-    margin: 0;
+    position: relative;
   }
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index e9655c4..c7dabe0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,298 +1,1150 @@
 <template>
   <div>
-    <!-- Banner Section -->
-    <div class="banner-view">
-      <div class="banner-view-leftBox">
-        <div class="banner-view-title">Buddy’S</div>
-        <div class="banner-view-CloudTitle">Buddy‘s Cloud</div>
-        <div class="banner-view-CloudMassage">Hey buddy!<br/>
-          Welcome back ,we have prepared a suitable AWS plan for you
+    <NavMenu></NavMenu>
+    <div class="home_heroSection">
+      <div class="homeView_leftBox">
+        <div class="homeView_leftBox_padding_top"></div>
+        <div class="logoContainer">
+          <img src="@/assets/logo2.png" alt="Logo"/>
+        </div>
+        <div class="textContainer">
+          <div class="textContainer_title">Buddy’s Cloud</div>
+          <div class="textContainer_title2">AWS云服务全球代理商</div>
+          <div class="right_to"><a :href="contactLinks.Arrow" target="_blank"><img src="../assets/icon/Arrow.png" alt="buddy.com"></a></div>
+          <div class="font-size-subtitle3">可信任的AWS云上伙伴，量身定制的AWS云解决方案</div>
+          <div class="font-size-paragraph2">Trusted AWS partners on the cloud, Tailor-made AWS cloud solutions</div>
         </div>
-        <!--      <div class="banner-view-buttons">-->
-        <!--        <button>进入首页</button> <button>联系我们</button>-->
-        <!--      </div>-->
       </div>
-      <div class="banner-view-rightBox">
-        <img src="../assets/helloIMG/StartHere.png" alt="buddy.com"/>
+      <div class="homeView_rightBox"></div>
+    </div>
+    <div class="personalized-service">
+      <div class="personalized-service-left">
+        <img src="../assets/back/diannao.jpg" alt="Personalized Service Icon"/>
+      </div>
+      <div class="personalized-service-right">
+        <div class="top-content">
+          <div class="personalized-service-right-h2">个性化服务</div>
+          <h3>Personalized service</h3>
+        </div>
+        <div class="bottom-content">
+          <p>在Buddy's
+            Cloud，我们相信没有一种云解决方案能够适合所有人，这就是为什么我们提供个性化的咨询服务，帮助客户了解他们的需求，并从众多云服务中选择最合适的。</p>
+          <p>At Buddy's Cloud, we believe that no one cloud solution is right for everyone, which is why we offer one
+            personalized consulting services to help customers understand their needs and choose the most suitable one
+            from a wide range of cloud services.</p>
+        </div>
       </div>
     </div>
-
-    <!-- Welcome Message Section -->
-    <div class="welcomeMessage-view">
-      <div class="welcomeMessage-content">
-        <p class="welcomeMessage-content-title">Buddy’s Cloud</p>
-        <p class="welcomeMessage-content-text">More than just your AWS cloud service reseller, but also a reliable
-          partner for your cloud journey</p>
-        <div class="welcomeMessage-content-buttons">
-          <button @click="goToHomePage">进入首页</button>
-          <button @click="goToContactPage">联系我们</button>
+    <div class="service-section">
+      <div class="service-section-mini">
+        <div class="service-card">
+          <img src="../assets/icon/Question.png" alt="Technical advice" class="service-icon"/>
+          <h3>技术咨询 <span>Technical advice</span></h3>
+          <p>免费提供技术咨询，解答您使用AWS服务过程中遇到的任何问题，帮助您的业务增长。</p>
+          <p>Free technical consultation to answer all your questions about using AWS services and help your business
+            grow.</p>
         </div>
 
+        <div class="service-card">
+          <img src="../assets/icon/File.png" alt="Bill payment" class="service-icon"/>
+          <h3>账单代付 <span>Bill payment</span></h3>
+          <p>与我们合作的组织，接受多种货币支付，包括人民币、美元和其它外币。</p>
+          <p>Affiliated with our organization, accepting a wide range of currencies,including RMB, USD, and tokens.</p>
+        </div>
+
+        <div class="service2-card">
+          <h3>服务类型 <span>type of service</span></h3>
+          <div>
+            <p>我们的服务不仅限于技术层面，更包括帮助客户理解云服务，助力他们的业务成长。</p>
+            <p>Our services not only on the technical side, but also on helping customers understand cloud services and
+              help their businesses grow.</p>
+          </div>
+        </div>
+
+        <div class="service-card">
+          <img src="../assets/icon/User.png" alt="Account opening" class="service-icon"/>
+          <h3>账户开通 <span>Account opening</span></h3>
+          <p>免费安全开设AWS账户，账户信息安全无忧，您不需要担心账户安全。</p>
+          <p>No real-name and no card registration,safe and stable, and account secretsTake control of your own and
+            don't need to worry about account security.</p>
+        </div>
+
+        <div class="service-card">
+          <img src="../assets/icon/Checklist.png" alt="Account management" class="service-icon"/>
+          <h3>账户解锁 <span>Unblock your account</span></h3>
+          <p>AWS原生技术支持，稳定的账户注册与续期服务。</p>
+          <p>AWS original technical support, stable account unblocking and renewal.</p>
+        </div>
+
+        <div class="service-card">
+          <img src="../assets/icon/Refresh.png" alt="Channel conversion" class="service-icon"/>
+          <h3>渠道转换 <span>Channel conversion</span></h3>
+          <p>转接代理商，原价续费。</p>
+          <p>Convert the agent and renew the originalprice.</p>
+        </div>
       </div>
-      <div class="footer">
-        <p>
-          <a href="#">隐私</a> |
-          <a href="#">网站条款</a> |
-          <a href="#">Cookie 首选项</a> |
-          &copy; 2022 Raylinx Inc. 或其附属公司. 保留所有权利.
-        </p>
+      <div class="service-menu-wrapper">
+        <div class="service-card-item">
+          <div class="service-card-icon-container">
+            <img src="../assets/icon/Question.png" alt="Technical advice"/>
+          </div>
+          <div class="service-card-text">
+            <span class="service-card-text-chinese">技术咨询</span>
+            <span class="service-card-text-english">Technical advice</span>
+          </div>
+        </div>
+
+        <div class="service-card-item tem-borderleft">
+          <div class="service-card-icon-container">
+            <img src="../assets/icon/File.png" alt="Bill payment"/>
+          </div>
+          <div class="service-card-text">
+            <span class="service-card-text-chinese">账单代付</span>
+            <span class="service-card-text-english">Bill payment</span>
+          </div>
+        </div>
+
+        <div class="service-card-item">
+          <div class="service-card-icon-container">
+            <img src="../assets/icon/User.png" alt="Account opening"/>
+          </div>
+          <div class="service-card-text">
+            <span class="service-card-text-chinese">账户开通</span>
+            <span class="service-card-text-english">Account opening</span>
+          </div>
+        </div>
+
+        <div class="service-card-item tem-borderleft">
+          <div class="service-card-icon-container">
+            <img src="../assets/icon/Checklist.png" alt="Unblock your account"/>
+          </div>
+          <div class="service-card-text">
+            <span class="service-card-text-chinese">账户解封</span>
+            <span class="service-card-text-english">Unblock your account</span>
+          </div>
+        </div>
+
+        <div class="service-card-item">
+          <div class="service-card-icon-container">
+            <img src="../assets/icon/Refresh.png" alt="Channel conversion"/>
+          </div>
+          <div class="service-card-text">
+            <span class="service-card-text-chinese">渠道转换</span>
+            <span class="service-card-text-english">Channel conversion</span>
+          </div>
+        </div>
+      </div>
+      <div class="service-process">
+        <div class="service-process-title">
+          <span class="service-process-main-title">服务流程</span>
+          <span class="service-process-sub-title">Service process</span>
+        </div>
+
+        <div class="service-process-icons">
+          <div class="service-process-icons-box">
+            <div class="service-process-icon">
+              <img src="../assets/icon/Smile.png" alt="Pre-sale" class="icon-image"/>
+            </div>
+            <div class="service-process-icon-title">售前</div>
+            <div class="service-process-icon-p">联系客户经理，免费咨询</div>
+          </div>
+
+          <div class="service-process-icons-box service-process-icons-box2">
+            <div class="service-process-icon">
+              <img src="../assets/icon/Cart.png" alt="In progress" class="icon-image"/>
+            </div>
+            <div class="service-process-icon-title">售中</div>
+            <div class="service-process-icon-p">多种支付方式可选</div>
+          </div>
+          <div class="service-process-icons-box3">
+
+            <div class="service-process-icon-title">售中</div>
+            <div class="service-process-icon-p">多种支付方式可选</div>
+            <div class="service-process-icon">
+              <img src="../assets/icon/Cart.png" alt="In progress" class="icon-image"/>
+            </div>
+          </div>
+          <div class="service-process-icons-box">
+            <div class="service-process-icon">
+              <img src="../assets/icon/24h.png" alt="After sale" class="icon-image"/>
+            </div>
+            <div class="service-process-icon-title">售后</div>
+            <div class="service-process-icon-p">技术支持，24小时运维</div>
+          </div>
+        </div>
       </div>
     </div>
+    <contactUs></contactUs>
+    <div style="background: #ff6702;padding: 5% 0">
+      <div class="team-member-card">
+        <div class="team-member-photo">
+          <div class="team-member-photo-right-icon"><img src="../assets/icon/img_2.png"></div>
+          <div class="team-card-header">
+            <p>Buddy's Cloud</p>
+            <p class="org_bar"></p>
+          </div>
+          <div class="team-card-body">
+            <div class="team-photo">
+              <img src="../assets/back/FRANK-03.png" alt="Frank Wang"/>
+            </div>
+          </div>
+          <div class="team-card-footer">
+            <div class="team-card-footer-name">Frank Wang <span>AWS Service</span></div>
+            <p>知云 懂云 用云 <img src="../assets/icon/img.png" alt=""></p>
+          </div>
+        </div>
+        <div class="team-member-info">
+          <h2>Frank Wang</h2>
+          <p class="description">
+            AWS中国代理，超过十年专业AWS使用经验，解决3000+客户的技术问题，专业素质强，人脉广泛，结识AWS原厂技术员和阿里国际总代理。</p>
+          <p class="description">AWS China general agent, more than 10 years of professional AWS experience, Solve the
+            technical problems of 3000+ customers, strong professional quality and connections. Extensively, get
+            acquainted with AWS original technicians and Ali international distributors.</p>
+        </div>
+      </div>
+
+    </div>
+    <div class="service-table">
+      <div style="width: 80%;margin: 0 auto;border-top: 8px solid #ff6702;">
+        <div class="service-table-row">
+          <div class="service-table-icon"><img src="../assets/icon/Building.png" alt=""></div>
+          <div class="service-table-row-mini">
+            <div class="service-table-cell title">服务类型</div>
+            <div class="row-mini-lie">
+              <div class="service-table-cell">
+                <div>轻量云服务器</div>
+                <div>ec2服务器</div>
+              </div>
+              <div class="service-table-cell">
+                <div>站群服务器</div>
+                <div>高防服务器</div>
+              </div>
+            </div>
+            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
+              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                   xmlns="http://www.w3.org/2000/svg"
+                   p-id="4090" width="200" height="200">
+                <path
+                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
+                  fill="#7e7d7d" p-id="4091"></path>
+              </svg>
+            </a></div>
+          </div>
+
+        </div>
+
+        <div class="service-table-row">
+          <div class="service-table-icon"><img src="../assets/icon/Location.png" alt=""></div>
+          <div class="service-table-row-mini">
+            <div class="service-table-cell title">地址范围</div>
+            <div class="row-mini-lie">
+              <div class="service-table-cell">
+                <div>中国香港</div>
+                <div>新加坡</div>
+              </div>
+              <div class="service-table-cell">
+                <div>美国</div>
+                <div>日本</div>
+              </div>
+            </div>
+            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
+              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                   xmlns="http://www.w3.org/2000/svg"
+                   p-id="4090" width="200" height="200">
+                <path
+                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
+                  fill="#7e7d7d" p-id="4091"></path>
+              </svg>
+            </a></div>
+          </div>
+
+        </div>
+
+        <div class="service-table-row">
+          <div class="service-table-icon"><img src="../assets/icon/Wi-Fi.png" alt=""></div>
+          <div class="service-table-row-mini">
+            <div class="service-table-cell title">带宽范围</div>
+            <div class="row-mini-lie">
+              <div class="service-table-cell">
+                <div>5M</div>
+                <div>10M</div>
+              </div>
+              <div class="service-table-cell">
+                <div>100M</div>
+                <div>1000M</div>
+              </div>
+            </div>
+            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
+              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                   xmlns="http://www.w3.org/2000/svg"
+                   p-id="4090" width="200" height="200">
+                <path
+                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
+                  fill="#7e7d7d" p-id="4091"></path>
+              </svg>
+            </a></div>
+          </div>
+
+        </div>
+
+        <div class="service-table-row">
+          <div class="service-table-icon"><img src="../assets/icon/Grid.png" alt=""></div>
+          <div class="service-table-row-mini">
+            <div class="service-table-cell title">配置大小</div>
+            <div class="row-mini-lie">
+              <div class="service-table-cell">
+                <div>2核0.5G</div>
+                <div>2核1G</div>
+              </div>
+              <div class="service-table-cell">
+                <div>2核2G</div>
+                <div>2核4G</div>
+              </div>
+            </div>
+            <div class="service-table-cell"><a :href="contactLinks.CustomerService" target="_blank">更多咨询客服
+              <svg t="1740226957523" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                   xmlns="http://www.w3.org/2000/svg"
+                   p-id="4090" width="200" height="200">
+                <path
+                  d="M744.848 536L472.96 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.416 0l302.128-301.376a42.56 42.56 0 0 0 0-60.288L533.36 204.48a42.8 42.8 0 0 0-60.416 0 42.56 42.56 0 0 0 0 60.272L744.848 536z m-300.416 0L172.512 807.248a42.56 42.56 0 0 0 0 60.272 42.8 42.8 0 0 0 60.432 0L535.04 566.144a42.56 42.56 0 0 0 0-60.288L232.96 204.48a42.8 42.8 0 0 0-60.432 0 42.56 42.56 0 0 0 0 60.272L444.432 536z"
+                  fill="#7e7d7d" p-id="4091"></path>
+              </svg>
+            </a></div>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+    <FooterMenu></FooterMenu>
   </div>
 </template>
 
 <script>
+import NavMenu from "../components/NavMenu.vue";
+import contactUs from "./contactUs.vue";
+import FooterMenu from "../components/FooterMenu.vue";
 import '../assets/CSS/styles.css';
-
+import { contactLinks } from '../static/js/contact_link.js';
 export default {
-  name: 'IndexPage',
-  methods: {
-    goToHomePage() {
-      this.$router.push(`/home`);
-    },
-    goToContactPage() {
-      this.$router.push(`/contactUs`);
-    }
+  components: {NavMenu, contactUs, FooterMenu},
+  setup() {
+    return {contactLinks}
   }
-//   data() {
-//     return {
-//       showHomeAndroid: false,
-//       screenWidth: null,
-//     }
-//   },
-//   methods: {
-//     bodyScale() {
-//       var devicewidth = document.documentElement.clientWidth; // 获取当前分辨率下的可视区域宽度
-//       if(devicewidth <= 1600) {
-//         var scale = devicewidth / 1600; // 分母——设计稿的尺寸
-//         requestAnimationFrame(() => {
-//           document.body.style.zoom = scale; // 放大缩小相应倍数
-//         });
-//       }
-//     },
-//   },
-//
-//   mounted() {
-//     this.screenWidth = document.body.clientWidth; // 在客户端设置
-//     window.onresize = () => {
-//       setTimeout(() => {
-//         this.screenWidth = document.body.clientWidth;
-//       }, 0);  // 使用0延时将任务放入事件循环的尾部
-//     };
-//   },
-//
-//   watch: {
-//     screenWidth: {
-//       handler: function (val) {
-//         setTimeout(() => { // 使用setTimeout异步处理
-//           if (val >= 800) {
-//             this.bodyScale();
-//             this.showHomeAndroid = false;
-//             // console.log(this.showHomeAndroid);
-//           } else if (val < 800) {
-//             // this.bodyScale();
-//             this.showHomeAndroid = true;
-//             // console.log(this.showHomeAndroid);
-//           }
-//           // this.$forceUpdate();
-//         }, 0);
-//       },
-//       immediate: true,
-//       deep: true,
-//     },
-//   },
 }
 </script>
 
 <style scoped>
-
-
-/* Banner Section */
-.banner-view {
+/*home_heroSection*/
+.home_heroSection {
   width: 100%;
-  height: 70vh;
-  background-color: #ff6702;
-  color: white;
-  padding: 0 5rem;
+  height: 560px;
   display: flex;
-  justify-content: right;
+  justify-content: space-between;
+  border: 1px solid #ff6702;
+}
+
+.homeView_leftBox {
+  background: var(--footer-link-color);
+  width: 50%;
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  z-index: 1;
 }
 
-.banner-view-rightBox {
-  width: var(--dynamic-width-rightBox); /* 使用 root 中的动态宽度 */
-  transition: width 0.5s ease; /* 平滑过渡 */
-  z-index: 2;
+.logoContainer img {
+  width: 160px;
+  height: auto;
 }
 
-.banner-view-rightBox img {
-  width: 100%;
-  height: var(--dynamic-width-rightBox);
-  margin: 0 auto;
+
+
+.textContainer {
+  text-align: center;
+  color: white;
 }
 
-.banner-view-leftBox {
-  width: var(--dynamic-width-leftBox); /* 使用 root 中的动态宽度 */
-  transition: width 0.5s ease; /* 平滑过渡 */
-  position: absolute;
-  left: 5%;
-}
-
-.banner-view-title {
-  font-size: var(--font-size-title); /* 使用 clamp() 调整字体大小 */
+.textContainer_title {
+  font-size: var(--font-size-subtitle2);
   font-weight: bold;
 }
 
-.banner-view-CloudTitle {
-  font-size: var(--font-size-subtitle); /* 动态调整字体大小 */
-  font-weight: 500;
-  margin-left: 10px;
+.textContainer_title2 {
+  font-size: var(--font-size-title2);
+  margin-bottom: 10px;
 }
 
-.banner-view-CloudMassage {
-  font-size: var(--font-size-paragraph); /* 动态调整段落字体 */
-  font-weight: 400;
-  width: 60%;
-  margin-left: 10px;
+.font-size-subtitle3 {
+  font-size: var(--font-size-subtitle3);
 }
 
-.banner-view-buttons {
-  margin-left: 10px;
-  margin-top: 5%;
+.font-size-paragraph2 {
+  margin: 5px 0;
+  font-size: var(--font-size-subtitle3);
+
 }
 
-.banner-view-buttons button {
-  border-radius: 10px;
-  padding: 5px;
-  border: none;
-  color: #ff6702;
-  text-align: center;
-  width: 15%;
-  margin-right: 5%;
-  font-size: var(--button-font-size); /* 使用 clamp() 调整按钮字体 */
+.right_to {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 8% auto;
 }
 
-/* Welcome Message Section */
-.welcomeMessage-view {
+.right_to img {
   width: 100%;
-  height: 30vh;
-  background-color: #ffffff;
-  color: #000;
-  text-align: center;
+  height: 100%;
+}
+
+.homeView_rightBox {
+  width: 50%;
+  height: 100%;
+  background: url("../assets/back/jianzhu.jpg") no-repeat center center;
+  background-size: cover;
+}
+
+/*personalized-service*/
+
+.personalized-service {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  padding: 5rem 0;
+  background-color: #fff;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.personalized-service-left {
+  width: 40%;
+  display: flex;
+  justify-content: right;
+}
+
+.personalized-service-left img {
+  width: 70%; /* 图标的宽度 */
+  height: auto;
+}
+
+.personalized-service-right {
+  width: 50%;
+  padding-left: 5rem;
   position: relative;
 }
 
-.welcomeMessage-content {
-  font-size: var(--font-size-paragraph); /* 动态调整段落字体 */
+.personalized-service-right-h2 {
+  font-size: var(--font-size-title3);
+  color: #ff6702;
+  margin-bottom: 10px;
+  font-weight: bold;
 }
 
-.welcomeMessage-content-title {
-  font-size: var(--font-size-subtitle); /* 动态调整标题字体 */
-  font-weight: 500;
+.personalized-service-right h3 {
+  font-size: 1.2rem;
+  color: #ff6702;
+  margin-bottom: 15px;
+}
+
+.personalized-service-right p {
+  font-size: var(--font-size-paragraph2);
+  line-height: 1.6;
+  color: #333;
+}
+
+.bottom-content {
+  position: absolute;
+  bottom: 0;
+}
+
+/*service-section*/
+.service-section {
+  width: 100%;
+  background-color: #ff6702;
+}
+
+.service-section-mini {
+  width: 80%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px; /* 卡片之间的间距 */
+  justify-content: space-between; /* 将卡片均匀分布 */
+  padding: 5rem 2rem;
+  margin: 0 auto;
+}
+
+.service-card {
+  background-color: #fff;
+  color: #000;
+  padding: 20px;
+  width: 30%; /* 每个卡片占三分之一宽度 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.service2-card {
+  width: 30%; /* 宽度占满整行 */
+  border-left: 4px solid white;
+  color: white;
+  padding-left: 25px;
+}
+
+.service-icon {
+  width: clamp(0.2rem, 5vw, 10rem);
+  height: clamp(0.2rem, 5vw, 10rem);
+  margin-bottom: 15px;
+}
+
+.service-card h3 {
+  font-size: clamp(0.2rem, 1.5vw, 2rem);
+  margin-bottom: 10px;
   color: #ff6702;
 }
 
-.welcomeMessage-content-buttons {
-  margin: 0 auto;
+.service2-card h3 {
+  font-size: clamp(0.2rem, 1.5vw, 2rem);
+  position: relative;
+}
+
+.service2-card div {
+  height: 70%;
   display: flex;
-  justify-content: space-between;
-  width: 40%;
-  gap: 10px;
-  padding: 0 2%;
+  flex-direction: column;
+  justify-content: flex-end;
+  font-size: clamp(0.2rem, 1.5vw, 1rem);
 }
 
-.welcomeMessage-content-buttons button {
+.service-card h3 span {
+  font-size: clamp(0.2rem, 1.4vw, 1.3rem);
+}
+
+.service-card p {
+  font-size: clamp(0.2rem, 1.5vw, 1rem);
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.team-member-photo-right-icon {
+  display: none;
+}
+
+/* Container for the service process */
+.service-process {
   background-color: #ff6702;
-  text-align: center;
-
-  width: 50%;
-  border-radius: 10px;
-  padding: 5px;
-  border: none;
-  font-size: var(--button-font-size); /* 使用 clamp() 调整按钮字体 */
-  color: #fff;
+  padding: 30px;
+  color: white;
 }
 
-/* Footer Section */
-.footer {
-  background-color: var(--footer-bg-color);
-  color: var(--footer-text-color);
+.service-process-title {
   text-align: center;
-  font-size: var(--footer-size-paragraph); /* 动态调整字体大小 */
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  display: flex; /* 添加 flex 布局 */
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
-  height: auto; /* 如果没有固定高度，允许内容根据内容自动调整 */
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 20px;
 }
 
-.footer p {
-  margin: 0;
+.service-process-main-title {
+  font-size: clamp(1.3rem, 2vw, 2rem);
+  margin-bottom: 5px;
+}
+
+.service-process-sub-title {
+  font-size: clamp(1rem, 1.5vw, 1.5rem);
+}
+
+/* Icons section */
+.service-process-icons {
+  display: flex;
+  justify-content: center;
+  gap: 5rem;
+  flex-wrap: wrap;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.service-process-icons-box {
+  color: #000;
+  padding: 20px;
+  width: 15%;
+  text-align: center;
+
+}
+
+.service-process-icons-box3 {
+  color: #000;
+  padding: 20px 0;
+  width: 31%;
+  text-align: center;
+  display: none;
+}
+
+.service-process-icon {
+  background-color: white;
+  border-radius: 100%;
+  width: clamp(3.2rem, 6vw, 6rem);
+  height: clamp(3.2rem, 6vw, 6rem);
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: var(--footer-size-paragraph);
+  margin: 0 auto 15px auto;
 }
 
-.footer a {
-  color: var(--footer-link-color);
+.icon-image {
+  width: 90%;
+  height: 90%;
+}
+
+.service-process-icon-title {
+  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: white;
+}
+
+.service-process-icon-p {
+  font-size: clamp(0.8rem, 1.5vw, 1rem);
+  line-height: 1.5;
+  color: white;
+}
+
+/*team-member-car*/
+.team-member-card {
+  display: flex;
+  background-color: #ff6702;
+
+  align-items: flex-end;
+  width: 80%;
+  height: 600px;
+  margin: 0 auto;
+}
+
+/* Header Styling */
+.team-card-header {
+  background-color: #fff;
+  color: #ff6702;
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+}
+
+.org_bar {
+  width: 70%;
+  border-bottom: 1px solid #ff6702;
+}
+
+/* Body Styling */
+.team-card-body {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.team-photo {
+  background: #ff6702;
+}
+
+.team-photo img {
+  width: 400px;
+  height: 400px;
+}
+
+.team-info h2 {
+  font-size: 24px;
+  margin: 0;
+  color: #333;
+}
+
+.team-info .role {
+  font-size: 16px;
+  color: #ff6702;
+  margin: 5px 0;
+}
+
+.team-info .description {
+  font-size: 14px;
+  color: #777;
+  line-height: 1.5;
+  margin-top: 10px;
+}
+
+/* Footer Styling */
+.team-card-footer {
+  background-color: white;
+  padding: 10px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.team-card-footer p {
+  color: #ff6702;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  font-weight: 400;
+}
+
+.team-card-footer-name {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #333;
+  font-size: clamp(0.2rem, 1.5vw, 3rem);
+  position: relative;
+}
+
+.team-card-footer-name span {
+  font-size: 15px;
+  color: #ff6702;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.team-card-footer p img {
+  width: 73px;
+  height: 24px;
+}
+
+.team-member-photo {
+  background: #ffffff;
+  padding: 20px;
+}
+
+.team-member-info {
+  width: 50%;
+  padding: 0 1%;
+  margin-left: 4%;
+  border-left: 4px solid #fff;
+}
+
+.team-member-info h2 {
+  font-size: clamp(1.2rem, 2.5vw, 3rem);
+  color: #fff;
+  margin: 0 0 5% 0;
+  font-weight: bold;
+}
+
+.team-member-info .role {
+  font-size: 1.2rem;
+  color: #fff;
+  margin-top: 5px;
+}
+
+.team-member-info .description {
+  font-size: clamp(0.8rem, 1.5vw, 1.5rem);
+  color: #fff;
+  margin-top: 10px;
+}
+
+.service-table {
+  padding: 5% 0;
+}
+
+.service-table-row {
+  display: flex;
+  padding: 10px 5%;
+  border-bottom: 8px solid #ff6702;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.service-table-row:hover {
+  background-color: rgba(255, 103, 2, 0.2);
+}
+
+.service-table-icon {
+  width: 30%;
+}
+
+.service-table-icon img {
+  width: 150px;
+  height: 150px;
+}
+
+.service-table-cell {
+  text-align: left;
+  padding: 10px;
+  color: #ff6702;
+  width: 30%;
+  font-size: clamp(0.2rem, 1vw, 1.2rem);
+}
+
+.service-table-cell div {
+  margin-top: 10px;
+}
+
+.service-table-cell.title {
+  font-weight: bold;
+  color: #ff6702;
+  font-size: clamp(0.2rem, 1.5vw, 3rem);
+
+}
+
+.service-table-cell a {
+  color: #7e7d7d;
   text-decoration: none;
-  margin: 0 0.5rem;
-  font-size: var(--footer-size-paragraph);
+  display: flex;
+  align-items: center;
+  font-size: clamp(0.2rem, 1vw, 1.2rem);
 }
 
-.footer a:hover {
+.service-table-cell a svg {
+  width: 25px;
+  height: 25px;
+}
+
+.service-table-cell a:hover {
   text-decoration: underline;
 }
 
-/* 当页面宽度小于 800px 时，动态调整宽度 */
+.service-menu-wrapper {
+  display: none;
+}
+
+.service-table-row-mini {
+  width: 70%;
+  display: flex;
+  align-items: center;
+}
+
+.row-mini-lie {
+  width: 80%;
+  display: flex;
+  align-items: center;
+}
+
 @media (max-width: 800px) {
-  .banner-view {
-    display: block;
-    z-index: 1;
-    padding: 1rem;
-  }
-
-  .banner-view-leftBox {
-    width: 100%; /* 当宽度小于 800px 时，左边盒子宽度变为100% */
-    position: relative;
-  }
-
-  .banner-view-CloudMassage {
-    width: 90%;
-  }
-
-  .banner-view-rightBox {
-    width: 90%;
-    z-index: 2;
-    margin: 0 auto;
-  }
-
-  .welcomeMessage-content-buttons {
-    margin: 0 auto;
+  .home_heroSection {
     display: flex;
-    justify-content: space-between;
-    gap: 1rem;
-    width: 50%;
-    padding: 0 2%;
+    flex-direction: column;
   }
 
-  .welcomeMessage-view {
+  .homeView_leftBox {
     width: 100%;
-    height: 25vh;
+    padding: 20px 0 0 0;
+  }
+
+  .homeView_rightBox {
+    width: 100%;
+    height: 100%;
+  }
+
+  .logoContainer img {
+    width: 120px;
+    height: auto;
+  }
+
+  .right_to {
+    width: 40px;
+    height: 40px;
+    margin: 0 auto 0 auto;
+  }
+
+  .personalized-service {
+    margin-bottom: 0;
+    padding: 40px 0;
+  }
+
+  .personalized-service-left {
+    width: 40%;
+    display: none;
+  }
+
+  .personalized-service-right {
+    width: 90%;
+    padding-left: 5%;
+    position: static;
+    margin: 0 auto;
+    border-left: 4px solid #ff6702;
+  }
+
+  .bottom-content {
+    position: static;
+  }
+  .bottom-content p{
+    position: static;
+    font-size: 1rem !important;
+  }
+  .personalized-service-right-h2 {
+    color: #ff6702;
+    margin-bottom: 1%;
+    font-weight: bold;
+  }
+
+  .personalized-service-right p {
+    color: #333;
+    line-height: 1.2;
+    margin-bottom: 0;
+  }
+
+  .personalized-service-right h3 {
+    margin-bottom: 1%;
+  }
+
+  .service-section {
     background-color: #ffffff;
+  }
+
+  .service-section-mini {
+    width: 90%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    justify-content: space-between;
+    padding: 0;
+    margin: 0 auto 30px auto;
+  }
+
+  .service-card {
+    display: none;
+  }
+
+  .service2-card {
+    width: 90%;
+    border-left: 4px solid #ff6702;
+    color: #000000;
+    padding-left: 25px;
+  }
+
+  .service2-card h3 {
+    font-size: var(--font-size-title3);
+    position: static;
+    color: #ff6702;
+    font-weight: bold;
+  }
+
+  .service2-card h3 span {
+    display: block;
+    font-size: 1.2rem;
+    font-weight: 400;
+  }
+
+  .service2-card div {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    font-size: var(--font-size-paragraph2);
+  }
+
+  .service2-card div p {
+    margin-bottom: 0;
+    font-size: 1rem !important;
+  }
+
+  .service-process {
+    background-color: #ff6702;
+    padding: 10px 0;
+    color: white;
+  }
+
+  .service-process-title {
+    text-align: left;
+    width: 90%;
+    margin: 0 auto;
+    font-weight: 400;
+  }
+
+  .service-process-icons {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    width: 90%;
+  }
+
+  .service-process-icons-box {
     color: #000;
+    padding: 20px 0;
+    width: 31%;
     text-align: center;
+  }
+
+  .service-process-icons-box2 {
+    color: #000;
+    padding: 20px 0;
+    width: 31%;
+    text-align: center;
+    display: none;
+  }
+
+  .service-process-icons-box3 {
+    color: #000;
+    padding: 20px 0;
+    width: 31%;
+    text-align: center;
+    display: inline-block;
+  }
+
+  .service-process-icon {
+    margin-top: 8%;
+  }
+
+  .service-menu-wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    padding: 10px;
+  }
+
+  .service-card-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .service-card-icon-container {
+    width: 60px;
+    height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
+    border-radius: 10px;
+    margin-bottom: 10px;
+
+  }
+
+  .service-card-icon-container img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .service-card-text {
+    text-align: center;
+    font-weight: bold;
+  }
+
+  .service-card-text-chinese {
+    display: block;
+    font-size: 16px;
+    color: #ff6702;
+  }
+
+  .service-card-text-english {
+    display: block;
+    font-size: 12px;
+    color: #ff6702;
+  }
+
+  .tem-borderleft {
+    border-left: 2px solid #ff6702;
+  }
+
+  .team-member-card {
+    display: flex;
+    background-color: #ff6702;
+    align-items: flex-end;
+    flex-direction: column;
+    width: 90%;
+    height: 600px;
+    margin: 0 auto;
+  }
+
+  .team-card-header {
+    display: none;
+  }
+
+  .team-member-photo {
+    background: #ff6702;
+    padding: 3% 0;
+    width: 90%;
+    margin: 0 auto;
+    border-top: 2px solid #fff;
+    border-right: 2px solid #fff;
+  }
+
+  .team-card-footer {
+    display: none;
+  }
+
+  .team-photo img {
+    width: 200px;
+    height: 200px;
+  }
+
+  .team-member-card {
+    height: auto;
     position: relative;
   }
+
+  .team-member-info {
+    width: 90%;
+    padding: 0;
+    margin: 0 auto;
+    border-left: none;
+  }
+
+  .team-member-info h2 {
+    font-size: max(1.5rem, min(2.5vw, 3rem));
+    color: #fff;
+    margin: 0;
+    font-weight: bold;
+    text-align: right;
+  }
+
+  .team-member-info .description {
+    color: rgba(255, 255, 255, 0.77);
+  }
+
+  .team-member-photo-right-icon {
+    display: inline-block;
+  }
+
+  .team-member-photo-right-icon img {
+    width: 66px;
+    height: 20px;
+    position: absolute;
+    right: 1rem;
+    top: 0;
+  }
+
+  .service-table-icon img {
+    width: 100px;
+    height: 100px;
+  }
+  .service-table-row-mini{
+    width: 100%;
+    display: flex;
+    align-items:stretch;
+    flex-direction: column;
+  }
+  .service-table-cell.title{
+    font-size: max(1.2rem, min(1.5vw, 3rem));
+    width: 100%;
+    text-align: center;
+    padding: 0;
+  }
+  .service-table-cell {
+    color: #ff6702;
+    width: 100%;
+    font-size: max(0.9rem, min(1vw, 1.2rem));
+    text-align: center;
+    padding: 3px;
+  }
+  .row-mini-lie {
+    width: 100%;
+    display: flex
+  ;
+    align-items: center;
+  }
+  .service-table-cell a{
+    color: #7e7d7d;
+    text-decoration: none;
+    display: flex
+  ;
+    justify-content: center;
+    align-items: center;
+    font-size: max(0.9rem, min(1vw, 1.2rem));
+    margin: 0 auto;
+  }
+  .service-table-cell a svg {
+    width: 20px;
+    height: 20px;
+    margin-bottom: 1px;
+  }
+  .service-table-cell div{
+    margin: 0;
+  }
 }
 </style>