<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能检测顾问</title>
<style>
:root {
--primary-blue: #1E90FF;
--dark-bg: #0F1A2A;
--border-red: #FF3333;
--white-text: #FFFFFF;
--border-blue: rgba(30, 144, 255, 0.3);
}
body {
margin: 0;
padding: 0;
background-color: var(--dark-bg);
color: var(--white-text);
font-family: 'Arial', sans-serif;
}
.help-container {
position: absolute;
top: 50px;
left: 5%;
width: 90%;
height: 80vh;
background: rgba(20, 20, 40, 0.9);
border: 1px solid var(--primary-blue);
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 {
padding: 15px;
background: rgba(0,0,0,0.3);
border-bottom: 1px dashed var(--border-blue);
}
.nav-toggle {
display: flex;
align-items: center;
color: var(--primary-blue);
cursor: pointer;
margin-bottom: 10px;
user-select: none;
}
.toggle-icon {
margin-right: 8px;
transition: transform 0.3s;
}
.toggle-icon.collapsed {
transform: rotate(-90deg);
}
.nav-content {
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.nav-content.collapsed {
max-height: 0 !important;
}
.nav-row {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.nav-row:last-child {
margin-bottom: 0;
}
.nav-title {
color: var(--primary-blue);
font-weight: bold;
width: 100px;
padding: 8px 15px;
}
.nav-items-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.nav-item {
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s;
color: var(--white-text);
}
.nav-item:hover {
color: var(--primary-blue);
}
.content-area {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.input-container {
display: flex;
justify-content: center;
margin-top: 20px;
position: relative;
}
.smart-input {
width: 66.66%;
padding: 12px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--primary-blue);
color: var(--white-text);
border-radius: 4px;
resize: none;
}
.smart-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
</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-toggle" id="navToggle">
<span class="toggle-icon">▼</span>
<span>导航菜单</span>
</div>
<div class="nav-content" id="navContent">
<div class="nav-row">
<div class="nav-title">材料检测</div>
<div class="nav-items-container">
<div class="nav-item">智能选材</div>
<div class="nav-item">检测流程</div>
<div class="nav-item">报告解读</div>
</div>
</div>
<div class="nav-row">
<div class="nav-title">公司服务</div>
<div class="nav-items-container">
<div class="nav-item">售前咨询</div>
<div class="nav-item">解决方案</div>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="input-container">
<textarea class="smart-input" rows="3" placeholder="例如：Q235B钢材的检测标准是什么？或者直接上传检测报告..."></textarea>
</div>
</div>
</div>
<script>
// 导航展开/收起功能
const navToggle = document.getElementById('navToggle');
const navContent = document.getElementById('navContent');
const toggleIcon = document.querySelector('.toggle-icon');
// 初始化设置导航内容高度
navContent.style.maxHeight = navContent.scrollHeight + 'px';
navToggle.addEventListener('click', function() {
navContent.classList.toggle('collapsed');
toggleIcon.classList.toggle('collapsed');
});
// 导航项点击事件
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
// 移除所有active状态
document.querySelectorAll('.nav-item').forEach(i => {
i.style.color = 'white';
});
// 设置当前项为蓝色
this.style.color = '#1E90FF';
// 根据选择填充问题
const category = this.closest('.nav-row').querySelector('.nav-title').textContent;
const questionType = this.textContent;
let presetQuestion = '';
if(category === '材料检测') {
if(questionType === '智能选材') presetQuestion = '如何根据应用场景选择合适的材料？';
else if(questionType === '检测流程') presetQuestion = '材料检测的具体流程是怎样的？';
else if(questionType === '报告解读') presetQuestion = '如何解读材料检测报告中的各项指标？';
} else if(category === '公司服务') {
if(questionType === '售前咨询') presetQuestion = '材料检测服务的收费标准是怎样的？';
else if(questionType === '解决方案') presetQuestion = '针对我们的应用场景，您能提供什么解决方案？';
}
if(presetQuestion) {
document.querySelector('.smart-input').value = presetQuestion;
}
});
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html