✨ feat(indexChoose): 添加轮播图

package.json

@@ -15,9 +15,9 @@
     "layui": "^2.9.7",
     "postcss-pxtorem": "^6.1.0",
     "svg-sprite-loader": "^6.0.11",
-    "swiper": "^11.0.7",
-    "vant": "^2.13.2",
+    "swiper": "^5.4.5",
     "vue": "^2.6.14",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.5.1",
     "vuelidate": "^0.7.7"
   },

src/components/headTop.vue

@@ -6,7 +6,7 @@
       </div>
 
       <nav class="header-link-wrap">
-        <router-link class="header-link" v-for="link in links" :to="link.path" active-class="header-link-active">{{
+        <router-link class="header-link" v-for="(link,i) in links" :key="i" :to="link.path" active-class="header-link-active">{{
         link.name }}</router-link>
       </nav>
 
@@ -28,7 +28,7 @@
       <router-link class="header-tool" to="/ContactUs">Sign up</router-link>
     </div>
     <div class="header-menu-wrap" v-if="isShowMenu">
-      <div class="header-link" @click="toggleMenu(link.path)" v-for="link in links" :to="link.path"
+      <div class="header-link" @click="toggleMenu(link.path)" v-for="(link,i) in links" :key="i" :to="link.path"
         active-class="header-link-active">{{
         link.name }}</div>
       <div class="header-tool" @click="toggleMenu('/ContactUs')" to="/ContactUs">Sign up</div>

src/components/indexChoose.vue

@@ -1,44 +1,87 @@
 <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 class="choose-title">
+            <h2>Why Choose TrustyPay?</h2>
+        </div>
+
+        <div class="chooseList">
+            <div class="greenBox" v-for="(item, index) in chooseList" :key="index">
+                <div class="greenItem"><svg-icon :icon-class="item.icon" class="icon" /></div>
+                <div class="greenText" v-html="item.text"></div>
             </div>
-      
+        </div>
+        <div class="swiper-wrap">
+            <swiper class="swiper" :options="swiperOption">
+                <swiper-slide class="swiper-item" v-for="(item, index) in chooseList" :key="index">
+                    <div class="greenBox">
+                        <div class="greenItem"><svg-icon :icon-class="item.icon" class="icon" /></div>
+                        <div class="greenText" v-html="item.text"></div>
+                    </div>
+                </swiper-slide>
+                <div class="swiper-button-prev" slot="button-prev"></div>
+                <div class="swiper-button-next" slot="button-next"></div>
+            </swiper>
+
+        </div>
     </div>
 </template>
 <script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
 
+export default {
+    name: 'swiper-example-navigation',
+    title: 'Navigation',
+    components: {
+        Swiper,
+        SwiperSlide
+    },
+    data() {
+        return {
+            swiperOption: {
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev'
+                },
+                loop: true,
+            },
+            chooseList: [
+                {
+                    icon: 'choose1',
+                    text: `Local POC & team Business Growth and support`
+                },
+                {
+                    icon: 'choose2',
+                    text: `Small to Medium Enterprises focus`
+                },
+                {
+                    icon: 'choose3',
+                    text: `Payments made
+                           simple`,
+                },
+                {
+                    icon: 'choose4',
+                    text: `Reliability through
+                           Proven ANz Worldline
+                           Solutions`
+                },
+                {
+                    icon: 'choose5',
+                    text: `Competitive
+                           pricing`
+                }
+            ]
+        }
+    }
+}
 </script>
 <style lang="less" scoped>
-
 .choose-content {
     margin-top: 100px;
-    
+
     margin: 0 auto;
+
     .choose-title {
         text-align: center;
 
@@ -53,44 +96,73 @@
         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;
-                }
+    .greenBox {
+        width: 200px;
 
-            }
+        .greenItem {
+            margin: 0 auto;
+            width: 130px;
+            height: 130px;
+            border-radius: 50%;
+            background: #a7de50;
 
-            .greenText {
-                margin: 0 auto;
-                text-align: center;
-                color: #527410;
-                padding: 20px 0px;
-                line-height: 22px;
+            .icon {
+                width: 60px;
+                height: 60px;
+                padding: 35px 35px;
             }
+
         }
 
+        .greenText {
+            margin: 0 auto;
+            text-align: center;
+            color: #527410;
+            padding: 20px 0px;
+            line-height: 22px;
+        }
     }
 }
 
+.swiper-wrap {
+    display: none
+}
+
+
 @media screen and (max-width: 767px) {
-    .choose-title{
-        h2{
+    .choose-title {
+        h2 {
             font-size: 36px !important;
             line-height: 38.88px;
         }
     }
+
+    .choose-content {
+        .chooseList {
+            display: none;
+        }
+    }
+
     
+
+    .swiper-wrap {
+        position: relative;
+        height: 300px;
+        display: block;
+
+        .swiper {
+            height: 300px;
+
+            &-item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+
+
 }
 </style>

src/main.js

@@ -14,6 +14,7 @@ import { emailConfig } from './utils/config';
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 
+
 function setRem() {
   const clientWidth = document.body.clientWidth
   const screenWidth = clientWidth > 900 ? 1920 : 375