style.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. .questionAnswerInfo {
  2. width: 100%;
  3. height: 100%;
  4. background: #FFFFFF;
  5. border-radius: @border-radius-base;
  6. }
  7. .questionAnswerInfo-content {
  8. width: 100%;
  9. height: 100%;
  10. background: #FFFFFF;
  11. padding: 20px;
  12. }
  13. // 统一的表单控件样式
  14. .questionAnswerInfo-content-title {
  15. width: 100%;
  16. max-width: 646px;
  17. height: 48px;
  18. }
  19. // 标题文本样式
  20. .section-title {
  21. font-size: 16px;
  22. font-weight: 500;
  23. color: #262626;
  24. margin-bottom: 16px;
  25. }
  26. // 链接样式
  27. .link-more-settings {
  28. color: @primary-color;
  29. cursor: pointer;
  30. text-decoration: none;
  31. &:hover {
  32. text-decoration: underline;
  33. }
  34. }
  35. // 通用样式类
  36. .form-control-width {
  37. width: 100%;
  38. max-width: 646px;
  39. }
  40. .form-control-height {
  41. height: 48px;
  42. }
  43. .textarea-full-width {
  44. width: 100%;
  45. }
  46. .textarea-fixed-height {
  47. height: 300px;
  48. }
  49. // 问题输入框样式
  50. .question-input {
  51. width: 100%;
  52. max-width: 300px;
  53. padding-top: 8px;
  54. margin-left: 20px;
  55. }
  56. .question-icon {
  57. margin-left: 20px;
  58. }
  59. // 按钮样式
  60. .btn-secondary {
  61. background: #f5f5f5;
  62. }
  63. // 容器样式
  64. .flex-center-container {
  65. display: flex;
  66. justify-content: center;
  67. align-items: center;
  68. background: #f5f5f5;
  69. width: 100%;
  70. height: 100%;
  71. }
  72. // Flex布局样式
  73. .flex-end {
  74. display: flex;
  75. justify-content: flex-end;
  76. }
  77. .flex-center {
  78. display: flex;
  79. justify-content: center;
  80. align-items: center;
  81. }
  82. .flex-center-top {
  83. display: flex;
  84. justify-content: center;
  85. align-items: center;
  86. padding-top: 50px;
  87. font-size: 16px;
  88. }
  89. // 表单控件样式
  90. .form-input-large {
  91. width: 100%;
  92. max-width: 646px;
  93. padding: 8px;
  94. }
  95. .form-textarea-large {
  96. height: 120px;
  97. resize: none;
  98. width: 100%;
  99. max-width: 646px;
  100. }
  101. .form-input-number-small {
  102. margin: 0 16px;
  103. width: 100px;
  104. }
  105. // 布局样式
  106. .full-size {
  107. width: 100%;
  108. height: 100%;
  109. }
  110. .half-width {
  111. width: 50%;
  112. height: 100%;
  113. }
  114. .padding-top-10 {
  115. padding-top: 10px;
  116. }
  117. .padding-top-20 {
  118. padding-top: 20px;
  119. }
  120. .padding-bottom-10 {
  121. padding-bottom: 10px;
  122. }
  123. // 响应式设计
  124. @media (max-width: 768px) {
  125. .questionAnswerInfo-content-title,
  126. .form-control-width,
  127. .form-input-large,
  128. .form-textarea-large {
  129. max-width: 100%;
  130. }
  131. .question-input {
  132. max-width: 100%;
  133. margin-left: 0;
  134. }
  135. .half-width {
  136. width: 100%;
  137. }
  138. }
  139. @media (max-width: 480px) {
  140. .questionAnswerInfo-content {
  141. padding: 16px;
  142. }
  143. .form-input-large,
  144. .form-textarea-large {
  145. padding: 6px;
  146. }
  147. }
  148. // 移除重复的 Ant Design 组件样式,使用全局样式
  149. // 只保留组件特有的样式覆盖