薪资单弹框

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

@@ -58,7 +58,7 @@
         </div>
       </div>
     </div>
-    <div  class="part">D
+    <div  class="part">
       <div class="item">
         <div class="title">
           <span>本期实领(A+B+C-D)</span> 
@@ -69,10 +69,41 @@
     <a style="color:#2c67a0;" (click)="lookTak()">点击查看个人所得税明细</a>
   </div>
 </div>
-<div class="mask"></div>
-<div class="tax_mask">
+<div class="mask" *ngIf="takFlag == true;"></div>
+<div class="tax_mask" *ngIf="takFlag == true;">
+  <div class="close" (click)="takFlag == false;"> X </div>
   <div class="mask_title">
     <div>个人所得税预扣明细</div>
-    <div>个人所得税政策</div>
+    <div><span class="iconfont icon-zhuyishixiang"></span> 个人所得税政策</div>
+  </div>
+  <div class="tax_content">
+    <div class="tax_item">
+      <div>
+        <span>本期应税所得</span>
+        <span class="red"></span>
+      </div>
+      <div>
+        <span>年度累计应税所得</span>
+        <span class="red"></span>
+      </div>
+      <div>
+        <span>预扣率</span>
+        <span class="red"></span>
+      </div>
+    </div>
+    <div class="tax_item">
+      <div>
+        <span>累计应扣所得税（A）</span>
+        <span class="red"></span>
+      </div>
+      <div>
+        <span>累计已扣所得税（B）</span>
+        <span></span>
+      </div>
+      <div>
+        <span>本期应扣所得税（A-B）</span>
+        <span></span>
+      </div>
+    </div>
   </div>
 </div>

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

@@ -66,3 +66,45 @@
     max-width: 640px;
     background: rgba(0,0,0,.6);
 }
+
+.tax_mask{
+    width: 90%;
+    position: absolute;
+    top: 26%;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 300px;
+    background: #f6f6f6;
+    margin: 0 auto;
+    z-index: 3002;
+    border-radius: 10px;
+    .close{
+        color: #fff;
+        background: transparent;
+        margin-top: -30px;
+        opacity: 1;
+    }
+}
+
+.mask_title{
+    display: flex;
+    color: #1b5b99;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    div:nth-child(1){
+        font-size: 18px;
+    }
+}
+.tax_content{
+    .tax_item{
+        margin: 10px;
+        padding: 10px;
+        background: #fff;
+        div{
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+}
\ No newline at end of file

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

@@ -9,7 +9,7 @@ import { ActivatedRoute,Router } from "@angular/router";
 })
 export class SalaryDetailComponent implements OnInit {
   monDtlPeriod:string;
-  takFlag:boolean = true;
+  takFlag:boolean = false;
   constructor(public lifeCommonService: LifeCommonService,private activatedRoute: ActivatedRoute) { }
 
   ngOnInit() {
@@ -19,5 +19,6 @@ export class SalaryDetailComponent implements OnInit {
 
   lookTak(){
     this.takFlag = true;
+    console.log(this.takFlag)
   }
 }