realty/virgo.wzfrontend/yui_wx/components/device/control.vue

<template>
	<view class="control-index">
		<view class="control-off">
			<view class="control-off-icon">
				<uni-icons type="icon-yiping" custom-prefix="iconfont" color="#fff" size="20"></uni-icons>
			</view>
			<view class="control-off-label">{{title}}</view>
			<view class="control-off-btn">开门</view>
		</view>
		<view class="common-charts">
			<view class="common-chart-title">实时考勤</view>
			<view class="common-chart-box">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['title']
	}
</script>

<style lang="scss">
	.control-index {
		padding: 30rpx;

		.control-off {
			background: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
			display: flex;
			align-items: center;
		}

		.control-off-icon {
			width: 80rpx;
			height: 80rpx;
			background: $uni-primary;
			border-radius: 12rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.control-off-label {
			flex: 1;
			font-size: 32rpx;
			font-weight: 500;
			margin-left: 20rpx;
		}

		.control-off-btn {
			width: 120rpx;
			height: 60rpx;
			border-radius: 60rpx;
			color: #fff;
			background: $uni-primary;
			text-align: center;
			line-height: 60rpx;
		}
	}
</style>