qujiancesu/pages/pages/camera.vue

<template>
	<view class="camerapage">
		<view class="title">摄像头设置</view>
		<view class="box">
			<video class="video" object-fit='contain' src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
		<!-- 	<sjy-vidbr :option="hp1option" bColor="#ffffff"></sjy-vidbr> -->
	
			<view class="workbench">
				<view class="direction">
					<view class="item" v-for="(item,index) in 4" :class="{on:keyindex==index+1}"
						@touchstart="press(index+1)" @touchend="release()">
						<view class="icon">
							<uv-icon name="arrow-up-fill" :color="keyindex==index+1?'#fff':'#4D7BFF'"
								size="20rpx"></uv-icon>
						</view>
					</view>

				</view>
				<view class="key">
					<view class="item" :class="{on:keyindex==5}" @touchstart="press(5)" @touchend="release()">
						<image :src="`/static/camera/${keyindex==5?11:1}.png`"></image>
						调焦 -
					</view>
					<view class="item" :class="{on:keyindex==6}" @touchstart="press(6)" @touchend="release()">
						<image :src="`/static/camera/${keyindex==6?22:2}.png`"></image>
						调焦 +
					</view>
					<view class="item" :class="{on:keyindex==7}" @touchstart="press(7)" @touchend="release()">
						<image :src="`/static/camera/${keyindex==7?33:3}.png`"></image>
						聚焦 -
					</view>
					<view class="item" :class="{on:keyindex==8}" @touchstart="press(8)" @touchend="release()">
						<image :src="`/static/camera/${keyindex==8?44:4}.png`"></image>
						聚焦 +
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const keyindex = ref("")
	const hp1option = ref({
		width: 426 * 1.5,
		height: 240 * 1.5,
	})

	function load() {
		console.log('预警信息load')
	}

	function hide() {
		console.log('预警信息hide')
	}

	function show() {
		console.log('预警信息show')
	}

	function press(index) {
		keyindex.value = index;
	}

	function release() {
		keyindex.value = "";
	}

	defineExpose({
		load,
		hide,
		show
	})
</script>

<style scoped lang="scss">
	.camerapage {
		padding: 15rpx;

		.title {
			text-align: center;
			font-weight: 500;
			font-size: 11rpx;
			color: #666666;
		}

		.workbench {
			padding: 15rpx 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;


			.key {

				display: flex;
				gap: 20rpx 15rpx;
				width: 265rpx;
				flex-wrap: wrap;

				.item {


					background: linear-gradient(180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
					box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0, 0, 0, 0.21), inset 0rpx 1rpx 1rpx 0rpx #FFFFFF;
					display: flex;
					align-items: center;
					width: 125rpx;
					padding: 10rpx 15rpx;
					justify-content: center;
					border-radius: 100rpx;
					font-weight: 500;
					font-size: 11rpx;
					color: #223457;

					&.on {
						background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
						box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.33);
						color: #fff;
					}

					image {
						width: 16rpx;
						height: 16rpx;
						margin-right: 15rpx;

					}
				}
			}

			.direction {
				width: 130rpx;
				height: 130rpx;


				background: linear-gradient(180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
				border: 1rpx solid #d2d2d2;
				border-radius: 139rpx;
				position: relative;
				overflow: hidden;
				transform: rotate(45deg);
				position: relative;

				&::after {
					content: "";
					position: absolute;
					width: 54rpx;
					height: 54rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border-radius: 54rpx;
					z-index: 2;
					background: #fff;
					box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0, 0, 0, 0.21), inset 0rpx 1rpx 15rpx 0rpx rgba(0, 0, 0, 0.21);
				}

				.item {
					width: 50%;
					height: 50%;

					position: absolute;
					transform-origin: 100% 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					&.on {
						background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
						box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.33);
					}

					.icon {
						transform: rotate(-45deg);
						// margin-left: 10rpx;
						// margin-top: 10rpx;
					}

					&:nth-of-type(2) {
						transform: rotate(90deg);
					}

					&:nth-of-type(3) {
						transform: rotate(180deg);
					}

					&:nth-of-type(4) {
						transform: rotate(-90deg);
					}

				}

			}
		}

		.box {
			background: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			margin-top: 15rpx;
			position: relative;

			._video_r1 {}


			.video {
				width: 100%;
				height: 240rpx;
				border-radius: 8rpx 8rpx 0 0;
			}

		}
	}
</style>