ROBOT-APP/code/HBX/pages/native/notice/detailPage.nvue

<template>
	<view class="media-item view" @click="click">
		<view class="list">
			<view class="left" :style="{background:newsItem.alarmLevel == 0 ?'#0581FD' :newsItem.alarmLevel == 1 ? '#EDC436':newsItem.alarmLevel == 2 ? '#EA78B7' :'#E55959'}">
				<text class="icon" :style="{background:newsItem.alarmLevel == 0 ?'#0581FD' :newsItem.alarmLevel == 1 ? '#EDC436':newsItem.alarmLevel == 2 ? '#EA78B7' :'#E55959'}">&#xe607;</text>
			</view>
			<view class="right">
				<text class="title">{{newsItem.alarmType | alarmType}}</text>
				<text class="color3">[{{newsItem.alarmFor}}]{{newsItem.discernResult}}</text>
				<text class="color9">{{newsItem.createTime}}</text>
			</view>
			<uni-badge v-if="newsItem.readFlag == 0"  class="r-abdge" :custom-style="{background:'#EE0303'}"  :is-dot="true" text="1">
			</uni-badge>
		</view>
	</view>
</template>

<script>
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "iconfont",
		'src': "url('/static/iconfont.ttf')"
	})
	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {
						title: 1
					}
				}
			},
			type: {
				type: [Number, String],
				default: ''
			},
		},
		filters:{
			alarmType(val){
				return val == 1 ? '设备异常告警信息' :val == 2 ?'环境异常告警信息': val == 3 ? '机器人异常告警信息' :'其他告警信息'
			}
		},
		methods: {
			click() {
				this.$emit('click');
			},
			close(e) {
				e.stopPropagation();
				this.$emit('close');
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon {
		font-family: iconfont;
		font-size: 26px;
		color: #fff;
	}
	.media-item {
		
		.list {
			margin: 0rpx 0 0rpx 0;
			background: #fff;
			border-bottom:1px solid #E5E5E5;
			height: 180rpx;
			align-items: center;
			padding: 0 30rpx;
			flex-direction: row;
			position: relative;
			.r-abdge{
				position: absolute;
				right: 20rpx;
				color: #EE0303;
				top: 30rpx;
			}
			.left{
				width: 91rpx;
				height: 91rpx;
				background: #0581FD;
				border-radius: 91rpx;
				align-items: center;
				justify-content: center;
			}
			.right{
				margin-left: 22rpx;
				word-wrap: anywhere;
				
				.title{
					font-size: 32rpx;
					color: #000000;
					font-weight: bold;
				}
				.color3 {
					color: #666;
					overflow: hidden;
					lines:1;
					word-break: break-all;
					padding:5px 0;
					word-wrap: anywhere;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}
				.color9 {
					color: #8E8E8E;
					font-size: 22rpx;
				}
			}
		}
	}

	

	
</style>