|
|
@@ -2299,3 +2299,433 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 单词列表页
|
|
|
+.word-list-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);
|
|
|
+ .ezy-border-body{
|
|
|
+ width: 94%;height: calc(100vh - 230rpx - var(--status-bar-height));margin: 3% 3%;display: flex;flex-direction: column;
|
|
|
+ background-color: rgba(255, 255, 255, 0.6);border-radius:0 0 8rpx 8rpx;}
|
|
|
+ .word-list-swiper-box{
|
|
|
+ height: calc(100vh - 256rpx - var(--status-bar-height));overflow-y: auto;
|
|
|
+ .word-list-swiper-item{display: flex;flex-direction: column;}
|
|
|
+ }
|
|
|
+ .word-title-box{
|
|
|
+ display: flex;flex-shrink: 0;width: 100%;overflow:hidden ;
|
|
|
+ line-height: 1.4;box-sizing: border-box;border-bottom: 1rpx dashed #068aea;
|
|
|
+ .title-item{
|
|
|
+ width: 25%;color: #068aea;font-size: 28rpx;text-align: center;
|
|
|
+ position: relative;padding: 12rpx 0;@include single-line-ellipsis}
|
|
|
+ .title-item.active{font-weight: bold;}
|
|
|
+ .title-item.active::after{content: '';width: 70%;height: 8rpx;display: block;
|
|
|
+ background-color:#068aea;bottom: 0rpx;left:15%;position: absolute;border-radius: 8rpx;}
|
|
|
+ }
|
|
|
+ .word-list-body{flex: 1;overflow-y: auto;box-sizing: border-box;padding: 0 24rpx;}
|
|
|
+ .no-word-box{font-size: 28rpx;color: #666;flex: 1;display: flex;align-items: center;justify-content: center;}
|
|
|
+ .word-num-box{
|
|
|
+ display: flex;align-items: center;padding: 20rpx 24rpx;box-sizing: border-box;
|
|
|
+ icon{width: 10rpx;height: 32rpx;background-color:#068aea;border-radius:4rpx;margin-right: 8rpx;}
|
|
|
+ text{font-size: 34rpx;color: #068aea;font-weight: bold;}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 单词详情
|
|
|
+.word-view-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);
|
|
|
+ .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 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: #006fbf;color: #fff;}
|
|
|
+ .jt-item{width: 20rpx;height: 30rpx;@include ezy-no-repeat-cover;
|
|
|
+ background-image: url("@/static/images/common/wordView/jt-icon.png");}
|
|
|
+ .jt-item.active{background-image: url("@/static/images/common/wordView/jt-a-icon.png");}
|
|
|
+ }
|
|
|
+
|
|
|
+ .word-view-bottom{
|
|
|
+ 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;flex-shrink: 0;
|
|
|
+ .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/common/wordView/collect-icon.png");}
|
|
|
+ .active{background-image: url("@/static/images/common/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/common/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;}
|
|
|
+ /*****componets*****/
|
|
|
+ // 解释
|
|
|
+ .pin-words-explain-box{
|
|
|
+ margin-top: 64rpx;
|
|
|
+ .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;}
|
|
|
+ }
|
|
|
+
|
|
|
+ //播放
|
|
|
+ .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/common/wordView/play-btn.png");}
|
|
|
+ .audio-playing-btn{background-image: url("@/static/images/common/wordView/playing-btn.gif");}
|
|
|
+
|
|
|
+ // 清空按钮
|
|
|
+ .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/common/wordView/clean-btn.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 音标播放
|
|
|
+ .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: 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;}
|
|
|
+ .yb-play-btn{background-image: url("@/static/images/common/wordView/yb-play-btn.png");}
|
|
|
+ .yb-playing-btn{background-image: url("@/static/images/common/wordView/yb-playing-btn.gif");}
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 带点的单词展示
|
|
|
+ .word-circle-box{
|
|
|
+ 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;
|
|
|
+ .word-link-box{display: inline-block;padding:14rpx 48rpx 36rpx;position:relative;line-height: 1;}
|
|
|
+ .word-link-box::before,.word-link-box::after{
|
|
|
+ content: '';width: 100%;height: 42rpx;z-index: 1;
|
|
|
+ display: block;position: absolute;left: 0;
|
|
|
+ border: 2rpx solid #bdd2d4;border-left: 0;border-right: 0;
|
|
|
+ }
|
|
|
+ .word-link-box::before{top: 0;}
|
|
|
+ .word-link-box::after{bottom: 0;}
|
|
|
+ text{display: inline-block;vertical-align: middle;position: relative;z-index: 2;
|
|
|
+ font-family:"Arial", sans-serif;}
|
|
|
+ text:nth-child(odd){color: #ff9a01;}
|
|
|
+ text:not(:first-child)::before{
|
|
|
+ content: '';width: 10rpx;height: 10rpx;background-color: #999;margin: 0 6rpx;
|
|
|
+ display: inline-block;vertical-align: middle;border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 单词详情块
|
|
|
+ .details-title{background-color: #3a7fe9;padding: 8rpx 12rpx;border-radius: 10rpx;
|
|
|
+ font-size: 24rpx;color: #fff;display: inline-block;}
|
|
|
+ .details-content-box{
|
|
|
+ background-color: #fffefe;border-radius: 10rpx;margin: 0 20rpx;line-height: 1.4;margin-bottom: 16rpx;
|
|
|
+ box-sizing: border-box;padding: 12rpx 10rpx;font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .syky-content{margin: 16rpx 0 36rpx;border-bottom: 1rpx dashed #8dcff1;}
|
|
|
+ .syky-content:last-child{margin: 16rpx 0;border-bottom:0;}
|
|
|
+ .details-en-content{
|
|
|
+ color: #000;margin:16rpx 12rpx;
|
|
|
+ }
|
|
|
+ .word-color{color: #3a7fe9;}
|
|
|
+ .details-cn-content{color: #666;margin: 16rpx 12rpx 24rpx;}
|
|
|
+}
|
|
|
+.word-view-page::before,.word-view-page::after{content: '';width: 29rpx;height: 42rpx;
|
|
|
+ // background-image: url("@/static/images/study/jt-left-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);}
|
|
|
+
|
|
|
+// 单词详情- 学
|
|
|
+.words-xue-box{
|
|
|
+ text-align: center;
|
|
|
+ .words-xue-body{height: calc(100vh - 390rpx - var(--status-bar-height));overflow-y: auto;}
|
|
|
+ .word-block-box{
|
|
|
+ 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;}
|
|
|
+ }
|
|
|
+ .details-btn{
|
|
|
+ background-color: rgba(255, 255, 255, 0.6);display: inline-block;margin: 24rpx auto;
|
|
|
+ padding: 4rpx 24rpx 10rpx;border-radius: 30rpx;color: #068aea;
|
|
|
+ }
|
|
|
+ .xue-yb-play-box{margin-top: 12rpx;}
|
|
|
+ .xue-words-explain-box{margin-top: 32rpx;}
|
|
|
+ .yb-block-box text{min-width: 56rpx;height: 56rpx;line-height: 54rpx;border: 1rpx solid #fff;font-size: 26rpx;}
|
|
|
+ .yj-block-box{
|
|
|
+ min-width: 50rpx;font-size: 26rpx;
|
|
|
+ .yj-block-item{
|
|
|
+ display: inline-block;border: 1rpx solid #fff;color: #06399c;border-radius: 8rpx;overflow: hidden;
|
|
|
+ }
|
|
|
+ .yj-block-item +.yj-block-item{margin-left: 10rpx;}
|
|
|
+ .item-top,.item-bottom{height: 52rpx;line-height: 50rpx;padding: 0 10rpx;box-sizing: border-box;}
|
|
|
+ .item-top{background-color: #e7f2f9;}
|
|
|
+ .item-bottom{background-color: #9cd4ef;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .cg-item-list{
|
|
|
+ .uni-scroll-view-content{display: flex;box-sizing: border-box;padding:0 24rpx; }
|
|
|
+ .cg-item-box{display: flex;flex-direction: row;flex-shrink: 0;color: #000;font-size: 32rpx;padding: 24rpx 0;}
|
|
|
+ // max-width: 360rpx;
|
|
|
+ .cg-item{
|
|
|
+ min-height: 124rpx;
|
|
|
+ display: flex;align-items: flex-start;flex-direction: column;justify-content: center;
|
|
|
+ border:1rpx solid #9cbff4;background-color: #fff;border-radius: 8rpx;padding: 16rpx;
|
|
|
+ view + view{margin-top: 2rpx;}
|
|
|
+ }
|
|
|
+ .isEven{color: #015fb0;}
|
|
|
+ .isOdd{color: #ff9a01;}
|
|
|
+ .cg-symbol{margin: 0 10rpx;display: flex;align-items: center;}
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .xue-change-btn-box{
|
|
|
+ display: flex;justify-content: center;border-bottom: 1rpx dashed #8dcff1;margin: 0 20rpx;padding: 32rpx 0 42rpx;
|
|
|
+ .change-btn{
|
|
|
+ width: 254rpx;height:77rpx;position: relative;
|
|
|
+ text{color: #fff;position: relative;font-size: 32rpx;z-index: 2;display: inline-block;margin-top:15rpx;}
|
|
|
+ }
|
|
|
+ .change-btn::after{
|
|
|
+ content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;@include ezy-no-repeat-cover;
|
|
|
+ background-image: url("@/static/images/common/wordView/change-btn.png");z-index: 1;
|
|
|
+ }
|
|
|
+ .change-btn.active text{color: #0f67be;}
|
|
|
+ .change-btn.active::after{background-image: url("@/static/images/common/wordView/change-btn-a.png");transform: rotate(180deg);}
|
|
|
+ .change-btn:last-child::after{transform: rotate(180deg);}
|
|
|
+ .change-btn.active:last-child::after{transform: unset;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .xue-details-content-box{text-align: left;margin-top: 12rpx;}
|
|
|
+}
|
|
|
+
|
|
|
+// 单词详情-拼
|
|
|
+.words-pin-box{
|
|
|
+ display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
|
|
|
+ height: calc(100vh - 390rpx - 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/common/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/common/wordView/word-right-icon.png");}
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选择单词
|
|
|
+ .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;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 单词详情-读
|
|
|
+.words-du-box{
|
|
|
+ display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
|
|
|
+ height: calc(100vh - 390rpx - var(--status-bar-height));
|
|
|
+ .du-body-box{flex: 1;text-align: center;}
|
|
|
+ .du-yb-play-box{margin: 56rpx 0 42rpx;}
|
|
|
+ .du-words-explain-box{margin-top: 24rpx;}
|
|
|
+
|
|
|
+ .mike-play-box{
|
|
|
+ .mike-play-tip{font-size: 28rpx;color: #666;text-align: center;}
|
|
|
+ .du-btn-box{width: 100%;position: relative;}
|
|
|
+ .mike-btn::after,.mike-az-btn::after,.play-btn::after,.playing-btn::after{display: none;}
|
|
|
+ .mike-btn,.mike-az-btn{
|
|
|
+ width: 130rpx;height:130rpx;@include ezy-no-repeat-cover;margin-left: 24rpx;
|
|
|
+ background-color: transparent;border: 0;margin: 16rpx auto 32rpx;display: block;
|
|
|
+ }
|
|
|
+ .mike-btn{background-image: url("@/static/images/common/wordView/miki-btn.png");}
|
|
|
+ .mike-az-btn{background-image: url("@/static/images/common/wordView/miki-btn-a.gif");}
|
|
|
+ .play-btn,.playing-btn{
|
|
|
+ width: 96rpx;height:96rpx;@include ezy-no-repeat-cover;
|
|
|
+ background-color: transparent;border: 0;
|
|
|
+ position: absolute;left: 80rpx;bottom: 15rpx;
|
|
|
+ }
|
|
|
+ .play-btn{background-image: url("@/static/images/common/wordView/play-btn.png");}
|
|
|
+ .playing-btn{background-image: url("@/static/images/common/wordView/playing-btn.gif");}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 单词详情-选
|
|
|
+.words-xuan-box{
|
|
|
+ display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
|
|
|
+ height: calc(100vh - 390rpx - 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;
|
|
|
+ color: #015fb0;font-weight: bold;font-size: 76rpx;text-align: center;margin: 64rpx auto 0;
|
|
|
+ text-shadow:-1rpx -1rpx 0 #fff,1rpx -1rpx 0 #fff,-1rpx 1rpx 0 #fff,1rpx 1rpx 0 #fff;
|
|
|
+ }
|
|
|
+ .select-change-box{
|
|
|
+ flex-shrink: 0;
|
|
|
+ .select-item{
|
|
|
+ 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;
|
|
|
+ text{@include multi-line-ellipsis(2);}
|
|
|
+ }
|
|
|
+ .select-item.active{
|
|
|
+ background-color: #6bcdff;border-bottom: 6rpx solid #a7e9fd;color: #fff;
|
|
|
+ }
|
|
|
+ .select-error::after,.select-right::after{
|
|
|
+ content: '';width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover;
|
|
|
+ position: absolute;top: -10rpx;right: -12rpx;
|
|
|
+ }
|
|
|
+ .select-error::after{background-image: url("@/static/images/common/wordView/word-error-icon.png");}
|
|
|
+ .select-right::after{background-image: url("@/static/images/common/wordView/word-right-icon.png");}
|
|
|
+ }
|
|
|
+ @media (max-height: 600px) {
|
|
|
+ .show-words-box{margin: 12rpx auto 0;}
|
|
|
+ .yb-play-box{margin: 12rpx auto 0;}
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 单词详情-背
|
|
|
+.words-bei-box{
|
|
|
+ display: flex;flex-direction: column;text-align: center;
|
|
|
+ height: calc(100vh - 390rpx - var(--status-bar-height));
|
|
|
+ // 答案
|
|
|
+ .words-answer-box{
|
|
|
+ min-width: 420rpx;max-width: 90%;height: 120rpx;line-height: 120rpx;margin: 64rpx auto 0;
|
|
|
+ background-color: #b7e2f5;color: #015fb0;font-size: 72rpx;display: inline-block;overflow: unset;
|
|
|
+ border-radius: 8rpx;padding: 0 10rpx;box-sizing: border-box;font-weight: bold;
|
|
|
+ .uni-input-placeholder.input-placeholder{color: #015fb0;font-size: 64rpx;}
|
|
|
+ }
|
|
|
+ // 兼容
|
|
|
+ .words-answer-box::placeholder { color: #015fb0;font-size: 64rpx; }
|
|
|
+ // 回答正确 && 回答错误
|
|
|
+ .words-answer-error-box,.words-answer-right-box{position: relative;}
|
|
|
+ .words-answer-error-box::after,.words-answer-right-box::after{
|
|
|
+ content: '';width: 46rpx;height: 46rpx;display: block;@include ezy-no-repeat-cover;
|
|
|
+ position: absolute;top: -22rpx;right: -12rpx;
|
|
|
+ }
|
|
|
+ // background-color: #fbc2c2;
|
|
|
+ .words-answer-error-box{color: #ff4d4d;}
|
|
|
+ .words-answer-error-box::after{background-image: url("@/static/images/common/wordView/word-error-icon.png");}
|
|
|
+ // background-color: #ddffdd;
|
|
|
+ .words-answer-right-box{color: #36c336;}
|
|
|
+ .words-answer-right-box::after{background-image: url("@/static/images/common/wordView/word-right-icon.png");}
|
|
|
+
|
|
|
+ .bei-body-box{flex: 1;overflow-y: auto;}
|
|
|
+
|
|
|
+ // 键盘
|
|
|
+ .words-keyboard-box{
|
|
|
+ background-color: #e5e8ee;box-sizing: border-box;padding: 24rpx 0;
|
|
|
+ // position: absolute;bottom: -10rpx;left: -10rpx;right: -10rpx;
|
|
|
+ .keyboard-row{display: flex;justify-content: space-between;
|
|
|
+ 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;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{
|
|
|
+ content: '';width: 46rpx;height: 46rpx;display: block;margin: 22rpx auto;
|
|
|
+ background-image: url("@/static/images/common/wordView/del-btn.svg");@include ezy-no-repeat-cover;}
|
|
|
+ .bei-confirm-btn-box{
|
|
|
+ width: 100%;height: 77rpx;line-height: 77rpx;
|
|
|
+ padding: 0 32rpx;display: flex;margin: 16rpx auto 0;
|
|
|
+ }
|
|
|
+ .big-btn{width: 120rpx;background-color: #fff;color:#000;margin-right: 6px;border-radius: 8rpx;}
|
|
|
+ .big-btn.active{color: #005ea1;}
|
|
|
+ .bei-confirm-btn{
|
|
|
+ background-color: transparent;color: #fff;
|
|
|
+ background-color: #4897d7;border-radius: 8rpx;flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media (max-height: 800px) {
|
|
|
+ .words-answer-box{margin-top: 32rpx;}
|
|
|
+ .pin-words-explain-box{margin-top: 32rpx;}
|
|
|
+ .audio-play-btn,.audio-playing-btn{margin: 32rpx auto 0;}
|
|
|
+ }
|
|
|
+ @media (max-height: 750px) {
|
|
|
+ .words-answer-box{
|
|
|
+ max-width: 86%;height: 100rpx;line-height: 100rpx;font-size: 66rpx;
|
|
|
+ .uni-input-placeholder.input-placeholder{font-size: 56rpx;}
|
|
|
+ }
|
|
|
+ .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: 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;}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 单词详解
|
|
|
+.words-details-page{
|
|
|
+ // background-image: url("@/static/images/course/course-cjdc-bj.png");
|
|
|
+ .words-details-body{overflow-y: auto;}
|
|
|
+ .details-word{color: #000;font-size: 62rpx;font-weight: bold;margin: 24rpx;}
|
|
|
+ .tysy-content{color: #333;margin: 16rpx 12rpx 0;}
|
|
|
+}
|
tanxue
