Commit 756dacc7 authored by 2breakegg's avatar 2breakegg

排版和些细节

parent 02508bd6
......@@ -50,9 +50,45 @@
.App-Card-content {
margin-bottom: 2vh;
white-space: pre;
white-space: pre-line;
}
.ant-layout .ant-layout-header {
background: #404040
}
.font-C-Gray{
color:#ccc;
}
.App-Poster-Content .title{
font-size: 2.5rem;
padding: .8rem 0;
color: #eee
}
.App-Poster-Content a{
padding: 0 .5vw
}
.App-Poster-Content .title .sub{
font-size: 1rem;
color: #eee;
padding: 0 1vw
}
.ant-layout-content>p{
color: #eee;
font-size: 1.2rem
}
.ant-layout-footer{
text-align: right
}
.ant-card-head-title{
font-size:1.5rem;
}
.ant-timeline>.ant-timeline-item-pending,.ant-timeline>.ant-timeline-item-pending>div {
padding-bottom:0px;
}
......@@ -11,7 +11,9 @@ import { Layout, Row, Col, Button, Card, Timeline} from 'antd'
const { Content, Footer, Header} = Layout
import Nav from './Nav'
import Nav_Mobile from './Nav'
export default class App extends Component {
constructor(props){
......@@ -26,7 +28,7 @@ export default class App extends Component {
}
async componentDidMount(){
enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
enquire.register('only screen and (max-width: 767px)', {
match: () => {
this.setState({isMobile: true})
},
......@@ -84,15 +86,20 @@ export default class App extends Component {
return data
}
handleClick = (e) => {
console.log('click ', e);
}
render() {
const {latest, isMobile, stats} = this.state
const {language} = this.props
const realData = i18Data[language] ? i18Data[language] : i18Data['zh-CN']
return (
<Layout>
<Header>
<Nav isMobile={isMobile}/>
<Header style={{position:'fixed' ,zIndex:'9',width:'100%'}}>
<Nav_Mobile isMobile={isMobile} />
</Header>
<Content className="App-Content1">
......@@ -100,16 +107,16 @@ export default class App extends Component {
(<Row type="flex" justify="space-around" align="middle">
<Col span={12} push={1}>
<div className="App-Poster-Content">
<div style={{ fontSize: '2rem', padding: '.8rem 0 ', color: "#eee"}}>
<div className="title">
<FormattedMessage id="MoeCube"/>
<span style={{ fontSize: '1rem', color: "#eee", padding: '0 1vw',}}>
<span className="sub">
Beta
</span>
</div>
<div style={{color: "#ccc"}}>
<div className="font-C-Gray">
<FormattedMessage id="MoeCubeDoujinGamePlatform"/>
</div>
<div style={{color: "#ccc"}}>
<div className="font-C-Gray">
<FormattedMessage id="SupportBoth"/>
<DownLoadLink text='Windows' data={latest.win32} />
<FormattedMessage id="And"/>
......@@ -132,18 +139,18 @@ export default class App extends Component {
) : (
<div>
<Row>
<Col span={12}>
<Col span={24}>
<div className="App-Poster-Content">
<div style={{ fontSize: '2rem', padding: '.8rem 0 ', color: "#eee"}}>
<div className="title">
<FormattedMessage id="MoeCube"/>
<span style={{ fontSize: '1rem', color: "#eee", padding: '0 1vw',}}>
<span className="sub">
Beta
</span>
</div>
<div style={{color: "#ccc"}}>
<div className="font-C-Gray">
<FormattedMessage id="MoeCubeDoujinGamePlatform"/>
</div>
<div style={{color: "#ccc"}}>
<div className="font-C-Gray">
<FormattedMessage id="SupportBoth"/>
<DownLoadLink text='Windows' data={latest.win32} />
<FormattedMessage id="And"/>
......@@ -171,6 +178,8 @@ export default class App extends Component {
<Content>
<div className="App-CardList">
{!isMobile ?
(<div>
<Row>
<Col span="12">
<Card title={<FormattedMessage id={"CardTitle1"}/>} >
......@@ -230,12 +239,78 @@ export default class App extends Component {
</Card>
</Col>
</Row>
</div>):(<div>
<Row>
<Col span="24">
<Card title={<FormattedMessage id={"CardTitle1"}/>} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent1"} />
</p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction1"}/></a>}>
{realData.CardTimeLine1.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
</Card>
</Col>
</Row>
<Row>
<Col span="24">
<Card title={<FormattedMessage id={"CardTitle2"}/>} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent2"} />
</p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction2"}/></a>}>
{realData.CardTimeLine2.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
</Card>
</Col>
</Row>
<Row>
<Col span="24">
<Card title={<FormattedMessage id={"CardTitle3"}/>} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent3"} />
</p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction3"}/></a>}>
<Timeline.Item>{stats.signups || 'loading..'} 只萌新已加入萌卡</Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} 位爱的战士正在线游戏</Timeline.Item>
{realData.CardTimeLine3.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
</Card>
</Col>
</Row>
<Row>
<Col span="24">
<Card title={<FormattedMessage id={"CardTitle4"}/>} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent4"} />
</p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}>
{realData.CardTimeLine4.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
</Card>
</Col>
</Row>
</div>)}
</div>
</Content>
<Content className="App-Content2">
<p style={{color: '#eee', fontSize: '1.2rem'}} ><FormattedMessage id={"Welcome"} /></p>
<p><FormattedMessage id={"Welcome"} /></p>
<Button type="primary" icon="download" size='large' onClick={() => window.open(latest[this.state.platform].url)}>
<FormattedMessage id={"Download"}/>
......@@ -243,7 +318,7 @@ export default class App extends Component {
</Content>
<Footer style={{ textAlign: 'right' }}>
<Footer>
© MoeCube 2017 all right reserved.
</Footer>
</Layout>
......@@ -254,7 +329,7 @@ export default class App extends Component {
const DownLoadLink = ({text, data = {}}) => {
return (
<a href={data.url} style={{padding: '0 .5vw'}}>{text}</a>
<a href={data.url} >{text}</a>
)
}
import React from 'react'
import { Menu } from 'antd'
import { Menu ,Icon ,Dropdown} from 'antd'
import { FormattedMessage } from 'react-intl'
// const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;
export default class MyComponent extends React.Component {
render() {
export default class Nav_Mobile extends React.Component{
handleClick = (e) => {
console.log('click ', e);
}
render() {
const menu=(
<Menu style={{width:'100%'}}>
<Menu.Item key="0">
<a href="#">1st menu item</a>
</Menu.Item>
<Menu.Item key="1">
<a href="#">2nd menu item</a>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3">3d menu item</Menu.Item>
</Menu>
)
if(!this.props.isMobile){
return (
<div>
<div className="App-Logo">
......@@ -26,7 +44,25 @@ export default class MyComponent extends React.Component {
</a>
</Menu.Item>
</Menu>
</div>
);
}else{
return (
<div >
<div className="App-Logo">
<img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
<span>MoeCube</span>
</div>
<Dropdown overlay={menu} trigger={['click']}>
<a className="ant-dropdown-link" href="#">
Click me <Icon type="down" />
</a>
</Dropdown>
</div>
)
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment