mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-24 21:11:18 +08:00
Upgrade antd 3.0 site style (#8324)
* 3.0 site update * update footer * improve
This commit is contained in:
ddcat1115
GitHub
parent
c0b7bdb9f3
commit
daf596a898
@ -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. ',
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -23,24 +23,18 @@ a {
|
||||
|
||||
.main-wrapper {
|
||||
background: #fff;
|
||||
margin: 0 48px;
|
||||
border-radius: @border-radius-base;
|
||||
padding: 24px 0 0;
|
||||
margin-bottom: 24px;
|
||||
padding: 40px 0 0;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
overflow: hidden;
|
||||
margin: 0 2%;
|
||||
list-style: none;
|
||||
li {
|
||||
float: left;
|
||||
width: 25%;
|
||||
padding: 24px 2%;
|
||||
.ant-row {
|
||||
text-align: center;
|
||||
.footer-center {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
@header-height: 80px;
|
||||
@header-height: 64px;
|
||||
|
||||
#header {
|
||||
transition: opacity 0.5s;
|
||||
background: #fff;
|
||||
height: @header-height;
|
||||
margin-bottom: 24px;
|
||||
padding: 0 48px;
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
&.home-nav-bottom {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
@ -29,25 +28,27 @@
|
||||
}
|
||||
|
||||
#logo {
|
||||
overflow: hidden;
|
||||
padding-left: 40px;
|
||||
float: left;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
text-decoration: none;
|
||||
|
||||
#logo img {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
width: 40px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#logo span {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
font-family: 'Raleway', 'Hiragino Sans GB', sans-serif;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-transform: uppercase;
|
||||
img {
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
width: 32px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
span {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-family: 'Raleway', 'Hiragino Sans GB', sans-serif;
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#search-box {
|
||||
@ -55,13 +56,19 @@
|
||||
float: left;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding-left: 30px;
|
||||
margin: 29px auto 0;
|
||||
padding-left: 16px;
|
||||
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 {
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
min-width: 72px;
|
||||
text-align: center;
|
||||
border-bottom-width: 3px;
|
||||
#nav {
|
||||
&.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
|
||||
&.ant-menu-item-selected a {
|
||||
color: @primary-color;
|
||||
font-weight: bold;
|
||||
& > .ant-menu-item {
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
min-width: 72px;
|
||||
border-top: 2px solid transparent;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-menu-item {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
border-radius: @border-radius-base;
|
||||
font-size: 13px;
|
||||
padding: 16px 32px;
|
||||
border-radius: @border-radius-sm;
|
||||
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;
|
||||
margin: 1.2em 0;
|
||||
padding: 12px 20px;
|
||||
margin: 16px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@import '~antd/lib/style/v2-compatible-reset.less';
|
||||
@import '../../../components/style/themes/default.less';
|
||||
@import './common';
|
||||
@import './header';
|
||||
|
||||
@ -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: 100%;
|
||||
max-width: ~"calc(100% - 32px)";
|
||||
}
|
||||
|
||||
.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: 24px;
|
||||
margin-bottom: 20px;
|
||||
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 h2 { font-size: 22px; }
|
||||
.markdown h1 {
|
||||
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;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid @border-color-split;
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -143,8 +146,8 @@
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
color: @text-color-secondary;
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
.zh-cn #search-box {
|
||||
@media only screen and (max-width: @screen-xl) {
|
||||
#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;
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
a {
|
||||
|
||||
@ -1,23 +1,18 @@
|
||||
.toc {
|
||||
font-size: 14px;
|
||||
margin: 24px 0;
|
||||
border-left: 1px solid #e9e9e9;
|
||||
font-size: 12px;
|
||||
margin: 16px 0;
|
||||
padding-left: 0;
|
||||
border-left: 1px solid #ebedf0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.markdown .toc {
|
||||
background: #fbfbfb;
|
||||
border-left: 2px solid #eee;
|
||||
}
|
||||
|
||||
.toc > ul {
|
||||
padding: 8px 0;
|
||||
ul.toc > li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.toc > ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.demos-anchor {
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
margin: -4px 0 0;
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
a {
|
||||
padding-left: 8px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 110px;
|
||||
.ant-affix {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
.toc-affix-bottom {
|
||||
position: absolute;
|
||||
bottom: 88px;
|
||||
right: 20px;
|
||||
.ant-affix {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,160 +85,198 @@ class Footer extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<footer id="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<h2><Icon type="github" /> Ant Design</h2>
|
||||
<div>
|
||||
<a target="_blank " href="https://github.com/ant-design/ant-design">
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://pro.ant.design">Ant Design Pro</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://mobile.ant.design">Ant Design Mobile</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://ng.ant.design">NG-ZORRO</a>
|
||||
<span> - </span>
|
||||
Ant Design of Angular
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank " href="https://github.com/websemantics/awesome-ant-design">
|
||||
<FormattedMessage id="app.footer.awesome" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank " href="http://ant-design.gitee.io/">
|
||||
<FormattedMessage id="app.footer.chinamirror" />
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<ColorPicker
|
||||
type="sketch"
|
||||
small
|
||||
color={this.state.color}
|
||||
position="top"
|
||||
presetColors={[
|
||||
'#F5222D',
|
||||
'#FA541C',
|
||||
'#FA8C16',
|
||||
'#FAAD14',
|
||||
'#FADB14',
|
||||
'#A0D911',
|
||||
'#52C41A',
|
||||
'#13C2C2',
|
||||
'#1890FF',
|
||||
'#2F54EB',
|
||||
'#722ED1',
|
||||
'#EB2F96',
|
||||
]}
|
||||
onChangeComplete={this.handleColorChange}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h2><Icon type="link" /> <FormattedMessage id="app.footer.resources" /></h2>
|
||||
<div>
|
||||
<a href="http://scaffold.ant.design">Scaffolds</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.scaffolds" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <FormattedMessage id="app.footer.dva" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli">dva-cli</a> -
|
||||
<FormattedMessage id="app.footer.dev-tools" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.eggjs" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.data-vis" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.motion" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">AntD Library</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.antd-library" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.antux" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h2><Icon type="customer-service" /> <FormattedMessage id="app.footer.community" /></h2>
|
||||
<div>
|
||||
<a href="/changelog">
|
||||
<FormattedMessage id="app.footer.change-log" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ">
|
||||
<FormattedMessage id="app.footer.faq" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design">
|
||||
<FormattedMessage id="app.footer.discuss-cn" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english">
|
||||
<FormattedMessage id="app.footer.discuss-en" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/">
|
||||
<FormattedMessage id="app.footer.bug-report" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues">
|
||||
<FormattedMessage id="app.footer.issues" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd">
|
||||
<FormattedMessage id="app.footer.stackoverflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd">
|
||||
<FormattedMessage id="app.footer.segmentfault" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Copyright © {new Date().getFullYear()}</h2>
|
||||
<div>
|
||||
<FormattedMessage id="app.footer.author" />
|
||||
|
||||
<Link to="/docs/resource/work-with-us">
|
||||
<FormattedMessage id="app.footer.work_with_us" />
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<footer id="footer" className="dark">
|
||||
<div className="footer-wrap">
|
||||
<Row>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://pro.ant.design">Ant Design Pro</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://mobile.ant.design">Ant Design Mobile</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://ng.ant.design">NG-ZORRO</a>
|
||||
<span> - </span>
|
||||
Ant Design of Angular
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank " href="https://github.com/websemantics/awesome-ant-design">
|
||||
<FormattedMessage id="app.footer.awesome" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank " href="http://ant-design.gitee.io/">
|
||||
<FormattedMessage id="app.footer.chinamirror" />
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<ColorPicker
|
||||
type="sketch"
|
||||
small
|
||||
color={this.state.color}
|
||||
position="top"
|
||||
presetColors={[
|
||||
'#F5222D',
|
||||
'#FA541C',
|
||||
'#FA8C16',
|
||||
'#FAAD14',
|
||||
'#FADB14',
|
||||
'#A0D911',
|
||||
'#52C41A',
|
||||
'#13C2C2',
|
||||
'#1890FF',
|
||||
'#2F54EB',
|
||||
'#722ED1',
|
||||
'#EB2F96',
|
||||
]}
|
||||
onChangeComplete={this.handleColorChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<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>
|
||||
<FormattedMessage id="app.footer.scaffolds" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <FormattedMessage id="app.footer.dva" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli">dva-cli</a> -
|
||||
<FormattedMessage id="app.footer.dev-tools" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.eggjs" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.data-vis" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.motion" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">AntD Library</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.antd-library" />
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a>
|
||||
<span> - </span>
|
||||
<FormattedMessage id="app.footer.antux" />
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<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" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ">
|
||||
<FormattedMessage id="app.footer.faq" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design">
|
||||
<FormattedMessage id="app.footer.discuss-cn" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english">
|
||||
<FormattedMessage id="app.footer.discuss-en" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/">
|
||||
<FormattedMessage id="app.footer.bug-report" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues">
|
||||
<FormattedMessage id="app.footer.issues" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd">
|
||||
<FormattedMessage id="app.footer.stackoverflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd">
|
||||
<FormattedMessage id="app.footer.segmentfault" />
|
||||
</a>
|
||||
</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
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng">
|
||||
BiSheng
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</Col>
|
||||
<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>
|
||||
|
||||
<Link to="/docs/resource/work-with-us">
|
||||
<FormattedMessage id="app.footer.work_with_us" />
|
||||
</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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': ' 已正式发布，欢迎升级。',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user