components.scss 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  1. /******************** 这里放组件样式 ********************/
  2. /**************** 系统响应式 ****************/
  3. @mixin mediaSmall() {
  4. @media screen and (min-width: 650px) {
  5. @content;
  6. }
  7. }
  8. @mixin mediaMiddle() {
  9. @media screen and (min-width: 820px) {
  10. @content;
  11. }
  12. }
  13. @mixin mediaBig() {
  14. @media screen and (min-width: 1024px) {
  15. @content;
  16. }
  17. }
  18. // pad上隐藏 (大于650的) vue中使用
  19. @media screen and (min-width: 650px) {
  20. .ezy-hidden-pad{display: none!important;}
  21. }
  22. // 手机上隐藏 (小于650的) vue中使用
  23. @media screen and (max-width: 649px) {
  24. .ezy-hidden-phone{display: none!important;}
  25. }
  26. // 对于Pad上隐藏的元素 ---scss中使用
  27. @mixin hideOnPad() {
  28. @media screen and (min-width: 650px) {
  29. display: none !important;
  30. }
  31. }
  32. // 对于手机上隐藏的元素 ---scss media中使用
  33. @mixin hideOnPhone() {
  34. @media screen and (max-width: 649px) {
  35. display: none !important;
  36. }
  37. }
  38. /***** view *****/
  39. view{box-sizing: border-box;}
  40. /***** 对齐方式 *****/
  41. .ezy-tl{text-align: left;}
  42. .ezy-tc{text-align: center;}
  43. .ezy-tr{text-align: right;}
  44. /***** 状态栏 *****/
  45. .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;}
  46. /***** 超出省略 *****/
  47. // 文本超出省略号显示 (一行)
  48. @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;}
  49. // 文本超出省略号显示 (多行)
  50. @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;}
  51. /***** 页面高度 *****/
  52. /* #ifdef H5 */
  53. //标题栏
  54. $titleBar-page: calc(100vh - var(--status-bar-height));
  55. //tabBar
  56. $titleBar-page: calc(100vh - var(--window-bottom));
  57. //标题栏 + tabBar
  58. $titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - var(--window-bottom));
  59. /* #endif */
  60. /* #ifdef APP-PLUS */
  61. //标题栏
  62. $titleBar-page: calc(100vh - var(--status-bar-height));
  63. //tabBar
  64. $titleBar-page: 100vh;
  65. //标题栏 + tabBar
  66. $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
  67. /* #endif */
  68. /***** 页面背景图 *****/
  69. // no-repeat cover
  70. @mixin ezy-no-repeat-cover($position: center) {
  71. background-position: $position;background-size: cover;background-repeat: no-repeat;
  72. }
  73. // no-repeat contain
  74. @mixin ezy-no-repeat-contain($position: center) {
  75. background-position: $position;background-size: contain;background-repeat: no-repeat;
  76. }
  77. // active
  78. // 按钮缩小动画
  79. // .ezy-btn-active{transition: 0.3s;}
  80. .ezy-btn-active:active{transform:scale(0.92);}
  81. // 列表item 元素向下
  82. // .ezy-list-item-active{transition: 0.3s;}
  83. .ezy-list-item-active:active {transform: translateY(6rpx);opacity: 0.8;}
  84. // tab页 点击放大
  85. // .ezy-tab-item-active{transition: 0.3s;}
  86. .ezy-tab-item-active:active {transform: scale(1.05);}
  87. /***** 富文本处理 *****/
  88. @mixin ezy-rich-text() {
  89. div,p,span{margin: 0;padding: 0;}
  90. img{max-width: 100%;}
  91. }
  92. // 全屏的popup弹窗
  93. .ezy-popup-width-all{
  94. width: 100%;
  95. .uni-popup__wrapper{width: 100%;}
  96. }
  97. /***** tabbar *****/
  98. .ezy-custom-tabbar{
  99. width: 100%;height: 120rpx;position: fixed;left: 0;right: 0;bottom: 0;
  100. background-color: #f9f9f9;box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
  101. padding: 10rpx 24rpx;box-sizing: border-box;z-index: 9;
  102. display: flex;flex-direction: row;align-items: center;
  103. .tabbar-item-box{
  104. width: 25%;display: flex;flex-wrap: nowrap;justify-content: space-evenly;
  105. }
  106. .tabbar-item{width: 60rpx;height: 80rpx;@include ezy-no-repeat-contain;z-index: 2;}
  107. /*** pad ***/
  108. @include mediaSmall() {
  109. height: 80rpx;
  110. .tabbar-item{width: 37rpx;height: 59rpx;}
  111. }
  112. @include mediaBig() {
  113. height: 180rpx;
  114. .tabbar-item{width: 82rpx;height: 130rpx;}
  115. }
  116. }
  117. /***** 标题栏 *****/
  118. // 三个元素
  119. .ezy-navBar-box{
  120. display: flex;align-items: center;justify-content: space-between;
  121. padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
  122. .nav-bar-icon{
  123. width: 24rpx;height: 38rpx;
  124. background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
  125. }
  126. .nav-bar-title{font-size: 36rpx;color: #fff;}
  127. // 考试数字
  128. .nav-bar-other{
  129. font-size: 30rpx;color: #fff;margin-right: 2%;
  130. .key-note{color: #ffff01;}
  131. }
  132. // 文字按钮
  133. .text-btn{font-size: 26rpx;color: #fff;padding-top: 4rpx;box-sizing: border-box;}
  134. }
  135. // 两个元素
  136. .icon-title-navBar-box{
  137. display: flex;align-items: center;justify-content: center;
  138. padding: calc(6rpx + var(--status-bar-height)) 20rpx 16rpx;box-sizing: border-box;position: relative;
  139. .nav-bar-title{
  140. font-size: 34rpx;height: 63rpx;line-height: 63rpx;color: #fff;
  141. max-width: 70%;position: relative;z-index: 1;
  142. }
  143. .nav-bar-icon{
  144. width: 100rpx;height: 100rpx;display: flex;align-items: center;
  145. position: absolute;left: 0;top: calc( var(--status-bar-height) - 12rpx);z-index: 1;
  146. }
  147. .nav-bar-icon::before{
  148. width: 24rpx;height: 38rpx;content: '';display: block;margin-left: 24rpx;
  149. background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
  150. }
  151. &::before{
  152. width: 100%;height: 356rpx;content: '';display: block;position: absolute;z-index: 0;top: 0;left: 0;
  153. background-image: url("@/static/images/phone/common/page-header-bj.png");@include ezy-no-repeat-cover(top);
  154. }
  155. /*** pad ***/
  156. @include mediaSmall() {
  157. padding: calc(6rpx + var(--status-bar-height)) 20rpx 10rpx;
  158. .nav-bar-title{font-size: 28rpx;height: 46rpx;line-height: 46rpx;}
  159. .nav-bar-icon{width: 46rpx;height: 46rpx;top: calc(6rpx + var(--status-bar-height));}
  160. .nav-bar-icon::before{width: 16rpx;height: 25rpx;margin-left: 20rpx;}
  161. &::before{height: 288rpx;background-image: url("@/static/images/pad/common/page-header-bj.png");}
  162. }
  163. @include mediaBig(){
  164. .nav-bar-title{font-size: 66rpx;height: 180rpx;line-height: 180rpx;}
  165. .nav-bar-icon{width: 180rpx;height: 180rpx;}
  166. .nav-bar-icon::before{width: 38rpx;height: 61rpx;margin-left: 42rpx;}
  167. &::before{height: 720rpx;}
  168. }
  169. }
  170. // 仅一个返回按钮
  171. .ezy-nav-bar-icon{
  172. width: 100rpx;height: 100rpx;position: absolute;left: 0;top: var(--status-bar-height);
  173. &::after {
  174. width: 24rpx;height: 38rpx;content: '';display: block;margin: 12rpx 32rpx 12rpx;transform: rotate(180deg);
  175. background-image: url("@/static/images/common/h-jt-icon.png");@include ezy-no-repeat-cover();
  176. }
  177. @include mediaSmall() {
  178. width: 65rpx;height: 65rpx;
  179. &::after {width: 16rpx;height: 25rpx;margin: 8rpx 21rpx 8rpx;}
  180. }
  181. @include mediaBig() {
  182. width: 160rpx;height: 160rpx;
  183. &::after {width: 38rpx;height: 61rpx;margin: 19rpx 51rpx 19rpx;}
  184. }
  185. }
  186. /***** 登录按钮 *****/
  187. .login-btn{
  188. width: 655rpx;height: 92rpx;line-height: 92rpx;text-align: center;font-size:32rpx;
  189. margin-top: 84rpx;@include ezy-no-repeat-cover;font-weight: bold;
  190. @include mediaSmall() {
  191. width: 426rpx;height: 60rpx;line-height: 60rpx;font-size: 21rpx;margin-top: 55rpx;
  192. }
  193. @include mediaBig() {
  194. width: 1048rpx;height: 147rpx;line-height: 147rpx;font-size: 51rpx;margin-top: 134rpx;
  195. }
  196. }
  197. .login-btn-disabled{background-image: url("@/static/images/login/login-btn-bj-disabled.png");color:#999b9a;}
  198. .login-btn-normal{background-image: url("@/static/images/login/login-btn-bj.png");color:#fff;}
  199. /***** 试题 *****/
  200. // 标题
  201. .ezy-shiti-title{
  202. width: 208rpx;height: 91rpx;line-height: 91rpx;text-align: center;color: #fff;font-size: 32rpx;
  203. background-image: url("@/static/images/exam/shiti-title.png");@include ezy-no-repeat-cover();
  204. }
  205. // 题干
  206. .ezy-shiti-question{
  207. margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box;
  208. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text;
  209. }
  210. /***** 单选题 *****/
  211. .ezy-danxuan-box{
  212. margin: 0 10rpx;
  213. .danxuan-option-box{
  214. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  215. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  216. display: flex;
  217. .option-change{
  218. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  219. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  220. display: flex;align-items: center;justify-content: center;
  221. }
  222. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  223. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  224. }
  225. .danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  226. .danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  227. .danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  228. }
  229. /***** 判断题 *****/
  230. .ezy-panduan-box{
  231. margin: 0 10rpx;
  232. .danxuan-option-box{
  233. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  234. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  235. }
  236. .uni-radio-input{
  237. width: 56rpx;height: 56rpx;border: 0;@include ezy-no-repeat-cover();
  238. background-image: url("@/static/images/exam/option-bj.png");}
  239. .option-question{display: flex;}
  240. .option-question.active .uni-radio-input{
  241. background-image: url("@/static/images/exam/option-active-img.png");
  242. background-color: transparent!important;
  243. svg{display: none;}
  244. }
  245. .option-question.showError .uni-radio-input{
  246. background-image: url("@/static/images/exam/option-error-img.png");
  247. background-color: transparent!important;
  248. svg{display: none;}
  249. }
  250. .option-question.active_right .uni-radio-input{
  251. background-image: url("@/static/images/exam/option-right-img.png");
  252. background-color: transparent!important;
  253. svg{display: none;}
  254. }
  255. }
  256. /***** 填空题 *****/
  257. .ezy-tiankong-box{
  258. margin: 0 10rpx;
  259. .tiankong-input {width: 116rpx!important;height: 52rpx;border: 1px solid #999;border-radius: 8rpx;}
  260. .tk-input-box{display: inline-block;position: relative;font-size: 0;margin: 0 4rpx;}
  261. .tiankong-input{text-align: center;}
  262. .tiankong-input.showError{color: #ff5757;}
  263. .tiankong-input.active_right{color: green;}
  264. .tk-input-box.showError::after{
  265. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  266. background-image: url("@/static/images/exam/option-error-img.png");@include ezy-no-repeat-cover;
  267. }
  268. .tk-input-box.active_right::after{
  269. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  270. background-image: url("@/static/images/exam/option-right-img.png");@include ezy-no-repeat-cover;
  271. }
  272. .ezy-shiti-question li{margin: 20rpx 0;}
  273. }
  274. /***** 英语题 *****/
  275. .ezy-yingyu-danxuan-box{
  276. .yingyu-danxuan-option-box{
  277. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  278. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  279. display: flex;
  280. .option-change{
  281. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  282. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  283. display: flex;align-items: center;justify-content: center;
  284. }
  285. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  286. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  287. }
  288. .yingyu-danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  289. .yingyu-danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  290. .yingyu-danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  291. }
  292. /***** 英语题播放按钮 *****/
  293. .yingyu-canplay-img,.yingyu-playing-img{
  294. width: 48rpx;height: 48rpx;display: inline-block;margin: 0 24rpx 3rpx;
  295. vertical-align: middle;@include ezy-no-repeat-cover();
  296. }
  297. .yingyu-canplay-img{background-image: url("@/static/images/exam/yingyu-canplay-img.png");}
  298. .yingyu-playing-img{background-image: url("@/static/images/exam/yingyu-playing-img.gif");}
  299. /***** 试题白色的框 *****/
  300. .shiti-frame-box{
  301. width: 95%;height: auto;background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
  302. flex: 1;position: relative;display: flex;flex-direction: column;
  303. border-radius: 16rpx;box-sizing: border-box;padding:32rpx 24rpx 36rpx;margin: 20rpx 2.5% 36rpx;
  304. }
  305. .ezy-page-body{
  306. display: flex;flex-direction: column;flex: 1;
  307. position: relative;background-color: #fff;z-index: 1;
  308. border-radius: 20rpx 20rpx 0 0;padding: 42rpx 0;overflow: hidden;
  309. @include mediaSmall() {
  310. padding: 28rpx 0 10rpx;
  311. }
  312. @include mediaBig() {padding: 64rpx 0 32rpx;}
  313. }
  314. /***** 模拟标题栏 *****/
  315. .ezy-title-bar {
  316. height: calc(44px + env(safe-area-inset-top));
  317. position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right);
  318. background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box;
  319. display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998;
  320. }
  321. // 小的提示弹窗
  322. .ezy-tip-dialog{
  323. position: relative;
  324. .tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;}
  325. .tip-title{
  326. color: #343434;font-size: 38rpx;margin-bottom: 24rpx;
  327. }
  328. .tip-content{
  329. color: #666;font-size: 32rpx;padding-bottom: 42rpx;
  330. border-bottom: 1px dashed #70cbf4;line-height: 1.6;
  331. }
  332. /*** 按钮 ***/
  333. //其他按钮
  334. .tip-btn-box{
  335. width: 100%;display: flex;justify-content: space-between;margin: 52rpx 0 0;
  336. .not-confirm-btn,.confirm-btn{
  337. width: 248rpx;height: 92rpx;line-height: 92rpx;font-size: 32rpx;
  338. color: #fff;@include ezy-no-repeat-cover;
  339. }
  340. .not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");}
  341. .confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");}
  342. }
  343. //关闭
  344. .close-btn{
  345. width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
  346. position: absolute;right: 12rpx;top: 12rpx;
  347. }
  348. .close-btn::after{
  349. content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
  350. background-image: url("@/static/images/common/close-icon.png");
  351. }
  352. @include mediaSmall() {
  353. .tip-title{font-size: 24rpx;margin-bottom: 16rpx;}
  354. .tip-content{font-size: 20rpx;padding-bottom: 27rpx;}
  355. .tip-btn-box{
  356. margin: 34rpx 0 0;
  357. .not-confirm-btn,.confirm-btn{width: 161rpx;height: 60rpx;line-height: 60rpx;font-size: 20rpx;}
  358. }
  359. .close-btn{width: 65rpx;height: 65rpx;right: 8rpx;top: 8rpx;}
  360. .close-btn::after{width: 34rpx;height: 34rpx;}
  361. }
  362. @include mediaBig() {
  363. .tip-title{font-size: 54rpx;margin-bottom: 38rpx;}
  364. .tip-content{font-size: 46rpx;padding-bottom: 67rpx;}
  365. .tip-btn-box{
  366. margin: 83rpx 0 0;
  367. .not-confirm-btn,.confirm-btn{width: 397rpx;height: 147rpx;line-height: 147rpx;font-size: 46rpx;}
  368. }
  369. .close-btn{width: 160rpx;height: 160rpx;right: 19rpx;top: 19rpx;}
  370. .close-btn::after{width: 83rpx;height: 83rpx;}
  371. }
  372. }
  373. .tip-small-dialog{
  374. .tip-content-box{
  375. width: 625rpx;height: 365rpx;padding: 42rpx 48rpx;
  376. background-image: url("@/static/images/common/tip-small-bj.png");
  377. }
  378. .tip-btn-box{
  379. margin: 0;
  380. .not-confirm-btn,.confirm-btn{
  381. width: 220rpx;height: 82rpx;line-height: 82rpx;margin: 30rpx 20rpx 0;
  382. }
  383. }
  384. @include mediaSmall() {
  385. .tip-content-box{width: 406rpx;height: 237rpx;padding: 27rpx 31rpx;}
  386. .tip-btn-box{
  387. .not-confirm-btn,.confirm-btn{
  388. width: 143rpx;height: 53rpx;line-height: 53rpx;margin: 20rpx 13rpx 0;
  389. font-size: 20rpx;
  390. }
  391. }
  392. }
  393. @include mediaBig() {
  394. .tip-content-box{width: 1000rpx;height: 584rpx;padding: 67rpx 77rpx;}
  395. .tip-btn-box{
  396. .not-confirm-btn,.confirm-btn{
  397. width: 352rpx;height: 131rpx;line-height: 131rpx;margin: 48rpx 32rpx 0;
  398. font-size: 46rpx;
  399. }
  400. }
  401. }
  402. }
  403. .tip-middle-dialog{
  404. .tip-content-box{
  405. width: 625rpx;height: 423rpx;padding: 42rpx 48rpx;
  406. background-image: url("@/static/images/common/tip-middle-bj.png");
  407. }
  408. .tip-content{padding-bottom: 42rpx;}
  409. .tip-btn-box{margin: 32rpx 0 0;}
  410. }
  411. .tip-big-dialog{
  412. .tip-content-box{
  413. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;
  414. background-image: url("@/static/images/common/tip-big-bj.png");
  415. }
  416. .tip-content{min-height: 240rpx;text-align: justify;}
  417. }
  418. // 一个确认按钮的弹窗
  419. .small-one-button-dialog{
  420. .tip-content-box{
  421. width: 625rpx;height: 365rpx;padding: 36rpx 48rpx;
  422. @include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;
  423. background-image: url("@/static/images/common/tip-small-bj.png");
  424. }
  425. .tip-content{
  426. color: #222;font-size: 38rpx;padding-bottom: 36rpx;
  427. display: flex;justify-content: center;align-items: center;
  428. border-bottom: 1px dashed #70cbf4;line-height: 1.6;
  429. min-height: 150rpx;
  430. }
  431. .tip-btn-box{
  432. width: 100%;display: flex;justify-content: space-between;justify-content: center;margin: 36rpx 0 0;
  433. .tip-btn{
  434. width: 394rpx;height: 88rpx;line-height: 88rpx;
  435. color: #fff;@include ezy-no-repeat-cover;text-align: center;
  436. background-image: url("@/static/images/common/tip-one-confirm-btn.png");
  437. }
  438. }
  439. }
  440. // 大鹅提示弹窗
  441. .tip-e-dialog{
  442. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;@include ezy-no-repeat-cover;
  443. background-image: url("@/static/images/common/tip-big-bj.png");position: relative;
  444. .close-btn{
  445. width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
  446. position: absolute;right: 12rpx;top: 12rpx;
  447. }
  448. .close-btn::after{
  449. content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
  450. background-image: url("@/static/images/common/close-icon.png");
  451. }
  452. .e-img{height: 240rpx;@include ezy-no-repeat-cover;margin: 42rpx auto 24rpx;}
  453. .kx-e-img{width: 302rpx;background-image: url("@/static/images/xuexi/dialog-e-img1.png");}
  454. .bs-e-img{width: 219rpx;background-image: url("@/static/images/xuexi/dialog-e-img2.png");}
  455. .text-score{
  456. width: 100%;text-align: center;font-size: 36rpx;color: #333;
  457. }
  458. .time-tip-box{
  459. width: 100%;text-align: center;font-size: 30rpx;color: #9e9e9f;
  460. margin-top: 16rpx;
  461. }
  462. @include mediaSmall() {
  463. width: 406rpx;height: 337rpx;padding: 27rpx 31rpx;
  464. .close-btn{width: 65rpx;height: 65rpx;right: 8rpx;top: 8rpx;}
  465. .close-btn::after{width: 34rpx;height: 34rpx;}
  466. .e-img{height: 156rpx;margin: 27rpx auto 16rpx;}
  467. .kx-e-img{width: 196rpx;}
  468. .bs-e-img{width: 142rpx;}
  469. .text-score{font-size: 22rpx;}
  470. .time-tip-box{font-size: 20rpx;margin-top: 10rpx;}
  471. }
  472. @include mediaBig() {
  473. width: 1000rpx;
  474. height: 830rpx;
  475. padding: 67rpx 77rpx;
  476. .close-btn{width: 160rpx;height: 160rpx;right: 19rpx;top: 19rpx;}
  477. .close-btn::after{width: 83rpx;height: 83rpx;}
  478. .e-img{height: 384rpx;margin: 67rpx auto 38rpx;}
  479. .kx-e-img{width: 483rpx;}
  480. .bs-e-img{width: 350rpx;}
  481. .text-score{font-size: 54rpx;}
  482. .time-tip-box{font-size: 46rpx;margin-top: 26rpx;}
  483. }
  484. }
  485. /***** 学科tab *****/
  486. .ezy-xueke-tab-box{
  487. display: flex;justify-content: center;margin-bottom: 24rpx;flex-shrink: 0;
  488. .tab-item{
  489. width: 242rpx;height: 90rpx;line-height: 90rpx;font-size: 30rpx;
  490. background-image: url("@/static/images/phone/xuanke/tab-item-bj.png");
  491. text-align: center;color: #a6a6a6;@include ezy-no-repeat-cover;
  492. }
  493. .tab-item.active{
  494. color: #fff;background-image: url("@/static/images/phone/xuanke/tab-item-a.png");
  495. }
  496. @include mediaSmall() {
  497. .tab-item{
  498. width: 238rpx;height: 58rpx;line-height: 58rpx;font-size: 24rpx;
  499. background-image: url("@/static/images/pad/xuanke/tab-item-bj.png");}
  500. .tab-item.active{background-image: url("@/static/images/pad/xuanke/tab-item-a.png");}
  501. }
  502. @include mediaBig() {
  503. .tab-item{width: 620rpx;height: 152rpx;line-height: 152rpx;font-size: 60rpx;margin: 0 6rpx;}
  504. }
  505. }
  506. // tab页面
  507. .ezy-tab-border{
  508. flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
  509. margin: 12rpx auto 32rpx;position: relative;box-sizing: border-box;display: flex;flex-direction: column;
  510. }
  511. .ezy-tab-box{
  512. height: 82rpx!important;
  513. background-color: rgba(255, 255, 255, 0.6);z-index: 3;margin: 20rpx 20rpx 0;
  514. box-sizing: border-box;padding: 10rpx 12rpx;border-radius: 8rpx;
  515. .segmented-control__text{color: #333!important;}
  516. .segmented-control__item--button,.segmented-control__item--button--last{height: 62rpx;border: 0;border-width: 0!important;border-radius: 8rpx;}
  517. .segmented-control__item--button--active .segmented-control__text{color: #fff!important;}
  518. }
  519. //视频
  520. .ezy-video-box{
  521. width: 690rpx;height: 390rpx;margin: 0 auto 42rpx;
  522. box-shadow: 0 0rpx 16rpx rgba(100, 159, 241, 0.2);
  523. position: relative;box-sizing: border-box;padding: 0;
  524. .ezy-video{
  525. width: 100%;height: 100%!important;background-color: transparent;
  526. .prism-big-play-btn{
  527. width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/play-btn.png");
  528. top: 52%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20;
  529. .outter{border: 0;}
  530. }
  531. .prism-info-display{display: none;}
  532. .prism-time-display .time-bound,.prism-time-display .duration{color: #fff;}
  533. // 播放按钮动画
  534. .play-apply-animation{animation:unset;}
  535. }
  536. }
  537. // 升级提醒弹窗
  538. .phone-tip-dialog{
  539. width: 580rpx;border-radius: 12rpx;background-color: #fff;padding: 24rpx;
  540. .tip-title{padding-top: 24rpx;font-size: 34rpx;color: #333;text-align: center;}
  541. .tip-content{font-size: 32rpx;color: #666;margin:32rpx 32rpx 56rpx;line-height: 1.6;text-align: justify;}
  542. }
  543. // 暂无数据
  544. .ezy-no-sj{
  545. display: flex;align-items: center;flex-direction: column;
  546. flex: 1;justify-content: center;font-size: 32rpx;color: #666;
  547. icon{
  548. width: 219rpx;height: 240rpx;@include ezy-no-repeat-cover;
  549. margin: 0 auto 32rpx;
  550. background-image: url("@/static/images/xuexi/dialog-e-img2.png");
  551. }
  552. }
  553. // 分享
  554. .share-popup-box{
  555. box-sizing: border-box;padding: 32rpx;position: relative;
  556. .share-title{font-size: 32rpx;color: #333;text-align: center;margin-bottom: 36rpx;}
  557. .close-btn{width: 100rpx;height: 100rpx;position: absolute;right: 0;top: 0;
  558. display: flex;align-items: center;justify-content: center;}
  559. .close-btn::after{content: '';width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover;
  560. background-image: url("@/static/images/common/close-icon.svg");}
  561. .share-list{display: flex;justify-content: space-evenly;margin: 42rpx 0;}
  562. .share-item{
  563. display: flex;justify-content: center;flex-direction: column;align-items: center;
  564. .share-icon{width: 80rpx;height: 80rpx;@include ezy-no-repeat-cover;margin-bottom: 10rpx;}
  565. .wechat-icon{background-image: url("@/static/images/common/weixin-icon.svg");}
  566. .timeline-icon{background-image: url("@/static/images/common/pyq-icon.svg");}
  567. .share-text{font-size: 26rpx;color: #333;}
  568. }
  569. .share-close{width: 360rpx;height: 70rpx;line-height: 70rpx;background-color: #fff;border: 1rpx solid #3fd2a1;
  570. color: #3fd2a1;text-align: center;border-radius: 8rpx;margin: 32rpx auto 0;border-radius: 35rpx;}
  571. }
  572. // 遮盖层
  573. .ezy-mask-box{
  574. position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: azure;
  575. color: #333;z-index: 999;display: flex;align-items: center;justify-content: center;
  576. }
  577. // 没有更多
  578. .ezy-no-more{
  579. color: rgb(119, 119, 119);font-size: 28rpx;text-align: center;
  580. @include mediaSmall() {font-size: 18rpx;}
  581. @include mediaBig() {font-size: 40rpx;}
  582. }