components.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /******************** 这里存放通用组件样式 ********************/
  2. /********** uni-app基础组件 **********/
  3. /*** lli-button--primary ***/
  4. // lli-primary
  5. .lli-btn {
  6. background-color: $uni-primary;
  7. color:#ffffff;
  8. }
  9. // lli-primary-hover
  10. .button-hover.lli-btn{
  11. background-color: $lli-btn-hover;
  12. color: hsla(0,0%,100%,.6);
  13. }
  14. // lli-primary-disabled
  15. .lli-btn[disabled]:not([type]){
  16. background-color: $lli-btn-disabled;
  17. color: hsla(0,0%,100%,.6);
  18. }
  19. // lli-primary-loading
  20. .lli-btn[loading]{
  21. background-color: $uni-primary;
  22. color: hsla(0,0%,100%,.6);
  23. }
  24. /*** lli-button--plain ***/
  25. //lli-primary-plain
  26. .lli-btn[plain]{
  27. border-color: $uni-primary;
  28. color: $uni-primary;
  29. }
  30. // lli-primary-plain
  31. .button-hover.lli-btn[plain]{
  32. border-color: $lli-btn-disabled;
  33. color: $lli-btn-disabled;
  34. }
  35. // lli-primary-disabled
  36. .lli-btn[plain][disabled]:not([type]){
  37. background-color: #f7f7f7;
  38. color: rgba(0, 0, 0, 0.3);
  39. }
  40. .lli-btn[plain][loading]{
  41. background-color: transparent;
  42. border-color: $lli-btn-disabled;
  43. color: $lli-btn-disabled;
  44. }
  45. /***** 项目中组件 *****/
  46. // view
  47. view{box-sizing: border-box;}
  48. // 对齐方式
  49. .lli-tl{text-align: left;}
  50. .lli-tc{text-align: center;}
  51. .lli-tr{text-align: right;}
  52. /***** view *****/
  53. view{box-sizing: border-box;}
  54. /***** 超出省略 *****/
  55. // 文本超出省略号显示 (一行)
  56. @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;}
  57. // 文本超出省略号显示 (多行)
  58. @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;}
  59. /***** 页面背景图 *****/
  60. // no-repeat cover
  61. @mixin ezy-no-repeat-cover($position: center) {
  62. background-position: $position;background-size: cover;background-repeat: no-repeat;
  63. }
  64. // no-repeat contain
  65. @mixin ezy-no-repeat-contain($position: center) {
  66. background-position: $position;background-size: contain;background-repeat: no-repeat;
  67. }
  68. /*****音频播放器 author: TX date:2024-06-24*****/
  69. .MtaBusAudioPlayerBox{
  70. position: relative;
  71. .st-aplayer{
  72. //position: relative;
  73. }
  74. .audio-mask {
  75. width: 30px;
  76. height: 30px;
  77. background: transparent;
  78. z-index: 99;
  79. position: absolute;
  80. top: 10px;
  81. right: 20px;
  82. }
  83. }
  84. /***** 默认头像 *****/
  85. .phone-default-userImg{
  86. width: 120rpx;height: 120rpx;margin: 0 auto;
  87. background-image: url("@/static/images/my/user-default-img.png");@include ezy-no-repeat-cover();}
  88. /*****分类组件 author: TX date:2024-06-24*****/
  89. .lli-status-box{
  90. display: flex;justify-content: space-around;background: #fff;
  91. border-bottom:1px solid #f2f1f2;padding: 15px 10px;
  92. .status-item{text-align: center;color: #333333;position: relative;}
  93. .status-item.click:before{content: '';position: absolute;height: 2px;width: 80%;bottom: -15px;font-size: 14px;
  94. background-color: $uni-primary;
  95. left: 10%;border-radius: 2px;}
  96. }
  97. /*****开发中,敬请期待 author: TX date:2024-06-25*****/
  98. .lli-develop-expect-page{
  99. height: 100vh;display: flex;align-items: center;justify-content: center;font-size: 36rpx;color: #666;
  100. }