Merge branch 'master' of github.com:moecube/moecube-store

.gitignore

@@ -17,3 +17,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.idea/
+.vscode/
\ No newline at end of file

.idea/jsLibraryMappings.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <includedPredefinedLibrary name="ECMAScript 6" />
-  </component>
-</project>
\ No newline at end of file

.idea/misc.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="JSX" />
-  </component>
-</project>
\ No newline at end of file

.idea/modules.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/mycard-store.iml" filepath="$PROJECT_DIR$/.idea/mycard-store.iml" />
-    </modules>
-  </component>
-</project>
\ No newline at end of file

.idea/mycard-store.iml

-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
\ No newline at end of file

.idea/vcs.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file

.travis.yml

@@ -14,7 +14,7 @@ before_deploy:
   - unzip OSS_Python_API_20160419.zip
 deploy:
   provider: script
-  script: python osscmd uploadfromdir aot oss://moecube/store --id=$ALIYUN_ID --key=$ALIYUN_SECRET
+  script: python osscmd uploadfromdir aot oss://mycard/store --id=$ALIYUN_ID --key=$ALIYUN_SECRET
   skip_cleanup: true
   on:
     branch: master

.vscode/settings.json

-{
-    "vsicons.presets.angular": false
-}
\ No newline at end of file

package.json

@@ -50,9 +50,12 @@
     "antd": "^2.7.4",
     "axios": "^0.15.3",
     "babel-plugin-import": "^1.1.1",
+    "core-js": "^2.5.1",
     "enquire": "^0.0.2",
     "install": "^0.8.7",
+    "intl": "^1.2.5",
     "js-yaml": "^3.8.1",
+    "matchmedia-polyfill": "^0.3.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-intl": "^2.2.3",

public/app.css

+/* Space out content a bit */
+body {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header,
+.marketing,
+.footer {
+    padding-right: 1rem;
+    padding-left: 1rem;
+}
+
+/* Custom page header */
+.header {
+    padding-bottom: 1rem;
+    border-bottom: .05rem solid #e5e5e5;
+}
+
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 3rem;
+}
+
+/* Custom page footer */
+.footer {
+    padding-top: 1.5rem;
+    color: #777;
+    border-top: .05rem solid #e5e5e5;
+}
+
+/* Customize container */
+@media (min-width: 48em) {
+    .container {
+        max-width: 46rem;
+    }
+}
+
+.container-narrow > hr {
+    margin: 2rem 0;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+    text-align: center;
+    border-bottom: .05rem solid #e5e5e5;
+}
+
+.jumbotron .btn {
+    padding: .75rem 1.5rem;
+    font-size: 1.5rem;
+}
+
+/* Supporting marketing content */
+.marketing {
+    margin: 3rem 0;
+}
+
+.marketing p + h4 {
+    margin-top: 1.5rem;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 48em) {
+    /* Remove the padding we set earlier */
+    .header,
+    .marketing,
+    .footer {
+        padding-right: 0;
+        padding-left: 0;
+    }
+
+    /* Space out the masthead */
+    .header {
+        margin-bottom: 2rem;
+    }
+
+    /* Remove the bottom border on the jumbotron for visual effect */
+    .jumbotron {
+        border-bottom: 0;
+    }
+}
+
+#header {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    flex-direction: row-reverse;
+}
+
+#header img {
+    width: 256px;
+    height: 256px;
+}
+
+ul {
+    -webkit-padding-start: 0;
+}
\ No newline at end of file

public/df02.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>东方龙隐谈</title>
+    <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="bootstrap.css">
+</head>
+<body>
+
+<div class="container">
+    <div class="header clearfix">
+        <nav>
+            <ul class="nav nav-pills float-right">
+                <li class="nav-item">
+                    <a class="nav-link" href="/">首页</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active" href="#">游戏 <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="mailto:zh99998@gmail.com">联系我们</a>
+                </li>
+            </ul>
+        </nav>
+        <h3><a href="/" class="text-muted">萌立方同人平台</a></h3>
+    </div>
+
+    <div id="header">
+       <div style="margin: 0 100px;">
+            <h1>东方龙隐谈</h1>
+            <ul>
+                <dt>标签</dt>
+                <dd>recommend</dd>
+                <dt>类型</dt>
+                <dd>游戏</dd>
+                <dt>发布日期</dt>
+                <dd>2017-08-01</dd>
+                <dt>作者</dt>
+                <dd><a href="http://www.lonhong.com/">龍皇社</a></dd>
+                <dt>版本</dt>
+                <dd>beta</dd>
+            </ul>
+        </div>
+        <div>
+            <div><img src="https://r.my-card.in/downloads/assets/df02/logo.png"></div>
+            <a class="btn btn-primary btn-lg btn-block" href="/">下载</a>
+        </div>
+    </div>
+
+    <h4>游戏介绍</h4>
+    <p>“我要和你去踏触纷扬的雪莹，<br>  感受阳光流落花间的快晴，<br>  整个世界淅淅沥沥的落雨，<br>  如幻的蜃景。”<br>四对主角，两两成双，相与携手，共同在气象的万千中开始新的冒险。<br>※不只是立绘，画师倾心开场漫画，活泼的幻想乡小日常，今天的幻想乡又怎么啦？<br>※独特的视觉效果体验，小小的纹理后也是不变的用心，开始界面都是爱你的心意！<br>※依旧的引人入胜的弹幕，作为游戏的主体，应于天气的多变，带给你难忘的愉悦！<br>※诚意满满的背景音乐，闲碎的日常，紧张的弹幕战，背景音乐会让一切出奇美妙！<br>※还有更多更多的小细节等你去发现，龙皇七周年，游戏之外不只是游戏，超酷的！<br>《东方龙隐谈》感谢各位的支持与厚爱，龙皇社全体成员给各位比心心啦！<br>——游戏玩法——<br>操纵自机的少女，躲开各种各样被打中貌似会痛的东西，接住各种道具，同时击败敌方就可以了。<br>——特殊系统——<br>①双角色系统：按“C”键可以在所选角色中互换，发挥各自的优势，并肩作战。<br>②龙魄系统：龙魄是特殊道具，在场上存在一段时间后会消失；可以增加点道具的得分倍率，并且降低道具收集线的高度；龙魄最多可以同时持有9个，在BOSS符卡外的时候可释放龙魄将自机周围的子弹转化为点道具；当持有龙魄数不小于6个时，被弹时会消耗5个龙魄自动释放决死BOMB。<br>⑨Last Spell Card系统：当收取符卡数+当前龙魄数*0.5≥关底BOSS总符卡数时，会开启关底BOSS的Last Spell Card。<br>接下来，请尽情地玩耍吧！</p>
+
+    <footer class="footer">
+        <p>&copy; moecube 2017</p>
+    </footer>
+
+</div> <!-- /container -->
+
+</body>
+</html>
\ No newline at end of file

public/eddyviolet.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Eddy紫</title>
+    <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="bootstrap.css">
+</head>
+<body>
+
+<div class="container">
+    <div class="header clearfix">
+        <nav>
+            <ul class="nav nav-pills float-right">
+                <li class="nav-item">
+                    <a class="nav-link" href="/">首页</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active" href="#">游戏 <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="mailto:zh99998@gmail.com">联系我们</a>
+                </li>
+            </ul>
+        </nav>
+        <h3><a href="/" class="text-muted">萌立方同人平台</a></h3>
+    </div>
+
+    <div id="header">
+       <div style="margin: 0 100px;">
+            <h1>Eddy紫</h1>
+            <ul>
+                <dt>标签</dt>
+                <dd>recommend</dd>
+                <dt>类型</dt>
+                <dd>游戏</dd>
+                <dt>发布日期</dt>
+                <dd>2012-07-09</dd>
+                <dt>作者</dt>
+                <dd><a href="http://inpla.net/forum-198-1.html">大谷Spitzer</a></dd>
+                <dt>版本</dt>
+                <dd>v1.01-1</dd>
+            </ul>
+        </div>
+        <div>
+            <div><img src="https://r.my-card.in/downloads/assets/eddyviolet/cover.jpg"></div>
+            <a class="btn btn-primary btn-lg btn-block" href="/">下载</a>
+        </div>
+    </div>
+
+    <h4>游戏介绍</h4>
+    <p>母神肃清了旧世界，在科学文明的残骸上建立了新的秩序。<br>她创造出无数能量态的新生命，世界产生了新的生态系统。<br>但是神无法毁灭自己的创造物。如果这些能量态生命揭竿而起，母神将会束手无策。<br>Eddy——拥有一半旧世界生命的血统，同时也是新世界核心Beij区的涡漩卫士。她的职责是维护核心区的和平，消灭一切敢于质疑母神威严的能量体。凭借着涡漩卫可以无限复活的能力，无数叛变的生物领袖被扼杀在摇篮中。<br>但是这一次，一个能够威胁整个新世界的篡位者在天边悄然现身了......<br>策划、设定、编剧、程序、美术、音乐均为个人原创，希望大家支持！</p>
+
+    <footer class="footer">
+        <p>&copy; moecube 2017</p>
+    </footer>
+
+</div> <!-- /container -->
+
+</body>
+</html>
\ No newline at end of file

public/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--

public/ozns.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>OZ大乱斗NS</title>
+    <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="bootstrap.css">
+</head>
+<body>
+
+<div class="container">
+    <div class="header clearfix">
+        <nav>
+            <ul class="nav nav-pills float-right">
+                <li class="nav-item">
+                    <a class="nav-link" href="/">首页</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active" href="#">游戏 <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="mailto:zh99998@gmail.com">联系我们</a>
+                </li>
+            </ul>
+        </nav>
+        <h3><a href="/" class="text-muted">萌立方同人平台</a></h3>
+    </div>
+
+    <div id="header">
+       <div style="margin: 0 100px;">
+            <h1>OZ大乱斗NS</h1>
+            <ul>
+                <dt>标签</dt>
+                <dd>recommend</dd>
+                <dt>类型</dt>
+                <dd>游戏</dd>
+                <dt>发布日期</dt>
+                <dd>2017-02-20</dd>
+                <dt>作者</dt>
+                <dd><a href="http://fuckoz.com">谢拉卡姗娜</a></dd>
+                <dt>版本</dt>
+                <dd>1.54e-1</dd>
+            </ul>
+        </div>
+        <div>
+            <div><img src="https://r.my-card.in/downloads/assets/ozns/MyCard%20logo%20NS.png"></div>
+            <a class="btn btn-primary btn-lg btn-block" href="/">下载</a>
+        </div>
+    </div>
+
+    <h4>游戏介绍</h4>
+    <p>　这是一个小众向的同人RPG游戏，讲述的是几个女大学生的奇幻之旅；<br/>  本来只不过供几个小伙伴之间自娱自乐，素材来源也是杂七杂八，如果你真的热爱传统RPG，这个游戏还是值得一玩的。</p>
+
+    <footer class="footer">
+        <p>&copy; moecube 2017</p>
+    </footer>
+
+</div> <!-- /container -->
+
+</body>
+</html>
\ No newline at end of file

public/ygopro.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>YGOPro</title>
+    <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="bootstrap.css">
+</head>
+<body>
+
+<div class="container">
+    <div class="header clearfix">
+        <nav>
+            <ul class="nav nav-pills float-right">
+                <li class="nav-item">
+                    <a class="nav-link" href="/">首页</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active" href="#">游戏 <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="mailto:zh99998@gmail.com">联系我们</a>
+                </li>
+            </ul>
+        </nav>
+        <h3><a href="/" class="text-muted">萌立方同人平台</a></h3>
+    </div>
+
+    <div id="header">
+       <div style="margin: 0 100px;">
+            <h1>YGOPro</h1>
+            <ul>
+                <dt>标签</dt>
+                <dd>recommend</dd>
+                <dt>类型</dt>
+                <dd>游戏</dd>
+                <dt>发布日期</dt>
+                <dd>2011-06-03</dd>
+                <dt>作者</dt>
+                <dd><a href="https://github.com/Fluorohydride/ygopro">Fluorohydride</a></dd>
+                <dt>版本</dt>
+                <dd>1.033.F-5</dd>
+            </ul>
+        </div>
+        <div>
+            <div><img src="https://r.my-card.in/downloads/assets/ygopro/ygopro.ico"></div>
+            <a class="btn btn-primary btn-lg btn-block" href="/">下载</a>
+        </div>
+    </div>
+
+    <h4>游戏介绍</h4>
+    <p>YGOPro，是一款在Github上免费开源的《游戏王》决斗软件。原作者为Fluorohydride。YGOPro为全卡环境的游戏王，是最能提供完整游戏王体验的软件。在MyCard上，随时都有上百名在线玩家与你进行天梯匹配、双打、自定义游戏。不仅如此，YGOPro专属决斗数据库更会提供玩家排行榜、卡片统计等定制化服务。YGOPro的社区十分活跃，欢迎好的建议或需求去社区找管理员反馈，也可以发邮件到474078233@qq.com联系管理员。</p>
+
+    <footer class="footer">
+        <p>&copy; moecube 2017</p>
+    </footer>
+
+</div> <!-- /container -->
+
+</body>
+</html>
\ No newline at end of file

src/App.css

 @import '~antd/dist/antd.css';
 
-.ant-menu{
-  padding-top:4px;
-  font-size:10pt;
+.ant-menu {
+    padding-top: 4px;
+    font-size: 10pt;
 }
 
 .App-Logo {
-  width: 120px;
-  height: 31px;
-  border-radius: 6px;
-  margin: 16px 40px 16px 0;
-  float: left;
-  display: flex;
-  align-items: center;
+    width: 120px;
+    height: 31px;
+    border-radius: 6px;
+    margin: 16px 40px 16px 0;
+    float: left;
+    display: flex;
+    align-items: center;
 }
 
 .App-Poster {
-  margin-top: 10px;
-  width: 295px;
-  height: auto;
-  max-width: 100%; 
+    margin-top: 10px;
+    width: 295px;
+    height: auto;
+    max-width: 100%;
 }
 
 .App-Content1 {
-  height:450px;
-  background: url(../public/front-page-background.jpg) 100%/cover;
-  background-position: center;
-  overflow:hidden;
-  width:100%;
-  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6)
+    height: 450px;
+    background: url(../public/front-page-background.jpg) 100%/cover;
+    background-position: center;
+    overflow: hidden;
+    width: 100%;
+    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6)
 }
 
 .App-Content2 {
-  display: flex;
-  justify-content: space-between;
-  padding: 50px 0px 50px 60px;
-  background-image: radial-gradient(ellipse farthest-corner at 45px 45px ,#3d75a2 0%, #091a4b 95%);
-  color: #eee;
-  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6)
+    display: flex;
+    justify-content: space-between;
+    padding: 50px 0px 50px 60px;
+    background-image: radial-gradient(ellipse farthest-corner at 45px 45px, #3d75a2 0%, #091a4b 95%);
+    color: #eee;
+    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6)
 }
 
 .App-CardList {
-  padding: 4vh 4vw;
+    padding: 4vh 4vw;
 }
 
 .App-CardList .ant-row {
-  margin: -8px;
+    margin: -8px;
 }
+
 .App-CardList .ant-row > div {
-  padding: 1vh 1vw;
+    padding: 1vh 1vw;
 }
-.App-CardList .ant-btn{
-  position:absolute;
-  bottom:20px;
+
+.App-CardList .ant-btn {
+    position: absolute;
+    bottom: 20px;
 }
+
 .App-Card-content {
-  margin-bottom: 2vh;
-  white-space: pre;
+    margin-bottom: 2vh;
+    white-space: pre;
 }
-.ant-card-bordered{
-  height:100%;
+
+.ant-card-bordered {
+    height: 100%;
 }
-.ant-col-12{
-  padding:10px;
+
+.ant-col-12 {
+    padding: 10px;
 }
-.ant-card-body{
-  padding-bottom: 50px;
+
+.ant-card-body {
+    padding-bottom: 50px;
 }
+
 .ant-layout .ant-layout-header {
-  background: #404040
+    background: #404040
 }
-.font-C-Gray{
-    color:#ccc;
+
+.font-C-Gray {
+    color: #ccc;
 }
 
-.App-Poster-Content
-{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.App-Poster-Content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.App-Poster-Content .title{
-  margin-top: -20px;
-  margin-bottom: -5px;
-  font-size: 1.3rem;
-  color: #eee
+.App-Poster-Content .title {
+    margin-top: -20px;
+    margin-bottom: -5px;
+    font-size: 1.3rem;
+    color: #eee
 }
-.App-Poster-Content a{
-  padding: 0 .5vw;
-  margin-top: 8px
+
+.App-Poster-Content a {
+    padding: 0 .5vw;
+    margin-top: 8px
 }
 
-.App-Poster-Content .title .sub{
-   font-size: 0.7rem;
-   color: #eee;
-   padding: 0 0.4vw
+.App-Poster-Content .title .sub {
+    font-size: 0.7rem;
+    color: #eee;
+    padding: 0 0.4vw
 }
 
-.ant-layout-content>p{
-  color: #eee;
-  font-size: 1.2rem
+.ant-layout-content > p {
+    color: #eee;
+    font-size: 1.2rem
 }
 
-.ant-layout-footer{
-  display: flex;
-  justify-content: space-between;
+.ant-layout-footer {
+    display: flex;
+    justify-content: space-between;
 }
 
-.ant-card-head-title{
-  font-size:1.5rem;
+.ant-card-head-title {
+    font-size: 1.5rem;
 }
 
 .ant-timeline-item-content {
@@ -120,105 +128,140 @@
     min-height: 0px;
 }
 
-.ant-timeline>.ant-timeline-item-pending,.ant-timeline>.ant-timeline-item-pending>div {
-  padding-bottom:0px;
+.ant-timeline > .ant-timeline-item-pending, .ant-timeline > .ant-timeline-item-pending > div {
+    padding-bottom: 0px;
 }
 
-#Card3Button
-{
-  margin-top: 20px;
+#Card3Button {
+    margin-top: 20px;
 }
 
-.loading
-{
-  margin-top: 20px;
-  font-size:20px;
-  color:white;
+.loading {
+    margin-top: 20px;
+    font-size: 20px;
+    color: white;
 }
 
-#Card4Button
-{
-  margin-top: 20px;
+#Card4Button {
+    margin-top: 20px;
 }
 
-.square{
-    padding-right:20px;
-    float:right;
-    cursor:pointer;
-    font-size:22px;
-    color:#aaa;
+.square {
+    padding-right: 20px;
+    float: right;
+    cursor: pointer;
+    font-size: 22px;
+    color: #aaa;
 }
-.square:hover{
-    color:#fff;
+
+.square:hover {
+    color: #fff;
 }
+
 .menu {
     z-index: 1;
-    width:100%;
-    position:fixed;
-    top:64px;
+    width: 100%;
+    position: fixed;
+    top: 64px;
 }
-.menu li{
-  line-height: 40px;
-  height:40px;
-  padding: 0 20px;
-  color:white;
-  background:#404040;
-  border-top:#777 solid 1px;
-  font-size:14px;
+
+.menu li {
+    line-height: 40px;
+    height: 40px;
+    padding: 0 20px;
+    color: white;
+    background: #404040;
+    border-top: #777 solid 1px;
+    font-size: 14px;
 }
-.menu li:hover{
-  background:#777;
+
+.menu li:hover {
+    background: #777;
 }
-.chidden{
-  animation: downotup 0.5s;
-  -webkit-animation:downotup 0.5s;
-  transform:translate(0,-1000px)
+
+.chidden {
+    animation: downotup 0.5s;
+    -webkit-animation: downotup 0.5s;
+    transform: translate(0, -1000px)
 }
-.cshow{
-  animation: uptodown 0.5s;
-  -webkit-animation:uptodown 0.5s;
-  transform:translate(0,0px)
+
+.cshow {
+    animation: uptodown 0.5s;
+    -webkit-animation: uptodown 0.5s;
+    transform: translate(0, 0px)
+}
+
+@keyframes uptodown {
+    from {
+        transform: translate(0, -1000px)
+    }
+    to {
+        transform: translate(0, 0px)
+    }
 }
 
-@keyframes uptodown{
-  from{transform:translate(0,-1000px)}
-  to{transform:translate(0,0px)}
+@keyframes downotup {
+    from {
+        transform: translate(0, 0px)
+    }
+    to {
+        transform: translate(0, -1000px)
+    }
 }
-@keyframes downotup{
-  from{transform:translate(0,0px)}
-  to{transform:translate(0,-1000px)}
+
+.MoeCubeProduct {
+    max-width: 370px;
 }
 
-.MoeCubeProduct{
-  max-width: 370px;
+#requirments {
+    white-space: pre-wrap;
 }
 
-#requirments{
-  white-space: pre-wrap;
+#Welcome {
+    margin-top: 10px;
+    font-size: 1.3rem;
+    white-space: pre-wrap;
 }
 
-#Welcome{
-  margin-top: 10px;
-  font-size: 1.3rem;
-  white-space: pre-wrap;
+#downloadbot {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    height: 40px;
+    width: 180px
 }
 
-#downloadbot
-{
-  margin-top:10px;
-  margin-bottom:10px;
-  height: 40px;
-  width: 180px
+.changelanguage {
+    display: flex;
+    line-height: 30px;
 }
 
-.changelanguage{
-  display: flex;
-  line-height:30px;
+.changelanguage > i {
+    line-height: 30px;
 }
-.changelanguage>i{
-  line-height:30px;
+
+li > .changelanguage {
+    display: flex;
+    line-height: 30px;
+}
+
+#apps {
+    padding: 1vh 4vw 4vh 4vw;
 }
-li>.changelanguage{
-  display: flex;
-  line-height:30px;
+.row {
+    display: flex;
+    width: 100%;
+
+}
+
+#apps img {
+    padding: 10px;
+    width: 25%;
+    height: 16vw;
+    object-fit: cover;
+}
+
+h2 {
+    padding-left: calc(4vw + 10px);
+    font-size: 1.5rem;
+
 }
\ No newline at end of file

src/App.js

@@ -284,6 +284,22 @@ export default class App extends Component {
           </div>
         </Content>
 
+        <h2>代表作品</h2>
+        <div id="apps">
+          <div class="row">
+            <a target="_blank" href="ygopro.html"><img alt="ygopro" src={require('../public/ygopro_1.jpg')} /></a>
+            <a target="_blank" href="ozns.html"><img alt="OZ大乱斗NS" src={require('../public/ozns_1.jpg')} /></a>
+            <a target="_blank" href="eddyviolet.html"><img alt="Eddy紫" src={require('../public/eddyviolet_1.jpg')} /></a>
+            <a target="_blank" href="df02.html"><img alt="东方龙隐谈" src={require('../public/df02_1.jpg')} /></a>
+          </div>
+          <div class="row">
+            <a target="_blank" href="ygopro.html"><img alt="ygopro" src={require('../public/ygopro_2.jpg')} /></a>
+            <a target="_blank" href="ozns.html"><img alt="OZ大乱斗NS" src={require('../public/ozns_2.jpg')} /></a>
+            <a target="_blank" href="eddyviolet.html"><img alt="Eddy紫" src={require('../public/eddyviolet_2.jpg')} /></a>
+            <a target="_blank" href="df02.html"><img alt="东方龙隐谈" src={require('../public/df02_2.jpg')} /></a>
+          </div>
+        </div>
+
         {!isMobile ?
           (<div>
             <Content className="App-Content2">
@@ -299,6 +315,11 @@ export default class App extends Component {
                     </Button>
                     )}
                 </a>
+                <p>健康游戏忠告</p>
+                  <p>抵制不良游戏 拒绝盗版游戏
+                  注意自我保护 谨防受骗上当</p>
+                <p>适度游戏益脑 过度游戏伤身
+                  合理安排时间 享受健康生活</p>
               </Col>
               <Col span="10">
                 <p id="requirments"><FormattedMessage id={"SystemRequirements"} /></p>
@@ -339,7 +360,7 @@ export default class App extends Component {
                 </a>)}
             </Dropdown>
           </div>
-          © MoeCube 2017 all right reserved.
+          <div>© MoeCube 2017 all right reserved. | 上海市长宁区定西路 710 弄 16 号 | 客服电话: 18521057800 | 本游戏适合 16 岁以上人群 | <a  style={{ color:'rgba(0, 0, 0, 0.65)' }} href="supervise.html">家长监护</a></div>
         </Footer>
       </Layout>
     )

src/Nav.js

@@ -40,6 +40,36 @@ export default class Nav_Mobile extends React.Component {
                 <FormattedMessage id={"DataBase"} />
               </a>
             </Menu.Item>
+            <Menu.Item key="3">
+              <a href="https://accounts.moecube.com/">
+                用户中心
+              </a>
+            </Menu.Item>
+            <Menu.Item key="#">
+              <a href="#">
+                客服中心
+              </a>
+            </Menu.Item>
+            <Menu.Item key="5">
+              <a href="#">
+                最新资讯
+              </a>
+            </Menu.Item>
+            <Menu.Item key="6">
+              <a href="#">
+                创意分享
+              </a>
+            </Menu.Item>
+            <Menu.Item key="7">
+              <a href="#">
+                最新科技
+              </a>
+            </Menu.Item>
+            <Menu.Item key="8">
+              <a href="#">
+                学习天地
+              </a>
+            </Menu.Item>
           </Menu>
         </div>
       );

src/index.js

+import 'core-js/shim'
+import 'intl'
+import 'intl/locale-data/jsonp/en.js'
+import 'intl/locale-data/jsonp/zh-Hans.js'
+import 'matchmedia-polyfill'
+import 'matchmedia-polyfill/matchMedia.addListener.js'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'