Skip to content

M
Moecube Store
Commit 756dacc7 authored by 2breakegg's avatar 2breakegg
Browse files
Options

排版和些细节

parent 02508bd6
Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 84 deletions
src/App.css
View file @ 756dacc7
...@@ -50,9 +50,45 @@ ...@@ -50,9 +50,45 @@
.App-Card-content { .App-Card-content {
margin-bottom: 2vh; margin-bottom: 2vh;
white-space: pre; white-space: pre-line;
} }
.ant-layout .ant-layout-header { .ant-layout .ant-layout-header {
background: #404040 background: #404040
} }
\ No newline at end of file .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;
}
src/App.js
View file @ 756dacc7
...@@ -11,7 +11,9 @@ import { Layout, Row, Col, Button, Card, Timeline} from 'antd' ...@@ -11,7 +11,9 @@ import { Layout, Row, Col, Button, Card, Timeline} from 'antd'
const { Content, Footer, Header} = Layout const { Content, Footer, Header} = Layout
import Nav from './Nav' import Nav_Mobile from './Nav'
export default class App extends Component { export default class App extends Component {
constructor(props){ constructor(props){
...@@ -26,7 +28,7 @@ export default class App extends Component { ...@@ -26,7 +28,7 @@ export default class App extends Component {
} }
async componentDidMount(){ async componentDidMount(){
enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', { enquire.register('only screen and (max-width: 767px)', {
match: () => { match: () => {
this.setState({isMobile: true}) this.setState({isMobile: true})
}, },
...@@ -84,32 +86,37 @@ export default class App extends Component { ...@@ -84,32 +86,37 @@ export default class App extends Component {
return data return data
} }
handleClick = (e) => {
console.log('click ', e);
}
render() { render() {
const {latest, isMobile, stats} = this.state const {latest, isMobile, stats} = this.state
const {language} = this.props const {language} = this.props
const realData = i18Data[language] ? i18Data[language] : i18Data['zh-CN'] const realData = i18Data[language] ? i18Data[language] : i18Data['zh-CN']
return ( return (
<Layout> <Layout>
<Header> <Header style={{position:'fixed' ,zIndex:'9',width:'100%'}}>
<Nav isMobile={isMobile}/> <Nav_Mobile isMobile={isMobile} />
</Header> </Header>
<Content className="App-Content1"> <Content className="App-Content1">
{!isMobile ? {!isMobile ?
(<Row type="flex" justify="space-around" align="middle"> (<Row type="flex" justify="space-around" align="middle">
<Col span={12} push={1}> <Col span={12} push={1}>
<div className="App-Poster-Content"> <div className="App-Poster-Content">
<div style={{ fontSize: '2rem', padding: '.8rem 0 ', color: "#eee"}}> <div className="title">
<FormattedMessage id="MoeCube"/> <FormattedMessage id="MoeCube"/>
<span style={{ fontSize: '1rem', color: "#eee", padding: '0 1vw',}}> <span className="sub">
Beta Beta
</span> </span>
</div> </div>
<div style={{color: "#ccc"}}> <div className="font-C-Gray">
<FormattedMessage id="MoeCubeDoujinGamePlatform"/> <FormattedMessage id="MoeCubeDoujinGamePlatform"/>
</div> </div>
<div style={{color: "#ccc"}}> <div className="font-C-Gray">
<FormattedMessage id="SupportBoth"/> <FormattedMessage id="SupportBoth"/>
<DownLoadLink text='Windows' data={latest.win32} /> <DownLoadLink text='Windows' data={latest.win32} />
<FormattedMessage id="And"/> <FormattedMessage id="And"/>
...@@ -132,18 +139,18 @@ export default class App extends Component { ...@@ -132,18 +139,18 @@ export default class App extends Component {
) : ( ) : (
<div> <div>
<Row> <Row>
<Col span={12}> <Col span={24}>
<div className="App-Poster-Content"> <div className="App-Poster-Content">
<div style={{ fontSize: '2rem', padding: '.8rem 0 ', color: "#eee"}}> <div className="title">
<FormattedMessage id="MoeCube"/> <FormattedMessage id="MoeCube"/>
<span style={{ fontSize: '1rem', color: "#eee", padding: '0 1vw',}}> <span className="sub">
Beta Beta
</span> </span>
</div> </div>
<div style={{color: "#ccc"}}> <div className="font-C-Gray">
<FormattedMessage id="MoeCubeDoujinGamePlatform"/> <FormattedMessage id="MoeCubeDoujinGamePlatform"/>
</div> </div>
<div style={{color: "#ccc"}}> <div className="font-C-Gray">
<FormattedMessage id="SupportBoth"/> <FormattedMessage id="SupportBoth"/>
<DownLoadLink text='Windows' data={latest.win32} /> <DownLoadLink text='Windows' data={latest.win32} />
<FormattedMessage id="And"/> <FormattedMessage id="And"/>
...@@ -171,71 +178,139 @@ export default class App extends Component { ...@@ -171,71 +178,139 @@ export default class App extends Component {
<Content> <Content>
<div className="App-CardList"> <div className="App-CardList">
<Row> {!isMobile ?
<Col span="12"> (<div>
<Card title={<FormattedMessage id={"CardTitle1"}/>} > <Row>
<p className="App-Card-content"> <Col span="12">
<FormattedMessage id={"CardContent1"} /> <Card title={<FormattedMessage id={"CardTitle1"}/>} >
</p> <p className="App-Card-content">
<a href=""><Button size="large"><FormattedMessage id={"CardAction1"} /></Button></a> <FormattedMessage id={"CardContent1"} />
</Card> </p>
</Col> <a href=""><Button size="large"><FormattedMessage id={"CardAction1"} /></Button></a>
</Card>
<Col span="12"> </Col>
<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="12"> <Col span="12">
<Card title={<FormattedMessage id={"CardTitle3"}/>} > <Card title={<FormattedMessage id={"CardTitle2"}/>} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent3"} /> <FormattedMessage id={"CardContent2"} />
</p> </p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction3"}/></a>}> <Timeline pending={<a href="#"><FormattedMessage id={"CardAction2"}/></a>}>
<Timeline.Item>{stats.signups || 'loading..'} <FormattedMessage id="IsRegisted"/> </Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} <FormattedMessage id="IsPlaying"/> </Timeline.Item>
{realData.CardTimeLine3.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
{realData.CardTimeLine2.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
</Card> </Card>
</Col> </Col>
</Row>
<Col span="12"> <Row>
<Card title={<FormattedMessage id={"CardTitle4"}/>} > <Col span="12">
<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..'} <FormattedMessage id="IsRegisted"/> </Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} <FormattedMessage id="IsPlaying"/> </Timeline.Item>
{realData.CardTimeLine3.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
</Card>
</Col>
<Col span="12">
<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>
<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"> <p className="App-Card-content">
<FormattedMessage id={"CardContent4"} /> <FormattedMessage id={"CardContent2"} />
</p> </p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}> <Timeline pending={<a href="#"><FormattedMessage id={"CardAction2"}/></a>}>
{realData.CardTimeLine4.map((item, i) => {
{realData.CardTimeLine2.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item> return <Timeline.Item key={i}>{item}</Timeline.Item>
})} })}
</Timeline> </Timeline>
</Card> </Card>
</Col> </Col>
</Row> </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> </div>
</Content> </Content>
<Content className="App-Content2"> <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)}> <Button type="primary" icon="download" size='large' onClick={() => window.open(latest[this.state.platform].url)}>
<FormattedMessage id={"Download"}/> <FormattedMessage id={"Download"}/>
...@@ -243,7 +318,7 @@ export default class App extends Component { ...@@ -243,7 +318,7 @@ export default class App extends Component {
</Content> </Content>
<Footer style={{ textAlign: 'right' }}> <Footer>
© MoeCube 2017 all right reserved. © MoeCube 2017 all right reserved.
</Footer> </Footer>
</Layout> </Layout>
...@@ -254,7 +329,7 @@ export default class App extends Component { ...@@ -254,7 +329,7 @@ export default class App extends Component {
const DownLoadLink = ({text, data = {}}) => { const DownLoadLink = ({text, data = {}}) => {
return ( return (
<a href={data.url} style={{padding: '0 .5vw'}}>{text}</a> <a href={data.url} >{text}</a>
) )
} }
src/Nav.js
View file @ 756dacc7
import React from 'react' import React from 'react'
import { Menu } from 'antd' import { Menu ,Icon ,Dropdown} from 'antd'
import { FormattedMessage } from 'react-intl' import { FormattedMessage } from 'react-intl'
// const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;
export default class MyComponent extends React.Component { export default class Nav_Mobile extends React.Component{
handleClick = (e) => {
console.log('click ', e);
}
render() { render() {
const menu=(
return ( <Menu style={{width:'100%'}}>
<div> <Menu.Item key="0">
<div className="App-Logo"> <a href="#">1st menu item</a>
<img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/> </Menu.Item>
<span>MoeCube</span> <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">
<img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
<span>MoeCube</span>
</div>
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['1']}
style={{ lineHeight: '64px' }}>
<Menu.Item key="1">
<FormattedMessage id={"Home"}/>
</Menu.Item>
<Menu.Item key="2">
<a href="https://ygobbs.com/">
<FormattedMessage id={"BBS"}/>
</a>
</Menu.Item>
</Menu>
</div> </div>
<Menu );
theme="dark" }else{
mode="horizontal" return (
defaultSelectedKeys={['1']} <div >
style={{ lineHeight: '64px' }}> <div className="App-Logo">
<img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
<span>MoeCube</span>
</div>
<Menu.Item key="1"> <Dropdown overlay={menu} trigger={['click']}>
<FormattedMessage id={"Home"}/> <a className="ant-dropdown-link" href="#">
</Menu.Item> Click me <Icon type="down" />
<Menu.Item key="2">
<a href="https://ygobbs.com/">
<FormattedMessage id={"BBS"}/>
</a> </a>
</Menu.Item> </Dropdown>
</Menu>
</div>
) </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