薪资单页面简单优化

src/app/my/my-routing.module.ts

@@ -78,7 +78,7 @@ const myRoutes: Routes = [
   { path: 'scoreDeatil/:practitionerId', component: ScoreDetailsComponent, canActivate: [AuthGuard] },
   { path: 'businessCard', component: BusinessCardComponent, canActivate: [AuthGuard] },
   { path: 'orderDetail', component: OrderDetailComponent, canActivate: [AuthGuard] },
-  { path: 'salary', component: SalaryComponent, canActivate: [AuthGuard] },
+  { path: 'salary', component: SalaryComponent, canActivate: [AuthGuard],data:[{title:'我的薪资'}] },
   { path: 'todo', component: TodoListComponent, canActivate: [AuthGuard] },
   { path: 'addtask',component:AddTaskComponent,canActivate:[AuthGuard]},
   { path: 'medical_service',component:MedicalServiceComponent,canActivate:[AuthGuard]},

src/app/my/salary/salary.component.html

 <div class="salesWrapper">
+  <ul class="tab">
+    <li class="selected" *ngFor="let tabItem of tabList" (click)="selectTab(tabItem.id)"
+    [ngClass]="{selected:selectedId === tabItem.id}"
+    >
+      <div style="position: relative;">
+        <h3>{{tabItem.name}}</h3>
+      </div>
+    </li>
+  </ul>
   <div class="salesContent">
     <div class="salesItem" *ngFor="let payScaleItem of payScaleInfos"  (click)="getPdf(payScaleItem.monShId,payScaleItem.pdfOssPath)">
       <div class="icon_bolck"><span class="iconfont icon-xinzidan"></span></div>

src/app/my/salary/salary.component.scss

@@ -2,41 +2,31 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-    .top{
+    background: #f5f5f5;
+    .tab {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .tab{
-            display: flex;
-            list-style: none;
-            /* margin-bottom: 5px; */
-            margin: 10px 0px;
-            padding:0 2%;
-            justify-content: space-between;
-             li {
-              text-align: center;
-            //   border: 1px #a9aabb solid;
-            //   border-radius: 20px;
-            font-size: 16px;
+        list-style: none;
+        justify-content: space-around;
+        background:#fff;
+        margin-bottom: 10px;
+          li {
+            line-height: 50px;
+            height: 50px;
+            text-align: center;
+            h3 {
+              font-weight: normal;
+              font-size: 16px;
             }
-            li.selected{
-                // background-color: #ff5a32;
-                // color: #fff;
-                // border: 1px #f0f0f0 solid;
-                // border: 1px #e10d0d solid;
-                border-bottom: 2px #e10d0d solid;
-                font-weight: bold;
-            }
-          }
-          .tab:nth-child(1){
-            width: 50%;
           }
-          .tab:nth-child(2){
-            width: 28%;
+          li.selected {
+            border-bottom: 3px #e10d0d solid;
+            h3{
+              color: #e10d0d;
+            }
           }
-    }
-    
+        }
     .salesContent{
+        background: #fff;
         .salesItem{
             border-bottom: 1px #dcdcdc solid;
             padding: 10px;

src/app/my/salary/salary.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MyService } from '../my.service';
 import { LifeCommonService } from '../../common/life-common.service';
+import { ActivatedRoute,Router } from "@angular/router";
 
 @Component({
   selector: 'ydlife-salary',
@@ -14,12 +15,21 @@ export class SalaryComponent implements OnInit {
   //控制弹框
   toastDialog: boolean;
   toastInfo: any;
-  constructor(private myService: MyService, public lifeCommonService: LifeCommonService) { }
+  tabList:Array<any>;
+  selectedId:any = 1;
+  constructor(private activatedRoute: ActivatedRoute,private myService: MyService,
+     public lifeCommonService: LifeCommonService) { }
 
   ngOnInit() {
+    const title = this.activatedRoute.snapshot.data[0]['title'];
+    this.lifeCommonService.setTitle(title);
     this.practitionerIdEG = JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerIdEG'];
     this.practitionerId = JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerId']
     this.payScaleListQuery();
+    this.tabList = [
+      {name:'2021年',id:1},
+      {name:'历史薪资',id:2}
+    ]
   }
 
   payScaleListQuery() {
@@ -58,4 +68,8 @@ export class SalaryComponent implements OnInit {
     }
     
   }
+
+  selectTab(tabId){
+    this.selectedId = tabId;
+  }
 }