feedback-reply.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. ax-body{
  2. display: block;
  3. height: 100%;
  4. background: #F6FAFF;
  5. }
  6. .page-background{
  7. position: fixed;
  8. top: 0;
  9. left: 0;
  10. right: 0;
  11. z-index: 0;
  12. }
  13. .page-background image{
  14. display: block;
  15. width: 100%;
  16. }
  17. .body{
  18. display: block;
  19. width: 100%;
  20. height: 100%;
  21. position: relative;
  22. overflow: auto;
  23. z-index: 1;
  24. }
  25. .root{
  26. height: 100%;
  27. padding: 10px;
  28. overflow: auto;
  29. }
  30. .item{
  31. padding-left: 30px;
  32. padding-bottom: 25px;
  33. font-size: 12px;
  34. color: #999;
  35. position: relative;
  36. }
  37. .item::after{
  38. content: '';
  39. width: 2px;
  40. background-color: var(--color-main);
  41. position: absolute;
  42. top: 0;
  43. left: 13px;
  44. bottom: 0;
  45. z-index: 1;
  46. }
  47. .list .item:last-child::after{
  48. display: none;
  49. }
  50. .mask-box{
  51. display: flex;
  52. align-items: center;
  53. justify-content: space-between;
  54. height: 20px;
  55. }
  56. .mask{
  57. display: flex;
  58. align-items: center;
  59. justify-content: center;
  60. font-size: 18px;
  61. width: 1em;
  62. height: 1em;
  63. box-sizing: border-box;
  64. border: 3px solid var(--color-main);
  65. background-color: #fff;
  66. border-radius: 50%;
  67. position: absolute;
  68. top: 0;
  69. left: 5px;
  70. z-index: 2;
  71. }
  72. .card{
  73. margin-top: 10px;
  74. background-color: #fff;
  75. padding: 10px;
  76. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  77. border-radius: 6px;
  78. }
  79. .reply{
  80. position: relative;
  81. background-color: #eee;
  82. padding: 10px;
  83. border-radius: 2px;
  84. margin-top: 10px;
  85. }
  86. .reply::before{
  87. content: '';
  88. display: block;
  89. width: 0;
  90. height: 0;
  91. border: 5px solid transparent;
  92. border-bottom-color: #eee;
  93. position: absolute;
  94. left: 0;
  95. top: 0;
  96. transform: translate(100%,-100%);
  97. }
  98. .start-label{
  99. margin-right: 10px;
  100. }
  101. .start-label.vi{
  102. color: var(--color-main);
  103. }
  104. .loading-more{
  105. text-align: center;
  106. position: relative;
  107. }
  108. .loading-more::after{
  109. content: '';
  110. border-top: 1px solid #eee;
  111. position: absolute;
  112. top: 50%;
  113. left: 20px;
  114. right: 20px;
  115. transform: translateY(-50%);
  116. }
  117. .loading-more > .text{
  118. color: #aaa;
  119. background-color: #fff;
  120. padding: 5px 20px;
  121. font-size: 13px;
  122. position: relative;
  123. z-index: 2;
  124. }
  125. .item-pic{
  126. display: inline-block;
  127. margin-left: 5px;
  128. white-space: nowrap;
  129. text-decoration: underline;
  130. color: #444;
  131. }
  132. .nothing-wrap{
  133. display: flex;
  134. align-items: center;
  135. justify-content: center;
  136. flex-direction: column;
  137. height: 100%;
  138. background-color: #fff;
  139. border-radius: 10px;
  140. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  141. color: #ccc;
  142. font-size: 14px;
  143. }
  144. .nothing-wrap .icon{
  145. font-size: 17vw;
  146. color: #ddd;
  147. }