薪资单

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

 <div class="salesWrapper">
 <div class="salesWrapper">
   <ul class="tab">
   <ul class="tab">
-    <li class="selected" *ngFor="let tabItem of tabList" (click)="selectTab(tabItem.id)"
+    <li class="selected" *ngFor="let tabItem of tabList" (click)="selectTab(tabI)"
     [ngClass]="{selected:selectedId === tabItem.id}"
     [ngClass]="{selected:selectedId === tabItem.id}"
     >
     >
       <div style="position: relative;">
       <div style="position: relative;">
@@ -10,10 +10,10 @@
   </ul>
   </ul>
   <div class="salesContent">
   <div class="salesContent">
     <div class="salesItem" *ngFor="let payScaleItem of payScaleInfos"  (click)="getPdf(payScaleItem.monShId,payScaleItem.pdfOssPath)">
     <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>
-      <div class="line">
-        <div>薪资日期</div>
-        <div>{{lifeCommonService.getDate(payScaleItem.monDtlPeriod)}}</div>
+      <div class="line" style="font-weight: bold;font-size: 16px;">
+        <span>{{lifeCommonService.getDate(payScaleItem.monDtlPeriod)}}实发佣金</span>
+        <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlRAmount | number: "1.2-2"}}</div>
+        <div  *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div>
       </div>
       </div>
       <div class="line">
       <div class="line">
         <div>流水编号</div>
         <div>流水编号</div>
@@ -29,18 +29,11 @@
         <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{(payScaleItem.monDtlAmount-payScaleItem.monDtlRAmount) | number: "1.2-2"}}</div>
         <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{(payScaleItem.monDtlAmount-payScaleItem.monDtlRAmount) | number: "1.2-2"}}</div>
         <div class="price" *ngIf="payScaleItem.pdfOssPath">-</div>
         <div class="price" *ngIf="payScaleItem.pdfOssPath">-</div>
       </div>
       </div>
-      <div class="line">
-        <span>实发佣金</span>
-        <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlRAmount | number: "1.2-2"}}</div>
-        <div  *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div>
-      </div>
-      <div class="line">
-        <div></div>
-        <div>
-          薪资单明细
-          <span class="iconfont icon-xiazai" style="color:#ff3500;margin-left: 5px;"></span>
-        </div>
+      <div class="salary_down">
+        <span class="iconfont icon-xiazai" style="color:#ff3500;margin-left: 5px;"></span>
+        薪资单明细
       </div>
       </div>
+     
     </div>
     </div>
     <div style="text-align: center;margin-top: 20px;" *ngIf="payScaleInfos?.length<=0">暂无数据</div>
     <div style="text-align: center;margin-top: 20px;" *ngIf="payScaleInfos?.length<=0">暂无数据</div>
   </div>
   </div>

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

@@ -26,30 +26,11 @@
           }
           }
         }
         }
     .salesContent{
     .salesContent{
-        background: #fff;
         .salesItem{
         .salesItem{
-            border-bottom: 1px #dcdcdc solid;
             padding: 10px;
             padding: 10px;
-            padding-left: 45px;
             position: relative;
             position: relative;
-            .icon_bolck{
-                border: 1px #dcdcdc solid;
-                width: 35px;
-                height: 35px;
-                position: absolute;
-                left: 3px;
-                top: 50px;
-                line-height: 30px;
-                text-align: center;
-                border-radius: 50%;
-                .iconfont{
-                    color: #ff3500;
-                    font-size: 22px;
-                    position: relative;
-                    top: 1px;
-                }
-            }
-            
+            margin-bottom: 15px;
+            background: #fff;
             .line{
             .line{
                 display: flex;
                 display: flex;
                 justify-content: space-between;
                 justify-content: space-between;
@@ -62,10 +43,16 @@
                     font-weight: bold;
                     font-weight: bold;
                 }
                 }
             }
             }
+            .salary_down{
+                border-top: 1px #eee solid;
+                padding: 10px 0 0;
+                text-align: center;
+            }
             .long_line{
             .long_line{
                 font-size: 12px;
                 font-size: 12px;
             }
             }
         }
         }
+        
         .salesItem:last-child{
         .salesItem:last-child{
             border-bottom: none;
             border-bottom: none;
         }
         }