时间选择布局

src/views/Bill/index.vue

@@ -5,7 +5,21 @@
     </div>
     <div class="contener">
       <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="title"></div>
           <div class="header_content">
@@ -150,7 +164,9 @@ export default {
   },
   data() {
     return {
-      title: "人事服务"
+      title: "人事服务",
+      month4choose: "2019年11月",
+      cycle: "11.01-11.30"
     };
   },
   methods: {
@@ -180,6 +196,14 @@ export default {
           this.$router.push({ name: "other" });
           break;
       }
+    },
+    chooseMonth(dirct){
+      if(dirct==='left'){
+        console.log('-----');
+      }
+      if(dirct==='right'){
+        console.log('+++++++');
+      }
     }
   }
 };
@@ -193,6 +217,26 @@ export default {
     background: #0978e7;
     .header_date_time {
       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 {
       height: 174px;

src/views/Trusteeship/index.vue

@@ -5,7 +5,21 @@
     </div>
     <div class="contener">
       <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_title">
@@ -145,16 +159,24 @@ export default {
   data() {
     return {
       show: false,
-      title:'人事托管'
+      title:'人事托管',
+      month4choose: "2019年11月",
+      cycle: "11.01-11.30"
     };
   },
   methods: {
-    onClickLeft() {
-      console.log(1);
-    },
+
     openDetail() {
       this.show = true;
     },
+    chooseMonth(dirct){
+      if(dirct==='left'){
+        console.log('-----');
+      }
+      if(dirct==='right'){
+        console.log('+++++++');
+      }
+    },
     navLeftArrowClick() {
       this.$router.go(-1);
     }
@@ -174,6 +196,26 @@ export default {
     background: #0978e7;
     .header_date_time {
       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 {
       height: 206px;