学习记录页面样式开发

common/styles/global/components.scss

@@ -430,4 +430,30 @@ position: absolute;left: 0;top: -4rpx;opacity: 0.4;}
 	width: 580rpx;border-radius: 12rpx;background-color: #fff;padding: 24rpx;
 	.tip-title{padding-top: 24rpx;font-size: 34rpx;color: #333;text-align: center;}
 	.tip-content{font-size: 32rpx;color: #666;margin:32rpx 32rpx 56rpx;line-height: 1.6;text-align: justify;}
-}
+}
+
+// 单词列表item
+.word-list-item{
+		display: flex;margin-bottom: 24rpx;
+		background-color: #fff;border-radius:14rpx;overflow: hidden;
+		.item-word{
+			width: 43%;margin: 16rpx 0 0 16rpx;line-height: 1.4;flex-shrink: 0;
+			.word-text{
+				font-size: 34rpx;color: #000;font-weight: bold;
+				.word-color:nth-child(odd){color: #ff9a01;}
+				}
+			.phonetic-alphabet{font-size: 26rpx;color: #999;margin: 0 0 16rpx;}
+		}
+		.item-explain{
+			width: 44%;display: flex;flex-direction: column;justify-content: center;margin-right: 2%;flex-shrink: 0;
+			.item-explain-content{height: 70rpx;text-align: justify;font-size: 22rpx;color: #787878;line-height: 1.4;overflow: hidden;}
+			.explain-text{@include multi-line-ellipsis(2);}
+			.explain-text + .explain-text{margin-top: 6rpx;}
+		}
+		.item-arrow{
+			width: 10%;background-color: #f4f4f4;flex: 1;flex-shrink: 0;
+			display: flex;align-items: center;justify-content: center;
+			icon{width: 34rpx;height: 34rpx;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/common/jt-right-black.svg");}
+		}
+	}

common/styles/global/pages.scss

@@ -1834,30 +1834,6 @@
 		icon{width: 10rpx;height: 32rpx;background-color:#068aea;border-radius:4rpx;margin-right: 8rpx;}
 		text{font-size: 34rpx;color: #068aea;font-weight: bold;}
 	}
-	.word-list-item{
-		display: flex;margin-bottom: 24rpx;
-		background-color: #fff;border-radius:14rpx;overflow: hidden;
-		.item-word{
-			width: 40%;margin: 16rpx 0 0 24rpx;line-height: 1.4;flex-shrink: 0;
-			.word-text{
-				font-size: 34rpx;color: #000;font-weight: bold;
-				.word-color:nth-child(odd){color: #ff9a01;}
-				}
-			.phonetic-alphabet{font-size: 26rpx;color: #999;margin: 0 0 16rpx;}
-		}
-		.item-explain{
-			width: 44%;display: flex;flex-direction: column;justify-content: center;margin-right: 2%;flex-shrink: 0;
-			.item-explain-content{height: 70rpx;text-align: justify;font-size: 22rpx;color: #787878;line-height: 1.4;overflow: hidden;}
-			.explain-text{@include multi-line-ellipsis(2);}
-			.explain-text + .explain-text{margin-top: 6rpx;}
-		}
-		.item-arrow{
-			width: 10%;background-color: #f4f4f4;flex: 1;flex-shrink: 0;
-			display: flex;align-items: center;justify-content: center;
-			icon{width: 34rpx;height: 34rpx;@include ezy-no-repeat-cover;
-			background-image: url("@/static/images/common/jt-right-black.svg");}
-		}
-	}
 }
 
 // 单词详情
@@ -2155,3 +2131,18 @@
 	.select-version-confirm-btn:after{display: none;}
 }
 
+// 学习记录
+.learn-record-page{
+	width: 100%;height: 100vh;background-color: #00c5fe;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/common/ezy-page-bj.png");
+	.uni-list{background-color: transparent!important;}
+	.uni-list--border-top,.uni-list--border-bottom{display: none;}
+	.uni-list-item__container{padding: 0!important;}
+	
+	.learn-record-scroll-view{
+		margin-top: 16rpx;overflow-y: auto;height: calc(100vh - 370rpx - var(--status-bar-height));
+		box-sizing: border-box;padding: 0 20rpx;
+		.word-list-item{margin-bottom: 16rpx;}
+	}
+}

pages.json

@@ -75,6 +75,12 @@
 			}
 		},
 		{
+			"path": "pages/my/learnRecord",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
 			"path": "pages/my/aboutPage",
 			"style": {
 				"navigationStyle": "custom"

pages/my/index.vue

@@ -23,6 +23,10 @@
 				<icon class="list-icon tel-icon"></icon>
 				<text>手机号码</text>
 			</view>
+			<view class="list-row" @click="xxjlClick" v-if="loginFlag">
+				<icon class="list-icon error-icon"></icon>
+				<text>学习记录</text>
+			</view>
 			<view class="list-row" @click="checkWrong">
 				<icon class="list-icon error-icon"></icon>
 				<text>我的错题</text>
@@ -407,7 +411,11 @@
 			isIOSorAndroid()
 		}
 	})
-
+	function xxjlClick(){
+		uni.redirectTo({
+			url: '/pages/my/learnRecord'
+		})
+	}
 	function checkWrong() {
 		if (loginFlag.value) {
 			const AuthCode = getUserIdentity();