header-org.vue 1.43 KB
<template>
	<view class="header-org">
		<view @click="$emit('openOrg')" class="org-item">
			<view class="u-flex org-contact"><text class="text">组织关系</text></view>
			<view class="u-flex org-device">
				<image class="device-image" :src="imageSrc"></image>
				<text class="device-text">摄像头数:{{ total }}</text>
			</view>
		</view>
		<view class="org-item">
			<image class="image" src="/static/arrow-right.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			total: Number,
			imageSrc: String
		}
	}
</script>

<style lang="scss" scoped>
	.header-org {
		width: 750rpx;
		height: 150rpx;
		margin-top: 1rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		z-index: 999999;
		top: -1rpx;

		.org-item {
			width: 350rpx;
			height: 200rpx;

			.org-contact {
				flex-direction: row;
				margin-top: 26rpx;
				margin-left: 15rpx;

				.text {
					color: #333333;
					font-size: 15px;
					margin-left: 14rpx;
				}
			}

			.org-device {
				margin-top: 23rpx;
				margin-left: 15rpx;
				flex-direction: row;

				.device-image {
					margin-left: 14rpx;
					width: 30rpx;
					height: 30rpx;
				}

				.device-text {
					margin-left: 10rpx;
					color: #666666;
					font-size: 12px;
				}
			}

			.image {
				width: 6px;
				height: 10px;
				float: right;
				margin-right: 34rpx;
				margin-top: 37rpx;
			}
		}
	}
</style>