zhxy-desk/components/notification/index.vue

<template>
	<view class="notification">
		<view class="notification-title">
			<view class="notification-title-left">
				最新消息
			</view>
			<view class="notification-title-right">
			<!-- 	查看全部 <uni-icons type="forward" size="14"></uni-icons> -->
			</view>
		</view>
		
		<view class="notification-body">
			<view v-for="(item,index) in list" :key="index" class="notification-body-item">
				<view class="notification-body-item-color">

				</view>
				<view class="notification-body-item-content">
					{{item.title}}
				</view>
				<view class="notification-body-item-date">
					{{item.created_at}}
				</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	export default {
		props: {
			list: {
				default: () => [],
				type: Array
			}
		},
		data() {
			return {

			}

		},

		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	
	.notification {
		width: 100%;
		background: #ffffff;
		border-radius: 5.33px;
		box-shadow: 0px 0px 6.67px 0px rgba(147, 147, 147, 0.20);
		padding: 28rpx;
		box-sizing: border-box;

		.notification-title {
			display: flex;
			justify-content: space-between;
			color: #999;
			font-size: 24rpx;
			line-height: 25rpx;
			height: 50rpx;
		}
		.notification-body-item {
			 display: flex;
			 align-items: center;
			 font-size: 24rpx;
			 height: 50rpx;
			 line-height: 50rpx;
			 color: #999;
			 .notification-body-item-color {
				   width: 10rpx;
				   height: 10rpx;
				   border-radius: 50%;
				   margin-right: 20rpx;
				   background-color: #FDAD45;
			 }
			 .notification-body-item-content {
				  flex: 1;
			 }
		}
	}
</style>