Skip to content

M
Moecube Store
Commit d2714c89 authored by HJISTC's avatar HJISTC
Browse files
Options

布局微调

parent 87aaf7ed
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 52 deletions
i18n.json
View file @ d2714c89
......@@ -6,7 +6,7 @@
"And":"and",
"OperationSystem":"Operation System",
"Home":"Home",
"BBS": "BBS",
"BBS": "Community",
"Download":"Download",
"CardTitle1": "Enter the Doujin World",
"CardTitle2": "For all Doujin Believers",
......@@ -15,7 +15,7 @@
"CardContent1":"New to Doujin world? No problem!\nMoeCube is the best place for you!\nNo more finding doujins games from ten different websites!\nMoeCube collect the best doujins for you!\n( Yes! We also make our own doujin games too! )",
"CardContent2":"If you are a doujin creator like us,\nyou may meet the same problem as we do.\nDoujin is hard, lonely and lack of modern platform,\nMoeCube is born to solve this problem.\nLet's get together and make doujin better!",
"CardContent3":"MoeCube connects people togehter.\nWe'll have communities, chatrooms, friends systems...etc.\nHere, meet the friend you like will be easy.\nWe wish you will no longer feel lonely!",
"CardContent4":"Not like those famous big-brand platform,\nwe are not money-oriented but love-oriented.\nMoeCube are going to serve both creators and players.\nWe offer smart tech-solutions for your unique demands.\n( Yes! We call that \"Black-Tech\"! )\n\nCurrently installed Black-Tech: \n",
"CardContent4":"Not like those famous big-brand platform,\nwe are not money-oriented but love-oriented.\nMoeCube are going to serve both creators and players.\nWe offer smart tech-solutions for your unique demands.\n( Yes! We call that \"Black-Tech\"! )\n\nCurrently installed Black-Tech:",
"CardAction1":"Download",
"CardAction2":"Contact Us (Offer Help, Cooperation)",
"CardAction3":"MoeCube Community",
......
src/App.css
View file @ d2714c89
......@@ -23,7 +23,6 @@
}
.App-Content1 {
margin-top: 64px;
height:450px;
background: url(../public/FrontPageBackGround.jpg) 100%/cover;
background-position: center;
......@@ -51,7 +50,7 @@
.App-Card-content {
margin-bottom: 2vh;
white-space: pre-line;
white-space: pre;
}
.ant-layout .ant-layout-header {
......@@ -98,14 +97,27 @@
font-size:1.5rem;
}
.ant-timeline-item-content {
padding: 0 0 0px 24px;
}
.ant-timeline-item-last .ant-timeline-item-content {
min-height: 0px;
}
.ant-timeline>.ant-timeline-item-pending,.ant-timeline>.ant-timeline-item-pending>div {
padding-bottom:0px;
}
#Card3Button
{
margin-top: 20px;
}
#Card4Button
{
margin-top: 50px;
margin-top: 20px;
}
.square{
......@@ -154,4 +166,8 @@
@keyframes downotup{
from{transform:translate(0,0px)}
to{transform:translate(0,-1000px)}
}
\ No newline at end of file
}
.MoeCubeProduct{
max-width: 370px;
}
src/App.js
View file @ d2714c89
......@@ -99,15 +99,14 @@ export default class App extends Component {
return (
<Layout>
{!isMobile ?
(<Header style={{width:'100%'}}>
<Nav_Mobile isMobile={isMobile} />
</Header>):
(<Header style={{width:'100%', padding:0}}>
<Nav_Mobile isMobile={isMobile} />
</Header>
)}
{!isMobile ?
(<Header style={{ width: '100%' }}>
<Nav_Mobile isMobile={isMobile} />
</Header>) :
(<Header style={{ width: '100%', padding: 0 }}>
<Nav_Mobile isMobile={isMobile} />
</Header>
)}
<Content className="App-Content1">
(<Row type="flex" justify="space-around" align="middle" >
<Col span={24} style={{ display: "flex", flexDirection: 'column', alignItems: 'center' }}>
......@@ -134,13 +133,10 @@ export default class App extends Component {
<FormattedMessage id={"Download"} />
</Button>
</a>
</div>
</Col>
</Row>
</Content>
<Content>
<div className="App-CardList">
{!isMobile ?
......@@ -166,38 +162,40 @@ export default class App extends Component {
</Row>
<Row>
<Col span="12">
<Card title={<FormattedMessage id={"CardTitle3"} />} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent3"} />
</p>
<Timeline>
<Timeline.Item>{stats.signups || 'loading..'} <FormattedMessage id="IsRegisted" /> </Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} <FormattedMessage id="IsPlaying" /> </Timeline.Item>
</Timeline>
<a href=""><Button type="primary" icon="star"><FormattedMessage id={"CardAction3"} /></Button></a>
</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={"WillHaveFunctions"} /></a>}>
{realData.CardTimeLine4.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
<a href=""><Button id="Card4Button" type="primary" icon="heart"><FormattedMessage id={"CardAction4"} /></Button></a>
</Card>
</Col>
<Col span="12">
<Card title={<FormattedMessage id={"CardTitle3"} />} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent3"} />
</p>
<Timeline>
<Timeline.Item>{stats.signups || 'loading..'} <FormattedMessage id="IsRegisted" /> </Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} <FormattedMessage id="IsPlaying" /> </Timeline.Item>
</Timeline>
<div className="MoeCubeProduct">
<img alt="MoeCubeProduct" width="100%" src={require('../public/MoeCubeProduct.png')} />
</div>
<a href=""><Button id="Card3Button" type="primary" icon="star"><FormattedMessage id={"CardAction3"} /></Button></a>
</Card>
</Col>
</Row>
</div>) : (<div>
<Row>
<Col span="24">
<Card title={<FormattedMessage id={"CardTitle1"} />} >
......@@ -214,41 +212,41 @@ export default class App extends Component {
<p className="App-Card-content">
<FormattedMessage id={"CardContent2"} />
</p>
<a href=""><Button type="primary" icon="plus-square-o"><FormattedMessage id={"CardAction2"} /></Button></a>
</Card>
</Col>
</Row>
<Row>
<Col span="24">
<Card title={<FormattedMessage id={"CardTitle3"} />} >
<Card title={<FormattedMessage id={"CardTitle4"} />} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent3"} />
<FormattedMessage id={"CardContent4"} />
</p>
<Timeline>
<Timeline.Item>{stats.signups || 'loading..'} 只萌新已加入萌卡</Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} 位爱的战士正在线游戏</Timeline.Item>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}>
{realData.CardTimeLine4.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
<a href=""><Button type="primary" icon="heart"><FormattedMessage id={"CardAction3"} /></Button></a>
<a href=""><Button id="Card4Button" size="large" type="primary"><FormattedMessage id={"CardAction4"} /></Button></a>
</Card>
</Col>
</Row>
<Row>
<Col span="24">
<Card title={<FormattedMessage id={"CardTitle4"} />} >
<Card title={<FormattedMessage id={"CardTitle3"} />} >
<p className="App-Card-content">
<FormattedMessage id={"CardContent4"} />
<FormattedMessage id={"CardContent3"} />
</p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}>
{realData.CardTimeLine4.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
<Timeline>
<Timeline.Item>{stats.signups || 'loading..'} 只萌新已加入萌卡</Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} 位爱的战士正在线游戏</Timeline.Item>
</Timeline>
<a href=""><Button id="Card4Button" size="large" type="primary"><FormattedMessage id={"CardAction4"} /></Button></a>
<div className="MoeCubeProduct">
<img alt="MoeCubeProduct" width="100%" src={require('../public/MoeCubeProduct.png')} />
</div>
<a href=""><Button id="Card3Button" type="primary" icon="heart"><FormattedMessage id={"CardAction3"} /></Button></a>
</Card>
</Col>
</Row>
......
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