@antv/dumi-theme-antv 0.1.0

package/src/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/src/antv/Cases/Cases.tsx

@@ -0,0 +1,116 @@
+/* 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';
+
+interface Case {
+  logo?: string;
+  isAppLogo?: boolean;
+  title: string;
+  description: string;
+  link?: string;
+  image: string;
+}
+interface CasesProps {
+  cases: Case[];
+  style?: React.CSSProperties;
+  className?: string;
+}
+const Cases: React.FC<CasesProps> = ({ cases = [], style = {}, className }) => {
+  let slider: any;
+
+  const clickPrevious = () => {
+    slider.slickPrev();
+  };
+  const clickNext = () => {
+    slider.slickNext();
+  };
+
+  const getCases = () => {
+    let buttons: any;
+    if (cases.length > 1) {
+      buttons = (
+        <div className={styles.buttons}>
+          <div className={styles.controlButton} onClick={clickPrevious}>
+            <ArrowLeftOutlined className={styles.controlButtonIcon} style={{ fontSize: '16px' }} />
+          </div>
+          <div className={styles.controlButton} onClick={clickNext} style={{ marginLeft: '-1px' }}>
+            <ArrowRightOutlined className={styles.controlButtonIcon} style={{ fontSize: '16px' }} />
+          </div>
+        </div>
+      );
+    }
+    const children = cases.map(app => {
+      const linkDiv = (
+        <div className={styles.detailWrapper} style={{ display: app.link ? 'block' : 'none' }}>
+          {app.link && app.link.startsWith('http') ? (
+            <a className={styles.detail} href={app.link} target="_blank" rel="noopener noreferrer">
+              查看详情
+            </a>
+          ) : (
+            <Link className={styles.detail} to={app.link ? app.link : ''}>
+              查看详情
+            </Link>
+          )}
+        </div>
+      );
+
+      return (
+        <div className={styles.appWrapper} key={app.title}>
+          <img className={styles.appTeaser} src={app.image} alt={app.title} />
+          <div className={styles.appLeft}>
+            <div className={styles.appContent}>
+              <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',
+                }}
+              />
+              <p className={styles.appTitle}>{app.title}</p>
+              <p className={styles.appDescription}>{app.description}</p>
+              {linkDiv}
+            </div>
+            {buttons}
+          </div>
+        </div>
+      );
+    });
+    return children;
+  };
+
+  const sliderSettings = {
+    dots: cases.length > 1,
+    infinite: true,
+    slidesToShow: 1,
+    adaptiveHeight: true,
+    speed: 500,
+    cssEase: 'linear',
+    arrows: false,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    fade: true,
+  };
+  return (
+    <div className={classNames(styles.wrapper, className)} style={style}>
+      <Slider
+        {...sliderSettings}
+        className={styles.slider}
+        ref={c => {
+          slider = c;
+        }}
+      >
+        {getCases()}
+      </Slider>
+    </div>
+  );
+};
+export default Cases;

package/src/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/src/antv/Features/FeatureCard.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+// @ts-ignore
+import styles from './FeatureCard.module.less';
+
+interface FeatureProps {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+const FeatureCard: React.FC<FeatureProps> = ({ icon, title, description }) => {
+  return (
+    <div className={styles.card}>
+      <div className={styles.content}>
+        <img className={classNames(styles.icon, 'feature-logo')} src={icon} alt="advantage" />
+        <p className={styles.title}>{title}</p>
+        <p className={styles.description}>{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureCard;

package/src/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/src/antv/Features/index.tsx

@@ -0,0 +1,86 @@
+/* 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';
+
+interface Card {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+interface FeaturesProps {
+  title?: string;
+  features: Card[];
+  className?: string;
+  style?: React.CSSProperties;
+  id?: string;
+}
+
+const Features: React.FC<FeaturesProps> = ({ title, features = [], className, style, id }) => {
+  const getCards = () => {
+    const children = features.map(card => (
+      <Col className={styles.cardWrapper} key={card.title} md={8} xs={24}>
+        <FeatureCard {...card} />
+      </Col>
+    ));
+    return children;
+  };
+
+  // for small screen
+  const getDots = () => {
+    const dots: Array<Record<string, any>> = [];
+    const { length } = features;
+    const startTop = 45;
+    const cardHeight = 350;
+    const startLeftPercent = 0.028;
+    const rows = length + 1;
+    for (let i = 0; i < rows; i += 1) {
+      const yOffset = 1;
+      const top = `${startTop + cardHeight * i - yOffset}px`;
+      const leftColLeft = `${startLeftPercent * 100}%`;
+      const rigthColLeft = `${(startLeftPercent + 0.892) * 100}%`;
+      dots.push(<div key={`${i}-0`} className={styles.dot} style={{ marginLeft: leftColLeft, marginTop: top }} />);
+      dots.push(<div key={`${i}-1`} className={styles.dot} style={{ marginLeft: rigthColLeft, marginTop: top }} />);
+    }
+
+    return dots;
+  };
+
+  return (
+    <div id={id} className={classNames(styles.wrapper, className)} style={style}>
+      {title ? (
+        <div className={classNames(styles.lefttopWithTitle, styles.lefttop)} />
+      ) : (
+        <div className={classNames(styles.lefttopWithoutTitle, styles.lefttop)} />
+      )}
+      <div className={title ? styles.rightbottom : classNames(styles.rightbottomWithoutTitle, styles.rightbottom)}>
+        <div className={classNames(styles.slicerbar, styles.slicerbarv, styles.slicerbarv1)} />
+        <div className={classNames(styles.slicerbar, styles.slicerbarv, styles.slicerbarv2)} />
+        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh1)} />
+        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh2)} />
+        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh3)} />
+        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh4)} />
+        {getDots()}
+      </div>
+      <div className={styles.content}>
+        <div key="content">
+          <p key="title" className={styles.title}>
+            {title}
+          </p>
+          <div key="block" className={styles.cardsContainer}>
+            <Row key="cards" className={styles.cards}>
+              {getCards()}
+            </Row>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Features;

package/src/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;
+    }
+  }
+}