index.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. view {
  2. box-sizing: border-box;
  3. }
  4. .container {
  5. .topBox{
  6. height: 370rpx;
  7. padding-top: 38rpx;
  8. padding-left: 30rpx;
  9. padding-right: 30rpx;
  10. background: #028BFC;
  11. display: flex;
  12. flex-direction: column;
  13. justify-content:space-between;
  14. .userBox{
  15. display: flex;
  16. align-items: center;
  17. .avatar{
  18. width: 120rpx;
  19. height: 120rpx;
  20. border-radius: 50%;
  21. border: 2rpx solid #fff;
  22. margin-right: 24rpx;
  23. }
  24. .nickname{
  25. font-size: 36rpx;
  26. font-family: PingFang-SC, PingFang-SC;
  27. font-weight: 800;
  28. color: #FFFFFF;
  29. margin-right: 20rpx;
  30. }
  31. .icon{
  32. width: 28rpx;
  33. height: 28rpx;
  34. // max-lines: 20rpx;
  35. }
  36. }
  37. .infoBox{
  38. background: rgba(31,48,69,0.7);
  39. box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16);
  40. border-radius: 32rpx 32rpx 0rpx 0rpx;
  41. border: 2rpx solid rgba(112,193,255,0.81);
  42. backdrop-filter: blur(10px);
  43. font-size: 30rpx;
  44. font-family: SourceHanSansCN, SourceHanSansCN;
  45. font-weight: bold;
  46. color: #FFFFFF;
  47. display: flex;
  48. align-items: center;
  49. height: 145rpx;
  50. padding-left: 48rpx;
  51. padding-right: 48rpx;
  52. justify-content: space-between;
  53. position: relative;
  54. z-index: 1;
  55. .left{
  56. display: flex;
  57. align-items: center;
  58. .icon{
  59. width: 48rpx;
  60. height: 48rpx;
  61. margin-right: 16rpx;
  62. }
  63. }
  64. .btn{
  65. width: 130rpx;
  66. height: 46rpx;
  67. background: #F7E0AB;
  68. border-radius: 23rpx;
  69. font-size: 24rpx;
  70. font-family: SourceHanSansCN, SourceHanSansCN;
  71. font-weight: 500;
  72. color: #1F3045;
  73. display: flex;
  74. align-items: center;
  75. justify-content: center;
  76. }
  77. }
  78. }
  79. }
  80. .contentBox{
  81. min-height: 970rpx;
  82. background: #F7F8FB;
  83. box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16);
  84. border-radius: 30rpx 30rpx 0 0;
  85. // background: red;
  86. margin-top: -20rpx;
  87. position: relative;
  88. z-index: 2;
  89. padding-top: 40rpx;
  90. padding-left:30rpx;
  91. padding-right: 30rpx;
  92. .tabBox{
  93. display: flex;
  94. justify-content: space-between;
  95. .item{
  96. width: 48%;
  97. height: 150rpx;
  98. background: #FFFFFF;
  99. box-shadow: 0rpx 4rpx 20rpx -14rpx rgba(1,135,255,0.38);
  100. border-radius: 28rpx;
  101. display: flex;
  102. align-items: center;
  103. padding-left: 24rpx;
  104. .icon{
  105. width: 50rpx;
  106. height: 50rpx;
  107. margin-right: 16rpx;
  108. }
  109. .t1{
  110. font-size: 30rpx;
  111. font-family: SourceHanSansCN, SourceHanSansCN;
  112. font-weight: bold;
  113. color: #333333;
  114. margin-bottom: 12rpx;
  115. }
  116. .t2{
  117. font-size: 22rpx;
  118. font-family: SourceHanSansCN, SourceHanSansCN;
  119. font-weight: 400;
  120. color: #999999;
  121. }
  122. }
  123. }
  124. .serListBox{
  125. .item{
  126. display: flex;
  127. align-items: center;
  128. justify-content: space-between;
  129. height: 142rpx;
  130. // background: red;
  131. border-bottom: 1rpx solid #E6E6E6;
  132. .left{
  133. height: 100%;
  134. display: flex;
  135. align-items: center;
  136. font-size: 32rpx;
  137. font-family: PingFang-SC, PingFang-SC;
  138. font-weight: 500;
  139. color: #333333;
  140. .icon{
  141. width: 40rpx;
  142. height: 40rpx;
  143. margin-right: 8rpx;
  144. }
  145. }
  146. .icon_r{
  147. width: 14rpx;
  148. height: 24rpx;
  149. }
  150. }
  151. }
  152. }