ucenter.scss 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. page {
  2. background-color: #161616;
  3. width: 100%;
  4. height: 100%;
  5. }
  6. .page {
  7. background-color: #161616;
  8. width: 750rpx;height:100vh;
  9. background: url('../../static/w3/bg.png');
  10. background-size: 750rpx 1624rpx;
  11. background-repeat: repeat-y;
  12. }
  13. .header {
  14. display: flex;
  15. flex-direction: row;
  16. justify-content: center;
  17. align-items: center;
  18. width: 750rpx;height: 320rpx;
  19. padding-top:30rpx;
  20. .bg {
  21. display: flex;flex-direction: row;
  22. width: 650rpx;height: 320rpx;
  23. background: url('../../static/w3/w3_bg_2.png');
  24. background-size: 650rpx 320rpx;
  25. justify-content: center;
  26. padding-left:50rpx;
  27. .left {
  28. width:350rpx;
  29. display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
  30. .user {
  31. display: flex;flex-direction: row;justify-content: center;align-items: center;padding-top:44rpx;
  32. .avator {
  33. width:68rpx;height:68rpx;border-radius: 34rpx;
  34. }
  35. .iconV {
  36. width:78rpx;height:42rpx;
  37. }
  38. .nickname {
  39. font-weight: bold;
  40. font-size: 32rpx;
  41. color: #FFFFFF;padding-left: 8rpx;padding-right: 8rpx;
  42. }
  43. }
  44. .num {
  45. font-weight: bold;padding-top:64rpx;
  46. font-size: 64rpx;
  47. color: #FFFFFF;
  48. }
  49. .desc {
  50. font-weight: 400;padding-top:12rpx;
  51. font-size: 28rpx;
  52. color: #999999;
  53. display: flex;flex-direction: row;justify-content: center;align-items: center;
  54. image {
  55. width:36rpx;height:36rpx;
  56. }
  57. }
  58. }
  59. .right {
  60. width:300rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
  61. .icon {
  62. width:250rpx;height:250rpx;margin-top:4rpx;
  63. }
  64. .arrow {
  65. width:30rpx;
  66. }
  67. .desc {
  68. padding-top:0rpx;
  69. font-weight: 400;
  70. font-size: 28rpx;
  71. color: #FFFFFF;
  72. display: flex;flex-direction: row;justify-content: center;align-items: center;
  73. image {
  74. width:36rpx;height:36rpx;
  75. }
  76. }
  77. }
  78. }
  79. }
  80. .thread {
  81. height: 20rpx;
  82. }
  83. .thread2 {
  84. height: 60rpx;
  85. }
  86. .sigin {
  87. display: flex;flex-direction: row;justify-content:flex-end;align-items: center;
  88. width: 650rpx;height: 180rpx;margin:10rpx auto;
  89. background: url('../../static/w3/signin.png');
  90. background-size: 650rpx 180rpx;
  91. .btn {
  92. width:152rpx;height:72rpx;border-radius: 20rpx;margin-right:30rpx;
  93. background-color: #fff;font-weight: 400;
  94. display: flex;flex-direction: row;justify-content: center;align-items: center;
  95. }
  96. .gray {
  97. background-color: rgba(255, 255, 255, 0.7);
  98. }
  99. }
  100. .list_r {
  101. width:750rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top:20rpx;
  102. font-weight: bold;padding-left:40rpx;
  103. font-size: 32rpx;
  104. color: #FFFFFF;
  105. .item1 {
  106. width: 314rpx;height: 110rpx;margin-right:20rpx;
  107. background: url('../../static/w3/bg_c1_box.png');
  108. background-size: 314rpx 110rpx;
  109. }
  110. .item2 {
  111. width: 314rpx;height: 110rpx;
  112. background: url('../../static/w3/bg_c1_share.png');
  113. background-size: 314rpx 110rpx;
  114. }
  115. .item3 {
  116. width: 314rpx;height: 110rpx;margin-right:20rpx;margin-top:20rpx;
  117. background: url('../../static/w3/bg_c1_tran.png');
  118. background-size: 314rpx 110rpx;
  119. }
  120. .item4 {
  121. width: 314rpx;height: 110rpx;margin-top:20rpx;
  122. background: url('../../static/w3/bg_c1_x.png');
  123. background-size: 314rpx 110rpx;
  124. }
  125. }
  126. .list_item {
  127. width:690rpx;height:388rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
  128. background: url('../../static/w3/bg_box2.png');
  129. background-size: 690rpx 388rpx;margin:0 auto;
  130. .item1 {
  131. width:690rpx;height:70rpx;
  132. display: flex;flex-direction: row;justify-content: space-between;align-items: center;
  133. .left {
  134. font-weight: bold;padding-left:30rpx;
  135. font-size: 32rpx;
  136. color: #FFFFFF;
  137. }
  138. .right {
  139. font-weight: 400;padding-right:30rpx;
  140. font-size: 28rpx;
  141. color: #FFFFFF;
  142. }
  143. }
  144. .item2 {
  145. width:690rpx;height:318rpx;
  146. display: flex;flex-direction: row;justify-content: space-between;align-items: center;
  147. .left {
  148. width:280rpx;height:318rpx;
  149. display: flex;flex-direction: column;justify-content: center;align-items: center;
  150. image {
  151. width:168rpx;
  152. }
  153. .name {
  154. font-weight: bold;margin-top: 14rpx;text-align: left;
  155. font-size: 28rpx;
  156. color: #FFFFFF;
  157. }
  158. .time {
  159. font-weight: 400;margin-top: 14rpx;text-align: left;
  160. font-size: 24rpx;
  161. color: #999999;
  162. }
  163. }
  164. .right {
  165. width:410rpx;
  166. display: flex;flex-direction: column;justify-content: space-between;align-items: center;
  167. .content {
  168. font-weight: 400;font-size: 24rpx;color: #FFFFFF;
  169. padding-right:80rpx;
  170. }
  171. .act {
  172. width:100%;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;padding-right: 30rpx;padding-top:20rpx;
  173. image {
  174. width:100rpx;height:32rpx;
  175. }
  176. .sign_name {
  177. font-weight: normal;
  178. font-size: 24rpx;
  179. color: #fff;margin-bottom: 16rpx;
  180. }
  181. }
  182. }
  183. }
  184. }