diff --git a/index.vue b/index.vue
new file mode 100644
index 0000000..38c00fd
--- /dev/null
+++ b/index.vue
@@ -0,0 +1,94 @@
+<template>
+	<view>
+		<view class="begin">我的班级</view>
+		<view class="page-body">
+			<view class="btn-area">
+				<navigator url="/pages/index/question/question" hover-class="navigator-hover">
+					<button type="default" class="btn-with-icon">
+						<view class="btn-content">
+							<image class="btn-icon" src='../../static/class1.png'></image>
+							<view class="shangke">上课次数：9</view>
+						</view>
+						<view class="btn-text">签到模拟</view>
+						<image src='../../static/forw.png' class="forward-icon"></image>
+					</button>
+				</navigator>
+				<navigator url="/pages/index/attendance/attendance" hover-class="navigator-hover">
+					<button type="default" class="btn-with-icon">
+						<view class="btn-content">
+							<image class="btn-icon" src='../../static/class2.png'></image>
+							<view class="shangke">上课次数：5</view>
+						</view>
+						<view class="btn-text">点名模拟</view>
+						<image src='../../static/forw.png' class="forward-icon"></image>
+					</button>
+				</navigator>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		methods: {}
+	}
+</script>
+
+<style>
+	.begin{
+			font-size: 38rpx;
+			font-weight: bold;
+			margin-top: 10px;
+			margin-bottom: 10px;
+			margin-left: 8px;
+	}
+	.page-body {
+			display: flex;
+			justify-content: center;
+	}
+	.btn-area {
+			width: 90%;
+			height: 320rpx;
+	}
+	.btn-with-icon {
+			height: 95px;
+			padding-left: 10rpx;
+			border-radius: 5px;
+			display: flex;
+			align-items: center; /* 使内容在垂直方向上居中 */
+			justify-content: space-between; /* 图标与文本分开并推到两端 */
+			margin-bottom: 18px; /* 在每个按钮之间添加间隔 */
+	}
+	.btn-content {
+			display: flex;
+			flex-direction: column; /* 垂直排列 */
+			align-items: flex-start; /* 靠左对齐 */
+	}
+	.btn-icon {
+			width: 50rpx;
+			height: 50rpx;
+			margin-top: 20rpx;
+			margin-bottom: 5rpx; /* 图标和上课次数之间的间距 */
+	}
+	.shangke {
+			font-size: 12px;
+			margin-top: auto; /* 将上课次数推到底部 */
+	}
+	.btn-text {
+			text-align: left; /* 文字水平靠左 */
+			font-size: 40rpx;
+			margin-left: 60rpx; /* 根据需要调整左边距，以使其与图标齐平 */
+			margin-top: 0; /* 可根据需要调整上边距 */
+	}
+	.forward-icon {
+			width: 32rpx;
+			height: 32rpx;
+			margin-left: auto; /* 推到右侧 */
+	}
+
+</style>
+
+