@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js

@@ -0,0 +1,107 @@
+import { __extends, __spreadArray } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { renderPreview } from '../../../../utils/coreUtil.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import ImageConfig from '../../../../meta-comp/config-panels/ImageConfig/index.js';
+import ButtonConfig from '../../../../meta-comp/config-panels/ButtonConfig/index.js';
+import TextConfig from '../../../../meta-comp/config-panels/TextConfig/index.js';
+import { store } from '../../../../mobx/index.js';
+
+require('debug')('worker:CarouselSecondConfig');
+
+var CarouselSecondConfig =
+/** @class */
+function (_super) {
+  __extends(CarouselSecondConfig, _super);
+
+  function CarouselSecondConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  CarouselSecondConfig.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    var textSource = [{
+      key: '2',
+      name: 'Title',
+      value: /*#__PURE__*/React__default.createElement(TextConfig, {
+        data: panelProps.title
+      }),
+      metaOption: panelProps.title,
+      toggleType: 'switch'
+    }, {
+      key: '3',
+      name: 'Text',
+      value: /*#__PURE__*/React__default.createElement(TextConfig, {
+        data: panelProps.text
+      }),
+      metaOption: panelProps.text,
+      toggleType: 'switch'
+    }, {
+      key: '4',
+      name: 'Image Tag',
+      value: /*#__PURE__*/React__default.createElement(ImageConfig, {
+        data: panelProps.imageTag
+      }),
+      metaOption: panelProps.imageTag,
+      toggleType: 'switch'
+    }, {
+      key: '5',
+      name: 'Button Tag',
+      value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+        data: panelProps.buttonTag
+      }),
+      metaOption: panelProps.buttonTag,
+      toggleType: 'switch'
+    }, {
+      key: '6',
+      name: 'Secondary Button Tag',
+      value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+        data: panelProps.secondButtonTag
+      }),
+      metaOption: panelProps.secondButtonTag,
+      toggleType: 'switch'
+    }];
+
+    var _textSource = store.CarouselStore[panelProps.compId] === 'layout2' ? textSource : [];
+
+    var getConfig = function () {
+      return /*#__PURE__*/React__default.createElement(CommonCollapse, {
+        onRefresh: function () {
+          return renderPreview();
+        },
+        source: __spreadArray([{
+          key: '1',
+          name: 'Image',
+          value: /*#__PURE__*/React__default.createElement(ImageConfig, {
+            data: panelProps.image
+          }),
+          metaOption: panelProps.image,
+          toggleType: 'switch'
+        }], _textSource, true)
+      });
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "carousel_second_conf_wrap"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: '1',
+        name: 'Content',
+        value: getConfig()
+      }],
+      type: "triangle"
+    }));
+  };
+
+  CarouselSecondConfig.defaultProps = {
+    panelProps: {}
+  };
+  return CarouselSecondConfig;
+}(React__default.Component);
+
+export { CarouselSecondConfig as default };

package/src/components/composite-comp/bol/second-config-panels/ImageTextSecondConfig/index.js

@@ -0,0 +1,116 @@
+import { __extends } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import ImageConfig from '../../../../meta-comp/config-panels/ImageConfig/index.js';
+import ButtonConfig from '../../../../meta-comp/config-panels/ButtonConfig/index.js';
+import TextConfig from '../../../../meta-comp/config-panels/TextConfig/index.js';
+import BackgroundConfig from '../../../common/config-panels/BackgroundConfig/index.js';
+import '../../../../common/LayoutSelector/index.js';
+import Field from '../../../../common/Field/index.js';
+import '../../../../common/UrlPicker/index.js';
+import '../../../../common/Iconfont/index.js';
+import '../../../../common/Button/index.js';
+import '../../../../common/AlignSelector/index.js';
+import '../../../../common/ColorPickerInput/index.js';
+import '../../../../common/ImagePicker/index.js';
+import '../../../../common/IconPicker/index.js';
+import '../../../../common/SwitchCollapse/index.js';
+import '../../../../common/Slider/index.js';
+import '../../../../common/FontStyles/index.js';
+import '../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../node_modules/axios/index.js';
+import '../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../common/ProductModal/index.js';
+import '../../../../common/ProductSource/index.less.js';
+import { renderPreview } from '../../../../utils/coreUtil.js';
+
+var ImageTextSecondConfig =
+/** @class */
+function (_super) {
+  __extends(ImageTextSecondConfig, _super);
+
+  function ImageTextSecondConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.getContentPanel = function (data) {
+      var source = [{
+        key: 'imageTextSecondContent1',
+        name: 'Image',
+        value: /*#__PURE__*/React__default.createElement(ImageConfig, {
+          data: data.image
+        }),
+        metaOption: data.image
+      }, {
+        key: 'imageTextSecondContent2',
+        name: 'Title',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: data.title
+        }),
+        metaOption: data.title
+      }, {
+        key: 'imageTextSecondContent3',
+        name: 'Text',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: data.text
+        }),
+        metaOption: data.text
+      }, {
+        key: 'imageTextSecondContent4',
+        name: 'Button',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: data.button
+        }),
+        metaOption: data.button
+      }, {
+        key: 'imageTextSecondContent5',
+        name: 'Secondary Button',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: data.secondButton
+        }),
+        metaOption: data.secondButton
+      }];
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+        headerSize: "middle",
+        onRefresh: function () {
+          return renderPreview();
+        },
+        showActiveColor: true,
+        source: source,
+        type: "switch"
+      }), /*#__PURE__*/React__default.createElement(Field, null, /*#__PURE__*/React__default.createElement(BackgroundConfig, {
+        data: data.background
+      })));
+    };
+
+    return _this;
+  }
+
+  ImageTextSecondConfig.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "banner_second_conf_wrap"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: 'imageTextSecondConfig1',
+        name: 'Content',
+        value: this.getContentPanel(panelProps)
+      }, {
+        key: 'imageTextSecondConfig2',
+        name: 'Hover',
+        value: this.getContentPanel(panelProps.hover)
+      }]
+    }));
+  };
+
+  ImageTextSecondConfig.defaultProps = {
+    panelProps: {}
+  };
+  return ImageTextSecondConfig;
+}(React__default.Component);
+
+export { ImageTextSecondConfig as default };

package/src/components/composite-comp/bol/second-config-panels/TextSecondConfig/TextContentConfigContent/index.js

@@ -0,0 +1,79 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import TextConfig from '../../../../../meta-comp/config-panels/TextConfig/index.js';
+import { renderPreview } from '../../../../../utils/coreUtil.js';
+import '../../../../../common/LayoutSelector/index.js';
+import '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../../node_modules/axios/index.js';
+import '../../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.render = function () {
+    var source = this.props.source;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "recommend_content"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      headerSize: "middle",
+      onRefresh: this.reRender,
+      source: [{
+        key: '1',
+        name: 'Title',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: source.title
+        }),
+        metaOption: source.title
+      }, {
+        key: '2',
+        name: 'Text',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: source.text
+        }),
+        metaOption: source.text
+      }],
+      type: "switch"
+    }));
+  };
+
+  AComponent.defaultProps = {
+    source: {
+      title: {},
+      text: {}
+    }
+  };
+  return AComponent;
+}(React__default.Component);
+
+export { AComponent as default };

package/src/components/composite-comp/bol/second-config-panels/TextSecondConfig/index.js

@@ -0,0 +1,70 @@
+import { __extends } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import AComponent from './TextContentConfigContent/index.js';
+import '../../../../common/LayoutSelector/index.js';
+import '../../../../common/Field/index.js';
+import '../../../../common/UrlPicker/index.js';
+import '../../../../common/Iconfont/index.js';
+import '../../../../common/Button/index.js';
+import '../../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import '../../../../common/ColorPickerInput/index.js';
+import '../../../../common/ImagePicker/index.js';
+import '../../../../common/IconPicker/index.js';
+import '../../../../common/SwitchCollapse/index.js';
+import '../../../../common/Slider/index.js';
+import '../../../../common/FontStyles/index.js';
+import '../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../node_modules/axios/index.js';
+import '../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../common/ProductModal/index.js';
+import '../../../../common/ProductSource/index.less.js';
+import BaseConfig from '../../../../meta-comp/config-panels/BaseConfig.js';
+
+require('debug')('worker:TextSecondConfig');
+
+var TextSecondConfig =
+/** @class */
+function (_super) {
+  __extends(TextSecondConfig, _super);
+
+  function TextSecondConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  TextSecondConfig.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "recommend_second_conf_wrap"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: 'content',
+        name: 'Content',
+        value: /*#__PURE__*/React__default.createElement(AComponent, {
+          source: panelProps.content
+        })
+      }],
+      type: "triangle"
+    }));
+  };
+
+  TextSecondConfig.defaultProps = {
+    panelProps: {}
+  };
+  return TextSecondConfig;
+}(BaseConfig);
+
+export { TextSecondConfig as default };

package/src/components/composite-comp/common/components/ImageLabel/index.js

@@ -0,0 +1,47 @@
+import { __extends } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import classNames from 'classnames';
+import React__default, { Component } from 'react';
+import './index.less.js';
+
+var ImageLabel =
+/** @class */
+function (_super) {
+  __extends(ImageLabel, _super);
+
+  function ImageLabel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  ImageLabel.prototype.render = function () {
+    var _a = this.props,
+        labels = _a.labels,
+        small = _a.small;
+
+    var _labels = labels || [];
+
+    return _labels.map(function (label) {
+      var _a, _b;
+
+      if (label.imgUrl || label.labelPictureUrl) {
+        return /*#__PURE__*/React__default.createElement("img", {
+          key: label.imgUrl || label.labelPictureUrl,
+          alt: "img",
+          className: classNames('image-label-wrap', 'img', (_a = {}, _a["position-".concat(label.position)] = true, _a.small = small, _a)),
+          src: label.imgUrl || label.labelPictureUrl
+        });
+      }
+
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: label.labelName,
+        className: classNames('image-label-wrap', (_b = {}, _b["position-".concat(label.position)] = true, _b))
+      }, label.labelName);
+    });
+  };
+
+  return ImageLabel;
+}(Component);
+
+export { ImageLabel as default };

package/src/components/composite-comp/common/components/ImageLabel/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_image-label-wrap__dbRy6 {\n  position: absolute;\n  z-index: 1;\n}\n.index_image-label-wrap__dbRy6.index_img__NaH2Y {\n  max-width: 60px;\n  max-height: 60px;\n}\n.index_image-label-wrap__dbRy6.index_img__NaH2Y.index_small__TKAcz {\n  max-width: 30px;\n  max-height: 30px;\n}\n.index_image-label-wrap__dbRy6.index_position-1__0QRmw {\n  top: 0;\n  left: 0;\n}\n.index_image-label-wrap__dbRy6.index_position-2__rpDNH {\n  bottom: 0;\n  left: 0;\n}\n.index_image-label-wrap__dbRy6.index_position-3__xg1T4 {\n  top: 0;\n  right: 0;\n}\n.index_image-label-wrap__dbRy6.index_position-4__OdW-G {\n  bottom: 0;\n  right: 0;\n}\n";
+styleInject(css_248z);

package/src/components/composite-comp/common/components/ProductItem/index.js

@@ -0,0 +1,121 @@
+import { extends as _extends } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __extends, __rest, __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { convertImageUrl } from '../../../../utils/commonUtil.js';
+import { formatCurrencyWithSymbol } from '../../../../utils/currencyUtil.js';
+import { Image } from '../../../../common/NewImg/index.js';
+import ImageLabel from '../ImageLabel/index.js';
+import Text from '../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../meta-comp/components/Button/index.js';
+import '../../../../meta-comp/components/Image/index.js';
+import { getPromotionList } from '../../../../utils/businessUtil.js';
+import './index.less.js';
+
+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,
+        showProName = _a.showProName,
+        showProgress = _a.showProgress,
+        rest = __rest(_a, ["data", "panelProps", "onItemClick", "showProName", "showProgress"]);
+
+    var promotions = getPromotionList(data);
+    var price = formatCurrencyWithSymbol(data.salesPrice);
+    /** 当是拼团时 显示价格 */
+
+    if (data.sppType && promotions.length) {
+      price = data.specialPrice !== null ? formatCurrencyWithSymbol(data.specialPrice) : formatCurrencyWithSymbol(data.salesPrice);
+    }
+
+    var oldPrice = data.marketPrice !== null ? formatCurrencyWithSymbol(data.marketPrice) : null;
+    var discount = data.discountPercent || 0;
+    var salePercent = Number(data.salePercent) / 100 || 0;
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: "m-product-item-wrap",
+      onClick: function () {
+        return onItemClick();
+      }
+    }, rest), /*#__PURE__*/React__default.createElement("div", {
+      className: "img-wrap"
+    }, /*#__PURE__*/React__default.createElement(Image, {
+      className: "product-img",
+      lazy: true,
+      src: convertImageUrl(data.imgUrlContent || data.productImageUrlContent)
+    }), /*#__PURE__*/React__default.createElement(ImageLabel, {
+      labels: data.labels,
+      small: true
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "content-wrap"
+    }, panelProps.label.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "promotions-wrap"
+    }, promotions.map(function (promot, index) {
+      return /*#__PURE__*/React__default.createElement(Button, {
+        key: index,
+        className: "promotion-item",
+        data: __assign(__assign({}, panelProps.label), {
+          text: promot
+        }),
+        readonly: true
+      });
+    })), showProName && panelProps.productName.open && /*#__PURE__*/React__default.createElement(Text, {
+      className: "product-name",
+      data: __assign(__assign({}, panelProps.productName), {
+        text: data.offerName
+      }),
+      readonly: true
+    }), panelProps.activityPrice.open && /*#__PURE__*/React__default.createElement(Text, {
+      className: "price",
+      data: __assign(__assign({}, panelProps.activityPrice), {
+        text: price
+      }),
+      readonly: true
+    }), oldPrice && panelProps.salesPrice.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "old-price-wrap"
+    }, !!discount && /*#__PURE__*/React__default.createElement("span", {
+      className: "discount"
+    }, "-", discount, "%"), /*#__PURE__*/React__default.createElement(Text, {
+      className: "old-price",
+      data: __assign(__assign({}, panelProps.salesPrice), {
+        text: oldPrice
+      }),
+      readonly: true,
+      style: {
+        color: panelProps.salesPrice.content.color
+      }
+    })), showProgress && panelProps.salesProgressVisible.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "progress-wrap"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "text"
+    }, salePercent, "% Sold"), /*#__PURE__*/React__default.createElement("div", {
+      className: "progress-container"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "progress",
+      style: {
+        width: "".concat(salePercent, "%")
+      }
+    })))));
+  };
+
+  ProductItem.defaultProps = {
+    data: {},
+    panelProps: {},
+    showProName: true,
+    showProgress: true
+  };
+  return ProductItem;
+}(React__default.Component);
+
+export { ProductItem as default };

package/src/components/composite-comp/common/components/ProductItem/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-product-item-wrap__Fbhz8 {\n  display: flex;\n  flex-direction: column;\n  background: #FFFFFF;\n  border: 1px solid #E8E8E8;\n  border-radius: 8px;\n  width: 140px;\n}\n.index_m-product-item-wrap__Fbhz8 .index_img-wrap__LxErk {\n  position: relative;\n  width: 100%;\n}\n.index_m-product-item-wrap__Fbhz8 .index_img-wrap__LxErk .index_product-img__rTFmV {\n  height: 150px;\n  width: 100%;\n  object-fit: cover;\n  border-radius: 8px 8px 0 0;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR {\n  padding: 8px;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_promotions-wrap__pD7wC {\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 5px;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_promotions-wrap__pD7wC .index_promotion-item__Tm90p {\n  margin-right: 5px;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_promotions-wrap__pD7wC .index_promotion-item__Tm90p:last-child {\n  margin-right: 0;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_product-name__XttNb {\n  margin-bottom: 8px;\n  line-height: 18px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-all;\n  white-space: normal;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_old-price-wrap__xbCsv {\n  display: flex;\n  margin-top: 6px;\n  align-items: baseline;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_old-price-wrap__xbCsv .index_discount__LBr-c {\n  margin-right: 3px;\n  font-family: 'Montserrat';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 12px;\n  line-height: 15px;\n  color: #2C2C2C;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_old-price-wrap__xbCsv .index_old-price__stulc {\n  text-decoration: line-through;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_rate-wrap__iy2MW {\n  display: flex;\n  margin-top: 8px;\n  align-items: center;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_rate-wrap__iy2MW .index_number__G8hN1 {\n  font-size: 10px;\n  color: #7B7B7B;\n  font-family: 'Montserrat';\n  font-style: normal;\n  font-weight: 400;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_progress-wrap__K5qgl {\n  margin-top: 10px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_progress-wrap__K5qgl .index_text__-AiP9 {\n  font-family: 'Montserrat';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 12px;\n  color: #929292;\n  margin-bottom: 4px;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_progress-wrap__K5qgl .index_progress-container__--txW {\n  width: 100%;\n  height: 4px;\n  background-color: #DDDEDE;\n  border-radius: 8px;\n}\n.index_m-product-item-wrap__Fbhz8 .index_content-wrap__10uDR .index_progress-wrap__K5qgl .index_progress-container__--txW .index_progress__DU7lZ {\n  width: 10px;\n  background: #CE1126;\n  border-radius: 8px;\n  height: 100%;\n}\n";
+styleInject(css_248z);