@fonixtree/magic-design 1.0.152 → 1.0.154

package/es/common/ProductCardModal/index.js

@@ -63,7 +63,8 @@ function ProductCardModal(_a) {
   };
 
   var randomRotateY = function randomRotateY() {
-    return Math.floor(Math.random() * 21) - 10;
+    // return Math.floor(Math.random() * 21) - 10;
+    return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
   };
 
   var handleScroll = function handleScroll(e) {

package/es/common/ProductCardModal/index.less

@@ -61,6 +61,7 @@
         top: 5%;
         right: 5%;
         cursor: pointer;
+        z-index: 3;
       }
 
       .dotIcon {
@@ -96,6 +97,7 @@
         position: absolute;
         bottom: 25%;
         left: 55%;
+        z-index: 3;
         cursor: pointer;
       }
     }

package/es/composite-comp/dito/components/SearchBanner/mobile/index.js

@@ -29,6 +29,8 @@ var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _mobx = require("../../../../../mobx");
 
+var _locale = require("../../../../../locale");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -218,7 +220,7 @@ function (_super) {
           if (window.magicDesign.pushGA) {
             window.magicDesign.pushGA({}, 'select_promotion', {
               event_section: 'Search_Banner',
-              promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : i18n('BANNER_GROUP_NAME')
+              promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME')
             });
           }
         }

package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js

@@ -80,12 +80,13 @@ function (_super) {
         return (0, _coreUtil.clickUrl)(data.clickUrl || '');
       }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
+      cursor: data.clickUrl || '',
       data: data
     }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "text",
       data: data.groupName,
       style: {
-        pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
+        cursor: data.clickUrl ? 'pointer' : 'unset'
       }
     })));
   };

package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less

@@ -1,6 +1,4 @@
 .slide-image-card-item-wrap {
-  cursor: pointer;
-
   .text {
     margin-top: 20px;
   }

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -51,13 +49,11 @@ function (_super) {
 
     _this.state = {
       playing: false,
-      inside: false,
-      isNearCenter: false,
-      flag: false,
-      corner: ''
+      videoPoster: ''
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     _this.cardRef = /*#__PURE__*/_react["default"].createRef();
+    _this.canvasRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -81,85 +77,38 @@ function (_super) {
       _this.setState({
         playing: false
       });
-    }; // 获取元素中心坐标
-
-
-    _this.getCenter = function (element) {
-      var rect = element.getBoundingClientRect();
-      return {
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2
-      };
-    }; // 判断是否在中心区域
-
-
-    _this.checkMouseNearCenter = function (e, radius) {
-      if (radius === void 0) {
-        radius = 20;
-      }
-
-      var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
-
-
-      var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
-      return distance <= radius;
-    }; // 判断鼠标方位
-
-
-    _this.getMousePos = function (e) {
-      var rect = e.target.getBoundingClientRect();
-      var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
-
-      var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
-      // 判断区域
-
-      var isLeft = x < rect.width / 2;
-      var isTop = y < rect.height / 2;
-      var corner = '';
-      if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
-      return corner;
-    };
-
-    _this.handleMouseMove = (0, _lodash["default"])(function (e) {
-      var dom = _this.cardRef.current;
-      var size = parseInt(getComputedStyle(dom).width);
-      var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
-
-      var y = size * 0.5 + e.offsetY * 0.5;
-      dom.style.setProperty('--x', x);
-      dom.style.setProperty('--y', y);
-      dom.style.setProperty('--size', size);
-
-      var isNear = _this.checkMouseNearCenter(e);
-
-      var corner = _this.getMousePos(e);
-
-      if (isNear) _this.setState({
-        flag: true
-      });
-
-      _this.setState({
-        isNearCenter: isNear,
-        inside: true,
-        corner: corner
-      });
-    });
-
-    _this.handleMouseLeave = function () {
-      _this.setState({
-        inside: false,
-        flag: false,
-        corner: ''
-      });
     };
 
     return _this;
   }
 
   VideoItem.prototype.componentDidMount = function () {
+    var _this = this;
+
     var dom = this.cardRef.current;
     dom.addEventListener('mousemove', this.handleMouseMove);
     dom.addEventListener('mouseleave', this.handleMouseLeave);
+
+    if (this.videoRef.current) {
+      var video_1 = this.videoRef.current;
+      var canvas_1 = this.canvasRef.current;
+      video_1.addEventListener('loadedmetadata', function () {
+        // 确保跳转到第一帧
+        video_1.currentTime = 0;
+      });
+      video_1.addEventListener('seeked', function () {
+        // 设置Canvas尺寸与视频一致
+        canvas_1.width = video_1.offsetWidth;
+        canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
+
+        var ctx = canvas_1.getContext('2d');
+        ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
+
+        _this.setState({
+          videoPoster: canvas_1.toDataURL('image/png')
+        });
+      });
+    }
   };
 
   VideoItem.prototype.componentWillUnmount = function () {
@@ -169,23 +118,23 @@ function (_super) {
   };
 
   VideoItem.prototype.render = function () {
-    var _a;
-
-    var _b, _c, _d, _e, _f;
-
-    var data = this.props.data;
-    var _g = this.state,
-        playing = _g.playing,
-        inside = _g.inside,
-        isNearCenter = _g.isNearCenter,
-        flag = _g.flag,
-        corner = _g.corner;
+    var _a, _b, _c, _d, _e, _f;
+
+    var _g = this.props,
+        data = _g.data,
+        cursor = _g.cursor;
+    var _h = this.state,
+        playing = _h.playing,
+        videoPoster = _h.videoPoster;
+    var img = ((_b = (_a = data.overilay) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcImgSrc) || videoPoster;
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.cardRef,
-      className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
+      className: (0, _classnames["default"])('slide-image-video-wrap', {
+        cursor: cursor
+      }),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
-    }, ((_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
+    }, ((_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
       loop: true,
       muted: true,
@@ -194,15 +143,19 @@ function (_super) {
         visibility: playing ? 'visible' : 'hidden'
       }
     }, /*#__PURE__*/_react["default"].createElement("source", {
-      src: (_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl,
+      src: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl,
       type: "video/mp4"
-    })), ((_d = data.overilay) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("img", {
+    })), ((_e = data.overilay) === null || _e === void 0 ? void 0 : _e.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "video-img",
-      src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
+      className: (0, _classnames["default"])('video-img', {
+        cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
+      }),
+      src: img,
       style: {
         visibility: playing ? 'hidden' : 'visible'
       }
+    }), /*#__PURE__*/_react["default"].createElement("canvas", {
+      ref: this.canvasRef
     }));
   };
 

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -1,84 +1,65 @@
 .slide-image-video-wrap {
   position: relative;
   transition: border-radius 0.2s ease;
-  overflow: hidden;
-  cursor: pointer;
+  display: flex;
+  border-radius: 16px;
   --dx: calc(var(--size) - var(--x));
   --dy: calc(var(--size) - var(--y));
 
-  // &.hover {
-  // border-radius:
-  //   ~"calc(var(--x)/var(--size)*100%)"
-  //   ~"calc(var(--dx)/var(--size)*100%)"
-  //   ~"calc(var(--dx)/var(--size)*100%)"
-  //   ~"calc(var(--x)/var(--size)*100%) /"
-  //   ~"calc(var(--y)/var(--size)*100%)"
-  //   ~"calc(var(--y)/var(--size)*100%)"
-  //   ~"calc(var(--dy)/var(--size)*100%)"
-  //   ~"calc(var(--dy)/var(--size)*100%)";
-  // }
-
-  &.topLeft {
-    border-radius:
-      ~"calc(var(--x)/var(--size)*100%)"
-      ~"0"
-      ~"0"
-      ~"0 /"
-      ~"calc(var(--y)/var(--size)*100%)"
-      ~"0"
-      ~"0"
-      ~"0";
+  &.cursor {
+    cursor: url('./imgs/cursor.png'), pointer;
   }
 
-  &.topRight {
-    border-radius:
-      ~"0"
-      ~"calc(var(--x)/var(--size)*100%)"
-      ~"0"
-      ~"0 /"
-      ~"0"
-      ~"calc(var(--y)/var(--size)*100%)"
-      ~"0"
-      ~"0";
+  &:hover {
+    box-shadow: 0px 12px 48px 0px #00000029;
   }
 
-  &.bottomRight {
-    border-radius:
-      ~"0"
-      ~"0"
-      ~"calc(var(--x)/var(--size)*100%)"
-      ~"0 /"
-      ~"0"
-      ~"0"
-      ~"calc(var(--y)/var(--size)*100%)"
-      ~"0";
+  &:after {
+    content: '';
+    display: block;
+    width: 180%;
+    height: 180%;
+    min-height: 100vw / 2.5;
+    position: absolute;
+    transform: translate(-20%, -20%) scale(0);
+    opacity: 0;
+    z-index: -1;
+    background-image: url('./imgs/d.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all 0.3s ease-out;
+    pointer-events: none;
   }
 
-  &.bottomLeft {
-    border-radius:
-      ~"0"
-      ~"0"
-      ~"0"
-      ~"calc(var(--x)/var(--size)*100%) /"
-      ~"0"
-      ~"0"
-      ~"0"
-      ~"calc(var(--y)/var(--size)*100%)";
+  &:hover:after {
+    transform: translate(-20%, -20%) scale(1);
+    opacity: 1;
   }
 
   video {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    object-fit: cover;
     width: 100%;
-    height: 100%;
-    z-index: 2;
+    border-radius: 16px;
   }
 
   .video-img {
     width: 100%;
+    border-radius: 16px;
+
+    &.cover {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+  }
+
+  canvas {
+    display: none;
   }
 }

package/es/meta-comp/components/Text/index.js

@@ -263,7 +263,9 @@ function (_super) {
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.textRef,
-        className: (0, _classnames["default"])('m-meta-text', className),
+        className: (0, _classnames["default"])('m-meta-text', className, {
+          cursor: data.content.clickUrl
+        }),
         dangerouslySetInnerHTML: {
           __html: data.html || data.text
         },
@@ -279,7 +281,9 @@ function (_super) {
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,
-      className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className),
+      className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className, {
+        cursor: data.content.clickUrl
+      }),
       dangerouslySetInnerHTML: {
         __html: data.html || data.text
       },

package/es/meta-comp/components/Text/index.less

@@ -56,6 +56,9 @@
 .m-meta-text {
   display: block;
 
+  &.cursor {
+    cursor: pointer;
+  }
 
   ol,
   ul,

package/lib/common/ProductCardModal/index.js

@@ -63,7 +63,8 @@ function ProductCardModal(_a) {
   };
 
   var randomRotateY = function randomRotateY() {
-    return Math.floor(Math.random() * 21) - 10;
+    // return Math.floor(Math.random() * 21) - 10;
+    return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
   };
 
   var handleScroll = function handleScroll(e) {

package/lib/common/ProductCardModal/index.less

@@ -61,6 +61,7 @@
         top: 5%;
         right: 5%;
         cursor: pointer;
+        z-index: 3;
       }
 
       .dotIcon {
@@ -96,6 +97,7 @@
         position: absolute;
         bottom: 25%;
         left: 55%;
+        z-index: 3;
         cursor: pointer;
       }
     }

package/lib/composite-comp/dito/components/SearchBanner/mobile/index.js

@@ -29,6 +29,8 @@ var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _mobx = require("../../../../../mobx");
 
+var _locale = require("../../../../../locale");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -218,7 +220,7 @@ function (_super) {
           if (window.magicDesign.pushGA) {
             window.magicDesign.pushGA({}, 'select_promotion', {
               event_section: 'Search_Banner',
-              promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : i18n('BANNER_GROUP_NAME')
+              promotion_name: item.image.content.h5ImgSrc ? item.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME')
             });
           }
         }

package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js

@@ -80,12 +80,13 @@ function (_super) {
         return (0, _coreUtil.clickUrl)(data.clickUrl || '');
       }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
+      cursor: data.clickUrl || '',
       data: data
     }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "text",
       data: data.groupName,
       style: {
-        pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
+        cursor: data.clickUrl ? 'pointer' : 'unset'
       }
     })));
   };

package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less

@@ -1,6 +1,4 @@
 .slide-image-card-item-wrap {
-  cursor: pointer;
-
   .text {
     margin-top: 20px;
   }

package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -51,13 +49,11 @@ function (_super) {
 
     _this.state = {
       playing: false,
-      inside: false,
-      isNearCenter: false,
-      flag: false,
-      corner: ''
+      videoPoster: ''
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     _this.cardRef = /*#__PURE__*/_react["default"].createRef();
+    _this.canvasRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -81,85 +77,38 @@ function (_super) {
       _this.setState({
         playing: false
       });
-    }; // 获取元素中心坐标
-
-
-    _this.getCenter = function (element) {
-      var rect = element.getBoundingClientRect();
-      return {
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2
-      };
-    }; // 判断是否在中心区域
-
-
-    _this.checkMouseNearCenter = function (e, radius) {
-      if (radius === void 0) {
-        radius = 20;
-      }
-
-      var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
-
-
-      var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
-      return distance <= radius;
-    }; // 判断鼠标方位
-
-
-    _this.getMousePos = function (e) {
-      var rect = e.target.getBoundingClientRect();
-      var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
-
-      var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
-      // 判断区域
-
-      var isLeft = x < rect.width / 2;
-      var isTop = y < rect.height / 2;
-      var corner = '';
-      if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
-      return corner;
-    };
-
-    _this.handleMouseMove = (0, _lodash["default"])(function (e) {
-      var dom = _this.cardRef.current;
-      var size = parseInt(getComputedStyle(dom).width);
-      var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
-
-      var y = size * 0.5 + e.offsetY * 0.5;
-      dom.style.setProperty('--x', x);
-      dom.style.setProperty('--y', y);
-      dom.style.setProperty('--size', size);
-
-      var isNear = _this.checkMouseNearCenter(e);
-
-      var corner = _this.getMousePos(e);
-
-      if (isNear) _this.setState({
-        flag: true
-      });
-
-      _this.setState({
-        isNearCenter: isNear,
-        inside: true,
-        corner: corner
-      });
-    });
-
-    _this.handleMouseLeave = function () {
-      _this.setState({
-        inside: false,
-        flag: false,
-        corner: ''
-      });
     };
 
     return _this;
   }
 
   VideoItem.prototype.componentDidMount = function () {
+    var _this = this;
+
     var dom = this.cardRef.current;
     dom.addEventListener('mousemove', this.handleMouseMove);
     dom.addEventListener('mouseleave', this.handleMouseLeave);
+
+    if (this.videoRef.current) {
+      var video_1 = this.videoRef.current;
+      var canvas_1 = this.canvasRef.current;
+      video_1.addEventListener('loadedmetadata', function () {
+        // 确保跳转到第一帧
+        video_1.currentTime = 0;
+      });
+      video_1.addEventListener('seeked', function () {
+        // 设置Canvas尺寸与视频一致
+        canvas_1.width = video_1.offsetWidth;
+        canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
+
+        var ctx = canvas_1.getContext('2d');
+        ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
+
+        _this.setState({
+          videoPoster: canvas_1.toDataURL('image/png')
+        });
+      });
+    }
   };
 
   VideoItem.prototype.componentWillUnmount = function () {
@@ -169,23 +118,23 @@ function (_super) {
   };
 
   VideoItem.prototype.render = function () {
-    var _a;
-
-    var _b, _c, _d, _e, _f;
-
-    var data = this.props.data;
-    var _g = this.state,
-        playing = _g.playing,
-        inside = _g.inside,
-        isNearCenter = _g.isNearCenter,
-        flag = _g.flag,
-        corner = _g.corner;
+    var _a, _b, _c, _d, _e, _f;
+
+    var _g = this.props,
+        data = _g.data,
+        cursor = _g.cursor;
+    var _h = this.state,
+        playing = _h.playing,
+        videoPoster = _h.videoPoster;
+    var img = ((_b = (_a = data.overilay) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcImgSrc) || videoPoster;
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.cardRef,
-      className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
+      className: (0, _classnames["default"])('slide-image-video-wrap', {
+        cursor: cursor
+      }),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
-    }, ((_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
+    }, ((_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
       loop: true,
       muted: true,
@@ -194,15 +143,19 @@ function (_super) {
         visibility: playing ? 'visible' : 'hidden'
       }
     }, /*#__PURE__*/_react["default"].createElement("source", {
-      src: (_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl,
+      src: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl,
       type: "video/mp4"
-    })), ((_d = data.overilay) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("img", {
+    })), ((_e = data.overilay) === null || _e === void 0 ? void 0 : _e.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "video-img",
-      src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
+      className: (0, _classnames["default"])('video-img', {
+        cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
+      }),
+      src: img,
       style: {
         visibility: playing ? 'hidden' : 'visible'
       }
+    }), /*#__PURE__*/_react["default"].createElement("canvas", {
+      ref: this.canvasRef
     }));
   };
 

package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -1,84 +1,65 @@
 .slide-image-video-wrap {
   position: relative;
   transition: border-radius 0.2s ease;
-  overflow: hidden;
-  cursor: pointer;
+  display: flex;
+  border-radius: 16px;
   --dx: calc(var(--size) - var(--x));
   --dy: calc(var(--size) - var(--y));
 
-  // &.hover {
-  // border-radius:
-  //   ~"calc(var(--x)/var(--size)*100%)"
-  //   ~"calc(var(--dx)/var(--size)*100%)"
-  //   ~"calc(var(--dx)/var(--size)*100%)"
-  //   ~"calc(var(--x)/var(--size)*100%) /"
-  //   ~"calc(var(--y)/var(--size)*100%)"
-  //   ~"calc(var(--y)/var(--size)*100%)"
-  //   ~"calc(var(--dy)/var(--size)*100%)"
-  //   ~"calc(var(--dy)/var(--size)*100%)";
-  // }
-
-  &.topLeft {
-    border-radius:
-      ~"calc(var(--x)/var(--size)*100%)"
-      ~"0"
-      ~"0"
-      ~"0 /"
-      ~"calc(var(--y)/var(--size)*100%)"
-      ~"0"
-      ~"0"
-      ~"0";
+  &.cursor {
+    cursor: url('./imgs/cursor.png'), pointer;
   }
 
-  &.topRight {
-    border-radius:
-      ~"0"
-      ~"calc(var(--x)/var(--size)*100%)"
-      ~"0"
-      ~"0 /"
-      ~"0"
-      ~"calc(var(--y)/var(--size)*100%)"
-      ~"0"
-      ~"0";
+  &:hover {
+    box-shadow: 0px 12px 48px 0px #00000029;
   }
 
-  &.bottomRight {
-    border-radius:
-      ~"0"
-      ~"0"
-      ~"calc(var(--x)/var(--size)*100%)"
-      ~"0 /"
-      ~"0"
-      ~"0"
-      ~"calc(var(--y)/var(--size)*100%)"
-      ~"0";
+  &:after {
+    content: '';
+    display: block;
+    width: 180%;
+    height: 180%;
+    min-height: 100vw / 2.5;
+    position: absolute;
+    transform: translate(-20%, -20%) scale(0);
+    opacity: 0;
+    z-index: -1;
+    background-image: url('./imgs/d.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all 0.3s ease-out;
+    pointer-events: none;
   }
 
-  &.bottomLeft {
-    border-radius:
-      ~"0"
-      ~"0"
-      ~"0"
-      ~"calc(var(--x)/var(--size)*100%) /"
-      ~"0"
-      ~"0"
-      ~"0"
-      ~"calc(var(--y)/var(--size)*100%)";
+  &:hover:after {
+    transform: translate(-20%, -20%) scale(1);
+    opacity: 1;
   }
 
   video {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    object-fit: cover;
     width: 100%;
-    height: 100%;
-    z-index: 2;
+    border-radius: 16px;
   }
 
   .video-img {
     width: 100%;
+    border-radius: 16px;
+
+    &.cover {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+  }
+
+  canvas {
+    display: none;
   }
 }

package/lib/meta-comp/components/Text/index.js

@@ -263,7 +263,9 @@ function (_super) {
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.textRef,
-        className: (0, _classnames["default"])('m-meta-text', className),
+        className: (0, _classnames["default"])('m-meta-text', className, {
+          cursor: data.content.clickUrl
+        }),
         dangerouslySetInnerHTML: {
           __html: data.html || data.text
         },
@@ -279,7 +281,9 @@ function (_super) {
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,
-      className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className),
+      className: (0, _classnames["default"])('m-meta-text', 'quill-text-content-wrap', className, {
+        cursor: data.content.clickUrl
+      }),
       dangerouslySetInnerHTML: {
         __html: data.html || data.text
       },

package/lib/meta-comp/components/Text/index.less

@@ -56,6 +56,9 @@
 .m-meta-text {
   display: block;
 
+  &.cursor {
+    cursor: pointer;
+  }
 
   ol,
   ul,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "1.0.152",
+  "version": "1.0.154",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",