myArticle.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. page {
  2. background-color: #161616;
  3. }
  4. .page {
  5. background-color: #161616;
  6. }
  7. .topbg {
  8. }
  9. .topBody {
  10. width:750rpx;
  11. }
  12. .mainBody {
  13. width:750rpx;padding:1rpx 20rpx;display: flex;flex-direction: column;
  14. border-bottom: solid 2rpx #393939;
  15. .menu {
  16. display: flex;flex-direction: row;justify-content: space-between;padding:20rpx 0rpx 0rpx;
  17. .item {
  18. width:25%;border-radius: 18rpx;height:80rpx;display: flex;flex-direction:column;justify-content: center;align-items: center;
  19. color:#999999;
  20. .line {
  21. width: 36rpx;height: 8rpx;margin-top: 20rpx;
  22. background: #161616;
  23. border-radius: 4rpx 4rpx 4rpx 4rpx;
  24. }
  25. }
  26. .active {
  27. color:#fff;
  28. .line {
  29. width: 36rpx;height: 8rpx;margin-top: 20rpx;
  30. background: linear-gradient( 90deg, #FF5869 0%, #F83881 100%);
  31. border-radius: 4rpx 4rpx 4rpx 4rpx;
  32. }
  33. }
  34. }
  35. }
  36. .list_info {
  37. display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
  38. width:750rpx;
  39. .item {
  40. width: 690rpx;margin: 0rpx 0;color:#fff;font-size: 28rpx;padding:20rpx 0 0rpx;
  41. display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
  42. .avator {
  43. width:88rpx;
  44. .icon {
  45. width:72rpx;height:72rpx;border-radius: 36rpx;
  46. }
  47. }
  48. .tit {
  49. width:470rpx;
  50. .list1 {
  51. display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
  52. .name {
  53. font-size: 32rpx;padding-right: 10rpx;height:40rpx;line-height: 40rpx;
  54. }
  55. .sex1 {
  56. width: 76rpx;
  57. height: 40rpx;
  58. background: #423339;
  59. border-radius: 16rpx 16rpx 16rpx 16rpx;
  60. border: 2rpx solid #36D6FF;color:#36D6FF;
  61. display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
  62. image {
  63. width:24rpx;height:24rpx;
  64. }
  65. }
  66. .sex2 {
  67. width: 76rpx;
  68. height: 40rpx;
  69. background: #423339;
  70. border-radius: 16rpx 16rpx 16rpx 16rpx;
  71. border: 2rpx solid #FF7D88;color:#FF7D88;
  72. display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
  73. image {
  74. width:24rpx;height:24rpx;
  75. }
  76. }
  77. .xinzuo {
  78. width: 92rpx;height: 44rpx;margin-left:10rpx;line-height: 44rpx;
  79. border-radius: 16rpx 16rpx 16rpx 16rpx;
  80. border: 2rpx solid #404040;font-size: 20rpx;color: #D0D0D0;
  81. display: flex;flex-direction: row;justify-content: center;align-items: center;
  82. }
  83. }
  84. .time {
  85. color:#D0D0D0;font-size: 24rpx;
  86. }
  87. }
  88. .state {
  89. width:130rpx;font-size: 28rpx;font-weight: normal;text-align: right;
  90. .status_2 {
  91. color:#999;
  92. }
  93. .status_1 {
  94. color:#36D6FF;
  95. }
  96. .status_4 {
  97. color:#FE2D56;
  98. }
  99. }
  100. }
  101. .content {
  102. width: 690rpx;font-weight: 400;font-size: 28rpx;color: #FFFFFF;text-align: left;font-style: normal;
  103. text-transform: none;padding:20rpx 0;
  104. padding-left:88rpx;
  105. }
  106. .photo_list {
  107. width: 690rpx;margin-bottom:0rpx;padding-left:88rpx;
  108. border-radius: 28rpx;font-size: 28rpx;
  109. display: flex;flex-direction: row;align-items: center;
  110. flex-wrap: wrap;
  111. .img {
  112. width:186rpx;height:186rpx;margin-bottom: 24rpx;margin-right: 12rpx;
  113. image {
  114. width:186rpx;height:186rpx;border-radius: 28rpx;border:solid 1px rgba(255, 255, 255, 0.2);
  115. }
  116. }
  117. .right {
  118. color:#fff;
  119. }
  120. }
  121. .desc {
  122. width: 690rpx;padding:10rpx 0 0rpx;padding-left:88rpx;
  123. font-weight: 400;
  124. font-size: 24rpx;
  125. color: #999999;
  126. line-height: 0rpx;
  127. text-align: left;
  128. font-style: normal;
  129. text-transform: none;
  130. display: flex;flex-direction: row;justify-content: space-between;align-items: center;
  131. image {
  132. width:40rpx;height:40rpx;
  133. }
  134. .addr {
  135. width:200rpx;
  136. }
  137. .img {
  138. display: flex;flex-direction: row;justify-content: center;align-items: center;
  139. padding:0 0rpx 0 30rpx;font-size: 28rpx;color:#fff;
  140. }
  141. }
  142. }
  143. .btn_submit {
  144. width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx;
  145. border: 2rpx solid #404040;
  146. border-radius: 28rpx;font-weight: bold;font-size: 32rpx;color: #FF2A95;
  147. display: flex;flex-direction: row;justify-content: center;align-items: center;
  148. }
  149. .blankHeight {
  150. height:300rpx;
  151. }