index.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. view {
  2. box-sizing: border-box;
  3. }
  4. .container {
  5. min-height: 100vh;
  6. .topBox{
  7. height: 160rpx;
  8. background: #55ACF9;
  9. padding-top: 24rpx;
  10. padding-left: 30rpx;
  11. padding-right: 30rpx;
  12. background-size: 100% 466rpx;
  13. background-repeat: no-repeat;
  14. .bar{
  15. height: 64rpx;
  16. background: #E2F0FF;
  17. border-radius: 32rpx;
  18. display: flex;
  19. align-items: center;
  20. padding-left: 20rpx;
  21. font-size: 28rpx;
  22. font-family: PingFang-SC, PingFang-SC;
  23. font-weight: bold;
  24. color: #333333;
  25. .tag{
  26. width: 78rpx;
  27. height: 34rpx;
  28. // background: linear-gradient(132deg, #4FDDFF 0%, #5ECFFF 49%, #017AFF 100%);
  29. // filter: blur(0.5px);
  30. // display: flex;
  31. // align-items: center;
  32. // // justify-content: center;
  33. // font-style: italic;
  34. margin-right: 12rpx;
  35. }
  36. }
  37. }
  38. .mianContent{
  39. // padding-top: 48rpx;
  40. min-height:calc(100vh - 300rpx);
  41. // height:calc(100vh - 110rpx);
  42. // box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16);
  43. border-radius: 40rpx 40rpx 0 0;
  44. position: relative;
  45. margin-top: -50rpx;
  46. background-size: 100% 1332rpx;
  47. // background-position: 0rpx -50rpx;
  48. background-size: contain;
  49. background-repeat: no-repeat;
  50. // background-blend-mode: overlay;
  51. // background:#f7f8fb;
  52. .tPos{
  53. height: 48rpx;
  54. }
  55. .sanjiaoxing{
  56. position:absolute;
  57. top: 0;
  58. left: 50%;
  59. transform: translateX(-50%);
  60. width: 0;
  61. height: 0;
  62. border-left: 20rpx solid transparent;
  63. border-right: 20rpx solid transparent;
  64. border-top: 20rpx solid #5FADFC;
  65. }
  66. .list{
  67. padding-left: 30rpx;
  68. padding-right: 30rpx;
  69. display: flex;
  70. flex-direction: column;
  71. min-height:calc(100vh - 330rpx);
  72. background:#f7f8fb;
  73. // background: red;
  74. .item{
  75. display: flex;
  76. justify-content: space-between;
  77. align-items: center;
  78. margin-bottom:12rpx;
  79. height: 176rpx;
  80. // background: linear-gradient(287deg, #E5F1FF 0%, #FFFFFF 100%);
  81. // box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16);
  82. // border-radius: 32rpx;
  83. // border: 2rpx solid rgba(102, 178, 255, 1);
  84. // border-image: linear-gradient(90deg, rgba(102, 178, 255, 1), rgba(255, 255, 255, 0)) 2 2;
  85. // border-image-repeat: round;
  86. // border-image-slice: 1;
  87. padding-left: 32rpx;
  88. padding-right: 32rpx;
  89. position: relative;
  90. background-size: 100% 100%;
  91. // background-size: contain;
  92. background-repeat: no-repeat;
  93. .water2{
  94. width: 114rpx;
  95. height: 126rpx;
  96. position: absolute;
  97. bottom: 0;
  98. left: 0;
  99. border-radius:0 0 0 32rpx;
  100. z-index: 0;
  101. }
  102. .left{
  103. display: flex;
  104. align-items: center;
  105. position: relative;
  106. z-index: 1;
  107. .avatar{
  108. width: 80rpx;
  109. height: 80rpx;
  110. border-radius: 50%;
  111. margin-right: 20rpx;
  112. }
  113. .des{
  114. .name{
  115. font-size: 28rpx;
  116. font-family: PingFang-SC, PingFang-SC;
  117. font-weight: bold;
  118. color: #333333;
  119. }
  120. .time{
  121. font-size: 24rpx;
  122. font-family: PingFang-SC, PingFang-SC;
  123. font-weight: 500;
  124. color: #999999;
  125. margin-top: 14rpx;
  126. }
  127. }
  128. }
  129. .right{
  130. display: flex;
  131. flex-direction:column;
  132. align-items: flex-end;
  133. .money{
  134. font-size: 32rpx;
  135. font-family: PingFang-SC, PingFang-SC;
  136. font-weight: bold;
  137. color: #333333;
  138. }
  139. .count{
  140. width: 144rpx;
  141. height: 32rpx;
  142. background: linear-gradient(135deg, #A6EAFF 0%, #4EDCFF 100%);
  143. border-radius: 0rpx 14rpx 0rpx 14rpx;
  144. font-size: 24rpx;
  145. font-family: PingFang-SC, PingFang-SC;
  146. font-weight: 500;
  147. color: #007AFF;
  148. display: flex;
  149. align-items: center;
  150. justify-content: center;
  151. margin-top: 16rpx;
  152. }
  153. }
  154. }
  155. }
  156. }
  157. }