zj-mobile-oa/pages/noticeFile/noticeFile.vue

<template>
	<scroll-view>
		<view class="detail content">
			<view class="title">通知公告</view>
			<u-line length="95%" margin="auto" color="#000"/>
			
			<scroll-view scroll-y="true" style="padding: 30rpx 60rpx;box-sizing: border-box;height: calc(100vh - 900rpx);">
				<view v-for="(it,idx) in info" class="detailItem">
					<view>{{it.subTitle}}</view>
					<view>{{it.time}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="overview content">
			<view class="title">已发布文件</view>
			<view class="cardList">
				<view v-for="(it,idx) in cardList" :key="idx" :style="{'background-color':it.color}" class="card">
					<view :style="{'background': it.iconColor}">
						<image :src="it.icon"></image>
					</view>
					<view>{{it.text}}</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {ref} from "vue";
	
	const info = ref([
		{
			"subTitle": "深化政治监督 提升履职能力",
			"time": "2026-50-10"
		},
		{
			"subTitle": "关于8月份宣传报道情况的通报及 9月份宣传重点安排",
			"time": "2026-50-10"
		}
	])
		
	const cardList = ref([
		{
			icon: "../../static/notice/u31.svg",
			iconColor: "linear-gradient(to bottom, rgb(0,196,213), rgb(0,218,151))",
			text: "党建工作",
			color: "rgb(200,245,225)"
		},
		{
			icon: "../../static/notice/u32.svg",
			iconColor: "linear-gradient(to bottom, rgb(53,153,253), rgb(137,100,244))",
			text: "委发文件",
			color: "rgb(255,219,224)"
		},
		{
			icon: "../../static/notice/u33.svg",
			iconColor: "linear-gradient(to bottom, rgb(0,136,255), rgb(0,181,255))",
			text: "行政工作",
			color: "rgb(207,232,245)"
		},
		{
			icon: "../../static/notice/u34.svg",
			iconColor: "linear-gradient(to bottom, rgb(226,76,246), rgb(254,86,224))",
			text: "相关知识",
			color: "rgb(255,236,207)"
		}
	])
</script>

<style lang="scss" scoped>
	body{
		background-color: #0063d0;
	}	
	.content{
		margin: 50rpx;
		background-color: #fff;
		border-radius: 20rpx;
		width: calc(100vw - 100rpx);
	}
	.title{
		padding: 30rpx 60rpx;
		font-size: 50rpx;
		font-weight: 600;
	}
	.detail{
		height: calc(100vh - 750rpx);
		.detailItem{
			display: flex;
			justify-content: space-between;
			font-size: 40rpx;
			>uni-view{
				margin: 20rpx 0;
			}
		}
	}
	.overview{
		height: 500rpx;
		.cardList{
			height: 50%;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-around;
			.card{
				width: 23%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				border-radius: 10rpx;
				>uni-view:nth-of-type(1){
					width: 150rpx;
					height: 150rpx;
					margin-right: 100rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				uni-image{
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
	}
</style>