smartSchoolClockApp/pages/my/my.vue

<template>
	<view class="container">
		<!-- 每一个选项 -->
		<view class="box" v-for="item in list" :key="item.id" @click="handleClick(item)">
			<view class="icon">
				<img :src="item.icon">
			</view>
			<view class="title">
				{{item.title}}
			</view>
			<view class="right">
				<img src="../../static/right.png">
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						icon: "../../static/my1.png",
						title: "规则设置",
						url: "/pages/ruleSet/ruleSet"
					},
					{
						id: 2,
						icon: "../../static/my2.png",
						title: "权限设置",
						url: "/pages/powerSet/powerSet"
					},
					{
						id: 3,
						icon: "../../static/my3.png",
						title: "打卡记录",
						url: "/pages/cardRecord/cardRecord"
					},
					{
						id: 4,
						icon: "../../static/my4.png",
						title: "考勤组",
						url: "/pages/group/group"
					},
				]
			};
		},
		methods: {
			handleClick(item) {
				// console.log(item.url);
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>

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

		.box {
			display: flex;
			width: 750rpx;
			height: 110rpx;
			line-height: 110rpx;

			background-color: #fff;

			.icon {
				flex: 1;
				text-align: center;

				img {
					margin-top: 36rpx;
					width: 42rpx;
					height: 38rpx;
				}
			}

			.title {
				flex: 5;
				font-size: 30rpx;
				font-weight: 400;
			}

			.right {
				flex: 1;
				text-align: center;

				img {
					width: 24rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>