tcm-cloud-uin-app/pages/ypczk/djfk/index/rectificationNotice.vue

<template>
	<view class="rectification_notice"  v-if="data!=null">
		<uni-title type="h1" title="整改通知" align="center" class="rectification_notice_title"></uni-title>
		<view class="rectification_notice_content" v-for="(item,index) in noticeList">
			{{(index+1)+". "+item}}
		</view>
		<view class="rectification_notice_deadline">
			整改截止日期: {{data.endTime}}
		</view>
		<view class="rectification_notice_date">
			{{props.data.createTime}}
		</view>
		<view class="rectification_notice_button">
			<button class="button" @click="know">我知道了</button>
		</view>
	</view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { computed } from "vue";
const props=defineProps({
	know:Function,
	data:Object
})

const noticeList=computed(()=>{
	return props.data.rectificationItems.slice(0,-1).split("^^")
})

</script>

<style>
.rectification_notice{
	height: 800rpx;
	width: 600rpx;
	background-image: url('../../../../static/rectification_notice.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	border-radius: 10rpx;
	.rectification_notice_title{
		padding-top: 110rpx;
	}
	.rectification_notice_content{
		padding: 10rpx 50rpx;
		font-size: 16px;
		font-weight: 400;
		text-align: left;
		word-break:break-all;
	}
	.rectification_notice_deadline{
		padding: 80rpx 50rpx 80rpx;
		font-size: 12px;
	}
	.rectification_notice_date{
		padding-right: 60rpx;
		font-size: 12px;
		text-align: right;
	}
	.rectification_notice_button{
		padding: 40rpx 50rpx;
		.button{
			margin-top: 10rpx;
			border-radius: 5px;
			color: rgba(255, 255, 255, 1);
			background:  linear-gradient(90deg, rgba(190, 163, 117, 1) 0%, rgba(190, 163, 117, 0.8) 100%);
		}
	}
}
</style>