Upgrade antd 3.0 site style (#8324)

* 3.0 site update

* update footer

* improve

site/theme/en-US.js

@@ -61,6 +61,10 @@ module.exports = {
     'app.footer.version': 'Version: ',
     'app.footer.author': 'Created by AFX',
     'app.footer.work_with_us': 'Work with Us',
+    'app.footer.more-product': 'More Products',
+    'app.footer.privacy': 'Privacy Policy',
+    'app.footer.commitment': 'Our Commitment to Customer Protection',
+    'app.footer.company': 'Ant Financial',
     'app.publish.title': 'antd@2.0.0 is released!',
     'app.publish.greeting': 'Hello, ',
     'app.publish.intro': ' is released, and please upgrade. ',

site/theme/static/colors.less

@@ -98,6 +98,8 @@
 @grey-9: rgba(0, 0, 0, 85%);
 @grey-10: rgba(0, 0, 0, 100%);
 
+@border-color: rgba(229, 231, 235, 100);
+
 .main-color {
   .make-palatte(blue);
   .make-palatte(purple);

site/theme/static/common.less

@@ -23,24 +23,18 @@ a {
 
 .main-wrapper {
   background: #fff;
-  margin: 0 48px;
+  padding: 40px 0 0;
-  border-radius: @border-radius-base;
-  padding: 24px 0 0;
-  margin-bottom: 24px;
   position: relative;
 }
 
 .main-container {
-  padding: 0 40px 120px;
+  padding: 0 194px 144px 64px;
   margin-left: -1px;
   background: #fff;
   min-height: 500px;
   overflow: hidden;
   border-left: 1px solid #e9e9e9;
   position: relative;
-  &-component {
-    padding-right: 130px;
-  }
 }
 
 .aside-container {
@@ -55,6 +49,10 @@ a {
     overflow: hidden;
   }
 
+  &.ant-menu-inline .ant-menu-item-group-title {
+    padding-left: 56px;
+  }
+
   a[disabled] {
     color: #ccc;
   }
@@ -99,10 +97,6 @@ a {
   display: none;
 }
 
-.page-wrapper {
-  background: #f0f2f5;
-}
-
 .drawer-content {
   padding: 40px 0;
 }

site/theme/static/footer.less

@@ -1,22 +1,42 @@
+@import './colors';
+
+@padding-space: 114px;
+
+footer.dark {
+  background-color: #000;
+  color: rgba(255, 255, 255, 0.65);
+  a {
+    color: #fff;
+  }
+  h2 {
+    color: rgba(255, 255, 255, 1);
+    & > span {
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .bottom-bar {
+    border-top: 1px solid rgba(255, 255, 255, 0.25);
+    overflow: hidden;
+  }
+}
+
 footer {
+  border-top: 1px solid @border-color;
   clear: both;
   font-size: 12px;
   background: #fff;
   position: relative;
-  z-index: 1;
+  z-index: 100;
   color: @text-color;
   box-shadow: 0 1000px 0 1000px #fff;
-  ul {
+  .ant-row {
-    overflow: hidden;
+    text-align: center;
-    margin: 0 2%;
+    .footer-center {
-    list-style: none;
+      display: inline-block;
-    li {
+      text-align: left;
-      float: left;
-      width: 25%;
-      padding: 24px 2%;
       > h2 {
         font-size: 14px;
-        margin: 0 auto 16px;
+        margin: 0 auto 24px;
         font-weight: 500;
         position: relative;
         > .anticon {
@@ -28,8 +48,30 @@ footer {
         }
       }
       > div {
-        margin-bottom: 8px;
+        margin: 12px 0;
       }
     }
   }
+  .footer-wrap {
+    position: relative;
+    padding: 86px @padding-space 70px @padding-space;
+  }
+  .bottom-bar {
+    border-top: 1px solid @border-color;
+    text-align: right;
+    padding: 20px @padding-space;
+    margin: 0;
+    line-height: 24px;
+    a {
+      color: rgba(255, 255, 255, 0.65);
+      &:hover {
+        color: #fff;
+      }
+    }
+    .build-tool {
+      text-align: left;
+      width: 200px;
+      margin: 0 auto;
+    }
+  }
 }

site/theme/static/header.less

@@ -1,12 +1,11 @@
-@header-height: 80px;
+@header-height: 64px;
 
 #header {
   transition: opacity 0.5s;
   background: #fff;
-  height: @header-height;
+  box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
-  margin-bottom: 24px;
+  position: relative;
-  padding: 0 48px;
+  z-index: 10;
-  width: 100%;
 
   &.home-nav-bottom {
     background: rgba(255, 255, 255, 0.9);
@@ -29,25 +28,27 @@
 }
 
 #logo {
+  overflow: hidden;
+  padding-left: 40px;
   float: left;
-  height: 80px;
+  height: @header-height;
-  line-height: 80px;
+  line-height: @header-height;
-}
+  text-decoration: none;
 
-#logo img {
+  img {
-  height: 80px;
+    height: @header-height;
-  line-height: 80px;
+    line-height: @header-height;
-  width: 40px;
+    width: 32px;
-  margin-right: 8px;
+    margin-right: 16px;
-}
+  }
-
+  span {
-#logo span {
     float: right;
-  font-size: 16px;
+    font-size: 14px;
     font-family: 'Raleway', 'Hiragino Sans GB', sans-serif;
-  height: 80px;
+    height: @header-height;
-  line-height: 80px;
+    line-height: @header-height;
     text-transform: uppercase;
+  }
 }
 
 #search-box {
@@ -55,13 +56,19 @@
   float: left;
   height: 22px;
   line-height: 22px;
-  padding-left: 30px;
+  padding-left: 16px;
-  margin: 29px auto 0;
+  margin: 20px auto 0;
+}
+
+#search-box .anticon {
+  color: #ced4d9;
+  position: relative;
+  top: 0.5px;
 }
 
 #search-box .ant-select {
   font-size: 14px;
-  margin-top: -3px;
+  margin-top: -5px;
   width: 200px;
 }
 
@@ -78,13 +85,14 @@
 .header-lang-button,
 .version {
   float: right;
-  margin-top: 29px;
+  margin-top: 20px;
   margin-left: 10px;
 }
 
 .header-lang-button {
   color: @text-color;
   border-color: @border-color-base;
+  margin-right: 40px;
 }
 
 .version {
@@ -98,16 +106,33 @@
   font-family: Lato, @font-family;
 }
 
-#nav li {
+#nav {
+  &.ant-menu-horizontal {
+    border-bottom: none;
+
+    & > .ant-menu-item {
       height: @header-height;
       line-height: @header-height;
       min-width: 72px;
-  text-align: center;
+      border-top: 2px solid transparent;
-  border-bottom-width: 3px;
 
-  &.ant-menu-item-selected a {
+      &:hover {
+        border-top: 2px solid @primary-color;
+        border-bottom: 2px solid transparent;
+      }
+    }
+
+    & > .ant-menu-item-selected {
+      border-top: 2px solid @primary-color;
+      border-bottom: 2px solid transparent;
+      a {
         color: @primary-color;
-    font-weight: bold;
+      }
+    }
+  }
+
+  & > .ant-menu-item {
+    text-align: center;
   }
 }
 

site/theme/static/highlight.less

@@ -8,11 +8,11 @@ pre code {
  display: block;
  background: white;
  color: @text-color;
- line-height: 1.7;
+ line-height: 2;
  border: 1px solid #e9e9e9;
- padding: 10px 15px;
+ padding: 16px 32px;
- border-radius: @border-radius-base;
+ border-radius: @border-radius-sm;
- font-size: 13px;
+ font-size: @font-size-base;
  white-space: pre;
  font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
@@ -21,7 +21,6 @@ code[class*="language-"],
 pre[class*="language-"] {
   color: black;
   background: none;
-  text-shadow: 0 1px white;
   font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   direction: ltr;
   text-align: left;
@@ -66,8 +65,8 @@ code[class*="language-"] ::selection {
 
 /* Code blocks */
 pre[class*="language-"] {
-  padding: 1em;
+  padding: 12px 20px;
-  margin: 1.2em 0;
+  margin: 16px 0;
   overflow: auto;
 }
 

site/theme/static/index.less

@@ -1,3 +1,4 @@
+@import '~antd/lib/style/v2-compatible-reset.less';
 @import '../../../components/style/themes/default.less';
 @import './common';
 @import './header';

site/theme/static/markdown.less

@@ -1,7 +1,7 @@
 .markdown {
   color: @text-color;
   font-size: 14px;
-  line-height: 1.8;
+  line-height: 2;
 }
 
 .highlight {
@@ -9,21 +9,22 @@
 }
 
 .markdown img {
-  vertical-align: middle;
+  max-width: ~"calc(100% - 32px)";
-  max-width: 100%;
+}
+
+.markdown p > img {
+  margin: 2.4em 1em;
+  box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
 }
 
 .markdown h1 {
   color: @heading-color;
   font-weight: 500;
-  line-height: 40px;
+  margin-bottom: 20px;
-  margin-bottom: 24px;
   margin-top: 8px;
   font-family: Lato, @font-family;
 
   .subtitle {
-    font-weight: normal;
-    font-size: 90%;
     margin-left: 12px;
   }
 }
@@ -40,8 +41,15 @@
   clear: both;
 }
 
-.markdown h1 { font-size: 28px; }
+.markdown h1 {
-.markdown h2 { font-size: 22px; }
+  font-size: 30px;
+  line-height: 38px;
+}
+.markdown h2 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
 .markdown h3 { font-size: 18px; }
 .markdown h4 { font-size: 16px; }
 .markdown h5 { font-size: 14px; }
@@ -60,11 +68,6 @@
   margin: 1em 0;
 }
 
-.markdown ul,
-.markdown ol {
-  padding: 0;
-}
-
 .markdown ul > li {
   list-style-type: circle;
   margin-left: 20px;
@@ -95,7 +98,7 @@
 }
 
 .markdown pre {
-  border-radius: @border-radius-base;
+  border-radius: @border-radius-sm;
   background: #f7f7f7;
   font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
@@ -105,21 +108,21 @@
   background: #f7f7f7;
   margin: 0;
   padding: 0;
-  font-size: 13px;
+  font-size: @font-size-base;
   color: @text-color;
   overflow: auto;
 }
 
 .markdown strong,
 .markdown b {
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .markdown > table {
   border-collapse: collapse;
   border-spacing: 0;
   empty-cells: show;
-  border: 1px solid #e9e9e9;
+  border: 1px solid @border-color-split;
   width: 100%;
   margin: 8px 0 16px;
 }
@@ -127,13 +130,13 @@
 .markdown > table th {
   white-space: nowrap;
   color: #5c6b77;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .markdown > table th,
 .markdown > table td {
-  border: 1px solid #e9e9e9;
+  border: 1px solid @border-color-split;
-  padding: 8px 16px;
+  padding: 16px 24px;
   text-align: left;
 }
 
@@ -143,8 +146,8 @@
 
 .markdown blockquote {
   font-size: 90%;
-  color: #999;
+  color: @text-color-secondary;
-  border-left: 4px solid #e9e9e9;
+  border-left: 4px solid @border-color-split;
   padding-left: 0.8em;
   margin: 1em 0;
 }
@@ -170,9 +173,10 @@
   margin-left: 10px;
   height: 12px;
   text-decoration: none;
+  font-weight: 400;
 
   i {
-    color: #999;
+    color: @text-color-secondary;
 
     &:hover {
       color: @primary-color;
@@ -201,9 +205,9 @@
 }
 
 .markdown.api-container table {
-  font-size: 13px;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
   td:first-child {
-    background: #fcfcfc;
     font-weight: 500;
     width: 20%;
     font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;

site/theme/static/page-nav.less

@@ -2,7 +2,8 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 100%;
+  width: ~"calc(100% - 194px - 64px)";
+  margin-left: 64px;
   overflow: hidden;
   font-size: 14px;
   border-top: 1px solid @border-color-split;

site/theme/static/responsive.less

@@ -1,27 +1,50 @@
+@import "~antd/lib/style/themes/default.less";
+
 .nav-phone-icon {
   display: none;
   position: absolute;
   right: 30px;
-  top: 32px;
+  top: 25px;
   z-index: 1;
   width: 16px;
   height: 22px;
   cursor: pointer;
 }
 
-@media only screen and (min-width: 0) and (max-width: 1280px) {
+@media only screen and (min-width: 1440px) and (max-width: 1599px) {
+  .main-wrapper > .ant-row > .ant-col-xl-5 {
+    width: 274px;
+  }
+
+  #header .ant-row .ant-col-xl-5 {
+    width: 274px;
+  }
+}
+
+@media only screen and (max-width: 1280px) {
   .en-us #search-box {
     display: none;
   }
 }
 
-@media only screen and (min-width: 0) and (max-width: 1180px) {
+@media only screen and (max-width: @screen-xl) {
-  .zh-cn #search-box {
+  #search-box {
     display: none;
   }
+  #logo {
+    padding: 0 40px;
+  }
+  .banner-wrapper .banner-title-wrapper {
+    h1 {
+      font-size: 36px;
+    }
+    p {
+      font-size: 16px;
+    }
+  }
 }
 
-@media only screen and (min-width: 0) and (max-width: 992px) {
+@media only screen and (max-width: @screen-lg) {
   #search-box {
     display: none;
   }
@@ -39,14 +62,6 @@
     margin: 10px 0;
   }
 
-  a#logo {
-    width: 150px;
-    margin-left: auto;
-    margin-right: auto;
-    float: none;
-    display: block;
-  }
-
   .banner-entry {
     position: relative;
     top: 30px;
@@ -124,7 +139,7 @@
       float: none;
     }
     div.version {
-      margin: 32px auto 16px;
+      margin: 16px auto;
       float: none;
     }
     .ant-popover-inner {
@@ -137,7 +152,7 @@
           display: inline-block;
         }
         .ant-btn {
-          margin: 32px 10% 0 0;
+          margin: 16px 10% 0 0;
         }
       }
     }
@@ -153,8 +168,8 @@
   }
 
   ul#nav li {
-    line-height: 60px;
+    line-height: 40px;
-    height: 60px;
+    height: 40px;
     padding: 0 !important;
     border: 0;
     a {

site/theme/static/toc.less

@@ -1,23 +1,18 @@
 .toc {
-  font-size: 14px;
+  font-size: 12px;
-  margin: 24px 0;
+  margin: 16px 0;
-  border-left: 1px solid #e9e9e9;
+  padding-left: 0;
+  border-left: 1px solid #ebedf0;
   list-style: none;
 }
 
-.markdown .toc {
+ul.toc > li {
-  background: #fbfbfb;
-  border-left: 2px solid #eee;
-}
-
-.toc > ul {
-  padding: 8px 0;
   list-style: none;
-}
+  margin-left: 0;
-
+  padding-left: 0;
-.toc > ul li {
+  &:not(:last-child) {
-  list-style: none;
+    margin-bottom: 16px;
-  margin: 0;
+  }
 }
 
 .toc li > ul {
@@ -32,7 +27,9 @@
   transition: all 0.3s ease;
   white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
   color: @text-color;
+  width: 110px;
 }
 
 .toc a:hover {
@@ -48,21 +45,15 @@
   position: absolute;
   top: 8px;
   right: 20px;
-}
+  .ant-affix {
-
+    background: #fff;
-.demos-anchor {
+  }
-  color: #aaa;
+}
-  font-size: 12px;
+.toc-affix-bottom {
-  margin: -4px 0 0;
+  position: absolute;
-  background-color: #fff;
+  bottom: 88px;
-  padding: 0;
+  right: 20px;
-  list-style: none;
+  .ant-affix {
-  a {
+    background: #fff;
-    padding-left: 8px;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 110px;
   }
 }

site/theme/template/Content/Article.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import DocumentTitle from 'react-document-title';
 import { getChildren } from 'jsonml.js/lib/utils';
-import { Timeline, Alert } from 'antd';
+import { Timeline, Alert, Affix } from 'antd';
 import delegate from 'delegate';
 import EditButton from './EditButton';
 import { ping } from '../utils';
@@ -102,7 +102,13 @@ export default class Article extends React.Component {
           }
           {
             (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null :
-            <section className="toc">{props.utils.toReactComponent(content.toc)}</section>
+            <Affix className="toc-affix" offsetTop={16}>
+              {
+                props.utils.toReactComponent(
+                  ['ul', { className: 'toc' }].concat(getChildren(content.toc))
+                )
+              }
+            </Affix>
           }
           {
             this.getArticle(props.utils.toReactComponent(

site/theme/template/Content/ComponentDoc.jsx

@@ -79,7 +79,7 @@ export default class ComponentDoc extends React.Component {
       <DocumentTitle title={`${subtitle || ''} ${title[locale] || title} - Ant Design`}>
         <article>
           <Affix className="toc-affix" offsetTop={16}>
-            <ul className="toc demos-anchor">
+            <ul id="demo-toc" className="toc">
               {jumper}
             </ul>
           </Affix>

site/theme/template/Content/MainContent.jsx

@@ -221,6 +221,7 @@ export default class MainContent extends React.Component {
     });
     const menuChild = (
       <Menu
+        inlineIndent="40"
         className="aside-container"
         mode="inline"
         openKeys={this.state.openKeys}
@@ -240,12 +241,12 @@ export default class MainContent extends React.Component {
             >
               {menuChild}
             </MobileMenu>) : (
-              <Col lg={4} md={6} sm={24} xs={24}>
+              <Col xxl={4} xl={5} lg={6} md={24} sm={24} xs={24} className="main-menu">
                 {menuChild}
               </Col>
             )
           }
-          <Col lg={20} md={18} sm={24} xs={24} className={mainContainerClass}>
+          <Col xxl={20} xl={19} lg={18} md={24} sm={24} xs={24} className={mainContainerClass}>
             {
               props.demos ?
                 <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} /> :
@@ -257,7 +258,7 @@ export default class MainContent extends React.Component {
         <Row>
           <Col
             lg={{ span: 20, offset: 4 }}
-            md={{ span: 18, offset: 6 }}
+            md={24}
             sm={24}
             xs={24}
           >

site/theme/template/Home/index.jsx

@@ -25,6 +25,7 @@ function getStyle() {
     }
     #header {
       position: fixed;
+      width: 100%;
       z-index: 999;
       background: rgba(0, 0, 0, 0.25);
       border-bottom: 1px solid transparent;

site/theme/template/Layout/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Modal, Icon, message } from 'antd';
+import { Modal, message, Row, Col } from 'antd';
 import { Link } from 'bisheng/router';
 import { isLocalStorageNameSupported, loadScript } from '../utils';
 import ColorPicker from '../Color/ColorPicker';
@@ -12,7 +12,7 @@ class Footer extends React.Component {
     this.lessLoaded = false;
 
     this.state = {
-      color: '#108ee9',
+      color: '#1890ff',
     };
   }
 
@@ -85,10 +85,12 @@ class Footer extends React.Component {
 
   render() {
     return (
-      <footer id="footer">
+      <footer id="footer" className="dark">
-        <ul>
+        <div className="footer-wrap">
-          <li>
+          <Row>
-            <h2><Icon type="github" /> Ant Design</h2>
+            <Col lg={6} sm={24} xs={24}>
+              <div className="footer-center">
+                <h2>Ant Design</h2>
                 <div>
                   <a target="_blank " href="https://github.com/ant-design/ant-design">
                     GitHub
@@ -138,9 +140,11 @@ class Footer extends React.Component {
                     onChangeComplete={this.handleColorChange}
                   />
                 </div>
-          </li>
+              </div>
-          <li>
+            </Col>
-            <h2><Icon type="link" /> <FormattedMessage id="app.footer.resources" /></h2>
+            <Col lg={6} sm={24} xs={24}>
+              <div className="footer-center">
+                <h2><FormattedMessage id="app.footer.resources" /></h2>
                 <div>
                   <a href="http://scaffold.ant.design">Scaffolds</a>
                   <span> - </span>
@@ -178,9 +182,11 @@ class Footer extends React.Component {
                   <span> - </span>
                   <FormattedMessage id="app.footer.antux" />
                 </div>
-          </li>
+              </div>
-          <li>
+            </Col>
-            <h2><Icon type="customer-service" /> <FormattedMessage id="app.footer.community" /></h2>
+            <Col lg={6} sm={24} xs={24}>
+              <div className="footer-center">
+                <h2><FormattedMessage id="app.footer.community" /></h2>
                 <div>
                   <a href="/changelog">
                     <FormattedMessage id="app.footer.change-log" />
@@ -221,24 +227,56 @@ class Footer extends React.Component {
                     <FormattedMessage id="app.footer.segmentfault" />
                   </a>
                 </div>
-          </li>
-          <li>
-            <h2>Copyright © {new Date().getFullYear()}</h2>
-            <div>
-              <FormattedMessage id="app.footer.author" />
-              &nbsp;
-              <Link to="/docs/resource/work-with-us">
-                <FormattedMessage id="app.footer.work_with_us" />
-              </Link>
               </div>
-            <div>
+            </Col>
+            <Col lg={6} sm={24} xs={24}>
+              <div className="footer-center">
+                <h2>
+                  <FormattedMessage id="app.footer.more-product" />
+                </h2>
+
+              </div>
+            </Col>
+          </Row>
+        </div>
+        <Row className="bottom-bar">
+          <Col lg={6} sm={24}>
+            <div className="build-tool">
               Built with&nbsp;
               <a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng">
                 BiSheng
               </a>
             </div>
-          </li>
+          </Col>
-        </ul>
+          <Col lg={18} sm={24}>
+            <span
+              style={{ lineHeight: '16px', paddingRight: 12, marginRight: 11, borderRight: '1px solid rgba(255, 255, 255, 0.55)' }}
+            >
+              <a
+                href="https://docs.alipay.com/policies/privacy/antfin"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <FormattedMessage id="app.footer.privacy" />
+              </a>
+            </span>
+            <span style={{ marginRight: 24 }}>
+              <a
+                href="https://render.alipay.com/p/f/fd-izto3cem/index.html"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <FormattedMessage id="app.footer.commitment" />
+              </a>
+            </span>
+            <span style={{ marginRight: 12 }}>ICP 证浙 B2-2-100257</span>
+            <span style={{ marginRight: 12 }}>Copyright © <FormattedMessage id="app.footer.company" /></span>
+            &nbsp;
+            <Link to="/docs/resource/work-with-us">
+              <FormattedMessage id="app.footer.work_with_us" />
+            </Link>
+          </Col>
+        </Row>
       </footer>
     );
   }

site/theme/template/Layout/Header.jsx

@@ -232,14 +232,15 @@ export default class Header extends React.Component {
           </Popover>
         ) : null}
         <Row>
-          <Col lg={4} md={5} sm={24} xs={24}>
+          <Col xxl={4} xl={5} lg={5} md={8} sm={24} xs={24}>
             <Link to={utils.getLocalizedPathname('/', isZhCN)} id="logo">
-              <img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
+              <img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/gVAKqIsuJCepKNbgbSwE.svg" />
               <span>Ant Design</span>
             </Link>
           </Col>
-          <Col lg={20} md={19} sm={0} xs={0}>
+          <Col xxl={20} xl={19} lg={19} md={16} sm={0} xs={0}>
             <div id="search-box">
+              <Icon type="search" />
               <AutoComplete
                 dataSource={options}
                 value={inputValue}

site/theme/zh-CN.js

@@ -61,6 +61,10 @@ module.exports = {
     'app.footer.version': '文档版本：',
     'app.footer.author': '蚂蚁金服体验技术部出品 @ AFX',
     'app.footer.work_with_us': '加入我们',
+    'app.footer.more-product': '更多产品',
+    'app.footer.privacy': '隐私权政策',
+    'app.footer.commitment': '权益保障承诺书',
+    'app.footer.company': '蚂蚁金融服务集团',
     'app.publish.title': 'antd@2.0.0 发布！',
     'app.publish.greeting': '你好，',
     'app.publish.intro': ' 已正式发布，欢迎升级。',