<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI问答</title>
<style>
:root {
--primary-color: #1E90FF;
--secondary-color: #20B2AA;
--dark-bg: #0F1A2A;
--light-bg: rgba(255,255,255,0.1);
--border-color: rgba(30, 144, 255, 0.3);
}
body {
margin: 0;
background-color: var(--dark-bg);
color: white;
font-family: 'Arial', sans-serif;
}
.help-container {
position: absolute;
top: 60px;
left: 5%;
width: 90%;
height: 80vh;
background: rgba(20, 20, 40, 0.9);
border: 1px solid var(--primary-color);
border-radius: 5px;
box-shadow: 0 0 15px rgba(30, 144, 255, 0.3);
display: flex;
flex-direction: column;
}
.help-header {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-section {
display: flex;
padding: 15px;
background: rgba(0,0,0,0.3);
border-bottom: 1px dashed var(--border-color);
}
.nav-column {
flex: 1;
padding: 0 10px;
}
.nav-title {
color: var(--primary-color);
font-weight: bold;
margin-bottom: 10px;
padding-left: 10px;
}
.nav-item {
padding: 8px 15px;
margin: 5px 0;
cursor: pointer;
border-left: 2px solid transparent;
transition: all 0.3s;
}
.nav-item:hover {
color: var(--primary-color);
border-left: 2px solid var(--primary-color);
background: rgba(30, 144, 255, 0.1);
}
.content-area {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.input-container {
margin-top: auto;
}
.smart-input {
width: 100%;
padding: 12px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--primary-color);
color: white;
border-radius: 4px;
resize: none;
}
.response-card {
margin-top: 20px;
padding: 15px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-color);
border-radius: 5px;
}
.response-title {
color: var(--primary-color);
margin-top: 0;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
}
.confidence-meter {
display: flex;
align-items: center;
margin: 10px 0;
font-size: 14px;
}
.meter-text {
color: var(--secondary-color);
margin-right: 10px;
}
.follow-up {
margin-top: 15px;
}
.follow-up-title {
font-size: 14px;
color: #AAAAAA;
margin-bottom: 8px;
}
.follow-up-items {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.follow-up-item {
padding: 6px 12px;
background: rgba(30, 144, 255, 0.2);
border: 1px solid var(--border-color);
border-radius: 15px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.follow-up-item:hover {
background: rgba(30, 144, 255, 0.4);
}
</style>
</head>
<body>
<div class="help-container">
<div class="help-header">
<h3>智能检测顾问</h3>
<div>v2.5.1</div>
</div>
<!-- 导航区域 -->
<div class="nav-section">
<div class="nav-column">
<div class="nav-title">材料检测</div>
<div class="nav-item">售前咨询</div>
<div class="nav-item">检测流程</div>
<div class="nav-item">报告解读</div>
</div>
<div class="nav-column">
<div class="nav-title">选材服务</div>
<div class="nav-item">成本分析</div>
<div class="nav-item">性能对比</div>
<div class="nav-item">替代方案</div>
</div>
<div class="nav-column">
<div class="nav-title">标准库</div>
<div class="nav-item">国际标准</div>
<div class="nav-item">行业规范</div>
<div class="nav-item">技术白皮书</div>
</div>
</div>
<!-- 内容区域 -->
<div class="content-area">
<!-- 回答示例 -->
<div class="response-card">
<h3 class="response-title">Q235B钢材检测标准</h3>
<p>根据GB/T 700-2006标准，Q235B钢材需满足以下检测要求：</p>
<ul>
<li>屈服强度 ≥ 235MPa</li>
<li>抗拉强度 370-500MPa</li>
<li>伸长率 ≥ 26%</li>
</ul>
<div class="confidence-meter">
<span class="meter-text">置信度</span>
<span>85%</span>
<span style="margin: 0 10px">|</span>
<span class="meter-text">更新于</span>
<span>2025-05-15</span>
</div>
<div class="follow-up">
<div class="follow-up-title">相关追问建议：</div>
<div class="follow-up-items">
<div class="follow-up-item">Q235B与Q345B的区别？</div>
<div class="follow-up-item">检测周期需要多久？</div>
<div class="follow-up-item">检测费用是多少？</div>
</div>
</div>
</div>
<!-- 输入框 -->
<div class="input-container">
<textarea class="smart-input" rows="3" placeholder="例如：Q235B钢材的检测标准是什么？或者直接上传检测报告..."></textarea>
</div>
</div>
</div>
<script>
// 导航项点击事件
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
// 移除所有active状态
document.querySelectorAll('.nav-item').forEach(i => {
i.classList.remove('active');
});
// 设置当前项为active
this.classList.add('active');
// 根据选择填充问题
const category = this.parentElement.querySelector('.nav-title').textContent;
const questionType = this.textContent;
let presetQuestion = '';
if(category === '材料检测') {
if(questionType === '售前咨询') presetQuestion = '金属材料检测的收费标准是怎样的？';
else if(questionType === '检测流程') presetQuestion = '化学成分检测需要准备哪些样品？';
}
// 其他业务逻辑...
if(presetQuestion) {
document.querySelector('.smart-input').value = presetQuestion;
}
});
});
// 追问建议点击事件
document.querySelectorAll('.follow-up-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelector('.smart-input').value = this.textContent;
document.querySelector('.smart-input').focus();
});
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html