components.scss 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
  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上隐藏 (大于768的) vue中使用
  19. @media screen and (min-width: 768px) {
  20. .ezy-hidden-pad{display: none!important;}
  21. }
  22. // 手机上隐藏 (小于768的) vue中使用
  23. @media screen and (max-width: 767px) {
  24. .ezy-hidden-phone{display: none!important;}
  25. }
  26. // 对于Pad上隐藏的元素 ---scss中使用
  27. @mixin hideOnPad() {
  28. @media screen and (min-width: 768px) {
  29. display: none !important;
  30. }
  31. }
  32. // 对于手机上隐藏的元素 ---scss media中使用
  33. @mixin hideOnPhone() {
  34. @media screen and (max-width: 767px) {
  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. /*** pad ***/
  152. @include mediaSmall() {
  153. .nav-bar-title{font-size: 28rpx;}
  154. }
  155. @include mediaBig(){
  156. .nav-bar-title{font-size: 66rpx;height: 180rpx;line-height: 180rpx;}
  157. }
  158. }
  159. .icon-title-navBar-box::before{
  160. width: 100%;height: 356rpx;content: '';display: block;position: absolute;z-index: 0;top: 0;left: 0;
  161. background-image: url("@/static/images/phone/common/page-header-bj.png");@include ezy-no-repeat-cover(top);
  162. @include mediaSmall() {height: 160rpx;background-image: url("@/static/images/pad/common/page-header-bj.png");}
  163. @include mediaBig() {height: 350rpx;}
  164. }
  165. // 仅一个返回按钮
  166. .ezy-nav-bar-icon{width: 100rpx;height: 100rpx;position: absolute;left: 0;top: var(--status-bar-height);}
  167. .ezy-nav-bar-icon::after{
  168. width: 24rpx;height: 38rpx;content: '';display: block;margin: 12rpx 32rpx 12rpx;transform: rotate(180deg);
  169. background-image: url("@/static/images/common/h-jt-icon.png");@include ezy-no-repeat-cover();
  170. }
  171. /***** 登录按钮 *****/
  172. .login-btn{
  173. width: 655rpx;height: 92rpx;line-height: 92rpx;text-align: center;font-size:32rpx;
  174. margin-top: 84rpx;@include ezy-no-repeat-cover;font-weight: bold;
  175. @include mediaSmall() {
  176. width: 426rpx;height: 60rpx;line-height: 60rpx;font-size: 21rpx;margin-top: 55rpx;
  177. }
  178. @include mediaBig() {
  179. width: 1048rpx;height: 147rpx;line-height: 147rpx;font-size: 51rpx;margin-top: 134rpx;
  180. }
  181. }
  182. .login-btn-disabled{background-image: url("@/static/images/login/login-btn-bj-disabled.png");color:#999b9a;}
  183. .login-btn-normal{background-image: url("@/static/images/login/login-btn-bj.png");color:#fff;}
  184. /***** 试题 *****/
  185. // 标题
  186. .ezy-shiti-title{
  187. width: 208rpx;height: 91rpx;line-height: 91rpx;text-align: center;color: #fff;font-size: 32rpx;
  188. background-image: url("@/static/images/exam/shiti-title.png");@include ezy-no-repeat-cover();
  189. }
  190. // 题干
  191. .ezy-shiti-question{
  192. margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box;
  193. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text;
  194. }
  195. /***** 单选题 *****/
  196. .ezy-danxuan-box{
  197. margin: 0 10rpx;
  198. .danxuan-option-box{
  199. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  200. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  201. display: flex;
  202. .option-change{
  203. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  204. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  205. display: flex;align-items: center;justify-content: center;
  206. }
  207. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  208. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  209. }
  210. .danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  211. .danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  212. .danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  213. }
  214. /***** 判断题 *****/
  215. .ezy-panduan-box{
  216. margin: 0 10rpx;
  217. .danxuan-option-box{
  218. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  219. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  220. }
  221. .uni-radio-input{
  222. width: 56rpx;height: 56rpx;border: 0;@include ezy-no-repeat-cover();
  223. background-image: url("@/static/images/exam/option-bj.png");}
  224. .option-question{display: flex;}
  225. .option-question.active .uni-radio-input{
  226. background-image: url("@/static/images/exam/option-active-img.png");
  227. background-color: transparent!important;
  228. svg{display: none;}
  229. }
  230. .option-question.showError .uni-radio-input{
  231. background-image: url("@/static/images/exam/option-error-img.png");
  232. background-color: transparent!important;
  233. svg{display: none;}
  234. }
  235. .option-question.active_right .uni-radio-input{
  236. background-image: url("@/static/images/exam/option-right-img.png");
  237. background-color: transparent!important;
  238. svg{display: none;}
  239. }
  240. }
  241. /***** 填空题 *****/
  242. .ezy-tiankong-box{
  243. margin: 0 10rpx;
  244. .tiankong-input {width: 116rpx!important;height: 52rpx;border: 1px solid #999;border-radius: 8rpx;}
  245. .tk-input-box{display: inline-block;position: relative;font-size: 0;margin: 0 4rpx;}
  246. .tiankong-input{text-align: center;}
  247. .tiankong-input.showError{color: #ff5757;}
  248. .tiankong-input.active_right{color: green;}
  249. .tk-input-box.showError::after{
  250. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  251. background-image: url("@/static/images/exam/option-error-img.png");@include ezy-no-repeat-cover;
  252. }
  253. .tk-input-box.active_right::after{
  254. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  255. background-image: url("@/static/images/exam/option-right-img.png");@include ezy-no-repeat-cover;
  256. }
  257. .ezy-shiti-question li{margin: 20rpx 0;}
  258. }
  259. /***** 英语题 *****/
  260. .ezy-yingyu-danxuan-box{
  261. .yingyu-danxuan-option-box{
  262. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  263. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  264. display: flex;
  265. .option-change{
  266. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  267. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  268. display: flex;align-items: center;justify-content: center;
  269. }
  270. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  271. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  272. }
  273. .yingyu-danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  274. .yingyu-danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  275. .yingyu-danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  276. }
  277. /***** 英语题播放按钮 *****/
  278. .yingyu-canplay-img,.yingyu-playing-img{
  279. width: 48rpx;height: 48rpx;display: inline-block;margin: 0 24rpx 3rpx;
  280. vertical-align: middle;@include ezy-no-repeat-cover();
  281. }
  282. .yingyu-canplay-img{background-image: url("@/static/images/exam/yingyu-canplay-img.png");}
  283. .yingyu-playing-img{background-image: url("@/static/images/exam/yingyu-playing-img.gif");}
  284. /***** 试题白色的框 *****/
  285. .shiti-frame-box{
  286. width: 95%;height: auto;background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
  287. flex: 1;position: relative;display: flex;flex-direction: column;
  288. border-radius: 16rpx;box-sizing: border-box;padding:32rpx 24rpx 36rpx;margin: 20rpx 2.5% 36rpx;
  289. }
  290. .ezy-page-body{
  291. display: flex;flex-direction: column;flex: 1;
  292. position: relative;background-color: #fff;z-index: 1;
  293. border-radius: 20rpx 20rpx 0 0;padding: 42rpx 0;overflow: hidden;
  294. @include mediaSmall() {
  295. padding: 28rpx 0 10rpx;
  296. }
  297. @include mediaBig() {padding: 64rpx 0 32rpx;}
  298. }
  299. /***** 模拟标题栏 *****/
  300. .ezy-title-bar {
  301. height: calc(44px + env(safe-area-inset-top));
  302. position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right);
  303. background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box;
  304. display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998;
  305. }
  306. // 小的提示弹窗
  307. .ezy-tip-dialog{
  308. position: relative;
  309. .tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;}
  310. .tip-title{
  311. color: #343434;font-size: 38rpx;margin-bottom: 24rpx;
  312. }
  313. .tip-content{
  314. color: #666;font-size: 32rpx;padding-bottom: 42rpx;
  315. border-bottom: 1px dashed #70cbf4;line-height: 1.6;
  316. }
  317. /*** 按钮 ***/
  318. //其他按钮
  319. .tip-btn-box{
  320. width: 100%;display: flex;justify-content: space-between;margin: 52rpx 0 0;
  321. .not-confirm-btn,.confirm-btn{
  322. width: 248rpx;height: 92rpx;line-height: 92rpx;
  323. color: #fff;@include ezy-no-repeat-cover;
  324. }
  325. .not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");}
  326. .confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");}
  327. }
  328. //关闭
  329. .close-btn{
  330. width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
  331. position: absolute;right: 12rpx;top: 12rpx;
  332. }
  333. .close-btn::after{
  334. content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
  335. background-image: url("@/static/images/common/close-icon.png");
  336. }
  337. @include mediaSmall() {
  338. .tip-title{font-size: 25rpx;margin-bottom: 16rpx;}
  339. .tip-content{font-size: 21rpx;padding-bottom: 27rpx;}
  340. .tip-btn-box{
  341. margin: 34rpx 0 0;
  342. .not-confirm-btn,.confirm-btn{width: 161rpx;height: 60rpx;line-height: 60rpx;}
  343. }
  344. .close-btn{width: 65rpx;height: 65rpx;right: 8rpx;top: 8rpx;}
  345. .close-btn::after{width: 34rpx;height: 34rpx;}
  346. }
  347. @include mediaBig() {
  348. .tip-title{font-size: 61rpx;margin-bottom: 38rpx;}
  349. .tip-content{font-size: 51rpx;padding-bottom: 67rpx;}
  350. .tip-btn-box{
  351. margin: 83rpx 0 0;
  352. .not-confirm-btn,.confirm-btn{width: 397rpx;height: 147rpx;line-height: 147rpx;}
  353. }
  354. .close-btn{width: 160rpx;height: 160rpx;right: 19rpx;top: 19rpx;}
  355. .close-btn::after{width: 83rpx;height: 83rpx;}
  356. }
  357. }
  358. .tip-small-dialog{
  359. .tip-content-box{
  360. width: 625rpx;height: 365rpx;padding: 42rpx 48rpx;
  361. background-image: url("@/static/images/common/tip-small-bj.png");
  362. }
  363. .tip-btn-box{
  364. margin: 0;
  365. .not-confirm-btn,.confirm-btn{
  366. width: 220rpx;height: 82rpx;line-height: 82rpx;margin: 30rpx 20rpx 0;
  367. }
  368. }
  369. @include mediaSmall() {
  370. .tip-content-box{width: 406rpx;height: 237rpx;padding: 27rpx 31rpx;}
  371. .tip-btn-box{
  372. .not-confirm-btn,.confirm-btn{
  373. width: 143rpx;height: 53rpx;line-height: 53rpx;margin: 20rpx 13rpx 0;
  374. font-size: 20rpx;
  375. }
  376. }
  377. }
  378. @include mediaBig() {
  379. .tip-content-box{width: 1000rpx;height: 584rpx;padding: 67rpx 77rpx;}
  380. .tip-btn-box{
  381. .not-confirm-btn,.confirm-btn{
  382. width: 352rpx;height: 131rpx;line-height: 131rpx;margin: 48rpx 32rpx 0;
  383. font-size: 48rpx;
  384. }
  385. }
  386. }
  387. }
  388. .tip-middle-dialog{
  389. .tip-content-box{
  390. width: 625rpx;height: 423rpx;padding: 42rpx 48rpx;
  391. background-image: url("@/static/images/common/tip-middle-bj.png");
  392. }
  393. .tip-content{padding-bottom: 42rpx;}
  394. .tip-btn-box{margin: 32rpx 0 0;}
  395. }
  396. .tip-big-dialog{
  397. .tip-content-box{
  398. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;
  399. background-image: url("@/static/images/common/tip-big-bj.png");
  400. }
  401. .tip-content{min-height: 240rpx;text-align: justify;}
  402. }
  403. // 一个确认按钮的弹窗
  404. .small-one-button-dialog{
  405. .tip-content-box{
  406. width: 625rpx;height: 365rpx;padding: 36rpx 48rpx;
  407. @include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;
  408. background-image: url("@/static/images/common/tip-small-bj.png");
  409. }
  410. .tip-content{
  411. color: #222;font-size: 38rpx;padding-bottom: 36rpx;
  412. display: flex;justify-content: center;align-items: center;
  413. border-bottom: 1px dashed #70cbf4;line-height: 1.6;
  414. min-height: 150rpx;
  415. }
  416. .tip-btn-box{
  417. width: 100%;display: flex;justify-content: space-between;justify-content: center;margin: 36rpx 0 0;
  418. .tip-btn{
  419. width: 394rpx;height: 88rpx;line-height: 88rpx;
  420. color: #fff;@include ezy-no-repeat-cover;text-align: center;
  421. background-image: url("@/static/images/common/tip-one-confirm-btn.png");
  422. }
  423. }
  424. }
  425. // 大鹅提示弹窗
  426. .tip-e-dialog{
  427. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;@include ezy-no-repeat-cover;
  428. background-image: url("@/static/images/common/tip-big-bj.png");position: relative;
  429. .close-btn{
  430. width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
  431. position: absolute;right: 12rpx;top: 12rpx;
  432. }
  433. .close-btn::after{
  434. content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
  435. background-image: url("@/static/images/common/close-icon.png");
  436. }
  437. .e-img{height: 240rpx;@include ezy-no-repeat-cover;margin: 42rpx auto 24rpx;}
  438. .kx-e-img{width: 302rpx;background-image: url("@/static/images/xuexi/dialog-e-img1.png");}
  439. .bs-e-img{width: 219rpx;background-image: url("@/static/images/xuexi/dialog-e-img2.png");}
  440. .text-score{
  441. width: 100%;text-align: center;font-size: 36rpx;color: #333;
  442. }
  443. .time-tip-box{
  444. width: 100%;text-align: center;font-size: 30rpx;color: #9e9e9f;
  445. margin-top: 16rpx;
  446. }
  447. }
  448. /***** 学科tab *****/
  449. .ezy-xueke-tab-box{
  450. display: flex;justify-content: center;margin-bottom: 24rpx;flex-shrink: 0;
  451. .tab-item{
  452. width: 242rpx;height: 90rpx;line-height: 90rpx;font-size: 30rpx;
  453. background-image: url("@/static/images/phone/xuanke/tab-item-bj.png");
  454. text-align: center;color: #a6a6a6;@include ezy-no-repeat-cover;
  455. }
  456. .tab-item.active{
  457. color: #fff;background-image: url("@/static/images/phone/xuanke/tab-item-a.png");
  458. }
  459. @include mediaSmall() {
  460. .tab-item{
  461. width: 238rpx;height: 58rpx;line-height: 58rpx;font-size: 24rpx;
  462. background-image: url("@/static/images/pad/xuanke/tab-item-bj.png");}
  463. .tab-item.active{background-image: url("@/static/images/pad/xuanke/tab-item-a.png");}
  464. }
  465. @include mediaBig() {
  466. .tab-item{width: 620rpx;height: 152rpx;line-height: 152rpx;font-size: 60rpx;margin: 0 6rpx;}
  467. }
  468. }
  469. // tab页面
  470. .ezy-tab-border{
  471. flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
  472. margin: 12rpx auto 32rpx;position: relative;box-sizing: border-box;display: flex;flex-direction: column;
  473. }
  474. .ezy-tab-box{
  475. height: 82rpx!important;
  476. background-color: rgba(255, 255, 255, 0.6);z-index: 3;margin: 20rpx 20rpx 0;
  477. box-sizing: border-box;padding: 10rpx 12rpx;border-radius: 8rpx;
  478. .segmented-control__text{color: #333!important;}
  479. .segmented-control__item--button,.segmented-control__item--button--last{height: 62rpx;border: 0;border-width: 0!important;border-radius: 8rpx;}
  480. .segmented-control__item--button--active .segmented-control__text{color: #fff!important;}
  481. }
  482. //视频
  483. .ezy-video-box{
  484. width: 690rpx;height: 390rpx;margin: 0 auto 42rpx;
  485. box-shadow: 0 0rpx 16rpx rgba(100, 159, 241, 0.2);
  486. position: relative;box-sizing: border-box;padding: 0;
  487. .ezy-video{
  488. width: 100%;height: 100%!important;background-color: transparent;
  489. .prism-big-play-btn{
  490. width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/play-btn.png");
  491. top: 52%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20;
  492. .outter{border: 0;}
  493. }
  494. .prism-info-display{display: none;}
  495. .prism-time-display .time-bound,.prism-time-display .duration{color: #fff;}
  496. // 播放按钮动画
  497. .play-apply-animation{animation:unset;}
  498. }
  499. }
  500. // 升级提醒弹窗
  501. .phone-tip-dialog{
  502. width: 580rpx;border-radius: 12rpx;background-color: #fff;padding: 24rpx;
  503. .tip-title{padding-top: 24rpx;font-size: 34rpx;color: #333;text-align: center;}
  504. .tip-content{font-size: 32rpx;color: #666;margin:32rpx 32rpx 56rpx;line-height: 1.6;text-align: justify;}
  505. }
  506. // 暂无数据
  507. .ezy-no-sj{
  508. display: flex;align-items: center;flex-direction: column;
  509. flex: 1;justify-content: center;font-size: 32rpx;color: #666;
  510. icon{
  511. width: 219rpx;height: 240rpx;@include ezy-no-repeat-cover;
  512. margin: 0 auto 32rpx;
  513. background-image: url("@/static/images/xuexi/dialog-e-img2.png");
  514. }
  515. }
  516. // 分享
  517. .share-popup-box{
  518. box-sizing: border-box;padding: 32rpx;position: relative;
  519. .share-title{font-size: 32rpx;color: #333;text-align: center;margin-bottom: 36rpx;}
  520. .close-btn{width: 100rpx;height: 100rpx;position: absolute;right: 0;top: 0;
  521. display: flex;align-items: center;justify-content: center;}
  522. .close-btn::after{content: '';width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover;
  523. background-image: url("@/static/images/common/close-icon.svg");}
  524. .share-list{display: flex;justify-content: space-evenly;margin: 42rpx 0;}
  525. .share-item{
  526. display: flex;justify-content: center;flex-direction: column;align-items: center;
  527. .share-icon{width: 80rpx;height: 80rpx;@include ezy-no-repeat-cover;margin-bottom: 10rpx;}
  528. .wechat-icon{background-image: url("@/static/images/common/weixin-icon.svg");}
  529. .timeline-icon{background-image: url("@/static/images/common/pyq-icon.svg");}
  530. .share-text{font-size: 26rpx;color: #333;}
  531. }
  532. .share-close{width: 360rpx;height: 70rpx;line-height: 70rpx;background-color: #fff;border: 1rpx solid #3fd2a1;
  533. color: #3fd2a1;text-align: center;border-radius: 8rpx;margin: 32rpx auto 0;border-radius: 35rpx;}
  534. }
  535. // 遮盖层
  536. .ezy-mask-box{
  537. position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: azure;
  538. color: #333;z-index: 999;display: flex;align-items: center;justify-content: center;
  539. }
  540. // 没有更多
  541. .ezy-no-more{
  542. color: rgb(119, 119, 119);font-size: 28rpx;text-align: center;
  543. @include mediaSmall() {font-size: 18rpx;}
  544. @include mediaBig() {font-size: 40rpx;}
  545. }