zhgdyunapp/pages/personLocation/exam/studydetails/studydetails.vue

<template>
	<view>
		<view class="video">
			<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
				@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
		</view>
		<view class="studybox">
			<view></view>
			<view>
				<view class="studybox-text1">
					<text>安全教育——视频</text>
					<text>建筑施工安全生产教育</text>
				</view>
				<view class="studybox-text2">
					<text>剩余天数:3389天</text>
					<button type="warn" plain="true">未开始</button>
				</view>
			</view>
		</view>
		<view class="studylists">
			<view class="studylist">
				<view class="">
					<text>2024-3-12/第一次</text>
					<text>学习期限:2024-3-12至2024-3-19</text>
				</view>
				<view class="justify-center">
					<button type="warn" plain="true">未开始</button>
					<!-- <text>完成时间:2024-3-12 12:00:00</text> -->
				</view>
			</view>
			<view class="studylist">
				<view class="">
					<text>2024-3-12/第一次</text>
					<text>学习期限:2024-3-12至2024-3-19</text>
				</view>
				<view class="">
					<button type="success" class="btn-success" plain="true">已完成</button>
					<text>完成时间:2024-3-12 12:00:00</text>
				</view>
			</view>
		</view>
		<button type="primary" class="btn" @click="goHiidden('/personLocation/exam/beginexam/beginexam')">开始考试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: ''
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			goHiidden(url) {
				uni.navigateTo({
					url: `/pages${url}`
				});
			},
		}
	}
</script>

<style>
	.video {
		width: 100%;
	}

	#myVideo {
		width: 100%;
		height: 386.25rpx;
	}

	.studybox {
		display: flex;
		box-shadow: 4rpx 4rpx 8rpx 2rpx rgba(81, 129, 246, 0.12);
	}

	.studybox>view:first-child {
		width: 14.02rpx;
		background-color: #4B8DEC;
	}

	.studybox>view:last-child {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 0 25rpx 23.08rpx 46.15rpx;
	}

	.studybox-text1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000000;
	}

	.studybox-text1>text:first-child {
		font-size: 38.46rpx;
	}

	.studybox-text1>text:last-child {
		font-size: 24rpx;
	}

	.studybox-text2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000000;
		margin-top: 21.15rpx;
	}

	.studybox-text2>text:first-child {
		font-size: 24rpx;
	}

	.studybox-text2>button {
		width: 143rpx;
		height: 58rpx;
		font-size: 27rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
	}

	.btn {
		margin: 159.62rpx 40.38rpx;
	}

	.studylists {
		margin-top: 30rpx;
	}

	.studylist {
		display: flex;
		box-shadow: 4rpx 4rpx 8rpx 2rpx rgba(81, 129, 246, 0.12);
		margin-top: 15.38rpx;
		height: 124.52rpx;
		justify-content: space-between;
		padding: 7.69rpx 25rpx 13.46rpx 51.92rpx;
	}

	.studylist>view {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #000;
	}

	.studylist>view:last-child {
		align-items: flex-end
	}


	.studylist>view:first-child text:first-child {
		font-size: 30.77rpx;
	}

	.studylist>view text:last-child {
		font-size: 19.23rpx;
	}

	.studylist>view button {
		width: 143rpx;
		height: 58rpx;
		font-size: 27rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
	}
	
	.justify-center{
		justify-content: center !important;
	}
	
	.btn-success {
		color: #0DB027;
		border-color: #0DB027;
	}
</style>