smartSchoolClockApp/pages/ruleSet/ruleSet.vue

<template>
	<view class="container">
		<!-- 头部新增规则区域 -->
		<view class="add" @click="toPageAddRules">
			<view class="icon">
				<img src="../../static/add.png">
			</view>
			<view class="title">
				新增规则
			</view>
		</view>

		<!-- 具体规则区域 -->
		<view class="rules">
			<!-- 每一个规则区域 -->
			<view class="box" v-for="item in list" :key="item.id" @click="toPageEditRules(item)">
				<view class="box_title">
					<view class="icon">
						<img src="../../static/my1.png">
					</view>
					<view class="msg">
						{{item.ruleName}}
					</view>
					<view class="right">
						<img src="../../static/right.png">
					</view>
				</view>

				<view class="box_info">
					考勤组：{{item.group}}
				</view>

				<view class="box_info">
					时 间：{{item.time}}
				</view>

				<view class="box_info">
					打卡地点：{{item.place}}
				</view>

				<view class="box_info">
					提前通知：{{item.notes}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						group: "全体老师",
						time: "周一、周二、周三、...，09:00-17:00",
						place: "新建区南昌交通学院",
						notes: "提前15分钟通知",
						ruleName:"课间操打卡规则"
					},
					{
						id: 2,
						group: "全体同学",
						time: "周一、周二、周三、...，09:00-17:00",
						place: "高新区南昌交通学院",
						notes: "提前10分钟通知",
						ruleName:"课间操打卡规则"
					},
					{
						id: 3,
						group: "全体老师同学",
						time: "周一、周二、周三、...，09:00-17:00",
						place: "红谷滩区南昌交通学院",
						notes: "提前5分钟通知",
						ruleName:"课间操打卡规则"
					},
				]

			};
		},
		methods: {
			// 点击每一项跳转编辑规则页面
			toPageEditRules(item) {
				// console.log(item);
				let info = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/editRules/editRules?info=${info}`
				})
			},
			// 新增规则跳转页面回调
			toPageAddRules() {
				uni.navigateTo({
					url: "/pages/addRules/addRules"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 30rpx;

		.add {
			margin-bottom: 30rpx;
			display: flex;
			width: 750rpx;
			height: 110rpx;
			background-color: #fff;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 88rpx;

				img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.title {
				line-height: 110rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #0082FC;
			}
		}

		.rules {
			width: 750rpx;

			.box {
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				height: 348rpx;
				background-color: #fff;

				.box_title {
					display: flex;
					height: 90rpx;

					.icon {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 35rpx;
							height: 35rpx;
						}
					}

					.msg {
						flex: 10;
						line-height: 90rpx;
						font-size: 30rpx;
						font-weight: 400;
					}

					.right {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 16rpx;
							height: 25rpx;
						}
					}
				}

				.box_info {
					margin: 15rpx 0;
					height: 44rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #808080;
				}
			}
		}
	}
</style>