微信

page.scss 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. .mainPage{
  2. .body{
  3. >span{
  4. width: 100%;
  5. display: block;
  6. line-height: .28rem;
  7. font-size: .12rem;
  8. color: #666;
  9. text-indent: .2rem;
  10. margin: .2rem auto 0;
  11. position: relative;
  12. z-index: 3;
  13. background: #fff;
  14. em{
  15. font-size: .16rem;
  16. font-weight: bolder;
  17. color: #333;
  18. }
  19. }
  20. >ul{
  21. padding: .05rem .2rem 0;
  22. position: relative;
  23. z-index: 2;
  24. box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
  25. >li{
  26. font-size: 0;
  27. white-space: nowrap;
  28. text-align: center;
  29. position: relative;
  30. &.active::after{
  31. content: '';
  32. width: 1.1rem;
  33. height: .02rem;
  34. background: #fa2a00;
  35. position: absolute;
  36. left: 50%;
  37. bottom: 0;
  38. transform: translateX(-50%);
  39. -webkit-transform: translateX(-50%);
  40. }
  41. >span{
  42. display: inline-block;
  43. line-height: .42rem;
  44. font-size: .15rem;
  45. color: #666;
  46. &:nth-child(2){
  47. font-size: .12rem;
  48. }
  49. }
  50. }
  51. }
  52. >div{
  53. >div{
  54. width: 100%;
  55. position: absolute;
  56. left: 0;
  57. top: 0;
  58. bottom: 0;
  59. overflow: hidden;
  60. >ul{
  61. width: 100%;
  62. height: 100%;
  63. position: relative;
  64. overflow: hidden;
  65. >li{
  66. padding: 0 .2rem;
  67. position: relative;
  68. height: 100%;
  69. overflow-y: scroll;
  70. -webkit-overflow-scrolling: touch;
  71. transform: translateZ(0);
  72. -webkit-transform: translateZ(0);
  73. .list{
  74. width: 100%;
  75. padding: .1rem 0;
  76. >li{
  77. width: 100%;
  78. position: relative;
  79. overflow: hidden;
  80. border-bottom: .01rem solid #eee;
  81. &:last-child{
  82. border: none;
  83. }
  84. align-items: center;
  85. span{
  86. line-height: .38rem;
  87. font-size: .12rem;
  88. color: #666;
  89. white-space: nowrap;
  90. text-overflow: ellipsis;
  91. overflow: hidden;
  92. }
  93. >div{
  94. span{
  95. width: 100%;
  96. display: block;
  97. }
  98. margin-left: .1rem;
  99. &:first-child{
  100. margin-left: 0;
  101. }
  102. &:nth-child(2){
  103. span{
  104. text-align: center;
  105. }
  106. }
  107. }
  108. }
  109. }
  110. }
  111. }
  112. }
  113. }
  114. }
  115. }