@fonixtree/magic-design 0.1.58 → 0.1.59

package/es/composite-comp/bol/components/ImageText/mobile/index.less

@@ -1,234 +1,293 @@
 .image-text-mobile {
-  padding: 0.34rem 0;
-}
-.image-text-mobile .headline {
-  margin-bottom: 0.16rem;
-}
-.image-text-mobile .subtitle {
-  margin-bottom: 0.72rem;
-}
-.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-first-btn,
-.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-second-btn {
-  width: fit-content;
-}
-.image-text-mobile .btn-wrap {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-.image-text-mobile .btn-wrap .first-btn {
-  margin-top: 0.72rem;
-}
-.image-text-mobile .btn-wrap .second-btn {
-  margin-top: 0.72rem;
-  margin-left: 0.24rem;
-}
-.normal1 .group-wrap {
-  padding: 0 0.3rem;
-  width: 100%;
-}
-.normal1 .group-wrap .one-card {
-  display: flex;
-  align-items: stretch;
-  padding: 0.36rem;
-  margin-bottom: 0.16rem;
-}
-.normal1 .group-wrap .one-card:last-of-type {
-  margin-bottom: 0;
-}
-.normal1 .group-wrap .one-card .card-image-wrap {
-  flex-shrink: 0;
-  margin-right: 0.24rem;
-}
-.normal1 .group-wrap .one-card .card-content-wrap {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 0.12rem;
-  text-align: left !important;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-text {
-  margin-bottom: 0.24rem;
-  text-align: left !important;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap {
-  display: flex;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-left: 0.24rem;
-}
-.normal2 .group-wrap {
-  width: 100%;
-  padding: 0 0.3rem;
-}
-.normal2 .group-wrap .one-card {
-  width: 100%;
-  padding: 0.4rem 0.32rem;
-  margin-bottom: 0.72rem;
-}
-.normal2 .group-wrap .one-card:last-of-type {
-  margin-bottom: 0;
-}
-.normal2 .group-wrap .one-card .card-image-wrap .card-image {
-  width: fit-content;
-  margin: 0 auto;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 0.16rem;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-text {
-  margin-bottom: 0.32rem;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap {
-  display: flex;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-left: 0.24rem;
-}
-.normal3 .group-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: 0 0.3rem;
-}
-.normal3 .group-wrap .one-card {
-  display: flex;
-  flex-direction: column;
-}
-.normal3 .group-wrap .one-card .card-image-wrap {
-  width: 100%;
-  padding: 0.16rem;
-}
-.normal3 .group-wrap .one-card .card-image-wrap .card-image {
-  width: fit-content;
-  margin: 0 auto;
-}
-.normal3 .group-wrap .one-card .card-title {
-  margin-bottom: 0.08rem;
-}
-.normal3 .group-wrap .one-card .card-text {
-  margin-bottom: 0.14rem;
-}
-.normal3 .group-wrap .one-card .card-btn-wrap {
-  display: flex;
-  flex-direction: column;
-}
-.normal3 .group-wrap .one-card .card-first-btn,
-.normal3 .group-wrap .one-card .card-second-btn {
-  margin-bottom: 0.16rem;
-}
-.normal3 .group-wrap .card-margin-bottom {
-  margin-bottom: 0.2rem;
-}
-.outsideM .group-wrap {
-  padding: 0 0.3rem;
-  width: 100%;
-}
-.outsideM .group-wrap .one-card {
-  margin-top: 0.7rem;
-  position: relative;
-  padding: 0.6rem 0.2rem 0.4rem 0.72rem;
-}
-.outsideM .group-wrap .one-card .card-image-wrap {
-  position: absolute;
-  left: 0.36rem;
-  top: 0;
-  transform: translateY(-50%);
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 0.08rem;
-  text-align: left !important;
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-text {
-  margin-bottom: 0.24rem;
-  text-align: left !important;
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap {
-  display: flex;
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-left: 0.24rem;
-}
-.centerM .group-wrap {
-  position: relative;
-  width: 100%;
-}
-.centerM .group-wrap::before {
-  content: '';
-  position: absolute;
-  width: 0.02rem;
-  height: 100%;
-  border-right: 0.02rem dashed #D2D9E5;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.centerM .group-wrap .one-card {
-  width: calc((100% - 0.02rem)/2);
-  position: relative;
-  padding: 0 0.28rem 0.32rem;
-}
-.centerM .group-wrap .one-card::before {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-  background: #2F54EB;
-  width: 0.2rem;
-  height: 0.2rem;
-  z-index: 10;
-  border: 0.04rem solid #CCE3FF;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) {
-  left: 0;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1)::before {
-  right: -0.1rem;
-  top: 0.1rem;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-title,
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-text {
-  text-align: right !important;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap {
-  flex-direction: row-reverse;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap .card-image-wrap {
-  margin-left: 0.16rem;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-btn-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n) {
-  left: 50%;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n)::before {
-  left: -0.1rem;
-  top: 0.1rem;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-title,
-.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-text {
-  text-align: left !important;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .image-subtext-wrap .card-image-wrap {
-  margin-right: 0.16rem;
-}
-.centerM .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 0.2rem;
-}
-.centerM .group-wrap .one-card .card-content-wrap .image-subtext-wrap {
-  display: flex;
-  margin-bottom: 0.4rem;
-  align-items: center;
-}
-.centerM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-top: 0.24rem;
-}
+  // display: flex;
+  // flex-direction: column;
+  padding: 17px 0;
+  .headline {
+    margin-bottom: 8px;
+  }
+  .subtitle {
+    margin-bottom: 36px;
+  }
+  .group-wrap .one-card .card-btn-wrap {
+    .card-first-btn, .card-second-btn {
+      width: fit-content;
+    }
+  }
+
+  .btn-wrap {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+
+    .first-btn {
+      margin-top: 36px;
+    }
+    .second-btn {
+      margin-top: 36px;
+      margin-left: 12px;
+    }
+  }
+}
+.normal1 {
+  .group-wrap {
+    padding: 0 15px;
+    width: 100%;
+    .one-card {
+      display: flex;
+      align-items: stretch;
+      padding: 18px;
+      margin-bottom: 8px;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+      .card-image-wrap {
+        flex-shrink: 0;
+        margin-right: 12px;
+      }
+      .card-content-wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .card-title {
+          margin-bottom: 6px;
+          text-align: left !important;
+        }
+        .card-text {
+          margin-bottom: 12px;
+          text-align: left !important;
+        }
+        .card-btn-wrap {
+          display: flex;
+          .card-second-btn {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.normal2 {
+  .group-wrap {
+    width: 100%;
+    padding: 0 15px;
+    .one-card {
+      width: 100%;
+      padding: 20px 16px;
+      margin-bottom: 36px;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+      .card-image-wrap {
+        .card-image {
+          width: fit-content;
+          margin: 0 auto;
+        }
+      }
+      .card-content-wrap {
+        .card-title {
+          margin-bottom: 8px;
+        }
+        .card-text {
+          margin-bottom: 16px;
+        }
+        .card-btn-wrap {
+          display: flex;
+          .card-second-btn {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+.normal3 {
+  .group-wrap {
+    display: flex;
+    // margin-bottom: 36px;
+    // margin-top: 36px;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: 0 15px;
+
+    .one-card {
+      display: flex;
+      flex-direction: column;
+      .card-image-wrap {
+        width: 100%;
+        padding: 8px;
+        .card-image {
+          // max-height: 107px;
+          width: fit-content;
+          margin: 0 auto;
+        }
+      }
+
+      .card-title {
+        margin-bottom: 4px;
+      }
+
+      .card-text {
+        margin-bottom: 7px;
+      }
+      .card-btn-wrap {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card-first-btn, .card-second-btn {
+        margin-bottom: 8px;
+      }
+    }
+    .card-margin-bottom {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.outsideM {
+  .group-wrap {
+    padding: 0 15px;
+    width: 100%;
+    .one-card {
+      margin-top: 35px;
+      position: relative;
+      padding: 30px 10px 20px 36px;
+      .card-image-wrap  {
+        position: absolute;
+        left: 18px;
+        top: 0;
+        transform: translateY(-50%);
+      }
+      .card-content-wrap {
+        .card-title {
+          margin-bottom: 4px;
+          text-align: left !important;
+        }
+        .card-text {
+          margin-bottom: 12px;
+          text-align: left !important;
+        }
+        .card-btn-wrap {
+          display: flex;
+          .card-second-btn {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.centerM {
+  .group-wrap {
+    position: relative;
+    width: 100%;
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 100%;
+      border-right: 1px dashed #D2D9E5;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .one-card {
+      width: calc((100% - 1px)/2);
+      position: relative;
+      padding: 0 14px 16px;
+      &::before {
+        content: '';
+        position: absolute;
+        border-radius: 50%;
+        background: #2F54EB;
+        width: 10px;
+        height: 10px;
+        z-index: 10;
+        border: 2px solid #CCE3FF;
+      }
+      // &::before {
+      //   opacity: 0.2;
+      //   width: 10px;
+      //   height: 10px;
+      // }
+      &:nth-of-type(2n-1) {
+        left: 0;
+        &::before {
+          right: -5px;
+          top: 5px;
+        }
+        // &::after {
+        //   right: -3px;
+        //   top: 7px;
+        // }
+        .card-content-wrap {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          .card-title, .card-text {
+            text-align: right !important;
+          }
+          .image-subtext-wrap {
+            flex-direction: row-reverse;
+            .card-image-wrap {
+              margin-left: 8px;
+            }
+            // .card-text {
+            //   .m-meta-text {
+            //     text-align: right !important;
+            //   }
+            // }
+          }
+          .card-btn-wrap {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+          }
+        }
+      }
+      &:nth-of-type(2n) {
+        left: 50%;
+        &::before {
+          left: -5px;
+          top: 5px;
+        }
+        // &::after {
+        //   left: -3px;
+        //   top: 7px;
+        // }
+        .card-content-wrap {
+          .card-title, .card-text {
+            text-align: left !important;
+          }
+          .image-subtext-wrap {
+            .card-image-wrap {
+              margin-right: 8px;
+            }
+            // .card-text {
+            //   .m-meta-text {
+            //     text-align: left !important;
+            //   }
+            // }
+          }
+        }
+      }
+      .card-content-wrap {
+        .card-title {
+          margin-bottom: 10px;
+        }
+        .image-subtext-wrap {
+          display: flex;
+          margin-bottom: 20px;
+          align-items: center;
+        }
+        .card-btn-wrap {
+          .card-second-btn {
+            margin-top: 12px;
+          }
+        }
+      }
+    }
+  }
+}

package/es/composite-comp/bol/components/Video/components/VideoTag/index.js

@@ -21,6 +21,8 @@ require("./index.less");
 
 var _AlignSelector = require("../../../../../../common/AlignSelector");
 
+var _coreUtil = require("../../../../../../utils/coreUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -49,6 +51,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var debug = require('debug')('worker:VideoTag');
 
 var VideoTag =
@@ -73,15 +91,35 @@ function (_super) {
         padding = _a.padding,
         share = _a.share,
         layout = _a.layout,
-        align = _a.align,
-        GAData = _a.GAData;
+        customize = _a.customize,
+        GAData = _a.GAData,
+        _c = _a.notVertical,
+        notVertical = _c === void 0 ? false : _c;
+    var align = customize.align,
+        vertical = customize.vertical;
     var showBtn = data.video.playButton == 'Bottom Left' && !['h5-layout3', 'pc-layout4', 'pc-layout5'].includes(layout);
+    var distanceObj = {};
+
+    if (!notVertical) {
+      if (vertical === 'top') {
+        distanceObj.top = (0, _coreUtil.isPc)() ? 40 : 12;
+        distanceObj.bottom = 'unset';
+      } else if (vertical === 'center') {
+        distanceObj.top = '50%';
+        distanceObj.bottom = 'unset';
+        distanceObj.transform = 'translateY(-50%)';
+      } else {
+        //  if (vertical === 'bottom')
+        distanceObj.bottom = (0, _coreUtil.isPc)() ? 40 : 12;
+      }
+    }
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-tag-container",
-      style: (0, _commonUtil.pxToRem)({
+      style: (0, _commonUtil.pxToRem)(__assign({
         position: position,
         padding: padding
-      })
+      }, distanceObj))
     }, showBtn && /*#__PURE__*/_react["default"].createElement("div", {
       className: "left-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -136,7 +174,8 @@ function (_super) {
 
   VideoTag.defaultProps = {
     data: {},
-    noShare: false
+    noShare: false,
+    notVertical: false
   };
   return VideoTag;
 }(_react["default"].Component);

package/es/composite-comp/bol/components/Video/components/VideoTag/index.less

@@ -3,7 +3,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  padding-bottom: 10px;
+  // padding-bottom: 10px;
   display: flex;
   align-items: center;
 
@@ -53,11 +53,11 @@
       }
 
       .first-button {
-        margin: 5px;
+        margin: 0 5px;
       }
 
       .secondary-button {
-        margin: 5px;
+        margin: 0 5px;
       }
     }
 

package/es/composite-comp/bol/components/Video/mobile/Layout1/index.js

@@ -162,7 +162,7 @@ function (_super) {
       })), data.share.open && !isPlaying && /*#__PURE__*/_react["default"].createElement(_index["default"], {
         data: data
       }), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,