UI界面改版(适配新版移动端)

src/app/lobby/lobby.component.html

@@ -47,41 +47,50 @@
     </button>
   </mat-grid-tile>
   <mat-grid-tile><a mat-raised-button color="primary" (click)='reloadServers(["custom"])' routerLink="/ygopro/rooms">
-    <mat-icon>games</mat-icon>
-    <br>房间列表</a></mat-grid-tile>
-  <mat-grid-tile><a mat-raised-button color="primary" (click)='reloadServers(["custom"])' routerLink="/ygopro/rooms/new">
-    <mat-icon>&#xe146;</mat-icon><!--add_box-->
-    <br>创建房间</a></mat-grid-tile>
+      <mat-icon>games</mat-icon>
+      <br>房间列表
+    </a></mat-grid-tile>
+  <mat-grid-tile><a mat-raised-button color="primary" (click)='reloadServers(["custom"])'
+      routerLink="/ygopro/rooms/new">
+      <mat-icon>&#xe146;</mat-icon>
+      <!--add_box-->
+      <br>创建房间
+    </a></mat-grid-tile>
   <mat-grid-tile><a mat-raised-button (click)='reloadServers(["windbot"])' routerLink="/ygopro/windbot">
-    <mat-icon>&#xe195;</mat-icon><!-- airplanemode_active -->
-    <br>单人模式</a></mat-grid-tile>
-  <mat-grid-tile><a mat-raised-button  (click)='reloadServers(["replay"])' routerLink="/ygopro/watch">
-    <mat-icon>&#xe417;</mat-icon><!--remove_red_eye-->
-    <br>观战</a></mat-grid-tile>
+      <mat-icon>&#xe195;</mat-icon><!-- airplanemode_active -->
+      <br>单人模式
+    </a></mat-grid-tile>
+  <mat-grid-tile><a mat-raised-button (click)='reloadServers(["replay"])' routerLink="/ygopro/watch">
+      <mat-icon>&#xe417;</mat-icon>
+      <!--remove_red_eye-->
+      <br>观战
+    </a></mat-grid-tile>
   <!--<mat-grid-tile>-->
   <!--<button mat-raised-button (click)="ygopro.watch_replay()">-->
   <!--<mat-icon>history</mat-icon>-->
   <!--<br>观看录像-->
   <!--</button>-->
   <!--</mat-grid-tile>-->
-  <mat-grid-tile>
+  <!-- <mat-grid-tile>
     <button mat-raised-button (click)="ygopro.edit_deck()">
       <mat-icon>edit</mat-icon>
       <br>编辑卡组
     </button>
-  </mat-grid-tile>
+  </mat-grid-tile> -->
   <mat-grid-tile><a mat-raised-button href="https://ygobbs.com/login" target="_blank">
-    <mat-icon>forum</mat-icon>
-    <br>社区</a></mat-grid-tile>
+      <mat-icon>forum</mat-icon>
+      <br>社区
+    </a></mat-grid-tile>
   <mat-grid-tile><a mat-raised-button [href]="arena_url" target="_blank">
-    <mat-icon fontSet="fa" fontIcon="fa-trophy"></mat-icon>
-    <br>决斗数据库</a></mat-grid-tile>
-  <mat-grid-tile>
+      <mat-icon fontSet="fa" fontIcon="fa-trophy"></mat-icon>
+      <br>决斗数据库
+    </a></mat-grid-tile>
+  <!-- <mat-grid-tile>
     <button mat-raised-button (click)="ygopro.backHome()">
       <mat-icon>home</mat-icon>
       <br>返回直连
     </button>
-  </mat-grid-tile>
+  </mat-grid-tile> -->
   <!--<mat-grid-tile><a mat-raised-button>-->
   <!--<mat-icon>casino</mat-icon>-->
   <!--<br>轮抽 (开发中)</a></mat-grid-tile>-->
@@ -89,35 +98,75 @@
 
 <mat-card *ngIf="ygopro.points | async as points">
   <mat-grid-list id="points" cols="4" rowHeight="20px">
-    <mat-grid-tile><dt>D.P</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.pt}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>经验</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.exp}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>竞技胜率</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.athletic_wl_ratio}}%</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>竞技排名</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.arena_rank}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>竞技胜场</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.athletic_win}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>竞技总场</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.athletic_all}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>竞技负场</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.athletic_lose}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>娱乐排名</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.exp_rank}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>竞技平局</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.athletic_draw}}</dd></mat-grid-tile>
-
-    <mat-grid-tile><dt>娱乐总场</dt></mat-grid-tile>
-    <mat-grid-tile><dd>{{points.entertain_all}}</dd></mat-grid-tile>
+    <mat-grid-tile>
+      <dt>D.P</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.pt}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>经验</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.exp}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>竞技胜率</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.athletic_wl_ratio}}%</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>竞技排名</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.arena_rank}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>竞技胜场</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.athletic_win}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>竞技总场</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.athletic_all}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>竞技负场</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.athletic_lose}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>娱乐排名</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.exp_rank}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>竞技平局</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.athletic_draw}}</dd>
+    </mat-grid-tile>
+
+    <mat-grid-tile>
+      <dt>娱乐总场</dt>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <dd>{{points.entertain_all}}</dd>
+    </mat-grid-tile>
 
   </mat-grid-list>
 </mat-card>
@@ -140,4 +189,4 @@
       </mat-card-subtitle>
     </mat-card-header>
   </a>
-</mat-card>
+</mat-card>
\ No newline at end of file

src/styles.css

@@ -40,3 +40,15 @@ body {
   margin-top: 0;
   margin-bottom: 1rem;
 }
+
+.mat-toolbar.mat-primary {
+  background: #0B2241;
+  color: #fff;
+}
+
+.mat-fab.mat-primary,
+.mat-flat-button.mat-primary,
+.mat-mini-fab.mat-primary,
+.mat-raised-button.mat-primary {
+  background-color: #0B2241;
+}
\ No newline at end of file