timeline的css修改为百分比

src/components/common/timeLine.vue

@@ -22,7 +22,7 @@
             :key="index"
             :class="['timeDuan', 'timeDuan' + index]"
             :ref="'timeDuan' + index"
-            :style="{ width: item.width + 'px', left: item.positionX + 'px' }"
+            :style="{ width: item.width, left: item.positionX }"
           ></div>
         </div>
       </div>
@@ -75,15 +75,25 @@ export default {
       }
 
       setTimeout(() => {
-        let positionPY = (that.$refs.timeLine.clientWidth - 50) / totalTimeHour;
         for (let i = 0; i <= totalTimeHour; i++) {
           // 时间点 left 偏移
-          that.$refs["timepoint" + i][0].style.left = positionPY * i + "px";
+          that.$refs["timepoint" + i][0].style.left =
+            "calc(" +
+            ((1 * 100) / totalTimeHour) * i +
+            "% - " +
+            (50 / totalTimeHour) * i +
+            "px)";
+
+          // positionPY * i + "px";
         }
         for (let i = 0; i <= that.timekedu.length - 1; i++) {
           // 时间刻度 宽度
           that.$refs["xiaoshikd" + i][0].style.width =
-            (that.$refs.timeLine.clientWidth - 50) / totalTimeHour + "px";
+            "calc(" +
+            1 * 100 +
+            "% / " +
+            totalTimeHour +
+            ")";
         }
         that.setHuiYi();
       }, 100);
@@ -95,8 +105,7 @@ export default {
 
       let totalTimeHour = this.endTime - this.startTime; // 9个小时，10个时间刻度
       let totalTimeMinute = (this.endTime - this.startTime) * 60; // 9个小时，10个时间刻度
-      let everyMinuteWidth =
-        (this.$refs.timeLine.clientWidth - 25) / totalTimeMinute;
+      // let everyMinuteWidth = (this.$refs.timeLine.clientWidth - 25) / totalTimeMinute;
 
       this.huiyiInfoRender = this.huiyiInfo.map(function (item) {
         // item.name;
@@ -115,9 +124,17 @@ export default {
           (new Date(item.startTime) - new Date(keduStartTime)) / 1000 / 60;
 
         // 宽度
-        let width = minute * everyMinuteWidth;
+        // let width = minute * everyMinuteWidth;
+        let width =
+          "calc(" +
+          ((minute * 1) / totalTimeMinute) * 100 +
+          "% - " +
+          (25 * minute) / totalTimeMinute +
+          "px)";
+
         // 偏移量
-        let positionX = minute_py * everyMinuteWidth;
+        // let positionX = minute_py * everyMinuteWidth;
+        let positionX = ((minute_py * 1) / totalTimeMinute) * 100 + "%";
 
         item.width = width;
         item.positionX = positionX;
@@ -191,7 +208,10 @@ export default {
       .timeDuan {
         height: 100%;
         position: absolute;
-        background: #000;
+        background: #0000004d;
+        box-sizing: border-box;
+        border-radius: 2px;
+        border: 1px solid #ffffff;
       }
     }
   }