@fonixtree/magic-design 0.1.4 → 0.1.5

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.
@@ -90,7 +90,8 @@ function (_super) {
90
90
  var data = _this.props.data;
91
91
 
92
92
  try {
93
- var cardWidth = ((_a = document.querySelector('.group-wrap .one-card')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
93
+ // const cardWidth = document.querySelector('.group-wrap .one-card')?.offsetWidth - 48;
94
+ var cardWidth = (100 - (data.customize.pcRowNum - 1) * 2) / data.customize.pcRowNum * 0.01 * ((_a = document.querySelector('.image-text-pc .group-wrap')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
94
95
  var maxLayoutWidth = maxWidthAndHeight[data.customize.layout.pcLayout];
95
96
 
96
97
  _this.setState({
@@ -130,6 +131,7 @@ function (_super) {
130
131
  ImageTextPc.prototype.componentDidMount = function () {
131
132
  var data = this.props.data;
132
133
  this.layout = data.customize.layout.pcLayout;
134
+ this.pcRowNum = data.customize.pcRowNum;
133
135
  this.listenCardWidth();
134
136
  window.addEventListener('resize', (0, _lodash.debounce)(this.listenCardWidth));
135
137
  };
@@ -139,8 +141,9 @@ function (_super) {
139
141
  };
140
142
 
141
143
  ImageTextPc.prototype.componentWillReceiveProps = function (nextProps) {
142
- if (nextProps.data.customize.layout.pcLayout !== this.layout) {
144
+ if (nextProps.data.customize.layout.pcLayout !== this.layout || nextProps.data.customize.pcRowNum !== this.pcRowNum) {
143
145
  this.layout = nextProps.data.customize.layout.pcLayout;
146
+ this.pcRowNum = nextProps.data.customize.pcRowNum;
144
147
  this.listenCardWidth();
145
148
  }
146
149
  };
@@ -26,13 +26,16 @@
26
26
  }
27
27
  }
28
28
  .menu-drop {
29
- // .all-category {
30
- // color: #ED2121 !important;
31
- // }
29
+ .all-category {
30
+ position: relative;
31
+ z-index: 1;
32
+ background: #fff;
33
+ }
32
34
  &>img {
33
35
  position: relative;
34
- left: 5000px;
35
- filter: drop-shadow(#ED2121 -5000px 0);
36
+ left: 30px;
37
+ filter: drop-shadow(#ED2121 -30px 0);
38
+ z-index: -1;
36
39
  }
37
40
  }
38
41
  }
@@ -90,7 +90,8 @@ function (_super) {
90
90
  var data = _this.props.data;
91
91
 
92
92
  try {
93
- var cardWidth = ((_a = document.querySelector('.group-wrap .one-card')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
93
+ // const cardWidth = document.querySelector('.group-wrap .one-card')?.offsetWidth - 48;
94
+ var cardWidth = (100 - (data.customize.pcRowNum - 1) * 2) / data.customize.pcRowNum * 0.01 * ((_a = document.querySelector('.image-text-pc .group-wrap')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
94
95
  var maxLayoutWidth = maxWidthAndHeight[data.customize.layout.pcLayout];
95
96
 
96
97
  _this.setState({
@@ -130,6 +131,7 @@ function (_super) {
130
131
  ImageTextPc.prototype.componentDidMount = function () {
131
132
  var data = this.props.data;
132
133
  this.layout = data.customize.layout.pcLayout;
134
+ this.pcRowNum = data.customize.pcRowNum;
133
135
  this.listenCardWidth();
134
136
  window.addEventListener('resize', (0, _lodash.debounce)(this.listenCardWidth));
135
137
  };
@@ -139,8 +141,9 @@ function (_super) {
139
141
  };
140
142
 
141
143
  ImageTextPc.prototype.componentWillReceiveProps = function (nextProps) {
142
- if (nextProps.data.customize.layout.pcLayout !== this.layout) {
144
+ if (nextProps.data.customize.layout.pcLayout !== this.layout || nextProps.data.customize.pcRowNum !== this.pcRowNum) {
143
145
  this.layout = nextProps.data.customize.layout.pcLayout;
146
+ this.pcRowNum = nextProps.data.customize.pcRowNum;
144
147
  this.listenCardWidth();
145
148
  }
146
149
  };
@@ -26,13 +26,16 @@
26
26
  }
27
27
  }
28
28
  .menu-drop {
29
- // .all-category {
30
- // color: #ED2121 !important;
31
- // }
29
+ .all-category {
30
+ position: relative;
31
+ z-index: 1;
32
+ background: #fff;
33
+ }
32
34
  &>img {
33
35
  position: relative;
34
- left: 5000px;
35
- filter: drop-shadow(#ED2121 -5000px 0);
36
+ left: 30px;
37
+ filter: drop-shadow(#ED2121 -30px 0);
38
+ z-index: -1;
36
39
  }
37
40
  }
38
41
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "0.1.4",
4
+ "version": "0.1.5",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",