components.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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. // 文本超出省略号显示 (一行)
  10. @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;}
  11. // 文本超出省略号显示 (多行)
  12. @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;}
  13. /***** 页面背景图 *****/
  14. // no-repeat cover
  15. @mixin ezy-no-repeat-cover($position: center) {
  16. background-position: $position;background-size: cover;background-repeat: no-repeat;
  17. }
  18. // no-repeat contain
  19. @mixin ezy-no-repeat-contain($position: center) {
  20. background-position: $position;background-size: contain;background-repeat: no-repeat;
  21. }
  22. /***** 标题栏 *****/
  23. // 三个元素
  24. .ezy-navBar-box{
  25. display: flex;align-items: center;justify-content: space-between;background-color: #fff;
  26. padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
  27. .nav-bar-icon{
  28. width: 24rpx;height: 38rpx;
  29. background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
  30. }
  31. .nav-bar-title{font-size: 36rpx;color: #333;}
  32. // 考试数字
  33. .nav-bar-other{
  34. font-size: 30rpx;color: #fff;margin-right: 2%;
  35. .key-note{color: #ffff01;}
  36. }
  37. // 文字按钮
  38. .text-btn{font-size: 26rpx;color: #666;padding-top: 4rpx;box-sizing: border-box;}
  39. }
  40. // 两个元素
  41. .icon-title-navBar-box{
  42. display: flex;align-items: center;justify-content: center;background-color: #fff;
  43. padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
  44. .nav-bar-title{
  45. font-size: 36rpx;height: 63rpx;line-height: 63rpx;color: #333;max-width: 70%;
  46. }
  47. .nav-bar-icon{
  48. width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: 12rpx;
  49. background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
  50. }
  51. }
  52. // 仅一个返回按钮
  53. .ezy-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
  54. background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
  55. }
  56. /***** 查询框 *****/
  57. .phone-search-box{
  58. width: 100%;height: 110rpx;background-color:#f4f6fa;
  59. padding: 20rpx 42rpx;box-sizing: border-box;
  60. position: relative;
  61. .search-input {
  62. height: 70rpx;line-height: 70rpx;font-size: 28rpx;background-color:#fff;
  63. border-radius: 35rpx;padding: 0 70rpx 0 20rpx;
  64. }
  65. .uni-input-placeholder{color:#a4a4a4;}
  66. .search-icon {
  67. width: 100rpx;height: 60rpx;line-height: 60rpx;text-align: center;
  68. position: absolute;right: 52rpx;top: 25rpx;
  69. background-color: #3fd2a1;
  70. border-radius: 40rpx;
  71. }
  72. }
  73. /***** 考试须知 *****/
  74. .phone-ksxz-dialog{
  75. .uni-dialog-title{
  76. padding: 24rpx 0!important;font-size: 30rpx;border-bottom: 1px solid #f5f5f5;
  77. .uni-popup__info{color: #333!important;}
  78. }
  79. .uni-dialog-content{
  80. justify-content: flex-start!important;
  81. }
  82. .uni-dialog-button-text{color: #999!important;}
  83. .uni-dialog-button-text.uni-button-color{color: #3fd2a1!important;}
  84. .ksxz-content-box{
  85. font-size: 28rpx;color: #333;
  86. >view{margin-bottom: 12rpx;line-height: 1.6;}
  87. .ksms-row{margin-bottom: 12rpx;}
  88. .ksms-intro{color: #666;}
  89. }
  90. }