index.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. .intelligentQA{
  2. display: flex;
  3. width: 100%;
  4. height: calc(100vh - 160px);
  5. }
  6. .aside{
  7. background-color: #11536771;
  8. border: 1px solid #209cc1;
  9. width: 250px;
  10. height: calc(100vh - 200px);
  11. color: #fff;
  12. text-align: center;
  13. line-height: 200px;
  14. }
  15. .chat{
  16. flex: 1;
  17. width: 100%;
  18. max-width: 1400px;
  19. margin: 0 auto;
  20. overflow-y: auto;
  21. display: flex;
  22. flex-direction: column;
  23. .header{
  24. height: 60px;
  25. line-height: 60px;
  26. width: 100%;
  27. text-align: center;
  28. color: #fff;
  29. background-color: #f8eaea9b;
  30. }
  31. .main{
  32. flex: 1;
  33. // background-color: #f8f8fc4c;
  34. display: flex;
  35. flex-direction: column;
  36. .chatLine {
  37. flex: 1;
  38. width: 100%;
  39. max-width: 1200px;
  40. margin: 0 auto;
  41. overflow-y: auto;
  42. }
  43. .chatRow {
  44. margin: 20px 10px;
  45. display: flex;
  46. }
  47. .chatQ {
  48. justify-content: flex-end;
  49. .questionContent {
  50. max-width: 800px;
  51. display: inline-block;
  52. border-radius: 8px;
  53. padding: 6px 12px;
  54. background: rgba(255, 255, 255, 0.4);
  55. box-shadow: 0 16px 20px 0 rgba(174, 167, 223, 0.06);
  56. color: #fff;
  57. }
  58. }
  59. }
  60. .footer{
  61. width: 100%;
  62. text-align: center;
  63. .footerContent{
  64. width: 60%;
  65. margin: auto;
  66. position: relative;
  67. textarea {
  68. width: 100%;
  69. min-height: 50px;
  70. max-height: 200px;
  71. padding: 15px;
  72. box-sizing: border-box;
  73. border: 1px solid #209cc1;
  74. border-radius: 4px;
  75. color: #fff !important;
  76. background-color: #11536771;
  77. font-size: 14px;
  78. resize: none; /* 禁止用户手动调整大小 */
  79. overflow: hidden; /* 隐藏溢出内容 */
  80. transition: height 0.2s ease; /* 平滑过渡效果 */
  81. }
  82. .icon{
  83. position: absolute;
  84. right: 10px;
  85. bottom: 15px;
  86. font-size: 1.5rem;
  87. color: #fff;
  88. }
  89. }
  90. }
  91. }
  92. ::-webkit-scrollbar{ /*滚动条整体样式*/
  93. width: 5px;
  94. height: 1px;
  95. }
  96. ::-webkit-scrollbar-thumb{
  97. border-radius: 5px;
  98. background: #cfcbcb;
  99. }
  100. ::-webkit-scrollbar-track{ /*滚动条里面轨道*/
  101. border-radius: 5px;
  102. background: #ededed;
  103. }