no message

src/components/GanttChart/index.vue

@@ -29,7 +29,7 @@
         display: getDisplay(element), top: getTop(element), left: getLeft(element),
         height: getHeight(element), width: getWidth(element)
       }" class="grid-item" @mousedown.stop>
-            <el-popover placement="bottom" trigger="click" width="300px" popper-class="popper"
+            <el-popover placement="bottom" width="300px" popper-class="popper"
               :popper-style="popperStyle" :hide-after="0">
               <div class="title">
                 <h2>{{ element.name }}</h2>
@@ -52,8 +52,8 @@
               </div>
               <template #reference>
                 <div style="height: 100%">
-                  <div>{{ element.startTime }} - {{ element.endTime }}</div>
-                  <div>{{ element.name }}</div>
+                  <div class="info">{{ element.startTime }} - {{ element.endTime }}</div>
+                  <div class="info">{{ element.name }}</div>
                 </div>
               </template>
             </el-popover>
@@ -249,14 +249,13 @@ const storeName = (val) => {
 
 const getHeight = (val) => {
   if (val.startTime) {
-    let e = (proxy.hoursToSeconds(val.endTime) - proxy.hoursToSeconds(val.startTime)) / 3600
-    return e < 0.5 ? '20px' : e * 100 + 'px'
+    return (proxy.hoursToSeconds(val.endTime) - proxy.hoursToSeconds(val.startTime)) / 3600 * 60 + 'px'
   }
 }
 
 const getTop = (val) => {
   if (val.startTime) {
-    return proxy.hoursToSeconds(val.startTime) / 3600 * 100 + 'px'
+    return proxy.hoursToSeconds(val.startTime) / 3600 * 60 + 'px'
   }
 }
 
@@ -288,14 +287,14 @@ const getLeft = (val) => {
 
   .time {
     width: 100%;
-    height: 100px;
+    height: 60px;
     display: flex;
 
     .label {
       width: 50px;
       height: 100%;
       border-right: 1px solid #e3e3e3;
-      line-height: 100px
+      line-height: 60px
     }
 
     .line {
@@ -312,7 +311,7 @@ const getLeft = (val) => {
     width: calc(100% - 50px);
 
     .label_box {
-      height: 2400px
+      height: 1440px
     }
 
     .grid-item {
@@ -323,6 +322,10 @@ const getLeft = (val) => {
       border-radius: 4px;
       overflow: hidden;
       color: #337ecc;
+
+      .info{
+        padding: 10px 0 0 10px;
+      }
     }
   }
 }