1

package-lock.json

@@ -16,6 +16,7 @@
         "layui": "^2.9.7",
         "postcss-pxtorem": "^6.1.0",
         "svg-sprite-loader": "^6.0.11",
+        "swiper": "^11.0.7",
         "vant": "^2.13.2",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
@@ -11009,6 +11010,14 @@
         "domhandler": "^5.0.3"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.0.7.tgz",
+      "integrity": "sha512-cDfglW1B6uSmB6eB6pNmzDTNLmZtu5bWWa1vak0RU7fOI9qHjMzl7gVBvYSl34b0RU2N11HxxETJqQ5LeqI1cA==",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "layui": "^2.9.7",
     "postcss-pxtorem": "^6.1.0",
     "svg-sprite-loader": "^6.0.11",
+    "swiper": "^11.0.7",
     "vant": "^2.13.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",

src/components/Sales.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sales-team">
-      <div class=""> 
+     
       <div class="left-content">
         <h2>Sales Team</h2>
         <p>You can count on us. </p>
@@ -19,8 +19,6 @@
         </div>
       </div>
     </div>
-      </div>
-
   </template>
   
   <script>
@@ -93,7 +91,7 @@
     text-align: center;    
     p{  
         font-size: 22px;
-        color: #1a5271;
+        color: #005372;
     }
   }
   h2{
@@ -122,26 +120,26 @@
     }
   }
 .avatar-container {
-  width: 7vw; 
-  height: 7vw;
+  width:135px; 
+  height:135px;
 }
 .team-member{
   width: 280px;
 }
 }
-  
-
-
-  
-
-
-
 
 
 /* 小屏幕 */
-/* @media (max-width: 767px) {
-  .sales-team {
-    flex-direction: column;
+@media screen and (max-width: 767px) {
+.left-content{
+  h2{
+    font-size: 36px;
+    line-height: 38.88px;
   }
-} */
+  p{
+    font-size: 24px;
+    line-height: 36px;
+  }
+}
+}
 </style>

src/components/indexAccept.vue

@@ -1,29 +1,30 @@
 <template>
-             <div class="accept">
-                <div class="main">
-                    <div class="accept-title">
-                        <h2>Accept popular cards & digital wallets</h2>
-                    </div>
-                    <div class="accept-logo">
-                        <div class="accept-row1">
-                            <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 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 class="accept">
+        
+            <div class="accept-title">
+                <h2>Accept popular cards & digital wallets</h2>
+            </div>
+            <div class="accept-logo">
+            
+                <div class="accept-row1">
+                    <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 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>
 </template>
 
 <script>
@@ -31,10 +32,9 @@
 </script>
 
 <style lang="less" scoped>
-
 .accept {
-    margin: auto;    
-    height: auto;   
+    margin: auto;
+    height: auto;
     border-radius: 30px;
     margin-top: 280px;
 
@@ -47,32 +47,115 @@
             text-align: center;
         }
     }
-    .accept-logo{        
-        .accept-row1{
+
+    .accept-logo {
+        .accept-row1 {
             display: flex;
             align-items: center;
             justify-content: center;
-            padding:20px 0;
+            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;}}
+
+            .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: 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;}}
+
+            .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;
+                }
+            }
         }
     }
+
+}
+
+@media (max-width: 767px) {
+    .accept {
+        margin-top: 700px;
+     
+        .accept-title {
+        h2 {
+          font-size: 36px;
+        }
+    }
+
+
+    }
 }
 </style>

src/components/indexChoose.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="choose-content">
+        
+            <div class="choose-title">
+                <h2>Why Choose TrustyPay?</h2>
+            </div>
+
+            <div class="chooseList">
+                <div class="greenBox">
+                    <div class="greenItem"><svg-icon icon-class="choose1" class="icon" /></div>
+                    <div class="greenText">Local POC & team Business Growth and support</div>
+                </div>
+                <div class="greenBox">
+                    <div class="greenItem"><svg-icon icon-class="choose2" class="icon" /></div>
+                    <div class="greenText">Small to Medium Enterprises focus</div>
+                </div>
+                <div class="greenBox">
+                    <div class="greenItem"><svg-icon icon-class="choose3" class="icon" /></div>
+                    <div class="greenText">Payments made <br> simple</div>
+                </div>
+                <div class="greenBox">
+                    <div class="greenItem"><svg-icon icon-class="choose4" class="icon" /></div>
+                    <div class="greenText">Reliability through <br> Proven ANz Worldline <br> Solutions</div>
+                </div>
+                <div class="greenBox">
+                    <div class="greenItem"><svg-icon icon-class="choose5" class="icon" /></div>
+                    <div class="greenText">Competitive <br> pricing</div>
+                </div>
+            </div>
+      
+    </div>
+</template>
+<script>
+
+</script>
+<style lang="less" scoped>
+
+.choose-content {
+    margin-top: 100px;
+    
+    margin: 0 auto;
+    .choose-title {
+        text-align: center;
+
+        h2 {
+            color: #1a5271;
+            font-size: 44px;
+        }
+    }
+
+    .chooseList {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin: 86px 0px;
+
+        .greenBox {
+            width: 200px;
+           
+            .greenItem {
+                margin: 0 auto;
+                width: 130px;
+                height: 130px;
+                border-radius: 50%;
+                background: #a7de50;
+
+                .icon {
+                    width: 60px;
+                    height: 60px;
+                    padding: 35px 35px;
+                }
+
+            }
+
+            .greenText {
+                margin: 0 auto;
+                text-align: center;
+                color: #527410;
+                padding: 20px 0px;
+                line-height: 22px;
+            }
+        }
+
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .choose-title{
+        h2{
+            font-size: 36px !important;
+            line-height: 38.88px;
+        }
+    }
+    
+}
+</style>

src/components/indexOffer.vue

@@ -240,6 +240,9 @@
 }
 
 @media (max-width: 767px) {
+    .greenCard {
+        text-align: center;
+    }
  .cardList{
     width: 344px !important;
     height: 211px !important;
@@ -248,6 +251,9 @@
        font-size: 48px;
        line-height: 72px;
     } 
+    .cardImg{
+        justify-content: center;
+    }
  }
  .cardList1{
     width: 344px !important;

src/components/indexPlug.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="plug-content">
+        <div class="plug-list">
+            <div class="left">
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Hosted Payment Page
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Hosted Tokenisation Page
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    All Payment methods available on PSP
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Provisioning API (for settings synchronisation)
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Pre-configured logic forAutomatic/Delayed Capture
+                </div>
+            </div>
+            <div class="right">
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Standalone or Integrated
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Password enabled security features
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Surcharging and Tipping
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Multi-Network Card Routing
+                </div>
+                <div class="bg-w">
+                    <svg-icon icon-class="circle" class="icon" />
+                    Dynamic Currency Conversion
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+
+</script>
+
+<style lang="less" scoped>
+.plug-content {
+    padding-top: 100px;
+    margin: 0 auto;
+
+    .plug-list {
+        margin-bottom: 100px;
+        display: flex;
+        justify-content: center;
+        gap: 40px;
+
+        .bg-w {
+            margin-top: 26px;
+            width: 490px;
+            height: 70px;
+            border-radius: 10px;
+            background-color: white;
+            box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+            line-height: 70px;
+            color: #1a5271;
+
+            .icon {
+                width: 20px;
+                height: 20px;
+                padding: 0px 20px;
+            }
+        }
+
+    }
+}
+
+@media screen and (max-width: 767px){
+    
+}
+</style>

src/components/indexTerminals.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="mainContent">        
+            <div class="title">
+                <h2>Durable and Easy-to-use <br/>
+                Terminals for Fast Checkouts</h2>
+            </div>
+            <div class="subhead">
+                Take payments fast from anywhere - at the counter or on the move
+            </div>
+           
+            <div class="list-icon">
+                <div class="left">
+                    <div class="bg-b">
+                        <svg-icon icon-class="contactless" class="icon" />
+                       Contactless
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="payments" class="icon" />
+                        Mobile Payments
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="touch" class="icon" />
+                        Multimedia touch screen 3.5"
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="printer" class="icon" />
+                        Printer
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="4G" class="icon" />
+                        4G, Wi-Fi, Ethernet & Bluetooth
+                    </div>
+                </div>
+                <div class="right">
+                    <div class="bg-b">
+                        <svg-icon icon-class="puzzle" class="icon" />
+                        Standalone or Integrated
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="security" class="icon" />
+                        Password enabled security features
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="usd" class="icon" />
+                        Surcharging and Tipping
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="network" class="icon" />
+                        Multi-Network Card Routing
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="conversion" class="icon" />
+                        Dynamic Currency Conversion
+                    </div>
+                </div>
+            </div>
+
+        </div>
+ 
+
+</template>
+
+<script>
+
+</script>
+
+<style lang="less" scoped>
+.mainContent {
+    margin: 0 auto;
+
+    .title {
+        h2 {
+            margin: 0;
+            text-align: center;
+            color: #1a5271;
+            font-size: 44px;
+            font-weight: 600;
+        }
+
+    }
+
+    .subhead {
+        color: #1a5271;
+        text-align: center;
+        font-size: 26px;
+        padding: 30px;
+    }
+
+
+    .list-icon{
+        display: flex;
+        justify-content: center;
+        gap: 40px;
+        .bg-b{
+            margin-top: 26px;
+                width: 400px;
+                height: 70px;
+                border-radius: 10px;
+                background-color: #60c5f4;
+                box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+                line-height: 70px;
+                color: #1a5271;
+                .icon {
+                    width: 40px;
+                    height: 40px;
+                    padding: 0px 20px;
+                }
+        }
+    }
+}
+
+@media screen and (max-width: 767px){
+.title{
+    h2{
+        font-size: 36px !important;
+        line-height: 38.88px;
+    }
+}
+.subhead{
+    font-size: 24px;
+    line-height: 36px;
+}
+    
+}
+</style>

src/views/index.vue

@@ -7,148 +7,56 @@
                 <Panel />
             </div>
 
-            <div class="topBanner">
-                <div class="bannerBg">
-                    <div class="bannerText">
-                        <div class="bannerInfo">
-                            <div class="leftHead">
-                                <h1>Smart Solutions,<br> Seamless Transactions</h1>
-                                <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>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
-                                    for growth.</p>
-                            </div>
-                            <div class="saleBtn">
-                                <router-link to="/ContactUs"><el-button>Contact Sales</el-button></router-link>
+
+            <div class="bannerBg">
+                <div class="bannerText">
+                    <div class="bannerInfo">
+                        <div class="leftHead">
+                            <h1>Smart Solutions,<br> Seamless Transactions</h1>
+                            <p>Unlock the Future of Payments Today with TrustyPay</p>
+
+                            <div class="client-group">
+                                <img src="../assets/index/Group98.png" alt="">
                             </div>
-                            <!-- offer -->
-                              <indexOffer/>
                         </div>
-                        <div class="rightText">
-                            <img src="../assets/index/Group98.png" alt="">
+                        <div class="leftContent">
+                            <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
+                                for growth.</p>
+                        </div>
+                        <div class="saleBtn">
+                            <router-link to="/ContactUs"><el-button>Contact Sales</el-button></router-link>
                         </div>
+                        <!-- offer -->
+                        <indexOffer />
+                    </div>
+                    <div class="rightText">
+                        <img src="../assets/index/Group98.png" alt="">
                     </div>
                 </div>
             </div>
 
-            <!-- 图标 -->
-            <div></div>
 
-            <!-- why choose trustyPay -->
-            <div class="mainContent8">
-                <div class="main">
-                    <div class="choose">
-                        <h2>Why Choose TrustyPay?</h2>
-                    </div>
+            <!-- accept图标 -->
+            <div>
+                <indexAccept />
+            </div>
 
-                    <div class="chooseList">
-                        <div class="greenBox">
-                            <div class="greenItem"><svg-icon icon-class="choose1" class="icon" /></div>
-                            <div class="greenText">Local POC & team Business Growth and support</div>
-                        </div>
-                        <div class="greenBox">
-                            <div class="greenItem"><svg-icon icon-class="choose2" class="icon" /></div>
-                            <div class="greenText">Small to Medium Enterprises focus</div>
-                        </div>
-                        <div class="greenBox">
-                            <div class="greenItem"><svg-icon icon-class="choose3" class="icon" /></div>
-                            <div class="greenText">Payments made <br> simple</div>
-                        </div>
-                        <div class="greenBox">
-                            <div class="greenItem"><svg-icon icon-class="choose4" class="icon" /></div>
-                            <div class="greenText">Reliability through <br> Proven ANz Worldline <br> Solutions</div>
-                        </div>
-                        <div class="greenBox">
-                            <div class="greenItem"><svg-icon icon-class="choose5" class="icon" /></div>
-                            <div class="greenText">Competitive <br> pricing</div>
-                        </div>
-                    </div>
-                </div>
+            <!-- why choose trustyPay -->
+            <div>
+                <indexChoose />
             </div>
 
-            <!-- We serve -->
 
             <!-- Durable and Easy-to-useTerminals for Fast Checkouts -->
-            <div class="mainContent">
-                <div class="main">
-                    <div class="title1">
-                        <h2>Durable and Easy-to-use </h2>
-                        <h2>Terminals for Fast Checkouts</h2>
-                    </div>
-                    <div class="subhead">
-                        Take payments fast from anywhere - at the counter or on the move
-                    </div>
-                    <div class="infoList">
-                        <!-- 1 -->
-                        <div class="infoItem">
-                            <div class="bg-b">
-                                <svg-icon icon-class="contactless" class="icon" />
-                                Contactless
-                            </div>
-                            <div class="bg-b">
-                                <svg-icon icon-class="puzzle" class="icon" />
-                                Standalone or Integrated
-                            </div>
-                        </div>
-                        <!-- 2 -->
-                        <div class="infoItem">
-                            <div class="bg-b">
-                                <svg-icon icon-class="payments" class="icon" />
-                                Mobile Payments
-                            </div>
-                            <div class="bg-b">
-                                <svg-icon icon-class="security" class="icon" />
-                                Password enabled security features
-                            </div>
-                        </div>
-                        <!-- 3 -->
-                        <div class="infoItem">
-                            <div class="bg-b">
-                                <svg-icon icon-class="touch" class="icon" />
-                                Multimedia touch screen 3.5"
-                            </div>
-                            <div class="bg-b">
-                                <svg-icon icon-class="usd" class="icon" />
-                                Surcharging and Tipping
-                            </div>
-                        </div>
-                        <!-- 4 -->
-                        <div class="infoItem">
-                            <div class="bg-b">
-                                <svg-icon icon-class="printer" class="icon" />
-                                Printer
-                            </div>
-                            <div class="bg-b">
-                                <svg-icon icon-class="network" class="icon" />
-                                Multi-Network Card Routing
-                            </div>
-                        </div>
-                        <!-- 5 -->
-                        <div class="infoItem">
-                            <div class="bg-b">
-                                <svg-icon icon-class="4G" class="icon" />
-                                4G, Wi-Fi, Ethernet & Bluetooth
-                            </div>
-                            <div class="bg-b">
-                                <svg-icon icon-class="conversion" class="icon" />
-                                Dynamic Currency Conversion
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
+            <div>
+                <indexTerminals />
             </div>
 
             <!-- Partners -->
-            <div class="mainContent2">
+            <div class="partners-part">
                 <div class="main">
                     <div class="parTitle">
                         <h2>Partners</h2>
@@ -167,10 +75,15 @@
             </div>
 
             <!-- tap on Mobile -->
-            <div class="mainContent3">
-                <div class="main tapContent">
+
+            <div class="tap-mobile">
+                <div class="main">
+                    <div class="tap-content">
                     <div class="tapTitle">
                         <h2>Tap on Mobile</h2>
+                        <div class="tap-client">
+                            <img src="@/assets/index/Ellipse24.png" alt="">
+                        </div>
                         <p>Make payments a breeze, for you and your customers. Get Tap onMobile, the mobile EFTPOS
                             you've been waiting for.</p>
                         <div class="tapSvg">
@@ -186,10 +99,11 @@
                     <div class="tapImg">
                         <img src="@/assets/index/Ellipse24.png" alt="">
                     </div>
-
+                </div>
                 </div>
             </div>
 
+
             <!-- Innovation 隐藏 -->
 
 
@@ -217,47 +131,12 @@
                     </div>
                 </div>
             </div>
-            <!-- plug列表 -->
-            <div class="mainContent6">
-                <div class="main">
-                    <div class="plugList">
-                        <!-- 1 -->
-                        <div class="plugItem">
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Hosted Payment Page</div>
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Standalone or Integrated
-                            </div>
-                        </div>
-                        <!-- 2 -->
-                        <div class="plugItem">
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Hosted Tokenisation Page
-                            </div>
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Password enabled security
-                                features</div>
-                        </div>
-                        <!-- 3 -->
-                        <div class="plugItem">
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />All Payment methods
-                                available on PSP</div>
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Surcharging and Tipping
-                            </div>
-                        </div>
-                        <!-- 4 -->
-                        <div class="plugItem">
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Provisioning API (for
-                                settings synchronisation)</div>
-                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Multi-Network Card Routing
-                            </div>
-                        </div>
-                        <!-- 5 -->
-                        <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 Currency Conversion
-                            </div>
-                        </div>
-                    </div>
-                </div>
+
+            <!-- plug-list -->
+            <div>
+                <indexPlug />
             </div>
+
             <!-- Leveraging partnership标题 -->
             <div class="leverTitle">
                 <div class="main">
@@ -330,25 +209,6 @@
             </div>
 
 
-            <!-- phone and email  -->
-            <!-- <div class="phoneEmail">
-                <div class="main">
-                    <div class="twoCard">
-                        <div class="phoneCard">
-                            <div style="text-align: center; padding-top: 60px;">
-                                <svg-icon icon-class="tel" class="icon" style="width:40px; height: 40px;" />
-                            </div>
-                            <p>1300 67 61 61</p>
-                        </div>
-                        <div class="phoneCard">
-                            <div style="text-align: center; padding-top: 60px;">
-                                <svg-icon icon-class="email" class="icon" style="width: 40px; height: 40px;" />
-                            </div>
-                            <p>hello@trustypay.com.au</p>                           
-                        </div>
-                    </div>
-                </div>
-            </div> -->
 
             <!-- button -->
             <div class="buttonContainer">
@@ -390,7 +250,10 @@ import footerMenu from '@/components/footerMenu.vue';
 import Panel from '@/components/Panel.vue';
 import Sales from '@/components/Sales.vue';
 import indexOffer from '@/components/indexOffer'
-
+import indexAccept from '@/components/indexAccept'
+import indexChoose from '@/components/indexChoose'
+import indexTerminals from '@/components/indexTerminals'
+import indexPlug from '@/components/indexPlug'
 
 
 export default {
@@ -401,7 +264,11 @@ export default {
         footerMenu,
         Panel,
         Sales,
-        indexOffer
+        indexOffer,
+        indexAccept,
+        indexChoose,
+        indexTerminals,
+        indexPlug
     },
     data() {
         return {
@@ -451,135 +318,85 @@ hr {
     background: linear-gradient(to right, #00A0E8, #99C938, #FFF436);
 }
 
-.topBanner {
-    .bannerBg {
-        width: 100%;
-        height: 640px;
-        background: url("@/assets/index/bannerBg.png") no-repeat;
-        background-size: cover;
-    }
 
-    .bannerText {
-        display: flex;
-        justify-content: center;
-        gap: 30px;
+.bannerBg {
+    width: 100%;
+    height: 640px;
+    background: url("@/assets/index/bannerBg.png") no-repeat;
+    background-size: cover;
+}
 
-        .bannerInfo {
-            width: 630px;
-            margin-top: 50px;
+.bannerText {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
 
-            .leftHead {
-                margin-top: 30px;
+    .bannerInfo {
+        width: 630px;
+        margin-top: 50px;
 
-                h1 {
-                    color: #fff;
-                    font-size: 38px;
-                    margin: 0;
-                }
+        .leftHead {
+            margin-top: 30px;
 
-                h2 {
-                    color: #fff;
-                    font-size: 24px;
-                    font-weight: 400;
+            h1 {
+                color: #fff;
+                font-size: 38px;
+                margin: 0;
+            }
 
-                }
+            h2 {
+                color: #fff;
+                font-size: 24px;
+                font-weight: 400;
 
-                p {
-                    color: #fff;
-                    font-size: 24px;
-                }
             }
 
-            .leftContent {
-                p {
-                    color: #fff;
-                    font-size: 16px;
-                    line-height: 24px;
-                }
+            p {
+                color: #fff;
+                font-size: 24px;
             }
+        }
 
-            .saleBtn {
-                .el-button {
-                    width: 200px;
-                    height: auto;
-                    margin-top: 10px;
-                    color: #72c8f2;
-                    border-radius: 8px;
-                    font-size: 20px;
-                }
+        .leftContent {
+            p {
+                color: #fff;
+                font-size: 16px;
+                line-height: 24px;
             }
-.client-group{
-    display: none;
-}
-                 
         }
 
-        .rightText {
-            margin-top: 30px;
-
-            img {
-                width: 627px;
-                height: 1197px;
+        .saleBtn {
+            .el-button {
+                width: 200px;
+                height: auto;
+                margin-top: 10px;
+                color: #72c8f2;
+                border-radius: 8px;
+                font-size: 20px;
             }
         }
 
-    }
-
-}
-
-
-
-.mainContent {
-    margin: 0 auto;
-
-    .title1 {
-        h2 {
-            margin: 0;
-            text-align: center;
-            color: #1a5271;
-            font-size: 44px;
-            font-weight: 600;
+        .client-group {
+            display: none;
         }
 
     }
 
-    .subhead {
-        color: #1a5271;
-        text-align: center;
-        font-size: 26px;
-        padding: 30px;
-    }
+    .rightText {
+        margin-top: 30px;
 
-    .infoList {
-        margin-left: 220px;
+        img {
+            width: 627px;
+            height: 1197px;
+        }
+    }
 
-        .infoItem {
-            display: flex;
-            gap: 40px;
+}
 
-            .bg-b {
-                margin-top: 26px;
-                width: 400px;
-                height: 70px;
-                border-radius: 10px;
-                background-color: #60c5f4;
-                box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-                line-height: 70px;
-                color: #1a5271;
-
-                .icon {
-                    width: 40px;
-                    height: 40px;
-                    padding: 0px 20px;
-                }
-            }
-        }
 
 
-    }
-}
 
-.mainContent2 {
+.partners-part {
     margin-top: 100px;
     background: #f8f8f8;
 
@@ -609,7 +426,7 @@ hr {
 
 }
 
-.tapContent {
+.tap-content {
     display: flex;
     gap: 140px;
     padding-left: 100px;
@@ -630,7 +447,9 @@ hr {
             line-height: 42px;
 
         }
-
+        .tap-client {
+        display: none
+    }
         .learnMore {
             margin: 60px 0;
 
@@ -712,7 +531,7 @@ hr {
         /deep/.el-collapse-item__wrap {
             border-bottom: none;
 
-           .el-collapse-item__content {
+            .el-collapse-item__content {
                 padding: 40px 30px;
                 color: #73702e;
                 font-size: 16px;
@@ -774,23 +593,43 @@ hr {
             align-items: center;
             justify-content: center;
             gap: 100px;
-            .sap{
-                img{width: 130px; height: auto;}
+
+            .sap {
+                img {
+                    width: 130px;
+                    height: auto;
+                }
             }
-            .shopify{
-                img{width: 150px; height: auto;}
+
+            .shopify {
+                img {
+                    width: 150px;
+                    height: auto;
+                }
             }
-            .sale{
-                img{width: 136px; height: auto;}
+
+            .sale {
+                img {
+                    width: 136px;
+                    height: auto;
+                }
             }
-            .magento{
-                img{width: 166px; height: auto;}
+
+            .magento {
+                img {
+                    width: 166px;
+                    height: auto;
+                }
             }
-            .big-commerce{
-                img{width: 160px; height: auto;}
+
+            .big-commerce {
+                img {
+                    width: 160px;
+                    height: auto;
+                }
             }
 
-       
+
         }
 
         .plugList2 {
@@ -799,107 +638,41 @@ hr {
             justify-content: center;
             margin-top: 40px;
             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;}
-            }
-
-           
-        }
-    }
-}
-
-.mainContent6 {
-    padding-top: 100px;
-    width: 1000px;
-    margin: 0 auto;
 
-    .plugList {
-        margin-bottom: 100px;
-
-        .plugItem {
-            display: flex;
-            gap: 40px;
-
-            .form1 {
-                margin-top: 26px;
-                width: 490px;
-                height: 70px;
-                border-radius: 10px;
-                background-color: #fff;
-                box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-                line-height: 70px;
-                color: #1a5271;
-
-                .icon {
-                    width: 20px;
-                    height: 20px;
-                    padding: 0px 20px;
+            .woo {
+                img {
+                    width: 98px;
+                    height: auto;
                 }
             }
-        }
-    }
-
-
-}
-
-// Why Choose TrustyPay?
-.mainContent8 {
-    margin-top: 100px;
-
-    .choose {
-        text-align: center;
-
-        h2 {
-            color: #1a5271;
-            font-size: 44px;
-        }
-    }
 
-    .chooseList {
-        display: flex;
-        justify-content: space-around;
-        margin: 86px 0px;
-
-        .greenBox {
-            width: 200px;
-            margin: 0 auto;
-
-            .greenItem {
-                margin: 0 auto;
-                width: 130px;
-                height: 130px;
-                border-radius: 50%;
-                background: #a7de50;
-
-                .icon {
-                    width: 60px;
-                    height: 60px;
-                    padding: 35px 35px;
+            .presta-shop {
+                img {
+                    width: 166px;
+                    height: auto;
                 }
+            }
 
+            .pwa {
+                img {
+                    width: 98px;
+                    height: auto;
+                }
             }
 
-            .greenText {
-                margin: 0 auto;
-                text-align: center;
-                color: #527410;
-                padding: 20px 0px;
-                line-height: 22px;
+            .shop-ware {
+                img {
+                    width: 160px;
+                    height: auto;
+                }
             }
-        }
 
+
+        }
     }
 }
 
+
 .leverTitle {
     margin-top: 150px;
     text-align: center;
@@ -971,49 +744,139 @@ hr {
         }
     }
 }
+
 /* 小屏幕 */
 @media (max-width: 767px) {
-    .bannerBg{
+    hr {
+        width: 330px;
+    }
+
+    .bannerBg {
+        width: 100%;
         height: auto !important;
-        
-        .leftHead{
-            text-align: center;
-            h1{
-                font-size: 36px !important;
-                line-height: 38.88px !important;
+
+        .bannerInfo {
+            width: auto;
+        }
+
+        .bannerText {
+            display: block;
+
+            .leftHead {
+
+                h1 {
+                    font-size: 36px;
+                    line-height: 38.88px;
+                    text-align: center;
+                }
+
+                p {
+                    font-size: 24px;
+                    line-height: 36px;
+                    text-align: center;
+                }
             }
-            p{
-                font-size: 24px !important;
-                line-height: 36px !important;
+
+            .leftContent {
+                p {
+                    font-size: 16px !important;
+                    line-height: 24px !important;
+                    margin-top: -270px;
+                    text-align: center;
+                }
             }
-        }
-        .leftContent{
-            p{
-                font-size: 16px!important;
-                line-height: 24px !important;
-                margin-top: -270px;
+
+            .saleBtn {
+                padding-bottom: 40px;
+                text-align: center;
+            }
+
+            .client-group {
+                display: block !important;
+
+                img {
+                    width: 400px;
+
+                }
+
+            }
+
+            .rightText {
+                img {
+                    display: none;
+                }
+
             }
         }
-        .saleBtn{
-           margin: 30px 0;
+
+    }
+
+    .tap-content {
+        display: block;
+        .main {
+            width: auto;
         }
-        .client-group{
-            display: block !important;
+    .tapTitle{
+        h2{
+            font-size: 36px;
+            line-height: 38.88px;
+        }
+     .tap-client {
+            display: block;
             img{
-                width: 400px;
-            
+                width: 337px;
             }
-        
-        } 
-       .rightText{
-        img{
-           display: none;  
         }
+}
+.tapImg{
+    display: none
+}
        
     }
+
+    .partners-part {
+        background-color: white !important;
+
+        .main {
+            width: auto;
+        }
+
+        .parImg {
+            display: block;
+            text-align: center;
+            background-color: #f8f8f8;
+            line-height: 120px;
+            margin-top: 20px;
+        }
     }
-   
- 
+
+    .leverTitle {
+        .main {
+            width: auto;
+        }
+
+        h2 {
+            font-size: 36px;
+            line-height: 38.88px;
+        }
+
+        .withImg {
+            display: block;
+
+            h4 {
+                font-size: 24px;
+                line-height: 26px;
+            }
+
+            img {
+                width: 272px;
+            }
+        }
+
+
+    }
+
+
 
 }
 </style>