diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..514e032
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/uni_modules/
diff --git a/App.vue b/App.vue
index 99f6e28..36ae508 100644
--- a/App.vue
+++ b/App.vue
@@ -12,6 +12,9 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	/*每个页面公共css */
+	.container{
+		padding: 0 30rpx;
+	}
 </style>
diff --git a/manifest.json b/manifest.json
index e4ff80b..a0f0664 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,72 +1,72 @@
-{
-    "name" : "word-pratice",
-    "appid" : "__UNI__7D81F71",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
-    /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        /* 模块配置 */
-        "modules" : {},
-        /* 应用发布信息 */
-        "distribute" : {
-            /* android打包配置 */
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ]
-            },
-            /* ios打包配置 */
-            "ios" : {},
-            /* SDK配置 */
-            "sdkConfigs" : {}
-        }
-    },
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "",
-        "setting" : {
-            "urlCheck" : false
-        },
-        "usingComponents" : true
-    },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
-    },
-    "uniStatistics" : {
-        "enable" : false
-    },
-    "vueVersion" : "2"
-}
+{
+    "name" : "word-pratice",
+    "appid" : "__UNI__7D81F71",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "2"
+}
diff --git a/pages.json b/pages.json
index b85d12b..e2cdd65 100644
--- a/pages.json
+++ b/pages.json
@@ -3,7 +3,7 @@
 		{
 			"path": "pages/home/index",
 			"style": {
-				"navigationBarTitleText": "单词学习APP"
+				"navigationBarTitleText": "单词学习宝典"
 			}
 		}
 	    ,{
@@ -14,7 +14,17 @@
                 "enablePullDownRefresh": false
             }
             
-        }
+        },
+		{
+			"path":"pages/answer-detail/answer-detail",
+			"style" :
+			{
+			    "navigationBarTitleText": "请选择单词正确的中文含义",
+			    "enablePullDownRefresh": false,
+				"backgroundColor":"#f6f8fa",
+				"navigationBarBackgroundColor":"#FFFFFF"
+			}
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/answer-detail/answer-detail.vue b/pages/answer-detail/answer-detail.vue
new file mode 100644
index 0000000..b762cb7
--- /dev/null
+++ b/pages/answer-detail/answer-detail.vue
@@ -0,0 +1,272 @@
+<template>
+	<view class="answer-root">
+		<view class="container" v-if="wordData.wordName">
+			<!-- 题目选项卡模块开始 -->
+			<view class="answer-box" >
+				<view class="title">
+					<text class="left-title">单选题（难度等级{{wordData.level}}）</text>
+					<text class="right-condition">
+						<text>{{pageSize}}</text>
+						<text>/{{pageNum}}</text>
+					</text>
+				</view>
+				<view class="content">
+					<view>{{wordData.wordName}}</view>
+					<view>
+						<text>音标：{{wordData.phonetic}}</text>
+						<text>读音：{{wordData.pronunciation}} </text>
+					</view>
+				</view>
+				<view class="select-item">
+					<text v-for="(item,index) in wordData.options" :key="item.itemId"
+						:class="{'isSelected':index == selectIndex}"
+						@click="getSelectedItem(item,index)">{{item.itemId}} {{item.itemContent}}</text>
+
+				</view>
+
+
+			</view>
+			<!-- 题目选项卡模块结束 -->
+
+			<!-- 翻页按钮模块开始 -->
+			<view class="page-btn">
+				<view class="btn">
+					<button type="default" @tap="previous" v-if="pageSize != 1">
+						上一题
+					</button>
+					<button type="default" @tap="next" v-if="pageSize != 10">
+						下一题
+					</button>
+					<button type="default" @tap="messageToggle('error')" v-if="pageSize == 10">
+						提交！
+					</button>
+				</view>
+
+			</view>
+			<!-- 翻页按钮模块结束 -->
+		</view>
+		
+		<view  class="noData" v-else-if="!wordData.worName">
+			<text>暂无数据~</text>
+		</view>
+		<view>
+		
+			<!-- 提示窗示例 -->
+			<uni-popup ref="alertDialog" type="dialog">
+				<uni-popup-dialog :type="msgType" cancelText="返回首页" confirmText="继续下一难度" title="通知"
+					:content="resultDialog" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
+			</uni-popup>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				selectIndex: -1,
+				pageSize: 1,
+				pageNum: 10,
+				level: '',
+				wordData:{},
+				type: 'center',
+				msgType: 'success',
+				messageText: '这是一条成功提示',
+				value: '',
+				resultDialog: '您的成绩合格！'
+			};
+		},
+		methods: {
+			// 获取当前选中的选项
+			getSelectedItem(item, itemIndex) {
+				this.selectIndex = itemIndex
+				if (item.right) {
+					console.log('选择正确')
+				}
+				console.log(item, '选中的项')
+			},
+
+			// 获取上一题
+			previous() {
+				if (this.pageSize > 1) {
+					this.pageSize--
+				}
+
+				console.log('回到上一题')
+			},
+
+			// 获取下一题
+			next() {
+				if (this.pageSize < 10) {
+					this.pageSize++
+				}
+				this.getApiQuestionData()
+				console.log('跳转到下一题')
+			},
+			// 提交成功获取的信息
+			messageToggle(type) {
+				this.msgType = type
+				this.$refs.alertDialog.open()
+			},
+			//确认提交
+			dialogConfirm() {
+				console.log('点击确认')
+				this.$refs.alertDialog.open()
+			},
+			// 关闭提交窗口
+			dialogClose() {
+				uni.switchTab({
+					url: "../../pages/home/index"
+				})
+				console.log('点击关闭')
+			},
+			
+			// 调用云函数获取数据
+			async getApiQuestionData(){
+				try{
+					const {result} = await uniCloud.callFunction({
+						name:'provideQuestion',
+						data:{level:this.level,pageSize:this.pageSize}
+					})
+					if(result.data[0] != undefined){
+						this.wordData = result.data[0].wordData
+						console.log('题目数据获取',result.data[0])
+					}
+					
+				}catch(e){
+					console.error(e)
+					//TODO handle the exception
+				}
+			
+				
+			}
+
+		},
+		onLoad(option) {
+			this.level = option.wordId;
+				this.getApiQuestionData()
+			console.log('获取到', this.level)
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #f2f5f8;
+
+	}
+
+	.answer-root {
+		position: relative;
+		top: 60rpx;
+
+		.answer-box {
+			word-wrap: break-word;
+			word-break: break-all;
+			box-sizing: border-box;
+			padding: 30rpx;
+			border-radius: 20rpx;
+			width: 100%;
+			box-shadow: 5px 4px 20px rgba(0, 0, 0, 0.16);
+			background-color: #FFFFFF;
+
+			.title {
+				display: flex;
+				align-items: center;
+				box-sizing: border-box;
+				padding-bottom: 20rpx;
+				justify-content: space-between;
+				width: 100%;
+				border-bottom: 2rpx solid #eeeeee;
+
+				.left-title {
+					font-weight: bolder;
+					padding: 0 20rpx;
+					border-left: 8rpx solid #007AFF;
+				}
+
+				.right-condition {
+					text {
+						&:nth-child(1) {
+							font-size: 40rpx;
+							font-weight: bold;
+							margin: 0 6rpx;
+						}
+
+						&:nth-child(2) {
+							color: gray;
+						}
+					}
+				}
+			}
+
+			.content {
+				view {
+					min-height: 100rpx;
+					display: flex;
+					align-items: center;
+
+					&:nth-child(1) {
+						font-size: 40rpx;
+						font-weight: bold;
+					}
+
+					&:nth-child(2) {
+						display: flex;
+						align-items: center;
+						font-size: 28rpx;
+
+						text {
+							flex: 1;
+						}
+					}
+				}
+			}
+
+			.select-item {
+				text {
+					min-height: 100rpx;
+					margin: 20rpx 0;
+
+					&:nth-child(4) {
+						margin-bottom: 0;
+					}
+
+					border: 2rpx solid #dee1e6;
+					border-radius: 8rpx;
+					padding: 0 20rpx;
+					background-color: #f2f5f8;
+					display: block;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+				}
+
+				.isSelected {
+					border: 2rpx solid #007AFF;
+					background-color: rgba(52, 152, 219, 0.3)
+				}
+
+			}
+
+		}
+	}
+
+	.page-btn {
+		margin: 30px;
+
+		.btn {
+			display: flex;
+
+			button {
+				box-shadow: 0 2px 5px 0 rgba(50, 50, 105, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+			}
+
+		}
+
+	}
+	.noData{
+		font-size: 30rpx;
+		text-align: center;
+	}
+</style>
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 692b64e..ac3c333 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -1,8 +1,9 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+	<view class="home-root">
+		<view class="container">
+			<view class="word-box" v-for="item in wordDivArray" :key="item.id" @tap="navgateToAnswer(item.id)" >
+				{{item.text}}
+			</view>
 		</view>
 	</view>
 </template>
@@ -11,42 +12,73 @@
 	export default {
 		data() {
 			return {
-				title: '测试提交成功'
+				wordDivArray:[{
+					id:'1',
+					text:'一级词汇难度'
+				},{
+					id:'2',
+					text:'二级词汇难度'
+				},{
+					id:'3',
+					text:'三级词汇难度'
+				},{
+					id:'4',
+					text:'四级词汇难度'
+				},{
+					id:'5',
+					text:'五级词汇难度'
+				},{
+					id:'6',
+					text:'六级词汇难度'
+				},{
+					id:'7',
+					text:'七级词汇难度'
+				}]
 			}
 		},
 		onLoad() {
 
 		},
 		methods: {
-
+			navgateToAnswer(id){
+				uni.navigateTo({
+					url:"../answer-detail/answer-detail?wordId="+id,
+				})
+				// console.log('触发')
+			}
 		}
 	}
 </script>
 
-<style>
-	.content {
+<style lang="scss" scoped>
+
+	.home-root{
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+		justify-content: space-between;
+		.word-box{
+			box-sizing: border-box;
+			width: 100%;
+			height: 120rpx;
+			border-radius: 20rpx;
+			margin:40rpx 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FFFFFF;
+			border: 2rpx solid #4CD964;
+			&:nth-child(1){
+				margin-top: 30rpx;
+			}
+			&:nth-child(odd){
+				background: linear-gradient(135deg,#43cbff,#9708cc);
+			}
+			&:nth-child(even){
+				background: linear-gradient(135deg,#f54ea2,#ff7676);
+				
+			}
+					
+			}
 	}
+	
 </style>
diff --git a/pages/recitation/index.vue b/pages/recitation/index.vue
index 8183fd0..2e676dd 100644
--- a/pages/recitation/index.vue
+++ b/pages/recitation/index.vue
@@ -1,22 +1,22 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/uniCloud-aliyun/cloudfunctions/createQuestionItem/index.js b/uniCloud-aliyun/cloudfunctions/createQuestionItem/index.js
new file mode 100644
index 0000000..2eaeee1
--- /dev/null
+++ b/uniCloud-aliyun/cloudfunctions/createQuestionItem/index.js
@@ -0,0 +1,40 @@
+'use strict';
+const db = uniCloud.database();
+exports.main = async (event, context) => {
+	// 创建数据库
+	const collection = db.collection('questionList');
+	// 添加示例数据
+	const res = await collection.add({
+	"wordData": {
+		"level": 1,
+		"wordName": "apple",
+		"phonetic": "abdc",
+		"pronunciation": "url:xx",
+		"options": [
+			{
+				"itemId": "A",
+				"itemContent": "苹果",
+				"right": true
+			},
+			{
+				"itemId": "B",
+				"itemContent": "香蕉"
+			},
+			{
+				"itemId": "C",
+				"itemContent": "橙子"
+			},
+			{
+				"itemId": "D",
+				"itemContent": "柠檬"
+			}
+		]
+	}
+})
+	//event为客户端上传的参数
+	 event = '测试数据'
+	console.log('后端接口测试数据 : ', event)
+	
+	//返回数据给客户端
+	return event
+};
diff --git a/uniCloud-aliyun/cloudfunctions/provideQuestion/index.js b/uniCloud-aliyun/cloudfunctions/provideQuestion/index.js
new file mode 100644
index 0000000..377755d
--- /dev/null
+++ b/uniCloud-aliyun/cloudfunctions/provideQuestion/index.js
@@ -0,0 +1,22 @@
+'use strict';
+const db = uniCloud.database();
+exports.main = async (event, context) => {
+	//event为客户端上传的参数
+	// const count = await db.collection('questionList').count()
+	// 根据level字段返回不同的数据
+	let res = await db.collection('questionList').where({
+		wordData:{
+			level:event.level
+		}
+	}).limit(1).get()
+	let data = res.data
+	console.log('入参：页码+难度', event,res)
+	
+	// let res 
+	//返回数据给客户端
+	return {
+		code: 200,
+		msg: 'success',
+		data
+	}
+};
diff --git a/uniCloud-aliyun/database/JQL查询.jql b/uniCloud-aliyun/database/JQL查询.jql
index 465356a..539336f 100644
--- a/uniCloud-aliyun/database/JQL查询.jql
+++ b/uniCloud-aliyun/database/JQL查询.jql
@@ -1,12 +1,12 @@
-// 本文件用于，使用JQL语法操作项目关联的uniCloud空间的数据库，方便开发调试和远程数据库管理
-// 编写clientDB的js API（也支持常规js语法，比如var），可以对云数据库进行增删改查操作。不支持uniCloud-db组件写法
-// 可以全部运行，也可以选中部分代码运行。点击工具栏上的运行按钮或者按下【F5】键运行代码
-// 如果文档中存在多条JQL语句，只有最后一条语句生效
-// 如果混写了普通js，最后一条语句需是数据库操作语句
-// 此处代码运行不受DB Schema的权限控制，移植代码到实际业务中注意在schema中配好permission
-// 不支持clientDB的action
-// 数据库查询有最大返回条数限制，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-database?id=limit
-// 详细JQL语法，请参考 https://uniapp.dcloud.net.cn/uniCloud/clientdb?id=jsquery
-
-// 下面示例查询uni-id-users表的所有数据
-db.collection('uni-id-users').get();
+// 本文件用于，使用JQL语法操作项目关联的uniCloud空间的数据库，方便开发调试和远程数据库管理
+// 编写clientDB的js API（也支持常规js语法，比如var），可以对云数据库进行增删改查操作。不支持uniCloud-db组件写法
+// 可以全部运行，也可以选中部分代码运行。点击工具栏上的运行按钮或者按下【F5】键运行代码
+// 如果文档中存在多条JQL语句，只有最后一条语句生效
+// 如果混写了普通js，最后一条语句需是数据库操作语句
+// 此处代码运行不受DB Schema的权限控制，移植代码到实际业务中注意在schema中配好permission
+// 不支持clientDB的action
+// 数据库查询有最大返回条数限制，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-database?id=limit
+// 详细JQL语法，请参考 https://uniapp.dcloud.net.cn/uniCloud/clientdb?id=jsquery
+
+// 下面示例查询uni-id-users表的所有数据
+db.collection('uni-id-users').get();