Merge pull request #12 from karenia-works/login

Login

src/app/app-routing.module.ts

@@ -19,6 +19,8 @@ import { MySettingPageComponent } from 'src/pages/personal-page/my-setting-page/
 import { MySettingPageModule } from 'src/pages/personal-page/my-setting-page/my-setting-page.module';
 import { MyPaymentPageComponent } from 'src/pages/personal-page/my-payment-page/my-payment-page.component';
 import { MyPaymentPageModule } from 'src/pages/personal-page/my-payment-page/my-payment-page.module';
+import {LoginPageComponent} from 'src/pages/login-page/login-page.component';
+import {RegisterPageComponent} from 'src/pages/register-page/register-page.component';
 
 const routes: Routes = [
   {
@@ -29,6 +31,14 @@ const routes: Routes = [
     path: 's',
     component: SearchpageComponent,
   },
+  {
+    path: 'login',
+    component: LoginPageComponent,
+  },
+  {
+    path: 'register',
+    component: RegisterPageComponent,
+  },
   {
     path: 'p',
     component: ProfessorpageComponent,

src/app/app.module.ts

@@ -10,9 +10,11 @@ import { RouterOutlet } from '@angular/router';
 import { SearchpageModule } from 'src/pages/searchpage/searchpage.module';
 import { ProfessorpageModule } from 'src/pages/professorpage/professorpage.module';
 import { HttpClientModule } from '@angular/common/http';
+import {LoginPageComponent} from 'src/pages/login-page/login-page.component';
+import {RegisterPageComponent} from 'src/pages/register-page/register-page.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, LoginPageComponent, RegisterPageComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/pages/login-page/login-page.component.html

@@ -0,0 +1,27 @@
+<div class="login-page-banner" @banner-trigger>
+  <div class="container">
+    <div class="login">
+      <h1>登录</h1>
+      <h5 class="textdarcula">用户名</h5>
+      <input
+        name="username"
+        id="username"
+        type="text"
+        class="username-box"
+      />
+      <h5 class="textdarcula">密码</h5>
+      <input
+        name="password"
+        id="password"
+        type="password"
+        class="username-box"
+      />
+      <div class="foot">
+        <button class="btn login-btn">登录</button>
+        <button class="btn ghost-btn" routerLink="/register">注册</button>
+        <button class="btn ghost-btn">忘记密码</button>
+
+      </div>
+    </div>
+  </div>
+</div>

src/pages/login-page/login-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginPageComponent } from './login-page.component';
+
+describe('LoginPageComponent', () => {
+  let component: LoginPageComponent;
+  let fixture: ComponentFixture<LoginPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/pages/login-page/login-page.component.styl

@@ -0,0 +1,72 @@
+.login-page-banner {
+  height: 100vh
+  padding-top: var(--theme-pad-03)
+  box-sizing: border-box
+  background: var(--theme-base02)
+  color: var(--theme-base07)
+  display: flex
+  flex-direction: column
+};
+
+.login {
+  width 60vh
+  margin auto
+};
+
+.foot {
+  display flex
+  flex-direction row-reverse
+  text-align center
+  margin: var(--theme-pad-00) var(--theme-pad-02)
+  padding: var(--theme-pad-02) var(--theme-pad-04)
+};
+
+.username-box {
+  position relative
+  bottom 20px
+  height 30px
+  width 55vh
+  font-family: inherit
+  font-weight: normal
+  font-size: var(--theme-size-base)
+  transition: border-color 150ms ease-in-out
+  border-style: solid
+  border-width: 2px
+  background-color var(--theme-base01)
+  color var(--theme-base07)
+  border-color var(--theme-base01)
+
+  &:focus-within {
+    border-color var(--theme-accent-alter)
+  }
+};
+
+.login-btn {
+  display flex
+  justify-content center
+  width 15vh
+  font-weight: 500
+  --btn-border-color: var(--theme-accent-alter)
+  --btn-background-color: var(--theme-base02)
+  --btn-highlight-color: var(--theme-accent)
+  --btn-highlight-text-color: var(--theme-base07)
+  --btn-text-color: var(--theme-accent-alter)
+};
+
+.ghost-btn {
+  display flex
+  justify-content center
+  width 15vh
+  font-weight: 500
+  border-style: none
+  --btn-border-color: var(--theme-base02)
+  --btn-background-color: var(--theme-base02)
+  --btn-highlight-color: var(--theme-accent)
+  --btn-highlight-text-color: var(--theme-base07)
+  --btn-text-color: var(--theme-accent-alter)
+};
+
+.textdarcula {
+  color var(--theme-base04)
+}
+

src/pages/login-page/login-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-page',
+  templateUrl: './login-page.component.html',
+  styleUrls: ['./login-page.component.styl']
+})
+export class LoginPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/pages/personal-page/my-download-page/my-download-page.component.html

@@ -1,5 +1,6 @@
 <div class="container">
   <div class="left_part">
+    <h5><br></h5>
     <h1 class="recent_title">
       我的下载
     </h1>
@@ -40,4 +41,4 @@ <h1 class="recent_title">
       <a routerLink="../payment">财务管理</a>
     </div>
   </div>
-</div>
+</div>

src/pages/personal-page/my-download-page/my-download-page.component.styl

@@ -9,9 +9,10 @@
 
 .right_part {
     lost-column: 1 / 5
-    position: sticky
-    top: var(--theme-pad-05)
-
+    position: fixed
+    right: var(--theme-pad-05)
+    top: var(--theme-pad-10)
+
     .line {
         width = 100%
     }
@@ -25,4 +26,4 @@
         color: var(--palette-base03)
         margin-top: 5px
     }
-}
+}

src/pages/personal-page/my-favorite-page/my-favorite-page.component.html

@@ -1,5 +1,6 @@
 <div class="container">
   <div class="left_part">
+    <h5><br></h5>
     <h1 class="recent_title">
       最近收藏
     </h1>
@@ -39,4 +40,4 @@ <h1 class="recent_title">
       <a routerLink="../payment">财务管理</a>
     </div>
   </div>
-</div>
+</div>

src/pages/personal-page/my-favorite-page/my-favorite-page.component.styl

@@ -9,9 +9,10 @@
 
 .right_part {
     lost-column: 1 / 5
-    position: sticky
-    top: var(--theme-pad-05)
-
+    position: fixed
+    right: var(--theme-pad-05)
+    top: var(--theme-pad-10)
+
     .line {
         width = 100%
     }
@@ -25,4 +26,4 @@
         color: var(--palette-base03)
         margin-top: 5px
     }
-}
+}

src/pages/personal-page/my-follow-page/my-follow-page.component.html

@@ -1,5 +1,6 @@
 <div class="container">
     <div class="left_part">
+      <h5></h5>
         <h1 class="recent_title">
             我的关注
         </h1>
@@ -44,4 +45,4 @@ <h1 class="recent_title">
             <a routerLink="../payment">财务管理</a>
         </div>
     </div>
-</div>
+</div>

src/pages/personal-page/my-follow-page/my-follow-page.component.styl

@@ -21,7 +21,7 @@
             margin-right: 30px
         }
 
-        .label { 
+        .label {
 
             .name {
                 font-size: var(--theme-size-h3)
@@ -46,8 +46,9 @@
 
 .right_part {
     lost-column: 1 / 5
-    position: sticky
-    top: var(--theme-pad-05)
+    position: fixed
+    right: var(--theme-pad-05)
+    top: var(--theme-pad-10)
 
     .line {
         width = 100%
@@ -62,4 +63,4 @@
         color: var(--palette-base03)
         margin-top: 5px
     }
-}
+}

src/pages/personal-page/my-payment-page/my-payment-page.component.html

@@ -1,5 +1,6 @@
 <div class="container">
     <div class="left_part">
+      <h5><br></h5>
         <h1 class="recent_title">
             财务管理
         </h1>
@@ -43,4 +44,4 @@ <h4>扫码支付：</h4>
             <a routerLink="." class="func_t">财务管理</a>
         </div>
     </div>
-</div>
+</div>

src/pages/personal-page/my-payment-page/my-payment-page.component.styl

@@ -25,8 +25,9 @@
 
 .right_part {
     lost-column: 1 / 5
-    position: sticky
-    top: var(--theme-pad-05)
+    position: fixed
+    right: var(--theme-pad-05)
+    top: var(--theme-pad-10)
 
     .line {
         width = 100%
@@ -41,4 +42,4 @@
         color: var(--palette-base03)
         margin-top: 5px
     }
-}
+}

src/pages/personal-page/my-setting-page/my-setting-page.component.html

@@ -1,5 +1,6 @@
 <div class="container">
   <div class="left_part">
+    <h5><br></h5>
     <h1 class="recent_title">
       个人设置
     </h1>

src/pages/personal-page/my-setting-page/my-setting-page.component.styl

@@ -41,4 +41,4 @@
         color: var(--palette-base03)
         margin-top: 5px
     }
-}
+}

src/pages/personal-page/personal-page.component.html

@@ -1,5 +1,6 @@
 <div class="container">
     <div class="info_part">
+      <h3><br></h3>
         <div class="jumbotron">
             {{name}}
         </div>
@@ -75,4 +76,4 @@ <h1 class="recent_title">
             <a routerLink="payment">财务管理</a>
         </div>
     </div>
-</div>
+</div>

src/pages/personal-page/personal-page.component.styl

@@ -68,7 +68,7 @@
                 margin: 30px
                 lost-align: middle-right
                 lost-column: 1 / 4
-                
+
             }
         }
 
@@ -80,8 +80,9 @@
 
 .func_part {
     lost-column: 1 / 5
-    position: sticky
-    top: var(--theme-pad-05)
+    position: fixed
+    right: var(--theme-pad-05)
+    top: var(--theme-pad-10)
 
     .line {
         width = 100%