components.scss 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. /******************** 这里放组件样式 ********************/
  2. /***** view *****/
  3. view{box-sizing: border-box;}
  4. /***** 对齐方式 *****/
  5. .ezy-tl{text-align: left;}
  6. .ezy-tc{text-align: center;}
  7. .ezy-tr{text-align: right;}
  8. /***** 状态栏 *****/
  9. .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;}
  10. /***** 超出省略 *****/
  11. // 文本超出省略号显示 (一行)
  12. @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;}
  13. // 文本超出省略号显示 (多行)
  14. @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;}
  15. /***** 页面高度 *****/
  16. /* #ifdef H5 */
  17. //标题栏
  18. $titleBar-page: calc(100vh - var(--status-bar-height));
  19. //tabBar
  20. $titleBar-page: calc(100vh - var(--window-bottom));
  21. //标题栏 + tabBar
  22. $titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - var(--window-bottom));
  23. /* #endif */
  24. /* #ifdef APP-PLUS */
  25. //标题栏
  26. $titleBar-page: calc(100vh - var(--status-bar-height));
  27. //tabBar
  28. $titleBar-page: 100vh;
  29. //标题栏 + tabBar
  30. $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
  31. /* #endif */
  32. /***** 页面背景图 *****/
  33. // no-repeat cover
  34. @mixin ezy-no-repeat-cover($position: center) {
  35. background-position: $position;background-size: cover;background-repeat: no-repeat;
  36. }
  37. // no-repeat contain
  38. @mixin ezy-no-repeat-contain($position: center) {
  39. background-position: $position;background-size: contain;background-repeat: no-repeat;
  40. }
  41. // active
  42. // 按钮缩小动画
  43. // .ezy-btn-active{transition: 0.3s;}
  44. .ezy-btn-active:active{transform:scale(0.92);}
  45. // 列表item 元素向下
  46. // .ezy-list-item-active{transition: 0.3s;}
  47. .ezy-list-item-active:active {transform: translateY(6rpx);opacity: 0.8;}
  48. // tab页 点击放大
  49. // .ezy-tab-item-active{transition: 0.3s;}
  50. .ezy-tab-item-active:active {transform: scale(1.05);}
  51. /***** 富文本处理 *****/
  52. @mixin ezy-rich-text() {
  53. div,p,span{margin: 0;padding: 0;}
  54. img{max-width: 100%;}
  55. }
  56. // 全屏的popup弹窗
  57. .ezy-popup-width-all{
  58. width: 100%;
  59. .uni-popup__wrapper{width: 100%;}
  60. }
  61. /***** tabbar *****/
  62. .ezy-custom-tabbar{
  63. width: 100%;height: 100rpx;position: fixed;left: 0;right: 0;background-color: #f9f9f9;box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
  64. bottom: env(safe-area-inset-bottom);padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;box-sizing: border-box;z-index: 9;
  65. display: flex;flex-direction: row;align-items: center;
  66. .tabbar-item-box{
  67. width: 25%;display: flex;flex-wrap: nowrap;justify-content: space-evenly;
  68. }
  69. .tabbar-item{width: 60rpx;height: 80rpx;@include ezy-no-repeat-cover;z-index: 2;}
  70. }
  71. /***** 标题栏 *****/
  72. // 三个元素
  73. .ezy-navBar-box{
  74. display: flex;align-items: center;justify-content: space-between;
  75. padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
  76. .nav-bar-icon{
  77. width: 24rpx;height: 38rpx;
  78. background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
  79. }
  80. .nav-bar-title{font-size: 36rpx;color: #fff;}
  81. // 考试数字
  82. .nav-bar-other{
  83. font-size: 30rpx;color: #fff;margin-right: 2%;
  84. .key-note{color: #ffff01;}
  85. }
  86. // 文字按钮
  87. .text-btn{font-size: 26rpx;color: #fff;padding-top: 4rpx;box-sizing: border-box;}
  88. }
  89. // 两个元素
  90. .icon-title-navBar-box{
  91. display: flex;align-items: center;justify-content: center;
  92. padding: calc(6rpx + var(--status-bar-height)) 20rpx 16rpx;box-sizing: border-box;position: relative;
  93. .nav-bar-title{
  94. font-size: 34rpx;height: 63rpx;line-height: 63rpx;color: #fff;
  95. max-width: 70%;position: relative;z-index: 1;
  96. }
  97. .nav-bar-icon{
  98. width: 100rpx;height: 100rpx;display: flex;align-items: center;
  99. position: absolute;left: 0;top: calc( var(--status-bar-height) - 12rpx);z-index: 1;
  100. }
  101. .nav-bar-icon::before{
  102. width: 24rpx;height: 38rpx;content: '';display: block;margin-left: 24rpx;
  103. background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
  104. }
  105. }
  106. .icon-title-navBar-box::before{
  107. width: 100%;height: 356rpx;content: '';display: block;position: absolute;z-index: 0;top: 0;left: 0;
  108. background-image: url("@/static/images/common/page-header-bj.png");@include ezy-no-repeat-cover(top);
  109. }
  110. // 仅一个返回按钮
  111. .ezy-nav-bar-icon{width: 100rpx;height: 100rpx;position: absolute;left: 0;top: var(--status-bar-height);}
  112. .ezy-nav-bar-icon::after{
  113. width: 24rpx;height: 38rpx;content: '';display: block;margin: 12rpx 32rpx 12rpx;transform: rotate(180deg);
  114. background-image: url("@/static/images/common/h-jt-icon.png");@include ezy-no-repeat-cover();
  115. }
  116. /***** 试题 *****/
  117. // 标题
  118. .ezy-shiti-title{
  119. width: 208rpx;height: 91rpx;line-height: 91rpx;text-align: center;color: #fff;font-size: 32rpx;
  120. background-image: url("@/static/images/exam/shiti-title.png");@include ezy-no-repeat-cover();
  121. }
  122. // 题干
  123. .ezy-shiti-question{
  124. margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box;
  125. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text;
  126. }
  127. /***** 单选题 *****/
  128. .ezy-danxuan-box{
  129. margin: 0 10rpx;
  130. .danxuan-option-box{
  131. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  132. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  133. display: flex;
  134. .option-change{
  135. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  136. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  137. display: flex;align-items: center;justify-content: center;
  138. }
  139. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  140. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  141. }
  142. .danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  143. .danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  144. .danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  145. }
  146. /***** 判断题 *****/
  147. .ezy-panduan-box{
  148. margin: 0 10rpx;
  149. .danxuan-option-box{
  150. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  151. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  152. }
  153. .uni-radio-input{
  154. width: 56rpx;height: 56rpx;border: 0;@include ezy-no-repeat-cover();
  155. background-image: url("@/static/images/exam/option-bj.png");}
  156. .option-question{display: flex;}
  157. .option-question.active .uni-radio-input{
  158. background-image: url("@/static/images/exam/option-active-img.png");
  159. background-color: transparent!important;
  160. svg{display: none;}
  161. }
  162. .option-question.showError .uni-radio-input{
  163. background-image: url("@/static/images/exam/option-error-img.png");
  164. background-color: transparent!important;
  165. svg{display: none;}
  166. }
  167. .option-question.active_right .uni-radio-input{
  168. background-image: url("@/static/images/exam/option-right-img.png");
  169. background-color: transparent!important;
  170. svg{display: none;}
  171. }
  172. }
  173. /***** 填空题 *****/
  174. .ezy-tiankong-box{
  175. margin: 0 10rpx;
  176. .tiankongn-title{
  177. width: 231rpx;height: 63rpx;
  178. background-image: url("@/static/images/exam/tiankong-title.png");@include ezy-no-repeat-cover;
  179. }
  180. .tiankong-input {width: 116rpx!important;height: 52rpx;border: 1px solid #999;border-radius: 8rpx;}
  181. .tk-input-box{display: inline-block;position: relative;font-size: 0;margin: 0 4rpx;}
  182. .tiankong-input{text-align: center;}
  183. .tiankong-input.showError{color: #ff5757;}
  184. .tiankong-input.active_right{color: green;}
  185. .tk-input-box.showError::after{
  186. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  187. background-image: url("@/static/images/exam/option-error-img.png");@include ezy-no-repeat-cover;
  188. }
  189. .tk-input-box.active_right::after{
  190. content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx;
  191. background-image: url("@/static/images/exam/option-right-img.png");@include ezy-no-repeat-cover;
  192. }
  193. .ezy-shiti-question li{margin: 20rpx 0;}
  194. }
  195. /***** 英语题 *****/
  196. .ezy-yingyu-danxuan-box{
  197. .yingyu-danxuan-title{
  198. width: 231rpx;height: 63rpx;
  199. background-image: url("@/static/images/exam/danxuan-title.png");@include ezy-no-repeat-cover();
  200. }
  201. .yingyu-danxuan-option-box{
  202. width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
  203. font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;
  204. display: flex;
  205. .option-change{
  206. width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
  207. flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
  208. display: flex;align-items: center;justify-content: center;
  209. }
  210. .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
  211. text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
  212. }
  213. .yingyu-danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
  214. .yingyu-danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
  215. .yingyu-danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
  216. }
  217. /***** 英语题播放按钮 *****/
  218. .yingyu-canplay-img,.yingyu-playing-img{
  219. width: 48rpx;height: 48rpx;display: inline-block;margin: 0 24rpx 3rpx;
  220. vertical-align: middle;@include ezy-no-repeat-cover();
  221. }
  222. .yingyu-canplay-img{background-image: url("@/static/images/exam/yingyu-canplay-img.png");}
  223. .yingyu-playing-img{background-image: url("@/static/images/exam/yingyu-playing-img.gif");}
  224. /***** 试题白色的框 *****/
  225. .shiti-frame-box{
  226. width: 95%;height: auto;background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
  227. flex: 1;position: relative;display: flex;flex-direction: column;
  228. border-radius: 16rpx;box-sizing: border-box;padding:32rpx 24rpx 36rpx;margin: 20rpx 2.5% 36rpx;
  229. }
  230. .ezy-page-body{
  231. display: flex;flex-direction: column;flex: 1;
  232. position: relative;background-color: #fff;z-index: 1;
  233. border-radius: 20rpx 20rpx 0 0;padding: 42rpx 0;overflow: hidden;
  234. }
  235. /***** 模拟标题栏 *****/
  236. .ezy-title-bar {
  237. height: calc(44px + env(safe-area-inset-top));
  238. position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right);
  239. background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box;
  240. display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998;
  241. }
  242. // 小的提示弹窗
  243. .ezy-tip-dialog{
  244. .tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;}
  245. .tip-title{
  246. color: #343434;font-size: 38rpx;margin-bottom: 24rpx;
  247. }
  248. .tip-content{
  249. color: #666;font-size: 32rpx;padding-bottom: 42rpx;
  250. border-bottom: 1px dashed #70cbf4;line-height: 1.6;
  251. }
  252. .tip-img{
  253. width: 260rpx;height: 260rpx;@include ezy-no-repeat-contain;margin: 0 auto;
  254. background-image: url("@/static/images/common/dialog-login-img.png");
  255. }
  256. .tip-btn-box{
  257. width: 100%;display: flex;justify-content: space-between;margin: 52rpx 0 0;
  258. .not-confirm-btn,.confirm-btn{
  259. width: 248rpx;height: 92rpx;line-height: 92rpx;
  260. color: #fff;@include ezy-no-repeat-cover;
  261. }
  262. .not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");}
  263. .confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");}
  264. }
  265. }
  266. .tip-small-dialog{
  267. .tip-content-box{
  268. width: 625rpx;height: 365rpx;padding: 42rpx 48rpx;
  269. background-image: url("@/static/images/common/tip-small-bj.png");
  270. }
  271. .tip-btn-box{
  272. margin: 0;
  273. .not-confirm-btn,.confirm-btn{
  274. width: 220rpx;height: 82rpx;line-height: 82rpx;margin: 30rpx 20rpx 0;
  275. }
  276. }
  277. }
  278. .tip-middle-dialog{
  279. .tip-content-box{
  280. width: 625rpx;height: 423rpx;padding: 42rpx 48rpx;
  281. background-image: url("@/static/images/common/tip-middle-bj.png");
  282. }
  283. }
  284. .tip-big-dialog{
  285. .tip-content-box{
  286. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;
  287. background-image: url("@/static/images/common/tip-big-bj.png");
  288. }
  289. .tip-content{min-height: 240rpx;text-align: justify;}
  290. }
  291. .tip-e-dialog{
  292. width: 625rpx;height: 519rpx;padding: 42rpx 48rpx;@include ezy-no-repeat-cover;
  293. background-image: url("@/static/images/common/tip-big-bj.png");position: relative;
  294. .close-btn{
  295. width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
  296. position: absolute;right: 12rpx;top: 12rpx;
  297. }
  298. .close-btn::after{
  299. content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
  300. background-image: url("@/static/images/common/close-icon.png");
  301. }
  302. .e-img{height: 240rpx;@include ezy-no-repeat-cover;margin: 42rpx auto 24rpx;}
  303. .kx-e-img{width: 302rpx;background-image: url("@/static/images/xuexi/dialog-e-img1.png");}
  304. .bs-e-img{width: 219rpx;background-image: url("@/static/images/xuexi/dialog-e-img2.png");}
  305. .text-score{
  306. width: 100%;text-align: center;font-size: 36rpx;color: #333;
  307. }
  308. .time-tip-box{
  309. width: 100%;text-align: center;font-size: 30rpx;color: #9e9e9f;
  310. margin-top: 16rpx;
  311. }
  312. }
  313. .sxtk-sc-dialog{
  314. .tip-title{color: #343434;font-size: 38rpx;margin-bottom: 24rpx;}
  315. .tip-content-box{
  316. width: 625rpx;height: 587rpx;padding: 42rpx 48rpx;box-sizing: border-box;
  317. background-image: url("@/static/images/my/tk-dialog-bj.png");
  318. @include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;
  319. }
  320. .tip-content{
  321. min-height: 180rpx;text-align: justify;border-bottom: 1px dashed #70cbf4;
  322. margin-bottom: 30rpx;color: #666;font-size: 32rpx;padding-bottom: 42rpx;
  323. border-bottom: 1px dashed #70cbf4;line-height: 1.8;}
  324. .not-confirm-btn,.confirm-btn{
  325. width: 519rpx;height: 98rpx;line-height: 98rpx;@include ezy-no-repeat-cover;
  326. color: #fff;
  327. }
  328. .not-confirm-btn{background-image: url("@/static/images/my/tk-dialog-qx.png");margin-top: 16rpx;}
  329. .confirm-btn{background-image: url("@/static/images/my/tk-dialog-sc.png");}
  330. }
  331. /*积分框*/
  332. .ezy-jf-box{
  333. width: 142rpx;height: 46rpx;display: flex;align-items: center;line-height: 1.2;font-size: 26rpx;
  334. @include ezy-no-repeat-cover;background-image: url("@/static/images/common/jf-bj.png");margin-top: 20rpx;
  335. .jf-icon{width: 35rpx;height: 35rpx;margin:0 4rpx 0 10rpx;flex-shrink: 0;
  336. @include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-qb.png");}
  337. .jf-text{min-width: 60rpx;text-align: center;color: #fff;}
  338. }
  339. // tab页面
  340. .ezy-tab-border{
  341. flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
  342. margin: 12rpx auto 32rpx;position: relative;box-sizing: border-box;display: flex;flex-direction: column;
  343. }
  344. .ezy-tab-box{
  345. height: 82rpx!important;
  346. background-color: rgba(255, 255, 255, 0.6);z-index: 3;margin: 20rpx 20rpx 0;
  347. box-sizing: border-box;padding: 10rpx 12rpx;border-radius: 8rpx;
  348. .segmented-control__text{color: #333!important;}
  349. .segmented-control__item--button,.segmented-control__item--button--last{height: 62rpx;border: 0;border-width: 0!important;border-radius: 8rpx;}
  350. .segmented-control__item--button--active .segmented-control__text{color: #fff!important;}
  351. }
  352. //视频
  353. .ezy-video-box{
  354. width: 690rpx;height: 390rpx;margin: 0 auto 42rpx;
  355. box-shadow: 0 0rpx 16rpx rgba(100, 159, 241, 0.2);
  356. position: relative;box-sizing: border-box;padding: 0;
  357. .ezy-video{
  358. width: 100%;height: 100%!important;background-color: transparent;
  359. .prism-big-play-btn{
  360. width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/play-btn.png");
  361. top: 52%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20;
  362. .outter{border: 0;}
  363. }
  364. .prism-info-display{display: none;}
  365. .prism-time-display .time-bound,.prism-time-display .duration{color: #fff;}
  366. // 播放按钮动画
  367. .play-apply-animation{animation:unset;}
  368. }
  369. }
  370. // 底部支付
  371. .footer-mall-pay-box{
  372. width: 100%;background-color: #fff;position: absolute;bottom: 0;
  373. display: flex;align-items: center;justify-content: space-between;
  374. box-sizing: border-box;padding: 16rpx 12rpx calc(16rpx + var(--window-bottom));
  375. .mall-left-box{
  376. font-size: 22rpx;color: #afafaf;
  377. .price-icon-box{margin-bottom: 6rpx;}
  378. .red-price{font-size: 56rpx;color:#ff0101;font-weight: bold;margin-right: 10rpx;}
  379. .fh-text{font-size: 32rpx;margin-right: 0;}
  380. .mxjt-sq-icon,.mxjt-zk-icon{
  381. width: 18rpx;height: 18rpx;@include ezy-no-repeat-cover;margin-left: 4rpx;
  382. background-image: url("@/static/images/common/jt-up-icon.svg");
  383. }
  384. .mxjt-zk-icon{transform: rotate(180deg);}
  385. }
  386. .pay-status-box{
  387. width: 200rpx;display: flex;align-items: center;border-left: 1rpx solid #ccc;
  388. padding:2rpx 0 2rpx 16rpx;color: #666;margin-left: 4rpx;
  389. icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-right: 8rpx;}
  390. .wx-icon{background-image: url("@/static/images/pay/svip-wx-icon.png");}
  391. .zfb-icon{background-image: url("@/static/images/pay/svip-zfb-icon.png");}
  392. .apple-icon{background-image: url("@/static/images/common/apple-icon.png");}
  393. }
  394. .pay-status-box::after{
  395. content:'';width: 24rpx;height: 24rpx;margin-left: 4rpx;
  396. @include ezy-no-repeat-cover;background-image: url("@/static/images/common/qiehuan-icon.svg");
  397. }
  398. .apple-status-box{align-items: center;justify-content: center;}
  399. .apple-status-box::after{display: none;}
  400. .pay-btn{
  401. width: 200rpx;height: 80rpx;font-size: 28rpx;line-height: 80rpx;text-align: center;color: #fff;
  402. @include ezy-no-repeat-cover;background-image: url("@/static/images/mall/mall-btn.png");
  403. }
  404. }
  405. .footer-mall-pay-box::before{content:'';width: 100%;height: 4rpx;background-color: rgba(0, 0, 0, 0.4);
  406. position: absolute;left: 0;top: -4rpx;opacity: 0.4;}
  407. // 明细弹窗
  408. .mall-detail-dialog{
  409. width: 100%;height: 100vh;display: flex;align-items: flex-end;
  410. .detail-content-box{
  411. width: 750rpx;height: 90vh;@include ezy-no-repeat-cover(top);
  412. background-image: url("@/static/images/mall/cpmx-border-bj.png");
  413. box-sizing: border-box;padding: 84rpx 32rpx 0;position: relative;
  414. display: flex;flex-direction: column;
  415. }
  416. .yfmx-title,.cpmx-title{
  417. width: 231rpx;height: 58rpx;@include ezy-no-repeat-cover;
  418. background-image: url("@/static/images/mall/yfmx-text.png");
  419. display: block;margin: 0 auto 42rpx;
  420. }
  421. .cpmx-title{background-image: url("@/static/images/mall/cpmx-text.png");}
  422. .dialog-close-btn{
  423. width: 60rpx;height: 60rpx;
  424. background-image: url("@/static/images/catalog/catalog-close-btn.png");@include ezy-no-repeat-cover;
  425. position: absolute;top: 64rpx;right: 36rpx;
  426. }
  427. .content-yuanjia{font-size: 46rpx;color: #ff0101;}
  428. .select-all-box{
  429. text{padding-left: 200rpx;margin-left: -200rpx;display: inline-block;vertical-align: middle;}
  430. }
  431. .detail-checkbox{
  432. .uni-checkbox-input{
  433. width: 48rpx;height: 48rpx;@include ezy-no-repeat-cover;margin: 0 12rpx 0 0;
  434. background-image: url("@/static/images/pay/svip-radio.png");flex-shrink: 0;
  435. background-color:transparent;border:0; pointer-events: none;
  436. svg{
  437. width: 48rpx;height: 48rpx;transform: unset;left: 0;top:0;
  438. @include ezy-no-repeat-cover;background-image: url("@/static/images/pay/svip-radio-checked.png");
  439. }
  440. }
  441. }
  442. .detail-checkbox.checkbox-checked .uni-checkbox-input{
  443. background-image: url("@/static/images/pay/svip-radio-checked.png");
  444. }
  445. .detail-body-box{height: calc(90vh - 420rpx);overflow-y: auto;}
  446. .detail-item-box{
  447. display: flex;align-items: center;margin-top: 10rpx;border-bottom: 1px dashed #ccc;
  448. box-sizing: border-box;padding-bottom:32rpx;margin-bottom: 32rpx;
  449. .mall-image{width: 220rpx;height: 220rpx;margin-right: 16rpx;flex-shrink: 0;}
  450. .mt-20{margin-right: 20rpx;}
  451. .content-body-box{height: 220rpx;display: flex;flex-direction: column;justify-content: space-between;flex: 1;}
  452. .content-name{
  453. font-size: 36rpx;color: #000;margin-bottom: 12rpx;display: flex;align-items: center;
  454. .name-text{@include single-line-ellipsis;max-width: 320rpx;margin-right: 10rpx;}
  455. }
  456. .content-text{font-size: 24rpx;color: #666;@include multi-line-ellipsis(3);line-height: 1.5;}
  457. }
  458. .detail-bottom-box{
  459. width: 100%;display: flex;justify-content: space-between;color: #666;padding: 10rpx 0;
  460. .bottom-text-row{display: flex;align-items: center;}
  461. }
  462. .product-body-box{
  463. height: calc(90vh - 220rpx);overflow-y: auto;
  464. .content-body-box{justify-content: center;}
  465. }
  466. }
  467. // 升级提醒弹窗
  468. .phone-tip-dialog{
  469. width: 580rpx;border-radius: 12rpx;background-color: #fff;padding: 24rpx;
  470. .tip-title{padding-top: 24rpx;font-size: 34rpx;color: #333;text-align: center;}
  471. .tip-content{font-size: 32rpx;color: #666;margin:32rpx 32rpx 56rpx;line-height: 1.6;text-align: justify;}
  472. }
  473. // 暂无数据
  474. .ezy-no-sj{
  475. display: flex;align-items: center;flex-direction: column;
  476. flex: 1;justify-content: center;font-size: 32rpx;color: #666;
  477. icon{
  478. width: 219rpx;height: 240rpx;@include ezy-no-repeat-cover;
  479. margin: 0 auto 32rpx;
  480. background-image: url("@/static/images/xuexi/dialog-e-img2.png");
  481. }
  482. }