|
|
@@ -945,6 +945,7 @@
|
|
|
}
|
|
|
.completed-status{background-image: url("@/static/images/common/xuexi/xw-status.png");}
|
|
|
.xx-text-box{flex: 1;}
|
|
|
+ .three-text-box{@include multi-line-ellipsis(3);}
|
|
|
.xx-item-btn,.xx-item-lock-btn{width: 77rpx;height: 77rpx;@include ezy-no-repeat-cover;}
|
|
|
.xx-item-btn{background-image: url("@/static/images/common/xuexi/xx-ml-play-icon.png");}
|
|
|
.xx-item-lock-btn{background-image: url("@/static/images/common/xuexi/xx-ml-lock-icon.png");}
|
|
|
@@ -2360,7 +2361,7 @@
|
|
|
.word-tab-box{
|
|
|
display: flex;align-items: center;flex-shrink: 0;width: 98%;overflow:hidden;
|
|
|
box-sizing: border-box;border-bottom: 3rpx dashed #2d9cff;padding: 0 0 16rpx;
|
|
|
- margin: 0 1%;
|
|
|
+ margin: 0 auto;
|
|
|
.tab-item-list,.uni-scroll-view-content{flex: 1;display: flex;flex-wrap: nowrap;flex-direction: row;overflow-x: auto;}
|
|
|
// @include single-line-ellipsis
|
|
|
.tab-item{
|
|
|
@@ -2386,6 +2387,45 @@
|
|
|
icon{width: 10rpx;height: 32rpx;background-color:#068aea;border-radius:4rpx;margin-right: 8rpx;}
|
|
|
text{font-size: 34rpx;color: #068aea;font-weight: bold;}
|
|
|
}
|
|
|
+
|
|
|
+ @include mediaSmall() {
|
|
|
+ .word-body-box{padding: 27rpx 0 0;}
|
|
|
+ .word-list-swiper-box{height: calc(100vh - 170rpx - var(--status-bar-height));}
|
|
|
+ .word-tab-box{
|
|
|
+ width: calc(100% - 48rpx);;border-bottom: 2rpx dashed #2d9cff;padding: 0 0 10rpx;
|
|
|
+ .tab-item{min-width: 135rpx;margin: 10rpx 12rpx;border-radius: 23rpx;font-size: 18rpx;padding: 12rpx 0;}
|
|
|
+ .word-jt{width: 33rpx;height: 52rpx;}
|
|
|
+ .word-jt::before{width: 21rpx;height: 21rpx;top: 16rpx;}
|
|
|
+ .jt-left::before{left: 0;}
|
|
|
+ .jt-right::before{right: 0;}
|
|
|
+ }
|
|
|
+ .word-list-body{padding: 0 24rpx;}
|
|
|
+ .no-word-box{font-size: 18rpx;}
|
|
|
+ .word-num-box{
|
|
|
+ padding: 16rpx 0;
|
|
|
+ icon{width: 6rpx;height: 21rpx;margin-right: 8rpx;}
|
|
|
+ text{font-size: 22rpx;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @include mediaBig() {
|
|
|
+ .word-body-box{padding: 67rpx 0 0;}
|
|
|
+ .word-tab-box{
|
|
|
+ border-bottom: 5rpx dashed #2d9cff;padding: 0 0 26rpx;
|
|
|
+ .tab-item{min-width: 237rpx;margin: 16rpx 10rpx;border-radius: 58rpx;font-size: 45rpx;padding: 26rpx 0;}
|
|
|
+ .word-jt{width: 80rpx;height: 128rpx;}
|
|
|
+ .word-jt::before{width: 51rpx;height: 51rpx;top: 38rpx;}
|
|
|
+ .jt-left::before{left: 19rpx;}
|
|
|
+ .jt-right::before{right: 19rpx;}
|
|
|
+ }
|
|
|
+ .word-list-body{padding: 0 46rpx;}
|
|
|
+ .no-word-box{font-size: 45rpx;}
|
|
|
+ .word-num-box{
|
|
|
+ padding: 32rpx 38rpx;
|
|
|
+ icon{width: 16rpx;height: 51rpx;margin-right: 13rpx;}
|
|
|
+ text{font-size: 54rpx;}
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 单词详情
|
|
|
@@ -2515,9 +2555,109 @@
|
|
|
}
|
|
|
.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 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;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;}
|
|
|
+ }
|
|
|
+
|
|
|
+ @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;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;}
|
tanxue