@fonixtree/magic-design 1.0.158 → 1.0.160
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.
- package/es/common/ProductCardModal/index.js +1 -1
- package/es/common/ProductCardModal/index.less +4 -0
- package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +4 -2
- package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js +14 -7
- package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.less +14 -3
- package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +6 -4
- package/es/composite-comp/dito/components/SlideImage/pc/index.js +0 -2
- package/es/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.js +0 -2
- package/es/utils/coreUtil.js +3 -5
- package/lib/common/ProductCardModal/index.js +1 -1
- package/lib/common/ProductCardModal/index.less +4 -0
- package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +4 -2
- package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js +14 -7
- package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.less +14 -3
- package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +6 -4
- package/lib/composite-comp/dito/components/SlideImage/pc/index.js +0 -2
- package/lib/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.js +0 -2
- package/lib/utils/coreUtil.js +3 -5
- package/package.json +1 -1
- package/es/composite-comp/dito/components/SlideImage/pc/index.less +0 -1
- package/es/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.less +0 -0
- package/lib/composite-comp/dito/components/SlideImage/pc/index.less +0 -1
- package/lib/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.less +0 -0
|
@@ -121,7 +121,7 @@ function ProductCardModal(_a) {
|
|
|
121
121
|
onClick: function onClick(e) {
|
|
122
122
|
return e.stopPropagation();
|
|
123
123
|
}
|
|
124
|
-
}, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
|
|
124
|
+
}, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.slice(0, 2).map(function (item, index) {
|
|
125
125
|
return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
|
|
126
126
|
key: item.offerId,
|
|
127
127
|
animate: {
|
|
@@ -72,7 +72,8 @@ function (_super) {
|
|
|
72
72
|
CardItem.prototype.render = function () {
|
|
73
73
|
var _a = this.props,
|
|
74
74
|
data = _a.data,
|
|
75
|
-
|
|
75
|
+
onLoad = _a.onLoad,
|
|
76
|
+
rest = __rest(_a, ["data", "onLoad"]);
|
|
76
77
|
|
|
77
78
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
78
79
|
className: (0, _classnames["default"])('slide-image-card-item-wrap'),
|
|
@@ -81,7 +82,8 @@ function (_super) {
|
|
|
81
82
|
}
|
|
82
83
|
}, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
|
|
83
84
|
cursor: data.clickUrl || '',
|
|
84
|
-
data: data
|
|
85
|
+
data: data,
|
|
86
|
+
onLoad: onLoad
|
|
85
87
|
}), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
|
|
86
88
|
className: "text",
|
|
87
89
|
data: data.groupName,
|
|
@@ -85,11 +85,15 @@ function ParallaxScroll(_a) {
|
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
+
var onLoad = function onLoad() {
|
|
89
|
+
initLayout();
|
|
90
|
+
};
|
|
91
|
+
|
|
88
92
|
(0, _react.useEffect)(function () {
|
|
89
93
|
if (!(0, _coreUtil.isDesignMode)()) {
|
|
90
|
-
setTimeout(
|
|
91
|
-
|
|
92
|
-
}, 1500);
|
|
94
|
+
// setTimeout(() => {
|
|
95
|
+
// initLayout();
|
|
96
|
+
// }, 1500);
|
|
93
97
|
window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
|
|
94
98
|
return function () {
|
|
95
99
|
window.removeEventListener('resize', initLayout);
|
|
@@ -100,7 +104,7 @@ function ParallaxScroll(_a) {
|
|
|
100
104
|
className: "m-parallax-scroll"
|
|
101
105
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
102
106
|
ref: gridRef,
|
|
103
|
-
className: "grid
|
|
107
|
+
className: "grid-cols-3",
|
|
104
108
|
style: {
|
|
105
109
|
gap: xGap + 'px'
|
|
106
110
|
}
|
|
@@ -117,7 +121,8 @@ function ParallaxScroll(_a) {
|
|
|
117
121
|
y: translateFirst
|
|
118
122
|
}
|
|
119
123
|
}, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
|
|
120
|
-
data: el
|
|
124
|
+
data: el,
|
|
125
|
+
onLoad: onLoad
|
|
121
126
|
}));
|
|
122
127
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
123
128
|
ref: colTwoRef,
|
|
@@ -132,7 +137,8 @@ function ParallaxScroll(_a) {
|
|
|
132
137
|
y: translateSecond
|
|
133
138
|
}
|
|
134
139
|
}, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
|
|
135
|
-
data: el
|
|
140
|
+
data: el,
|
|
141
|
+
onLoad: onLoad
|
|
136
142
|
}));
|
|
137
143
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
138
144
|
ref: colThreeRef,
|
|
@@ -147,7 +153,8 @@ function ParallaxScroll(_a) {
|
|
|
147
153
|
y: translateThird
|
|
148
154
|
}
|
|
149
155
|
}, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
|
|
150
|
-
data: el
|
|
156
|
+
data: el,
|
|
157
|
+
onLoad: onLoad
|
|
151
158
|
}));
|
|
152
159
|
}))));
|
|
153
160
|
}
|
package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.less
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
.m-parallax-scroll {
|
|
2
2
|
|
|
3
|
+
.grid-cols-3 {
|
|
4
|
+
display: grid;
|
|
5
|
+
align-content: start;
|
|
6
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
7
|
+
}
|
|
8
|
+
|
|
3
9
|
.grid {
|
|
4
10
|
display: grid;
|
|
5
11
|
align-content: start;
|
|
6
12
|
height: fit-content;
|
|
7
|
-
}
|
|
8
13
|
|
|
9
|
-
|
|
10
|
-
|
|
14
|
+
>div {
|
|
15
|
+
z-index: 2;
|
|
16
|
+
|
|
17
|
+
&:hover {
|
|
18
|
+
z-index: 1;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
11
21
|
}
|
|
22
|
+
|
|
12
23
|
}
|
|
@@ -98,14 +98,14 @@ function (_super) {
|
|
|
98
98
|
});
|
|
99
99
|
video_1.addEventListener('seeked', function () {
|
|
100
100
|
// 设置Canvas尺寸与视频一致
|
|
101
|
-
canvas_1.width = video_1.
|
|
102
|
-
canvas_1.height = video_1.
|
|
101
|
+
canvas_1.width = video_1.videoWidth;
|
|
102
|
+
canvas_1.height = video_1.videoHeight; // 绘制视频帧到Canvas
|
|
103
103
|
|
|
104
104
|
var ctx = canvas_1.getContext('2d');
|
|
105
105
|
ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
|
|
106
106
|
|
|
107
107
|
_this.setState({
|
|
108
|
-
videoPoster: canvas_1.toDataURL('image/
|
|
108
|
+
videoPoster: canvas_1.toDataURL('image/jpeg', 0.95)
|
|
109
109
|
});
|
|
110
110
|
});
|
|
111
111
|
}
|
|
@@ -122,7 +122,8 @@ function (_super) {
|
|
|
122
122
|
|
|
123
123
|
var _g = this.props,
|
|
124
124
|
data = _g.data,
|
|
125
|
-
cursor = _g.cursor
|
|
125
|
+
cursor = _g.cursor,
|
|
126
|
+
onLoad = _g.onLoad;
|
|
126
127
|
var _h = this.state,
|
|
127
128
|
playing = _h.playing,
|
|
128
129
|
videoPoster = _h.videoPoster;
|
|
@@ -150,6 +151,7 @@ function (_super) {
|
|
|
150
151
|
className: (0, _classnames["default"])('video-img', {
|
|
151
152
|
cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
|
|
152
153
|
}),
|
|
154
|
+
onLoad: onLoad,
|
|
153
155
|
src: img,
|
|
154
156
|
style: {
|
|
155
157
|
visibility: playing ? 'hidden' : 'visible'
|
|
@@ -7,8 +7,6 @@ exports["default"] = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
require("./index.less");
|
|
11
|
-
|
|
12
10
|
var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScroll"));
|
|
13
11
|
|
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -21,8 +21,6 @@ var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-p
|
|
|
21
21
|
|
|
22
22
|
var _coreUtil = require("../../../../utils/coreUtil");
|
|
23
23
|
|
|
24
|
-
require("./index.less");
|
|
25
|
-
|
|
26
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
25
|
|
|
28
26
|
var __extends = void 0 && (void 0).__extends || function () {
|
package/es/utils/coreUtil.js
CHANGED
|
@@ -364,13 +364,11 @@ var clickUrl = function clickUrl(url, state) {
|
|
|
364
364
|
}
|
|
365
365
|
|
|
366
366
|
var _b = _typeof(url) === 'object' ? (0, _businessUtil.newParseUrl)(url) : (0, _businessUtil.parseUrl)(url),
|
|
367
|
-
|
|
367
|
+
link = _b.link,
|
|
368
368
|
data = _b.data;
|
|
369
369
|
|
|
370
|
-
var link = isPc() ? "web" + _link : _link;
|
|
371
370
|
var _c = data.params,
|
|
372
|
-
params = _c === void 0 ? {} : _c;
|
|
373
|
-
console.log('params...', params); // PC商品卡片弹窗
|
|
371
|
+
params = _c === void 0 ? {} : _c; // PC商品卡片弹窗
|
|
374
372
|
|
|
375
373
|
if (params.type === 'CARD_PRODUCT_LIST') {
|
|
376
374
|
createProdCardModal(params.offerIds);
|
|
@@ -438,7 +436,7 @@ var clickUrl = function clickUrl(url, state) {
|
|
|
438
436
|
}
|
|
439
437
|
} else {
|
|
440
438
|
if (isPc()) {
|
|
441
|
-
window.location.href += link;
|
|
439
|
+
window.location.href += "web" + link;
|
|
442
440
|
} else {
|
|
443
441
|
(0, _commonUtil.navigateTo)(link, state);
|
|
444
442
|
}
|
|
@@ -121,7 +121,7 @@ function ProductCardModal(_a) {
|
|
|
121
121
|
onClick: function onClick(e) {
|
|
122
122
|
return e.stopPropagation();
|
|
123
123
|
}
|
|
124
|
-
}, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
|
|
124
|
+
}, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.slice(0, 2).map(function (item, index) {
|
|
125
125
|
return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
|
|
126
126
|
key: item.offerId,
|
|
127
127
|
animate: {
|
|
@@ -72,7 +72,8 @@ function (_super) {
|
|
|
72
72
|
CardItem.prototype.render = function () {
|
|
73
73
|
var _a = this.props,
|
|
74
74
|
data = _a.data,
|
|
75
|
-
|
|
75
|
+
onLoad = _a.onLoad,
|
|
76
|
+
rest = __rest(_a, ["data", "onLoad"]);
|
|
76
77
|
|
|
77
78
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
78
79
|
className: (0, _classnames["default"])('slide-image-card-item-wrap'),
|
|
@@ -81,7 +82,8 @@ function (_super) {
|
|
|
81
82
|
}
|
|
82
83
|
}, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
|
|
83
84
|
cursor: data.clickUrl || '',
|
|
84
|
-
data: data
|
|
85
|
+
data: data,
|
|
86
|
+
onLoad: onLoad
|
|
85
87
|
}), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
|
|
86
88
|
className: "text",
|
|
87
89
|
data: data.groupName,
|
|
@@ -85,11 +85,15 @@ function ParallaxScroll(_a) {
|
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
+
var onLoad = function onLoad() {
|
|
89
|
+
initLayout();
|
|
90
|
+
};
|
|
91
|
+
|
|
88
92
|
(0, _react.useEffect)(function () {
|
|
89
93
|
if (!(0, _coreUtil.isDesignMode)()) {
|
|
90
|
-
setTimeout(
|
|
91
|
-
|
|
92
|
-
}, 1500);
|
|
94
|
+
// setTimeout(() => {
|
|
95
|
+
// initLayout();
|
|
96
|
+
// }, 1500);
|
|
93
97
|
window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
|
|
94
98
|
return function () {
|
|
95
99
|
window.removeEventListener('resize', initLayout);
|
|
@@ -100,7 +104,7 @@ function ParallaxScroll(_a) {
|
|
|
100
104
|
className: "m-parallax-scroll"
|
|
101
105
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
102
106
|
ref: gridRef,
|
|
103
|
-
className: "grid
|
|
107
|
+
className: "grid-cols-3",
|
|
104
108
|
style: {
|
|
105
109
|
gap: xGap + 'px'
|
|
106
110
|
}
|
|
@@ -117,7 +121,8 @@ function ParallaxScroll(_a) {
|
|
|
117
121
|
y: translateFirst
|
|
118
122
|
}
|
|
119
123
|
}, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
|
|
120
|
-
data: el
|
|
124
|
+
data: el,
|
|
125
|
+
onLoad: onLoad
|
|
121
126
|
}));
|
|
122
127
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
123
128
|
ref: colTwoRef,
|
|
@@ -132,7 +137,8 @@ function ParallaxScroll(_a) {
|
|
|
132
137
|
y: translateSecond
|
|
133
138
|
}
|
|
134
139
|
}, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
|
|
135
|
-
data: el
|
|
140
|
+
data: el,
|
|
141
|
+
onLoad: onLoad
|
|
136
142
|
}));
|
|
137
143
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
138
144
|
ref: colThreeRef,
|
|
@@ -147,7 +153,8 @@ function ParallaxScroll(_a) {
|
|
|
147
153
|
y: translateThird
|
|
148
154
|
}
|
|
149
155
|
}, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
|
|
150
|
-
data: el
|
|
156
|
+
data: el,
|
|
157
|
+
onLoad: onLoad
|
|
151
158
|
}));
|
|
152
159
|
}))));
|
|
153
160
|
}
|
package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.less
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
.m-parallax-scroll {
|
|
2
2
|
|
|
3
|
+
.grid-cols-3 {
|
|
4
|
+
display: grid;
|
|
5
|
+
align-content: start;
|
|
6
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
7
|
+
}
|
|
8
|
+
|
|
3
9
|
.grid {
|
|
4
10
|
display: grid;
|
|
5
11
|
align-content: start;
|
|
6
12
|
height: fit-content;
|
|
7
|
-
}
|
|
8
13
|
|
|
9
|
-
|
|
10
|
-
|
|
14
|
+
>div {
|
|
15
|
+
z-index: 2;
|
|
16
|
+
|
|
17
|
+
&:hover {
|
|
18
|
+
z-index: 1;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
11
21
|
}
|
|
22
|
+
|
|
12
23
|
}
|
|
@@ -98,14 +98,14 @@ function (_super) {
|
|
|
98
98
|
});
|
|
99
99
|
video_1.addEventListener('seeked', function () {
|
|
100
100
|
// 设置Canvas尺寸与视频一致
|
|
101
|
-
canvas_1.width = video_1.
|
|
102
|
-
canvas_1.height = video_1.
|
|
101
|
+
canvas_1.width = video_1.videoWidth;
|
|
102
|
+
canvas_1.height = video_1.videoHeight; // 绘制视频帧到Canvas
|
|
103
103
|
|
|
104
104
|
var ctx = canvas_1.getContext('2d');
|
|
105
105
|
ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
|
|
106
106
|
|
|
107
107
|
_this.setState({
|
|
108
|
-
videoPoster: canvas_1.toDataURL('image/
|
|
108
|
+
videoPoster: canvas_1.toDataURL('image/jpeg', 0.95)
|
|
109
109
|
});
|
|
110
110
|
});
|
|
111
111
|
}
|
|
@@ -122,7 +122,8 @@ function (_super) {
|
|
|
122
122
|
|
|
123
123
|
var _g = this.props,
|
|
124
124
|
data = _g.data,
|
|
125
|
-
cursor = _g.cursor
|
|
125
|
+
cursor = _g.cursor,
|
|
126
|
+
onLoad = _g.onLoad;
|
|
126
127
|
var _h = this.state,
|
|
127
128
|
playing = _h.playing,
|
|
128
129
|
videoPoster = _h.videoPoster;
|
|
@@ -150,6 +151,7 @@ function (_super) {
|
|
|
150
151
|
className: (0, _classnames["default"])('video-img', {
|
|
151
152
|
cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
|
|
152
153
|
}),
|
|
154
|
+
onLoad: onLoad,
|
|
153
155
|
src: img,
|
|
154
156
|
style: {
|
|
155
157
|
visibility: playing ? 'hidden' : 'visible'
|
|
@@ -7,8 +7,6 @@ exports["default"] = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
require("./index.less");
|
|
11
|
-
|
|
12
10
|
var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScroll"));
|
|
13
11
|
|
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -21,8 +21,6 @@ var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-p
|
|
|
21
21
|
|
|
22
22
|
var _coreUtil = require("../../../../utils/coreUtil");
|
|
23
23
|
|
|
24
|
-
require("./index.less");
|
|
25
|
-
|
|
26
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
25
|
|
|
28
26
|
var __extends = void 0 && (void 0).__extends || function () {
|
package/lib/utils/coreUtil.js
CHANGED
|
@@ -364,13 +364,11 @@ var clickUrl = function clickUrl(url, state) {
|
|
|
364
364
|
}
|
|
365
365
|
|
|
366
366
|
var _b = _typeof(url) === 'object' ? (0, _businessUtil.newParseUrl)(url) : (0, _businessUtil.parseUrl)(url),
|
|
367
|
-
|
|
367
|
+
link = _b.link,
|
|
368
368
|
data = _b.data;
|
|
369
369
|
|
|
370
|
-
var link = isPc() ? "web" + _link : _link;
|
|
371
370
|
var _c = data.params,
|
|
372
|
-
params = _c === void 0 ? {} : _c;
|
|
373
|
-
console.log('params...', params); // PC商品卡片弹窗
|
|
371
|
+
params = _c === void 0 ? {} : _c; // PC商品卡片弹窗
|
|
374
372
|
|
|
375
373
|
if (params.type === 'CARD_PRODUCT_LIST') {
|
|
376
374
|
createProdCardModal(params.offerIds);
|
|
@@ -438,7 +436,7 @@ var clickUrl = function clickUrl(url, state) {
|
|
|
438
436
|
}
|
|
439
437
|
} else {
|
|
440
438
|
if (isPc()) {
|
|
441
|
-
window.location.href += link;
|
|
439
|
+
window.location.href += "web" + link;
|
|
442
440
|
} else {
|
|
443
441
|
(0, _commonUtil.navigateTo)(link, state);
|
|
444
442
|
}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.m-slide-image-pc {}
|
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.m-slide-image-pc {}
|
|
File without changes
|