添加样式

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon1.ico">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4449695_co788s8n47l.css" rel="external nofollow" >
   </head>

src/components/Sales.vue

@@ -87,20 +87,19 @@
     position: relative;
     z-index: 1;
 }
-
-  
-  .left-content { 
+.sales-team{
+  margin: 100px 0;
+    .left-content { 
     text-align: center;    
     p{  
-        font-size: 20px;
+        font-size: 22px;
         color: #1a5271;
     }
   }
   h2{
     color: #1a5271;
-    font-size: 44px;
+    font-size: 50px;
   }
-  
   .right-content { 
     display: flex;
     align-items: center;
@@ -111,8 +110,7 @@
       font-size: 14px;
     }
   }
-
-  .member-info {
+    .member-info {
     margin-top: 10px;
     h3{
       font-size: 14px;
@@ -123,13 +121,22 @@
       text-align: left;
     }
   }
-  .avatar-container {
+.avatar-container {
   width: 7vw; 
   height: 7vw;
 }
 .team-member{
   width: 280px;
 }
+}
+  
+
+
+  
+
+
+
+
 
 /* 小屏幕 */
 /* @media (max-width: 767px) {

src/components/footerMenu.vue

@@ -16,7 +16,7 @@
                     </div>
                     <div>
                         <h4>NAVIGATION</h4>
-                        <nav>
+                        <nav @click="goToTop">
                             <router-link to="/Payments">Payments</router-link><br>
                             <router-link to="/AboutUs">About Us</router-link><br>
                             <router-link to="/FAQ">FAQ</router-link><br>
@@ -25,7 +25,7 @@
                     </div>
                     <div>
                         <h4>LEGAL</h4>
-                        <nav>
+                        <nav @click="goToTop">
                             <router-link to="/termsUse">TrustyPay Terms of Use</router-link><br>
                             <router-link to="/privacy">TrustyPay Privacy Policy</router-link><br>
                             <router-link to="/Copyright">Copyright information</router-link><br>
@@ -48,7 +48,7 @@
                                  <p>Contact support team: <a href="">support@trustypay.com.au</a> </p> 
                                </div>
                                                          
-                                <p>Address: Level 1, 480 Collin st Melbourne 3000 VIC AUSTRALIA </p>                               
+                                <p>Address: Level 1, 480 Collins St Melbourne 3000 VIC AUSTRALIA </p>                               
                             </div>
                         </div>
                     

src/components/headTop.vue

@@ -93,8 +93,9 @@ export default {
       text-decoration: none;
       margin: 0px 40px;
       font-size: 16px;
-      color: #000;
+      color: #000;    
     }
+  
   }
   .btnInfo {
     width: 121px;

src/components/indexOffer.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="offerCard">
+        <!-- <div class="yellowCard">
+          <h1>Our Offer</h1>
+        </div> -->
+        <div class="greenCard">
+            <div class="cardList">
+                <div class="cardTitle">
+                    <h1>0.9%</h1>
+                </div>
+                <div class="cardText">
+                    <div>
+                        <p>VISA/MASTERCARD & EFTPOS</p>
+                    </div>
+                    <div>
+                        <p>Transaction Fee</p>
+                    </div>
+                    <div><span>(inc. GST)</span></div>
+
+                </div>
+                <div class="cardImg">
+                    <div><img src="../assets/payments/visa.png" alt=""></div>
+                    <div class="master-card"><img src="../assets/payments/mastercard.png" alt=""></div>
+                    <div><img src="../assets/payments/eftops.png" alt=""></div>
+                </div>
+            </div>
+
+            <div class="cardList1">
+                <div class="cardTitle1">
+                    <h1>2.2%</h1>
+                </div>
+                <div class="cardText1">
+                    <div>
+                        <p>UPI and alternate Payments</p>
+                    </div>
+                    <div><span>(inc. GST)</span></div>
+
+                </div>
+                <div class="cardImg1">
+                    <div class="unionPay"><img src="../assets/payments/unionPay.png" alt=""></div>
+                    <div class="Alipay"><img src="../assets/payments/Alipay.png" alt=""></div>
+                    <div class="Alipay"><img src="../assets/payments/weChat.png" alt=""></div>
+                </div>
+            </div>
+            <div class="cardList2">
+                <div class="cardTitle2">
+                    <h1>$29.95</h1>
+                </div>
+                <div class="cardText2">
+                    <div>
+                        <p>Terminal rental (Per month/terminal)</p>
+                    </div>
+                    <div><span>(inc. GST)</span></div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+</script>
+
+<style lang="less" scoped>
+ .offerCard {
+                width: 530px;
+                height: auto;
+                position: relative;
+
+                .yellowCard {
+                    position: absolute;
+                    width: 160px;
+                    height: 66px;
+                    background: #fcf558;
+                    border-radius: 100%;
+                    right: -20px;
+                    top: -24px;
+                    z-index: 1;
+                    h1 {
+                        font-size: 24px;
+                        text-align: center;
+                        color: #005198;
+                        margin: 0;
+                        line-height: 66px;
+                    }
+                }
+
+                .greenCard {
+                    position: absolute;
+                    top:30px;
+                    .cardList {
+                        width: 530px;
+                        height: 95px;
+                        background: #a7de50;
+                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+                        border-radius: 12px;
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                        .cardTitle{                          
+                            margin-left: 14px;
+                            h1{
+                                margin: 0;
+                                color: #fff;
+                            }
+                        }
+                        .cardText{
+                            margin-left: 38px;
+                            p{
+                                color: #fff;
+                                margin: 0;
+                            }
+                            span{
+                                color: #fff;
+                                font-size: 12px;
+                            }
+                        }
+                       .cardImg{
+                        display: flex;
+                        align-items: center;
+                        margin-top: 40px;
+                        gap: 8px;
+                        .master-card{img{width: 30px; height: auto;}}
+                        img{
+                            width: 38px;
+                            height: auto;
+                        }
+                       }
+                    }
+                    .cardList1 {
+                        width: 530px;
+                        height: 95px;
+                        background: #a7de50;
+                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+                        border-radius: 12px;
+                        display: flex;
+                        align-items: center;                     
+                        margin-top: 15px;
+                        gap: 10px;
+                        .cardTitle1{                          
+                            margin-left: 15px;
+                           
+                            h1{
+                                margin: 0;
+                                color: #fff;
+                            }
+                        }
+                        .cardText1{
+                            margin-left: 40px;
+                            p{
+                                color: #fff;
+                                margin: 0;
+                            }
+                            span{
+                                color: #fff;
+                                font-size: 12px;
+                            }
+                        }
+                       .cardImg1{
+                        display: flex;   
+                        align-items: center;  
+                        justify-content: center;                   
+                        margin-top: 40px;
+                        gap: 8px;
+                     
+                    .unionPay  {
+                        img{
+                            width: 26px;
+                            height: auto;
+                        }
+                    }
+                    .Alipay{
+                        img{
+                            width: 48px;
+                            height: auto;
+                        }
+                    }
+                       }
+                    }
+                    .cardList2 {
+                        width: 530px;
+                        height: 95px;
+                        background: #a7de50;
+                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+                        border-radius: 12px;
+                        display: flex;
+                        align-items: center;
+                        margin-top: 15px;
+                        gap: 10px;
+                        .cardTitle2{                          
+                            margin-left: 12px;
+                            h1{
+                                margin: 0;
+                                color: #fff;
+                            }
+                        }
+                        .cardText2{
+                            margin-left: 10px;
+                            p{
+                                color: #fff;
+                                margin: 0;
+                            }
+                            span{
+                                color: #fff;
+                                font-size: 12px;
+                            }
+                        }
+
+                    }
+                }
+            }  
+ @media (max-width: 767px) {
+    
+   
+}
+
+
+</style>

src/views/Faq.vue

@@ -10,8 +10,8 @@
 
                 <div class="collapseInfo">
                 <el-collapse v-model="activeNames" @change="handleChange">
-                    <el-collapse-item title="What is Trustypay? " name="1">
-                                <div>Trustypay, a leading payment solutions company, has strategically partnered with
+                    <el-collapse-item title="What is TrustyPay? " name="1">
+                                <div>TrustyPay, a leading payment solutions company, has strategically partnered with
                                     major payment service providers in Australia. Our mission is to deliver secure and
                                     efficient payment processing services to our valued clients.</div>
                             </el-collapse-item>
@@ -25,8 +25,8 @@
                                     TrustyPay can help streamline your payment processes and support your growth.</div>
                             </el-collapse-item>
 
-           <el-collapse-item title="What payment methods does Trustypay support? " name="3">
-                                <div>Trustypay supports a wide range of payment methods, including credit cards, debit
+           <el-collapse-item title="What payment methods does TrustyPay support? " name="3">
+                                <div>TrustyPay supports a wide range of payment methods, including credit cards, debit
                                     cards, digital wallets, and direct bank transfers. Our goal is to offer flexibility
                                     and convenience for both businesses and their customers.</div>
                             </el-collapse-item>
@@ -102,7 +102,7 @@ methods: {
     h2{
         text-align: center;
         color: #1a5271;
-        font-size: 42px;
+        font-size: 48px;
     }
 }
 

src/views/Payments.vue

@@ -55,7 +55,12 @@
                                 <div class="list-text">
                                     <div class="left-list">
                                         <ul>
-                                            <li>Worldline Global <br>Online Pay</li>
+                                            <li>Worldline Global Online Pay</li>
+                                            
+                                        </ul>
+                                    </div>
+                                    <div class="middle-list">
+                                        <ul>
                                             <li>ANZ eGate</li>
                                         </ul>
                                     </div>
@@ -129,7 +134,7 @@
                                             <div class="right-more">
                                                 <ul>
                                                     <li>Analytics</li>
-                                                    <li> Electronic <br>
+                                                    <li> Electronic 
                                                         statements</li>
                                                 </ul>
                                             </div>
@@ -227,17 +232,17 @@
                     </div>
                     <div class="integrate-logo">
                         <div class="logo-row1">
-                            <div><img src="../assets/payments/shopify.png" alt=""></div>
-                            <div><img src="../assets/payments/woo.png" alt=""></div>
-                            <div><img src="../assets/payments/BigCommerce.png" alt=""></div>
-                            <div><img src="../assets/payments/sales.png" alt=""></div>
-                            <div><img src="../assets/payments/sap.png" alt=""></div>
+                            <div class="shopify"><img src="../assets/payments/shopify.png" alt=""></div>
+                            <div class="woo"><img src="../assets/payments/woo.png" alt=""></div>
+                            <div class="big-commerce"><img src="../assets/payments/BigCommerce.png" alt=""></div>
+                            <div class="sales"><img src="../assets/payments/sales.png" alt=""></div>
+                            <div class="sap"><img src="../assets/payments/sap.png" alt=""></div>
                         </div>
                         <div class="logo-row2">
-                            <div><img src="../assets/payments/mageto.png" alt=""></div>
-                            <div><img src="../assets/payments/prestashop.png" alt=""></div>
-                            <div><img src="../assets/payments/pwa.png" alt=""></div>
-                            <div><img src="../assets/payments/shopware.png" alt=""></div>
+                            <div class="magento"><img src="../assets/payments/mageto.png" alt=""></div>
+                            <div class="prestashop"><img src="../assets/payments/prestashop.png" alt=""></div>
+                            <div class="pwa"><img src="../assets/payments/pwa.png" alt=""></div>
+                            <div class="shop-ware"><img src="../assets/payments/shopware.png" alt=""></div>
                             
                         </div>
                     </div>
@@ -249,20 +254,19 @@
                     </div>
                     <div class="accept-logo">
                         <div class="accept-row1">
-                            <div><img src="../assets/payments/visa.png" alt=""></div>
-                            <div><img src="../assets/payments/mastercard.png" alt=""></div>
-                            <div><img src="../assets/payments/eftops.png" alt=""></div>
-                            <div><img src="../assets/payments/american.png" alt=""></div>
-                            <div><img src="../assets/payments/jcb.png" alt=""></div>
-                            <div><img src="../assets/payments/unionPay.png" alt=""></div>
+                            <div class="visa"><img src="../assets/payments/visa.png" alt=""></div>
+                            <div class="master-card"><img src="../assets/payments/mastercard.png" alt=""></div>
+                            <div class="eft-pos"><img src="../assets/payments/eftops.png" alt=""></div>
+                            <div class="american"><img src="../assets/payments/american.png" alt=""></div>
+                            <div class="jcb"><img src="../assets/payments/jcb.png" alt=""></div>
+                            <div class="union-pay"><img src="../assets/payments/unionPay.png" alt=""></div>
                         </div>
                         <div class="accept-row2">
-                            <div><img src="../assets/payments/Gpay.png" alt=""></div>
-                            <div><img src="../assets/payments/pay.png" alt=""></div>
-                            <div><img src="../assets/payments/Diners.png" alt=""></div>
-                            <div><img src="../assets/payments/Alipay.png" alt=""></div>
-                            <div><img src="../assets/payments/weChat.png" alt=""></div>
-                            
+                            <div class="G-pay"><img src="../assets/payments/Gpay.png" alt=""></div>
+                            <div class="pay"><img src="../assets/payments/pay.png" alt=""></div>
+                            <div class="club"><img src="../assets/payments/Diners.png" alt=""></div>
+                            <div class="alipay"><img src="../assets/payments/Alipay.png" alt=""></div>
+                            <div class="we-chat"><img src="../assets/payments/weChat.png" alt=""></div>                            
                         </div>
                     </div>
                 </div>
@@ -388,7 +392,8 @@ export default {
 
             .list-text {
                 display: flex;
-                gap: 30px;
+                align-content: center;
+                padding: 20px 0;
             }
 
             .online-list2 {
@@ -440,6 +445,7 @@ export default {
 
             .more-item {
                 display: flex;
+                align-items: center;
                 padding: 10px 30px;
 
                 img {
@@ -448,7 +454,7 @@ export default {
                 }
 
                 .more-info {
-                    padding: 10px 0px 10px 40px;
+                    padding: 0 0 10px 40px;
 
                     h3 {
                         margin: 0;
@@ -462,13 +468,13 @@ export default {
 
                 ul {
                     margin: 0;
-                //   margin-left: 20px;
+                  margin-left: 20px;
                 }
             }
            
         }
          .right-dynamic{
-                margin-left: 160px;
+                margin-left: 90px;
             }
         }   
 
@@ -493,11 +499,23 @@ export default {
         .logo-row1{
             display: flex;
             align-items: center;
-            padding:20px 60px;
+            justify-content: center;
+            padding:20px 0;
             gap: 120px;
-            img{
-                width: 120px;
-                height: auto;
+            .shopify{
+                img{width: 120px; height: auto;}
+            }
+            .woo{
+                img{width: 70px; height: auto;}
+            }
+            .big-commerce{
+                img{width: 140px; height: auto;}
+            }
+            .sales{
+                img{width: 70px; height: auto;}
+            }
+            .sap{
+                img{width: 80px; height: auto;}
             }
         }
         .logo-row2{
@@ -506,9 +524,17 @@ export default {
             justify-content: center;
             padding: 20px 100px;
             gap: 100px;
-            img{
-                width: 120px;
-                height: auto;
+            .magento{
+                img{width: 130px; height: auto}
+            }
+            .prestashop{
+                img{width: 140px; height: auto}
+            }
+            .pwa{
+                img{width: 86px; height: auto}
+            }
+            .shop-ware{
+                img{width: 130px; height: auto}
             }
         }
     }
@@ -532,22 +558,27 @@ export default {
         .accept-row1{
             display: flex;
             align-items: center;
-            padding:20px 40px;
-            gap: 80px;
-            img{
-                width: 120px;
-                height: auto;
-            }
+            justify-content: center;
+            padding:20px 0;
+            gap: 90px;
+           .visa{img{width: 100px; height: auto;}}
+           .master-card{img{width: 80px; height: auto;}}
+           .eft-pos{img{width: 120px; height: auto;}}
+           .american{img{width: 64px; height: auto;}}
+           .jcb{img{width: 78px; height: auto;}}
+           .union-pay{img{width: 80px; height: auto;}}
         }
         .accept-row2{
             display: flex;
             align-items: center;
-            padding: 20px 40px;
-            gap: 110px;
-            img{
-                width: 130px;
-                height: auto;
-            }
+            justify-content: center;
+            padding: 20px 0;
+            gap: 90px;
+          .G-pay{img{width: 80px; height: auto;}}
+          .pay{img{width: 78px; height: auto;}}
+          .club{img{width: 120px; height: auto;}}
+          .alipay{img{width: 100px; height: auto;}}
+          .we-chat{img{width: 110px; height: auto;}}
         }
     }
 }

src/views/index.vue

@@ -13,11 +13,14 @@
                         <div class="bannerInfo">
                             <div class="leftHead">
                                 <h1>Smart Solutions,<br> Seamless Transactions</h1>
-                                <p>Unlock the Future of Payments Today with
-                                    TrustyPay</p>
+                                <p>Unlock the Future of Payments Today with TrustyPay</p>
+
+                                <div class="client-group">
+                                    <img src="../assets/index/Group98.png" alt="">
+                                </div>
                             </div>
                             <div class="leftContent">
-                                <p>Trusty Pay is your Ultimate Payment Partner. Pioneering Tomorrow's Payment Landscape
+                                <p>TrustyPay is your Ultimate Payment Partner. Pioneering Tomorrow's Payment Landscape
                                     in Australia. As a locally registered entity, we specialise in cutting-edge payment
                                     technology and solutions for businesses in Retail, Hospitality, and Professional
                                     Services. Our commitment extends beyond transactions; we're your strategic partner
@@ -26,55 +29,8 @@
                             <div class="saleBtn">
                                 <router-link to="/ContactUs"><el-button>Contact Sales</el-button></router-link>
                             </div>
-                            <div class="offerCard">
-                                <div class="yellowCard">
-                                    <h1>Our Offer</h1>
-                                </div>
-                                <div class="greenCard">
-                                    <div class="cardList">
-                                        <div class="cardTitle">
-                                           <h1>0.81%</h1> 
-                                        </div>
-                                        <div class="cardText">
-                                        <div><p>VISA/MASTERCARD & EFTPOS</p></div>
-                                        <div><p>Transaction Fee</p></div>
-                                        <div><span>(exc.GST)</span></div>
-                                        
-                                        </div>
-                                        <div class="cardImg">
-                                            <div><img src="../assets/payments/visa.png" alt=""></div>
-                                            <div><img src="../assets/payments/mastercard.png" alt=""></div>
-                                            <div><img src="../assets/payments/eftops.png" alt=""></div>
-                                        </div>                                      
-                                    </div>
-
-                                    <div class="cardList1">
-                                        <div class="cardTitle1">
-                                           <h1>2.0%</h1> 
-                                        </div>
-                                        <div class="cardText1">
-                                        <div><p>UPI and alternate Payments</p></div>
-                                        <div><span>(exc.GST)</span></div>
-                                        
-                                        </div>
-                                        <div class="cardImg1">
-                                            <div class="unionPay"><img src="../assets/payments/unionPay.png" alt=""></div>
-                                            <div class="Alipay"><img src="../assets/payments/Alipay.png" alt=""></div>
-                                            <div class="Alipay"><img src="../assets/payments/weChat.png" alt=""></div>
-                                        </div>                                      
-                                    </div>
-                                    <div class="cardList2">
-                                        <div class="cardTitle2">
-                                           <h1>$27.23</h1> 
-                                        </div>
-                                        <div class="cardText2">
-                                        <div><p>Terminal rental (Per month/terminal)</p></div>
-                                        <div><span>(exc.GST)</span></div>                                        
-                                        </div>                                      
-                                    </div>
-                                </div>
-
-                            </div>                           
+                            <!-- offer -->
+                              <indexOffer/>
                         </div>
                         <div class="rightText">
                             <img src="../assets/index/Group98.png" alt="">
@@ -91,20 +47,19 @@
                     </div>
                     <div class="accept-logo">
                         <div class="accept-row1">
-                            <div><img src="../assets/payments/visa.png" alt=""></div>
-                            <div><img src="../assets/payments/mastercard.png" alt=""></div>
-                            <div><img src="../assets/payments/eftops.png" alt=""></div>
-                            <div><img src="../assets/payments/american.png" alt=""></div>
-                            <div><img src="../assets/payments/jcb.png" alt=""></div>
-                            <div><img src="../assets/payments/unionPay.png" alt=""></div>
+                            <div class="visa"><img src="../assets/payments/visa.png" alt=""></div>
+                            <div class="master-card"><img src="../assets/payments/mastercard.png" alt=""></div>
+                            <div class="eft-pos"><img src="../assets/payments/eftops.png" alt=""></div>
+                            <div class="american"><img src="../assets/payments/american.png" alt=""></div>
+                            <div class="jcb"><img src="../assets/payments/jcb.png" alt=""></div>
+                            <div class="union-pay"><img src="../assets/payments/unionPay.png" alt=""></div>
                         </div>
                         <div class="accept-row2">
-                            <div><img src="../assets/payments/Gpay.png" alt=""></div>
-                            <div><img src="../assets/payments/pay.png" alt=""></div>
-                            <div><img src="../assets/payments/Diners.png" alt=""></div>
-                            <div><img src="../assets/payments/Alipay.png" alt=""></div>
-                            <div><img src="../assets/payments/weChat.png" alt=""></div>
-
+                            <div class="G-pay"><img src="../assets/payments/Gpay.png" alt=""></div>
+                            <div class="pay"><img src="../assets/payments/pay.png" alt=""></div>
+                            <div class="club"><img src="../assets/payments/Diners.png" alt=""></div>
+                            <div class="alipay"><img src="../assets/payments/Alipay.png" alt=""></div>
+                            <div class="we-chat"><img src="../assets/payments/weChat.png" alt=""></div>                            
                         </div>
                     </div>
                 </div>
@@ -208,7 +163,7 @@
                             </div>
                             <div class="bg-b">
                                 <svg-icon icon-class="conversion" class="icon" />
-                                Dynamic Currancy Conversion
+                                Dynamic Currency Conversion
                             </div>
                         </div>
 
@@ -271,17 +226,17 @@
                     </div>
                     <div class="plugImg">
                         <div class="plugList1">
-                            <div><img src="@/assets/index/sap.png" alt=""></div>
-                            <div><img src="@/assets/index/shopify.png" alt=""></div>
-                            <div><img src="@/assets/index/sale.png" alt=""></div>
-                            <div><img src="@/assets/index/magento.png" alt=""></div>
-                            <div><img src="@/assets/index/BigCommerce.png" alt=""></div>
+                            <div class="sap"><img src="@/assets/index/sap.png" alt=""></div>
+                            <div class="shopify"><img src="@/assets/index/shopify.png" alt=""></div>
+                            <div class="sale"><img src="@/assets/index/sale.png" alt=""></div>
+                            <div class="magento"><img src="@/assets/index/magento.png" alt=""></div>
+                            <div class="big-commerce"><img src="@/assets/index/BigCommerce.png" alt=""></div>
                         </div>
                         <div class="plugList2">
-                            <div><img src="@/assets/payments/woo.png" alt=""></div>
-                            <div><img src="@/assets/payments/prestashop.png" alt=""></div>
-                            <div><img src="@/assets/payments/pwa.png" alt=""></div>
-                            <div><img src="@/assets/payments/shopware.png" alt=""></div>
+                            <div class="woo"><img src="@/assets/payments/woo.png" alt=""></div>
+                            <div class="presta-shop"><img src="@/assets/payments/prestashop.png" alt=""></div>
+                            <div class="pwa"><img src="@/assets/payments/pwa.png" alt=""></div>
+                            <div class="shop-ware"><img src="@/assets/payments/shopware.png" alt=""></div>
                         </div>
                     </div>
                 </div>
@@ -321,7 +276,7 @@
                         <div class="plugItem">
                             <div class="form1"><svg-icon icon-class="circle" class="icon" />Pre-configured logic
                                 forAutomatic/Delayed Capture</div>
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Dynamic Currancy Conversion
+                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Dynamic Currency Conversion
                             </div>
                         </div>
                     </div>
@@ -352,8 +307,8 @@
                     </div>
                     <div class="collapseInfo">
                         <el-collapse v-model="activeNames" @change="handleChange">
-                            <el-collapse-item title="What is Trustypay? " name="1">
-                                <div>Trustypay, a leading payment solutions company, has strategically partnered with
+                            <el-collapse-item title="What is TrustyPay? " name="1">
+                                <div>TrustyPay, a leading payment solutions company, has strategically partnered with
                                     major payment service providers in Australia. Our mission is to deliver secure and
                                     efficient payment processing services to our valued clients.</div>
                             </el-collapse-item>
@@ -367,8 +322,8 @@
                                     TrustyPay can help streamline your payment processes and support your growth.</div>
                             </el-collapse-item>
 
-                            <el-collapse-item title="What payment methods does Trustypay support? " name="3">
-                                <div>Trustypay supports a wide range of payment methods, including credit cards, debit
+                            <el-collapse-item title="What payment methods does TrustyPay support? " name="3">
+                                <div>TrustyPay supports a wide range of payment methods, including credit cards, debit
                                     cards, digital wallets, and direct bank transfers. Our goal is to offer flexibility
                                     and convenience for both businesses and their customers.</div>
                             </el-collapse-item>
@@ -458,6 +413,7 @@ import SvgIcon from '@/components/svgIcon.vue';
 import footerMenu from '@/components/footerMenu.vue';
 import Panel from '@/components/Panel.vue';
 import Sales from '@/components/Sales.vue';
+import indexOffer from '@/components/indexOffer'
 
 
 export default {
@@ -468,7 +424,7 @@ export default {
         footerMenu,
         Panel,
         Sales,
-
+        indexOffer
     },
     data() {
         return {
@@ -517,7 +473,7 @@ hr {
 .topBanner {
     .bannerBg {
         width: 100%;
-        height: 620px;
+        height: 640px;
         background: url("@/assets/index/bannerBg.png") no-repeat;
         background-size: cover;
     }
@@ -528,7 +484,6 @@ hr {
         gap: 30px;
 
         .bannerInfo {
-
             width: 630px;
             margin-top: 50px;
 
@@ -572,153 +527,10 @@ hr {
                     font-size: 20px;
                 }
             }
-
-            .offerCard {
-                width: 530px;
-                height: auto;
-                position: relative;
-
-                .yellowCard {
-                    position: absolute;
-                    width: 160px;
-                    height: 66px;
-                    background: #fcf558;
-                    border-radius: 100%;
-                    right: -20px;
-                    top: -24px;
-                    z-index: 1;
-                    h1 {
-                        font-size: 24px;
-                        text-align: center;
-                        color: #005198;
-                        margin: 0;
-                        line-height: 66px;
-                    }
-                }
-
-                .greenCard {
-                    position: absolute;
-                    top:30px;
-                    .cardList {
-                        width: 530px;
-                        height: 95px;
-                        background: #a7de50;
-                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-                        border-radius: 12px;
-                        display: flex;
-                        align-items: center;
-                        gap: 10px;
-                        .cardTitle{                          
-                            margin-left: 14px;
-                            h1{
-                                margin: 0;
-                                color: #fff;
-                            }
-                        }
-                        .cardText{
-                            margin-left: 18px;
-                            p{
-                                color: #fff;
-                                margin: 0;
-                            }
-                            span{
-                                color: #fff;
-                                font-size: 12px;
-                            }
-                        }
-                       .cardImg{
-                        display: flex;
-                        align-items: center;
-                        margin-top: 40px;
-                        gap: 8px;
-                        img{
-                            width: 38px;
-                            height: auto;
-                        }
-                       }
-                    }
-                    .cardList1 {
-                        width: 530px;
-                        height: 95px;
-                        background: #a7de50;
-                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-                        border-radius: 12px;
-                        display: flex;
-                        align-items: center;                     
-                        margin-top: 15px;
-                        gap: 10px;
-                        .cardTitle1{                          
-                            margin-left: 15px;
-                           
-                            h1{
-                                margin: 0;
-                                color: #fff;
-                            }
-                        }
-                        .cardText1{
-                            margin-left: 34px;
-                            p{
-                                color: #fff;
-                                margin: 0;
-                            }
-                            span{
-                                color: #fff;
-                                font-size: 12px;
-                            }
-                        }
-                       .cardImg1{
-                        display: flex;   
-                        align-items: center;  
-                        justify-content: center;                   
-                        margin-top: 40px;
-                        gap: 8px;
-                     
-                    .unionPay  {
-                        img{
-                            width: 26px;
-                            height: auto;
-                        }
-                    }
-                    .Alipay{
-                        img{
-                            width: 48px;
-                            height: auto;
-                        }
-                    }
-                       }
-                    }
-                    .cardList2 {
-                        width: 530px;
-                        height: 95px;
-                        background: #a7de50;
-                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-                        border-radius: 12px;
-                        display: flex;
-                        align-items: center;
-                        margin-top: 15px;
-                        gap: 10px;
-                        .cardTitle2{                          
-                            margin-left: 12px;
-                            h1{
-                                margin: 0;
-                                color: #fff;
-                            }
-                        }
-                        .cardText2{
-                            margin-left: 10px;
-                            p{
-                                color: #fff;
-                                margin: 0;
-                            }
-                            span{
-                                color: #fff;
-                                font-size: 12px;
-                            }
-                        }
-
-                    }
-                }
-            }          
+.client-group{
+    display: none;
+}
+                 
         }
 
         .rightText {
@@ -752,32 +564,31 @@ hr {
             text-align: center;
         }
     }
-
-    .accept-logo {
-        .accept-row1 {
+    .accept-logo{        
+        .accept-row1{
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            padding: 20px 70px;
-            gap: 70px;
-
-            img {
-                width: 120px;
-                height: auto;
-            }
+            justify-content: center;
+            padding:20px 0;
+            gap: 90px;
+           .visa{img{width: 110px; height: auto;}}
+           .master-card{img{width: 90px; height: auto;}}
+           .eft-pos{img{width: 120px; height: auto;}}
+           .american{img{width: 70px; height: auto;}}
+           .jcb{img{width: 80px; height: auto;}}
+           .union-pay{img{width: 80px; height: auto;}}
         }
-
-        .accept-row2 {
+        .accept-row2{
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            padding: 20px 70px;
-            gap: 100px;
-
-            img {
-                width: 130px;
-                height: auto;
-            }
+            justify-content: center;
+            padding: 20px 0;
+            gap: 90px;
+          .G-pay{img{width: 80px; height: auto;}}
+          .pay{img{width: 78px; height: auto;}}
+          .club{img{width: 130px; height: auto;}}
+          .alipay{img{width: 110px; height: auto;}}
+          .we-chat{img{width: 120px; height: auto;}}
         }
     }
 }
@@ -927,7 +738,7 @@ hr {
         h2 {
             text-align: center;
             color: #1a5271;
-            font-size: 42px;
+            font-size: 50px;
         }
     }
 
@@ -936,6 +747,7 @@ hr {
         width: 900px;
         margin: auto;
         padding: 24px 0;
+        margin-bottom: 100px;
 
         .el-collapse {
             border-top: none;
@@ -946,7 +758,7 @@ hr {
             }
         }
 
-        .el-collapse-item__header {
+        /deep/.el-collapse-item__header {
             border-radius: 10px;
             background: #fdfab5;
             border-bottom: none;
@@ -961,11 +773,10 @@ hr {
             }
         }
 
-        .el-collapse-item__wrap {
+        /deep/.el-collapse-item__wrap {
             border-bottom: none;
 
-            .el-collapse-item__content {
-
+           .el-collapse-item__content {
                 padding: 40px 30px;
                 color: #73702e;
                 font-size: 16px;
@@ -1026,12 +837,24 @@ hr {
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 60px;
-
-            img {
-                width: 200px;
-                height: auto;
+            gap: 100px;
+            .sap{
+                img{width: 130px; height: auto;}
+            }
+            .shopify{
+                img{width: 150px; height: auto;}
+            }
+            .sale{
+                img{width: 136px; height: auto;}
             }
+            .magento{
+                img{width: 166px; height: auto;}
+            }
+            .big-commerce{
+                img{width: 160px; height: auto;}
+            }
+
+       
         }
 
         .plugList2 {
@@ -1039,12 +862,21 @@ hr {
             align-items: center;
             justify-content: center;
             margin-top: 40px;
-            gap: 60px;
-
-            img {
-                width: 160px;
-                height: auto;
+            gap: 100px;
+            .woo{
+                img{width: 98px; height: auto;}
+            }
+            .presta-shop{
+                img{width: 166px; height: auto;}
             }
+            .pwa{
+                img{width: 98px; height: auto;}
+            }
+            .shop-ware{
+                img{width: 160px; height: auto;}
+            }
+
+           
         }
     }
 }
@@ -1158,33 +990,6 @@ hr {
 }
 
 
-// .phoneEmail {
-//     .twoCard {
-//         display: flex;
-//         justify-content: center;
-//         gap: 40px;
-//         padding: 80px 0px;
-
-//         .phoneCard {
-//             width: 450px;
-//             height: 250px;
-//             border-radius: 12px;
-//             // box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-//             box-shadow: 0px 15px 34px 0px #0000001A;
-
-//             p {
-//                 font-size: 18px;
-//                 font-weight: 600;
-//                 color: #005372;
-//                 text-align: center;
-//                 padding-top: 16px;
-//             }
-
-
-//         }
-//     }
-// }
-
 .buttonContainer {
 
     .bgImage {
@@ -1230,4 +1035,39 @@ hr {
         }
     }
 }
+/* 小屏幕 */
+@media (max-width: 767px) {
+    .bannerBg{
+        
+        .leftHead{
+            text-align: center;
+            h1{
+                font-size: 36px;
+                line-height: 38.88px;
+            }
+        }
+        .client-group{
+            display: block !important;
+            img{
+                width: 392px;
+            
+            }
+        
+        } 
+       .rightText{
+        img{
+           display: none;  
+        }
+       
+    }
+    }
+   
+ 
+    .buttonMenu{
+        height:auto;
+    }
+  .buttonText {
+   display: inline;
+  }
+}
 </style>

vue.config.js

@@ -9,6 +9,21 @@ module.exports = defineConfig({
 
   publicPath: './',
 
+  transpileDependencies:true,
+  lintOnSave:false,
+  devServer: {
+    host: '0.0.0.0',
+    
+    port: 8080,
+    client: {
+      webSocketURL: 'ws://0.0.0.0:8080/ws',
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    }
+  },
+
+
   chainWebpack: config => {
     //svg图标加载
     config.module