androidCnToWechatGrt/pagesHome/video/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='视频监控'></cus-header>
		<div class="video" :style="{'top':mt+'px'}">
			<div class="datetime" :style="{'top':mt+'px'}">{{dateTime}}</div>
			<div class="btns" :style="{'top':(mt+165)+'px'}">
				<div class="onoff">
					<image :src="imgBase+'home/video_onoff.png'"></image>
				</div>
				<div class="voice">
					<image :src="imgBase+'home/video_voice.png'"></image>
				</div>
				<div class="fhd">
					<image class="fhd1" :src="imgBase+'home/video_fhd1.png'"></image>
					<image class="fhd2" :src="imgBase+'home/video_fhd2.png'"></image>
				</div>
				<div class="fullscreen">
					<image :src="imgBase+'home/video_fullscreen.png'"></image>
				</div>
			</div>
		</div>
		<div class="list" v-if="list.length">
			<div class="item" v-for="(item,index) in list" :key="index">
				<div class="left">
					<image :src="imgBase+'home/video_person.png'"></image>
					<div class="info">
						<text>{{item.title}}</text>
						<text class="time">{{item.time}}</text>
					</div>
				</div>
				<div class="right">
					<image :src="item.img" v-if="item.img"></image>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	var timer = null;
	export default {
		data(){
			return {
				dateTime:'',
				list:[
					{
						title:'画面变化',
						time:'16:01',
						img:''
					},
					{
						title:'画面变化',
						time:'15:01',
						img:''
					},
					{
						title:'画面变化',
						time:'14:01',
						img:''
					},
					{
						title:'画面变化',
						time:'13:01',
						img:''
					}
				]
			}
		},
		created() {
			this.dateTime = this.getCurrentTime();
		},
		onLoad() {
			timer = setInterval(()=>{
				this.dateTime = this.getCurrentTime();
			},1000)
		},
		onUnload() {
			clearInterval(timer);
		},
		methods:{
			getCurrentTime(){
				let d = new Date();
				let t = [d.getMonth()+1,d.getDate(),d.getHours(),d.getMinutes(),d.getSeconds()];
				t = t.map(i=>(i+'').padStart(2,0));
				return d.getFullYear()+'/'+t[0]+'/'+t[1]+' '+t[2]+':'+t[3]+':'+t[4]
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		background: #F4F8FB;
		box-sizing: border-box;
		
		.video{
			width: 100%;
			height: 423rpx;
			background: #1D2129;
			position: fixed;
			left: 0;
			.datetime{
				width: 228rpx;
				height: 32rpx;
				background: #333333;
				font-family: AlibabaPuHuiTi_2_55_Regular;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				position: fixed;
				left: 0;
			}
			.btns{
				width: 100%;
				display: flex;
				align-items: center;
				position: fixed;
				left: 0;
				z-index: 3;
				&>div{
					width: 25%;
					height: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.onoff{
					image{
						width: 40rpx;
						height: 44rpx;
					}
				}
				.voice{
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
				.fhd{
					position: relative;
					&>image{
						position: absolute;
					}
					.fhd1{
						width: 48rpx;
						height: 36rpx;
						z-index: 1;
					}
					.fhd2{
						width: 30rpx;
						height: 12rpx;
						z-index: 2;
					}
				}
				.fullscreen{
					image{
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}
	
		.list{
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			margin-top: 423rpx;
			overflow: hidden;
			.item{
				width: 100%;
				padding: 22rpx 23rpx 22rpx 30rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					&>image{
						width: 58rpx;
						height: 58rpx;
					}
					.info{
						display: flex;
						flex-direction: column;
						padding-left: 30rpx;
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #1D2129;
							line-height: 30rpx;
							text-align: left;
							&.time{
								font-size: 24rpx;
								color: #999999;
								line-height: 24rpx;
								margin-top: 20rpx;
							}
						}
					}
				}
				.right{
					width: 202rpx;
					height: 122rpx;
					background: #657588;
					border-radius: 16rpx;
					image{
						width: 100%;
						height: 1005px;
						border-radius: 16rpx;
					}
				}
			}
		}
	}
</style>