smart_storage_app/pages/home-page/alarm/components/alarmevent.vue

<template>
	<view class="event-card">
		<u-checkbox-group @change="checkboxGroupChange" size="28">
			<view class="flex_row">
				<view class="state">
					<view class="alarm-content"> {{ formatValue("string", alarmContent) }} </view>
					<view class="status">
						{{ title }}
					</view>
				</view>
			</view>

			<view class="flex_row">
				<view class="state">
					<text class="text-label">{{ $t('homePage.alarm.status') }}：</text>
					<text :style="{ color: state === '未确认' ? '#FF0000' : '#4C9CE7' }">{{ state }}</text>
				</view>
			</view>

			<view class="flex_row">
				<view class="alarm-time">
					<text class="text-label">{{ $t('homePage.alarm.station') }}：</text>
					{{ formatValue("string", belongs) }}
				</view>
			</view>
			<view class="flex_row">
				<view class="alarm-time">
					<text class="text-label">{{ $t('homePage.alarm.device') }}：</text>
					{{ formatValue("string", name) }}
				</view>
			</view>
			<view class="flex_row">
				<text class="text-label">{{ $t('homePage.alarm.alarmTime') }}：</text>
				{{ formatValue("string", alarmTime) }}
			</view>
			<view class="flex_row">
				<text class="text-label">{{ $t('homePage.alarm.confirmTime') }}：</text>
				{{ formatValue("string", confirmTime) }}
			</view>
			<view class="flex_row">

				<view class="alarm-time">
					<text class="text-label">{{ $t('homePage.alarm.confirmer') }}：</text>

					<text>{{ formatValue("string", confirmPeople) }}</text>
				</view>
			</view>
		</u-checkbox-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			check: false,
			choice: [],
			transfer: {
				width: "110rpx",
				height: "35rpx",
				padding: 0,
				margin: 0,
				fontSize: "24rpx",
				color: "#4C9CE7",
				backgroundColor: "white",
				marginRight: "10rpx",
			},
			formatValue: this.$formatValue

		}
	},
	created() { },
	props: [
		"title",
		"state",
		"alarmTime",
		"deviceType",
		"belongs",
		"confirmPeople",
		"confirmTime",
		"alarmContent",
		"conversionStatus",
		"pid",
		"name"
	],
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			this.$emit("choice", e.name)
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) { },
	},
};
</script>

<style lang="scss" scoped>
.event-card {
	width: 100%;
	margin-top: 30rpx;
	padding: 20rpx;

	box-sizing: border-box;
	background: #ffffff !important;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
	border-radius: 8px;

	.state {
		display: flex;
		width: 100%;

		.alarm-content {
			flex: 1;
			font-weight: 700;
			color: #282828;
		}
		.status {
			width: 80px;
			text-align: right;
			color: #009458;
		}
	}


	.flex_row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
		color: #333333;
		width: 100%;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	text {
		color: #979797;
	}

	.text-label {
		color: #999999;
		display: inline-block;
		// width: 140rpx;
		text-align: right;
	}
}
</style>