@fonixtree/magic-design 0.0.93 → 0.0.96

package/lib/core/Designer/ViewArea/index.js

@@ -164,6 +164,8 @@ function (_super) {
       style: {
         background: window.magicDesign.pageBackground
       }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "device_content"
     }, this.filterCompFloor(pageData).map(function (nodeData) {
       var Clazz = _componentTypes.componentMap[nodeData.type];
 
@@ -179,7 +181,7 @@ function (_super) {
         key: nodeData.id,
         id: "view" + nodeData.id
       }, /*#__PURE__*/_react["default"].createElement(Clazz, __assign({}, newInstanceProps), null));
-    }))));
+    })))));
   };
 
   return ViewArea;

package/lib/core/Designer/ViewArea/index.less

@@ -8,19 +8,22 @@
   transition-property: all;
   transition-duration: .3s;
   transition-timing-function: ease;
+
   .appointment_wrap {
     height: 44px;
     background-color: #FFF8F0;
     display: flex;
     align-items: center;
     justify-content: center;
-    .appointment_tip{
+
+    .appointment_tip {
       font-family: 'Open Sans';
       font-style: normal;
       font-weight: 400;
       font-size: 13px;
-      color:#FF8541;
+      color: #FF8541;
     }
+
     .cancel_btn {
       font-family: 'Open Sans';
       font-style: normal;
@@ -37,21 +40,24 @@
       cursor: pointer;
     }
   }
+
   &.phone-edit {
     margin-left: 355px;
   }
+
   .phone_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px 0;
+
     .device_border {
       width: 375px;
       max-height: 691px;
       height: calc(100vh - 150px);
       overflow: scroll;
-      overflow-x:hidden;
+      overflow-x: hidden;
       border: 10px solid #FFF;
       background-color: #F2F2F2;
       border-radius: 12px;
@@ -59,12 +65,14 @@
 
     }
   }
+
   .pc_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
+
     .device_border {
       padding: 1px;
       max-width: 1240px;
@@ -77,6 +85,9 @@
       overflow: scroll;
       box-sizing: content-box;
 
+      .device_content {
+        min-width: 1200px;
+      }
     }
   }
 }

package/lib/decorator/compositeDecorator.js

@@ -123,8 +123,9 @@ function compositeDecorator(WrappedComponent) {
               wrapStyle.opacity = background.opacity ? background.opacity : 1;
             } else {
               wrapStyle.backgroundImage = "url(" + background.image + ")";
-              wrapStyle.backgroundPosition = 'center';
-              wrapStyle.backgroundSize = 'cover';
+              wrapStyle.backgroundPosition = '0px 0px';
+              wrapStyle.backgroundSize = 'auto 100%';
+              wrapStyle.backgroundRepeat = 'no-repeat';
             }
           }
         }

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

@@ -11,7 +11,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _defaultImg = _interopRequireDefault(require("./image/default-img.png"));
+var _h5DefImg = _interopRequireDefault(require("./image/h5DefImg.png"));
+
+var _pcDefImg = _interopRequireDefault(require("./image/pcDefImg.png"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
@@ -175,9 +177,10 @@ function (_super) {
     }
 
     if (!srcImg) {
-      srcImg = _defaultImg["default"];
+      srcImg = (0, _coreUtil.isPc)() ? _pcDefImg["default"] : _h5DefImg["default"];
     }
 
+    var areas = data.content.openHotArea && ((0, _coreUtil.isPc)() ? data.content.pcAreas : data.content.h5Areas);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-image', {
         backgroundImg: isBackground
@@ -198,7 +201,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: this.getStyle()
-    }), data.content.areas && data.content.areas.length > 0 && data.content.areas.map(function (v, i) {
+    }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
         top: parseInt(v.y * _this.state.scale),

package/package.json

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