<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>航空工业材料管理平台</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.core.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.theme.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0056B3',
secondary: '#E5F0FF'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<style>
body {
min-height: 1024px;
background: #FFFFFF;
}
.container {
width: 1440px;
margin: 0 auto;
}
.nav-item {
cursor: pointer;
transition: all 0.3s;
background-color: #E5F0FF;
}
.nav-item:hover {
background-color: #fff;
}
.nav-item.active {
background-color: #fff;
border: 1px solid #E5F0FF;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body class="text-gray-800">
<div class="container mx-auto px-6 py-4">
<header class="flex items-center justify-between mb-8">
<div class="flex items-center space-x-8">
<nav class="flex items-center space-x-6">
</nav>
</div>
<div class="flex items-center space-x-6">
<div class="relative">
<button class="flex items-center space-x-2 text-gray-600 hover:text-primary">
<i class="fas fa-bell text-xl"></i>
<div class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></div>
</button>
</div>
<div class="flex items-center space-x-3 border-l border-gray-200 pl-6">
<img src="https://ai-public.mastergo.com/ai/img_res/ab334fb66bf97623bb723d779b46350a.jpg" class="w-10 h-10 rounded-full object-cover" alt="Avatar">
<div>
<div class="flex items-center space-x-2">
<span class="font-medium">徐建成</span>
</div>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 !rounded-button whitespace-nowrap flex items-center space-x-2 transition-all duration-300 hover:shadow-lg hover:shadow-primary/20">
<i class="fas fa-key"></i>
<span>申请权限</span>
</button>
</div>
</div>
</header>
<div class="mb-8 relative w-[1440px] h-[400px] -mx-6 overflow-hidden">
<img src="https://ai-public.mastergo.com/ai/img_res/bef2b361efc286d4026c7b2abe6fbca2.jpg" alt="Banner" class="w-full h-[400px] object-cover object-center">
</div>
<div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden mb-8">
<div class="border-b border-gray-100">
<div class="p-6 flex items-center justify-between">
<h2 class="text-2xl font-medium flex items-center">
<i class="fas fa-newspaper text-primary mr-3"></i>
标准资讯
</h2>
<button class="text-primary hover:text-primary/80 flex items-center space-x-1 transition-colors">
<span>查看更多</span>
<i class="fas fa-arrow-right text-sm"></i>
</button>
</div>
</div>
<div class="p-6">
<div class="grid grid-cols-1 gap-6">
<div class="flex items-start space-x-4">
<div class="bg-primary/10 p-3 rounded-lg transition-all duration-300 hover:bg-primary/20 hover:scale-105">
<i class="fas fa-file-alt text-primary text-xl"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium">航空材料检测技术创新研讨会顺利召开</h3>
<span class="text-sm text-gray-400">2024-01-04</span>
</div>
<p class="text-gray-500 text-sm line-clamp-2">来自全国各地的航空材料检测专家齐聚一堂，共同探讨行业最新技术发展趋势和创新方向，为推动航空材料检测技术进步贡献智慧。</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="bg-primary/10 p-3 rounded-lg transition-all duration-300 hover:bg-primary/20 hover:scale-105">
<i class="fas fa-chart-line text-primary text-xl"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium">2023年航空材料行业发展报告发布</h3>
<span class="text-sm text-gray-400">2024-01-03</span>
</div>
<p class="text-gray-500 text-sm line-clamp-2">报告全面总结了2023年航空材料行业发展现状，深入分析了行业面临的机遇与挑战，并对2024年行业发展趋势进行了展望。</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="bg-primary/10 p-3 rounded-lg transition-all duration-300 hover:bg-primary/20 hover:scale-105">
<i class="fas fa-flask text-primary text-xl"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium">新型航空复合材料研发取得重大突破</h3>
<span class="text-sm text-gray-400">2024-01-02</span>
</div>
<p class="text-gray-500 text-sm line-clamp-2">我国科研团队成功研发出新一代航空复合材料，在强度、韧性和耐高温性能方面取得显著突破，将为航空工业发展提供重要支撑。</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex gap-8">
<div class="w-[150px]">
<div class="bg-secondary p-4 rounded-lg h-full">
<div class="flex flex-col gap-[24px]">
<div class="p-3 rounded-lg cursor-pointer hover:shadow-lg transition-shadow nav-item active w-full" data-tab="tab1">
<div class="text-center">
<div class="bg-primary/10 p-3 rounded-lg inline-block mb-2">
<i class="fas fa-database text-primary text-xl"></i>
</div>
<div>
<h3 class="font-medium text-sm">原材料性能数据</h3>
</div>
</div>
</div>
<div class="p-3 rounded-lg cursor-pointer hover:shadow-lg transition-shadow nav-item w-full" data-tab="tab2">
<div class="text-center">
<div class="bg-primary/10 p-3 rounded-lg inline-block mb-2">
<i class="fas fa-vial text-primary text-xl"></i>
</div>
<div>
<h3 class="font-medium text-sm">产品复验结果</h3>
</div>
</div>
</div>
<div class="p-3 rounded-lg cursor-pointer hover:shadow-lg transition-shadow nav-item w-full" data-tab="tab3">
<div class="text-center">
<div class="bg-primary/10 p-3 rounded-lg inline-block mb-2">
<i class="fas fa-chart-bar text-primary text-xl"></i>
</div>
<div>
<h3 class="font-medium text-sm">质量分析工具</h3>
</div>
</div>
</div>
<div class="p-3 rounded-lg cursor-pointer hover:shadow-lg transition-shadow nav-item w-full" data-tab="tab4">
<div class="text-center">
<div class="bg-primary/10 p-3 rounded-lg inline-block mb-2">
<i class="fas fa-industry text-primary text-xl"></i>
</div>
<div>
<h3 class="font-medium text-sm">材料制造商名录</h3>
</div>
</div>
</div>
<div class="p-3 rounded-lg cursor-pointer hover:shadow-lg transition-shadow nav-item w-full" data-tab="tab5">
<div class="text-center">
<div class="bg-primary/10 p-3 rounded-lg inline-block mb-2">
<i class="fas fa-certificate text-primary text-xl"></i>
</div>
<div>
<h3 class="font-medium text-sm">授权检测机构名录</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-1 flex flex-col gap-4">
<div id="tab1" class="tab-content active">
<div class="flex justify-between items-center mb-6">
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="搜索材料编号/名称" class="bg-white border-none px-4 py-2 pl-10 !rounded-button w-64 transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:shadow-lg">
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
</div>
<button onclick="toggleAdvancedFilter()" id="advancedFilterBtn" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 !rounded-button whitespace-nowrap flex items-center space-x-2">
<span>高级筛选</span>
<i class="fas fa-chevron-down transition-transform" id="filterIcon"></i>
</button>
<div class="flex justify-end">
<button class="text-primary hover:text-primary/80 border border-primary/20 hover:border-primary/40 bg-primary/5 hover:bg-primary/10 px-6 py-2 !rounded-button whitespace-nowrap flex items-center space-x-2 transition-all duration-300">
<i class="fas fa-list"></i>
<span>查看更多材料</span>
</button>
</div>
<div id="advancedFilterPanel" class="hidden mt-4">
<div class="bg-gray-50 p-6 rounded-lg border border-gray-100">
<div class="grid grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">材料名称</label>
<input type="text" placeholder="请输入材料名称" class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button focus:border-primary focus:ring-1 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">生产批号</label>
<input type="text" placeholder="请输入生产批号" class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button focus:border-primary focus:ring-1 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">材料制造商</label>
<div class="relative">
<button class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button text-gray-700 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary">
<span>选择制造商</span>
<i class="fas fa-chevron-down text-gray-400"></i>
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">材料等级</label>
<div class="relative">
<button class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button text-gray-700 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary">
<span>选择等级</span>
<i class="fas fa-chevron-down text-gray-400"></i>
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">材料规格</label>
<input type="text" placeholder="请输入材料规格" class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button focus:border-primary focus:ring-1 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">批次数量范围</label>
<div class="flex items-center space-x-4">
<div class="flex-1 relative">
<input type="number" placeholder="最小值" class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button focus:border-primary focus:ring-1 focus:ring-primary">
</div>
<span class="text-gray-500">至</span>
<div class="flex-1 relative">
<input type="number" placeholder="最大值" class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button focus:border-primary focus:ring-1 focus:ring-primary">
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">检测状态</label>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 !rounded-button bg-white border border-gray-200 hover:border-primary hover:text-primary whitespace-nowrap transition-colors">全部</button>
<button class="px-4 py-2 !rounded-button bg-white border border-gray-200 hover:border-primary hover:text-primary whitespace-nowrap transition-colors">已通过</button>
<button class="px-4 py-2 !rounded-button bg-primary text-white whitespace-nowrap">检测中</button>
<button class="px-4 py-2 !rounded-button bg-white border border-gray-200 hover:border-primary hover:text-primary whitespace-nowrap transition-colors">待检测</button>
<button class="px-4 py-2 !rounded-button bg-white border border-gray-200 hover:border-primary hover:text-primary whitespace-nowrap transition-colors">不合格</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">生产日期</label>
<div class="relative">
<button class="w-full bg-white border border-gray-200 px-4 py-2 !rounded-button text-gray-700 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary">
<span>选择日期范围</span>
<i class="fas fa-calendar text-gray-400"></i>
</button>
</div>
</div>
</div>
<div class="flex justify-end space-x-4 mt-6 pt-6 border-t border-gray-100">
<button class="px-6 py-2 !rounded-button bg-gray-100 hover:bg-gray-200 transition-colors whitespace-nowrap flex items-center">
<i class="fas fa-undo-alt mr-2 text-gray-500"></i>
重置
</button>
<button class="px-6 py-2 !rounded-button bg-primary text-white hover:bg-primary/90 transition-colors whitespace-nowrap flex items-center">
<i class="fas fa-search mr-2"></i>
搜索
</button>
</div>
</div>
</div>
<script>
function toggleAdvancedFilter() {
const panel = document.getElementById('advancedFilterPanel');
const icon = document.getElementById('filterIcon');
panel.classList.toggle('hidden');
icon.style.transform = panel.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
}
</script>
</div>
</div>
<div class="overflow-x-auto">
<div class="flex items-center justify-end space-x-4 mb-6">
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 !rounded-button whitespace-nowrap flex items-center space-x-2 transition-all duration-300 hover:shadow-lg hover:shadow-primary/20">
<i class="fas fa-plus"></i>
<span>新建材料</span>
</button>
</div>
<div class="grid grid-cols-3 gap-6 mb-6">
<div class="bg-white shadow-md hover:shadow-xl transition-all duration-300 p-6 rounded-lg hover:-translate-y-1 group">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 rounded-full bg-green-500 group-hover:animate-pulse"></div>
<span class="text-sm text-gray-400">材料编号</span>
</div>
<span class="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm transition-all duration-300 hover:bg-green-500/30 hover:scale-105 flex items-center space-x-1">
<i class="fas fa-check-circle text-xs"></i>
<span>已通过</span>
</span>
</div>
<h3 class="text-xl font-medium mb-2">AM-2023001</h3>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">材料名称</span>
<span>高强度铝合金</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">规格型号</span>
<span>7075-T6</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">生产批次</span>
<span>20231201-A</span>
</div>
</div>
<div class="flex space-x-2 mt-4">
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-eye group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-edit group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-download group-hover:text-primary transition-colors"></i>
</button>
</div>
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-primary text-white p-2 rounded-full shadow-lg hover:shadow-xl transition-shadow">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<div class="bg-white shadow-md hover:shadow-xl transition-all duration-300 p-6 rounded-lg hover:-translate-y-1">
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-400">材料编号</span>
<span class="bg-yellow-500/20 text-yellow-400 px-3 py-1 rounded-full text-sm">检测中</span>
</div>
<h3 class="text-xl font-medium mb-2">AM-2023002</h3>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">材料名称</span>
<span>钛合金板材</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">规格型号</span>
<span>TC4-DT</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">生产批次</span>
<span>20231202-B</span>
</div>
</div>
<div class="flex space-x-2 mt-4">
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-eye group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-edit group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-download group-hover:text-primary transition-colors"></i>
</button>
</div>
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-primary text-white p-2 rounded-full shadow-lg hover:shadow-xl transition-shadow">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<div class="bg-white shadow-md hover:shadow-xl transition-all duration-300 p-6 rounded-lg hover:-translate-y-1">
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-400">材料编号</span>
<span class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-full text-sm">待检测</span>
</div>
<h3 class="text-xl font-medium mb-2">AM-2023003</h3>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">材料名称</span>
<span>碳纤维复合材料</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">规格型号</span>
<span>T800-M21</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">生产批次</span>
<span>20231203-C</span>
</div>
</div>
<div class="flex space-x-2 mt-4">
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-eye group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-edit group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-download group-hover:text-primary transition-colors"></i>
</button>
</div>
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-primary text-white p-2 rounded-full shadow-lg hover:shadow-xl transition-shadow">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<div class="bg-white shadow-md hover:shadow-xl transition-all duration-300 p-6 rounded-lg hover:-translate-y-1">
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-400">材料编号</span>
<span class="bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm">不合格</span>
</div>
<h3 class="text-xl font-medium mb-2">AM-2023004</h3>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">材料名称</span>
<span>镍基高温合金</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">规格型号</span>
<span>GH4169</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">生产批次</span>
<span>20231204-D</span>
</div>
</div>
<div class="flex space-x-2 mt-4">
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-eye group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-edit group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-download group-hover:text-primary transition-colors"></i>
</button>
</div>
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-primary text-white p-2 rounded-full shadow-lg hover:shadow-xl transition-shadow">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<div class="bg-white shadow-md hover:shadow-xl transition-all duration-300 p-6 rounded-lg hover:-translate-y-1 group">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 rounded-full bg-green-500 group-hover:animate-pulse"></div>
<span class="text-sm text-gray-400">材料编号</span>
</div>
<span class="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm transition-all duration-300 hover:bg-green-500/30 hover:scale-105 flex items-center space-x-1">
<i class="fas fa-check-circle text-xs"></i>
<span>已通过</span>
</span>
</div>
<h3 class="text-xl font-medium mb-2">AM-2023005</h3>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">材料名称</span>
<span>钢铁合金</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">规格型号</span>
<span>ST-800</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">生产批次</span>
<span>20231205-E</span>
</div>
</div>
<div class="flex space-x-2 mt-4">
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-eye group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-edit group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-download group-hover:text-primary transition-colors"></i>
</button>
</div>
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-primary text-white p-2 rounded-full shadow-lg hover:shadow-xl transition-shadow">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<div class="bg-white shadow-md hover:shadow-xl transition-all duration-300 p-6 rounded-lg hover:-translate-y-1">
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-400">材料编号</span>
<span class="bg-yellow-500/20 text-yellow-400 px-3 py-1 rounded-full text-sm">检测中</span>
</div>
<h3 class="text-xl font-medium mb-2">AM-2023006</h3>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-400">材料名称</span>
<span>陶瓷基复合材料</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">规格型号</span>
<span>CMC-100</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">生产批次</span>
<span>20231206-F</span>
</div>
</div>
<div class="flex space-x-2 mt-4">
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-eye group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-edit group-hover:text-primary transition-colors"></i>
</button>
<button class="bg-primary/20 hover:bg-primary/30 p-3 !rounded-button transition-all duration-300 hover:shadow-lg hover:scale-105 group">
<i class="fas fa-download group-hover:text-primary transition-colors"></i>
</button>
</div>
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="bg-primary text-white p-2 rounded-full shadow-lg hover:shadow-xl transition-shadow">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-end items-center mt-6">
<nav class="flex items-center space-x-2">
<span class="text-gray-500 mr-4">6条/页</span>
<button class="w-10 h-10 flex items-center justify-center !rounded-button bg-white border border-gray-200 text-gray-500 hover:border-primary hover:text-primary transition-colors">
<i class="fas fa-chevron-left text-sm"></i>
</button>
<button class="w-10 h-10 flex items-center justify-center !rounded-button bg-primary text-white border border-primary">1</button>
<button class="w-10 h-10 flex items-center justify-center !rounded-button bg-white border border-gray-200 text-gray-700 hover:border-primary hover:text-primary transition-colors">2</button>
<button class="w-10 h-10 flex items-center justify-center !rounded-button bg-white border border-gray-200 text-gray-700 hover:border-primary hover:text-primary transition-colors">3</button>
<span class="w-10 h-10 flex items-center justify-center text-gray-400">...</span>
<button class="w-10 h-10 flex items-center justify-center !rounded-button bg-white border border-gray-200 text-gray-700 hover:border-primary hover:text-primary transition-colors">10</button>
<button class="w-10 h-10 flex items-center justify-center !rounded-button bg-white border border-gray-200 text-gray-500 hover:border-primary hover:text-primary transition-colors">
<i class="fas fa-chevron-right text-sm"></i>
</button>
<div class="flex items-center space-x-2 ml-4">
<span class="text-gray-500">跳至</span>
<input type="number" min="1" max="10" class="w-16 h-10 px-2 border border-gray-200 !rounded-button focus:border-primary focus:ring-1 focus:ring-primary outline-none text-center" placeholder="页码">
<span class="text-gray-500">页</span>
</div>
</nav>
</div>
</div>
<div id="tab2" class="tab-content">
<div id="performanceChart" style="width: 1000px; height: 400px;" class="mx-auto"></div>
</div>
<div id="tab3" class="tab-content">
<div class="grid grid-cols-1 gap-6">
<div class="bg-white shadow p-6 rounded-lg">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl">数据分析工具</h3>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="搜索分析项目" class="bg-white border-none px-4 py-2 pl-10 !rounded-button w-64">
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 !rounded-button whitespace-nowrap">
创建分析
</button>
</div>
</div>
<div id="analysisChart" style="width: 1000px; height: 300px;" class="mx-auto"></div>
</div>
</div>
</div>
<div id="tab4" class="tab-content">
<div class="grid grid-cols-1 gap-6">
<div class="bg-white shadow p-6 rounded-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl">上海航空材料有限公司</h3>
<span class="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm">
AS9100 认证
</span>
</div>
<p class="text-gray-400 mb-4">专注航空材料研发与制造 20 年</p>
<div class="flex space-x-4">
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 !rounded-button whitespace-nowrap">
查看详情
</button>
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 !rounded-button whitespace-nowrap">
联系方式
</button>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-content">
<div class="grid grid-cols-1 gap-6">
<div class="bg-white shadow p-6 rounded-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl">国家航空材料检测中心</h3>
<span class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-full text-sm">
CNAS 认证
</span>
</div>
<p class="text-gray-400 mb-4">国家级航空材料检测机构</p>
<div class="flex space-x-4">
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 !rounded-button whitespace-nowrap">
查看资质
</button>
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 !rounded-button whitespace-nowrap">
预约检测
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
this.classList.add('active');
document.getElementById(this.dataset.tab).classList.add('active');
});
});
const performanceChart = echarts.init(document.getElementById('performanceChart'));
performanceChart.setOption({
animation: false,
title: {
text: '材料性能趋势分析',
textStyle: {
color: '#1F2937',
fontSize: 16,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['抗拉强度', '屈服强度', '延伸率', '硬度'],
bottom: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLabel: {
color: '#1F2937'
}
},
yAxis: [
{
type: 'value',
name: '强度 (MPa)',
position: 'left',
axisLabel: {
color: '#1F2937',
formatter: '{value}'
}
},
{
type: 'value',
name: '延伸率/硬度',
position: 'right',
axisLabel: {
color: '#1F2937',
formatter: '{value}'
}
}
],
series: [
{
name: '抗拉强度',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
itemStyle: {
color: '#0056B3'
}
},
{
name: '屈服强度',
type: 'line',
smooth: true,
data: [720, 832, 801, 834, 1190, 1230],
itemStyle: {
color: '#00B37E'
}
},
{
name: '延伸率',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: [12, 13.2, 12.8, 13.4, 14.2, 14.8],
itemStyle: {
color: '#F59E0B'
}
},
{
name: '硬度',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: [280, 295, 285, 298, 315, 322],
itemStyle: {
color: '#7C3AED'
}
}
]
});
const analysisChart = echarts.init(document.getElementById('analysisChart'));
analysisChart.setOption({
animation: false,
title: {
text: '质量分布分析',
textStyle: {
color: '#1F2937',
fontSize: 16,
fontWeight: 'bold'
}
},
color: ['#0056B3', '#90CAF9', '#F44336'],
tooltip: {
trigger: 'item'
},
series: [{
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '合格'},
{value: 235, name: '待检'},
{value: 580, name: '不合格'}
]
}]
});
</script>
<div id="ai-assistant" class="fixed bottom-8 right-8 z-50">
<button onclick="toggleAIDialog()" class="relative group flex items-center justify-center w-16 h-16 bg-primary hover:bg-primary/90 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
<i class="fas fa-robot text-2xl mr-1"></i>
<span class="text-base font-medium whitespace-nowrap">AI助手</span>
<div class="absolute -top-2 -right-2 w-5 h-5 bg-green-500 border-2 border-white rounded-full animate-pulse"></div>
<span class="absolute right-full mr-4 py-2 px-4 bg-white text-gray-700 rounded-lg shadow-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300">
点击开始 AI 对话
</span>
</button>
<div id="ai-dialog" class="fixed bottom-28 right-8 w-[768px] bg-white rounded-xl shadow-2xl opacity-0 scale-95 transition-all duration-300 pointer-events-none">
<div class="flex items-center justify-between p-4 border-b border-gray-100">
<h3 class="text-lg font-medium">AI 助手</h3>
<button onclick="toggleAIDialog()" class="p-1 hover:bg-gray-100 rounded-lg transition-colors">
<i class="fas fa-times"></i>
</button>
</div>
<div class="h-[600px] p-4 overflow-y-auto">
<div class="space-y-4">
<div class="flex justify-start">
<div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
<p>你好！我是你的 AI 助手，有什么可以帮助你的吗？</p>
</div>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-100">
<div class="flex space-x-2">
<input type="text" value="我想了解TC4的力学检测数据" placeholder="请输入你的问题..." class="flex-1 px-4 py-2 border border-gray-200 !rounded-button focus:border-primary focus:ring-1 focus:ring-primary">
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 !rounded-button whitespace-nowrap flex items-center space-x-2">
<span>发送</span>
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<script>
function toggleAIDialog() {
const dialog = document.getElementById('ai-dialog');
if(dialog.classList.contains('opacity-0')) {
dialog.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
dialog.classList.add('opacity-100', 'scale-100', 'pointer-events-auto');
} else {
dialog.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
dialog.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
}
}
document.querySelector('#ai-dialog button.bg-primary').addEventListener('click', function() {
const input = document.querySelector('#ai-dialog input[type="text"]');
const chatContainer = document.querySelector('#ai-dialog .space-y-4');
const message = input.value;
if(message.trim()) {
// 添加用户消息
chatContainer.innerHTML += `
<div class="flex justify-end">
<div class="bg-primary/10 text-primary rounded-lg p-3 max-w-[80%]">
<p>${message}</p>
</div>
</div>
`;
// 添加AI回复
chatContainer.innerHTML += `
<div class="flex justify-start">
<div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
<p class="text-sm leading-relaxed">
TC4最新检测数据显示，共涉及6类检测项目：<br><br>
<span class="font-medium">一、检测项目范围</span><br>
1. 拉伸性能(高温/室温)<br>
2. 化学成分<br>
3. 应力疲劳<br>
4. 层板拉伸性能<br>
5. 管材收缩应变比<br><br>
<span class="font-medium">二、关键发现</span><br>
1. 拉伸性能(高温)<br>
- 抗拉强度：888-899 MPa (数据稳定，波动≤1.2%)<br>
- 委托单差异：WT-20250226-018数据略低于WT-20250303-013<br><br>
2. 化学成分(异常点)<br>
● Al含量：<br>
- WT-20250304-013委托单：1wt/% (显著异常，可能为数据错误)<br>
- WT-20250227-002委托单：6.1-6.3wt/% (符合常规钛合金Al含量范围)<br>
● H含量：<br>
- WT-20250225-008委托单：0.02-0.022 wt/% (正常)<br>
- WT-20250304-013委托单：5-6 wt/% (严重超标，或为数据单位错误)<br><br>
3. 拉伸性能(室温)<br>
- 检测值全为"zz" (需确认是否为有效数据)<br><br>
<span class="font-medium">三、建议</span><br>
1. 立即核查异常数据(如AI=1 wt%、H=6 wt%)<br>
2. 确认"zz"值的实际含义<br>
3. 补充缺失单位(如腐蚀疲劳寿命单位)<br>
4. 提供材料标准值范围以便对比分析</p>
</div>
</div>
`;
// 清空输入框
input.value = '';
// 滚动到底部
chatContainer.scrollTop = chatContainer.scrollHeight;
}
});
</script>
<footer class="bg-gray-900 mt-8">
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-4 gap-8 text-white/80">
<div>
<h3 class="font-medium text-lg text-white mb-4">关于我们</h3>
<div class="space-y-2">
<p>企业简介</p>
<p>发展历程</p>
<p>新闻动态</p>
<p>联系我们</p>
</div>
</div>
<div>
<h3 class="font-medium text-lg text-white mb-4">技术服务</h3>
<div class="space-y-2">
<p>材料检测</p>
<p>失效分析</p>
<p>工艺优化</p>
<p>质量控制</p>
</div>
</div>
<div>
<h3 class="font-medium text-lg text-white mb-4">资源中心</h3>
<div class="space-y-2">
<p>技术文献</p>
<p>行业标准</p>
<p>数据下载</p>
<p>培训课程</p>
</div>
</div>
<div>
<h3 class="font-medium text-lg text-white mb-4">联系方式</h3>
<div class="space-y-2">
<p>电话: 400-888-8888</p>
<p>邮箱: [email protected]</p>
<p>地址: 上海市浦东新区航空路888号</p>
</div>
</div>
</div>
<div class="border-t border-white/10 mt-8 pt-8 text-center text-white/60">
Copyright © 2024 航空工业材料管理平台. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
index.html
style.css
index.html