@fonixtree/magic-design 1.0.153 → 1.0.154

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.
@@ -29,6 +29,8 @@ var _coreUtil = require("../../../../../utils/coreUtil");
29
29
 
30
30
  var _mobx = require("../../../../../mobx");
31
31
 
32
+ var _locale = require("../../../../../locale");
33
+
32
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
33
35
 
34
36
  var __extends = void 0 && (void 0).__extends || function () {
@@ -218,7 +220,7 @@ function (_super) {
218
220
  if (window.magicDesign.pushGA) {
219
221
  window.magicDesign.pushGA({}, 'select_promotion', {
220
222
  event_section: 'Search_Banner',
221
- promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : i18n('BANNER_GROUP_NAME')
223
+ promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME')
222
224
  });
223
225
  }
224
226
  }
@@ -80,12 +80,13 @@ function (_super) {
80
80
  return (0, _coreUtil.clickUrl)(data.clickUrl || '');
81
81
  }
82
82
  }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
83
+ cursor: data.clickUrl || '',
83
84
  data: data
84
85
  }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
85
86
  className: "text",
86
87
  data: data.groupName,
87
88
  style: {
88
- pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
89
+ cursor: data.clickUrl ? 'pointer' : 'unset'
89
90
  }
90
91
  })));
91
92
  };
@@ -1,6 +1,4 @@
1
1
  .slide-image-card-item-wrap {
2
- cursor: pointer;
3
-
4
2
  .text {
5
3
  margin-top: 20px;
6
4
  }
@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  require("./index.less");
13
13
 
14
- var _lodash = _interopRequireDefault(require("lodash.throttle"));
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
15
 
18
16
  var __extends = void 0 && (void 0).__extends || function () {
@@ -51,10 +49,6 @@ function (_super) {
51
49
 
52
50
  _this.state = {
53
51
  playing: false,
54
- inside: false,
55
- isNearCenter: false,
56
- flag: false,
57
- corner: '',
58
52
  videoPoster: ''
59
53
  };
60
54
  _this.videoRef = /*#__PURE__*/_react["default"].createRef();
@@ -83,76 +77,6 @@ function (_super) {
83
77
  _this.setState({
84
78
  playing: false
85
79
  });
86
- }; // 获取元素中心坐标
87
-
88
-
89
- _this.getCenter = function (element) {
90
- var rect = element.getBoundingClientRect();
91
- return {
92
- x: rect.left + rect.width / 2,
93
- y: rect.top + rect.height / 2
94
- };
95
- }; // 判断是否在中心区域
96
-
97
-
98
- _this.checkMouseNearCenter = function (e, radius) {
99
- if (radius === void 0) {
100
- radius = 20;
101
- }
102
-
103
- var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
104
-
105
-
106
- var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
107
- return distance <= radius;
108
- }; // 判断鼠标方位
109
-
110
-
111
- _this.getMousePos = function (e) {
112
- var rect = e.target.getBoundingClientRect();
113
- var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
114
-
115
- var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
116
- // 判断区域
117
-
118
- var isLeft = x < rect.width / 2;
119
- var isTop = y < rect.height / 2;
120
- var corner = '';
121
- if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
122
- return corner;
123
- };
124
-
125
- _this.handleMouseMove = (0, _lodash["default"])(function (e) {
126
- var dom = _this.cardRef.current;
127
- var size = parseInt(getComputedStyle(dom).width);
128
- var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
129
-
130
- var y = size * 0.5 + e.offsetY * 0.5;
131
- dom.style.setProperty('--x', x);
132
- dom.style.setProperty('--y', y);
133
- dom.style.setProperty('--size', size);
134
-
135
- var isNear = _this.checkMouseNearCenter(e);
136
-
137
- var corner = _this.getMousePos(e);
138
-
139
- if (isNear) _this.setState({
140
- flag: true
141
- });
142
-
143
- _this.setState({
144
- isNearCenter: isNear,
145
- inside: true,
146
- corner: corner
147
- });
148
- });
149
-
150
- _this.handleMouseLeave = function () {
151
- _this.setState({
152
- inside: false,
153
- flag: false,
154
- corner: ''
155
- });
156
80
  };
157
81
 
158
82
  return _this;
@@ -194,25 +118,23 @@ function (_super) {
194
118
  };
195
119
 
196
120
  VideoItem.prototype.render = function () {
197
- var _a;
198
-
199
- var _b, _c, _d, _e, _f, _g;
121
+ var _a, _b, _c, _d, _e, _f;
200
122
 
201
- var data = this.props.data;
123
+ var _g = this.props,
124
+ data = _g.data,
125
+ cursor = _g.cursor;
202
126
  var _h = this.state,
203
127
  playing = _h.playing,
204
- inside = _h.inside,
205
- isNearCenter = _h.isNearCenter,
206
- flag = _h.flag,
207
- corner = _h.corner,
208
128
  videoPoster = _h.videoPoster;
209
- var img = ((_c = (_b = data.overilay) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcImgSrc) || videoPoster;
129
+ var img = ((_b = (_a = data.overilay) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcImgSrc) || videoPoster;
210
130
  return /*#__PURE__*/_react["default"].createElement("div", {
211
131
  ref: this.cardRef,
212
- className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
132
+ className: (0, _classnames["default"])('slide-image-video-wrap', {
133
+ cursor: cursor
134
+ }),
213
135
  onMouseEnter: this.onMouseEnter,
214
136
  onMouseLeave: this.onMouseLeave
215
- }, ((_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
137
+ }, ((_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
216
138
  ref: this.videoRef,
217
139
  loop: true,
218
140
  muted: true,
@@ -221,12 +143,12 @@ function (_super) {
221
143
  visibility: playing ? 'visible' : 'hidden'
222
144
  }
223
145
  }, /*#__PURE__*/_react["default"].createElement("source", {
224
- src: (_e = data.video) === null || _e === void 0 ? void 0 : _e.sourceUrl,
146
+ src: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl,
225
147
  type: "video/mp4"
226
- })), ((_f = data.overilay) === null || _f === void 0 ? void 0 : _f.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
148
+ })), ((_e = data.overilay) === null || _e === void 0 ? void 0 : _e.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
227
149
  alt: "",
228
150
  className: (0, _classnames["default"])('video-img', {
229
- cover: (_g = data.video) === null || _g === void 0 ? void 0 : _g.sourceUrl
151
+ cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
230
152
  }),
231
153
  src: img,
232
154
  style: {
@@ -1,78 +1,50 @@
1
1
  .slide-image-video-wrap {
2
2
  position: relative;
3
3
  transition: border-radius 0.2s ease;
4
- overflow: hidden;
5
4
  display: flex;
5
+ border-radius: 16px;
6
6
  --dx: calc(var(--size) - var(--x));
7
7
  --dy: calc(var(--size) - var(--y));
8
- cursor: url('./imgs/cursor.png'), pointer;
9
8
 
10
- // &.hover {
11
- // border-radius:
12
- // ~"calc(var(--x)/var(--size)*100%)"
13
- // ~"calc(var(--dx)/var(--size)*100%)"
14
- // ~"calc(var(--dx)/var(--size)*100%)"
15
- // ~"calc(var(--x)/var(--size)*100%) /"
16
- // ~"calc(var(--y)/var(--size)*100%)"
17
- // ~"calc(var(--y)/var(--size)*100%)"
18
- // ~"calc(var(--dy)/var(--size)*100%)"
19
- // ~"calc(var(--dy)/var(--size)*100%)";
20
- // }
21
-
22
- &.topLeft {
23
- border-radius:
24
- ~"calc(var(--x)/var(--size)*100%)"
25
- ~"0"
26
- ~"0"
27
- ~"0 /"
28
- ~"calc(var(--y)/var(--size)*100%)"
29
- ~"0"
30
- ~"0"
31
- ~"0";
9
+ &.cursor {
10
+ cursor: url('./imgs/cursor.png'), pointer;
32
11
  }
33
12
 
34
- &.topRight {
35
- border-radius:
36
- ~"0"
37
- ~"calc(var(--x)/var(--size)*100%)"
38
- ~"0"
39
- ~"0 /"
40
- ~"0"
41
- ~"calc(var(--y)/var(--size)*100%)"
42
- ~"0"
43
- ~"0";
13
+ &:hover {
14
+ box-shadow: 0px 12px 48px 0px #00000029;
44
15
  }
45
16
 
46
- &.bottomRight {
47
- border-radius:
48
- ~"0"
49
- ~"0"
50
- ~"calc(var(--x)/var(--size)*100%)"
51
- ~"0 /"
52
- ~"0"
53
- ~"0"
54
- ~"calc(var(--y)/var(--size)*100%)"
55
- ~"0";
17
+ &:after {
18
+ content: '';
19
+ display: block;
20
+ width: 180%;
21
+ height: 180%;
22
+ min-height: 100vw / 2.5;
23
+ position: absolute;
24
+ transform: translate(-20%, -20%) scale(0);
25
+ opacity: 0;
26
+ z-index: -1;
27
+ background-image: url('./imgs/d.png');
28
+ background-size: 100%;
29
+ background-repeat: no-repeat;
30
+ background-position: center;
31
+ transition: all 0.3s ease-out;
32
+ pointer-events: none;
56
33
  }
57
34
 
58
- &.bottomLeft {
59
- border-radius:
60
- ~"0"
61
- ~"0"
62
- ~"0"
63
- ~"calc(var(--x)/var(--size)*100%) /"
64
- ~"0"
65
- ~"0"
66
- ~"0"
67
- ~"calc(var(--y)/var(--size)*100%)";
35
+ &:hover:after {
36
+ transform: translate(-20%, -20%) scale(1);
37
+ opacity: 1;
68
38
  }
69
39
 
70
40
  video {
71
41
  width: 100%;
42
+ border-radius: 16px;
72
43
  }
73
44
 
74
45
  .video-img {
75
46
  width: 100%;
47
+ border-radius: 16px;
76
48
 
77
49
  &.cover {
78
50
  position: absolute;
@@ -263,7 +263,9 @@ function (_super) {
263
263
  }
264
264
  }, /*#__PURE__*/_react["default"].createElement("div", {
265
265
  ref: this.textRef,
266
- className: (0, _classnames["default"])('m-meta-text', className),
266
+ className: (0, _classnames["default"])('m-meta-text', className, {
267
+ cursor: data.content.clickUrl
268
+ }),
267
269
  dangerouslySetInnerHTML: {
268
270
  __html: data.html || data.text
269
271
  },
@@ -279,7 +281,9 @@ function (_super) {
279
281
 
280
282
  return /*#__PURE__*/_react["default"].createElement("div", {
281
283
  ref: this.textRef,
282
- className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className),
284
+ className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className, {
285
+ cursor: data.content.clickUrl
286
+ }),
283
287
  dangerouslySetInnerHTML: {
284
288
  __html: data.html || data.text
285
289
  },
@@ -56,6 +56,9 @@
56
56
  .m-meta-text {
57
57
  display: block;
58
58
 
59
+ &.cursor {
60
+ cursor: pointer;
61
+ }
59
62
 
60
63
  ol,
61
64
  ul,
@@ -282,7 +282,6 @@ function (_super) {
282
282
  split: true,
283
283
  title: "URL"
284
284
  }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
285
- disabled: true,
286
285
  onChange: function onChange(v) {
287
286
  textData.clickUrl = v;
288
287
 
@@ -29,6 +29,8 @@ var _coreUtil = require("../../../../../utils/coreUtil");
29
29
 
30
30
  var _mobx = require("../../../../../mobx");
31
31
 
32
+ var _locale = require("../../../../../locale");
33
+
32
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
33
35
 
34
36
  var __extends = void 0 && (void 0).__extends || function () {
@@ -218,7 +220,7 @@ function (_super) {
218
220
  if (window.magicDesign.pushGA) {
219
221
  window.magicDesign.pushGA({}, 'select_promotion', {
220
222
  event_section: 'Search_Banner',
221
- promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : i18n('BANNER_GROUP_NAME')
223
+ promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME')
222
224
  });
223
225
  }
224
226
  }
@@ -80,12 +80,13 @@ function (_super) {
80
80
  return (0, _coreUtil.clickUrl)(data.clickUrl || '');
81
81
  }
82
82
  }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
83
+ cursor: data.clickUrl || '',
83
84
  data: data
84
85
  }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
85
86
  className: "text",
86
87
  data: data.groupName,
87
88
  style: {
88
- pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
89
+ cursor: data.clickUrl ? 'pointer' : 'unset'
89
90
  }
90
91
  })));
91
92
  };
@@ -1,6 +1,4 @@
1
1
  .slide-image-card-item-wrap {
2
- cursor: pointer;
3
-
4
2
  .text {
5
3
  margin-top: 20px;
6
4
  }
@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  require("./index.less");
13
13
 
14
- var _lodash = _interopRequireDefault(require("lodash.throttle"));
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
15
 
18
16
  var __extends = void 0 && (void 0).__extends || function () {
@@ -51,10 +49,6 @@ function (_super) {
51
49
 
52
50
  _this.state = {
53
51
  playing: false,
54
- inside: false,
55
- isNearCenter: false,
56
- flag: false,
57
- corner: '',
58
52
  videoPoster: ''
59
53
  };
60
54
  _this.videoRef = /*#__PURE__*/_react["default"].createRef();
@@ -83,76 +77,6 @@ function (_super) {
83
77
  _this.setState({
84
78
  playing: false
85
79
  });
86
- }; // 获取元素中心坐标
87
-
88
-
89
- _this.getCenter = function (element) {
90
- var rect = element.getBoundingClientRect();
91
- return {
92
- x: rect.left + rect.width / 2,
93
- y: rect.top + rect.height / 2
94
- };
95
- }; // 判断是否在中心区域
96
-
97
-
98
- _this.checkMouseNearCenter = function (e, radius) {
99
- if (radius === void 0) {
100
- radius = 20;
101
- }
102
-
103
- var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
104
-
105
-
106
- var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
107
- return distance <= radius;
108
- }; // 判断鼠标方位
109
-
110
-
111
- _this.getMousePos = function (e) {
112
- var rect = e.target.getBoundingClientRect();
113
- var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
114
-
115
- var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
116
- // 判断区域
117
-
118
- var isLeft = x < rect.width / 2;
119
- var isTop = y < rect.height / 2;
120
- var corner = '';
121
- if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
122
- return corner;
123
- };
124
-
125
- _this.handleMouseMove = (0, _lodash["default"])(function (e) {
126
- var dom = _this.cardRef.current;
127
- var size = parseInt(getComputedStyle(dom).width);
128
- var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
129
-
130
- var y = size * 0.5 + e.offsetY * 0.5;
131
- dom.style.setProperty('--x', x);
132
- dom.style.setProperty('--y', y);
133
- dom.style.setProperty('--size', size);
134
-
135
- var isNear = _this.checkMouseNearCenter(e);
136
-
137
- var corner = _this.getMousePos(e);
138
-
139
- if (isNear) _this.setState({
140
- flag: true
141
- });
142
-
143
- _this.setState({
144
- isNearCenter: isNear,
145
- inside: true,
146
- corner: corner
147
- });
148
- });
149
-
150
- _this.handleMouseLeave = function () {
151
- _this.setState({
152
- inside: false,
153
- flag: false,
154
- corner: ''
155
- });
156
80
  };
157
81
 
158
82
  return _this;
@@ -194,25 +118,23 @@ function (_super) {
194
118
  };
195
119
 
196
120
  VideoItem.prototype.render = function () {
197
- var _a;
198
-
199
- var _b, _c, _d, _e, _f, _g;
121
+ var _a, _b, _c, _d, _e, _f;
200
122
 
201
- var data = this.props.data;
123
+ var _g = this.props,
124
+ data = _g.data,
125
+ cursor = _g.cursor;
202
126
  var _h = this.state,
203
127
  playing = _h.playing,
204
- inside = _h.inside,
205
- isNearCenter = _h.isNearCenter,
206
- flag = _h.flag,
207
- corner = _h.corner,
208
128
  videoPoster = _h.videoPoster;
209
- var img = ((_c = (_b = data.overilay) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcImgSrc) || videoPoster;
129
+ var img = ((_b = (_a = data.overilay) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcImgSrc) || videoPoster;
210
130
  return /*#__PURE__*/_react["default"].createElement("div", {
211
131
  ref: this.cardRef,
212
- className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
132
+ className: (0, _classnames["default"])('slide-image-video-wrap', {
133
+ cursor: cursor
134
+ }),
213
135
  onMouseEnter: this.onMouseEnter,
214
136
  onMouseLeave: this.onMouseLeave
215
- }, ((_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
137
+ }, ((_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
216
138
  ref: this.videoRef,
217
139
  loop: true,
218
140
  muted: true,
@@ -221,12 +143,12 @@ function (_super) {
221
143
  visibility: playing ? 'visible' : 'hidden'
222
144
  }
223
145
  }, /*#__PURE__*/_react["default"].createElement("source", {
224
- src: (_e = data.video) === null || _e === void 0 ? void 0 : _e.sourceUrl,
146
+ src: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl,
225
147
  type: "video/mp4"
226
- })), ((_f = data.overilay) === null || _f === void 0 ? void 0 : _f.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
148
+ })), ((_e = data.overilay) === null || _e === void 0 ? void 0 : _e.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
227
149
  alt: "",
228
150
  className: (0, _classnames["default"])('video-img', {
229
- cover: (_g = data.video) === null || _g === void 0 ? void 0 : _g.sourceUrl
151
+ cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
230
152
  }),
231
153
  src: img,
232
154
  style: {
@@ -1,78 +1,50 @@
1
1
  .slide-image-video-wrap {
2
2
  position: relative;
3
3
  transition: border-radius 0.2s ease;
4
- overflow: hidden;
5
4
  display: flex;
5
+ border-radius: 16px;
6
6
  --dx: calc(var(--size) - var(--x));
7
7
  --dy: calc(var(--size) - var(--y));
8
- cursor: url('./imgs/cursor.png'), pointer;
9
8
 
10
- // &.hover {
11
- // border-radius:
12
- // ~"calc(var(--x)/var(--size)*100%)"
13
- // ~"calc(var(--dx)/var(--size)*100%)"
14
- // ~"calc(var(--dx)/var(--size)*100%)"
15
- // ~"calc(var(--x)/var(--size)*100%) /"
16
- // ~"calc(var(--y)/var(--size)*100%)"
17
- // ~"calc(var(--y)/var(--size)*100%)"
18
- // ~"calc(var(--dy)/var(--size)*100%)"
19
- // ~"calc(var(--dy)/var(--size)*100%)";
20
- // }
21
-
22
- &.topLeft {
23
- border-radius:
24
- ~"calc(var(--x)/var(--size)*100%)"
25
- ~"0"
26
- ~"0"
27
- ~"0 /"
28
- ~"calc(var(--y)/var(--size)*100%)"
29
- ~"0"
30
- ~"0"
31
- ~"0";
9
+ &.cursor {
10
+ cursor: url('./imgs/cursor.png'), pointer;
32
11
  }
33
12
 
34
- &.topRight {
35
- border-radius:
36
- ~"0"
37
- ~"calc(var(--x)/var(--size)*100%)"
38
- ~"0"
39
- ~"0 /"
40
- ~"0"
41
- ~"calc(var(--y)/var(--size)*100%)"
42
- ~"0"
43
- ~"0";
13
+ &:hover {
14
+ box-shadow: 0px 12px 48px 0px #00000029;
44
15
  }
45
16
 
46
- &.bottomRight {
47
- border-radius:
48
- ~"0"
49
- ~"0"
50
- ~"calc(var(--x)/var(--size)*100%)"
51
- ~"0 /"
52
- ~"0"
53
- ~"0"
54
- ~"calc(var(--y)/var(--size)*100%)"
55
- ~"0";
17
+ &:after {
18
+ content: '';
19
+ display: block;
20
+ width: 180%;
21
+ height: 180%;
22
+ min-height: 100vw / 2.5;
23
+ position: absolute;
24
+ transform: translate(-20%, -20%) scale(0);
25
+ opacity: 0;
26
+ z-index: -1;
27
+ background-image: url('./imgs/d.png');
28
+ background-size: 100%;
29
+ background-repeat: no-repeat;
30
+ background-position: center;
31
+ transition: all 0.3s ease-out;
32
+ pointer-events: none;
56
33
  }
57
34
 
58
- &.bottomLeft {
59
- border-radius:
60
- ~"0"
61
- ~"0"
62
- ~"0"
63
- ~"calc(var(--x)/var(--size)*100%) /"
64
- ~"0"
65
- ~"0"
66
- ~"0"
67
- ~"calc(var(--y)/var(--size)*100%)";
35
+ &:hover:after {
36
+ transform: translate(-20%, -20%) scale(1);
37
+ opacity: 1;
68
38
  }
69
39
 
70
40
  video {
71
41
  width: 100%;
42
+ border-radius: 16px;
72
43
  }
73
44
 
74
45
  .video-img {
75
46
  width: 100%;
47
+ border-radius: 16px;
76
48
 
77
49
  &.cover {
78
50
  position: absolute;
@@ -263,7 +263,9 @@ function (_super) {
263
263
  }
264
264
  }, /*#__PURE__*/_react["default"].createElement("div", {
265
265
  ref: this.textRef,
266
- className: (0, _classnames["default"])('m-meta-text', className),
266
+ className: (0, _classnames["default"])('m-meta-text', className, {
267
+ cursor: data.content.clickUrl
268
+ }),
267
269
  dangerouslySetInnerHTML: {
268
270
  __html: data.html || data.text
269
271
  },
@@ -279,7 +281,9 @@ function (_super) {
279
281
 
280
282
  return /*#__PURE__*/_react["default"].createElement("div", {
281
283
  ref: this.textRef,
282
- className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className),
284
+ className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className, {
285
+ cursor: data.content.clickUrl
286
+ }),
283
287
  dangerouslySetInnerHTML: {
284
288
  __html: data.html || data.text
285
289
  },
@@ -56,6 +56,9 @@
56
56
  .m-meta-text {
57
57
  display: block;
58
58
 
59
+ &.cursor {
60
+ cursor: pointer;
61
+ }
59
62
 
60
63
  ol,
61
64
  ul,
@@ -282,7 +282,6 @@ function (_super) {
282
282
  split: true,
283
283
  title: "URL"
284
284
  }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
285
- disabled: true,
286
285
  onChange: function onChange(v) {
287
286
  textData.clickUrl = v;
288
287
 
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.153",
4
+ "version": "1.0.154",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",