add style

app/app-detail.component.css

+:host {
+    background-color: #c3d9ff;
+    flex-grow: 1;
+    overflow-y: auto;
+}
\ No newline at end of file

app/app-detail.component.html

-Detail
\ No newline at end of file
+<h1>东方绯想天则</h1>
+
+<div>
+    <button type="button" class="btn btn-primary">安装</button>
+    <button type="button" class="btn btn-secondary">导入</button>
+    <button type="button" class="btn btn-secondary">正版代购</button>
+</div>
+<div>
+    <button type="button" class="btn btn-primary">运行</button>
+    <button type="button" class="btn btn-secondary">设置</button>
+    <button type="button" class="btn btn-secondary">游览本地文件</button>
+    <button type="button" class="btn btn-secondary">联机</button>
+</div>
+
+<br>
+
+<h2>新闻</h2>
+<p>这里是新闻</p>
+
+<br>
+
+<h2>好友</h2>
+<p>好友信息</p>
+
+<br>
+
+<h2>成就</h2>
+<p>成就信息</p>
+
+<br>
+
+<h2>Mods</h2>
+
+<table class="table table-striped">
+    <thead>
+    <tr>
+        <th>#</th>
+        <th>名称</th>
+        <th>类型</th>
+        <th>启用</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <th scope="row">1</th>
+        <td>东方绯想天</td>
+        <td>依赖</td>
+        <td>√</td>
+    </tr>
+    <tr>
+        <th scope="row">2</th>
+        <td>简体中文包</td>
+        <td>语言</td>
+        <td>√</td>
+    </tr>
+    <tr>
+        <th scope="row">3</th>
+        <td>东方绯想天则OST</td>
+        <td>OST</td>
+        <td>√</td>
+    </tr>
+    </tbody>
+</table>

app/apps.component.css

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

app/apps.component.html

-Apps
\ No newline at end of file
+<div class="list-group">
+    <a href="#" class="list-group-item active">
+        游戏王
+    </a>
+    <a href="#" class="list-group-item list-group-item-action">绯想天</a>
+    <a href="#" class="list-group-item list-group-item-action disabled">永远消失的幻想乡</a>
+</div>
\ No newline at end of file

app/candy.component.css

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

app/lobby.component.css

 :host {
     display: flex;
     flex-direction: column;
-    align-content: space-between;
-
 }
 
 #main {
@@ -10,7 +8,3 @@
     flex-grow: 1;
 }
 
-app {
-    display: flex;
-    flex-grow: 1;
-}

app/mycard.component.css

@@ -2,6 +2,12 @@ body {
     font-family: "Helvetica Neue", Helvetica, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
 }
 
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
 nav {
     -webkit-app-region: drag;
     padding-right: 0;
@@ -20,8 +26,8 @@ nav.darwin {
     margin: 0 0.5rem;
 }
 
-#wrapper {
-    padding-top: 54px;
+.page {
+    flex-grow: 1;
     /*margin-bottom: 60px;*/
 }
 

app/mycard.component.html

-<nav class="navbar navbar-fixed-top navbar-dark bg-inverse" [class.darwin]="platform == 'darwin'">
+<nav class="navbar navbar-dark bg-inverse" [class.darwin]="platform == 'darwin'">
     <a class="navbar-brand" href="#">MyCard</a>
     <ul class="nav navbar-nav">
         <!--
@@ -65,9 +65,7 @@
         </div>
     </nav>
 </div>-->
-<div id="wrapper">
-<login [hidden]="routingService.component != 'login'"></login>
-<store [hidden]="routingService.component != 'store'"></store>
-<lobby [hidden]="routingService.component != 'lobby'"></lobby>
-<community [hidden]="routingService.component != 'community'"></community>
-</div>
\ No newline at end of file
+<login class="page" [hidden]="routingService.component != 'login'"></login>
+<store class="page" [hidden]="routingService.component != 'store'"></store>
+<lobby class="page" [hidden]="routingService.component != 'lobby'"></lobby>
+<community class="page" [hidden]="routingService.component != 'community'"></community>

app/roster.component.css

+:host {
+    background-color: bisque;
+
+    display: none;
+
+    width: 250px;
+}
\ No newline at end of file