mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
update home page style, close #8238
This commit is contained in:
afc163
parent
b44a0c93cd
commit
f7a8d02f09
@ -28,7 +28,7 @@ a {
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0 194px 144px 64px;
|
||||
padding: 0 170px 144px 64px;
|
||||
margin-left: -1px;
|
||||
background: #fff;
|
||||
min-height: 500px;
|
||||
|
||||
@ -34,18 +34,12 @@
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
height: 28px;
|
||||
margin-right: 16px;
|
||||
height: 32px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
span {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC', 'Raleway', 'Hiragino Sans GB', sans-serif;
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
text-transform: uppercase;
|
||||
img + img {
|
||||
height: 16.5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,77 +2,58 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover;
|
||||
background: url("https://gw.alipayobjects.com/zos/rmsportal/UuWvfiYyEArxEECAKvRt.png") no-repeat center / cover;
|
||||
}
|
||||
.banner-text-wrapper {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
top: 53%;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
font-family: Lato, @font-family;
|
||||
right: 9%;
|
||||
top: 55%;
|
||||
color: @heading-color;
|
||||
}
|
||||
.banner-text-wrapper h2 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
font-family: 'Raleway', 'Hiragino Sans GB';
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
font-size: 56px;
|
||||
line-height: 64px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
.banner-text-wrapper h2 p {
|
||||
color: #ff3171;
|
||||
color: #f9323f;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
.banner-text-wrapper .line {
|
||||
width: 0.8px;
|
||||
height: 76px;
|
||||
width: 2px;
|
||||
height: 96px;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, .44);
|
||||
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
background: #d7dce0;
|
||||
top: 16px;
|
||||
right: -25px;
|
||||
left: -25px;
|
||||
}
|
||||
.banner-text-wrapper > p {
|
||||
margin: 10px auto 24px;
|
||||
font-size: 16px;
|
||||
margin: 20px auto 32px;
|
||||
font-size: 20px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.banner-text-wrapper .start-button {
|
||||
@start-button-color: tint(@primary-color, 20%);
|
||||
margin-bottom: 24px;
|
||||
text-align: right;
|
||||
> a {
|
||||
display: inline-block;
|
||||
.ant-btn {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
font-weight: 500;
|
||||
border-radius: @border-radius-sm;
|
||||
border: 1px solid @start-button-color;
|
||||
text-decoration: none;
|
||||
color: #0ae;
|
||||
font-size: 15px;
|
||||
background: transparent;
|
||||
transition: all .45s;
|
||||
border-radius: 100px;
|
||||
margin-right: 16px;
|
||||
font-size: 16px;
|
||||
width: 114px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
margin-left: 8px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: @start-button-color;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-text-wrapper .github-btn {
|
||||
float: right;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
|
||||
a:hover {
|
||||
color: #333;
|
||||
}
|
||||
@ -82,15 +63,15 @@
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
color: @text-color-secondary;
|
||||
animation: upDownMove 1.2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 700px;
|
||||
height: 100vh;
|
||||
height: ~"calc(100vh - 64px)";
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@ -101,32 +82,34 @@
|
||||
background: #fff;
|
||||
|
||||
.image-wrapper {
|
||||
width: 65%;
|
||||
width: 60%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
width: 35%;
|
||||
width: 40%;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: -30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 110px;
|
||||
font-family: Lato, @font-family;
|
||||
z-index: 1;
|
||||
}
|
||||
.text-wrapper h2,
|
||||
.text-wrapper-bottom h2 {
|
||||
font-size: 32px;
|
||||
color: @site-text-color;
|
||||
font-weight: normal;
|
||||
font-size: 38px;
|
||||
color: @heading-color;
|
||||
line-height: 46px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-wrapper p {
|
||||
margin: 10px 0 20px;
|
||||
margin: 20px 0 40px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
line-height: 24px;
|
||||
color: @text-color;
|
||||
}
|
||||
.left-text {
|
||||
padding-left: 10%;
|
||||
@ -166,8 +149,8 @@
|
||||
.text-wrapper-bottom p {
|
||||
margin: 20px auto;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
line-height: 24px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
@keyframes upDownMove {
|
||||
|
||||
@ -98,6 +98,7 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
.start-button {
|
||||
text-align: center;
|
||||
> a {
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
})()
|
||||
</script>
|
||||
<link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" type="image/x-icon">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ root }}index-1.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ root }}index-2.css"/>
|
||||
<link rel="stylesheet/less" type="text/css" href="{{ root }}color.less"/>
|
||||
|
||||
@ -3,40 +3,43 @@ import { Link } from 'bisheng/router';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
|
||||
import GitHubButton from 'react-github-button';
|
||||
import { Icon } from 'antd';
|
||||
import { Icon, Button } from 'antd';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import * as utils from '../utils';
|
||||
|
||||
function typeFunc(a) {
|
||||
if (a.key === 'line') {
|
||||
return 'right';
|
||||
return 'left';
|
||||
} else if (a.key === 'button') {
|
||||
return 'bottom';
|
||||
}
|
||||
return 'left';
|
||||
return 'right';
|
||||
}
|
||||
|
||||
export default function Banner({ location, onEnterChange }) {
|
||||
export default function Banner({ location }) {
|
||||
const isZhCN = utils.isZhCN(location.pathname);
|
||||
return (
|
||||
<section className="page banner-wrapper">
|
||||
<ScrollElement
|
||||
className="page"
|
||||
id="banner"
|
||||
onChange={({ mode }) => onEnterChange(mode)}
|
||||
playScale={0.9}
|
||||
>
|
||||
<QueueAnim className="banner-text-wrapper" type={typeFunc} delay={300} key="banner">
|
||||
<h2 key="h2">ANT <p>DESIGN</p></h2>
|
||||
<p key="content"><FormattedMessage id="app.home.slogan" /></p>
|
||||
<span className="line" key="line" />
|
||||
<div key="button1" className="start-button clearfix">
|
||||
<Link to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN)}>
|
||||
<FormattedMessage id="app.home.introduce" />
|
||||
</Link>
|
||||
<Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
|
||||
<FormattedMessage id="app.home.start" />
|
||||
</Link>
|
||||
<div key="button1" className="start-button">
|
||||
<Button type="primary" size="large">
|
||||
<Link to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN)}>
|
||||
<FormattedMessage id="app.home.introduce" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button type="primary" ghost size="large">
|
||||
<Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
|
||||
<FormattedMessage id="app.home.start" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<GitHubButton
|
||||
key="github-button"
|
||||
|
||||
@ -20,7 +20,6 @@ export default function Page3({ location }) {
|
||||
className="text-wrapper"
|
||||
key="text"
|
||||
leaveReverse
|
||||
style={{ top: '40%' }}
|
||||
>
|
||||
<h2 key="h2"><FormattedMessage id="app.home.reusable-components" /></h2>
|
||||
<p key="p" style={{ maxWidth: 280 }}><FormattedMessage id="app.home.components-intro" /></p>
|
||||
|
||||
@ -9,89 +9,8 @@ import Page4 from './Page4';
|
||||
// To store style which is only for Home and has conflicts with others.
|
||||
function getStyle() {
|
||||
return `
|
||||
html, body{
|
||||
height: auto;
|
||||
}
|
||||
.page-wrapper {
|
||||
background: #fff;
|
||||
}
|
||||
.main-wrapper {
|
||||
background: transparent;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
min-height: 600px;
|
||||
}
|
||||
#header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
#header .ant-select-selection,
|
||||
#header .ant-menu {
|
||||
background: transparent;
|
||||
}
|
||||
#header .ant-select-search__field {
|
||||
color: #eee;
|
||||
}
|
||||
#header .ant-select-arrow {
|
||||
color: #fff;
|
||||
}
|
||||
#header .ant-select-selection__placeholder {
|
||||
color: rgba(255,255,255,0.57);
|
||||
}
|
||||
#header.home-nav-white .ant-select-search__field {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
#header.home-nav-white .ant-select-selection__placeholder {
|
||||
color: rgb(204, 204, 204);
|
||||
}
|
||||
#header.home-nav-white {
|
||||
background: rgba(255, 255, 255, 0.91);
|
||||
border-bottom-color: #ebedee;
|
||||
}
|
||||
.home-nav-white #search-box {
|
||||
border-left-color: #ebedee;
|
||||
}
|
||||
.home-nav-white #nav a {
|
||||
color: #314659;
|
||||
}
|
||||
#header.home-nav-white .version > .ant-select-selection {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
#header.home-nav-white .version > .ant-select-selection:not(:hover) {
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
#header.home-nav-white .version .ant-select-arrow {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.nav-phone-icon:before {
|
||||
background: #eee;
|
||||
box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
|
||||
}
|
||||
.home-nav-white .nav-phone-icon:before {
|
||||
background: #777;
|
||||
box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
|
||||
}
|
||||
.version > .ant-select-selection,
|
||||
#nav a {
|
||||
color: #eee;
|
||||
transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
#nav a.header-link {
|
||||
color: #fff;
|
||||
}
|
||||
.home-nav-white #nav a.header-link {
|
||||
color: #314659;
|
||||
}
|
||||
#search-box {
|
||||
border-left-color: rgba(235, 237, 238, .5);
|
||||
transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ export default class Header extends React.Component {
|
||||
render() {
|
||||
const { inputValue, menuMode, menuVisible } = this.state;
|
||||
const {
|
||||
location, picked, isFirstScreen, themeConfig,
|
||||
location, picked, themeConfig,
|
||||
} = this.props;
|
||||
const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion };
|
||||
const versionOptions = Object.keys(docVersions)
|
||||
@ -136,7 +136,6 @@ export default class Header extends React.Component {
|
||||
|
||||
const headerClassName = classNames({
|
||||
clearfix: true,
|
||||
'home-nav-white': !isFirstScreen,
|
||||
});
|
||||
|
||||
const menu = [
|
||||
@ -217,7 +216,7 @@ export default class Header extends React.Component {
|
||||
<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://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
|
||||
<span>ANT DESIGN</span>
|
||||
<img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/riHHtumCNCNUsdcTpcfn.svg" />
|
||||
</Link>
|
||||
</Col>
|
||||
<Col xxl={20} xl={19} lg={19} md={16} sm={0} xs={0}>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { cloneElement } from 'react';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { addLocaleData, IntlProvider } from 'react-intl';
|
||||
@ -30,7 +30,6 @@ export default class Layout extends React.Component {
|
||||
const appLocale = utils.isZhCN(pathname) ? cnLocale : enLocale;
|
||||
addLocaleData(appLocale.data);
|
||||
this.state = {
|
||||
isFirstScreen: true,
|
||||
appLocale,
|
||||
};
|
||||
}
|
||||
@ -54,20 +53,14 @@ export default class Layout extends React.Component {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
onEnterChange = (mode) => {
|
||||
this.setState({
|
||||
isFirstScreen: mode === 'enter',
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, ...restProps } = this.props;
|
||||
const { appLocale, isFirstScreen } = this.state;
|
||||
const { appLocale } = this.state;
|
||||
return (
|
||||
<IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
|
||||
<div className="page-wrapper">
|
||||
<Header {...restProps} isFirstScreen={isFirstScreen} />
|
||||
{cloneElement(children, { onEnterChange: this.onEnterChange })}
|
||||
<Header {...restProps} />
|
||||
{children}
|
||||
<Footer {...restProps} />
|
||||
</div>
|
||||
</IntlProvider>
|
||||
|
||||
@ -31,7 +31,7 @@ module.exports = {
|
||||
'app.home.reusable-components': '丰富的基础组件',
|
||||
'app.home.components-intro': '丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。',
|
||||
'app.home.learn-more': '了解更多',
|
||||
'app.home.sub-slogan': '微小·确定·幸福',
|
||||
'app.home.sub-slogan': '微小 · 确定 · 幸福',
|
||||
'app.home.vision': '这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。',
|
||||
'app.footer.repo': 'GitHub 仓库',
|
||||
'app.footer.awesome': 'Awesome Ant Design',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user