<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>未授æƒè®¿é—® | 访问å—é™</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- é…ç½®Tailwind自定义颜色和å—体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#F59E0B',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</style>
<!-- å…¨å±€æ ·å¼ -->
<style>
body {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
background-attachment: fixed;
}
.error-code {
background: linear-gradient(90deg, #3B82F6, #2563EB);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lock-icon {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="font-inter min-h-screen flex flex-col">
<!-- 导航æ -->
<nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-shield text-primary text-xl"></i>
<span class="text-dark font-semibold text-lg">安全系统</span>
</div>
<div class="hidden md:flex items-center space-x-6">
<!-- <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
<a href="#" class="text-gray-600 hover:text-primary transition-colors">关于</a>
<a href="#" class="text-gray-600 hover:text-primary transition-colors">è”系我们</a> -->
</div>
<button class="md:hidden text-gray-600 focus:outline-none">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
</nav>
<!-- 主è¦å†…容 -->
<main class="flex-grow container mx-auto px-4 py-12 md:py-20">
<div class="max-w-3xl mx-auto text-center">
<!-- é”™è¯¯å›¾æ ‡ -->
<div class="mb-8 animate-float">
<i class="fa fa-lock lock-icon text-[120px] md:text-[180px]"></i>
</div>
<!-- é”™è¯¯æ ‡é¢˜ -->
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 error-code">401</h1>
<!-- 错误æè¿° -->
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-semibold text-dark mb-4">未授æƒè®¿é—®</h2>
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
您似乎没有æƒé™è®¿é—®æ¤é¡µé¢ã€‚请检查您的å‡æ®æˆ–è”系管ç†å‘˜èŽ·å–帮助。<br>咨询çƒçº¿ï¼š15336437858
</p>
<!-- 按钮组 -->
<!-- <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
<a href="#" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center">
<i class="fa fa-home mr-2"></i> 返回首页
</a>
<a href="#" class="px-6 py-3 bg-white hover:bg-gray-50 text-primary border border-primary rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center">
<i class="fa fa-sign-in mr-2"></i> 登录账户
</a>
</div> -->
<!-- è¾…åŠ©ä¿¡æ¯ -->
<div class="bg-gray-100/80 backdrop-blur-sm rounded-xl p-6 shadow-md max-w-lg mx-auto">
<h3 class="text-lg font-medium text-dark mb-3 flex items-center justify-center">
<i class="fa fa-info-circle text-primary mr-2"></i> 您å¯èƒ½é‡åˆ°çš„问题
</h3>
<ul class="text-left space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>未授æƒç¨‹åº</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>您的账户没有访问æ¤èµ„æºçš„æƒé™</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>您å°è¯•è®¿é—®çš„页é¢éœ€è¦ç‰¹æ®Šæƒé™</span>
</li>
</ul>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-dark text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="flex items-center space-x-2">
<i class="fa fa-shield text-primary text-xl"></i>
<span class="font-semibold text-lg">安全系统</span>
</div>
<p class="text-gray-400 text-sm mt-1">ä¿æŠ¤æ‚¨çš„æ•°å—资产安全</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
<div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
© 2025 安全系统. ä¿ç•™æ‰€æœ‰æƒåˆ©.
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// 页é¢åŠ 载完æˆåŽæ‰§è¡Œ
document.addEventListener('DOMContentLoaded', function() {
// 导航æ 滚动效果
const nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
nav.classList.add('py-2', 'shadow-md');
nav.classList.remove('py-3', 'shadow-sm');
} else {
nav.classList.add('py-3', 'shadow-sm');
nav.classList.remove('py-2', 'shadow-md');
}
});
// 按钮悬åœåŠ¨ç”»
const buttons = document.querySelectorAll('a');
buttons.forEach(button => {
button.addEventListener('mouseenter', function() {
this.classList.add('scale-105');
});
button.addEventListener('mouseleave', function() {
this.classList.remove('scale-105');
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
});
</script>
</body>
</html>