feat: merge 登录页和navbar

src/app/account/login/login.component.scss

@@ -1,3 +1,4 @@
+
 #login{
     .mx-auto{
         margin: 10px 0;
@@ -10,3 +11,8 @@
         outline: none;
     }
 }
+//圆角边框
+.rect-radius {
+  border: 1px solid;
+  border-radius: 30px !important;
+}

src/app/app.component.html

@@ -1,43 +1,41 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-light bg-light-self">
-  <!-- <span class="navbar-text">
+  <span class="navbar-text nav-text-lg">
     {{ 'APP_TITLE' | translate }}
-  </span> -->
+  </span>
-  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+  <span>
-    <div *ngIf="isLogin" style="background: rgb(141, 198, 248);width: 100%;height: 200px;">
+    <div class="navbar-collapse" id="navbarSupportedContent">
-      <div style="color: #fff!important;font-family: 'Times new roman'!important;padding-left: 30px;" class="col-12">
+      <div class="dropdown">
-        <div style="font-size: 40px;font-weight: 700;margin-top: 30px;">POCKET COMMUNITY</div>
+        <a class="btn btn-secondary dropdown-toggle nav-text-lg" href="#" role="button" id="dropdownMenuLink"
-        <nav class="navbar text-left navbar-light" style="display: block;font-size: 22px;color: #fff!important;font-weight: 400;">
+          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <span class="navbar-text mr-3" [innerHTML]="'tip.HELLO'|translate:{value:managerName}|html" *ngIf="isLogin"></span>
-          <a (click)="logout()" *ngIf="isLogin">{{'button.logout'|translate}}</a>
-        </nav>
-      </div>
-      <ng-container>
-        <ul class="navbar-nav mx-auto text-center" style="display: block;">
-          <li class="nav-item" routerLinkActive="active" style="">
-            <a class="nav-link" [routerLink]="['/forum']">{{ 'forum.name' | translate }}</a>
-          </li>
-          <li class="nav-item" routerLinkActive="active">
-            <a class="nav-link" [routerLink]="['/visitor']">{{ 'visitor.name' | translate }}</a>
-          </li>
-          <li class="nav-item" routerLinkActive="active">
-            <a class="nav-link" [routerLink]="['/score']">{{ 'score.name' | translate }}</a>
-          </li>
-        </ul>
-      </ng-container>
-    </div>
-    <div class="dropdown switch">
-      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
-         aria-haspopup="true" aria-expanded="false">
           {{ 'language' | translate }}
         </a>
+
         <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-        <a class="dropdown-item" (click)="translate.use('zh-CN')">{{ 'chinese' | translate }}</a>
+          <a class="dropdown-item nav-text-lg" (click)="translate.use('zh-CN')">{{ 'chinese' | translate }}</a>
-        <a class="dropdown-item" (click)="translate.use('en-US')">{{ 'english' | translate }}</a>
+          <a class="dropdown-item nav-text-lg" (click)="translate.use('en-US')">{{ 'english' | translate }}</a>
         </div>
       </div>
     </div>
+  </span>
 </nav>
 
-
+<nav class="navbar navbar-expand-lg navbar-light bg-light-self justify-content-center pb-0">
+  <ng-container *ngIf="isLogin">
+    <ul class="navbar-nav">
+      <li class="nav-item mr-2" routerLinkActive="active">
+        <button type="button" class="btn btn-primary" [routerLink]="['/forum']">{{ 'forum.name' | translate }}</button>
+      </li>
+      <li class="nav-item mr-2" routerLinkActive="active">
+        <button type="button" class="btn btn-primary"
+          [routerLink]="['/visitor']">{{ 'visitor.name' | translate }}</button>
+      </li>
+      <li class="nav-item mr-2" routerLinkActive="active">
+        <button type="button" class="btn btn-primary" [routerLink]="['/score']">{{ 'score.name' | translate }}</button>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <button class="btn btn-primary" (click)="logout()" *ngIf="isLogin">{{'button.logout'|translate}}</button>
+    </ul>
+  </ng-container>
+</nav>
 
 <router-outlet></router-outlet>

src/styles.scss

@@ -4,3 +4,17 @@
 body{
     background: rgb(80, 138, 202);
 }
+// 自定义 navBar 背景色
+.bg-light-self {
+    background-color: rgb(141, 198, 248) !important;
+}
+
+// navBar 第一栏字体放大
+.nav-text-lg {
+    font-size: 1.5rem;
+}
+
+// 按钮圆角
+.btn-border {
+    border-radius: 1rem;
+}