@fonixtree/magic-design 2.0.43 → 2.0.45

package/es/composite-comp/bol/components/Banner/mobile/index.js

@@ -211,7 +211,10 @@ function (_super) {
         onClick: function onClick() {
           /** PTO 定制GA */
           if (window.magicDesign.pushGA) {
-            window.magicDesign.pushGA({}, 'select_promotion');
+            window.magicDesign.pushGA({}, 'select_promotion', {
+              event_label: (0, _ConfigPanel.getSecondConfigName)(data, item.id),
+              promotion_name: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+            });
           }
         },
         onMouseEnter: _this.mouseEnterWrap,

package/es/composite-comp/bol/components/Wallet/mobile/index.js

@@ -7,10 +7,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactSlick = _interopRequireDefault(require("react-slick"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react2 = require("swiper/react");
+
+var _modules = require("swiper/modules");
+
 var _components = require("../../../../../meta-comp/components");
 
 var _mobx = require("../../../../../mobx");
@@ -27,12 +29,14 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
 
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
+require("swiper/css");
+
+require("swiper/css/effect-cards");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -243,7 +247,7 @@ function (_super) {
       sliderIndex: 0,
       userWalletData: {}
     };
-    _this.sliderRef = null;
+    _this.swiperRef = null;
     _this.destroy = null;
 
     _this.getMyWalletData = function () {
@@ -306,12 +310,12 @@ function (_super) {
               //   defaultShowWallet: 'Balance',
               // };
 
-              if (data.customize.layout === 'layout2' && this.sliderRef) {
+              if (data.customize.layout === 'layout2' && this.swiperRef) {
                 defaultShowIndex_1 = 0;
                 data.groupSource.forEach(function (f, i) {
                   if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
                 });
-                this.sliderRef.slickGoTo(defaultShowIndex_1);
+                this.swiperRef.slideTo(defaultShowIndex_1);
               }
 
               bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
@@ -384,7 +388,7 @@ function (_super) {
       });
 
       if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
-        _this.sliderRef.slickGoTo(nextIndex);
+        _this.swiperRef.slideTo(nextIndex);
       }
     };
 
@@ -396,26 +400,30 @@ function (_super) {
 
     this.getMyWalletData();
     this.destroy = (0, _mobx.autorun)(function () {
-      if (_this.props.data.customize.layout === 'layout2' && _this.sliderRef) {
+      var _a;
+
+      if (_this.props.data.customize.layout === 'layout2' && _this.swiperRef) {
         _this.sliderGoTo(_this.props.data.groupSource);
         /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
 
         if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-          _this.sliderRef.slickPause();
+          (_a = _this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
         }
       }
     });
   };
 
   WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
-    if (nextProps.data.customize.layout === 'layout2' && this.sliderRef) {
+    var _a, _b;
+
+    if (nextProps.data.customize.layout === 'layout2' && this.swiperRef) {
       this.sliderGoTo(nextProps.data.groupSource);
 
       if (nextProps.data.setting.autoplay.open) {
-        this.sliderRef.slickPlay();
+        (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.start();
       } else {
-        this.sliderRef.slickPause();
+        (_b = this.swiperRef.autoplay) === null || _b === void 0 ? void 0 : _b.stop();
       }
     }
   };
@@ -423,37 +431,20 @@ function (_super) {
   WalletMobile.prototype.render = function () {
     var _this = this;
 
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
 
     var data = this.props.data;
     var sliderIndex = this.state.sliderIndex;
     var colNum = data.customize.rowNum;
-    var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
     if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-      autoplay = false;
+      (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
     }
 
-    var settings = {
-      className: 'slider-wrap',
-      arrows: false,
-      dots: false,
-      autoplay: autoplay,
-      autoplaySpeed: ((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.autoplay) === null || _d === void 0 ? void 0 : _d.interval) * 1000,
-      speed: 500,
-      draggable: window.magicDesign.mode === 'renderer',
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      beforeChange: function beforeChange(oldIndex, newIndex) {
-        _this.setState({
-          sliderIndex: newIndex
-        });
-      }
-    };
     var navStyle = {
-      fontSize: (0, _commonUtil.convertToRem)((_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.size),
-      color: (_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.navigation) === null || _h === void 0 ? void 0 : _h.color
+      fontSize: (0, _commonUtil.convertToRem)((_c = (_b = data.setting) === null || _b === void 0 ? void 0 : _b.navigation) === null || _c === void 0 ? void 0 : _c.size),
+      color: (_e = (_d = data.setting) === null || _d === void 0 ? void 0 : _d.navigation) === null || _e === void 0 ? void 0 : _e.color
     };
 
     var getItemContent = function getItemContent(item, preItem, nextItem) {
@@ -567,42 +558,54 @@ function (_super) {
       style: (0, _commonUtil.pxToRem)({
         gap: MOBILE_IMG_SIZE[colNum].gap
       })
-    }, data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
+    }, data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap",
         style: (0, _commonUtil.pxToRem)({
           width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
         })
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item));
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       className: "carousel-layout"
     }, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
-        return _this.sliderRef.slickPrev();
+        return _this.swiperRef.slidePrev();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-left"
-    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
-      ref: function ref(slider) {
-        return _this.sliderRef = slider;
-      }
-    }, settings), data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
-      return /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
+      autoplay: {
+        delay: ((_g = (_f = data.setting) === null || _f === void 0 ? void 0 : _f.autoplay) === null || _g === void 0 ? void 0 : _g.interval) * 1000
+      },
+      effect: "cards",
+      loop: true,
+      modules: [_modules.EffectCards, _modules.Autoplay],
+      onSlideChange: function onSlideChange(swiper) {
+        return _this.setState({
+          sliderIndex: swiper.realIndex || 0
+        });
+      },
+      onSwiper: function onSwiper(swiper) {
+        return _this.swiperRef = swiper;
+      },
+      slidesPerView: 1
+    }, data.groupSource.map(function (item, index) {
+      var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
+      var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
+      var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
+      var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, null, /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap"
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item, preItem, nextItem)));
     })), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-right",
       onClick: function onClick() {
-        return _this.sliderRef.slickNext();
+        return _this.swiperRef.slideNext();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
@@ -617,7 +620,7 @@ function (_super) {
           active: i == sliderIndex
         }),
         onClick: function onClick() {
-          return _this.sliderRef.slickGoTo(i);
+          return _this.swiperRef.slideTo(i);
         },
         style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,

package/es/composite-comp/bol/components/Wallet/mobile/index.less

@@ -8,14 +8,14 @@
   justify-content: center;
   flex-wrap: wrap;
   border-radius: 0.2rem;
-  padding: 0.4rem 0.8rem 1.8rem 0.8rem;
+  padding: 0.2rem 0.8rem 1.3rem 0.8rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .wallet-btn {
-  margin-top: 0.4rem;
+  margin-top: 0.2rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .peek {
   position: absolute;
-  bottom: 0.32rem;
+  bottom: 0.16rem;
   width: 1.2rem !important;
   white-space: nowrap;
 }
@@ -28,9 +28,10 @@
 .m-Wallet-mobile .column-layout {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 }
 .m-Wallet-mobile .column-layout .text-content {
-  padding: 0.2rem 0 0.4rem 0;
+  padding: 0.2rem 0 0.2rem 0;
 }
 .m-Wallet-mobile .column-layout .text-content .wallet-btn {
   margin-top: 0.2rem;
@@ -44,6 +45,10 @@
 .m-Wallet-mobile .column-layout .text-content .peek.right {
   right: 0.32rem;
 }
+.m-Wallet-mobile .carousel-layout {
+  position: relative;
+  min-height: 4.8rem;
+}
 .m-Wallet-mobile .carousel-layout .slick-track {
   display: flex;
   justify-content: center;
@@ -65,14 +70,16 @@
   bottom: 0;
   margin: auto;
   cursor: pointer;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban {
   position: absolute;
   width: 100%;
-  bottom: 0.8rem;
+  bottom: 0.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban .ban {
   font-size: 0.16rem;

package/lib/composite-comp/bol/components/Banner/mobile/index.js

@@ -211,7 +211,10 @@ function (_super) {
         onClick: function onClick() {
           /** PTO 定制GA */
           if (window.magicDesign.pushGA) {
-            window.magicDesign.pushGA({}, 'select_promotion');
+            window.magicDesign.pushGA({}, 'select_promotion', {
+              event_label: (0, _ConfigPanel.getSecondConfigName)(data, item.id),
+              promotion_name: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+            });
           }
         },
         onMouseEnter: _this.mouseEnterWrap,

package/lib/composite-comp/bol/components/Wallet/mobile/index.js

@@ -7,10 +7,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactSlick = _interopRequireDefault(require("react-slick"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react2 = require("swiper/react");
+
+var _modules = require("swiper/modules");
+
 var _components = require("../../../../../meta-comp/components");
 
 var _mobx = require("../../../../../mobx");
@@ -27,12 +29,14 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
 
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
+require("swiper/css");
+
+require("swiper/css/effect-cards");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -243,7 +247,7 @@ function (_super) {
       sliderIndex: 0,
       userWalletData: {}
     };
-    _this.sliderRef = null;
+    _this.swiperRef = null;
     _this.destroy = null;
 
     _this.getMyWalletData = function () {
@@ -306,12 +310,12 @@ function (_super) {
               //   defaultShowWallet: 'Balance',
               // };
 
-              if (data.customize.layout === 'layout2' && this.sliderRef) {
+              if (data.customize.layout === 'layout2' && this.swiperRef) {
                 defaultShowIndex_1 = 0;
                 data.groupSource.forEach(function (f, i) {
                   if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
                 });
-                this.sliderRef.slickGoTo(defaultShowIndex_1);
+                this.swiperRef.slideTo(defaultShowIndex_1);
               }
 
               bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
@@ -384,7 +388,7 @@ function (_super) {
       });
 
       if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
-        _this.sliderRef.slickGoTo(nextIndex);
+        _this.swiperRef.slideTo(nextIndex);
       }
     };
 
@@ -396,26 +400,30 @@ function (_super) {
 
     this.getMyWalletData();
     this.destroy = (0, _mobx.autorun)(function () {
-      if (_this.props.data.customize.layout === 'layout2' && _this.sliderRef) {
+      var _a;
+
+      if (_this.props.data.customize.layout === 'layout2' && _this.swiperRef) {
         _this.sliderGoTo(_this.props.data.groupSource);
         /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
 
         if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-          _this.sliderRef.slickPause();
+          (_a = _this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
         }
       }
     });
   };
 
   WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
-    if (nextProps.data.customize.layout === 'layout2' && this.sliderRef) {
+    var _a, _b;
+
+    if (nextProps.data.customize.layout === 'layout2' && this.swiperRef) {
       this.sliderGoTo(nextProps.data.groupSource);
 
       if (nextProps.data.setting.autoplay.open) {
-        this.sliderRef.slickPlay();
+        (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.start();
       } else {
-        this.sliderRef.slickPause();
+        (_b = this.swiperRef.autoplay) === null || _b === void 0 ? void 0 : _b.stop();
       }
     }
   };
@@ -423,37 +431,20 @@ function (_super) {
   WalletMobile.prototype.render = function () {
     var _this = this;
 
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
 
     var data = this.props.data;
     var sliderIndex = this.state.sliderIndex;
     var colNum = data.customize.rowNum;
-    var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
     if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-      autoplay = false;
+      (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
     }
 
-    var settings = {
-      className: 'slider-wrap',
-      arrows: false,
-      dots: false,
-      autoplay: autoplay,
-      autoplaySpeed: ((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.autoplay) === null || _d === void 0 ? void 0 : _d.interval) * 1000,
-      speed: 500,
-      draggable: window.magicDesign.mode === 'renderer',
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      beforeChange: function beforeChange(oldIndex, newIndex) {
-        _this.setState({
-          sliderIndex: newIndex
-        });
-      }
-    };
     var navStyle = {
-      fontSize: (0, _commonUtil.convertToRem)((_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.size),
-      color: (_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.navigation) === null || _h === void 0 ? void 0 : _h.color
+      fontSize: (0, _commonUtil.convertToRem)((_c = (_b = data.setting) === null || _b === void 0 ? void 0 : _b.navigation) === null || _c === void 0 ? void 0 : _c.size),
+      color: (_e = (_d = data.setting) === null || _d === void 0 ? void 0 : _d.navigation) === null || _e === void 0 ? void 0 : _e.color
     };
 
     var getItemContent = function getItemContent(item, preItem, nextItem) {
@@ -567,42 +558,54 @@ function (_super) {
       style: (0, _commonUtil.pxToRem)({
         gap: MOBILE_IMG_SIZE[colNum].gap
       })
-    }, data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
+    }, data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap",
         style: (0, _commonUtil.pxToRem)({
           width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
         })
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item));
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       className: "carousel-layout"
     }, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
-        return _this.sliderRef.slickPrev();
+        return _this.swiperRef.slidePrev();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-left"
-    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
-      ref: function ref(slider) {
-        return _this.sliderRef = slider;
-      }
-    }, settings), data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
-      return /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
+      autoplay: {
+        delay: ((_g = (_f = data.setting) === null || _f === void 0 ? void 0 : _f.autoplay) === null || _g === void 0 ? void 0 : _g.interval) * 1000
+      },
+      effect: "cards",
+      loop: true,
+      modules: [_modules.EffectCards, _modules.Autoplay],
+      onSlideChange: function onSlideChange(swiper) {
+        return _this.setState({
+          sliderIndex: swiper.realIndex || 0
+        });
+      },
+      onSwiper: function onSwiper(swiper) {
+        return _this.swiperRef = swiper;
+      },
+      slidesPerView: 1
+    }, data.groupSource.map(function (item, index) {
+      var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
+      var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
+      var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
+      var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, null, /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap"
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item, preItem, nextItem)));
     })), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-right",
       onClick: function onClick() {
-        return _this.sliderRef.slickNext();
+        return _this.swiperRef.slideNext();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
@@ -617,7 +620,7 @@ function (_super) {
           active: i == sliderIndex
         }),
         onClick: function onClick() {
-          return _this.sliderRef.slickGoTo(i);
+          return _this.swiperRef.slideTo(i);
         },
         style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,

package/lib/composite-comp/bol/components/Wallet/mobile/index.less

@@ -8,14 +8,14 @@
   justify-content: center;
   flex-wrap: wrap;
   border-radius: 0.2rem;
-  padding: 0.4rem 0.8rem 1.8rem 0.8rem;
+  padding: 0.2rem 0.8rem 1.3rem 0.8rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .wallet-btn {
-  margin-top: 0.4rem;
+  margin-top: 0.2rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .peek {
   position: absolute;
-  bottom: 0.32rem;
+  bottom: 0.16rem;
   width: 1.2rem !important;
   white-space: nowrap;
 }
@@ -28,9 +28,10 @@
 .m-Wallet-mobile .column-layout {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 }
 .m-Wallet-mobile .column-layout .text-content {
-  padding: 0.2rem 0 0.4rem 0;
+  padding: 0.2rem 0 0.2rem 0;
 }
 .m-Wallet-mobile .column-layout .text-content .wallet-btn {
   margin-top: 0.2rem;
@@ -44,6 +45,10 @@
 .m-Wallet-mobile .column-layout .text-content .peek.right {
   right: 0.32rem;
 }
+.m-Wallet-mobile .carousel-layout {
+  position: relative;
+  min-height: 4.8rem;
+}
 .m-Wallet-mobile .carousel-layout .slick-track {
   display: flex;
   justify-content: center;
@@ -65,14 +70,16 @@
   bottom: 0;
   margin: auto;
   cursor: pointer;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban {
   position: absolute;
   width: 100%;
-  bottom: 0.8rem;
+  bottom: 0.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban .ban {
   font-size: 0.16rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.43",
+  "version": "2.0.45",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -41,7 +41,8 @@
     "replace": "^1.2.1",
     "shortid": "^2.2.16",
     "slick-carousel": "^1.8.1",
-    "spark-md5": "^3.0.2"
+    "spark-md5": "^3.0.2",
+    "swiper": "^11.0.3"
   },
   "peerDependencies": {
     "react": ">=16.11.0",