/******************** 这里放组件样式 ********************/ /**************** 系统响应式 ****************/ @mixin mediaSmall() { @media screen and (min-width: 650px) { @content; } } @mixin mediaMiddle() { @media screen and (min-width: 820px) { @content; } } @mixin mediaBig() { @media screen and (min-width: 1024px) { @content; } } // pad上隐藏 (大于650的) vue中使用 @media screen and (min-width: 650px) { .ezy-hidden-pad{display: none!important;} } // 手机上隐藏 (小于650的) vue中使用 @media screen and (max-width: 649px) { .ezy-hidden-phone{display: none!important;} } // 对于Pad上隐藏的元素 ---scss中使用 @mixin hideOnPad() { @media screen and (min-width: 650px) { display: none !important; } } // 对于手机上隐藏的元素 ---scss media中使用 @mixin hideOnPhone() { @media screen and (max-width: 649px) { display: none !important; } } /***** view *****/ view{box-sizing: border-box;} /***** 对齐方式 *****/ .ezy-tl{text-align: left;} .ezy-tc{text-align: center;} .ezy-tr{text-align: right;} /***** 状态栏 *****/ .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;} /***** 超出省略 *****/ // 文本超出省略号显示 (一行) @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;} // 文本超出省略号显示 (多行) @mixin multi-line-ellipsis($rows: 3){-webkit-line-clamp:$rows;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;display: -webkit-box;white-space: normal !important;-webkit-box-orient: vertical;} /***** 页面高度 *****/ /* #ifdef H5 */ //标题栏 $titleBar-page: calc(100vh - var(--status-bar-height)); //tabBar $titleBar-page: calc(100vh - var(--window-bottom)); //标题栏 + tabBar $titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - var(--window-bottom)); /* #endif */ /* #ifdef APP-PLUS */ //标题栏 $titleBar-page: calc(100vh - var(--status-bar-height)); //tabBar $titleBar-page: 100vh; //标题栏 + tabBar $titleBar-tabBar-page: calc(100vh - var(--status-bar-height)); /* #endif */ /***** 页面背景图 *****/ // no-repeat cover @mixin ezy-no-repeat-cover($position: center) { background-position: $position;background-size: cover;background-repeat: no-repeat; } // no-repeat contain @mixin ezy-no-repeat-contain($position: center) { background-position: $position;background-size: contain;background-repeat: no-repeat; } // active // 按钮缩小动画 // .ezy-btn-active{transition: 0.3s;} .ezy-btn-active:active{transform:scale(0.92);} // 列表item 元素向下 // .ezy-list-item-active{transition: 0.3s;} .ezy-list-item-active:active {transform: translateY(6rpx);opacity: 0.8;} // tab页 点击放大 // .ezy-tab-item-active{transition: 0.3s;} .ezy-tab-item-active:active {transform: scale(1.05);} /***** 富文本处理 *****/ @mixin ezy-rich-text() { div,p,span{margin: 0;padding: 0;} img{max-width: 100%;} } // 全屏的popup弹窗 .ezy-popup-width-all{ width: 100%; .uni-popup__wrapper{width: 100%;} } /***** tabbar *****/ .ezy-custom-tabbar{ width: 100%;height: 120rpx;position: fixed;left: 0;right: 0;bottom: 0; background-color: #f9f9f9;box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4); padding: 10rpx 24rpx;box-sizing: border-box;z-index: 9; display: flex;flex-direction: row;align-items: center; .tabbar-item-box{ width: 25%;display: flex;flex-wrap: nowrap;justify-content: space-evenly; } .tabbar-item{width: 60rpx;height: 80rpx;@include ezy-no-repeat-contain;z-index: 2;} /*** pad ***/ @include mediaSmall() { height: 80rpx; .tabbar-item{width: 37rpx;height: 59rpx;} } @include mediaBig() { height: 180rpx; .tabbar-item{width: 82rpx;height: 130rpx;} } } /***** 标题栏 *****/ // 三个元素 .ezy-navBar-box{ display: flex;align-items: center;justify-content: space-between; padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative; .nav-bar-icon{ width: 24rpx;height: 38rpx; background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover(); } .nav-bar-title{font-size: 36rpx;color: #fff;} // 考试数字 .nav-bar-other{ font-size: 30rpx;color: #fff;margin-right: 2%; .key-note{color: #ffff01;} } // 文字按钮 .text-btn{font-size: 26rpx;color: #fff;padding-top: 4rpx;box-sizing: border-box;} } // 两个元素 .icon-title-navBar-box{ display: flex;align-items: center;justify-content: center; padding: calc(6rpx + var(--status-bar-height)) 20rpx 16rpx;box-sizing: border-box;position: relative; .nav-bar-title{ font-size: 34rpx;height: 63rpx;line-height: 63rpx;color: #fff; max-width: 70%;position: relative;z-index: 1; } .nav-bar-icon{ width: 100rpx;height: 100rpx;display: flex;align-items: center; position: absolute;left: 0;top: calc( var(--status-bar-height) - 12rpx);z-index: 1; } .nav-bar-icon::before{ width: 24rpx;height: 38rpx;content: '';display: block;margin-left: 24rpx; background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover(); } &::before{ width: 100%;height: 356rpx;content: '';display: block;position: absolute;z-index: 0;top: 0;left: 0; background-image: url("@/static/images/phone/common/page-header-bj.png");@include ezy-no-repeat-cover(top); } /*** pad ***/ @include mediaSmall() { padding: calc(6rpx + var(--status-bar-height)) 20rpx 10rpx; .nav-bar-title{font-size: 28rpx;height: 46rpx;line-height: 46rpx;} .nav-bar-icon{width: 46rpx;height: 46rpx;top: calc(6rpx + var(--status-bar-height));} .nav-bar-icon::before{width: 16rpx;height: 25rpx;margin-left: 20rpx;} &::before{height: 160rpx;background-image: url("@/static/images/pad/common/page-header-bj.png");} } @include mediaBig(){ .nav-bar-title{font-size: 66rpx;height: 180rpx;line-height: 180rpx;} .nav-bar-icon{width: 180rpx;height: 180rpx;} .nav-bar-icon::before{width: 38rpx;height: 61rpx;margin-left: 42rpx;} &::before{height: 420rpx;} } } // 仅一个返回按钮 .ezy-nav-bar-icon{ width: 100rpx;height: 100rpx;position: absolute;left: 0;top: var(--status-bar-height); &::after { width: 24rpx;height: 38rpx;content: '';display: block;margin: 12rpx 32rpx 12rpx;transform: rotate(180deg); background-image: url("@/static/images/common/h-jt-icon.png");@include ezy-no-repeat-cover(); } @include mediaSmall() { width: 65rpx;height: 65rpx; &::after {width: 16rpx;height: 25rpx;margin: 8rpx 21rpx 8rpx;} } @include mediaBig() { width: 160rpx;height: 160rpx; &::after {width: 38rpx;height: 61rpx;margin: 19rpx 51rpx 19rpx;} } } /***** 登录按钮 *****/ .login-btn{ width: 655rpx;height: 92rpx;line-height: 92rpx;text-align: center;font-size:32rpx; margin-top: 84rpx;@include ezy-no-repeat-cover;font-weight: bold; @include mediaSmall() { width: 426rpx;height: 60rpx;line-height: 60rpx;font-size: 21rpx;margin-top: 55rpx; } @include mediaBig() { width: 1048rpx;height: 147rpx;line-height: 147rpx;font-size: 51rpx;margin-top: 134rpx; } } .login-btn-disabled{background-image: url("@/static/images/common/login/login-btn-bj-disabled.png");color:#999b9a;} .login-btn-normal{background-image: url("@/static/images/common/login/login-btn-bj.png");color:#fff;} /***** 试题 *****/ // 标题 .ezy-shiti-title{ width: 208rpx;height: 91rpx;line-height: 91rpx;text-align: center;color: #fff;font-size: 32rpx; background-image: url("@/static/images/common/exam/shiti-title.png");@include ezy-no-repeat-cover(); @include mediaSmall() {width: 135rpx;height: 59rpx;line-height: 59rpx;font-size: 22rpx;} @include mediaBig() {width: 333rpx;height: 146rpx;line-height: 146rpx;font-size: 54rpx;} } // 题干 .ezy-shiti-question{ margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box; text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text; @include mediaSmall() {margin: 16rpx 0 27rpx;font-size: 20rpx;padding: 0 6rpx;line-height: 1.8;} @include mediaBig() {margin: 38rpx 0 67rpx;font-size: 46rpx;padding: 0 16rpx;} } /***** 单选题 *****/ .ezy-danxuan-box{ margin: 0 10rpx; .danxuan-option-box{ width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx; font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx; display: flex; .option-change{ width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box; flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx; display: flex;align-items: center;justify-content: center;margin-top: 2rpx; } .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text; text-align: justify;word-wrap: break-word;word-break: break-all;display: block;} } .danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;} .danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;} .danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;} @include mediaSmall() { margin: 0 6rpx; .danxuan-option-box{ line-height: 62rpx;margin-bottom: 13rpx;font-size: 20rpx;padding: 6rpx 16rpx; .option-change{width: 31rpx;height: 31rpx;line-height: 31rpx;margin-right: 10rpx;} .option-question{font-size: 20rpx;margin-left: 4rpx;} } } @include mediaBig() { margin: 0 16rpx; .danxuan-option-box{ line-height: 154rpx;margin-bottom: 32rpx;font-size: 46rpx;padding: 16rpx 38rpx; .option-change{width: 77rpx;height: 77rpx;line-height: 77rpx;margin-right: 26rpx;} .option-question{font-size: 46rpx;margin-left: 10rpx;} } } } /***** 判断题 *****/ .ezy-panduan-box{ margin: 0 10rpx; .danxuan-option-box{ width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx; font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx; } .uni-radio-input{ width: 56rpx;height: 56rpx;border: 0;@include ezy-no-repeat-cover(); background-image: url("@/static/images/common/exam/option-bj.png");} .option-question{display: flex;} .option-question.active .uni-radio-input{ background-image: url("@/static/images/common/exam/option-active-img.png"); background-color: transparent!important; svg{display: none;} } .option-question.showError .uni-radio-input{ background-image: url("@/static/images/common/exam/option-error-img.png"); background-color: transparent!important; svg{display: none;} } .option-question.active_right .uni-radio-input{ background-image: url("@/static/images/common/exam/option-right-img.png"); background-color: transparent!important; svg{display: none;} } @include mediaSmall() { margin: 0 6rpx; .danxuan-option-box{line-height: 62rpx;margin-bottom: 13rpx;font-size: 20rpx;padding: 6rpx 16rpx;} .uni-radio-input{width: 36rpx;height: 36rpx;} } @include mediaBig() { margin: 0 16rpx; .danxuan-option-box{line-height: 154rpx;margin-bottom: 32rpx;font-size: 46rpx;padding: 16rpx 38rpx;} .uni-radio-input{width: 90rpx;height: 90rpx;} } } /***** 填空题 *****/ .ezy-tiankong-box{ margin: 0 10rpx; .tiankong-input {width: 116rpx!important;height: 52rpx;border: 1px solid #999;border-radius: 8rpx;} .tk-input-box{display: inline-block;position: relative;font-size: 0;margin: 0 4rpx;} .tiankong-input{text-align: center;} .tiankong-input.showError{color: #ff5757;} .tiankong-input.active_right{color: green;} .tk-input-box.showError::after{ content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx; background-image: url("@/static/images/common/exam/option-error-img.png");@include ezy-no-repeat-cover; } .tk-input-box.active_right::after{ content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx; background-image: url("@/static/images/common/exam/option-right-img.png");@include ezy-no-repeat-cover; } .ezy-shiti-question li{margin: 20rpx 0;} @include mediaSmall() { margin: 0 6rpx; .tiankong-input {width: 75rpx!important;height: 34rpx;border-radius: 5rpx;} .tk-input-box{margin: 0 3rpx;} .tk-input-box.showError::after, .tk-input-box.active_right::after{width: 20rpx;height: 20rpx;top: -8rpx;right: -4rpx;} .ezy-shiti-question li{margin: 13rpx 0;} } @include mediaBig() { margin: 0 16rpx; .tiankong-input {width: 186rpx!important;height: 83rpx;border-radius: 13rpx;} .tk-input-box{margin: 0 6rpx;} .tk-input-box.showError::after, .tk-input-box.active_right::after{width: 48rpx;height: 48rpx;top: -19rpx;right: -10rpx;} .ezy-shiti-question li{margin: 32rpx 0;} } } /***** 英语题 *****/ .ezy-yingyu-danxuan-box{ .yingyu-danxuan-option-box{ width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx; font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx; display: flex; .option-change{ width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box; flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx; display: flex;align-items: center;justify-content: center;margin-top: 4rpx; } .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text; text-align: justify;word-wrap: break-word;word-break: break-all;display: block;} } .yingyu-danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;} .yingyu-danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;} .yingyu-danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;} @include mediaSmall() { .yingyu-danxuan-option-box{ line-height: 62rpx;margin-bottom: 13rpx;font-size: 20rpx;padding: 6rpx 16rpx; .option-change{width: 31rpx;height: 31rpx;line-height: 31rpx;margin-right: 10rpx;margin-top: 2rpx;} .option-question{font-size: 20rpx;margin-left: 4rpx;} } } @include mediaBig() { .yingyu-danxuan-option-box{ line-height: 154rpx;margin-bottom: 32rpx;font-size: 46rpx;padding: 16rpx 38rpx; .option-change{width: 77rpx;height: 77rpx;line-height: 77rpx;margin-right: 26rpx;margin-top: 4rpx;} .option-question{font-size: 46rpx;margin-left: 10rpx;} } } } /***** 英语题播放按钮 *****/ .yingyu-canplay-img,.yingyu-playing-img{ width: 48rpx;height: 48rpx;display: inline-block;margin: 0 24rpx 3rpx; vertical-align: middle;@include ezy-no-repeat-cover(); @include mediaSmall() {width: 31rpx;height: 31rpx;margin: 0 16rpx 2rpx;} @include mediaBig() {width: 77rpx;height: 77rpx;margin: 0 38rpx 5rpx;} } .yingyu-canplay-img{background-image: url("@/static/images/common/exam/yingyu-canplay-img.png");} .yingyu-playing-img{background-image: url("@/static/images/common/exam/yingyu-playing-img.gif");} /***** 试题白色的框 *****/ .shiti-frame-box{ width: 95%;height: auto;background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2); flex: 1;position: relative;display: flex;flex-direction: column; border-radius: 16rpx;box-sizing: border-box;padding:32rpx 24rpx 36rpx;margin: 20rpx 2.5% 36rpx; } .ezy-page-body{ display: flex;flex-direction: column;flex: 1; position: relative;background-color: #fff;z-index: 1; border-radius: 20rpx 20rpx 0 0;padding: 42rpx 0;overflow: hidden; @include mediaSmall() { padding: 28rpx 0 10rpx; } @include mediaBig() {padding: 64rpx 0 32rpx;} } /***** 模拟标题栏 *****/ /* .ezy-title-bar { height: calc(44px + env(safe-area-inset-top)); position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right); background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box; display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998; } */ // 小的提示弹窗 .ezy-tip-dialog{ position: relative; .tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;} .tip-title{ color: #343434;font-size: 38rpx;margin-bottom: 24rpx; } .tip-content{ color: #666;font-size: 32rpx;padding-bottom: 42rpx; border-bottom: 1px dashed #70cbf4;line-height: 1.6; } /*** 按钮 ***/ //其他按钮 .tip-btn-box{ width: 100%;display: flex;justify-content: space-between;margin: 52rpx 0 0; .not-confirm-btn,.confirm-btn{ width: 248rpx;height: 92rpx;line-height: 92rpx;font-size: 32rpx; color: #fff;@include ezy-no-repeat-cover; } .not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");} .confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");} } //关闭 .close-btn{ width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center; position: absolute;right: 12rpx;top: 12rpx; } .close-btn::after{ content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover; background-image: url("@/static/images/common/close-icon.png"); } @include mediaSmall() { .tip-title{font-size: 24rpx;margin-bottom: 16rpx;} .tip-content{font-size: 20rpx;padding-bottom: 27rpx;} .tip-btn-box{ margin: 34rpx 0 0; .not-confirm-btn,.confirm-btn{width: 161rpx;height: 60rpx;line-height: 60rpx;font-size: 20rpx;} } .close-btn{width: 65rpx;height: 65rpx;right: 8rpx;top: 8rpx;} .close-btn::after{width: 34rpx;height: 34rpx;} } @include mediaBig() { .tip-title{font-size: 54rpx;margin-bottom: 38rpx;} .tip-content{font-size: 46rpx;padding-bottom: 67rpx;} .tip-btn-box{ margin: 83rpx 0 0; .not-confirm-btn,.confirm-btn{width: 397rpx;height: 147rpx;line-height: 147rpx;font-size: 46rpx;} } .close-btn{width: 160rpx;height: 160rpx;right: 19rpx;top: 19rpx;} .close-btn::after{width: 83rpx;height: 83rpx;} } } .tip-small-dialog{ .tip-content-box{ width: 625rpx;height: 365rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-small-bj.png"); } .tip-btn-box{ margin: 0; .not-confirm-btn,.confirm-btn{ width: 220rpx;height: 82rpx;line-height: 82rpx;margin: 30rpx 20rpx 0; } } @include mediaSmall() { .tip-content-box{width: 406rpx;height: 237rpx;padding: 27rpx 31rpx;} .tip-btn-box{ .not-confirm-btn,.confirm-btn{ width: 143rpx;height: 53rpx;line-height: 53rpx;margin: 20rpx 13rpx 0; font-size: 20rpx; } } } @include mediaBig() { .tip-content-box{width: 1000rpx;height: 584rpx;padding: 67rpx 77rpx;} .tip-btn-box{ .not-confirm-btn,.confirm-btn{ width: 352rpx;height: 131rpx;line-height: 131rpx;margin: 48rpx 32rpx 0; font-size: 46rpx; } } } } .tip-middle-dialog{ .tip-content-box{ width: 625rpx;height: 423rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-middle-bj.png"); } .tip-content{padding-bottom: 42rpx;} .tip-btn-box{margin: 32rpx 0 0;} @include mediaSmall() { .tip-content-box{width: 406rpx;height: 275rpx;padding: 27rpx 31rpx;} .tip-content{padding-bottom: 27rpx;} .tip-btn-box{margin: 21rpx 0 0;} } @include mediaBig() { .tip-content-box{width: 1000rpx;height: 677rpx;padding: 67rpx 77rpx;} .tip-content{padding-bottom: 67rpx;} .tip-btn-box{margin: 51rpx 0 0;} } } .tip-big-dialog{ .tip-content-box{ width: 625rpx;height: 519rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-big-bj.png"); } .tip-content{min-height: 240rpx;text-align: justify;} @include mediaSmall() { .tip-content-box{width: 406rpx;height: 337rpx;padding: 27rpx 31rpx;} .tip-content{min-height: 156rpx;} } @include mediaBig() { .tip-content-box{width: 1000rpx;height: 830rpx;padding: 67rpx 77rpx;} .tip-content{min-height: 384rpx;} } } // 一个确认按钮的弹窗 .small-one-button-dialog{ .tip-content-box{ width: 625rpx;height: 365rpx;padding: 36rpx 48rpx; @include ezy-no-repeat-cover;box-sizing: border-box;text-align:center; background-image: url("@/static/images/common/tip-small-bj.png"); } .tip-content{ color: #222;font-size: 38rpx;padding-bottom: 36rpx; display: flex;justify-content: center;align-items: center; border-bottom: 1px dashed #70cbf4;line-height: 1.6; min-height: 150rpx; } .tip-btn-box{ width: 100%;display: flex;justify-content: space-between;justify-content: center;margin: 36rpx 0 0; .tip-btn{ width: 394rpx;height: 88rpx;line-height: 88rpx; color: #fff;@include ezy-no-repeat-cover;text-align: center; background-image: url("@/static/images/common/tip-one-confirm-btn.png"); } } @include mediaSmall() { .tip-content-box{width: 406rpx;height: 237rpx;padding: 23rpx 31rpx;} .tip-content{font-size: 22rpx;padding-bottom: 23rpx;min-height: 98rpx;} .tip-btn-box{ margin: 23rpx 0 0; .tip-btn{width: 256rpx;height: 57rpx;line-height: 57rpx;font-size: 20rpx;} } } @include mediaBig() { .tip-content-box{width: 1000rpx;height: 584rpx;padding: 58rpx 77rpx;} .tip-content{font-size: 54rpx;padding-bottom: 58rpx;min-height: 240rpx;} .tip-btn-box{ margin: 58rpx 0 0; .tip-btn{width: 630rpx;height: 141rpx;line-height: 141rpx;font-size: 46rpx;} } } } // 大鹅提示弹窗 .tip-e-dialog{ width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;@include ezy-no-repeat-cover; background-image: url("@/static/images/common/tip-big-bj.png");position: relative; .close-btn{ width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center; position: absolute;right: 12rpx;top: 12rpx; } .close-btn::after{ content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover; background-image: url("@/static/images/common/close-icon.png"); } .e-img{height: 240rpx;@include ezy-no-repeat-cover;margin: 42rpx auto 24rpx;} .kx-e-img{width: 302rpx;background-image: url("@/static/images/common/xuexi/dialog-e-img1.png");} .bs-e-img{width: 219rpx;background-image: url("@/static/images/common/xuexi/dialog-e-img2.png");} .text-score{ width: 100%;text-align: center;font-size: 36rpx;color: #333; } .time-tip-box{ width: 100%;text-align: center;font-size: 30rpx;color: #9e9e9f; margin-top: 16rpx; } @include mediaSmall() { width: 406rpx;height: 337rpx;padding: 27rpx 31rpx; .close-btn{width: 65rpx;height: 65rpx;right: 8rpx;top: 8rpx;} .close-btn::after{width: 34rpx;height: 34rpx;} .e-img{height: 156rpx;margin: 27rpx auto 16rpx;} .kx-e-img{width: 196rpx;} .bs-e-img{width: 142rpx;} .text-score{font-size: 22rpx;} .time-tip-box{font-size: 20rpx;margin-top: 10rpx;} } @include mediaBig() { width: 1000rpx; height: 830rpx; padding: 67rpx 77rpx; .close-btn{width: 160rpx;height: 160rpx;right: 19rpx;top: 19rpx;} .close-btn::after{width: 83rpx;height: 83rpx;} .e-img{height: 384rpx;margin: 67rpx auto 38rpx;} .kx-e-img{width: 483rpx;} .bs-e-img{width: 350rpx;} .text-score{font-size: 54rpx;} .time-tip-box{font-size: 46rpx;margin-top: 26rpx;} } } /***** 学科tab *****/ .ezy-xueke-tab-box{ display: flex;justify-content: center;margin-bottom: 24rpx;flex-shrink: 0; .tab-item{ width: 242rpx;height: 90rpx;line-height: 90rpx;font-size: 30rpx; background-image: url("@/static/images/phone/xuanke/tab-item-bj.png"); text-align: center;color: #a6a6a6;@include ezy-no-repeat-cover; } .tab-item.active{ color: #fff;background-image: url("@/static/images/phone/xuanke/tab-item-a.png"); } @include mediaSmall() { .tab-item{ width: 238rpx;height: 58rpx;line-height: 58rpx;font-size: 24rpx; background-image: url("@/static/images/pad/xuanke/tab-item-bj.png");} .tab-item.active{background-image: url("@/static/images/pad/xuanke/tab-item-a.png");} } @include mediaBig() { .tab-item{width: 620rpx;height: 152rpx;line-height: 152rpx;font-size: 60rpx;margin: 0 6rpx;} } } // tab页面 /* .ezy-tab-border{ flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px; margin: 12rpx auto 32rpx;position: relative;box-sizing: border-box;display: flex;flex-direction: column; } .ezy-tab-box{ height: 82rpx!important; background-color: rgba(255, 255, 255, 0.6);z-index: 3;margin: 20rpx 20rpx 0; box-sizing: border-box;padding: 10rpx 12rpx;border-radius: 8rpx; .segmented-control__text{color: #333!important;} .segmented-control__item--button,.segmented-control__item--button--last{height: 62rpx;border: 0;border-width: 0!important;border-radius: 8rpx;} .segmented-control__item--button--active .segmented-control__text{color: #fff!important;} }*/ //视频 .ezy-video-box{ width: 690rpx;height: 390rpx;margin: 0 auto 42rpx; box-shadow: 0 0rpx 16rpx rgba(100, 159, 241, 0.2); position: relative;box-sizing: border-box;padding: 0; .ezy-video{ width: 100%;height: 100%!important;background-color: transparent; .prism-big-play-btn{ width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/common/xuexi/play-btn.png"); top: 52%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20; .outter{border: 0;} } .prism-info-display{display: none;} .prism-time-display .time-bound,.prism-time-display .duration{color: #fff;} // 播放按钮动画 .play-apply-animation{animation:unset;} } @include mediaSmall() { width: 696rpx;height: 380rpx;margin: 0 auto 27rpx; box-shadow: 0 0rpx 10rpx rgba(100, 159, 241, 0.2); .ezy-video{ .prism-big-play-btn{width: 57rpx;height: 57rpx;} } } @include mediaBig() { width: 1940rpx;height: 1100rpx;margin: 0 auto 67rpx; box-shadow: 0 0rpx 26rpx rgba(100, 159, 241, 0.2); .ezy-video{ .prism-big-play-btn{width: 139rpx;height: 139rpx;} } } } // 暂无数据 .ezy-no-sj{ display: flex;align-items: center;flex-direction: column; flex: 1;justify-content: center;font-size: 32rpx;color: #666; icon{ width: 219rpx;height: 240rpx;@include ezy-no-repeat-cover; margin: 0 auto 32rpx; background-image: url("@/static/images/common/xuexi/dialog-e-img2.png"); } @include mediaSmall() { font-size: 22rpx; icon{width: 142rpx;height: 156rpx;margin: 0 auto 21rpx;} } @include mediaBig() { font-size: 54rpx; icon{width: 350rpx;height: 384rpx;margin: 0 auto 51rpx;} } } // 分享 .share-popup-box{ box-sizing: border-box;padding: 32rpx;position: relative; .share-title{font-size: 32rpx;color: #333;text-align: center;margin-bottom: 36rpx;} .close-btn{width: 100rpx;height: 100rpx;position: absolute;right: 0;top: 0; display: flex;align-items: center;justify-content: center;} .close-btn::after{content: '';width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover; background-image: url("@/static/images/common/close-icon.svg");} .share-list{display: flex;justify-content: space-evenly;margin: 42rpx 0;} .share-item{ display: flex;justify-content: center;flex-direction: column;align-items: center; .share-icon{width: 80rpx;height: 80rpx;@include ezy-no-repeat-cover;margin-bottom: 10rpx;} .wechat-icon{background-image: url("@/static/images/common/weixin-icon.svg");} .timeline-icon{background-image: url("@/static/images/common/pyq-icon.svg");} .share-text{font-size: 26rpx;color: #333;} } .share-close{width: 360rpx;height: 70rpx;line-height: 70rpx;background-color: #fff;border: 1rpx solid #3fd2a1; color: #3fd2a1;text-align: center;border-radius: 8rpx;margin: 32rpx auto 0;border-radius: 35rpx;} @include mediaSmall() { padding: 21rpx; .share-title{font-size: 22rpx;margin-bottom: 23rpx;} .close-btn{width: 65rpx;height: 65rpx;} .close-btn::after{width: 23rpx;height: 23rpx;} .share-list{margin: 27rpx 0;} .share-item{ .share-icon{width: 52rpx;height: 52rpx;margin-bottom: 10rpx;} .share-text{font-size: 20rpx;} } .share-close{width: 234rpx;height: 46rpx;line-height: 46rpx;border-radius: 23rpx;margin: 21rpx auto 0;} } @include mediaBig() { padding: 51rpx; .share-title{font-size: 54rpx;margin-bottom: 58rpx;} .close-btn{width: 160rpx;height: 160rpx;} .close-btn::after{width: 58rpx;height: 58rpx;} .share-list{margin: 67rpx 0;} .share-item{ .share-icon{width: 128rpx;height: 128rpx;margin-bottom: 16rpx;} .share-text{font-size: 46rpx;} } .share-close{width: 576rpx;height: 112rpx;line-height: 112rpx;border-radius: 56rpx;margin: 51rpx auto 0;} } } // 遮盖层 .ezy-mask-box{ position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: azure; color: #333;z-index: 999;display: flex;align-items: center;justify-content: center; } // 没有更多 .ezy-no-more{ color: rgb(119, 119, 119);font-size: 28rpx;text-align: center; @include mediaSmall() {font-size: 20rpx;} @include mediaBig() {font-size: 46rpx;} }