.intelligentQA{ display: flex; width: 100%; height: calc(100vh - 160px); } .aside{ background-color: #11536771; border: 1px solid #209cc1; width: 250px; height: calc(100vh - 200px); color: #fff; text-align: center; line-height: 200px; } .chat{ flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; overflow-y: auto; display: flex; flex-direction: column; .header{ height: 60px; line-height: 60px; width: 100%; text-align: center; color: #fff; background-color: #f8eaea9b; } .main{ flex: 1; // background-color: #f8f8fc4c; display: flex; flex-direction: column; .chatLine { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; overflow-y: auto; } .chatRow { margin: 20px 10px; display: flex; } .chatQ { justify-content: flex-end; .questionContent { max-width: 800px; display: inline-block; border-radius: 8px; padding: 6px 12px; background: rgba(255, 255, 255, 0.4); box-shadow: 0 16px 20px 0 rgba(174, 167, 223, 0.06); color: #fff; } } } .footer{ width: 100%; text-align: center; .footerContent{ width: 60%; margin: auto; position: relative; textarea { width: 100%; min-height: 50px; max-height: 200px; padding: 15px; box-sizing: border-box; border: 1px solid #209cc1; border-radius: 4px; color: #fff !important; background-color: #11536771; font-size: 14px; resize: none; /* 禁止用户手动调整大小 */ overflow: hidden; /* 隐藏溢出内容 */ transition: height 0.2s ease; /* 平滑过渡效果 */ } .icon{ position: absolute; right: 10px; bottom: 15px; font-size: 1.5rem; color: #fff; } } } } ::-webkit-scrollbar{ /*滚动条整体样式*/ width: 5px; height: 1px; } ::-webkit-scrollbar-thumb{ border-radius: 5px; background: #cfcbcb; } ::-webkit-scrollbar-track{ /*滚动条里面轨道*/ border-radius: 5px; background: #ededed; }