add any components

app/app-detail.component.html

+Detail
\ No newline at end of file

app/app-detail.component.ts

+/**
+ * Created by zh99998 on 16/9/2.
+ */
+import { Component } from '@angular/core';
+@Component({
+    selector: 'app-detail',
+    templateUrl: 'app/app-detail.component.html',
+    styleUrls: ['app/app-detail.component.css'],
+})
+export class AppDetailComponent { }

app/apps.component.css

+:host {
+    background-color: darkslategray;
+}
\ No newline at end of file

app/apps.component.html

+Apps
\ No newline at end of file

app/apps.component.ts

+/**
+ * Created by zh99998 on 16/9/2.
+ */
+import { Component } from '@angular/core';
+@Component({
+    selector: 'apps',
+    templateUrl: 'app/apps.component.html',
+    styleUrls: ['app/apps.component.css'],
+})
+export class AppsComponent { }

app/candy.component.css

+:host {
+    background-color: #336699;
+
+}
\ No newline at end of file

app/candy.component.html

+Candy
+

app/candy.component.ts

+import { Component } from '@angular/core';
+@Component({
+    selector: 'candy',
+    templateUrl: 'app/candy.component.html',
+    styleUrls: ['app/candy.component.css'],
+})
+export class CandyComponent { }

app/lobby.component.css

+:host {
+    display: flex;
+    flex-direction: column;
+    align-content: space-between;
+
+}
+
+#main {
+    display: flex;
+    flex-grow: 1;
+}
+
+app {
+    display: flex;
+    flex-grow: 1;
+}

app/lobby.component.html

 <!-- Begin page content -->
-<div class="container">
-    <div class="m-t-1">
-        <h1>Sticky footer with fixed navbar</h1>
-    </div>
-    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>
-    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
+<div id="main">
+    <apps></apps>
+    <app-detail></app-detail>
+    <roster></roster>
 </div>
+<candy></candy>
 
-<footer class="footer">
-    <div class="container">
-        <span class="text-muted">Place sticky footer content here.</span>
-    </div>
-</footer>
\ No newline at end of file

app/mycard.component.css

@@ -4,6 +4,7 @@ body {
 
 nav {
     -webkit-app-region: drag;
+    padding-right: 0;
 }
 
 nav.darwin {
@@ -20,7 +21,7 @@ nav.darwin {
 }
 
 #wrapper {
-    padding-top: 60px;
+    padding-top: 54px;
     /*margin-bottom: 60px;*/
 }
 
@@ -53,4 +54,16 @@ nav.darwin {
 a {
     cursor: default;
 }
+#window-buttons.darwin {
+    display: none;
+}
+
+#window-buttons > i {
+    color: rgba(255, 255, 255, .75);
+    margin: .5rem;
+}
+
+li > a:hover, #window-buttons > i:hover {
+    color: #fff;
+}
 

app/mycard.component.html

 <nav class="navbar navbar-fixed-top navbar-dark bg-inverse" [class.darwin]="platform == 'darwin'">
     <a class="navbar-brand" href="#">MyCard</a>
     <ul class="nav navbar-nav">
-        <li class="nav-item active">
+        <!--
+        <li class="nav-item">
             <a class="nav-link" href="#">商店</a>
         </li>
-        <li class="nav-item">
+        -->
+        <li class="nav-item active">
             <a class="nav-link" href="#">游戏<span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
@@ -20,11 +22,11 @@
             <a href="#ygopro" id="logout" class="require-login item">切换账号</a>
             <a href="#ygopro" id="refresh" class="item">刷新</a>
         </div>
-        <div id="window-buttons" hidden>
-            <i id="minimize" class="icon-minimize"></i>
-            <i id="maximize" class="icon-maximize"></i>
-            <i id="restore" class="icon-restore" hidden></i>
-            <i id="close" class="icon-close"></i>
+        <div id="window-buttons" [class.darwin]="platform == 'darwin'">
+            <i id="minimize"  class="fa fa-minus" aria-hidden="true"></i>
+            <i id="maximize" class="fa fa-expand" aria-hidden="true"></i>
+            <i id="restore" class="fa fa-clone" hidden aria-hidden="true"></i>
+            <i id="close" class="fa fa-times" aria-hidden="true"></i>
         </div>
     </div>
 </nav>

app/mycard.module.ts

@@ -4,6 +4,10 @@ import { MyCardComponent }  from './mycard.component';
 import { LoginComponent } from './login.component';
 import { StoreComponent } from './store.component';
 import { LobbyComponent } from './lobby.component';
+import { AppsComponent } from './apps.component';
+import { AppDetailComponent } from './app-detail.component';
+import { RosterComponent } from './roster.component';
+import { CandyComponent } from './candy.component';
 import { CommunityComponent } from './community.component';
 
 import { RoutingService } from './routing.service';
@@ -11,7 +15,7 @@ import { RoutingService } from './routing.service';
 
 @NgModule({
   imports:      [ BrowserModule ],
-  declarations: [ MyCardComponent, LoginComponent, StoreComponent, LobbyComponent, CommunityComponent ],
+  declarations: [ MyCardComponent, LoginComponent, StoreComponent, LobbyComponent, CommunityComponent, AppsComponent, AppDetailComponent, RosterComponent, CandyComponent ],
   bootstrap:    [ MyCardComponent ],
   providers:    [ RoutingService ],
 })

app/roster.component.html

+Roster
\ No newline at end of file

app/roster.component.ts

+/**
+ * Created by zh99998 on 16/9/2.
+ */
+import { Component } from '@angular/core';
+@Component({
+    selector: 'roster',
+    templateUrl: 'app/roster.component.html',
+    styleUrls: ['app/roster.component.css'],
+})
+export class RosterComponent { }