Преглед на файлове

引入轮播组件,vue-awesome-swiper

yunxing преди 4 години
родител
ревизия
b633142fb8
променени са 2 файла, в които са добавени 72 реда и са изтрити 104 реда
  1. 0 94
      src/components/MSwiper.vue
  2. 72 10
      src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

+ 0 - 94
src/components/MSwiper.vue

@@ -1,94 +0,0 @@
-<template>
-    <swiper class='swiper' :options='swiperOption'>
-        <swiper-slide>1-2AA1-11</swiper-slide>
-        <swiper-slide>1-2AA1-112</swiper-slide>
-        <swiper-slide>1-2AA1-113</swiper-slide>
-        <swiper-slide>1-2AA1-114</swiper-slide>
-        <swiper-slide>1-2AA1-115</swiper-slide>
-        <swiper-slide>1-2AA1-116</swiper-slide>
-        <swiper-slide>1-2AA1-117</swiper-slide>
-        <swiper-slide>1-2AA1-118</swiper-slide>
-        <swiper-slide>1-2AA1-119</swiper-slide>
-        <swiper-slide>1-2AA1-1110</swiper-slide>
-        <swiper-slide>1-2AA1-1111</swiper-slide>
-        <swiper-slide>1-2AA1-1112</swiper-slide>
-        <swiper-slide>1-2AA1-1113</swiper-slide>
-        <swiper-slide>1-2AA1-1114</swiper-slide>
-        <swiper-slide>1-2AA1-1115</swiper-slide>
-        <swiper-slide>1-2AA1-1116</swiper-slide>
-        <swiper-slide>1-2AA1-1117</swiper-slide>
-        <swiper-slide>1-2AA1-1118</swiper-slide>
-        <swiper-slide>1-2AA1-1119</swiper-slide>
-        <swiper-slide>1-2AA1-1120</swiper-slide>
-        <div class='swiper-pagination' slot='pagination'></div>
-    </swiper>
-</template>
-
-<script>
-import Vue from 'vue'
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
-import 'swiper/swiper-bundle.css'
-export default {
-    components: {
-        Swiper,
-        SwiperSlide,
-    },
-    directives: {
-        swiper: directive,
-    },
-    data() {
-        return {
-            swiperOption: {
-                slidesPerView: 3,
-                // slidesPerGroup: 3,
-                slidesPerColumn: 5,
-                spaceBetween: 10,
-                slidesPerColumnFill: 'row',
-                pagination: {
-                    el: '.swiper-pagination',
-                    clickable: true,
-                },
-                // autoplay: {
-                //     //自动播放
-                //     delay: 1500,
-                //     disableOnInteraction: false,
-                // },
-                // speed: 1500, //播放速度
-            },
-        }
-    },
-}
-</script>
-
-<style lang="less" scoped>
-.swiper {
-    max-height: 300px;
-    width: 100%;
-    .swiper-slide {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        font-weight: bold;
-        font-size: 14px;
-        background: #ebeded;
-    }
-}
-
-.swiper {
-    max-height: 300px;
-    margin-left: auto;
-    margin-right: auto;
-    .swiper-slide {
-        height: 30px;
-    }
-}
-.swiper-pagination {
-    position: relative;
-    bottom: 0;
-    height: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-</style>

+ 72 - 10
src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

@@ -8,7 +8,29 @@
             <van-search class='equipment-search' v-model='keyword' placeholder='请输入抽屉编号/控制回路/楼层' @search='onSearch'></van-search>
         </div>
         <div class='card-container'>
-            <m-swiper></m-swiper>
+            <swiper class='swiper' :options='swiperOption'>
+                <swiper-slide>1-2AA1-11</swiper-slide>
+                <swiper-slide>1-2AA1-112</swiper-slide>
+                <swiper-slide>1-2AA1-113</swiper-slide>
+                <swiper-slide>1-2AA1-114</swiper-slide>
+                <swiper-slide>1-2AA1-115</swiper-slide>
+                <swiper-slide>1-2AA1-116</swiper-slide>
+                <swiper-slide>1-2AA1-117</swiper-slide>
+                <swiper-slide>1-2AA1-118</swiper-slide>
+                <swiper-slide>1-2AA1-119</swiper-slide>
+                <swiper-slide>1-2AA1-1110</swiper-slide>
+                <swiper-slide>1-2AA1-1111</swiper-slide>
+                <swiper-slide>1-2AA1-1112</swiper-slide>
+                <swiper-slide>1-2AA1-1113</swiper-slide>
+                <swiper-slide>1-2AA1-1114</swiper-slide>
+                <swiper-slide>1-2AA1-1115</swiper-slide>
+                <swiper-slide>1-2AA1-1116</swiper-slide>
+                <swiper-slide>1-2AA1-1117</swiper-slide>
+                <swiper-slide>1-2AA1-1118</swiper-slide>
+                <swiper-slide>1-2AA1-1119</swiper-slide>
+                <swiper-slide>1-2AA1-1120</swiper-slide>
+                <div class='swiper-pagination' slot='pagination'></div>
+            </swiper>
         </div>
         <div class='info-container'>
             <div class='border'></div>
@@ -46,28 +68,38 @@
 import Vue from 'vue'
 import { NavBar, Search } from 'vant'
 Vue.use(NavBar).use(Search)
-// import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
-// import 'swiper/swiper.less'
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
 import MSwiper from '../../components/MSwiper.vue'
 export default {
     name: 'LowVoltageCabinetDetail',
     props: {},
-    // components: { Swiper, SwiperSlide },
-    components: { MSwiper },
-    // directives: {
-    //     swiper: directive,
-    // },
+    components: {
+        Swiper,
+        SwiperSlide,
+    },
+    directives: {
+        swiper: directive,
+    },
     data() {
         return {
             keyword: '',
             swiperOption: {
                 slidesPerView: 3,
-                slidesPerColumn: 2,
-                spaceBetween: 30,
+                // slidesPerGroup: 3,
+                slidesPerColumn: 5,
+                spaceBetween: 10,
+                slidesPerColumnFill: 'row',
                 pagination: {
                     el: '.swiper-pagination',
                     clickable: true,
                 },
+                // autoplay: {
+                //     //自动播放
+                //     delay: 1500,
+                //     disableOnInteraction: false,
+                // },
+                // speed: 1500, //播放速度
             },
             control: '',
             drawernum: '',
@@ -126,6 +158,36 @@ export default {
         margin-top: 12px;
         padding: 20px 15px 0 15px;
         background: #fff;
+        .swiper {
+            max-height: 300px;
+            width: 100%;
+            .swiper-slide {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                text-align: center;
+                font-weight: bold;
+                font-size: 14px;
+                background: #ebeded;
+            }
+        }
+
+        .swiper {
+            max-height: 300px;
+            margin-left: auto;
+            margin-right: auto;
+            .swiper-slide {
+                height: 30px;
+            }
+        }
+        .swiper-pagination {
+            position: relative;
+            bottom: 0;
+            height: 30px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
     .info-container {
         padding: 15px;