message-reply.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /*
  2. *这里的值严格按照UI设计图标注值来进行设置
  3. */
  4. /*
  5. *颜色
  6. */
  7. /*
  8. *页面的边距
  9. */
  10. /*
  11. *字体
  12. */
  13. /*
  14. *头像
  15. */
  16. /*
  17. * 按钮
  18. */
  19. /*
  20. *对常见的多行样式进行了方法封装,方便调用,加快开发效率
  21. */
  22. html,
  23. body {
  24. min-height: 100vh;
  25. background-color: #eee;
  26. margin: 0;
  27. font-weight: initial !important;
  28. font-size: 14px !important;
  29. color: #333 !important;
  30. }
  31. html *,
  32. body * {
  33. text-decoration: none !important;
  34. font-family: Verdana, Arial, Helvetica, sans-serif;
  35. box-sizing: border-box;
  36. }
  37. .ms-ellipsis {
  38. overflow: hidden;
  39. text-overflow: ellipsis;
  40. white-space: nowrap;
  41. display: block;
  42. }
  43. .ms-align-center {
  44. display: flex;
  45. align-items: center;
  46. }
  47. input::-webkit-input-placeholder,
  48. textarea::-webkit-input-placeholder {
  49. font-weight: initial;
  50. font-size: 12px;
  51. color: #999;
  52. resize: none;
  53. }
  54. *::-webkit-scrollbar {
  55. width: 8px;
  56. height: 8px;
  57. }
  58. /*定义滚动条轨道 内阴影+圆角*/
  59. *::-webkit-scrollbar-track {
  60. border-radius: 10px;
  61. /*滚动条的背景区域的圆角*/
  62. background-color: #eee;
  63. /*滚动条的背景颜色*/
  64. }
  65. /*定义滑块 内阴影+圆角*/
  66. *::-webkit-scrollbar-thumb {
  67. border-radius: 10px;
  68. /*滚动条的圆角*/
  69. background-color: #ddd;
  70. /*滚动条的背景颜色*/
  71. }
  72. .ms-container {
  73. margin: 12px;
  74. height: 100%;
  75. padding: 14px 14px 0 14px;
  76. background: #fff;
  77. }
  78. .ms-header {
  79. padding: 10px;
  80. margin: 0;
  81. border-bottom: 1px solid #ddd;
  82. background: #fff;
  83. height: 50px;
  84. }
  85. .ms-pagination {
  86. padding: 20px 0;
  87. text-align: right;
  88. }
  89. .ms-fr {
  90. float: right;
  91. }
  92. .ms-tr {
  93. text-align: right;
  94. }
  95. .el-button + .el-button {
  96. margin-left: 0;
  97. }
  98. .ms-message-reply {
  99. display: flex;
  100. justify-content: flex-start;
  101. padding: 20px;
  102. height: 267px;
  103. }
  104. .ms-message-reply > div:first-child {
  105. margin-right: 10px;
  106. line-height: 40px;
  107. }
  108. .ms-message-reply .message-reply-tabs {
  109. flex: 1;
  110. border: 1px solid #ddd;
  111. border-radius: 4px 4px 0 0 !important;
  112. }
  113. .ms-message-reply .message-reply-tabs .el-tabs__header {
  114. margin: 0 !important;
  115. }
  116. .ms-message-reply .message-reply-tabs .el-tabs__header .el-tabs__nav-scroll {
  117. padding: 0 20px;
  118. }
  119. .ms-message-reply .message-reply-tabs .el-tab-pane {
  120. padding: 0 !important;
  121. width: 100%;
  122. display: flex;
  123. justify-content: space-between;
  124. }
  125. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form {
  126. width: 100%;
  127. }
  128. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content {
  129. margin: 0;
  130. }
  131. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content {
  132. position: relative;
  133. }
  134. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .el-icon-delete {
  135. position: absolute;
  136. right: 5px;
  137. bottom: 66px;
  138. font-weight: initial;
  139. font-size: 12px;
  140. color: #999;
  141. }
  142. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .el-icon-delete:hover {
  143. cursor: pointer;
  144. }
  145. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content textarea {
  146. height: 127px !important;
  147. border: none !important;
  148. border-bottom: 1px solid #ddd !important;
  149. }
  150. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer {
  151. height: 58px;
  152. padding: 0 14px;
  153. display: flex;
  154. justify-content: flex-start;
  155. align-items: center;
  156. }
  157. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer i {
  158. margin-right: 12px;
  159. font-size: 16px;
  160. }
  161. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer a {
  162. font-weight: initial;
  163. font-size: 14px;
  164. color: #0099ff;
  165. }
  166. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer i:hover,
  167. .ms-message-reply .message-reply-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer a:hover {
  168. cursor: pointer;
  169. }