样式修改

common/styles/global/pages.scss

@@ -1867,16 +1867,125 @@
 	.ezy-border-body{
 		width: 94%;margin: 3% 3%;display: flex;flex-direction: column;flex: 1;
 		background-color: rgba(255, 255, 255, 0.6);border-radius:8rpx;}
+		
+	// 选择单词
+	.select-words-box{
+		height: 66rpx;border-bottom: 1rpx dashed #0589e9;
+		display: flex;flex-wrap: wrap;justify-content: space-between;
+		box-sizing: border-box;font-size: 28rpx;overflow: hidden;
+		// @include single-line-ellipsis;
+		.words-item{min-width: 20%;color: #000;box-sizing: border-box;padding:16rpx 10rpx;text-align: center;}
+		.active{color: #068aea;}
+	}
+	
+	// 选择类型
+	.select-types-box{
+		display: flex;justify-content: space-between;align-items: center;
+		margin-top: 24rpx;box-sizing: border-box;padding:0 16rpx;
+		.types-item{
+			width: 80rpx;height: 80rpx;line-height: 80rpx;text-align: center;
+			background-color: #fff;color: #000;border-radius: 50%;}
+		.types-item.active{background-color: #0589e9;color: #fff;}
+		.jt-item{width: 20rpx;height: 30rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/study/cjdc/wordView/jt-icon.png");}
+		.jt-item.active{background-image: url("@/static/images/study/cjdc/wordView/jt-a-icon.png");}
+	}
+	
 	.word-view-bottom{
-		width: 100%;height: 120rpx;background-color: #68b4e3;
-		border-top: 8rpx solid #add9f2;box-sizing: border-box;
+		width: 100%;height: 120rpx;background-color: #68b4e3;font-size: 28rpx;
+		border-top: 8rpx solid #add9f2;box-sizing: border-box;padding: 0 32rpx;
 		display: flex;justify-content: space-between;align-items: center;
-		.word-view-btn{
-			width: 160rpx;height: 62rpx;line-height: 62rpx;
-			background-color: #fff;color: #333;text-align: center;}
-		.bottom-btn-box{display: flex;}
+		.collect-btn{
+			color: #fff;display: flex;flex-direction: column;align-items: center;
+			icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-bottom: 6rpx;
+				background-image: url("@/static/images/study/cjdc/wordView/collect-icon.png");}
+			.active{background-image: url("@/static/images/study/cjdc/wordView/collect-a-icon.png");}
+			}
+		.bottom-btn-box{
+			display: flex;
+			.word-view-btn{
+				width: 204rpx;height: 77rpx;line-height: 77rpx;
+				color: #333;text-align: center;@include ezy-no-repeat-cover;
+				background-image: url("@/static/images/study/cjdc/wordView/bottom-btn-bj.png");
+			}
+			.word-view-btn + .word-view-btn{margin-left: 30rpx;}
+		}
 	}
 	.word-view-swiper-box{flex: 1;overflow-y: auto;box-sizing: border-box;padding: 10rpx;}
+	
+	/*****拼*****/
+	.words-pin-box{display: flex;flex-direction: column;height: calc(100vh - 310rpx - var(--status-bar-height));}
+	.pin-body-box{flex: 1;overflow-y: auto;}
+	// 拼读 +选择
+	.pin-words-box{
+		// min-width: 80rpx;height: 100rpx;font-size: 64rpx;
+		display: flex;justify-content: center;margin-top: 64rpx;
+		.words-item{min-width: 90rpx;height: 120rpx;line-height: 120rpx;font-size: 80rpx;
+			text-align: center;box-sizing: border-box;padding: 0 6rpx;font-weight: bold;
+			border-radius: 8rpx;background-color: #b7e2f5;color: #015fb0;}
+		.words-item + .words-item{margin-left: 12rpx;}
+	}
+	.pin-small-words-box{
+		.words-item{min-width: 70rpx;height: 100rpx;line-height: 110rpx;font-size: 64rpx;padding: 0 4rpx;}
+		.words-item + .words-item{margin-left: 8rpx;}
+	}
+	// 回答正确 && 回答错误
+	.pin-error-words-box,.pin-right-words-box{
+		.words-item:last-child{position: relative;}
+		.words-item:last-child::after{
+			content: '';width: 46rpx;height: 46rpx;display: block;@include ezy-no-repeat-cover;
+			position: absolute;top: -22rpx;right: -12rpx;
+		}
+	}
+	.pin-error-words-box.isAll{
+		.words-item{background-color: #fbc2c2;color: #ff4d4d;}
+		.words-item:last-child::after{background-image: url("@/static/images/study/cjdc/wordView/word-error-icon.png");}
+	}
+	.pin-right-words-box.isAll{
+		.words-item{background-color: #ddffdd;color: #36c336;}
+		.words-item:last-child::after{background-image: url("@/static/images/study/cjdc/wordView/word-right-icon.png");}
+	}
+	
+	// 清空按钮
+	.pin-tip{width: 560rpx;margin: 24rpx auto 0;font-size: 26rpx;text-align: center;border-radius: 8rpx;
+	color: #015fb0;border: 1rpx dashed #015fb0;box-sizing: border-box;padding: 10rpx 0;}
+	// 提示
+	.clean-btn{width: 171rpx;height:58rpx;@include ezy-no-repeat-cover;margin: 24rpx auto 0;
+	background-image: url("@/static/images/study/cjdc/wordView/clean-btn.png");
+	}
+	// 解释
+	.pin-words-explain-box{
+		margin-top: 64rpx;
+		.words-explain-item{font-size: 28rpx;color: #333;text-align: center;}
+		.words-explain-item + .words-explain-item{margin-top: 16rpx;}
+	}
+	.audio-play-btn,.audio-playing-btn{
+		width: 110rpx;height:110rpx;
+	@include ezy-no-repeat-cover;margin: 56rpx auto 0;
+	}
+	.audio-play-btn{background-image: url("@/static/images/study/cjdc/wordView/play-btn.png");}
+	.audio-playing-btn{background-image: url("@/static/images/study/cjdc/wordView/playing-btn.gif");}
+	
+	// 选择单词
+	.pin-words-change-box{
+		margin-bottom: 32rpx;
+		.words-change-item{line-height: 116rpx;border: 1rpx solid #2da8e7;border-bottom: 8rpx solid #41c5ff}
+		.words-change-item.disabled{border: 1rpx solid #999;border-bottom: 8rpx solid #ccc;
+		color: #999;background-color: #f0f0f0;}
+	}
+	.pin-words-change-box.pin-small-words-box{
+		.words-item{line-height: 90rpx;}
+	}
+	
+	@media (max-height: 600px) {
+		// 拼
+		.words-pin-box{
+			.select-types-box{margin-top: 10rpx;}
+			.pin-words-box,.pin-words-explain-box{margin-top: 32rpx;}
+			.audio-play-btn,.audio-playing-btn{width: 96rpx;height:96rpx;margin-top: 24rpx;}
+		}
+	}
+	
 }
 
 // 选择版本