@antv/dumi-theme-antv 0.1.0

package/es/antv/Cases/Cases.js

@@ -0,0 +1,124 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { Link } from 'react-router-dom';
+import Slider from 'react-slick';
+import classNames from 'classnames';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css'; // @ts-ignore
+
+import styles from './Cases.module.less';
+
+var Cases = function Cases(_ref) {
+  var _ref$cases = _ref.cases,
+      cases = _ref$cases === void 0 ? [] : _ref$cases,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      className = _ref.className;
+  var slider;
+
+  var clickPrevious = function clickPrevious() {
+    slider.slickPrev();
+  };
+
+  var clickNext = function clickNext() {
+    slider.slickNext();
+  };
+
+  var getCases = function getCases() {
+    var buttons;
+
+    if (cases.length > 1) {
+      buttons = /*#__PURE__*/React.createElement("div", {
+        className: styles.buttons
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.controlButton,
+        onClick: clickPrevious
+      }, /*#__PURE__*/React.createElement(ArrowLeftOutlined, {
+        className: styles.controlButtonIcon,
+        style: {
+          fontSize: '16px'
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: styles.controlButton,
+        onClick: clickNext,
+        style: {
+          marginLeft: '-1px'
+        }
+      }, /*#__PURE__*/React.createElement(ArrowRightOutlined, {
+        className: styles.controlButtonIcon,
+        style: {
+          fontSize: '16px'
+        }
+      })));
+    }
+
+    var children = cases.map(function (app) {
+      var linkDiv = /*#__PURE__*/React.createElement("div", {
+        className: styles.detailWrapper,
+        style: {
+          display: app.link ? 'block' : 'none'
+        }
+      }, app.link && app.link.startsWith('http') ? /*#__PURE__*/React.createElement("a", {
+        className: styles.detail,
+        href: app.link,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, "\u67E5\u770B\u8BE6\u60C5") : /*#__PURE__*/React.createElement(Link, {
+        className: styles.detail,
+        to: app.link ? app.link : ''
+      }, "\u67E5\u770B\u8BE6\u60C5"));
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.appWrapper,
+        key: app.title
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.appTeaser,
+        src: app.image,
+        alt: app.title
+      }), /*#__PURE__*/React.createElement("div", {
+        className: styles.appLeft
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.appContent
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.appLogo,
+        src: app.logo,
+        alt: "logo",
+        style: {
+          borderRadius: app.isAppLogo ? '15px' : '0px',
+          boxShadow: app.isAppLogo ? '0px 12px 24px #CED4D9' : '0px 0px 0px'
+        }
+      }), /*#__PURE__*/React.createElement("p", {
+        className: styles.appTitle
+      }, app.title), /*#__PURE__*/React.createElement("p", {
+        className: styles.appDescription
+      }, app.description), linkDiv), buttons));
+    });
+    return children;
+  };
+
+  var sliderSettings = {
+    dots: cases.length > 1,
+    infinite: true,
+    slidesToShow: 1,
+    adaptiveHeight: true,
+    speed: 500,
+    cssEase: 'linear',
+    arrows: false,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    fade: true
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.wrapper, className),
+    style: style
+  }, /*#__PURE__*/React.createElement(Slider, _extends({}, sliderSettings, {
+    className: styles.slider,
+    ref: function ref(c) {
+      slider = c;
+    }
+  }), getCases()));
+};
+
+export default Cases;

package/es/antv/Cases/Cases.module.less

@@ -0,0 +1,203 @@
+@import '../mixins';
+.wrapper {
+  height: 667px;
+  margin: auto;
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+  background: rgba(250, 251, 252, 1);
+  .slider {
+    .container1440;
+  }
+  .appWrapper {
+    margin-left: 5%;
+    margin-bottom: 5%;
+    width: 83.88%;
+    height: 100%;
+    overflow-y: hidden;
+    display: flex;
+    .appLeft {
+      margin-left: 3.06%;
+      width: 35%;
+      margin-top: 8%;
+      height: 613px;
+      .appContent {
+        height: fit-content;
+        position: relative;
+        .appLogo {
+          height: 80px;
+        }
+        .appTitle {
+          font-size: 1.2857em;
+          font-weight: 500;
+          margin: 48px 0 0 0;
+          position: relative;
+          height: min-content;
+          color: rgba(0, 0, 0, 1);
+          user-select: text;
+        }
+        .appDescription {
+          color: rgba(105, 123, 140, 0.6);
+          font-size: 1em;
+          margin: 16px 0 0 0;
+          user-select: text;
+        }
+        .detailWrapper {
+          margin: 20px 0 0 0;
+          .detail {
+            color: @primary-color;
+            font-size: 1em;
+          }
+        }
+      }
+      .buttons {
+        cursor: pointer;
+        position: absolute;
+        display: flex;
+        bottom: 30%;
+        height: 100px;
+        .controlButton {
+          width: 47px;
+          height: 47px;
+          line-height: 47px;
+          border: 1px solid #a3b1bf;
+          transition: all 0.3s;
+          &:hover {
+            border: 1px solid #ced4d9;
+            fill: #000000;
+          }
+          &:hover :only-child {
+            color: #ced4d9;
+          }
+          .controlButtonIcon {
+            width: 100%;
+            color: #a3b1bf;
+            transition: all 0.3s;
+          }
+        }
+        .nextButton {
+          width: 47px;
+          margin-left: -1px;
+          background-image: url('https://gw.alipayobjects.com/zos/basement_prod/27ce6e21-bbb6-4490-8326-43483ac39e0b.svg');
+          background-size: 100% 100%;
+          &:hover {
+            background-image: url('https://gw.alipayobjects.com/zos/basement_prod/4d1f0d0a-4e56-4f21-a9aa-06b2f8c3e18e.svg');
+          }
+        }
+      }
+    }
+  }
+}
+.appTeaser {
+  position: absolute;
+  height: 667px;
+  left: 50%;
+  right: 0;
+}
+
+.slider {
+  height: 100%;
+  :global {
+    .slick-dots {
+      display: none;
+    }
+  }
+}
+
+:global {
+  .slick-current {
+    z-index: 2 !important;
+  }
+}
+
+@media (max-width: 1200px) {
+  .wrapper {
+    .appWrapper {
+      .appLeft {
+        width: 270px;
+      }
+    }
+  }
+  .appTeaser {
+    position: absolute;
+    width: 857px;
+    left: 350px;
+  }
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    width: 100%;
+    height: fit-content;
+    .slider {
+      width: 100%;
+      max-width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+    }
+    .appWrapper {
+      width: 100%;
+      padding-bottom: 150px;
+      margin-left: 0;
+      flex-direction: column;
+      text-align: center;
+      .appLeft {
+        height: 286px;
+        margin-left: 4.27%;
+        width: 91.47%;
+        margin-top: 64px;
+        .appContent {
+          width: 90%;
+          margin-left: 5%;
+          .appLogo {
+            position: absolute;
+            top: -36px;
+            left: 50%;
+            transform: translateX(-40px);
+          }
+          .appTitle {
+            padding-top: 76px;
+          }
+          .detailWrapper {
+            margin-top: 40px;
+            .detail {
+              font-size: 1em;
+            }
+          }
+        }
+        .buttons {
+          display: none;
+          position: absolute;
+          bottom: 60px;
+          left: 50%;
+          height: 100px;
+          transform: translateX(-47px);
+          width: 92%;
+        }
+      }
+      .appTeaser {
+        left: 0;
+        margin-top: 60px;
+        margin-bottom: 40px;
+        margin-left: 4.06%;
+        width: 91.47%;
+        height: auto;
+        position: relative;
+      }
+    }
+  }
+
+  .slider {
+    height: 100%;
+    :global {
+      .slick-dots {
+        display: block;
+        bottom: 100px;
+      }
+      .slick-dots li.slick-active button:before {
+        opacity: 1;
+        color: #1890ff;
+      }
+    }
+  }
+}

package/es/antv/Features/FeatureCard.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames'; // @ts-ignore
+
+import styles from './FeatureCard.module.less';
+
+var FeatureCard = function FeatureCard(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      description = _ref.description;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.card
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("img", {
+    className: classNames(styles.icon, 'feature-logo'),
+    src: icon,
+    alt: "advantage"
+  }), /*#__PURE__*/React.createElement("p", {
+    className: styles.title
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: styles.description
+  }, description)));
+};
+
+export default FeatureCard;

package/es/antv/Features/FeatureCard.module.less

@@ -0,0 +1,51 @@
+.card {
+  background-color: #fff;
+  height: auto;
+  .content {
+    padding-left: 15.9%;
+    padding-right: 15.9%;
+    .icon {
+      height: 60px;
+    }
+    .title {
+      font-size: 1.714em;
+      color: #000;
+      margin-top: 40px;
+      margin-bottom: 0;
+    }
+    .description {
+      opacity: 0.6;
+      width: 100%;
+      color: rgba(105, 123, 140, 1);
+      font-size: 1em;
+      line-height: 1.8em;
+      margin-top: 24px;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .cards {
+    .cardWrapper {
+      .card {
+        margin: 84px 19px 80px 19px;
+        .content {
+          .icon {
+            width: 25.6%;
+          }
+          .title {
+            font-size: 1.4em;
+            margin-top: 28px;
+          }
+          .description {
+            font-size: 1em;
+            padding-bottom: 0px;
+            padding-top: 0px;
+            margin-top: 12px;
+          }
+        }
+      }
+    }
+  }
+}

package/es/antv/Features/Features.module.less

@@ -0,0 +1,169 @@
+@import '../mixins';
+
+.wrapper {
+  display: flex;
+  margin: auto;
+  position: relative;
+  flex-direction: column;
+  padding: 0;
+  background: rgb(240, 245, 250);
+  height: auto;
+  overflow-x: hidden;
+  .content {
+    width: 95.8%;
+    height: 100%;
+    margin-left: 4.2%;
+    margin-bottom: 5%;
+    position: relative;
+    .container1440;
+  }
+  .title {
+    font-size: 2.8em;
+    padding-left: 4.06%;
+    font-weight: 500;
+    margin: 48px 0 0 0;
+    position: relative;
+    height: min-content;
+    color: #fff;
+  }
+  .slicerbarv {
+    display: none;
+  }
+  .slicerbarv2 {
+    display: none;
+  }
+  .lefttop {
+    background: linear-gradient(130deg, fade(@primary-color, 70%), shade(@primary-color, 20%));
+    width: 100%;
+    top: 0;
+    position: absolute;
+  }
+  .lefttopWithTitle {
+    height: 60%;
+  }
+  .lefttopWithoutTitle {
+    height: 75%;
+  }
+  .rightbottom {
+    position: absolute;
+    width: 95.83%;
+    left: 4.17%;
+    top: 144px;
+    background: #fff;
+    height: 65%;
+    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  .rightbottomWithoutTitle {
+    top: 48px;
+    height: 75%;
+  }
+  .cardsContainer {
+    width: 100%;
+    height: 65%;
+    margin-top: 48px;
+    position: relative;
+    .cards {
+      display: flex;
+      text-align: center;
+      position: relative;
+      width: -webkit-fill-available;
+      flex-wrap: wrap;
+      margin-left: 4.06%;
+      .cardWrapper {
+        margin: 68px 0 93px 0;
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        &:last-child {
+          border-right: 0px;
+        }
+      }
+    }
+  }
+}
+.dot {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #d8d8d8;
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    width: 100%;
+    .lefttop {
+      left: 0px;
+      height: 100%;
+      width: 100%;
+    }
+    .rightbottom {
+      height: 79.5%;
+      margin-top: 48px;
+      .slicerbarv {
+        position: absolute;
+        background-color: #f2f4f5;
+        width: 1px;
+        height: 100%;
+        margin-left: 3%;
+        display: block;
+        z-index: 1;
+      }
+      .slicerbarv2 {
+        margin-left: 92.2%; // 1 - (0.96 * 0.04 + 0.04)
+      }
+      .slicerbarh {
+        position: absolute;
+        background-color: #f2f4f5;
+        width: 100%;
+        height: 1px;
+        display: block;
+        margin-top: 45px;
+      }
+      .slicerbarh2 {
+        margin-top: 395px;
+      }
+      .slicerbarh3 {
+        margin-top: 745px;
+      }
+      .slicerbarh4 {
+        margin-top: 1095px;
+      }
+    }
+
+    .rightbottomWithoutTitle {
+      top: 48px;
+      height: 86.5%;
+    }
+    .lefttopWithTitle {
+      height: 95.73%;
+    }
+    .lefttopWithoutTitle {
+      height: 95.73%;
+    }
+    .content {
+      .title {
+        font-size: 2.143rem;
+        margin: 80px 0 60px 0;
+      }
+      .cardsContainer {
+        margin-bottom: 70px;
+        .cards {
+          margin-top: 60px;
+          margin-left: 3.34%;
+          padding-top: 45px;
+          padding-bottom: 45px;
+          .cardWrapper {
+            margin: 68px 0 68px 0;
+            width: 100%;
+            height: 216px;
+            border-right: 0px;
+          }
+        }
+      }
+    }
+  }
+  .dot {
+    display: block;
+    z-index: 2;
+  }
+}

package/es/antv/Features/index.js

@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { Row, Col } from 'antd';
+import classNames from 'classnames';
+import FeatureCard from './FeatureCard'; // @ts-ignore
+
+import styles from './Features.module.less';
+
+var Features = function Features(_ref) {
+  var title = _ref.title,
+      _ref$features = _ref.features,
+      features = _ref$features === void 0 ? [] : _ref$features,
+      className = _ref.className,
+      style = _ref.style,
+      id = _ref.id;
+
+  var getCards = function getCards() {
+    var children = features.map(function (card) {
+      return /*#__PURE__*/React.createElement(Col, {
+        className: styles.cardWrapper,
+        key: card.title,
+        md: 8,
+        xs: 24
+      }, /*#__PURE__*/React.createElement(FeatureCard, card));
+    });
+    return children;
+  }; // for small screen
+
+
+  var getDots = function getDots() {
+    var dots = [];
+    var length = features.length;
+    var startTop = 45;
+    var cardHeight = 350;
+    var startLeftPercent = 0.028;
+    var rows = length + 1;
+
+    for (var i = 0; i < rows; i += 1) {
+      var yOffset = 1;
+      var top = "".concat(startTop + cardHeight * i - yOffset, "px");
+      var leftColLeft = "".concat(startLeftPercent * 100, "%");
+      var rigthColLeft = "".concat((startLeftPercent + 0.892) * 100, "%");
+      dots.push( /*#__PURE__*/React.createElement("div", {
+        key: "".concat(i, "-0"),
+        className: styles.dot,
+        style: {
+          marginLeft: leftColLeft,
+          marginTop: top
+        }
+      }));
+      dots.push( /*#__PURE__*/React.createElement("div", {
+        key: "".concat(i, "-1"),
+        className: styles.dot,
+        style: {
+          marginLeft: rigthColLeft,
+          marginTop: top
+        }
+      }));
+    }
+
+    return dots;
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: classNames(styles.wrapper, className),
+    style: style
+  }, title ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.lefttopWithTitle, styles.lefttop)
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.lefttopWithoutTitle, styles.lefttop)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: title ? styles.rightbottom : classNames(styles.rightbottomWithoutTitle, styles.rightbottom)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.slicerbar, styles.slicerbarv, styles.slicerbarv1)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.slicerbar, styles.slicerbarv, styles.slicerbarv2)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh1)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh2)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh3)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh4)
+  }), getDots()), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    key: "content"
+  }, /*#__PURE__*/React.createElement("p", {
+    key: "title",
+    className: styles.title
+  }, title), /*#__PURE__*/React.createElement("div", {
+    key: "block",
+    className: styles.cardsContainer
+  }, /*#__PURE__*/React.createElement(Row, {
+    key: "cards",
+    className: styles.cards
+  }, getCards())))));
+};
+
+export default Features;

package/es/antv/Footer/Footer.module.less

@@ -0,0 +1,36 @@
+@import '../mixins';
+
+.footer {
+  font-family: Avenir, @font-family;
+
+  :global(.rc-footer-container),
+  :global(.rc-footer-bottom-container) {
+    .container1440;
+  }
+
+  .description {
+    opacity: 0.6;
+    font-weight: normal;
+    margin-left: 0.5em;
+  }
+
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+
+    :global(.anticon),
+    a {
+      margin-right: 8px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+}
+
+@media only screen and (max-width: 767.99px) {
+  .footer {
+    .bottom {
+      display: block;
+    }
+  }
+}