@fonixtree/magic-design 1.0.21 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/es/composite-comp/common/components/ProductItem/index.js +8 -6
  2. package/es/composite-comp/common/components/ProductItem/index.less +28 -22
  3. package/lib/composite-comp/common/components/ProductItem/index.js +8 -6
  4. package/lib/composite-comp/common/components/ProductItem/index.less +28 -22
  5. package/package.json +1 -1
package/es/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -202,11 +202,13 @@ function (_super) {
202
202
  text: _price
203
203
  }),
204
204
  readonly: true
205
- }), oldPrice && panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
205
+ }), panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
206
+ className: "price-sold-wrap"
207
+ }, /*#__PURE__*/_react["default"].createElement("div", {
206
208
  className: "old-price-wrap"
207
209
  }, !!discount && /*#__PURE__*/_react["default"].createElement("span", {
208
210
  className: "discount"
209
- }, "-", discount, "%"), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
211
+ }, "-", discount, "%"), oldPrice && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
210
212
  className: "old-price",
211
213
  data: __assign(__assign({}, panelProps.salesPrice), {
212
214
  text: oldPrice
@@ -215,7 +217,9 @@ function (_super) {
215
217
  style: {
216
218
  color: panelProps.salesPrice.content.color
217
219
  }
218
- })), showProgress && panelProps.salesProgressVisible.open && /*#__PURE__*/_react["default"].createElement("div", {
220
+ })), !showProgress && data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
221
+ className: "sold-count"
222
+ }, (0, _commonUtil.convertCount)(data.salesCnt), " sold")), showProgress && panelProps.salesProgressVisible.open && /*#__PURE__*/_react["default"].createElement("div", {
219
223
  className: "progress-wrap"
220
224
  }, /*#__PURE__*/_react["default"].createElement("span", {
221
225
  className: "text"
@@ -226,9 +230,7 @@ function (_super) {
226
230
  style: {
227
231
  width: salePercent + "%"
228
232
  }
229
- }))), !showProgress && data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
230
- className: "sold-count"
231
- }, (0, _commonUtil.convertCount)(data.salesCnt), " sold")));
233
+ })))));
232
234
  };
233
235
 
234
236
  ProductItem.defaultProps = {
package/es/composite-comp/common/components/ProductItem/index.less CHANGED
@@ -7,13 +7,7 @@
7
7
  cursor: pointer;
8
8
  position: relative;
9
9
 
10
- .sold-count {
11
- color: #7b7b7b;
12
- font-size: 12px;
13
- position: absolute;
14
- right: 8px;
15
- bottom: 8px;
16
- }
10
+
17
11
 
18
12
  .img-wrap {
19
13
  position: relative;
@@ -59,28 +53,40 @@
59
53
  text-overflow: ellipsis;
60
54
  }
61
55
 
62
- .old-price-wrap {
56
+ .price-sold-wrap {
63
57
  display: flex;
64
58
  margin-top: 0px;
65
- align-items: baseline;
59
+ align-items: center;
66
60
  white-space: nowrap;
67
61
  overflow: hidden;
68
62
  text-overflow: ellipsis;
69
-
70
- .discount {
71
- margin-right: 3px;
72
- font-family: 'Montserrat';
73
- font-style: normal;
74
- font-weight: 700;
75
- font-size: 8px;
76
- line-height: 15px;
77
- color: #fff;
78
- padding: 0 4px;
79
- background-color: #CE1126;
63
+ flex-wrap: wrap;
64
+ line-height: 15px;
65
+ .old-price-wrap {
66
+ display: flex;
67
+ line-height: 13px;
68
+ .discount {
69
+ margin-right: 3px;
70
+ font-family: 'Montserrat';
71
+ font-style: normal;
72
+ font-weight: 700;
73
+ font-size: 8px;
74
+ line-height: 15px;
75
+ color: #fff;
76
+ padding: 0 4px;
77
+ background-color: #CE1126;
78
+ }
79
+ .old-price {
80
+ text-decoration: line-through;
81
+ width: fit-content;
82
+ }
80
83
  }
81
84
 
82
- .old-price {
83
- text-decoration: line-through;
85
+ .sold-count {
86
+ color: #7b7b7b;
87
+ font-size: 12px;
88
+ text-align: right ;
89
+ flex-grow: 1;
84
90
  }
85
91
  }
86
92
 
package/lib/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -202,11 +202,13 @@ function (_super) {
202
202
  text: _price
203
203
  }),
204
204
  readonly: true
205
- }), oldPrice && panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
205
+ }), panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
206
+ className: "price-sold-wrap"
207
+ }, /*#__PURE__*/_react["default"].createElement("div", {
206
208
  className: "old-price-wrap"
207
209
  }, !!discount && /*#__PURE__*/_react["default"].createElement("span", {
208
210
  className: "discount"
209
- }, "-", discount, "%"), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
211
+ }, "-", discount, "%"), oldPrice && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
210
212
  className: "old-price",
211
213
  data: __assign(__assign({}, panelProps.salesPrice), {
212
214
  text: oldPrice
@@ -215,7 +217,9 @@ function (_super) {
215
217
  style: {
216
218
  color: panelProps.salesPrice.content.color
217
219
  }
218
- })), showProgress && panelProps.salesProgressVisible.open && /*#__PURE__*/_react["default"].createElement("div", {
220
+ })), !showProgress && data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
221
+ className: "sold-count"
222
+ }, (0, _commonUtil.convertCount)(data.salesCnt), " sold")), showProgress && panelProps.salesProgressVisible.open && /*#__PURE__*/_react["default"].createElement("div", {
219
223
  className: "progress-wrap"
220
224
  }, /*#__PURE__*/_react["default"].createElement("span", {
221
225
  className: "text"
@@ -226,9 +230,7 @@ function (_super) {
226
230
  style: {
227
231
  width: salePercent + "%"
228
232
  }
229
- }))), !showProgress && data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
230
- className: "sold-count"
231
- }, (0, _commonUtil.convertCount)(data.salesCnt), " sold")));
233
+ })))));
232
234
  };
233
235
 
234
236
  ProductItem.defaultProps = {
package/lib/composite-comp/common/components/ProductItem/index.less CHANGED
@@ -7,13 +7,7 @@
7
7
  cursor: pointer;
8
8
  position: relative;
9
9
 
10
- .sold-count {
11
- color: #7b7b7b;
12
- font-size: 12px;
13
- position: absolute;
14
- right: 8px;
15
- bottom: 8px;
16
- }
10
+
17
11
 
18
12
  .img-wrap {
19
13
  position: relative;
@@ -59,28 +53,40 @@
59
53
  text-overflow: ellipsis;
60
54
  }
61
55
 
62
- .old-price-wrap {
56
+ .price-sold-wrap {
63
57
  display: flex;
64
58
  margin-top: 0px;
65
- align-items: baseline;
59
+ align-items: center;
66
60
  white-space: nowrap;
67
61
  overflow: hidden;
68
62
  text-overflow: ellipsis;
69
-
70
- .discount {
71
- margin-right: 3px;
72
- font-family: 'Montserrat';
73
- font-style: normal;
74
- font-weight: 700;
75
- font-size: 8px;
76
- line-height: 15px;
77
- color: #fff;
78
- padding: 0 4px;
79
- background-color: #CE1126;
63
+ flex-wrap: wrap;
64
+ line-height: 15px;
65
+ .old-price-wrap {
66
+ display: flex;
67
+ line-height: 13px;
68
+ .discount {
69
+ margin-right: 3px;
70
+ font-family: 'Montserrat';
71
+ font-style: normal;
72
+ font-weight: 700;
73
+ font-size: 8px;
74
+ line-height: 15px;
75
+ color: #fff;
76
+ padding: 0 4px;
77
+ background-color: #CE1126;
78
+ }
79
+ .old-price {
80
+ text-decoration: line-through;
81
+ width: fit-content;
82
+ }
80
83
  }
81
84
 
82
- .old-price {
83
- text-decoration: line-through;
85
+ .sold-count {
86
+ color: #7b7b7b;
87
+ font-size: 12px;
88
+ text-align: right ;
89
+ flex-grow: 1;
84
90
  }
85
91
  }
86
92
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "1.0.21",
4
+ "version": "1.0.23",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",