@fonixtree/magic-design 2.0.200 → 2.0.203

package/lib/composite-comp/dito/components/FlashDeal/defaultJSON.js

@@ -7,8 +7,6 @@ exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _base = require("../../../../assets/images/base64");
-
 var _constants = require("../../../../constants");
 
 var getDefaultJSON = function getDefaultJSON() {
@@ -20,10 +18,24 @@ var getDefaultJSON = function getDefaultJSON() {
     id: (0, _uuid.v4)(),
     type: 'FLASH_DEAL',
     title: {
-      icon: {
+      image: {
         id: (0, _uuid.v4)(),
         open: true,
-        url: _base.flashIcon
+        type: 'IMAGE',
+        content: {
+          h5Name: 'name2',
+          pcName: 'name2',
+          h5ImgSrc: '',
+          pcImgSrc: '',
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
       },
       headline: {
         id: (0, _uuid.v4)(),
@@ -154,7 +166,8 @@ var getDefaultJSON = function getDefaultJSON() {
           fontFamily: defaultFontFamily,
           fontWeight: 500,
           fontSize: 14,
-          color: '#2C2C2C'
+          color: '#2C2C2C',
+          pcFontSize: 19
         },
         underline: {
           open: false,
@@ -178,7 +191,8 @@ var getDefaultJSON = function getDefaultJSON() {
           fontFamily: defaultFontFamily,
           fontWeight: 600,
           fontSize: 14,
-          color: '#CE1126'
+          color: '#CE1126',
+          pcFontSize: 32
         },
         underline: {
           open: false,
@@ -202,6 +216,7 @@ var getDefaultJSON = function getDefaultJSON() {
           fontFamily: defaultFontFamily,
           fontWeight: 500,
           fontSize: 10,
+          pcFontSize: 16,
           color: '#929292'
         },
         underline: {
@@ -214,6 +229,30 @@ var getDefaultJSON = function getDefaultJSON() {
           lineHeight: 18
         }
       },
+      discountLabel: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'TEXT',
+        specialContent: [],
+        text: '',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: defaultFontFamily,
+          fontWeight: 700,
+          fontSize: 12,
+          color: '#2C2C2C',
+          urlDisabled: true
+        },
+        underline: {
+          open: false,
+          textDecorationColor: '',
+          textDecorationStyle: 'solid'
+        },
+        vertical: {
+          open: false,
+          lineHeight: 18
+        }
+      },
       salesProgress: {
         open: true
       }
@@ -235,11 +274,10 @@ var getDefaultJSON = function getDefaultJSON() {
       }
     },
     customize: {
-      layout: 'layout1',
-      align: 'left',
-      pcRowNum: 6,
-      pcMaxRowNum: 6,
-      pcMinRowNum: 5
+      layout: {
+        h5Layout: 'layout1',
+        pcLayout: 'layout1'
+      }
     },
     background: {
       opacity: 100,

package/lib/composite-comp/dito/components/FlashDeal/mobile/index.js

@@ -377,15 +377,15 @@ function (_super) {
   };
 
   FlashDealMobile.prototype.render = function () {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
 
     var panelProps = this.props.panelProps;
-    var _c = this.state,
-        list = _c.list,
-        effDate = _c.effDate,
-        expDate = _c.expDate,
-        now = _c.now,
-        isWill = _c.isWill;
+    var _f = this.state,
+        list = _f.list,
+        effDate = _f.effDate,
+        expDate = _f.expDate,
+        now = _f.now,
+        isWill = _f.isWill;
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
@@ -395,16 +395,15 @@ function (_super) {
       className: "flash-deal-title"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "left"
-    }, panelProps.title.icon.open && panelProps.title.icon.url && /*#__PURE__*/_react["default"].createElement("img", {
-      alt: "",
+    }, ((_a = panelProps.title.image) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       className: "icon",
-      src: panelProps.title.icon.url
+      data: panelProps.title.image
     }), panelProps.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "title",
       data: panelProps.title.headline
     }), isWill && /*#__PURE__*/_react["default"].createElement("span", {
       className: "sub-title"
-    }, (0, _locale.i18n)('NEXT')), ((_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.countDown) && ((_b = panelProps.title.countDown) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
+    }, (0, _locale.i18n)('NEXT')), ((_b = panelProps.title) === null || _b === void 0 ? void 0 : _b.countDown) && ((_c = panelProps.title.countDown) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
       effDate: effDate,
       expDate: expDate,
       now: now,
@@ -419,17 +418,19 @@ function (_super) {
       data: panelProps.title.button
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('flash-deal-list', {
-        'flash-deal-list-vertical': panelProps.customize.layout === 'layout1',
-        'flash-deal-list-horizontal': panelProps.customize.layout === 'layout2'
+        'flash-deal-list-vertical': ((_d = panelProps.customize.layout) === null || _d === void 0 ? void 0 : _d.h5Layout) !== 'layout2',
+        'flash-deal-list-horizontal': ((_e = panelProps.customize.layout) === null || _e === void 0 ? void 0 : _e.h5Layout) === 'layout2'
       })
     }, _list.map(function (item) {
+      var _a;
+
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.id,
         data: __assign(__assign({}, item), {
           salePercent: isWill ? 0 : item.salePercent
         }) // onItemClick={() => clickUrl(`/product/detail/${item.offerId}?productId=${item.sppProductId ?? ''}`)}
         ,
-        layout: panelProps.customize.layout === 'layout2' ? 'horizontal' : 'vertical',
+        layout: ((_a = panelProps.customize.layout) === null || _a === void 0 ? void 0 : _a.h5Layout) === 'layout2' ? 'horizontal' : 'vertical',
         onItemClick: function onItemClick() {
           if (window.magicDesign.pushGA) {
             window.magicDesign.pushGA({}, 'select_promotion', {

package/lib/composite-comp/dito/components/FlashDeal/mobile/index.less

@@ -78,8 +78,12 @@
 .m-flash-deal-mobile .flash-deal-list-vertical .m-product-item-wrap {
   width: 2.44rem;
   margin-right: 0.16rem;
+  border-radius: 0.16rem;
 }
-.m-flash-deal-mobile .flash-deal-list-vertical .m-product-item-wrap .product-img {
+.m-flash-deal-mobile .flash-deal-list-vertical .m-product-item-wrap .img-wrap {
+  border-radius: 0.16rem 0.16rem 0 0;
+}
+.m-flash-deal-mobile .flash-deal-list-vertical .m-product-item-wrap .img-wrap .product-img {
   height: 2.4rem;
   width: 2.4rem;
 }
@@ -92,6 +96,10 @@
 }
 .m-flash-deal-mobile .flash-deal-list-horizontal .m-product-item-wrap {
   width: 100%;
+  border-radius: 0.16rem;
+}
+.m-flash-deal-mobile .flash-deal-list-horizontal .m-product-item-wrap .img-wrap {
+  border-radius: 0.16rem 0 0 0.16rem;
 }
 .m-flash-deal-mobile .flash-deal-list-horizontal .m-product-item-wrap .content-wrap {
   flex: 1;

package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _commonUtil = require("../../../../../../utils/commonUtil");
+
+var _currencyUtil = require("../../../../../../utils/currencyUtil");
+
+var _common = require("../../../../../../common");
+
+var _components = require("../../../../../../meta-comp/components");
+
+var _businessUtil = require("../../../../../../utils/businessUtil");
+
+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 || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var ProductItem =
+/** @class */
+function (_super) {
+  __extends(ProductItem, _super);
+
+  function ProductItem() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  ProductItem.prototype.render = function () {
+    var _a = this.props,
+        data = _a.data,
+        panelProps = _a.panelProps,
+        onItemClick = _a.onItemClick,
+        unknownPrice = _a.unknownPrice,
+        rest = __rest(_a, ["data", "panelProps", "onItemClick", "unknownPrice"]);
+
+    var promotions = (0, _businessUtil.getPromotionList)(data);
+    var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
+    /** 当是拼团时 显示价格 */
+
+    if (data.sppType && promotions.length) {
+      price = data.specialPrice !== null ? (0, _currencyUtil.formatCurrency)(data.specialPrice) : (0, _currencyUtil.formatCurrency)(data.salesPrice);
+    }
+
+    var integerPart = price;
+    var decimalPart = null;
+
+    if (unknownPrice) {
+      if (price.length > 5) {
+        integerPart = price.slice(0, -5).replace(/\d/g, '? ') + price.slice(-5);
+      } else {
+        integerPart = price.replace(/\d/, '? ');
+      }
+    } else if (Array.isArray(price)) {
+      integerPart = price[0];
+      decimalPart = price[1];
+    }
+
+    var pricePrefix = (0, _commonUtil.ensure)(function () {
+      return window.systemParams.prefix;
+    }, 'Rp');
+
+    var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
+
+    var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({
+      className: (0, _classnames["default"])('m-pc-flash-product-item'),
+      onClick: function onClick() {
+        return onItemClick();
+      }
+    }, rest), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "img-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.NewImg, {
+      className: "product-img",
+      lazy: true,
+      src: (0, _commonUtil.convertImageUrl)(data.productImg || data.imgUrlContent || data.productImageUrlContent)
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "product-name-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "box"
+    }, panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      data: __assign(__assign({}, panelProps.productName), {
+        text: data.offerName
+      }),
+      readonly: true
+    }))), (panelProps.activityPrice.open || panelProps.salesPrice.open) && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "price-wrap"
+    }, panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "prefix"
+    }, pricePrefix), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "price",
+      data: __assign(__assign({}, panelProps.activityPrice), {
+        text: _price
+      }),
+      readonly: true
+    })), panelProps.salesPrice.open && oldPrice && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "old-price",
+      data: __assign(__assign({}, panelProps.salesPrice), {
+        text: oldPrice
+      }),
+      readonly: true,
+      style: {
+        color: panelProps.salesPrice.content.color
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "rate-sold-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "rate-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#FCD117",
+      size: 16,
+      type: "icon-star"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "rate-text"
+    }, (0, _currencyUtil.numberToFixed)(5.0, 1))), data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sold-count"
+    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))));
+  };
+
+  ProductItem.defaultProps = {
+    data: {},
+    panelProps: {},
+    layout: 'vertical'
+  };
+  return ProductItem;
+}(_react["default"].Component);
+
+var _default = ProductItem;
+exports["default"] = _default;

package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less

@@ -0,0 +1,100 @@
+.m-pc-flash-product-item {
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  cursor: pointer;
+  position: relative;
+  width: 270px;
+
+  .img-wrap {
+    position: relative;
+    overflow: hidden;
+    border-radius: 16px;
+    border: 1px solid #E0E0E0;
+
+    .product-img {
+      width: 270px;
+      height: 270px;
+      object-fit: cover;
+    }
+  }
+
+  .content-wrap {
+    padding: 8px;
+
+    .product-name-wrap {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-height: 24px;
+      height: 48px;
+      white-space: wrap;
+    }
+
+    .price-wrap {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      margin-top: 8px;
+
+      .prefix {
+        font-weight: 700;
+        font-size: 20px;
+        color: #CE1126;
+      }
+
+      .price {
+        width: auto !important;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 8px;
+      }
+
+      .old-price {
+        text-decoration: line-through;
+        width: fit-content;
+      }
+
+    }
+
+    .rate-sold-wrap {
+      margin-top: 4px;
+      display: flex;
+      align-items: center;
+
+      .rate-wrap {
+        display: flex;
+        align-items: center;
+
+        .rate-text {
+          font-size: 16px;
+          font-weight: 500;
+          color: #666666;
+          margin-left: 4px;
+        }
+      }
+
+      .sold-count {
+        font-size: 16px;
+        font-weight: 500;
+        color: #666666;
+        margin-left: 10px;
+        display: flex;
+        align-items: center;
+
+        &:before {
+          content: '';
+          display: block;
+          width: 2px;
+          height: 16px;
+          background-color: #666666;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+}

package/lib/composite-comp/dito/components/FlashDeal/pc/index.js

@@ -13,7 +13,7 @@ var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
 var _defImg = _interopRequireDefault(require("./imgs/defImg.png"));
 
-var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
+var _ProductItem = _interopRequireDefault(require("./ProductItem"));
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
@@ -474,40 +474,40 @@ function (_super) {
   FlashDealPc.prototype.render = function () {
     var _this = this;
 
+    var _a, _b;
+
     var panelProps = this.props.panelProps;
-    var _a = this.state,
-        list = _a.list,
-        effDate = _a.effDate,
-        expDate = _a.expDate,
-        now = _a.now,
-        isWill = _a.isWill,
-        scrollToLeftDisabled = _a.scrollToLeftDisabled,
-        scrollToRightDisabled = _a.scrollToRightDisabled;
+    var _c = this.state,
+        list = _c.list,
+        effDate = _c.effDate,
+        expDate = _c.expDate,
+        now = _c.now,
+        isWill = _c.isWill,
+        scrollToLeftDisabled = _c.scrollToLeftDisabled,
+        scrollToRightDisabled = _c.scrollToRightDisabled;
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
-    var imgHeight = panelProps.customize.pcRowNum === 6 ? 153 : 193;
-    var imgWidth = panelProps.customize.pcRowNum === 6 ? 153 : 193;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-flash-deal-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "flash-deal-title"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "left"
-    }, panelProps.title.icon.open && panelProps.title.icon.url && /*#__PURE__*/_react["default"].createElement("img", {
-      alt: "",
+    }, ((_a = panelProps.title.image) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       className: "icon",
-      src: panelProps.title.icon.url
-    }), panelProps.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      data: panelProps.title.image
+    }), !(0, _coreUtil.isPc)() && panelProps.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "title",
       data: panelProps.title.headline
-    }), isWill && /*#__PURE__*/_react["default"].createElement("span", {
+    }), !(0, _coreUtil.isPc)() && isWill && /*#__PURE__*/_react["default"].createElement("span", {
       className: "sub-title"
-    }, (0, _locale.i18n)('NEXT')), /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
+    }, (0, _locale.i18n)('NEXT')), ((_b = panelProps.title.countDown) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
       effDate: effDate,
       expDate: expDate,
       now: now,
-      refresh: this.getNextFlashSale
+      refresh: this.getNextFlashSale,
+      type: "pc"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "right",
       onClick: function onClick() {
@@ -536,10 +536,6 @@ function (_super) {
         data: __assign(__assign({}, item), {
           salePercent: isWill ? 0 : item.salePercent
         }),
-        fixHeight: true,
-        imgHeight: imgHeight,
-        imgWidth: imgWidth // onItemClick={() => clickUrl(`/product/detail/${item.offerId}?productId=${item.sppProductId ?? ''}`)}
-        ,
         onItemClick: function onItemClick() {
           return (0, _coreUtil.clickUrl)("proDetail-" + item.offerId + "-" + (item.sppProductId || ''));
         },

package/lib/composite-comp/dito/components/FlashDeal/pc/index.less

@@ -1,12 +1,13 @@
 .m-flash-deal-pc {
   display: flex;
   flex-direction: column;
-  padding: 16px 16px 28px 16px;
 
   .flash-deal-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 0 64px;
+    margin-bottom: 40px;
 
     .left {
       display: flex;
@@ -18,7 +19,6 @@
       }
 
       .title {
-        font-family: 'Montserrat';
         font-style: normal;
         font-weight: 600;
         font-size: 14px;
@@ -28,7 +28,6 @@
       }
 
       .sub-title {
-        font-family: 'Montserrat';
         font-style: normal;
         font-weight: 600;
         font-size: 10px;
@@ -44,7 +43,6 @@
       align-items: center;
 
       .text {
-        font-family: 'Montserrat';
         font-style: normal;
         font-weight: 600;
         font-size: 12px;
@@ -66,27 +64,26 @@
 
     .arrow-icon {
       display: block;
-      width: 36px;
-      height: 36px;
-      line-height: 42px;
+      width: 48px;
+      height: 48px;
+      line-height: 50px;
       text-align: center;
       background: #FFFFFF;
-      box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
       border-radius: 100px;
+      border: 1px solid #F0F0F0;
       cursor: pointer;
 
       &.left {
-        margin-right: 30px;
+        margin-right: 16px;
       }
 
       &.right {
-        margin-left: 30px;
+        margin-left: 16px;
       }
     }
   }
 
   .flash-deal-list {
-    margin-top: 16px;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
@@ -95,27 +92,19 @@
     justify-content: flex-start;
     position: relative;
     flex: 1;
+    gap: 40px;
+  }
+}
 
-    .loading-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 30px;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      margin: auto;
-    }
-
-    // 秒杀特有样式
-    .m-product-item-wrap {
-      width: 142px;
-      margin-right: 24px;
 
-      .product-name {
-        height: 36px;
+@media(min-width: 750px) {
+  .m-flash-deal-pc {
+    .flash-deal-title {
+      .left {
+        .icon {
+          height: 36px;
+          margin-right: 16px;
+        }
       }
     }
   }