@fonixtree/magic-design 2.0.216 → 2.0.221

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

@@ -0,0 +1,65 @@
+.m-grouped-carousel-pc {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 48px 0;
+
+  .tab-select-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 46px;
+    overflow: auto;
+    position: relative;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    z-index: 2;
+
+    .tab-title {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      padding: 0 24px;
+      width: fit-content;
+      height: 100%;
+      justify-content: center;
+      white-space: nowrap;
+      flex-direction: column;
+      cursor: pointer;
+    }
+  }
+
+  .tab-content {
+    margin-top: 360px;
+
+    .carousel-img {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      .bgImg {
+        height: 680px;
+      }
+
+    }
+
+    .text-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .text {
+        margin-bottom: 12px;
+      }
+
+      .btn-wrap {
+        display: flex;
+        gap: 24px;
+        justify-content: center;
+        z-index: 2;
+      }
+    }
+  }
+}

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

@@ -11,6 +11,8 @@ var _components = require("../../../../../meta-comp/components");
 
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+require("./index.less");
+
 var _locale = require("../../../../../locale");
 
 var _common = require("../../../../../common");

package/lib/composite-comp/dito/components/MenuNavigation/MenuNavMetaImage/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _h5DefImg = _interopRequireDefault(require("../../../../../meta-comp/components/Image/image/h5DefImg.png"));
 
 var _pcDefImg = _interopRequireDefault(require("../../../../../meta-comp/components/Image/image/pcDefImg.png"));

package/lib/composite-comp/dito/components/MenuNavigation/MenuNavMetaImage/index.less

@@ -0,0 +1,27 @@
+.menu-meta-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  max-height: 65px;
+
+  // overflow: hidden;
+  &>img {
+    width: 100%;
+    // height: 100%;
+    // object-fit: contain;
+    transition: all .2s linear;
+    vertical-align: initial;
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  &.backgroundImg {
+    &>img {
+      // object-fit: cover;
+      // width: auto;
+      max-width: none;
+    }
+  }
+}

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

@@ -11,6 +11,8 @@ var _MenuNavMetaImage = _interopRequireDefault(require("../MenuNavMetaImage"));
 
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _locale = require("../../../../../locale");
 
 var _components = require("../../../../../meta-comp/components");

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+require("./index.less");
+
 var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -0,0 +1,46 @@
+.m-news-pc {
+  .headline {
+    margin-bottom: 5px;
+  }
+
+  .card-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 48px;
+    margin-top: 16px;
+
+    .item {
+      border-radius: 8px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      width: calc(50% - 24px);
+      height: 180px;
+
+      .img {
+        width: 180px;
+        height: 100%;
+        margin-left: -5px;
+
+        img {
+          border-radius: 8px 0 0 8px;
+        }
+      }
+
+      .right {
+        padding: 36px 24px;
+        width: calc(100% - 180px);
+        height: 100%;
+
+        .text {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _Text = require("../../../../../meta-comp/components/Text");
 
 var _components = require("../../../../../meta-comp/components");

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

@@ -0,0 +1,127 @@
+.pc-navigation {
+  display: flex;
+
+  .menu-wrap {
+    // margin-top: 26px;
+    position: relative;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    min-width: 130px;
+
+    // padding: 40px 0;
+    // margin: -40px 44px -40px 0;
+    &:hover {
+      @keyframes show-active {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .category {
+        display: flex;
+
+        &:local {
+          animation: show-active .3s linear both;
+        }
+      }
+
+      // 鼠标移上去，icon变色
+      // .menu-drop {
+      //   .all-category {
+      //     position: relative;
+      //     z-index: 1;
+      //   }
+      //   &>img {
+      //     position: relative;
+      //     left: 30px;
+      //     filter: drop-shadow(#ED2121 -30px 0);
+      //     z-index: -1;
+      //   }
+      // }
+    }
+
+    .menu-drop {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+
+      &>img {
+        width: 16px;
+        margin-right: 10px;
+        font-size: 16px;
+      }
+
+      // &> span {
+      //   color: #3A2E2E;
+      //   font-family: NunitoSans-Bold;
+      //   font-size: 16px;
+      //   line-height: 22px;
+      // }
+    }
+
+    .category {
+      display: none;
+      position: absolute;
+      z-index: 9999;
+      left: 0;
+      bottom: 3px;
+      transform: translateY(100%);
+
+      // :global {
+      .cate-wrap {
+        width: 290px;
+        border: 1px solid #E6EAF0;
+        padding: 8px 0;
+        background-color: #fff;
+
+        .cate-item {
+          cursor: pointer;
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 38px;
+          color: #232F46;
+          display: flex;
+          width: 100%;
+          padding: 0 16px;
+          justify-content: space-between;
+        }
+
+        .cate-active {
+          background: #FCF1F2;
+
+          &>span {
+            color: #CE1126 !important;
+          }
+        }
+      }
+
+      // }
+    }
+  }
+
+  .category-group {
+    display: flex;
+    overflow-x: auto;
+    flex: 1;
+    scroll-snap-type: x;
+
+    .one-category {
+      margin-right: 44px;
+      scroll-snap-align: end;
+      width: fit-content !important;
+      cursor: pointer;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+
+}

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

@@ -33,6 +33,8 @@ var _storeUtil = require("../../../../../utils/storeUtil");
 
 var _common = require("../../../../../common");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

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

@@ -33,6 +33,8 @@ var _storeUtil = require("../../../../../utils/storeUtil");
 
 var _common = require("../../../../../common");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _macy = _interopRequireDefault(require("macy"));
 
+require("./index.less");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _card = _interopRequireDefault(require("./imgs/card.png"));

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _macy = _interopRequireDefault(require("macy"));
 
+require("./index.less");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _debounce = _interopRequireDefault(require("lodash/debounce"));

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

@@ -0,0 +1,124 @@
+.m-recommend-pc {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .cylon-tabs-nav-operations {
+    display: none !important;
+  }
+
+  // ::-webkit-scrollbar {
+  //   width: 0;
+  //   height: 0;
+  //   display: none;
+  // }
+
+  .tab-select-wrap {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    background: rgb(255 255 255);
+    overflow: auto;
+    position: relative;
+    margin-bottom: 15px;
+
+    .tabTitle {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      padding: 0 24px;
+      width: fit-content;
+      height: 100%;
+      justify-content: center;
+      white-space: nowrap;
+      flex-direction: column;
+      cursor: pointer;
+
+      img {
+        height: 24px;
+        width: 24px;
+        margin-bottom: 2px;
+      }
+    }
+
+    .active-line {
+      position: absolute;
+      bottom: 0;
+      width: 200px;
+      height: 3px;
+      background-color: #fff;
+      transition: .2s all linear;
+      border-radius: 1.5px;
+    }
+  }
+
+  .tab-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .tab-list {
+      width: 100%;
+    }
+  }
+
+  .arrow-icon {
+    display: block;
+    width: 36px;
+    height: 36px;
+    line-height: 42px;
+    text-align: center;
+    background: #FFFFFF;
+    box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
+    border-radius: 100px;
+    cursor: pointer;
+
+    &.left {
+      margin-right: 15px;
+    }
+
+    &.right {
+      margin-left: 15px;
+    }
+  }
+
+  .macyContainer {
+    display: flex;
+    margin: 0;
+  }
+
+  .scrollContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    margin: 0;
+    overflow-x: auto;
+    padding-bottom: 15px;
+
+    &.pl_100 {
+      padding-left: 100px;
+    }
+
+    .scrollProductList {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      .productCard {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .btnSeeAll {
+    display: block;
+    width: fit-content;
+    min-width: 80px;
+    flex: none;
+
+    &.line {
+      margin: 0 auto 10px auto;
+    }
+  }
+}

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+require("./index.less");
+
 var _antd = require("antd4");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -19,6 +21,10 @@ var _components = require("../../../../../meta-comp/components");
 
 var _Text = require("../../../../../meta-comp/components/Text");
 
+require("slick-carousel/slick/slick.css");
+
+require("slick-carousel/slick/slick-theme.css");
+
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
 var _coreUtil = require("../../../../../utils/coreUtil");

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _antd = require("antd4");
 
+require("./index.less");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("../../../../../meta-comp/components");

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+require("./index.less");
+
 var _antd = require("antd4");
 
 var _locale = require("../../../../../locale");

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

@@ -0,0 +1,65 @@
+.pc-search-bar {
+  // height: 48px;
+  // padding: 20px 100px 30px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+
+  .right {
+    display: flex;
+    flex: 1;
+    margin-left: 90px;
+    align-items: center;
+    justify-content: space-between;
+
+    .search-input-wrap {
+      border: 1px solid #2F54EB;
+      border-radius: 6px;
+      overflow: hidden;
+      height: 40px;
+      display: flex;
+      flex: 1;
+
+      .search-input {
+        background-color: transparent;
+        border: none;
+        height: 38px;
+        box-shadow: none;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+      }
+
+      .search-icon {
+        cursor: pointer;
+        height: 100%;
+        // width: 40px;
+        text-align: center;
+        padding: 8px;
+        border-radius: 0 4px 4px 0;
+      }
+    }
+
+    .shopping-wrap {
+      border-radius: 4px;
+      margin-left: 16px;
+      padding: 8px 16px;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      border: 1px solid #2F54EB;
+
+      .shopping-txt {
+        margin-left: 6px;
+      }
+    }
+  }
+}

package/lib/composite-comp/dito/components/SearchDITO/pc/components/ConfirmModal/index.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _locale = require("../../../../../../../locale");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/composite-comp/dito/components/SearchDITO/pc/components/ConfirmModal/index.less

@@ -0,0 +1,69 @@
+.search-dito-confirm-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .modal-shadow {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+  }
+
+  .modal-content {
+    background-color: #fff;
+    width: 400px;
+    max-height: 90%;
+    padding: 16px;
+    margin-top: -30px;
+    border-radius: 24px;
+
+    .modal-title {
+      text-align: center;
+      margin: 20px auto;
+    }
+
+    .modal-btn-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+
+      div {
+        padding: 12px 0;
+        width: 100px;
+        text-align: center;
+        border-radius: 50px;
+        font-size: 16px;
+        color: #2c2c2c;
+        font-weight: 600;
+        background-color: #fff;
+        border: 1px solid #cecece;
+        cursor: pointer;
+
+        &:nth-child(2) {
+          background-color: #ce1126;
+          color: #fff;
+          border-color: #ce1126;
+        }
+      }
+    }
+  }
+}
+
+
+@media (min-width: 750px) {
+  .search-dito-confirm-modal {
+
+    .modal-content {}
+  }
+}

package/lib/composite-comp/dito/components/SearchDITO/pc/components/Header/index.js

@@ -25,6 +25,12 @@ var _components = require("../../../../../../../meta-comp/components");
 
 var _businessUtil = require("../../../../../../../utils/businessUtil");
 
+require("slick-carousel/slick/slick.css");
+
+require("slick-carousel/slick/slick-theme.css");
+
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {