瀏覽代碼

swiper分页使用数字

yunxing 4 年之前
父節點
當前提交
a8ff288d2a
共有 1 個文件被更改,包括 7 次插入5 次删除
  1. 7 5
      src/components/equipmentFacilities/MSwiper.vue

+ 7 - 5
src/components/equipmentFacilities/MSwiper.vue

@@ -48,8 +48,9 @@ export default {
                 pagination: {
                     el: '.swiper-pagination',
                     clickable: false,
-                    bulletClass: 'my-bullet',
-                    bulletActiveClass: 'my-bullet-active',
+                    type: 'fraction',
+                    // bulletClass: 'my-bullet',
+                    // bulletActiveClass: 'my-bullet-active',
                 },
                 on: {
                     click: function (event) {
@@ -128,6 +129,8 @@ export default {
     justify-content: center;
     align-items: flex-end;
     flex-wrap: wrap;
+    color: #025baa;
+    font-size: 14px;
 }
 .active {
     background: #025baa !important;
@@ -136,7 +139,6 @@ export default {
 /deep/ .my-bullet {
     width: 0.21333rem;
     height: 0.21333rem;
-
     border-radius: 100%;
     background: #80add4;
     opacity: 0.2;
@@ -148,7 +150,7 @@ export default {
 /deep/ .my-bullet:nth-child(3) {
     display: inline-block;
 }
-.my-bullet-active {
-    background: #025baa;
+/deep/ .my-bullet-active {
+    background: #80add4;
 }
 </style>