时间控件

components/page/timeDifference.vue → components/page/dateRange.vue

 <template>
   <div class="time-view" v-if="timeValue.startDate && timeValue.endDate">
-    <span>{{ timeValue.startDate }}</span
-    >&nbsp; <span class="line">————</span>&nbsp;
-    <!-- {{ date }} -->
-    <span>{{ timeValue.endDate }}</span>
-    <div class="jian-tou"></div>
-    <div class="day-time">{{ date }}</div>
+    <div>{{ timeValue.startDate }}</div>
+    <div class="jian-tou">
+      <div>{{ date }}</div>
+    </div>
+    <div>{{ timeValue.endDate }}</div>
   </div>
 </template>
 <script>
@@ -69,7 +68,7 @@ export default {
       } else if (this.work == 1) {
         result = "" + parseInt(dayC) + "天";
       } else if (this.work == 0) {
-        result = "" + parseInt(hourC) + "小时";
+        result = "" + parseInt(hourC) + " h";
       }
       // if (monthC >= 1) {
       //   result = "" + parseInt(monthC) + "月";
@@ -96,25 +95,21 @@ export default {
 </script>
 <style lang="less">
 .time-view {
-  width: 300px;
-  position: relative;
-  .day-time {
-    position: absolute;
-    bottom: 11px;
-    left: 83px;
-  }
-  .line {
-    font-size: 18px;
-  }
+  // width: 600px;
+  display: -webkit-flex;
+  display: flex;
+
   .jian-tou {
-    position: absolute;
-    bottom: 9px;
-    left: 144px;
-    width: 7px;
-    height: 7px;
-    border-top: 2px solid #666;
-    border-right: 2px solid #666;
-    transform: rotate(45deg);
+    width: 55px;
+    text-align: center;
+    margin: 5px;
+    background-image: url("../../assets/imgicon/range.png");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    margin-top: 7px;
+    div {
+      margin-top: -13px;
+    }
   }
 }
 </style>

pages/project/project/add.vue

@@ -87,7 +87,7 @@
               style="width: 300px"
             ></DatePicker> </FormItem
         ></Col>
-        <!-- <TimeDifference :timeValue="timeValue" :wrok="1"></TimeDifference> -->
+        <!-- <DateDRange :timeValue="timeValue" :wrok="1"></DateDRange> -->
         <Col :span="12"
           ><FormItem :label="l('type')" prop="type">
             <Dictionary

plugins/iview.js

@@ -76,7 +76,7 @@ import InputCode from '@/components/page/inputCode.vue'
 import Pictrue from '@/components/page/pictrue.vue'
 import WordTree from '@/components/page/wordTree.vue'
 import Actions from '@/components/page/actions.vue'
-import TimeDifference from '@/components/page/timeDifference.vue'
+import DateDRange from '@/components/page/dateRange.vue'
 import FilesViewer from '@/components/page/filesViewer.vue'
 
 
@@ -158,7 +158,7 @@ Vue.component("InputCode", InputCode)
 Vue.component("Pictrue", Pictrue)
 Vue.component("WordTree", WordTree)
 Vue.component("Actions", Actions)
-Vue.component("TimeDifference", TimeDifference)
+Vue.component("DateDRange", DateDRange)
 Vue.component("Life", Life)
 Vue.component("FilesViewer",FilesViewer)