update

src/views/FlexEmployee.vue

@@ -112,7 +112,6 @@ export default class FlexEmployee extends Vue {
   private taskRecordList: any = null;
   private taskRecordList: any = null;
   private showList: number = -1;
   private showList: number = -1;
   private showPopup: boolean = true;
   private showPopup: boolean = true;
-
   private expand: boolean = true;
   private expand: boolean = true;
 
 
   get popupStyle() {
   get popupStyle() {

src/views/Index.vue

@@ -27,8 +27,16 @@
         </p>
         </p>
       </div>
       </div>
     </div>
     </div>
-    <div class="index-bottom-box">
-      <div class="close-box">
+
+    <van-popup
+      v-model="showPopup"
+      :overlay="!showPopup"
+      :close-on-click-overlay="!showPopup"
+      round
+      position="bottom"
+      :style="popupStyle"
+    >
+      <div class="close-box" @click="expand_click">
         <img src="../assets/images/ic_unfold@2x.png" />
         <img src="../assets/images/ic_unfold@2x.png" />
       </div>
       </div>
 
 
@@ -95,15 +103,18 @@
           title="arrow"
           title="arrow"
         />
         />
       </router-link>
       </router-link>
-    </div>
+    </van-popup>
   </div>
   </div>
 </template>
 </template>
 
 
 <script lang='ts'>
 <script lang='ts'>
 import "../assets/css/labor.css";
 import "../assets/css/labor.css";
+import { Popup } from "vant";
 import { Component, Vue } from "vue-property-decorator";
 import { Component, Vue } from "vue-property-decorator";
 @Component({
 @Component({
-  components: {}
+  components: {
+    [Popup.name]: Popup
+  }
 })
 })
 export default class Index extends Vue {
 export default class Index extends Vue {
   private name: string = "";
   private name: string = "";
@@ -115,6 +126,20 @@ export default class Index extends Vue {
   private id_no: string = "";
   private id_no: string = "";
   private sp_id: string = "";
   private sp_id: string = "";
   private ed_id: string = "";
   private ed_id: string = "";
+  private showPopup: boolean = true;
+  private expand: boolean = true;
+
+  get popupStyle() {
+    if (this.expand) {
+      return { height: "63%" };
+    } else {
+      return { height: "86%" };
+    }
+  }
+
+  private expand_click() {
+    this.expand = !this.expand;
+  }
 
 
   created() {
   created() {
     const id_no = this.$route.query.id_no as string;
     const id_no = this.$route.query.id_no as string;
@@ -155,7 +180,7 @@ body {
 }
 }
 .info-card-box {
 .info-card-box {
   width: 100%;
   width: 100%;
-  height: 256px;
+  height: 667px;
   background: linear-gradient(
   background: linear-gradient(
     180deg,
     180deg,
     rgba(51, 205, 139, 1) 0%,
     rgba(51, 205, 139, 1) 0%,
@@ -214,6 +239,7 @@ body {
   width: 100%;
   width: 100%;
   height: 24px;
   height: 24px;
   padding-top: 10px;
   padding-top: 10px;
+  padding-bottom: 30px;
   cursor: pointer;
   cursor: pointer;
 }
 }
 .close-box img {
 .close-box img {