feat: 直播，优化时间线样式

h5/src/components/extension/timeline-canvas-wx.vue

@@ -38,10 +38,10 @@ export default {
       type: [Number, String],
       default: "100%",
     },
-    // 
+    //
     height: {
       type:[Number, String],
-      default: 40,
+      default: 60,
     },
     // 中间的时间,
     startMeddleTime: String,
@@ -74,17 +74,19 @@ export default {
           //背景
           background: "transparent",
           //中间线
-          meddleLine: "rgba(64, 196, 255,0.6)",
+          meddleLine: "rgba(18, 20, 21, 1)",
           //中间时间
-          meddleDate: "red", // "rgb(64, 196, 255)",
+          meddleDate: "rgba(18, 20, 21, 1)", // "rgb(64, 196, 255)",
+
+          // TODO: 移动线和时间是什么？
           //移动线
-          moveLine: "rgba(255,17,17,0.95)",
+          moveLine: "red",
           //移动时间
-          moveDate: "#009966",
+          moveDate: "red",
           //刻度线
-          scaleLine: "rgba(255,255,255,0.9)",
+          scaleLine: "rgba(144, 148, 157, 1)",
           // 小刻度线
-          minscaleLine: "rgba(255,255,255,0.5)",
+          minscaleLine: "rgba(144, 148, 157, 1)",
           //刻度条
           scaleBar: "transparent",
         };
@@ -259,7 +261,7 @@ export default {
         this.distance = this.getDistance({ x: e.offsetX, y: e.offsetY }, { x: touches[1].pageX, y: touches[1].pageX });
       }
       this.mousedown(e);
-			
+
     },
 
     // 鼠标移动
@@ -374,7 +376,7 @@ export default {
       let line_px = (this.scaleLine_minute * 60) / this.px_second;
       for (let i = p; i <= (this.canvasWidth + 1); i += line_px) {
         let date = this.firstTime + i * this.px_second * 1000;
-    let time1 = moment(date).format("HH:mm");
+      let time1 = moment(date).format("HH:mm");
         if (
           (this.realTimeRange[0] && date < new Date(this.realTimeRange[0]).getTime()) ||
           (this.realTimeRange[1] && date > (new Date(this.realTimeRange[1]).getTime() + 1000))
@@ -516,7 +518,7 @@ export default {
             : item.endTime;
         let sx = (new Date(beginTime).getTime() - this.firstTime) / 1000 / this.px_second;
         let ex = (new Date(endTime).getTime() - this.firstTime) / 1000 / this.px_second;
-        this.ctx.fillRect(sx, 0, ex - sx, 40);
+        this.ctx.fillRect(sx, 0, ex - sx, 6);
       });
     },
     //获取点坐标的距离（用于移动端双指放大缩小手势识别）
@@ -574,7 +576,7 @@ export default {
     // canvas最左边的时间的时间戳（滑动计算时间）
    //  firstTime() {
    //    return new Date(this.realTimeRange[0]).getTime();
-      
+
    //  },
     firstTime() {
       return new Date(this.meddleTime).getTime() - ((this.px_second * this.canvasWidth) / 2) * 1000;
@@ -636,4 +638,4 @@ export default {
 .timeline-canvas{
   // width:calc(100% - 80px)!important;
 }
-</style>
\ No newline at end of file
+</style>

h5/src/components/extension/videoTime.vue

@@ -49,7 +49,7 @@
 					<div class="ptz-control-jian" @mousedown="ptzControlOneClick('zoomNarrow')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomNarrow')" @touchend="ptzControlStop">-</div>
 				</div>
 			</div>
-			
+
 			<!-- 日历下拉框 -->
 			<van-calendar v-model:show="showDaySelectShow" @confirm="showDayChange" color="rgb(1,167,245)" :min-date="minDay" :max-date="maxDay" row-height="40" :show-subtitle="false"/>
 			<!-- 时间下拉框 -->
@@ -85,10 +85,10 @@ export default {
 			markTime: [],
 
 			isNoBack:true,
-			
+
 			maxDay: new Date(),
 			minDay: new Date(2023,1,1),
-			
+
 			ptzControlShow:false,
 			isCanFastRight:false,
 			timeColumns:[],
@@ -130,7 +130,7 @@ export default {
 						this.markTime.push({
 							beginTime: moment(one.startTime).format(this.dateFormatType + ' HH:mm:ss'),
 							endTime: moment(one.endTime).format(this.dateFormatType + ' HH:mm:ss'),
-							bgColor: "rgba(255,153,0,0.4)",
+							bgColor: "rgba(92, 144, 245, 1)",
 							text: "",
 						})
 					})
@@ -209,7 +209,7 @@ export default {
 			this.isNoBack = this.startMeddleTime == moment().format(this.dateFormatType + ' HH:mm:ss')
 			this.ptzControlShow = false
 			this.isCanFast()
-			
+
 		},
 		// 时间选择点击
 		timeSelectShow() {
@@ -268,7 +268,7 @@ export default {
 			if(this.showTimeSelectShow){
 				return false;
 			}
-			
+
 			let startTimeArr = this.startTime.split(':')
 			let timeColumns = []
 			let maxHour = 23
@@ -316,7 +316,7 @@ export default {
 			this.ptzControlShow = false
 			this.$forceUpdate()
 		},
-		
+
 		// 云台控制显示
 		ptzControlChange() {
 			this.ptzControlShow = !this.ptzControlShow
@@ -331,7 +331,7 @@ export default {
 			this.ptzControlType = ''
 			this.$emit('ptzControlClick','stop')
 		},
-		
+
 		// 快退/快进
 		fastChangeStartTime(val) {
 			let newTime = val>0?moment(this.showDay + ' ' + this.startTime).add(val, "seconds").format(this.dateFormatType + ' HH:mm:ss'):moment(this.showDay + ' ' + this.startTime).subtract(val*-1, "seconds").format(this.dateFormatType + ' HH:mm:ss');
@@ -376,7 +376,7 @@ export default {
 			width: 100%;
 			height: 11.65vw;
 			position: relative;
-			
+      background-color: #F9F9F9;
 		}
 	}
 	.date-axis{
@@ -554,4 +554,4 @@ export default {
 /deep/.van-calendar__popup{
 	height: 64%!important;
 }
-</style>
\ No newline at end of file
+</style>