components.scss 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777
  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. .icon-title-navBar-box{
  119. display: flex;align-items: center;justify-content: center;
  120. padding: calc(6rpx + var(--status-bar-height)) 20rpx 16rpx;box-sizing: border-box;position: relative;
  121. .nav-bar-title{
  122. font-size: 34rpx;height: 63rpx;line-height: 63rpx;color: #fff;
  123. max-width: 70%;position: relative;z-index: 1;
  124. }
  125. .nav-bar-icon{
  126. width: 100rpx;height: 100rpx;display: flex;align-items: center;
  127. position: absolute;left: 0;top: calc( var(--status-bar-height) - 12rpx);z-index: 1;
  128. }
  129. .nav-bar-icon::before{
  130. width: 24rpx;height: 38rpx;content: '';display: block;margin-left: 24rpx;
  131. background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
  132. }
  133. &::before{
  134. width: 100%;height: 356rpx;content: '';display: block;position: absolute;z-index: 0;top: 0;left: 0;
  135. background-image: url("@/static/images/phone/common/page-header-bj.png");@include ezy-no-repeat-cover(top);
  136. }
  137. // 右侧文字按钮
  138. .navBar-text-btn{font-size: 26rpx;color: #fff;padding-top: 4rpx;box-sizing: border-box;
  139. position: absolute;right: 4%;}
  140. /*** pad ***/
  141. @include mediaSmall() {
  142. padding: calc(6rpx + var(--status-bar-height)) 20rpx 10rpx;
  143. .nav-bar-title{font-size: 28rpx;height: 46rpx;line-height: 46rpx;}
  144. .nav-bar-icon{width: 46rpx;height: 46rpx;top: calc(6rpx + var(--status-bar-height));}
  145. .nav-bar-icon::before{width: 16rpx;height: 25rpx;margin-left: 20rpx;}
  146. &::before{height: 160rpx;background-image: url("@/static/images/pad/common/page-header-bj.png");}
  147. .navBar-text-btn{font-size: 20rpx;padding-top: 3rpx;right: 3%;}
  148. }
  149. @include mediaBig(){
  150. .nav-bar-title{font-size: 66rpx;height: 180rpx;line-height: 180rpx;}
  151. .nav-bar-icon{width: 180rpx;height: 180rpx;}
  152. .nav-bar-icon::before{width: 38rpx;height: 61rpx;margin-left: 42rpx;}
  153. &::before{height: 420rpx;}
  154. .navBar-text-btn{font-size: 46rpx;padding-top: 6rpx;right: 3%;}
  155. }
  156. }
  157. // 仅一个返回按钮
  158. .ezy-nav-bar-icon{
  159. width: 100rpx;height: 100rpx;position: absolute;left: 0;top: var(--status-bar-height);
  160. &::after {
  161. width: 24rpx;height: 38rpx;content: '';display: block;margin: 12rpx 32rpx 12rpx;transform: rotate(180deg);
  162. background-image: url("@/static/images/common/h-jt-icon.png");@include ezy-no-repeat-cover();
  163. }
  164. @include mediaSmall() {
  165. width: 65rpx;height: 65rpx;
  166. &::after {width: 16rpx;height: 25rpx;margin: 8rpx 21rpx 8rpx;}
  167. }
  168. @include mediaBig() {
  169. width: 160rpx;height: 160rpx;
  170. &::after {width: 38rpx;height: 61rpx;margin: 19rpx 51rpx 19rpx;}
  171. }
  172. }
  173. /***** 登录按钮 *****/
  174. .login-btn{
  175. width: 655rpx;height: 92rpx;line-height: 92rpx;text-align: center;font-size:32rpx;
  176. margin-top: 84rpx;@include ezy-no-repeat-cover;font-weight: bold;
  177. @include mediaSmall() {
  178. width: 426rpx;height: 60rpx;line-height: 60rpx;font-size: 21rpx;margin-top: 55rpx;
  179. }
  180. @include mediaBig() {
  181. width: 1048rpx;height: 147rpx;line-height: 147rpx;font-size: 51rpx;margin-top: 134rpx;
  182. }
  183. }
  184. .login-btn-disabled{background-image: url("@/static/images/common/login/login-btn-bj-disabled.png");color:#999b9a;}
  185. .login-btn-normal{background-image: url("@/static/images/common/login/login-btn-bj.png");color:#fff;}
  186. /***** 试题 *****/
  187. // 标题
  188. .ezy-shiti-title{
  189. width: 208rpx;height: 91rpx;line-height: 91rpx;text-align: center;color: #fff;font-size: 32rpx;
  190. background-image: url("@/static/images/common/exam/shiti-title.png");@include ezy-no-repeat-cover();
  191. @include mediaSmall() {width: 135rpx;height: 59rpx;line-height: 59rpx;font-size: 22rpx;}
  192. @include mediaBig() {width: 333rpx;height: 146rpx;line-height: 146rpx;font-size: 54rpx;}
  193. }
  194. // 题干
  195. .ezy-shiti-question{
  196. margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box;
  197. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text;
  198. @include mediaSmall() {margin: 16rpx 0 27rpx;font-size: 20rpx;padding: 0 6rpx;line-height: 1.8;}
  199. @include mediaBig() {margin: 38rpx 0 67rpx;font-size: 46rpx;padding: 0 16rpx;}
  200. }
  201. /***** 单选题 *****/
  202. .ezy-danxuan-box{
  203. margin: 0 10rpx;
  204. .danxuan-option-box{
  205. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  206. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  207. display: flex;
  208. .option-change{
  209. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  210. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  211. display: flex;align-items: center;justify-content: center;margin-top: 2rpx;
  212. }
  213. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  214. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  215. }
  216. .danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  217. .danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  218. .danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  219. @include mediaSmall() {
  220. margin: 0 6rpx;
  221. .danxuan-option-box{
  222. line-height: 62rpx;margin-bottom: 13rpx;font-size: 20rpx;padding: 6rpx 16rpx;
  223. .option-change{width: 31rpx;height: 31rpx;line-height: 31rpx;margin-right: 10rpx;}
  224. .option-question{font-size: 20rpx;margin-left: 4rpx;}
  225. }
  226. }
  227. @include mediaBig() {
  228. margin: 0 16rpx;
  229. .danxuan-option-box{
  230. line-height: 154rpx;margin-bottom: 32rpx;font-size: 46rpx;padding: 16rpx 38rpx;
  231. .option-change{width: 77rpx;height: 77rpx;line-height: 77rpx;margin-right: 26rpx;}
  232. .option-question{font-size: 46rpx;margin-left: 10rpx;}
  233. }
  234. }
  235. }
  236. /***** 判断题 *****/
  237. .ezy-panduan-box{
  238. margin: 0 10rpx;
  239. .danxuan-option-box{
  240. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  241. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  242. }
  243. .uni-radio-input{
  244. width: 56rpx;height: 56rpx;border: 0;@include ezy-no-repeat-cover();
  245. background-image: url("@/static/images/common/exam/option-bj.png");}
  246. .option-question{display: flex;}
  247. .option-question.active .uni-radio-input{
  248. background-image: url("@/static/images/common/exam/option-active-img.png");
  249. background-color: transparent!important;
  250. svg{display: none;}
  251. }
  252. .option-question.showError .uni-radio-input{
  253. background-image: url("@/static/images/common/exam/option-error-img.png");
  254. background-color: transparent!important;
  255. svg{display: none;}
  256. }
  257. .option-question.active_right .uni-radio-input{
  258. background-image: url("@/static/images/common/exam/option-right-img.png");
  259. background-color: transparent!important;
  260. svg{display: none;}
  261. }
  262. @include mediaSmall() {
  263. margin: 0 6rpx;
  264. .danxuan-option-box{line-height: 62rpx;margin-bottom: 13rpx;font-size: 20rpx;padding: 6rpx 16rpx;}
  265. .uni-radio-input{width: 36rpx;height: 36rpx;}
  266. }
  267. @include mediaBig() {
  268. margin: 0 16rpx;
  269. .danxuan-option-box{line-height: 154rpx;margin-bottom: 32rpx;font-size: 46rpx;padding: 16rpx 38rpx;}
  270. .uni-radio-input{width: 90rpx;height: 90rpx;}
  271. }
  272. }
  273. /***** 填空题 *****/
  274. .ezy-tiankong-box{
  275. margin: 0 10rpx;
  276. .tiankong-input {width: 116rpx!important;height: 52rpx;border: 1px solid #999;border-radius: 8rpx;}
  277. .tk-input-box{display: inline-block;position: relative;font-size: 0;margin: 0 4rpx;}
  278. .tiankong-input{text-align: center;}
  279. .tiankong-input.showError{color: #ff5757;}
  280. .tiankong-input.active_right{color: green;}
  281. .tk-input-box.showError::after{
  282. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  283. background-image: url("@/static/images/common/exam/option-error-img.png");@include ezy-no-repeat-cover;
  284. }
  285. .tk-input-box.active_right::after{
  286. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  287. background-image: url("@/static/images/common/exam/option-right-img.png");@include ezy-no-repeat-cover;
  288. }
  289. .ezy-shiti-question li{margin: 20rpx 0;}
  290. @include mediaSmall() {
  291. margin: 0 6rpx;
  292. .tiankong-input {width: 75rpx!important;height: 34rpx;border-radius: 5rpx;}
  293. .tk-input-box{margin: 0 3rpx;}
  294. .tk-input-box.showError::after,
  295. .tk-input-box.active_right::after{width: 20rpx;height: 20rpx;top: -8rpx;right: -4rpx;}
  296. .ezy-shiti-question li{margin: 13rpx 0;}
  297. }
  298. @include mediaBig() {
  299. margin: 0 16rpx;
  300. .tiankong-input {width: 186rpx!important;height: 83rpx;border-radius: 13rpx;}
  301. .tk-input-box{margin: 0 6rpx;}
  302. .tk-input-box.showError::after,
  303. .tk-input-box.active_right::after{width: 48rpx;height: 48rpx;top: -19rpx;right: -10rpx;}
  304. .ezy-shiti-question li{margin: 32rpx 0;}
  305. }
  306. }
  307. /***** 英语题 *****/
  308. .ezy-yingyu-danxuan-box{
  309. .yingyu-danxuan-option-box{
  310. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  311. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  312. display: flex;
  313. .option-change{
  314. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  315. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  316. display: flex;align-items: center;justify-content: center;margin-top: 4rpx;
  317. }
  318. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  319. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  320. }
  321. .yingyu-danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  322. .yingyu-danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  323. .yingyu-danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  324. @include mediaSmall() {
  325. .yingyu-danxuan-option-box{
  326. line-height: 62rpx;margin-bottom: 13rpx;font-size: 20rpx;padding: 6rpx 16rpx;
  327. .option-change{width: 31rpx;height: 31rpx;line-height: 31rpx;margin-right: 10rpx;margin-top: 2rpx;}
  328. .option-question{font-size: 20rpx;margin-left: 4rpx;}
  329. }
  330. }
  331. @include mediaBig() {
  332. .yingyu-danxuan-option-box{
  333. line-height: 154rpx;margin-bottom: 32rpx;font-size: 46rpx;padding: 16rpx 38rpx;
  334. .option-change{width: 77rpx;height: 77rpx;line-height: 77rpx;margin-right: 26rpx;margin-top: 4rpx;}
  335. .option-question{font-size: 46rpx;margin-left: 10rpx;}
  336. }
  337. }
  338. }
  339. /***** 英语题播放按钮 *****/
  340. .yingyu-canplay-img,.yingyu-playing-img{
  341. width: 48rpx;height: 48rpx;display: inline-block;margin: 0 24rpx 3rpx;
  342. vertical-align: middle;@include ezy-no-repeat-cover();
  343. @include mediaSmall() {width: 31rpx;height: 31rpx;margin: 0 16rpx 2rpx;}
  344. @include mediaBig() {width: 77rpx;height: 77rpx;margin: 0 38rpx 5rpx;}
  345. }
  346. .yingyu-canplay-img{background-image: url("@/static/images/common/exam/yingyu-canplay-img.png");}
  347. .yingyu-playing-img{background-image: url("@/static/images/common/exam/yingyu-playing-img.gif");}
  348. /***** 试题白色的框 *****/
  349. .shiti-frame-box{
  350. width: 95%;height: auto;background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
  351. flex: 1;position: relative;display: flex;flex-direction: column;
  352. border-radius: 16rpx;box-sizing: border-box;padding:32rpx 24rpx 36rpx;margin: 20rpx 2.5% 36rpx;
  353. }
  354. .ezy-page-body{
  355. display: flex;flex-direction: column;flex: 1;
  356. position: relative;background-color: #fff;z-index: 1;
  357. border-radius: 20rpx 20rpx 0 0;padding: 42rpx 0;overflow: hidden;
  358. @include mediaSmall() {
  359. padding: 28rpx 0 10rpx;
  360. }
  361. @include mediaBig() {padding: 64rpx 0 32rpx;}
  362. }
  363. /***** 模拟标题栏 *****/
  364. /* .ezy-title-bar {
  365. height: calc(44px + env(safe-area-inset-top));
  366. position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right);
  367. background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box;
  368. display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998;
  369. } */
  370. // 小的提示弹窗
  371. .ezy-tip-dialog{
  372. position: relative;
  373. .tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;}
  374. .tip-title{
  375. color: #343434;font-size: 38rpx;margin-bottom: 24rpx;
  376. }
  377. .tip-content{
  378. color: #666;font-size: 32rpx;padding-bottom: 42rpx;
  379. border-bottom: 1px dashed #70cbf4;line-height: 1.6;
  380. }
  381. /*** 按钮 ***/
  382. //其他按钮
  383. .tip-btn-box{
  384. width: 100%;display: flex;justify-content: space-between;margin: 52rpx 0 0;
  385. .not-confirm-btn,.confirm-btn{
  386. width: 248rpx;height: 92rpx;line-height: 92rpx;font-size: 32rpx;
  387. color: #fff;@include ezy-no-repeat-cover;
  388. }
  389. .not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");}
  390. .confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");}
  391. }
  392. //关闭
  393. .close-btn{
  394. width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
  395. position: absolute;right: 12rpx;top: 12rpx;
  396. }
  397. .close-btn::after{
  398. content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
  399. background-image: url("@/static/images/common/close-icon.png");
  400. }
  401. @include mediaSmall() {
  402. .tip-title{font-size: 24rpx;margin-bottom: 16rpx;}
  403. .tip-content{font-size: 20rpx;padding-bottom: 27rpx;}
  404. .tip-btn-box{
  405. margin: 34rpx 0 0;
  406. .not-confirm-btn,.confirm-btn{width: 161rpx;height: 60rpx;line-height: 60rpx;font-size: 20rpx;}
  407. }
  408. .close-btn{width: 65rpx;height: 65rpx;right: 8rpx;top: 8rpx;}
  409. .close-btn::after{width: 34rpx;height: 34rpx;}
  410. }
  411. @include mediaBig() {
  412. .tip-title{font-size: 54rpx;margin-bottom: 38rpx;}
  413. .tip-content{font-size: 46rpx;padding-bottom: 67rpx;}
  414. .tip-btn-box{
  415. margin: 83rpx 0 0;
  416. .not-confirm-btn,.confirm-btn{width: 397rpx;height: 147rpx;line-height: 147rpx;font-size: 46rpx;}
  417. }
  418. .close-btn{width: 160rpx;height: 160rpx;right: 19rpx;top: 19rpx;}
  419. .close-btn::after{width: 83rpx;height: 83rpx;}
  420. }
  421. }
  422. .tip-small-dialog{
  423. .tip-content-box{
  424. width: 625rpx;height: 365rpx;padding: 42rpx 48rpx;
  425. background-image: url("@/static/images/common/tip-small-bj.png");
  426. }
  427. .tip-btn-box{
  428. margin: 0;
  429. .not-confirm-btn,.confirm-btn{
  430. width: 220rpx;height: 82rpx;line-height: 82rpx;margin: 30rpx 20rpx 0;
  431. }
  432. }
  433. @include mediaSmall() {
  434. .tip-content-box{width: 406rpx;height: 237rpx;padding: 27rpx 31rpx;}
  435. .tip-btn-box{
  436. .not-confirm-btn,.confirm-btn{
  437. width: 143rpx;height: 53rpx;line-height: 53rpx;margin: 20rpx 13rpx 0;
  438. font-size: 20rpx;
  439. }
  440. }
  441. }
  442. @include mediaBig() {
  443. .tip-content-box{width: 1000rpx;height: 584rpx;padding: 67rpx 77rpx;}
  444. .tip-btn-box{
  445. .not-confirm-btn,.confirm-btn{
  446. width: 352rpx;height: 131rpx;line-height: 131rpx;margin: 48rpx 32rpx 0;
  447. font-size: 46rpx;
  448. }
  449. }
  450. }
  451. }
  452. .tip-middle-dialog{
  453. .tip-content-box{
  454. width: 625rpx;height: 423rpx;padding: 42rpx 48rpx;
  455. background-image: url("@/static/images/common/tip-middle-bj.png");
  456. }
  457. .tip-content{padding-bottom: 42rpx;}
  458. .tip-btn-box{margin: 32rpx 0 0;}
  459. @include mediaSmall() {
  460. .tip-content-box{width: 406rpx;height: 275rpx;padding: 27rpx 31rpx;}
  461. .tip-content{padding-bottom: 27rpx;}
  462. .tip-btn-box{margin: 21rpx 0 0;}
  463. }
  464. @include mediaBig() {
  465. .tip-content-box{width: 1000rpx;height: 677rpx;padding: 67rpx 77rpx;}
  466. .tip-content{padding-bottom: 67rpx;}
  467. .tip-btn-box{margin: 51rpx 0 0;}
  468. }
  469. }
  470. .tip-big-dialog{
  471. .tip-content-box{
  472. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;
  473. background-image: url("@/static/images/common/tip-big-bj.png");
  474. }
  475. .tip-content{min-height: 240rpx;text-align: justify;}
  476. @include mediaSmall() {
  477. .tip-content-box{width: 406rpx;height: 337rpx;padding: 27rpx 31rpx;}
  478. .tip-content{min-height: 156rpx;}
  479. }
  480. @include mediaBig() {
  481. .tip-content-box{width: 1000rpx;height: 830rpx;padding: 67rpx 77rpx;}
  482. .tip-content{min-height: 384rpx;}
  483. }
  484. }
  485. // 一个确认按钮的弹窗
  486. .small-one-button-dialog{
  487. .tip-content-box{
  488. width: 625rpx;height: 365rpx;padding: 36rpx 48rpx;
  489. @include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;
  490. background-image: url("@/static/images/common/tip-small-bj.png");
  491. }
  492. .tip-content{
  493. color: #222;font-size: 38rpx;padding-bottom: 36rpx;
  494. display: flex;justify-content: center;align-items: center;
  495. border-bottom: 1px dashed #70cbf4;line-height: 1.6;
  496. min-height: 150rpx;
  497. }
  498. .tip-btn-box{
  499. width: 100%;display: flex;justify-content: space-between;justify-content: center;margin: 36rpx 0 0;
  500. .tip-btn{
  501. width: 394rpx;height: 88rpx;line-height: 88rpx;
  502. color: #fff;@include ezy-no-repeat-cover;text-align: center;
  503. background-image: url("@/static/images/common/tip-one-confirm-btn.png");
  504. }
  505. }
  506. @include mediaSmall() {
  507. .tip-content-box{width: 406rpx;height: 237rpx;padding: 23rpx 31rpx;}
  508. .tip-content{font-size: 22rpx;padding-bottom: 23rpx;min-height: 98rpx;}
  509. .tip-btn-box{
  510. margin: 23rpx 0 0;
  511. .tip-btn{width: 256rpx;height: 57rpx;line-height: 57rpx;font-size: 20rpx;}
  512. }
  513. }
  514. @include mediaBig() {
  515. .tip-content-box{width: 1000rpx;height: 584rpx;padding: 58rpx 77rpx;}
  516. .tip-content{font-size: 54rpx;padding-bottom: 58rpx;min-height: 240rpx;}
  517. .tip-btn-box{
  518. margin: 58rpx 0 0;
  519. .tip-btn{width: 630rpx;height: 141rpx;line-height: 141rpx;font-size: 46rpx;}
  520. }
  521. }
  522. }
  523. // 大鹅提示弹窗
  524. .tip-e-dialog{
  525. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;@include ezy-no-repeat-cover;
  526. background-image: url("@/static/images/common/tip-big-bj.png");position: relative;
  527. .close-btn{
  528. width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
  529. position: absolute;right: 12rpx;top: 12rpx;
  530. }
  531. .close-btn::after{
  532. content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
  533. background-image: url("@/static/images/common/close-icon.png");
  534. }
  535. .e-img{height: 240rpx;@include ezy-no-repeat-cover;margin: 42rpx auto 24rpx;}
  536. .kx-e-img{width: 302rpx;background-image: url("@/static/images/common/xuexi/dialog-e-img1.png");}
  537. .bs-e-img{width: 219rpx;background-image: url("@/static/images/common/xuexi/dialog-e-img2.png");}
  538. .text-score{
  539. width: 100%;text-align: center;font-size: 36rpx;color: #333;
  540. }
  541. .time-tip-box{
  542. width: 100%;text-align: center;font-size: 30rpx;color: #9e9e9f;
  543. margin-top: 16rpx;
  544. }
  545. @include mediaSmall() {
  546. width: 406rpx;height: 337rpx;padding: 27rpx 31rpx;
  547. .close-btn{width: 65rpx;height: 65rpx;right: 8rpx;top: 8rpx;}
  548. .close-btn::after{width: 34rpx;height: 34rpx;}
  549. .e-img{height: 156rpx;margin: 27rpx auto 16rpx;}
  550. .kx-e-img{width: 196rpx;}
  551. .bs-e-img{width: 142rpx;}
  552. .text-score{font-size: 22rpx;}
  553. .time-tip-box{font-size: 20rpx;margin-top: 10rpx;}
  554. }
  555. @include mediaBig() {
  556. width: 1000rpx;
  557. height: 830rpx;
  558. padding: 67rpx 77rpx;
  559. .close-btn{width: 160rpx;height: 160rpx;right: 19rpx;top: 19rpx;}
  560. .close-btn::after{width: 83rpx;height: 83rpx;}
  561. .e-img{height: 384rpx;margin: 67rpx auto 38rpx;}
  562. .kx-e-img{width: 483rpx;}
  563. .bs-e-img{width: 350rpx;}
  564. .text-score{font-size: 54rpx;}
  565. .time-tip-box{font-size: 46rpx;margin-top: 26rpx;}
  566. }
  567. }
  568. /***** 学科tab *****/
  569. .ezy-xueke-tab-box{
  570. display: flex;justify-content: center;margin-bottom: 24rpx;flex-shrink: 0;
  571. .tab-item{
  572. width: 242rpx;height: 90rpx;line-height: 90rpx;font-size: 30rpx;
  573. background-image: url("@/static/images/phone/xuanke/tab-item-bj.png");
  574. text-align: center;color: #a6a6a6;@include ezy-no-repeat-cover;
  575. }
  576. .tab-item.active{
  577. color: #fff;background-image: url("@/static/images/phone/xuanke/tab-item-a.png");
  578. }
  579. @include mediaSmall() {
  580. .tab-item{
  581. width: 238rpx;height: 58rpx;line-height: 58rpx;font-size: 24rpx;
  582. background-image: url("@/static/images/pad/xuanke/tab-item-bj.png");}
  583. .tab-item.active{background-image: url("@/static/images/pad/xuanke/tab-item-a.png");}
  584. }
  585. @include mediaBig() {
  586. .tab-item{width: 620rpx;height: 152rpx;line-height: 152rpx;font-size: 60rpx;margin: 0 6rpx;}
  587. }
  588. }
  589. // tab页面
  590. /* .ezy-tab-border{
  591. flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
  592. margin: 12rpx auto 32rpx;position: relative;box-sizing: border-box;display: flex;flex-direction: column;
  593. }
  594. .ezy-tab-box{
  595. height: 82rpx!important;
  596. background-color: rgba(255, 255, 255, 0.6);z-index: 3;margin: 20rpx 20rpx 0;
  597. box-sizing: border-box;padding: 10rpx 12rpx;border-radius: 8rpx;
  598. .segmented-control__text{color: #333!important;}
  599. .segmented-control__item--button,.segmented-control__item--button--last{height: 62rpx;border: 0;border-width: 0!important;border-radius: 8rpx;}
  600. .segmented-control__item--button--active .segmented-control__text{color: #fff!important;}
  601. }*/
  602. //视频
  603. .ezy-video-box{
  604. width: 690rpx;height: 390rpx;margin: 0 auto 42rpx;
  605. box-shadow: 0 0rpx 16rpx rgba(100, 159, 241, 0.2);
  606. position: relative;box-sizing: border-box;padding: 0;
  607. .ezy-video{
  608. width: 100%;height: 100%!important;background-color: transparent;
  609. .prism-big-play-btn{
  610. width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/common/xuexi/play-btn.png");
  611. top: 52%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20;
  612. .outter{border: 0;}
  613. }
  614. .prism-info-display{display: none;}
  615. .prism-time-display .time-bound,.prism-time-display .duration{color: #fff;}
  616. // 播放按钮动画
  617. .play-apply-animation{animation:unset;}
  618. }
  619. @include mediaSmall() {
  620. width: 696rpx;height: 380rpx;margin: 0 auto 27rpx;
  621. box-shadow: 0 0rpx 10rpx rgba(100, 159, 241, 0.2);
  622. .ezy-video{
  623. .prism-big-play-btn{width: 57rpx;height: 57rpx;}
  624. }
  625. }
  626. @include mediaBig() {
  627. width: 1940rpx;height: 1100rpx;margin: 0 auto 67rpx;
  628. box-shadow: 0 0rpx 26rpx rgba(100, 159, 241, 0.2);
  629. .ezy-video{
  630. .prism-big-play-btn{width: 139rpx;height: 139rpx;}
  631. }
  632. }
  633. }
  634. // 暂无数据
  635. .ezy-no-sj{
  636. display: flex;align-items: center;flex-direction: column;
  637. flex: 1;justify-content: center;font-size: 32rpx;color: #666;
  638. icon{
  639. width: 219rpx;height: 240rpx;@include ezy-no-repeat-cover;
  640. margin: 0 auto 32rpx;
  641. background-image: url("@/static/images/common/xuexi/dialog-e-img2.png");
  642. }
  643. @include mediaSmall() {
  644. font-size: 22rpx;
  645. icon{width: 142rpx;height: 156rpx;margin: 0 auto 21rpx;}
  646. }
  647. @include mediaBig() {
  648. font-size: 54rpx;
  649. icon{width: 350rpx;height: 384rpx;margin: 0 auto 51rpx;}
  650. }
  651. }
  652. // 分享
  653. .share-popup-box{
  654. box-sizing: border-box;padding: 32rpx;position: relative;
  655. .share-title{font-size: 32rpx;color: #333;text-align: center;margin-bottom: 36rpx;}
  656. .close-btn{width: 100rpx;height: 100rpx;position: absolute;right: 0;top: 0;
  657. display: flex;align-items: center;justify-content: center;}
  658. .close-btn::after{content: '';width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover;
  659. background-image: url("@/static/images/common/close-icon.svg");}
  660. .share-list{display: flex;justify-content: space-evenly;margin: 42rpx 0;}
  661. .share-item{
  662. display: flex;justify-content: center;flex-direction: column;align-items: center;
  663. .share-icon{width: 80rpx;height: 80rpx;@include ezy-no-repeat-cover;margin-bottom: 10rpx;}
  664. .wechat-icon{background-image: url("@/static/images/common/weixin-icon.svg");}
  665. .timeline-icon{background-image: url("@/static/images/common/pyq-icon.svg");}
  666. .share-text{font-size: 26rpx;color: #333;}
  667. }
  668. .share-close{width: 360rpx;height: 70rpx;line-height: 70rpx;background-color: #fff;border: 1rpx solid #3fd2a1;
  669. color: #3fd2a1;text-align: center;border-radius: 8rpx;margin: 32rpx auto 0;border-radius: 35rpx;}
  670. @include mediaSmall() {
  671. padding: 21rpx;
  672. .share-title{font-size: 22rpx;margin-bottom: 23rpx;}
  673. .close-btn{width: 65rpx;height: 65rpx;}
  674. .close-btn::after{width: 23rpx;height: 23rpx;}
  675. .share-list{margin: 27rpx 0;}
  676. .share-item{
  677. .share-icon{width: 52rpx;height: 52rpx;margin-bottom: 10rpx;}
  678. .share-text{font-size: 20rpx;}
  679. }
  680. .share-close{width: 234rpx;height: 46rpx;line-height: 46rpx;border-radius: 23rpx;margin: 21rpx auto 0;}
  681. }
  682. @include mediaBig() {
  683. padding: 51rpx;
  684. .share-title{font-size: 54rpx;margin-bottom: 58rpx;}
  685. .close-btn{width: 160rpx;height: 160rpx;}
  686. .close-btn::after{width: 58rpx;height: 58rpx;}
  687. .share-list{margin: 67rpx 0;}
  688. .share-item{
  689. .share-icon{width: 128rpx;height: 128rpx;margin-bottom: 16rpx;}
  690. .share-text{font-size: 46rpx;}
  691. }
  692. .share-close{width: 576rpx;height: 112rpx;line-height: 112rpx;border-radius: 56rpx;margin: 51rpx auto 0;}
  693. }
  694. }
  695. // 遮盖层
  696. .ezy-mask-box{
  697. position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: azure;
  698. color: #333;z-index: 999;display: flex;align-items: center;justify-content: center;
  699. }
  700. // 没有更多
  701. .ezy-no-more{
  702. color: rgb(119, 119, 119);font-size: 28rpx;text-align: center;
  703. @include mediaSmall() {font-size: 20rpx;}
  704. @include mediaBig() {font-size: 46rpx;}
  705. }