lock_Maintenance/pages/Workbench/Workbench.vue

<template>
	<CpBg>
		<view class="container-top">
			<image src="@/static/backgroup.png"></image>
		</view>

		<view class="container-dict">
			<view class="container-dict-title" style="margin-left: 20rpx;">这是条公告消息，提升城市管理水平。</view>
		</view>

		<view class="container-card">
			<view class="container-info">报修信息</view>
			<view class="container-card-body">
				<view class="container-card-body-item" v-for="_ in 8">
					<image src='@/static/logo.png'></image>
					<view>日程安排</view>
				</view>
			</view>
		</view>
		
		<view class="container-card">
			<view class="container-info">投诉建议</view>
			<view class="container-card-body">
				<view class="container-card-body-item" v-for="_ in 8">
					<image src='@/static/logo.png'></image>
					<view>日程安排</view>
				</view>
			</view>
		</view>
		
		<view class="container-card">
			<view class="container-info">园区管理</view>
			<view class="container-card-body">
				<view class="container-card-body-item" v-for="_ in 4">
					<image src='@/static/logo.png'></image>
					<view>日程安排</view>
				</view>
			</view>
		</view>

	</CpBg>
</template>

<script setup>
	import CpBg from '@/components/Cp_Bg.vue';
</script>

<style lang="scss">
	.container{
		overflow-y: scroll;
	}
	
	$globalWidth: 600rpx;
	$buttonColor: #0e7ff5;

	.container-top {
		margin-top: 50rpx;

		image {
			width: $globalWidth;
			height: 300rpx;
		}
	}

	.container-dict {
		margin-top: 50rpx;
		width: $globalWidth;
		height: 80rpx;
		background-color: rgba(247, 251, 254, 1);
		line-height: 80rpx;
	}


	.container-card {
		width: 560rpx;
		border-radius: 20rpx;
		background-color: white;
		padding: 20rpx;
		margin-top: 40rpx;


	}
	
	// 报修信息
	.container-info{
		font-size: 35rpx;
		margin-bottom: 10rpx;
		width: 140rpx;
		height: 35rpx;
		border-bottom: 10rpx solid #b6d8fc;
		
	}
	
	.container-card-body{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		
		.container-card-body-item{
			flex: 1 1 25%; /* 每个子项占父容器的 25% 宽度 */
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			margin-top: 20rpx;
			image{
			
				width: 80rpx;
				height:80rpx;
			}
		}
	}
	

</style>