Browse Source

表格优化样式

hongxilin
donghaolin 4 months ago
parent
commit
504c53e889
  1. 29
      src/style.css
  2. 26
      src/views/chat.vue

29
src/style.css

@ -77,3 +77,32 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
/* 表格整体样式 */
table {
border-collapse: collapse; /* 合并相邻单元格的边框 */
width: 100%; /* 表格宽度为父容器的 100% */
margin-bottom: 1rem; /* 表格底部外边距 */
color: #212529; /* 表格文字颜色 */
}
/* 表头单元格样式 */
table th {
padding: 0.75rem; /* 内边距 */
border: 2px solid #dee2e6; /* 边框宽度、样式和颜色 */
background-color: #f8f9fa; /* 表头背景颜色 */
text-align: left; /* 文字左对齐 */
font-weight: bold; /* 文字加粗 */
}
/* 表格数据单元格样式 */
table td {
padding: 0.75rem; /* 内边距 */
border: 1px solid #dee2e6; /* 边框宽度、样式和颜色 */
text-align: left; /* 文字左对齐 */
}
/* 鼠标悬停时表格行的样式 */
table tr:hover {
background-color: #f2f2f2; /* 鼠标悬停时的背景颜色 */
}

26
src/views/chat.vue

@ -37,7 +37,7 @@ const sessionId = ref(localStorage.getItem('sessionId') || {});
const add = async () => {
try {
const result = await axios.post(
"http://asp69f.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions",
"http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions",
{},
{
headers: {
@ -135,7 +135,7 @@ const sendMessage = async () => {
try {
// API
const response = await fetch("http://asp69f.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions", {
const response = await fetch("http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions", {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ragflow-hkNjEwYjcwZjBlMDExZWZiYjYzMDI0Mm' },
body: JSON.stringify({ question: content, stream: false, session_id: sessionId.value })
@ -308,11 +308,30 @@ onMounted(async () => {
<style scoped>
table{
border-color: black
}
/* 使用更具体的选择器 */
.message-bubble .message-content .thinking-content {
color: #c8c4c4;
font-style: italic;
}
/* 新增表格样式 */
.message-bubble .message-content table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 表格宽度为 100% */
}
.message-bubble .message-content th,
.message-bubble .message-content td {
border: 1px solid #e0e0e0; /* 单元格边框 */
padding: 8px; /* 单元格内边距 */
text-align: left; /* 文本左对齐 */
}
.message-bubble .message-content th {
background-color: #f1f3f5; /* 表头背景颜色 */
}
/* 其他样式保持不变 */
.message-item.bot {
justify-content: flex-start; /* 让机器人消息靠左对齐 */
@ -528,4 +547,7 @@ onMounted(async () => {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
</style>
Loading…
Cancel
Save