@antv/dumi-theme-antv 0.4.4 → 0.4.5

package/dist/layouts/DocLayout.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import '../slots/global';
 import '../slots/_.less';
 /**
  * DocuLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
  */
-declare const _default: () => React.JSX.Element;
+declare const _default: () => any;
 export default _default;

package/dist/layouts/entry/Index.js

@@ -13,7 +13,7 @@ import { Features } from "dumi/theme/slots/Features";
 import { Cases } from "dumi/theme/slots/Cases";
 import { Companies } from "dumi/theme/slots/Companies";
 import { Footer } from "dumi/theme/slots/Footer";
-import { size } from 'lodash-es';
+import { isArray, size, get } from 'lodash-es';
 
 /**
  * Index 路由下的入口
@@ -52,7 +52,8 @@ export var Index = function Index() {
     news: news
   }, detail);
   var featuresProps = {
-    features: features,
+    title: get(features, ['title']),
+    features: isArray(features) ? features : get(features, ['cards'], []),
     className: className,
     style: style,
     id: id
@@ -67,7 +68,7 @@ export var Index = function Index() {
     title: "".concat(metaTitle[locale.id]),
     titleSuffix: "AntV",
     lang: locale.id
-  }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
+  }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: isAntVSite ? "2000+ 公司正在使用" : "感谢信赖"
     }),

package/dist/slots/Cases/index.module.less

@@ -75,6 +75,9 @@
           line-height: 47px;
           border: 1px solid #a3b1bf;
           transition: all 0.3s;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
           &:hover {
             border: 1px solid #ced4d9;
@@ -86,7 +89,6 @@
           }
 
           .controlButtonIcon {
-            width: 100%;
             color: #a3b1bf;
             transition: all 0.3s;
           }

package/dist/slots/Companies/index.js

@@ -18,9 +18,6 @@ export var Companies = function Companies(_ref) {
     key: "title",
     className: styles.title
   }, title), /*#__PURE__*/React.createElement("div", {
-    key: "slicer",
-    className: styles.slicer
-  }), /*#__PURE__*/React.createElement("div", {
     key: "companies-container",
     className: styles.companiesContainer
   }, /*#__PURE__*/React.createElement(Row, {

package/dist/slots/Companies/index.module.less

@@ -23,22 +23,14 @@
     margin: 118px 0 0 0;
     position: relative;
     height: min-content;
+    text-align: center;
     color: rgba(0, 0, 0, 1);
   }
 
-  .slicer {
-    width: 32px;
-    height: 6px;
-    background: linear-gradient(145deg,
-        fade(@primary-color, 70%),
-        shade(@primary-color, 20%));
-    margin-top: 64px;
-  }
-
   .companiesContainer {
     position: relative;
     margin: auto;
-    margin-top: 52px;
+    margin-top: 48px;
 
     .company {
       margin-bottom: 20px;
@@ -57,12 +49,6 @@
       margin: 98px 0 0 0;
     }
 
-    .slicer {
-      width: 25px;
-      height: 6px;
-      margin: 44px 0 44px 0;
-    }
-
     .content {
       margin-left: 4.27%;
       width: 91.64%;

package/dist/slots/Detail/News.js

@@ -14,11 +14,7 @@ export var News = function News(_ref) {
   var lang = useLocale().id;
   var children = /*#__PURE__*/React.createElement("div", {
     className: styles.container
-  }, /*#__PURE__*/React.createElement("img", {
-    className: styles.number,
-    src: numberImages[index],
-    alt: index.toString()
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.content
   }, /*#__PURE__*/React.createElement("p", {
     className: styles.description

package/dist/slots/Detail/News.module.less

@@ -1,34 +1,41 @@
 .news {
   width: 50%;
   margin-right: 2%;
+  background-color: #FFFFFF;
+  border: 1px solid #E5E8EF;
+  box-shadow: 0 8px 28px 0 rgba(0,0,0,0.05);
+  border-radius: 16px;
+  height: 100%;
 
   &:last-child {
     margin-right: 0;
   }
 
   .container {
-    height: 44px;
-    display: flex;
-
-    .number {
-      height: 100%;
-      width: 44px;
-    }
+    height: 100%;
+    color: #1D2129;
+    letter-spacing: 0;
 
     .content {
-      padding-left: 20px;
-      color: rgba(49, 70, 89, 1);
-      text-align: left;
+      height: 100%;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
 
       .description {
         top: 0;
-        font-size: 1.14em;
         margin-bottom: 0;
         transition: all 0.3s;
+        font-family:  PingFangSC;
+        font-weight: 500;
+        font-size: 20px;
+        text-align: center;
       }
 
       .date {
-        color: rgba(216, 203, 249, 1);
+        color: #424E66;
         bottom: 0;
         font-size: 1em;
         margin-top: 4px;
@@ -38,7 +45,7 @@
   }
 
   &:hover .description {
-    color: rgba(89, 126, 247, 1);
+    color: #691EFF;
   }
 }
 
@@ -68,26 +75,31 @@
   0% {
     opacity: 1;
     top: 0px;
+    z-index: 1;
   }
 
   33.3% {
     opacity: 1;
     top: 0px;
+    z-index: 1;
   }
 
   50% {
     opacity: 0;
     top: -30px;
+    z-index: 0;
   }
 
   83.3% {
     opacity: 0;
     top: 30px;
+    z-index: 0;
   }
 
   100% {
     opacity: 1;
     top: 0px;
+    z-index: 1;
   }
 }
 
@@ -96,25 +108,30 @@
   0% {
     opacity: 0;
     top: 30px;
+    z-index: 0;
   }
 
   33.3% {
     opacity: 0;
     top: 30px;
+    z-index: 0;
   }
 
   50% {
     opacity: 1;
     top: 0px;
+    z-index: 1;
   }
 
   83.3% {
     opacity: 1;
     top: 0px;
+    z-index: 1;
   }
 
   100% {
     opacity: 0;
     top: -30px;
+    z-index: 0;
   }
 }

package/dist/slots/Detail/index.module.less

@@ -192,12 +192,14 @@
   }
 
   .news {
-    width: 80%;
+    width: 100%;
     display: flex;
     bottom: 40px;
     position: absolute;
     z-index: 3;
-    margin-left: 4.5%;
+    height: 108px;
+    box-sizing: border-box;
+    padding: 0 4.5%;
   }
 
   .teaser {
@@ -284,11 +286,11 @@
     }
 
     .news {
-      width: 100%;
+      width: 91%;
+      padding: 0;
       display: block;
-      bottom: 20px;
-      height: 44px;
-      overflow: hidden;
+      bottom: 10x;
+      left: 4.5%;
     }
 
     .teaser {
@@ -328,10 +330,16 @@
     .text {
       .buttons {
         margin-top: 70%;
+        position: relative;
+        top: -170px;
 
         .githubWrapper {
           display: none;
         }
+
+        .buttonLink:nth-child(2) {
+          margin-right: 0;
+        }
       }
     }
 
@@ -354,20 +362,14 @@
   .wrapper {
     .text {
       height: 70%;
+    }
 
-      .buttons {
-        bottom: 10px;
-        margin-top: unset;
-        z-index: 1;
-        position: absolute;
-        left: 0;
-        width: 100%;
-        justify-content: center;
-      }
+    .news {
+      height: 160px;
     }
 
     .teaser {
-      top: 14%;
+      top: 10%;
     }
   }
 }

package/dist/slots/Features/FeatureCard.module.less

@@ -1,10 +1,15 @@
 .card {
   background-color: #fff;
-  height: auto;
+  height: 100%;
+  padding: 36px 70px;
+  box-sizing: border-box;
 
   .content {
-    padding-left: 15.9%;
-    padding-right: 15.9%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
 
     .icon {
       height: 60px;
@@ -13,8 +18,12 @@
     .title {
       font-size: 1.714em;
       color: #000;
-      margin-top: 40px;
-      margin-bottom: 0;
+      margin-top: 28px;
+      margin-bottom: 11px;
+      font-family:  AlibabaPuHuiTiM;
+      color: #1D2129;
+      text-align: center;
+      line-height: 32px;
     }
 
     .description {
@@ -23,13 +32,13 @@
       color: rgba(105, 123, 140, 1);
       font-size: 1em;
       line-height: 1.8em;
-      margin-top: 24px;
+      margin-top: 11px;
       margin-bottom: 0;
     }
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   .cards {
     .cardWrapper {
       .card {

package/dist/slots/Features/index.js

@@ -22,69 +22,18 @@ export var Features = function Features(_ref) {
     });
     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: cx(styles.wrapper, className),
     style: style
-  }, title ? /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.lefttopWithTitle, styles.lefttop)
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.lefttopWithoutTitle, styles.lefttop)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: title ? styles.rightbottom : cx(styles.rightbottomWithoutTitle, styles.rightbottom)
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.slicerbar, styles.slicerbarv, styles.slicerbarv1)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.slicerbar, styles.slicerbarv, styles.slicerbarv2)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh1)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh2)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh3)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(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 ? title : ''), /*#__PURE__*/React.createElement("div", {
+  }, title ? ic(title) : ''), /*#__PURE__*/React.createElement("div", {
     key: "block",
     className: styles.cardsContainer
   }, /*#__PURE__*/React.createElement(Row, {

package/dist/slots/Features/index.module.less

@@ -5,8 +5,9 @@
   margin: auto;
   position: relative;
   flex-direction: column;
-  padding: 0;
-  background: rgb(240, 245, 250);
+  padding-top: 120px;
+  top: -90px;
+  background: #fff;
   height: auto;
   overflow-x: hidden;
 
@@ -14,65 +15,24 @@
     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: 17px 0 0 0;
     position: relative;
+    font-family: AlibabaPuHuiTiB;
+    font-size: 40px;
+    text-align: center;
+    color: #1D2129;
     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: 88px;
-    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 {
@@ -81,120 +41,54 @@
       position: relative;
       width: -webkit-fill-available;
       flex-wrap: wrap;
-      margin-left: 4.06%;
+      box-sizing: border-box;
+      padding: 0 4.5%;
 
       .cardWrapper {
-        margin: 68px 0 93px 0;
-        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        margin: 48px 0 30px 0;
+        background-color: #FFFFFF;
+        border: 1px solid #E5E8EF;
+        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.03);
+        border-radius: 16px;
+        overflow: hidden;
+        margin-right: 29px;
+        flex: 1;
 
         &:last-child {
-          border-right: 0px;
+          margin-right: 0;
         }
       }
     }
   }
 }
 
-.dot {
-  position: absolute;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: #d8d8d8;
-  display: none;
-}
-
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   .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 {
+      width: 91.46%;
+
       .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;
+          margin-top: 48px;
 
           .cardWrapper {
-            margin: 68px 0 68px 0;
+            flex: none;
+            margin: 0 0 28px 0;
             width: 100%;
-            height: 216px;
-            border-right: 0px;
+            max-width: 100%;
+
+            &:last-child {
+              margin: 0 0 30px 0;
+            }
           }
         }
       }
     }
   }
-
-  .dot {
-    display: block;
-    z-index: 2;
-  }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "AntV website theme based on dumi2.",
   "types": "dist/types.d.ts",
   "scripts": {