薪资单

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

 <div class="wrapper">
 <div class="wrapper">
   <div class="header">
   <div class="header">
-    <div class="paginate">
+    <!-- <div class="paginate">
       <div class="pre"><span class="iconfont icon-fanhui"></span>上一期</div>
       <div class="pre"><span class="iconfont icon-fanhui"></span>上一期</div>
       <div class="next">下一期<span class="iconfont icon-ar-r"></span></div>
       <div class="next">下一期<span class="iconfont icon-ar-r"></span></div>
-    </div>
+    </div> -->
     <div class="price">
     <div class="price">
-      ￥30,000.25
+      <div class="pre"><span class="iconfont icon-fanhui"></span>上一期</div>
+      <div class="salay">￥30,000.25</div> 
+      <div class="next">下一期<span class="iconfont icon-ar-r"></span></div>
     </div>
     </div>
   </div>
   </div>
   <div class="content_wrapper">
   <div class="content_wrapper">
@@ -17,7 +19,7 @@
           <span class="red">18,505.00</span>
           <span class="red">18,505.00</span>
         </div>
         </div>
         <div class="item_detail">
         <div class="item_detail">
-          <span>首年度销售佣金</span>
+          <span>续年度销售佣金</span>
           <span class="red">225.00</span>
           <span class="red">225.00</span>
         </div>
         </div>
       </div>
       </div>
@@ -28,7 +30,7 @@
           <span class="red">18,505.00</span>
           <span class="red">18,505.00</span>
         </div>
         </div>
         <div class="item_detail">
         <div class="item_detail">
-          <span>首年度辅导奖金</span>
+          <span>续年度辅导奖金</span>
           <span class="red">225.00</span>
           <span class="red">225.00</span>
         </div>
         </div>
         <div class="item_detail">
         <div class="item_detail">

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

@@ -2,20 +2,30 @@
     background: #f6f6f6;
     background: #f6f6f6;
     min-height: 100%;
     min-height: 100%;
     .header{
     .header{
-        padding:15px;
+        padding: 30px 10px;
         color: #fff;
         color: #fff;
-        background: #1b5b99;
+        background: url('../../../assets/images/measurebanner.jpg') no-repeat 50%;
         .paginate{
         .paginate{
             display: flex;
             display: flex;
             justify-content: space-between;
             justify-content: space-between;
             align-items: center;
             align-items: center;
             height: 40px;
             height: 40px;
+            font-size: 18px;
         }
         }
         .price{
         .price{
-            font-size: 24px;
-            font-weight:bold;
             text-align: center;
             text-align: center;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .pre,.next{
+                font-size: 16px;
+            }
+            .salay{
+                font-size: 24px;
+                letter-spacing: 2px;
+            }
         }
         }
+        
     }
     }
     .content_wrapper{
     .content_wrapper{
         margin: 15px 10px 0;
         margin: 15px 10px 0;