微信小程序首页酷炫宫格布局设计 - 功能模块跳转

发布通知 管理通知 发布签到 管理签到 发布考试 管理考试 成绩录入 管理成绩

/* 轮播图样式 */ .swiper-container { width: 100%; height: 400rpx; margin-top: 40rpx; } .swiper { width: 100%; height: 100%; } .swiper-item { width: 100%; height: 100%; } .swiper-item image { width: 100%; height: 100%; object-fit: fill; }

/* 宫格布局样式 */ .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto auto; grid-column-gap: 20rpx; grid-row-gap: 20rpx; margin-top: 20rpx; padding: 20rpx; } .grid-item { text-align: center; font-size: 28rpx; color: #333; } .grid-icon { width: 100rpx; height: 100rpx; object-fit: fill; margin-bottom: 10rpx; }