jsh_erp_app/pages/index/components/notice-item.vue

<template>
	<view class="notice-item">
		<view class="item-head">
			<view class="item-head-msg">
				<view class="image-box">
					<u-badge type="error" :isDot="true" :show="!item.isRead" :absolute="true" :offset="[-2,-2]"></u-badge>
					<image :src="img" mode=""></image>
				</view>
				<view>{{typeText}}</view>
			</view>
			<view class="time-box">
				{{$u.timeFormat(item.time, 'hh:MM:ss')}}
			</view>
		</view>
		<view class="item-cont">
			您有1条新的拣货任务（单号：{{item.sn}}），请点击查看并及时处理！
		</view>
		<view class="item-footer">
			<view>查看详情</view>
			<u-icon name="arrow-right" color="#7E838D"></u-icon>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		computed:{
			img() {
				let src = ""
				if(this.item.type == 1) {
					src = require('@/static/image/home/icon-cgrk.png')
				}else if(this.item.type == 2) {
					src = require('@/static/image/home/icon-chcx.png')
				}
				return src
			},
			typeText() {
				let text = ""
				if(this.item.type == 1) {
					text = '采购入库'
				}else if(this.item.type == 2) {
					text = '存货查询'
				}
				return text
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice-item {
		border-radius: 16px;
		background: #FFF;
		padding: 24rpx 24rpx 0;
		margin-bottom: 24rpx;
		.item-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-msg {
				display: flex;
				align-items: center;
				color: #333;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-weight: bold;
				.image-box {
					position: relative;
					margin-right: 24rpx;
					image {
						width: 48rpx;
						height: 48rpx;
						z-index: 2;
					}
					::v-deep .u-badge {
						z-index: 3;
					}
				}
			}
		}
	
		.item-cont {
			color: #666;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-weight: 400;
			padding: 17rpx 0 24rpx;
			border-bottom: 1px solid #F4F4F4;
		}
		.item-footer {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-weight: 400;
		}
	}
</style>