pingpu_H5/pages/warn/index.vue

<template>
	<!-- 预警信息 -->
	<view>
		<view class="ui-card warn-item">
			<view class="title">140951害虫数量总和预警</view>
			<view class="subtitle">设备ID：87845748629</view>
			<view class="paragraph">介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字</view>
			<text class="time">2022-08-26 12:01:46</text>
		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.warn-item {
		padding: 26rpx 24rpx;

		.title {
			font-size: $font-size-title;
			color: $color-title;
			line-height: $line-height-title;
		}

		.subtitle {
			margin-top: 10rpx;
			font-size: $font-size-subtitle;
			color: $color-subtitle;
			line-height: $line-height-subtitle;
		}

		.paragraph {
			margin: 10rpx 0 18rpx;
			font-size: $font-size-paragraph;
			color: $color-paragraph;
			line-height: $line-height-paragraph;
		}

		.time {
			padding: 6rpx 15rpx;
			font-size: 28rpx;
			color: #317AFD;
			line-height: 1;
			background: rgba(49, 122, 253, .3);
			border-radius: 4rpx;
		}
	}
</style>