✨ feat(index): 自定义滑动

src/components/indexOffer.vue

@@ -240,68 +240,83 @@
 }
 
 @media (max-width: 767px) {
+    .offerCard {
+        max-width: 100%;
+    }
     .greenCard {
         text-align: center;
         padding: 0 16px;
     }
- .cardList{
-    width: 344px !important;
-    height: 211px !important;
-    display: block !important;  
-    .cardTitle{
-        margin-left: 0px !important;
-         h1{
-       font-size: 48px;
-       line-height: 72px;
-       padding-top: 10px;
-    }   
-    }
-    .cardText{
-        margin-left: 0px !important;
-    }
- 
-    .cardImg{
-        justify-content: center;
-        margin-top: 20px !important;
-    }
- }
- .cardList1{
-    width: 344px !important;
-    height: 211px !important;
-    display: block !important; 
-    .cardTitle1{
-        margin-left: 0px !important;
-         h1{
-       font-size: 48px;
-       line-height: 72px;
-       padding-top: 10px;
-    }   
-    }
-    .cardText1{
-        margin-left: 0px !important;
-        line-height: 40px;
+
+    .cardList {
+        width: 344px !important;
+        height: 211px !important;
+        display: block !important;
+
+        .cardTitle {
+            margin-left: 0px !important;
+
+            h1 {
+                font-size: 48px;
+                line-height: 72px;
+                padding-top: 10px;
+            }
+        }
+
+        .cardText {
+            margin-left: 0px !important;
+        }
+
+        .cardImg {
+            justify-content: center;
+            margin-top: 20px !important;
+        }
     }
-    .cardImg1{
-        justify-content: center;
-        margin-top: 10px !important;
+
+    .cardList1 {
+        width: 344px !important;
+        height: 211px !important;
+        display: block !important;
+
+        .cardTitle1 {
+            margin-left: 0px !important;
+
+            h1 {
+                font-size: 48px;
+                line-height: 72px;
+                padding-top: 10px;
+            }
+        }
+
+        .cardText1 {
+            margin-left: 0px !important;
+            line-height: 40px;
+        }
+
+        .cardImg1 {
+            justify-content: center;
+            margin-top: 10px !important;
+        }
     }
- }
- .cardList2{
-    width: 344px !important;
-    height: 211px !important;
-    display: block !important; 
-    .cardTitle2{
-        margin-left: 0px !important;
-         h1{
-       font-size: 48px;
-       line-height: 72px;
-       padding-top: 10px;
-    }   
-    } 
-    .cardText2{
-        margin-left: 0px !important;
-        line-height: 40px;
+
+    .cardList2 {
+        width: 344px !important;
+        height: 211px !important;
+        display: block !important;
+
+        .cardTitle2 {
+            margin-left: 0px !important;
+
+            h1 {
+                font-size: 48px;
+                line-height: 72px;
+                padding-top: 10px;
+            }
+        }
+
+        .cardText2 {
+            margin-left: 0px !important;
+            line-height: 40px;
+        }
     }
- }
-}
-</style>
+}</style>

src/components/indexTerminals.vue

@@ -1,122 +1,122 @@
 <template>
-    <div class="mainContent">        
-            <div class="title">
-                <h2>Durable and Easy-to-use <br/>
+    <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="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 class="right">
+                <div class="bg-b">
+                    <svg-icon icon-class="puzzle" class="icon" />
+                    Standalone or Integrated
                 </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 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 class="swiper-wrap">
-                <swiper class="swiper" :options="swiperOption">
-                    <swiper-slide class="swiper-item">
+        <div class="swiper-wrap">
+            <swiper class="swiper" ref="swiper"  :options="swiperOption">
+                <swiper-slide class="swiper-item">
                     <div class="left">
-                    <div class="bg-b">
-                        <svg-icon icon-class="contactless" class="icon" />
-                       <p>Contactless</p> 
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="payments" class="icon" />
-                        <p>Mobile Payments</p>
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="touch" class="icon" />
-                        <p>Multimedia touch screen 3.5"</p>
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="printer" class="icon" />
-                        <p>Printer</p>
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="4G" class="icon" />
-                        <p>4G, Wi-Fi, Ethernet & Bluetooth</p>
-                    </div>
-                </div>
-                    </swiper-slide>
-                    <swiper-slide class="swiper-item">
-                        <div class="right">
-                    <div class="bg-b">
-                        <svg-icon icon-class="puzzle" class="icon" />
-                        <p>Standalone or Integrated</p>
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="security" class="icon" />
-                        <p>Password enabled security features</p>                        
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="usd" class="icon" />
-                        <p>Surcharging and Tipping</p>
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="network" class="icon" />
-                        <p>Multi-Network Card Routing</p>
-                    </div>
-                    <div class="bg-b">
-                        <svg-icon icon-class="conversion" class="icon" />
-                       <p>Dynamic Currency Conversion</p> 
+                        <div class="bg-b">
+                            <svg-icon icon-class="contactless" class="icon" />
+                            <p>Contactless</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="payments" class="icon" />
+                            <p>Mobile Payments</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="touch" class="icon" />
+                            <p>Multimedia touch screen 3.5"</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="printer" class="icon" />
+                            <p>Printer</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="4G" class="icon" />
+                            <p>4G, Wi-Fi, Ethernet & Bluetooth</p>
+                        </div>
                     </div>
+                </swiper-slide>
+                <swiper-slide class="swiper-item">
+                    <div class="right">
+                        <div class="bg-b">
+                            <svg-icon icon-class="puzzle" class="icon" />
+                            <p>Standalone or Integrated</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="security" class="icon" />
+                            <p>Password enabled security features</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="usd" class="icon" />
+                            <p>Surcharging and Tipping</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="network" class="icon" />
+                            <p>Multi-Network Card Routing</p>
+                        </div>
+                        <div class="bg-b">
+                            <svg-icon icon-class="conversion" class="icon" />
+                            <p>Dynamic Currency Conversion</p>
+                        </div>
                     </div>
                 </swiper-slide>
-               
-                <div class="swiper-button-prev" slot="button-prev"></div>
-                <div class="swiper-button-next" slot="button-next"></div>
-                                
-                </swiper>
+            </swiper>
+            <div class="swiper-custom ">
+                <i class="el-icon-arrow-left" @click="
+                    $refs.swiper.$swiper.slidePrev()
+                "></i>
+                <i class="el-icon-arrow-right" @click="
+                    $refs.swiper.$swiper.slideNext()
+                " ></i>
             </div>
-
-
         </div>
- 
-
+    </div>
 </template>
 
 <script>
@@ -127,21 +127,22 @@ export default {
     name: 'swiper-example-navigation',
     title: 'Navigation',
     components: {
-      SvgIcon,
-      Swiper,
-      SwiperSlide
+        SvgIcon,
+        Swiper,
+        SwiperSlide
     },
     data() {
-      return {
-        swiperOption: {
-          navigation: {
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev'
-          }
+        return {
+            swiperOption: {
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev'
+                },
+                loop: true,
+            }
         }
-      }
     }
-  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -167,11 +168,12 @@ export default {
     }
 
 
-    .list-icon{
+    .list-icon {
         display: flex;
         justify-content: center;
         gap: 40px;
-        .bg-b{
+
+        .bg-b {
             margin-top: 26px;
             width: 400px;
             height: 70px;
@@ -180,72 +182,90 @@ export default {
             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;
-                }
+
+            .icon {
+                width: 40px;
+                height: 40px;
+                padding: 0px 20px;
+            }
         }
     }
 }
-.swiper-wrap{
+
+.swiper-wrap,.swiper-custom {
     display: none;
 }
 
-@media screen and (max-width: 767px){
-.title{
-    h2{
-        font-size: 36px !important;
-        line-height: 38.88px;
+@media screen and (max-width: 767px) {
+    .title {
+        h2 {
+            font-size: 36px !important;
+            line-height: 38.88px;
+        }
     }
-}
-.subhead{
-    font-size: 24px;
-    line-height: 36px;
-}
-.list-icon{
-    display: none !important;
-}
-.swiper-wrap{
-    display: block;
-    .left{
-        margin-bottom: 15px;
-        padding: 0 14px;
+
+    .subhead {
+        font-size: 24px;
+        line-height: 36px;
     }
-    .right{
-        padding: 0 14px;
+
+    .list-icon {
+        display: none !important;
     }
-    .bg-b{
-        display: flex;
-        align-items: center;
-        margin-top: 26px;
-        width: 348px;
-        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;
-        p{
-            line-height: 20px;
+
+    .swiper-wrap {
+        display: block;
+        width: 100%;
+        .left {
+            margin-bottom: 15px;
+            padding: 0 14px;
         }
-        .icon {
-        width: 40px;
-        height: 40px;
-        padding: 0px 20px;
-        } 
-    }
-        .swiper-button-prev:after{
+
+        .right {
+            padding: 0 14px;
+        }
+
+        .bg-b {
+            display: flex;
+            align-items: center;
+            margin-top: 26px;
+            width: 348px;
+            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;
+
+            p {
+                line-height: 20px;
+            }
+
+            .icon {
+                width: 40px;
+                height: 40px;
+                padding: 0px 20px;
+            }
+        }
+
+        .swiper-button-prev:after {
             font-size: 20px;
             font-weight: 800;
             color: #005372;
         }
-        .swiper-button-next:after{
+
+        .swiper-button-next:after {
             font-size: 20px;
             font-weight: 800;
             color: #005372;
         }
-}
-    
-}
-</style>
+    }
+
+    .swiper-custom {
+        padding-top: 16px;
+        display: flex;
+        justify-content: center;
+        font-size: 34px;
+    }
+
+}</style>

src/views/index.vue

@@ -853,7 +853,7 @@ hr {
     }
 .buttonContainer{
     .bgImage{
-        width: 380px;
+        width: 100%;
         height: 584px;
         background: url(@/assets/index/BottomImage.png) no-repeat;
         background-position: -700px 0px;