TaicangPopulationApp2/components/ColorItem/index.vue

<template>
	<view class="color-item" @click="clickHouse()">
		<div class="left-color" :style="{ background: item.leftColor }"></div>
		<div class="rigth-color">
			<div :style="{ background: item.rightTopColor }"></div>
			<div class="rigth-bottom" v-show="item.color == 'HF' || item.color == 'NF'"></div>
		</div>
		<view v-show="showColorName" class="color-name">{{item.color}}</view>
		<view v-if="showBuildingName" class="color-building-name">{{item.name.replace("室","")}}</view>
		<!-- 红绿点 -->
		<view class="color-warn" v-show="showBuildingName">
			<view class="warn-item" style="background: red" v-show="item.daycount > 0"></view>
			<view class="warn-item" style="background: green" v-show="item.daycount == '0'"></view>
		</view>
		<!-- 四个is -->
		<view class="color-is-type" v-show="showBuildingName">
			<image src="../../static/images/isd.png" mode="" v-show="item.is_d"></image>
			<image src="../../static/images/isj.png" mode="" v-show="item.is_j"></image>
			<image src="../../static/images/isx.png" mode="" v-show="item.is_x"></image>
			<image src="../../static/images/isk.png" mode="" v-show="item.is_k"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ColorItem",
		props: {
			showBuildingName: {
				type: Boolean,
				default: false,
			},

			showColorName: {
				type: Boolean,
				default: true,
			},
			size: {
				type: String,
				default: '',
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			clickHouse() {
				if (!this.showBuildingName) return
				this.$emit('clickHouse', this.item)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.color-item {
		position: relative;
		width: 80rpx;
		height: 40rpx;
		border: 2rpx solid #fff;
		display: flex;
		align-items: center;

		.color-building-name {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			font-size: 30rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.color-warn {
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;

			&>view {
				height: 20rpx;
				width: 20rpx;
				border-radius: 50%;
				border: 1px solid #fff;
			}
		}

		.color-is-type {
			position: absolute;
			top: -20rpx;
			left: 0;

			&>image {
				height: 20rpx;
				width: 20rpx;
				margin-right: 6rpx;
			}
		}

		.left-color,
		.rigth-color {
			flex: 1;
			height: 100%;
		}

		.rigth-color {
			display: flex;
			flex-direction: column;
			border-left: 2rpx solid #fff;

			&>div {
				flex: 1;
				height: 100%;
			}

			.rigth-bottom {
				background: red;
				border-top: 2rpx solid #fff;
			}
		}

		.color-name {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: -40rpx;
			font-size: 28rpx;
		}
	}
</style>