Merge branch 'master' of gitlab.corp.qinqinxiaobao.com:hrs_app_h5/bill

src/views/Bill/index.vue

@@ -5,7 +5,21 @@
     </div>
     </div>
     <div class="contener">
     <div class="contener">
       <div class="header">
       <div class="header">
-        <div class="header_date_time">123</div>
+        <div class="header_date_time">
+          <div class="choose-month">
+            <div class="arrow-l" @click="chooseMonth('left')">
+              <img src="../../assets/images/triangle-arrow-l.png" alt />
+            </div>
+            <div class="month">{{month4choose}}</div>
+            <div class="arrow-r"  @click="chooseMonth('right')">
+              <img src="../../assets/images/triangle-arrow-r.png" alt />
+            </div>
+          </div>
+          <div class="cycle">
+            <span>入账周期：</span>
+            <span>{{cycle}}</span>
+          </div>
+        </div>
         <div class="header_box">
         <div class="header_box">
           <div class="title"></div>
           <div class="title"></div>
           <div class="header_content">
           <div class="header_content">
@@ -20,11 +34,11 @@
           </div>
           </div>
           <div class="header_info">
           <div class="header_info">
             <div class="left">
             <div class="left">
-              <img src alt />
+              <img src="../../assets/images/icon01.png" alt />
               <span>充值</span>
               <span>充值</span>
             </div>
             </div>
             <div class="right" @click="toPage(2)">
             <div class="right" @click="toPage(2)">
-              <img src alt />
+              <img src="../../assets/images/icon02.png" alt />
               <span>资金记录</span>
               <span>资金记录</span>
             </div>
             </div>
           </div>
           </div>
@@ -151,7 +165,9 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
-      title: "人事服务"
+      title: "人事服务",
+      month4choose: "2019年11月",
+      cycle: "11.01-11.30"
     };
     };
   },
   },
   methods: {
   methods: {
@@ -181,6 +197,14 @@ export default {
           this.$router.push({ name: "other" });
           this.$router.push({ name: "other" });
           break;
           break;
       }
       }
+    },
+    chooseMonth(dirct){
+      if(dirct==='left'){
+        console.log('-----');
+      }
+      if(dirct==='right'){
+        console.log('+++++++');
+      }
     }
     }
   }
   }
 };
 };
@@ -194,6 +218,26 @@ export default {
     background: #0978e7;
     background: #0978e7;
     .header_date_time {
     .header_date_time {
       height: 75px;
       height: 75px;
+      color: #fff;
+      font-size: 14px;
+      display: grid;
+      grid-template-columns: 100%;
+      grid-template-rows: 50% 50%;
+      align-items: center;
+      justify-items: center;
+      .choose-month {
+        display: grid;
+        grid-template-columns: 5% 90% 5%;
+        justify-items:center;
+        .arrow-l,.arrow_right{
+          widows: 16px;
+          height: 16px;
+        }
+      }
+      .cycle {
+        color: #8ec9fd;
+        font-size: 12px;
+      }
     }
     }
     .header_box {
     .header_box {
       height: 174px;
       height: 174px;
@@ -258,6 +302,12 @@ export default {
           line-height: 20px;
           line-height: 20px;
           letter-spacing: 1px;
           letter-spacing: 1px;
         }
         }
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 6px;
+          vertical-align: middle;
+        }
       }
       }
     }
     }
   }
   }

src/views/Trusteeship/index.vue

@@ -5,7 +5,21 @@
     </div>
     </div>
     <div class="contener">
     <div class="contener">
       <div class="header">
       <div class="header">
-        <div class="header_date_time">123</div>
+        <div class="header_date_time">
+          <div class="choose-month">
+            <div class="arrow-l" @click="chooseMonth('left')">
+              <img src="../../assets/images/triangle-arrow-l.png" alt />
+            </div>
+            <div class="month">{{month4choose}}</div>
+            <div class="arrow-r"  @click="chooseMonth('right')">
+              <img src="../../assets/images/triangle-arrow-r.png" alt />
+            </div>
+          </div>
+          <div class="cycle">
+            <span>入账周期：</span>
+            <span>{{cycle}}</span>
+          </div>
+        </div>
         <!--人事托管-->
         <!--人事托管-->
         <div class="header_box">
         <div class="header_box">
           <div class="header_box_title">
           <div class="header_box_title">
@@ -145,16 +159,24 @@ export default {
   data() {
   data() {
     return {
     return {
       show: false,
       show: false,
-      title:'人事托管'
+      title:'人事托管',
+      month4choose: "2019年11月",
+      cycle: "11.01-11.30"
     };
     };
   },
   },
   methods: {
   methods: {
-    onClickLeft() {
-      console.log(1);
-    },
+
     openDetail() {
     openDetail() {
       this.show = true;
       this.show = true;
     },
     },
+    chooseMonth(dirct){
+      if(dirct==='left'){
+        console.log('-----');
+      }
+      if(dirct==='right'){
+        console.log('+++++++');
+      }
+    },
     navLeftArrowClick() {
     navLeftArrowClick() {
       this.$router.go(-1);
       this.$router.go(-1);
     }
     }
@@ -174,6 +196,26 @@ export default {
     background: #0978e7;
     background: #0978e7;
     .header_date_time {
     .header_date_time {
       height: 75px;
       height: 75px;
+      color: #fff;
+      font-size: 14px;
+      display: grid;
+      grid-template-columns: 100%;
+      grid-template-rows: 50% 50%;
+      align-items: center;
+      justify-items: center;
+      .choose-month {
+        display: grid;
+        grid-template-columns: 5% 90% 5%;
+        justify-items:center;
+        .arrow-l,.arrow_right{
+          widows: 16px;
+          height: 16px;
+        }
+      }
+      .cycle {
+        color: #8ec9fd;
+        font-size: 12px;
+      }
     }
     }
     .header_box {
     .header_box {
       height: 206px;
       height: 206px;