pingpu_H5/pages/camera/details.vue

<template>
	<!-- 可视监控详情 -->
	<view class="page-panel">
		<!-- 监控区域 -->
		<view class="monitor-area">
			<image src="@/static/demo/demo1.png" mode="widthFix"></image>
		</view>
		<!-- 监控工具 -->
		<view class="monitor-tools">
			<view class="row-center tools-btn">
				<text>+</text>
			</view>
			<view class="tools-control">
				<view class="slice up"></view>
				<view class="slice down"></view>
				<view class="slice left"></view>
				<view class="slice right"></view>
				<view class="tools-btn"></view>
			</view>
			<view class="row-center tools-btn">
				<text>━</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	// 监控区域
	.monitor-area {
		overflow: hidden;
		height: 510rpx;
		border-radius: 5rpx;
		margin-bottom: 24rpx;
	}

	.monitor-tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
	}

	.tools-control {
		position: relative;
		width: 305rpx;
		height: 305rpx;
		margin: 0 60rpx;
		background-image: linear-gradient(to right, #323e4d, #444d5e);
		border-radius: 100%;

		.tools-btn {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		.slice {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 97rpx;
			height: 97rpx;
			margin: auto;

			&:before {
				content: '';
				display: block;
				width: 0;
				margin-right: -24rpx;
				border-color: transparent transparent transparent $color-primary;
				border-width: 24rpx;
				border-style: solid;
				transform: scaleY(0.6);
			}

			&:active {
				opacity: .3;
			}
		}

		.up {
			top: 0;
			left: 0;
			right: 0;
			transform: rotateZ(-90deg);
		}

		.down {
			bottom: 0;
			left: 0;
			right: 0;
			transform: rotateZ(90deg);
		}

		.left {
			top: 0;
			bottom: 0;
			left: 0;
			transform: rotateZ(180deg);
		}

		.right {
			top: 0;
			bottom: 0;
			right: 0;

		}
	}

	.tools-btn {
		width: 110rpx;
		height: 110rpx;

		font-size: 40rpx;
		font-weight: bold;
		color: $color-primary;
		line-height: 1;

		background: #434C5D;
		border-radius: 100%;

		&:active {
			text {
				opacity: .3;
			}

		}
	}
</style>