布局微调

i18n.json

@@ -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

@@ -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{
@@ -155,3 +167,7 @@
   from{transform:translate(0,0px)}
   to{transform:translate(0,-1000px)}
 }
+
+.MoeCubeProduct{
+  max-width: 370px;
+}

src/App.js

@@ -100,14 +100,13 @@ export default class App extends Component {
       <Layout>
 
         {!isMobile ?
-        (<Header style={{width:'100%'}}>
+          (<Header style={{ width: '100%' }}>
             <Nav_Mobile isMobile={isMobile} />
-        </Header>):
-        (<Header style={{width:'100%', padding:0}}>
+          </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>