.

src/components/Panel.vue

@@ -236,4 +236,10 @@
   .sbuBtn{
     margin: 15px 120px;
   }
+
+  @media (max-width: 767px) {
+    .panel-container{
+      display: none;
+    }
+  }
   </style>

src/components/indexAccept.vue

@@ -0,0 +1,78 @@
+<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>
+
+            </div>
+</template>
+
+<script>
+
+</script>
+
+<style lang="less" scoped>
+
+.accept {
+    margin: auto;    
+    height: auto;   
+    border-radius: 30px;
+    margin-top: 280px;
+
+    .accept-title {
+        h2 {
+            margin: 0;
+            font-size: 44px;
+            color: #1a5271;
+            padding: 70px 0;
+            text-align: center;
+        }
+    }
+    .accept-logo{        
+        .accept-row1{
+            display: flex;
+            align-items: center;
+            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{
+            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;}}
+        }
+    }
+}
+</style>

src/components/indexOffer.vue

@@ -63,157 +63,209 @@
 </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;
-                    }
+.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;
                 }
+            }
 
-                .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;
-                        }
+            .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;
                     }
-                    .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;
-                            }
-                        }
+                }
 
+                .Alipay {
+                    img {
+                        width: 48px;
+                        height: auto;
                     }
                 }
-            }  
- @media (max-width: 767px) {
-    
-   
-}
+            }
+        }
+
+        .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) {
+ .cardList{
+    width: 344px !important;
+    height: 211px !important;
+    display: block !important;  
+    h1{
+       font-size: 48px;
+       line-height: 72px;
+    } 
+ }
+ .cardList1{
+    width: 344px !important;
+    height: 211px !important;
+    display: block !important; 
+    h1{
+       font-size: 48px;
+       line-height: 72px;
+    } 
+ }
+ .cardList2{
+    width: 344px !important;
+    height: 211px !important;
+    display: block !important; 
+    h1{
+       font-size: 48px;
+       line-height: 72px;
+    }    
+ }
+}
 </style>

src/views/index.vue

@@ -40,31 +40,7 @@
             </div>
 
             <!-- 图标 -->
-            <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>
-
-            </div>
+            <div></div>
 
             <!-- why choose trustyPay -->
             <div class="mainContent8">
@@ -416,6 +392,7 @@ import Sales from '@/components/Sales.vue';
 import indexOffer from '@/components/indexOffer'
 
 
+
 export default {
     name: 'index',
     components: {
@@ -437,10 +414,10 @@ export default {
     },
     created() {
         // 获取window的宽度
-        let width = window.innerWidth;
-        if (width < 768) {
-            window.confirm('We are currently undergoing maintenance for the adaptive functions on the mobile end. We apologize for any inconvenience caused.');
-        }
+        // let width = window.innerWidth;
+        // if (width < 768) {
+        //     window.confirm('We are currently undergoing maintenance for the adaptive functions on the mobile end. We apologize for any inconvenience caused.');
+        // }
     },
 
     methods: {
@@ -546,52 +523,7 @@ hr {
 
 }
 
-// 图标
-.accept {
-    margin: auto;
-    // width: 1200px;
-    height: auto;
-    // background: #f5f7f5;
-    border-radius: 30px;
-    margin-top: 280px;
 
-    .accept-title {
-        h2 {
-            margin: 0;
-            font-size: 44px;
-            color: #1a5271;
-            padding: 70px 0;
-            text-align: center;
-        }
-    }
-    .accept-logo{        
-        .accept-row1{
-            display: flex;
-            align-items: center;
-            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{
-            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;}}
-        }
-    }
-}
 
 .mainContent {
     margin: 0 auto;
@@ -1038,18 +970,33 @@ hr {
 /* 小屏幕 */
 @media (max-width: 767px) {
     .bannerBg{
+        height: auto !important;
         
         .leftHead{
             text-align: center;
             h1{
-                font-size: 36px;
-                line-height: 38.88px;
+                font-size: 36px !important;
+                line-height: 38.88px !important;
+            }
+            p{
+                font-size: 24px !important;
+                line-height: 36px !important;
+            }
+        }
+        .leftContent{
+            p{
+                font-size: 16px!important;
+                line-height: 24px !important;
+                margin-top: -270px;
             }
         }
+        .saleBtn{
+           margin: 30px 0;
+        }
         .client-group{
             display: block !important;
             img{
-                width: 392px;
+                width: 400px;
             
             }
         
@@ -1063,11 +1010,6 @@ hr {
     }
    
  
-    .buttonMenu{
-        height:auto;
-    }
-  .buttonText {
-   display: inline;
-  }
+
 }
 </style>