index.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. /* pages/tabber/my/index.wxss */
  2. .page {
  3. width: 750rpx;
  4. height: 100vh;
  5. }
  6. /* button {} */
  7. .page1 {
  8. background: linear-gradient(180deg, #F4F3F8 0%, #F6F6F6 100%);
  9. }
  10. .title {
  11. position: absolute;
  12. left: 50%;
  13. transform: translate(-50%, 0);
  14. color: #000;
  15. z-index: 100;
  16. }
  17. .topBoxs {
  18. width: 750rpx;
  19. height: 350rpx;
  20. background: linear-gradient(180deg, #F4F3F8 0%, #F4F3F8 100%);
  21. padding: 40rpx 32rpx;
  22. align-items: flex-end;
  23. position: relative;
  24. }
  25. .topBoxs .userPicture {
  26. width: 120rpx;
  27. height: 120rpx;
  28. border-radius: 50%;
  29. }
  30. .dd{display: flex;
  31. flex-direction: column;}
  32. .topBoxs .phone {
  33. margin-left: 30rpx;
  34. font-size: 24rpx;
  35. border: solid 0;
  36. background-color: transparent;
  37. padding: 0;
  38. }
  39. .phone::after{
  40. border: none;
  41. outline: none;
  42. }
  43. .topBoxs .bg {
  44. width: 246rpx;
  45. height: 276rpx;
  46. right: 0;
  47. bottom: -20%;
  48. position: absolute;
  49. }
  50. .menuBoxs {
  51. width: 750rpx;
  52. background: #FFFFFF;
  53. border-radius: 24rpx;
  54. position: relative;
  55. left: 0;
  56. top: -15rpx;
  57. z-index: 1;
  58. padding: 65rpx 70rpx;
  59. overflow: hidden;
  60. flex-wrap: wrap;
  61. /* border: 1px solid red; */
  62. }
  63. .menuItem {
  64. width: 100rpx;
  65. height: 100rpx;
  66. margin-right: auto;
  67. position: relative;
  68. }
  69. .menuItem .icon {
  70. width: 50rpx;
  71. height: 50rpx;
  72. margin: auto;
  73. display: block;
  74. }
  75. .menuItem .tit {
  76. font-size: 24rpx;
  77. color: #666666;
  78. text-align: center;
  79. margin-top: 20rpx;
  80. }
  81. .menuItem .dot {
  82. width: 68rpx;
  83. height: 34rpx;
  84. background: #FF663D;
  85. border-radius: 19rpx 19rpx 19rpx 0px;
  86. position: absolute;
  87. right: -20rpx;
  88. top: -20rpx;
  89. font-size: 22rpx;
  90. color: #FFFFFF;
  91. text-align: center;
  92. line-height: 34rpx;
  93. }
  94. .active .message {
  95. width: 702rpx;
  96. height: 134rpx;
  97. background: #FFFFFF;
  98. border-radius: 12rpx;
  99. margin: auto;
  100. position: relative;
  101. top: -20rpx;
  102. padding: 0 25rpx;
  103. }
  104. .active .message .num {
  105. font-size: 40rpx;
  106. font-family: HelveticaNeue-Medium, HelveticaNeue;
  107. font-weight: 500;
  108. color: #191C27;
  109. text-align: center;
  110. }
  111. .active .message .line {
  112. width: 1rpx;
  113. height: 86rpx;
  114. background: #EDEDED;
  115. }
  116. .active .message .tips {
  117. text-align: center;
  118. font-size: 26rpx;
  119. color: #666666;
  120. }
  121. .active .contioner {
  122. width: 702rpx;
  123. background: #FFFFFF;
  124. border-radius: 12rpx;
  125. margin: 0 auto 25rpx;
  126. padding: 25rpx;
  127. }
  128. .contioner .titText {
  129. font-size: 32rpx;
  130. font-weight: 500;
  131. color: #191C27;
  132. }