对错弹窗

common/styles/global/pages.scss

@@ -1860,11 +1860,11 @@
 	// 选择类型
 	.select-types-box{
 		display: flex;justify-content: space-between;align-items: center;
-		margin-top: 24rpx;box-sizing: border-box;padding:0 16rpx;
+		margin-top: 24rpx;box-sizing: border-box;padding:0 24rpx;
 		.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;}
+		.types-item.active{background-color: #006fbf;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");}
@@ -1895,7 +1895,7 @@
 	// 解释
 	.pin-words-explain-box{
 		margin-top: 64rpx;
-		.words-explain-item{font-size: 28rpx;color: #333;text-align: center;padding: 0 16rpx;line-height: 1.4;}
+		.words-explain-item{font-size: 34rpx;color: #333;text-align: center;padding: 0 16rpx;line-height: 1.4;}
 		.words-explain-item + .words-explain-item{margin-top: 12rpx;}
 	}
 	
@@ -1916,7 +1916,7 @@
 	.yb-play-box{
 		background-color: rgba(255, 255, 255, 0.6);display: inline-block;margin: 32rpx auto 0;
 		padding: 4rpx 24rpx 10rpx;border-radius: 30rpx;
-		text{font-size: 28rpx;display: inline-block;vertical-align: middle;}
+		text{font-size: 34rpx;display: inline-block;vertical-align: middle;}
 		text:nth-child(even){color: #068aea;margin: 0 10rpx;}
 		icon{width: 30rpx;height:30rpx;@include ezy-no-repeat-cover;margin-left: 24rpx;
 		display: inline-block;vertical-align: middle;}
@@ -1927,10 +1927,18 @@
 	
 	// 带点的单词展示
 	.word-circle-box{
-		width: 100%;overflow: hidden;word-wrap: break-word;word-break: break-all;
-		color: #015fb0;font-weight: bold;font-size: 76rpx;text-align: center;margin: 36rpx auto 0;
+		width: 100%;overflow: hidden;word-wrap: break-word;word-break: break-all;line-height: 1.8;
+		color: #015fb0;font-weight: bold;font-size: 82rpx;text-align: center;margin: 42rpx auto 0;
 		text-shadow:-1rpx -1rpx 0 #fff,1rpx -1rpx 0 #fff,-1rpx 1rpx 0 #fff,1rpx 1rpx 0 #fff;
-		text{display: inline-block;vertical-align: middle;}
+		/* .word-link-box{display: inline-block;padding:0 48rpx;position:relative;line-height: 1.8;}
+		.word-link-box::before,.word-link-box::after{
+			content: '';width: 100%;height: 52rpx;z-index: 1;
+			display: block;position: absolute;left: 0;
+			border: 1rpx solid #bdd2d4;border-left: 0;border-right: 0;
+		}
+		.word-link-box::before{top: 66rpx;}
+		.word-link-box::after{height: auto;top: 24rpx;bottom: 0;} */
+		text{display: inline-block;vertical-align: middle;position: relative;z-index: 2;}
 		text:nth-child(odd){color: #ff9a01;}
 		text:not(:first-child)::before{
 			content: '';width: 10rpx;height: 10rpx;background-color: #999;margin: 0 6rpx;
@@ -1962,9 +1970,9 @@
 // 单词详情- 学
 .words-xue-box{
 	text-align: center;
-	.words-xue-body{height: calc(100vh - 410rpx - var(--status-bar-height));overflow-y: auto;}
+	.words-xue-body{height: calc(100vh - 380rpx - var(--status-bar-height));overflow-y: auto;}
 	.word-block-box{
-		text{min-width: 50rpx;height: 50rpx;line-height: 48rpx;font-size: 24rpx;margin: 12rpx 0;
+		text{min-width: 50rpx;height: 50rpx;line-height: 48rpx;font-size: 26rpx;margin: 12rpx 0;
 		padding: 0 10rpx;box-sizing: border-box;border-radius: 8rpx;
 			background-color: #9cd4ef;color: #06399c;display: inline-block;}
 		text + text{margin-left: 10rpx;}
@@ -2025,7 +2033,7 @@
 // 单词详情-拼
 .words-pin-box{
 	display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
-	height: calc(100vh - 290rpx - var(--status-bar-height));
+	height: calc(100vh - 380rpx - var(--status-bar-height));
 	.pin-body-box{flex: 1;overflow-y: auto;}
 	// 拼读 +选择
 	.pin-words-box{
@@ -2081,9 +2089,9 @@
 // 单词详情-读
 .words-du-box{
 	display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
-	height: calc(100vh - 290rpx - var(--status-bar-height));
+	height: calc(100vh - 380rpx - var(--status-bar-height));
 	.du-body-box{flex: 1;text-align: center;}
-	.du-yb-play-box{margin-top: 24rpx;}
+	.du-yb-play-box{margin: 56rpx 0 42rpx;}
 	.du-words-explain-box{margin-top: 24rpx;}
 	
 	.mike-play-box{
@@ -2109,7 +2117,7 @@
 // 单词详情-选
 .words-xuan-box{
 	display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
-	height: calc(100vh - 290rpx - var(--status-bar-height));
+	height: calc(100vh - 380rpx - var(--status-bar-height));
 	.xuan-body-box{flex: 1;overflow-y: auto;text-align: center;}
 	.show-words-box{
 		width: 100%;overflow: hidden;word-wrap: break-word;word-break: break-all;
@@ -2119,7 +2127,7 @@
 	.select-change-box{
 		flex-shrink: 0;
 		.select-item{
-			width: 600rpx;height: 96rpx;text-align: center;border-radius: 12rpx;font-size: 28rpx;
+			width: 600rpx;height: 96rpx;text-align: center;border-radius: 12rpx;font-size: 32rpx;
 			background-color: #fff;border-bottom: 6rpx solid #ddf3fb;line-height: 1.4;color: #333;
 			display: flex;align-items: center;justify-content: center;margin: 12rpx auto;
 			box-sizing: border-box;padding: 0 10rpx;text-align: left;position: relative;
@@ -2145,7 +2153,7 @@
 // 单词详情-背 
 .words-bei-box{
 	display: flex;flex-direction: column;text-align: center;
-	height: calc(100vh - 290rpx - var(--status-bar-height));
+	height: calc(100vh - 380rpx - var(--status-bar-height));
 	// 答案
 	.words-answer-box{
 		min-width: 420rpx;max-width: 90%;height: 120rpx;line-height: 120rpx;margin: 64rpx auto 0;
@@ -2178,7 +2186,7 @@
 		box-sizing: border-box;padding: 0 32rpx;margin-bottom: 12rpx;}
 		.keyboard-button{
 			width: 56rpx;height: 90rpx;line-height: 90rpx;text-align: center;
-			background-color: #fff;color:#000;border-radius: 6rpx;
+			background-color: #fff;color:#000;border-radius: 6rpx;font-size: 46rpx;
 			border-bottom:6rpx solid #e2e2e2;box-sizing: border-box;}
 		.keyboard-button.active{background-color: #b7e2f5;color:#015fb0;border-bottom:6rpx solid #41c5ff;}
 		.del-btn::after{
@@ -2199,17 +2207,15 @@
 			max-width: 86%;height: 100rpx;line-height: 100rpx;font-size: 66rpx;
 			.uni-input-placeholder.input-placeholder{font-size: 56rpx;}
 		}
-		.words-answer-box{margin-top: 16rpx;}
-		.pin-words-explain-box{margin-top: 16rpx;}
-		.audio-play-btn,.audio-playing-btn{width: 80rpx;height:80rpx;margin: 16rpx auto 0;}
+		.audio-play-btn,.audio-playing-btn{width: 80rpx;height:80rpx;}
 		.clean-btn{margin-top: 16rpx;}
 		.words-answer-error-box::after,.words-answer-right-box::after{width: 40rpx;height: 40rpx;top: -10rpx;right: -10rpx;}
 	}
 	@media (max-height: 700px) {
-		.words-answer-box{margin-top: 12rpx;}
-		.pin-words-explain-box{margin-top: 12rpx;}
-		.audio-play-btn,.audio-playing-btn{margin: 12rpx auto 0;}
-		.clean-btn{margin-top: 12rpx;}
+		.words-answer-box{margin-top: 24rpx;}
+		.pin-words-explain-box{margin-top: 24rpx;}
+		.audio-play-btn,.audio-playing-btn{margin: 24rpx auto 0;}
+		.clean-btn{margin-top: 24rpx;}
 		.words-answer-error-box::after,.words-answer-right-box::after{width: 36rpx;height: 36rpx;top: -6rpx;right: -6rpx;}
 	}
 }
@@ -2282,3 +2288,13 @@
 	}
 }
 
+// 对错弹窗
+.ezy-image-dialog{
+	width: 500rpx;height: 440rpx;background-position: center;
+	background-size: cover;background-repeat: no-repeat;
+}
+.ezy-image-dialog.wrong{background-image: url("@/static/images/study/cjdc/error-tip-img.gif");}
+.ezy-image-dialog.right{background-image: url("@/static/images/study/cjdc/right-tip-img.gif");}
+.ezy-image-dialog.luyin{background-image: url("@/static/images/study/cjdc/great-tip-img.gif");}
+
+

pages/newEnglish/components/audioRightWrong.vue

@@ -1,7 +1,7 @@
 <template>
   <uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
              mask-background-color="rgba(51, 137, 217, 0.95);">
-    <view :class="data.image">
+    <view class="ezy-image-dialog" :class="data.result">
     </view>
   </uni-popup>
 </template>