pad版

common/styles/global/pages.scss

@@ -2457,7 +2457,7 @@
 		margin-top: 24rpx;box-sizing: border-box;padding:0 24rpx;
 		.types-item{
 			width: 80rpx;height: 80rpx;line-height: 80rpx;text-align: center;box-sizing: content-box;
-			background-color: #fff;color: #999;border-radius: 50%;border: 1rpx solid #ccc;}
+			background-color: #fff;color: #999;border-radius: 50%;border: 1rpx solid #ccc;font-size: 32rpx;}
 		.types-item.active{background-color: #659ff1;color: #fff;
 		border: 1rpx solid #659ff1;box-shadow: 0 0 10rpx rgba(100, 159, 241, 0.9);}
 		.jt-item{width: 24rpx;height: 24rpx;@include ezy-no-repeat-contain;
@@ -2510,7 +2510,7 @@
 	// 音标播放
 	.yb-play-box{
 		background-color: #dcf7fe;display: inline-block;margin: 32rpx auto 0;
-		padding: 4rpx 24rpx 10rpx;border-radius: 30rpx;
+		padding: 4rpx 24rpx 10rpx;border-radius: 30rpx;font-size: 0;
 		text{font-size: 34rpx;display: inline-block;vertical-align: middle;}
 		text:nth-child(even){color: #3c7efd;margin: 0 10rpx;}
 		icon{width: 30rpx;height:30rpx;@include ezy-no-repeat-cover;margin-left: 24rpx;
@@ -2557,112 +2557,119 @@
 	.word-color{color: #3a7fe9;}
 	.details-cn-content{color: #666;margin: 16rpx 12rpx 24rpx;}
 	
+	&::before,&::after{
+		content: '';width: 29rpx;height: 42rpx;z-index: 5;
+		background-image: url("@/static/images/common/wordView/jt-icon.png");
+		@include ezy-no-repeat-cover;display: block;
+		position: absolute;top: 46%;
+	}
+	&::before{left: 60rpx;}
+	&::after{right: 60rpx;transform: rotate(180deg);}
+	
 	@include mediaSmall() {
-			.word-view-border{margin: 21rpx 16rpx 16rpx;border-radius: 10rpx;}
-			.select-words-box{
-				height: 43rpx;font-size: 20rpx;
-				.words-item{padding: 10rpx 6rpx;}
-			}
-			.select-types-box{
-				margin-top: 16rpx;padding: 0 16rpx;
-				.types-item{width: 52rpx;height: 52rpx;line-height: 52rpx;}
-				.jt-item{width: 16rpx;height: 16rpx;}
-			}
-			.word-view-bottom{
-				height: 78rpx;border-top: 5rpx solid #a2c6ff;padding: 0 16rpx;font-size: 18rpx;
-				.collect-btn{
-					icon{width: 27rpx;height: 27rpx;margin-bottom: 4rpx;}
-				}
-				.bottom-btn-box{
-					.word-view-btn{width: 133rpx;height: 50rpx;line-height: 50rpx;}
-					.word-view-btn + .word-view-btn{margin-left: 20rpx;}
-				}
+		.word-view-border{margin: 21rpx 16rpx 16rpx;border-radius: 10rpx;}
+		.select-words-box{
+			height: 43rpx;font-size: 18rpx;
+			.words-item{padding: 10rpx 6rpx;}
+		}
+		.select-types-box{
+			margin-top: 16rpx;padding: 0 16rpx;justify-content: center;
+			.types-item{width: 52rpx;height: 52rpx;line-height: 52rpx;font-size: 21rpx;}
+			.jt-item{width: 16rpx;height: 16rpx;margin: 0 24rpx;}
+		}
+		.word-view-bottom{
+			height: 78rpx;border-top: 5rpx solid #a2c6ff;padding: 0 16rpx;font-size: 18rpx;
+			.collect-btn{
+				icon{width: 27rpx;height: 27rpx;margin-bottom: 4rpx;}
+			}
+			.bottom-btn-box{
+				.word-view-btn{width: 133rpx;height: 50rpx;line-height: 50rpx;}
+				.word-view-btn + .word-view-btn{margin-left: 20rpx;}
 			}
-			.pin-words-explain-box{
-				margin-top: 42rpx;
-				.words-explain-item{font-size: 22rpx;padding: 0 10rpx;}
-				.words-explain-item + .words-explain-item{margin-top: 8rpx;}
-			}
-			.audio-play-btn,.audio-playing-btn{width: 72rpx;height: 72rpx;margin: 36rpx auto 0;}
-			.pin-tip{width: 364rpx;margin: 16rpx auto 0;font-size: 17rpx;padding: 6rpx 0;}
-			.clean-btn{width: 111rpx;height: 38rpx;margin: 16rpx auto 0;}
-			.yb-play-box{
-				margin: 21rpx auto 0;padding: 3rpx 16rpx 6rpx;border-radius: 20rpx;
-				text{font-size: 22rpx;}
-				text:nth-child(even){margin: 0 6rpx;}
-				icon{width: 20rpx;height: 20rpx;margin-left: 16rpx;}
-			}
-			.word-circle-box{
-				font-size: 53rpx;margin: 27rpx auto 0;
-				.word-link-box{padding: 9rpx 31rpx 23rpx;}
-				.word-link-box::before,.word-link-box::after{height: 27rpx;}
-				text:not(:first-child)::before{width: 6rpx;height: 6rpx;margin: 0 4rpx;}
-			}
-			.details-title{padding: 5rpx 8rpx;font-size: 16rpx;}
-			.details-content-box{padding: 10rpx;font-size: 17rpx;margin-bottom: 10rpx;}
-			.syky-content{margin: 10rpx 0 23rpx;}
-			.syky-content:last-child{margin: 10rpx 0;}
-			.details-en-content{margin: 10rpx 8rpx;}
-			.details-cn-content{margin: 10rpx 8rpx 16rpx;}
 		}
+		.pin-words-explain-box{
+			margin-top: 42rpx;
+			.words-explain-item{font-size: 22rpx;padding: 0 10rpx;}
+			.words-explain-item + .words-explain-item{margin-top: 8rpx;}
+		}
+		.audio-play-btn,.audio-playing-btn{width: 72rpx;height: 72rpx;margin: 36rpx auto 0;}
+		.pin-tip{width: 364rpx;margin: 24rpx auto 0;font-size: 17rpx;padding: 6rpx 0;}
+		.clean-btn{width: 111rpx;height: 38rpx;margin: 16rpx auto 0;}
+		.yb-play-box{
+			margin: 21rpx auto 0;padding: 4rpx 16rpx 6rpx;border-radius: 20rpx;
+			text{font-size: 22rpx;}
+			text:nth-child(even){margin: 0 6rpx;}
+			icon{width: 20rpx;height: 20rpx;margin-left: 16rpx;}
+		}
+		.word-circle-box{
+			font-size: 53rpx;margin: 10rpx auto 0;
+			.word-link-box{padding: 9rpx 31rpx 23rpx;}
+			.word-link-box::before,.word-link-box::after{height: 27rpx;}
+			text:not(:first-child)::before{width: 6rpx;height: 6rpx;margin: 0 4rpx;}
+		}
+		.details-title{padding: 5rpx 8rpx;font-size: 16rpx;}
+		.details-content-box{padding: 10rpx;font-size: 18rpx;margin-bottom: 10rpx;}
+		.syky-content{margin: 10rpx 0 23rpx;}
+		.syky-content:last-child{margin: 10rpx 0;}
+		.details-en-content{margin: 10rpx 8rpx;}
+		.details-cn-content{margin: 10rpx 8rpx 16rpx;}
+		&::before,&::after{width: 19rpx;height: 27rpx;}
+		&::before{left: 39rpx;}
+		&::after{right: 39rpx;}
+	}
 	
-		@include mediaBig() {
-			.word-view-border{margin: 51rpx 38rpx 38rpx;border-radius: 26rpx;}
-			.select-words-box{
-				height: 106rpx;font-size: 46rpx;
-				.words-item{padding: 26rpx 16rpx;}
-			}
-			.select-types-box{
-				margin-top: 38rpx;padding: 0 38rpx;
-				.types-item{width: 128rpx;height: 128rpx;line-height: 128rpx;}
-				.jt-item{width: 38rpx;height: 38rpx;}
-			}
-			.word-view-bottom{
-				height: 192rpx;border-top: 13rpx solid #a2c6ff;padding: 0 38rpx;font-size: 45rpx;
-				.collect-btn{
-					icon{width: 67rpx;height: 67rpx;margin-bottom: 10rpx;}
-				}
-				.bottom-btn-box{
-					.word-view-btn{width: 326rpx;height: 123rpx;line-height: 123rpx;}
-					.word-view-btn + .word-view-btn{margin-left: 48rpx;}
-				}
+	@include mediaBig() {
+		.word-view-border{margin: 51rpx 38rpx 38rpx;border-radius: 26rpx;}
+		.select-words-box{
+			height: 106rpx;font-size: 46rpx;
+			.words-item{padding: 26rpx 16rpx;}
+		}
+		.select-types-box{
+			margin-top: 38rpx;padding: 0 38rpx;
+			.types-item{width: 128rpx;height: 128rpx;line-height: 128rpx;font-size: 54rpx;}
+			.jt-item{width: 38rpx;height: 38rpx;margin: 0 48rpx;}
+		}
+		.word-view-bottom{
+			height: 192rpx;border-top: 13rpx solid #a2c6ff;padding: 0 38rpx;font-size: 46rpx;
+			.collect-btn{
+				icon{width: 67rpx;height: 67rpx;margin-bottom: 10rpx;}
 			}
-			.pin-words-explain-box{
-				margin-top: 102rpx;
-				.words-explain-item{font-size: 54rpx;padding: 0 26rpx;}
-				.words-explain-item + .words-explain-item{margin-top: 19rpx;}
-			}
-			.audio-play-btn,.audio-playing-btn{width: 176rpx;height: 176rpx;margin: 90rpx auto 0;}
-			.pin-tip{width: 896rpx;margin: 38rpx auto 0;font-size: 42rpx;padding: 16rpx 0;}
-			.clean-btn{width: 274rpx;height: 93rpx;margin: 38rpx auto 0;}
-			.yb-play-box{
-				margin: 51rpx auto 0;padding: 6rpx 38rpx 16rpx;border-radius: 48rpx;
-				text{font-size: 54rpx;}
-				text:nth-child(even){margin: 0 16rpx;}
-				icon{width: 48rpx;height: 48rpx;margin-left: 38rpx;}
-			}
-			.word-circle-box{
-				font-size: 131rpx;
-				margin: 67rpx auto 0;
-				.word-link-box{padding: 22rpx 77rpx 58rpx;}
-				.word-link-box::before,.word-link-box::after{height: 67rpx;}
-				text:not(:first-child)::before{width: 16rpx;height: 16rpx;margin: 0 10rpx;}
-			}
-			.details-title{padding: 13rpx 19rpx;font-size: 38rpx;}
-			.details-content-box{padding: 26rpx;font-size: 42rpx;margin-bottom: 26rpx;}
-			.syky-content{margin: 26rpx 0 58rpx;}
-			.syky-content:last-child{margin: 26rpx 0;}
-			.details-en-content{margin: 26rpx 19rpx;}
-			.details-cn-content{margin: 26rpx 19rpx 38rpx;}
-		}
-	}
-.word-view-page::before,.word-view-page::after{
-	content: '';width: 29rpx;height: 42rpx;z-index: 5;
-	background-image: url("@/static/images/common/wordView/jt-icon.png");
-	@include ezy-no-repeat-cover;display: block;
-	position: absolute;top: 46%;}
-.word-view-page::before{left: 60rpx;}
-.word-view-page::after{right: 60rpx;transform: rotate(180deg);}
+			.bottom-btn-box{
+				.word-view-btn{width: 326rpx;height: 123rpx;line-height: 123rpx;}
+				.word-view-btn + .word-view-btn{margin-left: 48rpx;}
+			}
+		}
+		.pin-words-explain-box{
+			margin-top: 102rpx;
+			.words-explain-item{font-size: 54rpx;padding: 0 26rpx;}
+			.words-explain-item + .words-explain-item{margin-top: 19rpx;}
+		}
+		.audio-play-btn,.audio-playing-btn{width: 176rpx;height: 176rpx;margin: 90rpx auto 0;}
+		.pin-tip{width: 965rpx;margin: 46rpx auto 0;font-size: 46rpx;padding: 16rpx 0;}
+		.clean-btn{width: 274rpx;height: 93rpx;margin: 38rpx auto 0;}
+		.yb-play-box{
+			margin: 51rpx auto 0;padding: 6rpx 38rpx 16rpx;border-radius: 48rpx;
+			text{font-size: 54rpx;}
+			text:nth-child(even){margin: 0 16rpx;}
+			icon{width: 48rpx;height: 48rpx;margin-left: 38rpx;}
+		}
+		.word-circle-box{
+			font-size: 131rpx;margin: 10rpx auto 0;
+			.word-link-box{padding: 22rpx 77rpx 58rpx;}
+			.word-link-box::before,.word-link-box::after{height: 67rpx;}
+			text:not(:first-child)::before{width: 16rpx;height: 16rpx;margin: 0 10rpx;}
+		}
+		.details-title{padding: 13rpx 19rpx;font-size: 38rpx;}
+		.details-content-box{padding: 26rpx;font-size: 46rpx;margin-bottom: 26rpx;}
+		.syky-content{margin: 26rpx 0 58rpx;}
+		.syky-content:last-child{margin: 26rpx 0;}
+		.details-en-content{margin: 26rpx 19rpx;}
+		.details-cn-content{margin: 26rpx 19rpx 38rpx;}
+		&::before,&::after{width: 46rpx;height: 67rpx;}
+		&::before{left: 96rpx;}
+		&::after{right: 96rpx;}
+	}
+}
 
 // 单词详情- 学
 .words-xue-box{
@@ -2711,7 +2718,7 @@
 	.xue-change-btn-box{
 		display: flex;justify-content: center;border-bottom: 1rpx dashed #8dcff1;padding: 32rpx 0 42rpx;
 		.change-btn{
-			width: 254rpx;height:77rpx;position: relative;line-height: 75rpx;
+			width: 254rpx;height:77rpx;position: relative;line-height: 77rpx;font-size: 0;
 			text{color: #3d7efe;position: relative;font-size: 32rpx;z-index: 2;display: inline-block;}
 		}
 		.change-btn::after{
@@ -2725,6 +2732,81 @@
 	}
 
 	.xue-details-content-box{text-align: left;margin-top: 16rpx;}
+	
+	@include mediaSmall() {
+			.words-xue-body{height: calc(100vh - 280rpx - var(--status-bar-height));}
+			.word-block-box{
+				margin-top: 10rpx;
+				text{
+					min-width: 33rpx;height: 33rpx;line-height: 31rpx;
+					font-size: 18rpx;margin: 8rpx 0;padding: 0 6rpx;border-radius: 5rpx;}
+				text + text{margin-left: 6rpx;}
+			}
+			.details-btn{margin: 16rpx auto;padding: 6rpx 16rpx;border-radius: 20rpx;font-size: 18rpx;}
+			.xue-yb-play-box{margin-top: 8rpx;}
+			.xue-words-explain-box{margin-top: 21rpx;}
+			.yb-block-box text{min-width: 36rpx;height: 36rpx;line-height: 35rpx;font-size: 18rpx;}
+			.yj-block-box{
+				min-width: 33rpx;font-size: 18rpx;
+				.yj-block-item + .yj-block-item{margin-left: 6rpx;}
+				.item-top,.item-bottom{height: 34rpx;line-height: 33rpx;padding: 0 6rpx;}
+			}
+			.cg-item-list{
+				.uni-scroll-view-content{padding: 0 16rpx;}
+				.cg-item-box{font-size: 22rpx;padding: 16rpx 0;}
+				.cg-item{
+					min-height: 81rpx;border-radius: 5rpx;padding: 10rpx;
+					view + view{margin-top: 1rpx;}
+				}
+				.cg-symbol{margin: 0 6rpx;}
+			}
+			.xue-change-btn-box{
+				border-bottom: 1rpx dashed #8dcff1;padding: 21rpx 0 27rpx;
+				.change-btn{
+					width: 165rpx;height: 50rpx;line-height: 50rpx;
+					text{font-size: 22rpx;}
+				}
+			}
+			.xue-details-content-box{margin-top: 10rpx;}
+		}
+	
+		@include mediaBig() {
+			.words-xue-body{height: calc(100vh - 750rpx - var(--status-bar-height));}
+			.word-block-box{
+				margin-top: 24rpx;
+				text{
+					min-width: 80rpx;height: 80rpx;line-height: 77rpx;font-size: 46rpx;
+					margin: 19rpx 0;padding: 0 16rpx;border-radius: 13rpx;
+				}
+				text + text{margin-left: 16rpx;}
+			}
+			.details-btn{margin: 38rpx auto;padding: 16rpx 38rpx;border-radius: 48rpx;font-size: 46rpx;}
+			.xue-yb-play-box{margin-top: 19rpx;}
+			.xue-words-explain-box{margin-top: 51rpx;}
+			.yb-block-box text{min-width: 90rpx;height: 90rpx;line-height: 86rpx;font-size: 46rpx;}
+			.yj-block-box{
+				min-width: 80rpx;font-size: 46rpx;
+				.yj-block-item + .yj-block-item{margin-left: 16rpx;}
+				.item-top,.item-bottom{height: 83rpx;line-height: 80rpx;padding: 0 16rpx;}
+			}
+			.cg-item-list{
+				.uni-scroll-view-content{padding: 0 38rpx;}
+				.cg-item-box{font-size: 54rpx;padding: 38rpx 0;}
+				.cg-item{
+					min-height: 198rpx;border-radius: 13rpx;padding: 26rpx;
+					view + view{margin-top: 3rpx;}
+				}
+				.cg-symbol{margin: 0 16rpx;}
+			}
+			.xue-change-btn-box{
+				border-bottom: 1rpx dashed #8dcff1;padding: 51rpx 0 67rpx;
+				.change-btn{
+					width: 406rpx;height: 123rpx;line-height: 120rpx;
+					text{font-size: 54rpx;}
+				}
+			}
+			.xue-details-content-box{margin-top: 26rpx;}
+		}
 }
 
 // 单词详情-拼
@@ -2781,6 +2863,54 @@
 			.audio-play-btn,.audio-playing-btn{width: 96rpx;height:96rpx;margin-top: 24rpx;}
 		}
 	}
+	
+	@include mediaSmall() {
+			height: calc(100vh - 300rpx - var(--status-bar-height));
+			.pin-words-box{
+				margin-top: 42rpx;
+				.words-item{min-width: 59rpx;height: 78rpx;line-height: 78rpx;font-size: 52rpx;padding: 0 4rpx;border-radius: 5rpx;}
+				.words-item + .words-item{margin-left: 8rpx;}
+			}
+			.pin-small-words-box{
+				.words-item{min-width: 46rpx;height: 65rpx;line-height: 72rpx;font-size: 42rpx;padding: 0 3rpx;}
+				.words-item + .words-item{margin-left: 5rpx;}
+			}
+			.pin-error-words-box,.pin-right-words-box{
+				.words-item:last-child::after{width: 30rpx;height: 30rpx;top: -14rpx;right: -8rpx;}
+			}
+			.pin-words-change-box{
+				margin-bottom: 21rpx;
+				.words-change-item{line-height: 75rpx;border-bottom: 5rpx solid #a4e6fc;}
+				.words-change-item.disabled{border-bottom: 5rpx solid #ccc;}
+			}
+			.pin-words-change-box.pin-small-words-box{
+				.words-item{line-height: 59rpx;}
+			}
+		}
+	
+		@include mediaBig() {
+			height: calc(100vh - 736rpx - var(--status-bar-height));
+			.pin-words-box{
+				margin-top: 102rpx;
+				.words-item{min-width: 144rpx;height: 192rpx;line-height: 192rpx;font-size: 128rpx;padding: 0 10rpx;border-radius: 13rpx;}
+				.words-item + .words-item{margin-left: 19rpx;}
+			}
+			.pin-small-words-box{
+				.words-item{min-width: 112rpx;height: 160rpx;line-height: 176rpx;font-size: 102rpx;padding: 0 6rpx;}
+				.words-item + .words-item{margin-left: 13rpx;}
+			}
+			.pin-error-words-box,.pin-right-words-box{
+				.words-item:last-child::after{width: 74rpx;height: 74rpx;top: -35rpx;right: -19rpx;}
+			}
+			.pin-words-change-box{
+				margin-bottom: 51rpx;
+				.words-change-item{line-height: 186rpx;border-bottom: 13rpx solid #a4e6fc;}
+				.words-change-item.disabled{border-bottom: 13rpx solid #ccc;}
+			}
+			.pin-words-change-box.pin-small-words-box{
+				.words-item{line-height: 144rpx;}
+			}
+		}
 }
 
 // 单词详情-读
@@ -2809,6 +2939,35 @@
 		.play-btn{background-image: url("@/static/images/common/wordView/play-btn.png");}
 		.playing-btn{background-image: url("@/static/images/common/wordView/playing-btn.gif");}
 	}
+	@include mediaSmall() {
+			height: calc(100vh - 280rpx - var(--status-bar-height));
+			.du-yb-play-box{margin: 36rpx 0 27rpx;}
+			.du-words-explain-box{margin-top: 16rpx;}
+			.mike-play-box{
+				.mike-play-tip{font-size: 18rpx;}
+				.mike-btn,.mike-az-btn{
+					width: 85rpx;height:85rpx;margin: 10rpx auto 21rpx;
+				}
+				.play-btn,.playing-btn{
+					width: 62rpx;height:62rpx;left: 52rpx;bottom: 10rpx;
+				}
+			}
+		}
+	
+		@include mediaBig() {
+			height: calc(100vh - 736rpx - var(--status-bar-height));
+			.du-yb-play-box{margin: 90rpx 0 67rpx;}
+			.du-words-explain-box{margin-top: 38rpx;}
+			.mike-play-box{
+				.mike-play-tip{font-size: 46rpx;}
+				.mike-btn,.mike-az-btn{
+					width: 208rpx;height:208rpx;margin: 26rpx auto 51rpx;
+				}
+				.play-btn,.playing-btn{
+					width: 154rpx;height:154rpx;left: 128rpx;bottom: 24rpx;
+				}
+			}
+		}
 }
 
 // 单词详情-选
@@ -2844,6 +3003,30 @@
 		.show-words-box{margin: 12rpx auto 0;}
 		.yb-play-box{margin: 12rpx auto 0;}
 	}
+	
+	@include mediaSmall() {
+			height: calc(100vh - 300rpx - var(--status-bar-height));
+			.show-words-box{font-size: 53rpx;margin: 10rpx auto 0;}
+			.select-change-box{
+				.select-item{
+					width: 600rpx;height: 62rpx;border-radius: 8rpx;font-size: 22rpx;
+					border: 1rpx solid #eef1f6;border-bottom: 4rpx solid #eef1f6;margin: 16rpx auto;padding: 0 6rpx;
+				}
+				.select-error::after,.select-right::after{width: 23rpx;height: 23rpx;top: -6rpx;right: -8rpx;}
+			}
+		}
+	
+		@include mediaBig() {
+			height: calc(100vh - 760rpx - var(--status-bar-height));
+			.show-words-box{font-size: 131rpx;margin: 10rpx auto 0;}
+			.select-change-box{
+				.select-item{
+					width: 1600rpx;height: 154rpx;border-radius: 19rpx;font-size: 54rpx;padding: 0 16rpx;
+					border: 3rpx solid #eef1f6;border-bottom: 10rpx solid #eef1f6;margin: 19rpx auto;
+				}
+				.select-error::after,.select-right::after{width: 58rpx;height: 58rpx;top: -16rpx;right: -19rpx;}
+			}
+		}
 
 }