134.1760364842676.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. .search-analysis-container[data-v-25bbc403] {
  2. padding: 16px;
  3. }
  4. .controls-row[data-v-25bbc403] {
  5. display: flex;
  6. justify-content: space-between;
  7. align-items: center;
  8. flex-wrap: wrap;
  9. gap: 16px;
  10. }
  11. .search-input[data-v-25bbc403] {
  12. min-width: 250px;
  13. }
  14. /* 表格样式优化 */
  15. [data-v-25bbc403] .vxe-table {
  16. font-size: 14px;
  17. }
  18. [data-v-25bbc403] .vxe-table .vxe-body--column {
  19. padding: 8px 12px;
  20. }
  21. [data-v-25bbc403] .vxe-table .vxe-header--column {
  22. font-weight: 600;
  23. background-color: #fafafa;
  24. }
  25. /* 链接样式 */
  26. .keyword-link[data-v-25bbc403] {
  27. color: #1976d2;
  28. text-decoration: none;
  29. font-weight: 500;
  30. }
  31. .keyword-link[data-v-25bbc403]:hover {
  32. color: #1565c0;
  33. text-decoration: underline;
  34. }
  35. .ip-link[data-v-25bbc403] {
  36. color: #1976d2;
  37. text-decoration: none;
  38. font-size: 16px;
  39. font-weight: 600;
  40. }
  41. .ip-link[data-v-25bbc403]:hover {
  42. color: #1565c0;
  43. text-decoration: underline;
  44. }
  45. .region-info[data-v-25bbc403] {
  46. color: #666;
  47. font-size: 12px;
  48. margin-left: 4px;
  49. }
  50. /* IP信息样式 */
  51. .ip-info[data-v-25bbc403] {
  52. display: flex;
  53. align-items: center;
  54. gap: 8px;
  55. flex-wrap: wrap;
  56. }
  57. /* 按钮样式 */
  58. .q-btn[data-v-25bbc403] {
  59. border-radius: 6px;
  60. }
  61. /* 卡片样式 */
  62. [data-v-25bbc403] .q-card {
  63. border-radius: 12px;
  64. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  65. }
  66. [data-v-25bbc403] .q-card .q-card-section {
  67. padding: 16px 20px;
  68. }
  69. /* 统计表格样式 */
  70. [data-v-25bbc403] .q-table {
  71. box-shadow: none;
  72. }
  73. [data-v-25bbc403] .q-table .q-table__top {
  74. padding: 0;
  75. }
  76. [data-v-25bbc403] .q-table tbody tr:hover {
  77. background-color: #f5f5f5;
  78. }
  79. [data-v-25bbc403] .q-table th {
  80. font-weight: 600;
  81. color: #333;
  82. }
  83. /* 响应式设计 */
  84. @media (max-width: 768px) {
  85. .search-analysis-container[data-v-25bbc403] {
  86. padding: 8px;
  87. }
  88. .controls-row[data-v-25bbc403] {
  89. flex-direction: column;
  90. align-items: stretch;
  91. }
  92. .row .col-md-4[data-v-25bbc403],
  93. .row .col-md-8[data-v-25bbc403] {
  94. margin-bottom: 8px;
  95. }
  96. .search-input[data-v-25bbc403] {
  97. min-width: auto;
  98. }
  99. /* 移动端表格滚动 */
  100. [data-v-25bbc403] .vxe-table {
  101. font-size: 12px;
  102. }
  103. [data-v-25bbc403] .vxe-table .vxe-body--column {
  104. padding: 6px 8px;
  105. }
  106. /* 移动端IP信息调整 */
  107. .ip-info[data-v-25bbc403] {
  108. flex-direction: column;
  109. align-items: flex-start;
  110. gap: 4px;
  111. }
  112. /* 移动端卡片网格调整 */
  113. .row .col-md-4[data-v-25bbc403] {
  114. flex: 0 0 100%;
  115. max-width: 100%;
  116. }
  117. }
  118. @media (max-width: 576px) {
  119. .search-analysis-container[data-v-25bbc403] {
  120. padding: 4px;
  121. }
  122. /* 小屏幕下按钮尺寸调整 */
  123. [data-v-25bbc403] .vxe-table .q-btn {
  124. min-width: 28px;
  125. padding: 4px;
  126. }
  127. /* 卡片标题调整 */
  128. [data-v-25bbc403] .q-card .text-h6 {
  129. font-size: 1.1rem;
  130. }
  131. }
  132. /* 弹窗样式优化 */
  133. [data-v-25bbc403] .q-dialog .q-card {
  134. max-width: 90vw;
  135. border-radius: 12px;
  136. }
  137. /* 分页组件样式 */
  138. [data-v-25bbc403] .q-pagination {
  139. margin-right: 16px;
  140. }
  141. /* 工具提示样式 */
  142. [data-v-25bbc403] .q-tooltip {
  143. font-size: 12px;
  144. }
  145. /* 加载状态优化 */
  146. [data-v-25bbc403] .vxe-table--loading {
  147. opacity: 0.6;
  148. }
  149. /* 表格行悬停效果 */
  150. [data-v-25bbc403] .vxe-table .vxe-body--row:hover {
  151. background-color: #f5f5f5;
  152. }
  153. /* 统计卡片标题样式 */
  154. [data-v-25bbc403] .q-card .text-h6 {
  155. color: #1976d2;
  156. font-weight: 600;
  157. }
  158. [data-v-25bbc403] .q-card .text-caption {
  159. margin-top: 4px;
  160. }
  161. /* 数字格式化样式 */
  162. .number-highlight[data-v-25bbc403] {
  163. font-weight: 600;
  164. color: #1976d2;
  165. }
  166. /* 统计表格序号列样式 */
  167. [data-v-25bbc403] .q-table tbody td:first-child {
  168. font-weight: 600;
  169. color: #666;
  170. }