iot-platform-app/pages/equipment/instructionsVideo.vue

<template>
	<view class="instructions">
		<commons-header title='视频说明书'></commons-header>
		<video class="video-view" src="./1.mp4"></video>
		<view class="content-title">
			<h2>Smt-2201 针筒注塑机使用说明书</h2>
			<p><span>20220-09-22</span><span style="margin-left:20rpx">已播放（266）</span></p>
		</view>
		<view class="content">
			<view class="title">
				SMARTELL TECHNOLOGY CO.,LTD
			</view>
			<h3>1. Clamping Unit</h3>
			<p>Reliable 5-pint twin-toggle locking
				mechanism; Platens are designed under FiniteElement Analysis; High speed clamping is stable
				while low pressure protection is accurate;
				Automatic lubrication system; Oil shortage alarm;
				Ejector stroke precisely controlled by transducer;
				Plenty of ejector modes for you to choose.</p>
			<image src="../../static/img_jq.png" mode=""></image>
			<h3>2. Injection Unit</h3>
			<p>Double-cylinder balance injection system;
				Shot weight is precisely controlled by transducer;
				Using hydraulic motor to carry out variable speed.</p>
		</view>
	</view>

</template>

<script>
	import commonsHeader from '../../components/commons-header/index.vue'
	export default {
		components: {
			commonsHeader
		},
	}
</script>

<style lang="less" scoped>
	.instructions {
		margin-top: 120rpx;
		.content{
			padding: 0 40rpx 20rpx;
			
			.title{
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				color: #333;
				font-size: 32rpx;
			}
			p{
				text-decoration: 2em;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
			h3{
				font-size: 28rpx;
			}
		}
		.content-title{
			height: 160rpx;
			padding: 34rpx 22rpx;
			border-bottom: 20rpx solid #f1f1f1;
			box-sizing: border-box;
			
			h2{
				font-size: 32rpx;
				color: #333;
				margin-bottom: 10rpx;
			}
			p{
				color: #999999;
				font-size: 24rpx;
			}
		}
		.video-view {
			width: 100%;
		}
	}
</style>