talk_appAmin/pages/Friend/systemnotification.vue

<!-- 系统通知 -->
<template>
	<navbar_neadVue title="系统通知"></navbar_neadVue>

	<view v-for="(item,index) in arrcontent" :key="index">
		<view class="timeview">
			<text>{{item.time}}</text>
		</view>

		<view style="display: flex;margin-left: 32rpx;margin-top: 24rpx;">
			<view class="imageview">
				<image v-if="item.leng === '系统通知'" src="../../static/images/sign/message.png" />
				<image v-if="item.leng === '审核通知'" src="../../static/images/sign/message1.png" />
			</view>
			<view class="contentview">
				<text class="viewtitle">{{item.title}}</text>
				<text class="viewtext">
					{{item.content}}
				</text>
				<text v-if="item.type=== 1" @click="haveGoTo()" class="viewtexttypesuccsee">
					{{item.typecontent}}
				</text>
				<text v-if="item.type === 2" class="viewtexttypelose">
					{{item.typecontent}}
				</text>
				
				<view style="margin-top: 24rpx;"></view>
			</view>
			
		</view>
	</view>

</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import navbar_neadVue from '@/pages/common/navbar/navbar_nead.vue';

	const arrcontent = reactive([{
			id: 1,
			leng: "系统通知",
			time: "2023.06.01 09:00",
			title: "系统通知",
			content: '尊敬的用户，您好，因您涉嫌违反平台规定，现对您进行禁言处理禁言时长：3天',
			type: "",
			typecontent: ""
		},
		{
			id: 2,
			leng: "系统通知",
			time: "2023.06.01 09:00",
			title: "活动公告",
			content: '尊敬的用户，您好，您参加的《志愿者服务》活动即将开始，请您注意时间，及时参加。',
			type: 1,
			typecontent: "立即查看>"
		},
		{
			id: 3,
			leng: "系统通知",
			time: "2023.06.01 09:00",
			title: "系统通知",
			content: '尊敬的用户，您好，因您涉嫌违反平台规定，现对您进行禁言处理禁言时长：3天',
			type: 2,
			typecontent: "未通过原因：内容存在铭感词"
		},
		{
			id: 4,
			leng: "审核通知",
			time: "2023.06.01 09:00",
			title: "话题审核",
			content: '尊敬的用户，您好，您发布的话提“关于工作和生活”审核未通过。',
			type: 2,
			typecontent: "未通过原因：内容存在铭感词"
		},
	])

	// 成功 立即查看>
	function haveGoTo() {

	}
</script>

<style scoped>
	@import '@/pages/common/navbar/navbar.css';

	.timeview {
		width: 192rpx;
		height: 28rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 0.1;
		background: #000000;
		margin: auto;
		margin-top: 48rpx;
	}

	.timeview>text {
		font-weight: Regular;
		width: 166rpx;
		height: 17rpx;
		font-size: 20rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 28rpx;
		display: block;
		margin: auto;
		padding-top: 2rpx;
	}

	.imageview {
		width: 80rpx;
		height: 80rpx;
		/* background-color: #000000; */
	}

	.imageview>image {
		width: 80rpx;
		height: 80rpx;
	}

	.contentview {
		width: 490rpx;
		/* height: 190rpx; */
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #ffffff;
		margin: auto;
		margin-right: 130rpx;
	}

	.viewtitle {
		font-weight: Regular;
		font-weight: 600;
		width: 122rpx;
		height: 32rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		display: block;
		margin-left: 24rpx;
		margin-top: 23rpx;
	}

	.viewtext {
		color: #000000;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 28rpx;
		text-align: left;
		line-height: 36rpx;
		margin-top: 11rpx;
		margin-right: 46rpx;
		display: block;
		margin-left: 24rpx;
	}

	.viewtexttypesuccsee {
		font-weight: Regular;
		width: 118rpx;
		height: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #3477FC;
		/* margin-top: 11rpx; */
		display: block;
		margin-left: 24rpx;
	}

	.viewtexttypelose {
		font-weight: Regular;
		width: 319rpx;
		height: 25rpx;
		font-size: 24rpx;
		text-align: left;
		color: #FA3939;
		/* margin-top: 12rpx; */
		display: block;
		margin-left: 24rpx;
	}
</style>