style.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. @use '@/styles/variables.scss' as *;
  2. // 导入全局样式变量
  3. // ===== 创建应用页面样式 =====
  4. // 注意:
  5. // 1. 主容器使用全局的 .page-layout(已定义在 PageLayout/index.less)
  6. // 2. 标题栏使用 .list-header.with-back(已定义在 global.less)
  7. // 3. 此处只定义页面特定的表单和布局样式,不要覆盖全局样式
  8. // ===== 预设问题区域 =====
  9. .preset-questions {
  10. margin: $spacing-6 0;
  11. h4 {
  12. margin-bottom: $spacing-4;
  13. color: $text-primary;
  14. font-size: $font-lg;
  15. font-weight: $font-weight-medium;
  16. }
  17. .question-item {
  18. display: flex;
  19. align-items: center;
  20. margin-bottom: $spacing-3;
  21. gap: $spacing-3;
  22. label {
  23. min-width: 80px;
  24. color: $text-secondary;
  25. font-size: $font-md;
  26. }
  27. .question-input {
  28. flex: 1;
  29. min-width: 200px;
  30. }
  31. .question-actions {
  32. display: flex;
  33. gap: $spacing-2;
  34. .question-icon {
  35. font-size: 18px;
  36. color: $primary-color;
  37. cursor: pointer;
  38. transition: all 0.2s ease;
  39. &:hover {
  40. color: $primary-color-hover;
  41. transform: scale(1.1);
  42. }
  43. }
  44. }
  45. }
  46. }
  47. // ===== Splitter 布局 =====
  48. .app-splitter {
  49. border: 1px solid $border-light;
  50. border-radius: $radius-lg;
  51. height: calc(100vh - 200px);
  52. min-height: 400px;
  53. .splitter-panel {
  54. padding: $spacing-5;
  55. overflow-y: auto;
  56. }
  57. }
  58. // ===== Prompt 编辑区 =====
  59. .prompt-editor {
  60. width: 100%;
  61. height: 100%;
  62. display: flex;
  63. flex-direction: column;
  64. .prompt-info {
  65. margin-bottom: $spacing-3;
  66. .variable-highlight {
  67. color: $primary-color;
  68. font-weight: $font-weight-medium;
  69. padding: 2px 6px;
  70. border-radius: $radius-sm;
  71. background: rgba(0, 93, 128, 0.1);
  72. font-family: $font-family-mono;
  73. }
  74. }
  75. .prompt-textarea {
  76. flex: 1;
  77. min-height: 300px;
  78. resize: vertical;
  79. }
  80. }
  81. // ===== 隐藏滚动条 =====
  82. .hide-scrollbar {
  83. scrollbar-width: none;
  84. -ms-overflow-style: none;
  85. &::-webkit-scrollbar {
  86. display: none;
  87. }
  88. }