消息中心

components/msg-list-item/msg-list-item.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="item-bg">
+		<view class="title-info-view">
+			<view class="title-view">
+				<image src="/static/mine/msg_icon.png" mode=""></image>
+				<view class="title">
+					{{props.title}}
+				</view>
+			</view>
+			<view class="time">
+				{{props.createTime}}
+			</view>
+		</view>
+
+		<view class="msg-content-view">
+			{{props.content}}
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	interface MsgItemProps {
+		content : string,
+		title : string,
+		createTime : string
+	}
+
+	const props = defineProps<MsgItemProps>()
+</script>
+
+<style lang="scss" scoped>
+	.item-bg {
+		background-color: white;
+		// margin: 30rpx 30rpx 0 30rpx;
+		margin-bottom: 30rpx;
+		padding: 30rpx;
+		border-radius: 10rpx;
+	}
+
+	.title-info-view {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.title-view {
+		display: flex;
+		align-items: center;
+	}
+
+	.title-view image {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 20rpx;
+	}
+
+	.title {
+		font-size: 30rpx;
+	}
+
+	.time {
+		font-size: 26rpx;
+		color: #999999;
+	}
+
+	.msg-content-view {
+		margin-top: 20rpx;
+		font-size: 26rpx;
+		color: #666666;
+	}
+</style>