/*侧边栏样式*/ .sidebar { position: fixed; top: 0; left: 0; width: 350px; height: 100%; overflow-y: hidden; transition: transform 0.3s ease; transform: translateX(-100%); background-color: #f9f9f9; padding-left: 8px; /* 调整内边距,使文字右移 */ padding-right: 8px; /* 调整内边距,使文字右移 */ z-index: 9; border-right: 5px solid #aec7e5; resize: horizontal; overflow: auto; } .sidebar.active { transform: translateX(0); } .sidebar-menu { flex-direction: row; justify-content: space-between; /* background-color: rgb(182, 229, 244); */ border-radius: 19px; /* 添加圆角 */ display: flex; } .sidebar-menu .el-sub-menu { display: flex; flex-direction: column; } .sidebar-menu .el-menu-item { flex: 1; text-align: left; background-color: #9cd6ce; border-radius: 8px; /* 添加圆角 */ margin: 2px 0; /* 添加间距 */ } .sidebar-menu .el-menu-item span { display: block; padding: 10px; background-color: #ffffff; border-radius: 4px; } .sidebar-menu .el-menu-item span:hover { background-color: #e0e0e0; } .preview { margin-top: 20px; /* 调整预览区与表单之间的距离 */ border: 1px solid #ccc; /* 添加边框 */ padding: 10px; /* 添加内边距 */ border-radius: 4px; /* 添加圆角 */ } .form-item { margin-bottom: 1px; /* 减小表单项之间的距离 */ } .chat-container { display: flex; flex-direction: column; height: 90vh; justify-content: space-between; } .messages { flex: 1; overflow-y: auto; margin-bottom: 10px; } .message pre { white-space: pre-wrap; /* 保留空白符,但允许自动换行 */ word-wrap: break-word; /* 允许长单词换行 */ } .input-area { display: flex; } .input-area input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .input-area button { padding: 10px 15px; background-color: #2980b9; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 5px; } .input-area button:hover { background-color: #3498db; } .message { margin: 5px 0; padding: 10px; border-radius: 4px; background-color: #ecf0f1; }