@fonixtree/magic-design 2.0.215 → 2.0.216

package/lib/common/ProductFilterModal/index.css

@@ -0,0 +1,99 @@
+.productFilterModal .productFilterWrap {
+  background: #ffffff;
+  height: 60vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+.productFilterModal .productFilterWrap .item {
+  margin-top: 0.4rem;
+}
+.productFilterModal .productFilterWrap .item .inputWrap {
+  margin-top: 0.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.productFilterModal .productFilterWrap .item .inputWrap .divider {
+  padding: 0 0.2rem;
+  flex-shrink: 0;
+  height: 0.04rem;
+  width: 0.22rem;
+  background-color: #000;
+}
+.productFilterModal .productFilterWrap .item .inputWrap input {
+  width: 45%;
+  height: 0.96rem;
+  border: 0.02rem solid #E4E4E4;
+  box-shadow: none;
+  padding: 0.24rem;
+  border-radius: 0.08rem;
+  outline: none;
+}
+.productFilterModal .productFilterWrap .item .title {
+  line-height: 0.48rem;
+  font-size: 0.32rem;
+  font-weight: 600;
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.productFilterModal .productFilterWrap .item .accordionContentWrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-bottom: 0.02rem;
+}
+.productFilterModal .productFilterWrap .item .accordionContentWrap .btnMore {
+  font-weight: 600;
+  font-size: 0.28rem;
+  color: #FF8650;
+  margin-top: 0.12rem;
+  margin-left: 0.2rem;
+}
+.productFilterModal .bottomWrap {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  width: 100%;
+  height: 1.56rem;
+  padding: 0.24rem 0.48rem;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: space-between;
+}
+.productFilterModal .bottomWrap .btn-reset {
+  display: flex;
+  flex: 1 1;
+  height: 1.08rem;
+  align-items: center;
+  justify-content: center;
+  color: #FF8650;
+  border: 0.02rem solid #FF8650;
+  background-color: #fff;
+  border-radius: 0.16rem;
+  font-weight: 600;
+  font-size: 0.28rem;
+}
+.productFilterModal .bottomWrap .btn-reset:hover {
+  background-color: #fff;
+}
+.productFilterModal .bottomWrap .btn-confirm {
+  display: flex;
+  flex: 1 1;
+  height: 1.08rem;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  border: 0.02rem solid #FF8650;
+  background-color: #FF8650;
+  border-radius: 0.16rem;
+  font-weight: 600;
+  font-size: 0.28rem;
+}
+.productFilterModal .bottomWrap .btn-confirm:hover {
+  background-color: #FF8650;
+}

package/lib/common/ProductFilterModal/index.js

@@ -0,0 +1,360 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _locale = require("../../locale");
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _PopUpModal = _interopRequireDefault(require("../PopUpModal"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _FilterSearchModal = _interopRequireDefault(require("./components/FilterSearchModal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+function ProductFilterModal(props) {
+  var _a;
+
+  var visible = props.visible,
+      filterObj = props.filterObj,
+      onClose = props.onClose,
+      onChange = props.onChange,
+      _b = props.value,
+      value = _b === void 0 ? {} : _b;
+
+  var _c = (0, _react.useState)({}),
+      condValue = _c[0],
+      setCondValue = _c[1];
+
+  var _d = (0, _react.useState)(''),
+      detailKey = _d[0],
+      setDetailKey = _d[1];
+
+  var _e = (0, _react.useState)(false),
+      searchVisible = _e[0],
+      setSearchVisible = _e[1];
+
+  var serviceIds = condValue.serviceIds,
+      brandIds = condValue.brandIds,
+      catgIds = condValue.catgIds,
+      startPrice = condValue.startPrice,
+      endPrice = condValue.endPrice,
+      evaluationAvgs = condValue.evaluationAvgs,
+      offerAttrValues = condValue.offerAttrValues;
+  (0, _react.useEffect)(function () {
+    setCondValue(value);
+  }, [value]);
+  var keyInfo = {
+    serviceIds: {
+      title: (0, _locale.i18n)('SERVICE'),
+      callbackKey: 'serviceList',
+      idKey: 'serviceId',
+      showKey: 'serviceName',
+      selectedList: (serviceIds === null || serviceIds === void 0 ? void 0 : serviceIds.split(',')) || [],
+      multi: true
+    },
+    catgIds: {
+      title: (0, _locale.i18n)('CATEGORY'),
+      callbackKey: 'catgList',
+      idKey: 'catgId',
+      showKey: 'catgName',
+      selectedList: (catgIds === null || catgIds === void 0 ? void 0 : catgIds.split(',')) || [],
+      multi: false
+    },
+    brandIds: {
+      title: (0, _locale.i18n)('BRANDS'),
+      callbackKey: 'brandList',
+      idKey: 'brandId',
+      showKey: 'brandName',
+      selectedList: (brandIds === null || brandIds === void 0 ? void 0 : brandIds.split(',')) || [],
+      multi: true
+    }
+  };
+
+  var tagSelect = function tagSelect(key, tagValue, selected, multi) {
+    var _a;
+
+    if (!multi) {
+      // 单选
+      if (selected) {
+        condValue[key] = String(tagValue);
+      } else {
+        condValue[key] = '';
+      }
+
+      setCondValue(__assign({}, condValue));
+    } else {
+      // 多选
+      var temp = ((_a = condValue[key]) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+
+      if (selected) {
+        temp.push(tagValue);
+      } else {
+        temp = temp.filter(function (val) {
+          return val !== String(tagValue);
+        });
+      }
+
+      condValue[key] = temp.join(',');
+    }
+
+    setCondValue(__assign({}, condValue));
+  };
+
+  var isAttrValueActive = function isAttrValueActive(attrId, attrValue) {
+    var _a;
+
+    var find = offerAttrValues === null || offerAttrValues === void 0 ? void 0 : offerAttrValues.find(function (attr) {
+      return attr.attrId === attrId;
+    });
+
+    if (find && ((_a = find.attrValue) === null || _a === void 0 ? void 0 : _a.includes(attrValue))) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var onAttrChange = function onAttrChange(attrId, item, selected) {
+    var newOfferAttrValues = offerAttrValues ? __spreadArrays(offerAttrValues) : [];
+
+    if (selected) {
+      var find = newOfferAttrValues === null || newOfferAttrValues === void 0 ? void 0 : newOfferAttrValues.find(function (attr) {
+        return attr.attrId === attrId;
+      });
+
+      if (find) {
+        var split = find.attrValue.split(',');
+        split.push(item);
+        find.attrValue = split.join(',');
+      } else {
+        newOfferAttrValues.push({
+          attrId: attrId,
+          attrValue: item
+        });
+      }
+    } else {
+      var find = newOfferAttrValues === null || newOfferAttrValues === void 0 ? void 0 : newOfferAttrValues.find(function (attr) {
+        return attr.attrId === attrId;
+      });
+      find.attrValue = find.attrValue.split(',').filter(function (val) {
+        return val !== item;
+      }).join(',');
+    }
+
+    setCondValue(__assign(__assign({}, condValue), {
+      offerAttrValues: newOfferAttrValues
+    }));
+  };
+
+  var onApply = function onApply() {
+    var _a;
+
+    var params = __assign({}, condValue);
+
+    var filterAttr = (_a = condValue.offerAttrValues) === null || _a === void 0 ? void 0 : _a.filter(function (attr) {
+      return !!attr.attrValue;
+    });
+    params.offerAttrValues = (filterAttr === null || filterAttr === void 0 ? void 0 : filterAttr.length) ? filterAttr : null;
+    Object.keys(params).forEach(function (key) {
+      if (!params[key]) {
+        Reflect.deleteProperty(params, key);
+      }
+    });
+    onChange(params);
+  };
+
+  var onReset = function onReset() {
+    onChange({});
+  };
+
+  var onShowMore = function onShowMore(key) {
+    setDetailKey(key);
+    setSearchVisible(true);
+  };
+
+  var onFilterSearchOk = function onFilterSearchOk(val) {
+    var _a;
+
+    var newParams = __assign(__assign({}, condValue), (_a = {}, _a[detailKey] = val, _a));
+
+    setCondValue(newParams);
+    setSearchVisible(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_PopUpModal["default"], {
+    className: "productFilterModal",
+    onClose: onClose,
+    visible: visible
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "productFilterWrap"
+  }, ['serviceIds', 'catgIds', 'brandIds'].map(function (key) {
+    var _a;
+
+    var _b = keyInfo[key],
+        title = _b.title,
+        idKey = _b.idKey,
+        showKey = _b.showKey,
+        selectedList = _b.selectedList,
+        multi = _b.multi;
+    return filterObj[key] && ((_a = filterObj[key]) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "item"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, title), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "accordionContentWrap"
+    }, filterObj[key].slice(0, 10).map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        active: selectedList.indexOf(String(item[idKey])) > -1,
+        name: item[showKey],
+        onChange: function onChange(selected) {
+          tagSelect(key, item[idKey], selected, multi);
+        }
+      });
+    }), filterObj[key].length > 10 && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btnMore",
+      onClick: function onClick() {
+        onShowMore(key);
+      }
+    }, (0, _locale.i18n)('SHOW_MORE'))));
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, (0, _locale.i18n)('PRICE')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "inputWrap"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    onChange: function onChange(e) {
+      return setCondValue(__assign(__assign({}, condValue), {
+        startPrice: e.target.value
+      }));
+    },
+    placeholder: "Min",
+    type: "number",
+    value: startPrice || ''
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "divider"
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    onChange: function onChange(e) {
+      return setCondValue(__assign(__assign({}, condValue), {
+        endPrice: e.target.value
+      }));
+    },
+    placeholder: "Max",
+    type: "number",
+    value: endPrice || ''
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, (0, _locale.i18n)('RATINGS')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "accordionContentWrap"
+  }, ['1', '2', '3', '4', '5'].map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      active: evaluationAvgs === item,
+      name: item + " " + (0, _locale.i18n)('STAR'),
+      onChange: function onChange(selected) {
+        setCondValue(__assign(__assign({}, condValue), {
+          evaluationAvgs: selected ? item : ''
+        }));
+      }
+    });
+  }))), filterObj.offerAttrValues && ((_a = filterObj.offerAttrValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && filterObj.offerAttrValues.map(function (attr) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "item",
+      header: attr.attrName
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, attr.attrName), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "accordionContentWrap"
+    }, attr.attrValues && attr.attrValues.split(',').map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        active: isAttrValueActive(attr.attrId, item),
+        name: item,
+        onChange: function onChange(selected) {
+          onAttrChange(attr.attrId, item, selected);
+        }
+      }, item);
+    })));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "bottomWrap"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    className: "btn-reset",
+    onClick: onReset,
+    plain: true
+  }, (0, _locale.i18n)('RESET')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    className: "btn-confirm",
+    onClick: onApply
+  }, (0, _locale.i18n)('APPLY'))), /*#__PURE__*/_react["default"].createElement(_FilterSearchModal["default"], {
+    filterInfo: keyInfo[detailKey],
+    onClose: function onClose() {
+      return setSearchVisible(false);
+    },
+    onOk: onFilterSearchOk,
+    source: filterObj[detailKey],
+    value: condValue[detailKey],
+    visible: searchVisible
+  }));
+}
+
+ProductFilterModal.propTypes = {
+  visible: _propTypes["default"].bool,
+  filterObj: _propTypes["default"].object,
+  onClose: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  value: _propTypes["default"].object
+};
+ProductFilterModal.defaultProps = {
+  visible: false,
+  filterObj: {},
+  onClose: function onClose() {},
+  onChange: function onChange() {},
+  value: {}
+};
+var _default = ProductFilterModal;
+exports["default"] = _default;

package/lib/common/ProductModal/SortableImageList/index.css

@@ -0,0 +1,3 @@
+.imgListWrap {
+  display: flex;
+}

package/lib/common/ProductModal/SortableImageList/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SortableImageList;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
+
+var _Iconfont = _interopRequireDefault(require("../../Iconfont"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SortableImageList(_a) {
+  var selectedList = _a.selectedList,
+      setSelectedList = _a.setSelectedList;
+
+  var _b = (0, _react.useState)(''),
+      dragId = _b[0],
+      setDragId = _b[1];
+
+  var _c = (0, _react.useState)(selectedList || []),
+      list = _c[0],
+      setList = _c[1];
+
+  var ref = (0, _react.useRef)();
+
+  var onDragEnd = function onDragEnd() {
+    console.log('onDragEnd');
+    setDragId('');
+
+    if (ref.current) {
+      setSelectedList(ref.current);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    setList(selectedList || []);
+  }, [selectedList]);
+
+  var delSelectedItem = function delSelectedItem(index) {
+    var rows = JSON.parse(JSON.stringify(selectedList));
+    rows.splice(index, 1);
+    setSelectedList(rows);
+  };
+
+  var moveCard = (0, _react.useCallback)(function (dragNodeId, hoverNodeId) {
+    var dragIndex = list.findIndex(function (comp) {
+      return comp.productId === Number(dragNodeId);
+    });
+    var hoverIndex = list.findIndex(function (comp) {
+      return comp.productId === Number(hoverNodeId);
+    });
+    setList(function (prevCards) {
+      var newList = (0, _immutabilityHelper["default"])(prevCards, {
+        $splice: [[dragIndex, 1], [hoverIndex, 0, prevCards[dragIndex]]]
+      });
+      ref.current = newList;
+      return newList;
+    });
+  }, [list]);
+
+  var onDragEnter = function onDragEnter(e) {
+    console.log('onDragEnter');
+    var hoverNodeId = e.currentTarget.dataset.nodeid;
+
+    if (dragId === hoverNodeId) {
+      return;
+    }
+
+    moveCard(dragId, hoverNodeId);
+  };
+
+  var onDragStart = function onDragStart(e) {
+    setDragId(e.currentTarget.dataset.nodeid);
+    console.log('onDragStart');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "imgListWrap"
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "selectedItem"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "selectedItemImg " + (item.state !== 'A' ? 'invalid' : ''),
+      "data-nodeid": item.productId,
+      draggable: "true",
+      onDragEnd: onDragEnd,
+      onDragEnter: onDragEnter,
+      onDragOver: function onDragOver(e) {
+        e.preventDefault();
+      },
+      onDragStart: onDragStart,
+      src: item.productImageUrl,
+      title: item.productName
+    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "selectedItemClose",
+      color: "#000",
+      onClick: function onClick() {
+        return delSelectedItem(index);
+      },
+      size: 12,
+      type: "icon-close"
+    }));
+  }));
+}

package/lib/common/ProductModal/index.css

@@ -0,0 +1,123 @@
+.modalCot {
+  width: 24rem;
+  right: unset !important;
+  left: unset !important;
+}
+.modalCot .proModalWrap thead .cylon-checkbox {
+  visibility: hidden;
+}
+.modalCot .proModalWrap .content {
+  display: flex;
+  margin-bottom: 0.16rem;
+}
+.modalCot .proModalWrap .content .rightCot {
+  width: calc(100% - 5.2rem);
+  margin-left: 0.32rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.modalCot .proModalWrap .content .rightCot .btn-select-type {
+  text-align: right;
+  margin-bottom: 0.3rem;
+}
+.modalCot .proModalWrap .content .rightCot .prodImg {
+  display: inline-block;
+  width: 0.72rem;
+  height: 0.72rem;
+  background-size: cover;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+.modalCot .proModalWrap .content .rightCot .selectedCot {
+  padding-right: 0.36rem;
+  margin-left: 0.08rem;
+  height: 1.56rem;
+  background: #f8f8f8;
+  border: 0.02rem solid #e0e0e0;
+  border-radius: 0.04rem;
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+}
+.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem {
+  box-sizing: border-box;
+  margin-top: 0.24rem;
+  margin-left: 0.36rem;
+  height: 1.04rem;
+  position: relative;
+}
+.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem:hover .selectedItemImg {
+  width: 1.04rem;
+  height: 1.04rem;
+  border: 0.02rem solid #4477ee !important;
+  box-shadow: 0 0 0 0.04rem rgba(68, 119, 238, 0.15);
+  border-radius: 0.04rem;
+}
+.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem:hover .selectedItemClose {
+  display: flex;
+}
+.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem .selectedItemClose {
+  display: none;
+  border: 0.02rem solid #000;
+  width: 0.32rem;
+  height: 0.32rem;
+  border-radius: 50%;
+  padding: 0.04rem;
+  position: absolute;
+  top: -0.18rem;
+  right: -0.16rem;
+  z-index: 400;
+  cursor: pointer;
+}
+.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem .selectedItemImg {
+  height: 1.04rem;
+  width: 1.04rem;
+  border: 0.02rem solid #e0e0e0;
+  border-radius: 0.04rem;
+}
+.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem .selectedItemImg.invalid {
+  border: 0.02rem solid red;
+}
+.modalCot .proModalWrap .content .leftCot {
+  width: 5.2rem;
+  padding-right: 0.28rem;
+  box-sizing: border-box;
+  border-right: 0.02rem solid #e0e0e0;
+}
+.modalCot .proModalWrap .content .leftCot .divider {
+  width: 10%;
+  display: inline-block;
+  text-align: center;
+  height: 0.64rem;
+  line-height: 0.64rem;
+}
+.modalCot .proModalWrap .content .leftCot .buttonStyle {
+  margin-top: 0.2rem;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+.modalCot .proModalWrap .footer {
+  padding-top: 0.24rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 0.02rem solid #e0e0e0;
+}
+.modalCot .proModalWrap .total {
+  font-size: 0.32rem;
+  color: #2d3040;
+  letter-spacing: 0;
+}
+.modalCot .proModalWrap .total .totalNum {
+  color: #4477ee;
+}
+.cylon-modal-root {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+}