activity.wxss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. .like {
  2. height: 40rpx;
  3. width: 40rpx;
  4. position: relative;
  5. float: right;
  6. right: 40rpx;
  7. }
  8. .activity-detail {
  9. margin: -40rpx 40rpx 0rpx 40rpx;
  10. font-size: 30rpx;
  11. }
  12. .comment {
  13. display: flex;
  14. justify-content: space-between;
  15. align-items: center;
  16. height: 80rpx;
  17. padding-left: 20rpx;
  18. padding-right: 20rpx;
  19. position: fixed;
  20. bottom: 0rpx;
  21. left: 0rpx;
  22. right: 0rpx;
  23. }
  24. .comment-inside {
  25. border-radius: 20rpx;
  26. background: #dadada;
  27. }
  28. .comment-input {
  29. font-size: 35rpx;
  30. }
  31. .comment-button {
  32. height: 80rpx;
  33. width: 100rpx;
  34. line-height: 80rpx;
  35. font-size: 30rpx;
  36. text-align: center;
  37. }
  38. .page {
  39. display: flex;
  40. flex-direction: column;
  41. justify-content: flex-start;
  42. width: 100%;
  43. }
  44. .card {
  45. display: flex;
  46. flex-direction: column;
  47. align-self: center;
  48. align-items: center;
  49. width: 700rpx;
  50. margin: 50rpx 20rpx;
  51. padding-bottom: 20rpx;
  52. background-color: #ffffff;
  53. border-radius: 28rpx;
  54. box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
  55. }
  56. .card1 {
  57. display: flex;
  58. flex-direction: column;
  59. align-self: center;
  60. width: 700rpx;
  61. margin: 50rpx 30rpx;
  62. }
  63. .avatar-name {
  64. display: flex;
  65. }
  66. .publisher-avatar {
  67. width: 50rpx;
  68. height: 50rpx;
  69. border-radius: 30rpx;
  70. margin-left: 10rpx;
  71. z-index: 2;
  72. border-color: #9E9E9E;
  73. border-style: solid;
  74. border-width: 2rpx;
  75. background-color: #ffffff;
  76. }
  77. .profile {
  78. display: flex;
  79. justify-content: space-between;
  80. position: relative;
  81. top: -20rpx;
  82. margin-right: 10rpx;
  83. }
  84. .publisher-name {
  85. font-size: 24rpx;
  86. align-self: center;
  87. background-color: #ffffff;
  88. padding: 5rpx 20rpx 5rpx 30rpx;
  89. margin-left: -20rpx;
  90. border-radius: 22rpx;
  91. box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
  92. z-index: 1;
  93. }
  94. .time {
  95. font-size: 20rpx;
  96. }
  97. .activity-attribute {
  98. font-size: 24rpx;
  99. align-self: center;
  100. padding-top: 5rpx;
  101. padding-bottom: 5rpx;
  102. padding-right: 20rpx;
  103. padding-left: 20rpx;
  104. border-radius: 28rpx;
  105. box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
  106. }
  107. .title {
  108. font-size: 28rpx;
  109. }
  110. .title2 {
  111. font-size: 34rpx;
  112. position: relative;
  113. float: left;
  114. left: 30rpx;
  115. }
  116. .title-time {
  117. margin-left: 50rpx;
  118. margin-right: 30rpx;
  119. margin-bottom: 20rpx;
  120. display: flex;
  121. justify-content: space-between;
  122. align-items: flex-end;
  123. }
  124. .sub-title {
  125. font-size: 24rpx;
  126. margin-left: 50rpx;
  127. margin-bottom: 20rpx;
  128. margin-right: 20rpx;
  129. }
  130. .bottom-line {
  131. display: flex;
  132. justify-content: space-between;
  133. align-items: center;
  134. margin: 10rpx 10rpx 30rpx 10rpx;
  135. }
  136. .activity-poster {
  137. height: 400rpx;
  138. width: 700rpx;
  139. border-radius: 20rpx 20rpx 0rpx 0rpx;
  140. }