样式修改

src/assets/fonts/font.css

@@ -9,4 +9,10 @@
     src: url('Poppins-ExtraBold.ttf');
     font-weight: normal;
     font-style: normal;
+}
+@font-face{
+    font-family: SemiBold;
+    src: url('Poppins-SemiBold.ttf');
+    font-weight: normal;
+    font-style: normal;
 }

src/components/Panel.vue

@@ -11,7 +11,7 @@
 
         <el-form :model="form" :rules="rules" ref="contactForm" label-width="120px" label-position="top">
           <el-form-item label="Name" prop="name">
-            <el-input v-model="form.name"></el-input>
+            <el-input v-model="form.name"  prop="name" ></el-input>
           </el-form-item>
           <el-form-item label="Business Name"  prop="businessName">
             <el-input v-model="form.businessName"></el-input>
@@ -33,11 +33,11 @@
               
             </el-select>
           </el-form-item>
-          <el-form-item label="Your message" prop="message">
-            <el-input type="textarea" v-model="form.message"></el-input>
+          <el-form-item label="Your message">
+            <el-input type="text" v-model="form.message"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="submitForm('contactForm')" class="sbuBtn">Submit</el-button>
+            <el-button type="primary" @click="submitForm('contactForm')" class="sbuBtn" :loading="isLoading">Submit</el-button>
           </el-form-item>
         </el-form>
 
@@ -55,6 +55,7 @@
     data() {
       return {
         showPanel: true,
+        isLoading:false,
         form: {
           name: '',
           businessName: '',
@@ -89,11 +90,7 @@
               validator: elIsEmail
              },
           ],
-           message:[
-            { 
-              required: true, 
-              message: 'Please enter'
-            }],
+
       },
       }
     },
@@ -102,26 +99,28 @@
         this.$refs[formName].validate(async (valid) => {
         if (valid) {
           try {
-            const language = this.languages.find(
-              (item) => item.value === this.form.language
-            );
+            this.isLoading=true;
 
             const data = await emailSend(
               emailConfig.SERVICE_ID,
               emailConfig.TEMPLATE_ID,
               {
-                from_name: "test",
                 name: this.form.name,
                 businessName: this.form.businessName,
                 mobile: this.form.mobile,
                 email: this.form.email,
-                language: language.value,
+                languagePreference: this.form.language,
                 message: this.form.message,
               }
             );
-
+              this.isLoading=false;
+              
             if (data.status === 200) {
-              window.alert("Form submitted successfully!");
+              this.$alert('Thank you for contacting us. We’ll get in touch with you in the next 24 hours', '', {
+          callback: action => {
+          }
+        });
+             
             } else {
               window.alert("Form submitted failed!");
             }
@@ -129,6 +128,7 @@
             console.log("Error submitting form!", error);
           }
         } else {
+          this.isLoading=false;
           console.log("Error submitting form!");
           return false;
         }

src/components/footerMenu.vue

@@ -5,7 +5,7 @@
            
                 <div class="buttonText">
                     <div class="titleLogo">
-                        <!-- <h1 @click="goToTop">TrustyPay</h1> -->
+                        
                         <div @click="goToTop" class="buttonLogo">
                             <img src="../assets/index/Group63.png" alt="">
                             <p>2024 © TrustyPay Payments. All rights reserved.</p>
@@ -30,8 +30,7 @@
                             <router-link to="/privacy">TrustyPay Privacy Policy</router-link><br>
                             <router-link to="/Copyright">Copyright information</router-link><br>
                         </nav>
-                    </div>
-                    <div>
+                    </div>                    
                         
                         <div class="rightInfo">
                             <div class="jumpImg">
@@ -40,7 +39,7 @@
                             <div class="contactText">
                                 
                                 <div class="call" @click="call">                                    
-                                   <p>Call: <a href="">1300 67 61 61</a></p> 
+                                   <p>Phone: <a href="">1300 67 61 61</a></p> 
                                 </div>
                                 <div class="sales" @click="sendSales">
                                 <p>Contact sales team: <a href="">sales@trustypay.com.au</a></p> 
@@ -52,7 +51,7 @@
                                 <p>Address: Level 1, 480 Collin st Melbourne 3000 VIC AUSTRALIA </p>                               
                             </div>
                         </div>
-                    </div>
+                    
                 </div>
                 <P>BROUGHT TO LIFE BY <b>IDEAS</b></P>
             
@@ -118,6 +117,7 @@ export default {
                         height: 65px;
                     }
                     p{
+                        font-family: Regular;
                         padding: 0;
                         font-size: 14px;
                     }
@@ -127,8 +127,7 @@ export default {
                     padding-top: 70px;
 
                     .el-button {
-                        width: 120px;
-                        height: 38px;
+                        font-size: 18px;
                         background-color: #005372;
                         color: #33C6F4;
                         border-radius: 8px;
@@ -138,48 +137,55 @@ export default {
             }
 
             h4 {
+                font-family: SemiBold;
                 color: #005372;
                 font-size: 16px;
             }
 
             nav a {
+                font-family: Regular;
                 text-decoration: none;
                 font-size: 16px;
                 color: #005372;
-                line-height: 26px;
+                line-height: 28px;
             }
 
             nav a:hover {
                 color: #fff;
             }
+            .rightInfo{
+         
+         margin-top: 15px;
+         .jumpImg{
+            width: 50px;
+            height: 50px;
+             img{
+                 width: 50px;
+                 height: 50px;
+             }
+         }
+         .contactText{
+             p{
+             font-family: Regular;
+             text-align: left;   
+             padding:4px 0;
+             cursor: pointer;                  
+             }
+          
+            
+         }
+     }
         }
 
         p {
+            font-family: Regular;
             text-align: center;
             color: #005372;
             font-size: 16px;
             padding: 24px 0px;
             margin: 0;
         }
-        .rightInfo{
-            /* width: 260px; */
-            margin-top: 15px;
-            .jumpImg{
-                img{
-                    width: 50px;
-                    height: 50px;
-                }
-            }
-            .contactText{
-                p{
-                  text-align: left;   
-                  padding:4px 0;
-                  cursor: pointer;                  
-                }
-             
-               
-            }
-        }
+
     }
 
 

src/components/headTop.vue

@@ -8,10 +8,10 @@
           /></router-link>
         </div>
         <nav>
-          <router-link to="/Payments">Payments</router-link>
-          <router-link to="/AboutUs">About Us</router-link>
-          <router-link to="/FAQ">FAQ</router-link>
-          <router-link to="/ContactUs">Contact Us</router-link>
+          <router-link to="/Payments" active-class="active">Payments</router-link>
+          <router-link to="/AboutUs" active-class="active">About Us</router-link>
+          <router-link to="/FAQ" active-class="active">FAQ</router-link>
+          <router-link to="/ContactUs" active-class="active">Contact Us</router-link>
         </nav>
         <!-- phone and email -->
       </div>
@@ -44,18 +44,11 @@ export default {
   },
   data() {
     return {
-      searchQuery: "",
-      showSearchInput: false,
+     
     };
   },
   methods: {
-    toggleSearch() {
-      this.showSearchInput = !this.showSearchInput;
-    },
-    search() {
-      // Perform search logic here
-      console.log("Searching for:", this.searchQuery);
-    },
+ 
     call() {
       window.location.href = "tel:1300676161";
     },
@@ -90,7 +83,11 @@ export default {
     nav {
       display: flex;
       align-items: center;
-      // margin: 0px 60px;
+      
+      .active {
+      font-weight: bold;
+      color: #3d9ee6; 
+    }
     }
     nav a {
       text-decoration: none;

src/router/index.js

@@ -1,14 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import index from '@/views/index.vue'
-import TermsUse from '@/views/TermsUse.vue'
-import Privacy from '@/views/Privacy.vue'
-import FAQ from '@/views/Faq.vue'
-import ContactUs from '@/views/ContactUs.vue'
-import Copyright from '@/views/Copyright.vue'
-import AboutUs from '@/views/AboutUs.vue'
-import Payments from '@/views/Payments.vue'
-import ToonMobile from '@/views/ToonMobile.vue'
+
 
 Vue.use(VueRouter)
 
@@ -20,47 +12,48 @@ redirect:'/index'
   {
     path: '/index',
     name: 'index',
-    component: index    
+    component:()=>import('@/views/index.vue')   
   },
   {
     path: '/termsUse',
     name: 'termsUse',
-    component: TermsUse
+    component:()=>import('@/views/TermsUse.vue')
   },
   {
     path:'/privacy',
     name:'privacy',
-    component:Privacy
+    component:()=>import('@/views/Privacy.vue')
   },
   {
     path:'/FAQ',
     name:'FAQ',
-    component:FAQ
+    component:()=>import('@/views/Faq.vue')
   },
   {
     path:'/ContactUs',
     name:'ContactUs',
-    component:ContactUs
+    component:()=>import('@/views/ContactUs.vue')
   },
   {
     path:'/Copyright',
     name:'Copyright',
-    component:Copyright
+    component:()=>import('@/views/Copyright.vue')
   },
   {
     path:'/AboutUs',
     name:'AboutUs',
-    component:AboutUs
+    component:()=>import('@/views/AboutUs.vue')
   },
   {
     path:'/Payments',
     name:'Payments',
-    component:Payments
+    component:()=>import('@/views/Payments.vue')
   },
   {
     path:'/ToOnMobile',
     name:'ToOnMobile',
-    component:ToonMobile
+    // component:ToonMobile
+    component:()=>import('@/views/ToonMobile.vue')
   },
  
 ]

src/views/ContactUs.vue

@@ -62,7 +62,7 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="Your message" prop="message">
+            <el-form-item label="Your message">
               <el-input
                 type="textarea"
                 v-model="form.message"
@@ -94,7 +94,7 @@
             </div>
             <el-form-item>
               <el-button type="primary" @click="submitForm('contactForm')"
-                >Submit</el-button>
+              :loading="isLoading">Submit</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -115,6 +115,7 @@ export default {
   name: "ContactUs",
   data() {
     return {
+      isLoading:false,
       form: {
         name: "",
         businessName: "",
@@ -160,7 +161,7 @@ export default {
             validator: elIsEmail,
           },
         ],
-        message: [{ required: true, message: "Please enter" }],
+       
       },
     };
   },
@@ -171,13 +172,14 @@ export default {
           try {
             const language = this.languages.find(
               (item) => item.value === this.form.languagePreference
-            );
+            );       
+
+            this.isLoading=true
 
             const data = await emailSend(
               emailConfig.SERVICE_ID,
               emailConfig.TEMPLATE_ID,
               {
-                from_name: this.form.name,
                 name: this.form.name,
                 businessName: this.form.businessName,
                 mobile: this.form.mobile,
@@ -187,8 +189,14 @@ export default {
               }
             );
 
+            this.isLoading=false
+
+
             if (data.status === 200) {
-              window.alert("Form submitted successfully!");
+              this.$alert('Thank you for contacting us. We’ll get in touch with you in the next 24 hours', '', {
+          callback: action => {
+          }
+        });
             } else {
               window.alert("Form submitted failed!");
             }
@@ -196,6 +204,7 @@ export default {
             console.log("Error submitting form!", error);
           }
         } else {
+          this.isLoading=false
           console.log("Error submitting form!");
           return false;
         }

src/views/Payments.vue

@@ -55,7 +55,7 @@
                                 <div class="list-text">
                                     <div class="left-list">
                                         <ul>
-                                            <li>Worldline Glo bal <br>Online Pay</li>
+                                            <li>Worldline Global <br>Online Pay</li>
                                             <li>ANZ eGate</li>
                                         </ul>
                                     </div>
@@ -335,6 +335,7 @@ export default {
 
         .store-list {
             display: flex;
+            align-items: center;
             padding: 10px 30px;
 
             img {
@@ -411,7 +412,7 @@ export default {
 
             .online-list3 {
                 p {
-                    padding-left: 40px;
+                   text-align: center;
                 }
             }
         }

src/views/index.vue

@@ -58,9 +58,9 @@
                                         
                                         </div>
                                         <div class="cardImg1">
-                                            <div><img src="../assets/payments/unionPay.png" alt=""></div>
-                                            <div><img src="../assets/payments/Alipay.png" alt=""></div>
-                                            <div><img src="../assets/payments/weChat.png" alt=""></div>
+                                            <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">
@@ -580,16 +580,19 @@ hr {
 
                 .yellowCard {
                     position: absolute;
-                    width: 90px;
-                    height: 90px;
+                    width: 160px;
+                    height: 66px;
                     background: #fcf558;
-                    border-radius: 50%;
-                    right: 0;
-                    top: -34px;
+                    border-radius: 100%;
+                    right: -20px;
+                    top: -24px;
                     z-index: 1;
                     h1 {
-                        font-size: 22px;
+                        font-size: 24px;
                         text-align: center;
+                        color: #005198;
+                        margin: 0;
+                        line-height: 66px;
                     }
                 }
 
@@ -604,9 +607,9 @@ hr {
                         border-radius: 12px;
                         display: flex;
                         align-items: center;
-                        justify-content: center;
+                        gap: 10px;
                         .cardTitle{                          
-
+                            margin-left: 14px;
                             h1{
                                 margin: 0;
                                 color: #fff;
@@ -626,10 +629,10 @@ hr {
                        .cardImg{
                         display: flex;
                         align-items: center;
-                        margin-top: 30px;
+                        margin-top: 40px;
                         gap: 8px;
                         img{
-                            width: 50px;
+                            width: 38px;
                             height: auto;
                         }
                        }
@@ -643,9 +646,10 @@ hr {
                         display: flex;
                         align-items: center;                     
                         margin-top: 15px;
-                       
+                        gap: 10px;
                         .cardTitle1{                          
                             margin-left: 15px;
+                           
                             h1{
                                 margin: 0;
                                 color: #fff;
@@ -663,14 +667,24 @@ hr {
                             }
                         }
                        .cardImg1{
-                        display: flex;
-                        align-items: center;
-                        margin-top: 30px;
+                        display: flex;   
+                        align-items: center;  
+                        justify-content: center;                   
+                        margin-top: 40px;
                         gap: 8px;
+                     
+                    .unionPay  {
                         img{
-                            width: 50px;
+                            width: 26px;
                             height: auto;
                         }
+                    }
+                    .Alipay{
+                        img{
+                            width: 48px;
+                            height: auto;
+                        }
+                    }
                        }
                     }
                     .cardList2 {
@@ -682,6 +696,7 @@ hr {
                         display: flex;
                         align-items: center;
                         margin-top: 15px;
+                        gap: 10px;
                         .cardTitle2{                          
                             margin-left: 12px;
                             h1{
@@ -690,7 +705,7 @@ hr {
                             }
                         }
                         .cardText2{
-                            margin-left: 15px;
+                            margin-left: 10px;
                             p{
                                 color: #fff;
                                 margin: 0;

vue.config.js

@@ -6,38 +6,28 @@ const postcssPxToRem = require("postcss-pxtorem")
 // }
 
 module.exports = defineConfig({
-  transpileDependencies: true,
+
   publicPath: './',
-  // lintOnSave:false,
-  // devServer:{
-  //   host:'0.0.0.0',
-  //   port:8080,
-  //   client:{
-  //     webSocketURL:'ws://0.0.0.0:8080/ws',      
-  //   },
-  //   headers:{
-  //     'Accept-Control-Allow-Origin':'*',
-  //   }
-  // },
+
   chainWebpack: config => {
     //svg图标加载
     config.module
       .rule('svg')
       .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
-      //.exclude.add(resolve('src/icons'))
+     
       .end()
 
     config.module
-      .rule('icons')//定义一个名叫icons的规则
-      .test(/\.svg$/)//设置icons的匹配正则
-      //设置当前规则的作用目录，只在当前目录下才执行当前规则 
+      .rule('icons')
+      .test(/\.svg$/)
+      
       .include.add(path.join(__dirname, 'src/assets/icons'))
-      //   .include.add(resolve('src/icons'))
+      
       .end()
-      .use('svg-sprite-loader')//指定一个命叫svg-sprite的loader配置
-      .loader('svg-sprite-loader')//改配置使用svg-sprite-loader作为处理loader
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
       .options({
-        // 该 svg-sprite-loader 的配置
+      
         symbolId: 'icon-[name]'
       })
       .end()