938 lines
54 KiB
HTML
938 lines
54 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>枢机协律 CreateE=mc² - Minecraft服务器</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
dark: '#0f172a',
|
||
darker: '#020617',
|
||
primary: '#1e40af',
|
||
secondary: '#3b82f6',
|
||
accent: '#60a5fa',
|
||
success: '#10b981',
|
||
},
|
||
fontFamily: {
|
||
inter: ['Inter', 'system-ui', 'sans-serif'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.text-shadow {
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||
}
|
||
.bg-glass {
|
||
background: rgba(15, 23, 42, 0.7);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.animate-float {
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
@keyframes float {
|
||
0% { transform: translateY(0px); }
|
||
50% { transform: translateY(-15px); }
|
||
100% { transform: translateY(0px); }
|
||
}
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.1), 0 8px 10px -6px rgba(96, 165, 250, 0.1);
|
||
}
|
||
/* 大图查看弹窗样式 */
|
||
.image-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
z-index: 1000;
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.image-modal.active {
|
||
display: flex;
|
||
}
|
||
|
||
.modal-content {
|
||
max-width: 90%;
|
||
max-height: 90%;
|
||
position: relative;
|
||
}
|
||
|
||
.modal-image {
|
||
max-width: 100%;
|
||
max-height: 80vh;
|
||
object-contain: contain;
|
||
}
|
||
|
||
.close-modal {
|
||
position: absolute;
|
||
top: -40px;
|
||
right: 0;
|
||
color: white;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-dark text-gray-200 font-inter min-h-screen flex flex-col">
|
||
<!-- 导航栏 -->
|
||
<header class="sticky top-0 z-50 bg-glass border-b border-primary/30">
|
||
<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-cogs text-accent text-2xl"></i>
|
||
<h1 class="text-xl md:text-2xl font-bold text-white">
|
||
枢机协律 <span class="text-accent">CreateE=mc²</span>
|
||
</h1>
|
||
</div>
|
||
|
||
<!-- 桌面版导航 -->
|
||
<div class="hidden md:flex items-center space-x-6">
|
||
<nav class="flex space-x-6">
|
||
<a href="#about" class="hover:text-accent transition-colors duration-200">关于服务器</a>
|
||
<a href="#connect" class="hover:text-accent transition-colors duration-200">连接信息</a>
|
||
<a href="#mods" class="hover:text-accent transition-colors duration-200">服务器模组</a>
|
||
<a href="#target" class="hover:text-accent transition-colors duration-200">靶机信息</a>
|
||
<a href="https://3crb.gvsds.com" target="_blank" class="hover:text-accent transition-colors duration-200">3CRB 银行</a>
|
||
<a href="https://3crb.gvsds.com/PriceList.html" target="_blank" class="hover:text-accent transition-colors duration-200">物资价格表</a>
|
||
<a href="https://mc.gvsds.com:8100" target="_blank" class="hover:text-accent transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-map-o mr-1"></i> 服务器地图
|
||
</a>
|
||
</nav>
|
||
<!-- 登录/注册按钮组(桌面端) -->
|
||
<div class="flex space-x-3">
|
||
<a href="https://mc.gvsds.com/bind.html" target="_blank"
|
||
class="px-4 py-1.5 bg-white/10 hover:bg-white/20 text-white rounded transition-colors duration-200">
|
||
登录 / 注册
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动版导航 -->
|
||
<div class="flex items-center space-x-4 md:hidden">
|
||
<button id="mobile-menu-button" class="text-white text-xl focus:outline-none">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 移动菜单(默认隐藏) -->
|
||
<div id="mobile-menu" class="hidden absolute top-16 left-0 right-0 bg-gray-800 z-50 md:hidden transition-all duration-300 ease-in-out transform">
|
||
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
|
||
<a href="#about" class="hover:text-accent transition-colors duration-200 py-2">关于服务器</a>
|
||
<a href="#connect" class="hover:text-accent transition-colors duration-200 py-2">连接信息</a>
|
||
<a href="#mods" class="hover:text-accent transition-colors duration-200 py-2">服务器模组</a>
|
||
<a href="#target" class="hover:text-accent transition-colors duration-200 py-2">靶机信息</a>
|
||
<a href="https://3crb.gvsds.com" target="_blank" class="hover:text-accent transition-colors duration-200 py-2">3CRB 银行</a>
|
||
<a href="https://3crb.gvsds.com/PriceList.html" target="_blank" class="hover:text-accent transition-colors duration-200 py-2">物资价格表</a>
|
||
<a href="https://mc.gvsds.com:8100" target="_blank" class="hover:text-accent transition-colors duration-200 py-2 flex items-center">
|
||
<i class="fa fa-map-o mr-2"></i> 服务器地图
|
||
</a>
|
||
<a href="https://mc.gvsds.com/bind.html" target="_blank"
|
||
class="px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded transition-colors duration-200 text-center">
|
||
登录 / 注册
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 移动菜单切换逻辑
|
||
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
||
const menu = document.getElementById('mobile-menu');
|
||
menu.classList.toggle('hidden');
|
||
});
|
||
|
||
// 点击菜单外区域关闭菜单
|
||
document.addEventListener('click', function(event) {
|
||
const menu = document.getElementById('mobile-menu');
|
||
const button = document.getElementById('mobile-menu-button');
|
||
|
||
if (!menu.contains(event.target) && event.target !== button && !button.contains(event.target)) {
|
||
menu.classList.add('hidden');
|
||
}
|
||
});
|
||
</script>
|
||
</header>
|
||
|
||
<!-- 英雄区域 -->
|
||
<section class="relative h-[70vh] flex items-center justify-center overflow-hidden">
|
||
<div class="absolute inset-0 z-0">
|
||
<img src="/assets/mien_notresize/10.png" alt="CreateEServerBackGround" class="w-full h-full object-cover opacity-90">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-darker/10 to-dark"></div>
|
||
</div>
|
||
<div class="container mx-auto px-4 z-10 text-center">
|
||
<h1 class="text-4xl md:text-6xl font-bold mb-4 text-white text-shadow animate-float">
|
||
枢机协律 <span class="text-accent">CreateE=mc²</span>
|
||
</h1>
|
||
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">
|
||
纯生存 | 特色交易系统 | <span class="text-accent">全版本可连接</span>
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||
<a href="#connect" class="bg-primary hover:bg-secondary text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105">
|
||
<i class="fa fa-server mr-2"></i> 连接服务器
|
||
</a>
|
||
<a href="https://mc.gvsds.com:8100" target="_blank" class="bg-transparent border-2 border-accent text-accent hover:bg-accent/10 font-semibold py-3 px-8 rounded-lg transition-all duration-300">
|
||
<i class="fa fa-map mr-2"></i> 查看地图
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-dark to-transparent"></div>
|
||
</section>
|
||
|
||
<!-- 服务器图片展示(按alt分类) -->
|
||
<section class="py-16 bg-darker">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold mb-12 text-center text-white">服务器风采</h2>
|
||
|
||
<!-- 公共区域图片 -->
|
||
<div class="mb-12">
|
||
<h3 class="text-2xl font-semibold mb-6 text-accent border-b border-accent/30 pb-2">公共区域(PUBLIC)</h3>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/3.png" alt="PUBLIC-1" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/4.png" alt="PUBLIC-2" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/13.png" alt="PUBLIC-3" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/17.png" alt="PUBLIC-4" class="w-full h-60 object-cover">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ZHUI_ER的建造 -->
|
||
<div class="mb-12">
|
||
<h3 class="text-2xl font-semibold mb-6 text-accent border-b border-accent/30 pb-2">ZHUI_ER的建造</h3>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/2.png" alt="ZHUI_ER-1" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/7.png" alt="ZHUI_ER-2" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/9.png" alt="ZHUI_ER-3" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/10.png" alt="ZHUI_ER-4" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/11.png" alt="ZHUI_ER-5" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/12.png" alt="ZHUI_ER-6" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/14.png" alt="ZHUI_ER-7" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/15.png" alt="ZHUI_ER-8" class="w-full h-60 object-cover">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CODEYZHANG的建造 -->
|
||
<div class="mb-12">
|
||
<h3 class="text-2xl font-semibold mb-6 text-accent border-b border-accent/30 pb-2">CODEYZHANG的建造</h3>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/8.png" alt="CODEYZHANG-1" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/19.png" alt="CODEYZHANG-2" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/20.png" alt="CODEYZHANG-3" class="w-full h-60 object-cover">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MXYYSH1的建造 -->
|
||
<div class="mb-12">
|
||
<h3 class="text-2xl font-semibold mb-6 text-accent border-b border-accent/30 pb-2">MXYYSH1的建造</h3>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/1.png" alt="MXYYSH1-1" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/16.png" alt="MXYYSH1-2" class="w-full h-60 object-cover">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 其他玩家建造 -->
|
||
<div>
|
||
<h3 class="text-2xl font-semibold mb-6 text-accent border-b border-accent/30 pb-2">其他玩家建造</h3>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/5.png" alt="YRZD6-1" class="w-full h-60 object-cover">
|
||
</div>
|
||
<div class="rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-accent/20">
|
||
<img src="/assets/mien/18.png" alt="YUU-1" class="w-full h-60 object-cover">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 辅助信息卡片区 -->
|
||
<section class="py-16 bg-dark">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold mb-12 text-center text-white">服务器核心信息</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||
<!-- 服务器基本信息卡片 -->
|
||
<div class="bg-glass rounded-xl p-6 border border-primary/20 shadow-lg card-hover">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-primary/20 p-3 rounded-full mr-3">
|
||
<i class="fa fa-info-circle text-accent text-xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-white">基本信息</h3>
|
||
</div>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li class="flex justify-between">
|
||
<span class="text-gray-400">服务器名称</span>
|
||
<span>枢机协律 CreateE=mc²</span>
|
||
</li>
|
||
<li class="flex justify-between">
|
||
<span class="text-gray-400">版本</span>
|
||
<span>1.20.1</span>
|
||
</li>
|
||
<li class="flex justify-between">
|
||
<span class="text-gray-400">类型</span>
|
||
<span>Fabric</span>
|
||
</li>
|
||
<li class="flex justify-between">
|
||
<span class="text-gray-400">协议版本</span>
|
||
<span>763</span>
|
||
</li>
|
||
<li class="flex justify-between">
|
||
<span class="text-gray-400">难度</span>
|
||
<span>困难(Local:3.19)</span>
|
||
</li>
|
||
<li class="flex justify-between">
|
||
<span class="text-gray-400">服务器日期</span>
|
||
<span>987</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 连接信息卡片 -->
|
||
<div class="bg-glass rounded-xl p-6 border border-primary/20 shadow-lg card-hover">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-primary/20 p-3 rounded-full mr-3">
|
||
<i class="fa fa-link text-accent text-xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-white">连接方式</h3>
|
||
</div>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li>
|
||
<span class="text-gray-400 block text-sm mb-1">Java版主地址</span>
|
||
<p class="font-medium">mc.gvsds.com:25565</p>
|
||
</li>
|
||
<li>
|
||
<span class="text-gray-400 block text-sm mb-1">备用地址1</span>
|
||
<p class="font-medium">123.57.88.163:25565</p>
|
||
</li>
|
||
<li>
|
||
<span class="text-gray-400 block text-sm mb-1">备用地址2</span>
|
||
<p class="font-medium">114.66.59.25:25565</p>
|
||
</li>
|
||
<li>
|
||
<span class="text-gray-400 block text-sm mb-1">基岩版地址</span>
|
||
<p class="font-medium">mc.gvsds.com:25575</p>
|
||
</li>
|
||
<li class="pt-2 border-t border-gray-700 mt-2">
|
||
<span class="text-accent text-sm"><i class="fa fa-check-circle mr-1"></i> Viafabric全版本可连</span>
|
||
</li>
|
||
<li>
|
||
<span class="text-accent text-sm"><i class="fa fa-check-circle mr-1"></i> 基岩版全版本可连</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 相关链接卡片 -->
|
||
<div class="bg-glass rounded-xl p-6 border border-primary/20 shadow-lg card-hover">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-primary/20 p-3 rounded-full mr-3">
|
||
<i class="fa fa-external-link text-accent text-xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-white">相关链接</h3>
|
||
</div>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li>
|
||
<a href="https://mc.gvsds.com" target="_blank" class="hover:text-accent transition-colors flex items-center">
|
||
<i class="fa fa-home mr-2 text-gray-400"></i>
|
||
<span>服务器主页</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://mc.gvsds.com:8100" target="_blank" class="hover:text-accent transition-colors flex items-center">
|
||
<i class="fa fa-map mr-2 text-gray-400"></i>
|
||
<span>服务器地图</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://3crb.gvsds.com" target="_blank" class="hover:text-accent transition-colors flex items-center">
|
||
<i class="fa fa-bank mr-2 text-gray-400"></i>
|
||
<span>3CRB 银行</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://3crb.gvsds.com/PriceList.html" target="_blank" class="hover:text-accent transition-colors flex items-center">
|
||
<i class="fa fa-list-alt mr-2 text-gray-400"></i>
|
||
<span>物资价格表</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.gvsds.com/enroll.html" target="_blank" class="hover:text-accent transition-colors flex items-center">
|
||
<i class="fa fa-user-plus mr-2 text-gray-400"></i>
|
||
<span>账户注册</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 账户关联卡片 -->
|
||
<div class="bg-glass rounded-xl p-6 border border-primary/20 shadow-lg card-hover md:col-span-2 lg:col-span-1">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-primary/20 p-3 rounded-full mr-3">
|
||
<i class="fa fa-key text-accent text-xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-white">账户关联</h3>
|
||
</div>
|
||
<p class="text-gray-300 mb-3">需先注册GVSDS账户,再将GVSDS账户与我的世界账户关联</p>
|
||
<div class="flex items-center text-accent">
|
||
<i class="fa fa-exclamation-circle mr-2"></i>
|
||
<span>自动化流程完成(确保已登录 GVSDS 账户)</span>
|
||
</div>
|
||
<a href="https://mc.gvsds.com/bind.html" target="_blank" class="mt-4 inline-block bg-primary/20 hover:bg-primary/30 text-accent px-4 py-2 rounded-lg transition-colors">
|
||
<i class="fa fa-external-link mr-1"></i> 前往绑定账户
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 全版本支持卡片 -->
|
||
<div class="bg-glass rounded-xl p-6 border border-primary/20 shadow-lg card-hover md:col-span-2 lg:col-span-2">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-primary/20 p-3 rounded-full mr-3">
|
||
<i class="fa fa-desktop text-accent text-xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-white">全版本连接支持</h3>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
|
||
<div class="bg-darker/50 p-4 rounded-lg">
|
||
<h4 class="text-white font-medium mb-2 flex items-center">
|
||
<i class="fa fa-java mr-2 text-accent"></i> Java版支持
|
||
</h4>
|
||
<p>通过 Viafabric 技术实现全版本连接,无论你使用哪个版本的Java客户端,均可顺畅加入服务器</p>
|
||
</div>
|
||
<div class="bg-darker/50 p-4 rounded-lg">
|
||
<h4 class="text-white font-medium mb-2 flex items-center">
|
||
<i class="fa fa-mobile text-accent mr-2"></i> 基岩版支持
|
||
</h4>
|
||
<p>基岩版玩家可通过专用端口加入:<span class="text-accent">mc.gvsds.com:25575</span>,全版本兼容</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 关于服务器 -->
|
||
<section id="about" class="py-20 bg-darker">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold mb-12 text-center text-white">关于服务器</h2>
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="bg-glass rounded-xl p-8 border border-primary/20 shadow-xl">
|
||
<p class="mb-6 text-gray-300 leading-relaxed">
|
||
枢机协律源自原"机械动力+瓦尔基里+CC电脑服务器",现调整为纯生存服务器,但仍保留了部分特色服务器模组,为玩家提供原汁原味又不失特色的生存体验。支持Viafabric全版本连接,基岩版玩家也可通过专用端口加入。
|
||
</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||
<div class="flex items-start">
|
||
<div class="bg-primary/20 p-3 rounded-full mr-4">
|
||
<i class="fa fa-cog text-accent text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-2 text-white">枢机</h3>
|
||
<p class="text-gray-400">代表由机械动力齿轮等设备组成的无穷无尽运转的机械系统</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<div class="bg-primary/20 p-3 rounded-full mr-4">
|
||
<i class="fa fa-sitemap text-accent text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-2 text-white">协律</h3>
|
||
<p class="text-gray-400">代表由CC电脑和Http协议连接的物理服务器组成的网络实现的整齐标准化流程</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 连接信息 -->
|
||
<section id="connect" class="py-20 bg-gradient-to-b from-darker to-dark">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold mb-12 text-center text-white">连接服务器</h2>
|
||
|
||
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div class="bg-glass rounded-xl p-8 border border-primary/20 shadow-xl">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-primary/30 p-3 rounded-full mr-4">
|
||
<i class="fa fa-desktop text-accent text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold text-white">Java版连接</h3>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="text-gray-400 mb-1">服务器地址</p>
|
||
<div class="flex">
|
||
<input type="text" value="mc.gvsds.com:25565" readonly class="flex-1 bg-darker border border-gray-700 rounded-l-lg p-3 text-white">
|
||
<button class="bg-primary hover:bg-secondary px-4 rounded-r-lg transition-colors duration-300">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="text-gray-400 mb-1">备用IP地址 1</p>
|
||
<div class="flex">
|
||
<input type="text" value="123.57.88.163:25565" readonly class="flex-1 bg-darker border border-gray-700 rounded-l-lg p-3 text-white">
|
||
<button class="bg-primary hover:bg-secondary px-4 rounded-r-lg transition-colors duration-300">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="text-gray-400 mb-1">备用IP地址 2</p>
|
||
<div class="flex">
|
||
<input type="text" value="114.66.59.25:25565" readonly class="flex-1 bg-darker border border-gray-700 rounded-l-lg p-3 text-white">
|
||
<button class="bg-primary hover:bg-secondary px-4 rounded-r-lg transition-colors duration-300">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-accent text-sm mt-6">
|
||
<i class="fa fa-info-circle mr-1"></i> 支持Viafabric全版本连接
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-xl p-8 border border-primary/20 shadow-xl">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-primary/30 p-3 rounded-full mr-4">
|
||
<i class="fa fa-mobile text-accent text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold text-white">基岩版连接</h3>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="text-gray-400 mb-1">服务器地址</p>
|
||
<div class="flex">
|
||
<input type="text" value="mc.gvsds.com" readonly class="flex-1 bg-darker border border-gray-700 rounded-l-lg p-3 text-white">
|
||
<button class="bg-primary hover:bg-secondary px-4 rounded-r-lg transition-colors duration-300">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="text-gray-400 mb-1">端口</p>
|
||
<div class="flex">
|
||
<input type="text" value="25575" readonly class="flex-1 bg-darker border border-gray-700 rounded-l-lg p-3 text-white">
|
||
<button class="bg-primary hover:bg-secondary px-4 rounded-r-lg transition-colors duration-300">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-accent text-sm mt-6">
|
||
<i class="fa fa-info-circle mr-1"></i> 通过间歇泉(Geyser)支持基岩版全版本连接
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto mt-8 bg-glass rounded-xl p-6 border border-primary/20 shadow-xl">
|
||
<h3 class="text-xl font-semibold mb-4 text-white flex items-center">
|
||
<i class="fa fa-user-circle text-accent mr-2"></i> 账户关联说明
|
||
</h3>
|
||
<p class="text-gray-300">
|
||
需先注册GVSDS账户(<a href="https://www.gvsds.com/enroll.html" target="_blank" class="text-accent hover:underline">点击注册</a>),再将GVSDS账户与我的世界账户关联。激活关联请联系TermiNexus(自动化流程待开发)。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务器模组及Server-Market重点介绍 -->
|
||
<section id="mods" class="py-20 bg-dark">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold mb-12 text-center text-white">服务器模组</h2>
|
||
<p class="text-center text-gray-400 max-w-3xl mx-auto mb-12">
|
||
服务器装载了以下仅服务器端模组,提供更好的游戏体验和管理功能,客户端无需安装
|
||
</p>
|
||
|
||
<!-- Server-Market 重点介绍 -->
|
||
<div class="max-w-4xl mx-auto mb-16">
|
||
<div class="bg-glass rounded-xl p-8 border-2 border-accent/30 shadow-xl">
|
||
<div class="flex items-center mb-6">
|
||
<div class="bg-success/20 p-4 rounded-full mr-4">
|
||
<i class="fa fa-shopping-cart text-success text-2xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-semibold text-white">Server-Market <span class="text-sm bg-success/20 text-success px-2 py-1 rounded-full">重制版</span></h3>
|
||
<p class="text-gray-400">服务器核心经济系统</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6 bg-darker/70 p-4 rounded-lg border border-success/20">
|
||
<h4 class="text-white font-medium mb-2 flex items-center">
|
||
<i class="fa fa-database text-success mr-2"></i> 核心特性
|
||
</h4>
|
||
<ul class="space-y-2 text-gray-300">
|
||
<li class="flex items-start">
|
||
<i class="fa fa-check-circle text-success mt-1 mr-2"></i>
|
||
<span>重制版市场系统,完全重构的交易逻辑</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fa fa-check-circle text-success mt-1 mr-2"></i>
|
||
<span>与工作室 SQL 数据库直接互通,数据实时同步</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fa fa-check-circle text-success mt-1 mr-2"></i>
|
||
<span>支持全服务器物品交易,自动匹配最优价格</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fa fa-check-circle text-success mt-1 mr-2"></i>
|
||
<span>与 3CRB 银行系统联动,实现资产统一管理</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h4 class="text-xl font-semibold mb-4 text-white">市场指令说明</h4>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-left text-gray-300">
|
||
<thead>
|
||
<tr class="bg-darker/50 border-b border-gray-700">
|
||
<th class="px-4 py-3">指令</th>
|
||
<th class="px-4 py-3">功能说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-700">
|
||
<tr class="hover:bg-darker/30 transition-colors">
|
||
<td class="px-4 py-3 font-mono text-accent">mbuy [数量] [种类]</td>
|
||
<td class="px-4 py-3">购买[数量]个[种类]的物品,优先匹配最便宜的货物</td>
|
||
</tr>
|
||
<tr class="hover:bg-darker/30 transition-colors">
|
||
<td class="px-4 py-3 font-mono text-accent">msearch [种类]</td>
|
||
<td class="px-4 py-3">从全服务器寻找[种类]类型的物品,全部匹配显示</td>
|
||
</tr>
|
||
<tr class="hover:bg-darker/30 transition-colors">
|
||
<td class="px-4 py-3 font-mono text-accent">mlist [玩家]</td>
|
||
<td class="px-4 py-3">对应玩家必须存在,列出该玩家出售橱窗内的所有物品</td>
|
||
</tr>
|
||
<tr class="hover:bg-darker/30 transition-colors">
|
||
<td class="px-4 py-3 font-mono text-accent">mprice [浮点数]</td>
|
||
<td class="px-4 py-3">设置手持物品在橱窗中的价格</td>
|
||
</tr>
|
||
<tr class="hover:bg-darker/30 transition-colors">
|
||
<td class="px-4 py-3 font-mono text-accent">msell [整数]</td>
|
||
<td class="px-4 py-3">对手持并在橱窗中的物品进行[整数]个补货</td>
|
||
</tr>
|
||
<tr class="hover:bg-darker/30 transition-colors">
|
||
<td class="px-4 py-3 font-mono text-accent">mpull</td>
|
||
<td class="px-4 py-3">下架手持的橱窗物品</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="mt-6 bg-darker/50 p-4 rounded-lg border border-yellow-500/20">
|
||
<h4 class="text-white font-medium mb-2 flex items-center">
|
||
<i class="fa fa-exclamation-triangle text-yellow-400 mr-2"></i> 注意事项
|
||
</h4>
|
||
<ul class="space-y-2 text-gray-300 text-sm">
|
||
<li>所有涉及到 <code class="bg-darker px-1 rounded">[种类]</code> 的参数均为我的世界命名空间参数且必须带有"minecraft:"前缀,比如泥土"minecraft:dirt"</li>
|
||
<li>如果卖家为SERVER时名称显示为乱码,这是由于 SQL UUID BLOB没有正确转化,不影响游戏体验</li>
|
||
<li>市场数据与工作室 SQL 数据库实时同步,确保交易记录永久保存</li>
|
||
<li>价格单位与3CRB银行系统统一,支持跨平台经济互通</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 其他模组卡片 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">BlueMap</h3>
|
||
<p class="text-gray-400 text-sm">生成高精度、可交互的3D地图,帮助玩家更好地了解服务器地形和位置。</p>
|
||
<a href="https://mc.gvsds.com:8100" target="_blank" class="text-accent hover:underline text-sm mt-3 inline-block">
|
||
访问地图 <i class="fa fa-external-link ml-1"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">LuckPerms</h3>
|
||
<p class="text-gray-400 text-sm">功能强大且广泛使用的权限管理插件,用于管理服务器内不同玩家的权限等级和权限分配。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">NE</h3>
|
||
<p class="text-gray-400 text-sm">调整附魔系统,使附魔叠加不再昂贵,允许保护和杀手附魔叠加,但客户端未安装时仍会显示"昂贵"提示。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">FTB Essentials & Library</h3>
|
||
<p class="text-gray-400 text-sm">提供基础的服务器管理功能和玩家便捷工具,如/home、/spawn等命令,以及库文件支持。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">CancelBlockUpdate</h3>
|
||
<p class="text-gray-400 text-sm">允许取消某些方块更新,有助于优化服务器性能,减少不必要的计算负载。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">Chunky</h3>
|
||
<p class="text-gray-400 text-sm">用于预生成世界区块的工具,可以减少玩家探索新区域时的卡顿,提升游戏流畅度。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">Enclosure</h3>
|
||
<p class="text-gray-400 text-sm">提供区域保护功能,允许玩家保护自己的建筑和领地免受他人破坏。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">Fabric Carpet</h3>
|
||
<p class="text-gray-400 text-sm">提供多种调试和服务器管理功能,帮助管理员监控和调整服务器运行状态。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">Geyser</h3>
|
||
<p class="text-gray-400 text-sm">实现基岩版与Java版服务器的跨平台连接,让基岩版玩家也能加入服务器。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">Lithium & ModernFix</h3>
|
||
<p class="text-gray-400 text-sm">性能优化模组,显著提升服务器运行效率,减少延迟和卡顿现象。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">Chunky</h3>
|
||
<p class="text-gray-400 text-sm">用于预生成世界区块的工具,可以减少玩家探索新区域时的卡顿,提升游戏流畅度。</p>
|
||
</div>
|
||
|
||
<div class="bg-glass rounded-lg p-6 border border-primary/20 hover:border-accent/50 transition-all duration-300">
|
||
<h3 class="text-xl font-semibold mb-2 text-white">CancelBlockUpdate</h3>
|
||
<p class="text-gray-400 text-sm">允许取消某些方块更新,有助于优化服务器性能,减少不必要的计算负载。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 靶机信息 -->
|
||
<section id="target" class="py-20 bg-darker">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold mb-12 text-center text-white">靶机服务器</h2>
|
||
<p class="text-center text-gray-400 max-w-3xl mx-auto mb-12">
|
||
攻击测试专用服务器,供玩家进行各种技术测试和实验
|
||
</p>
|
||
|
||
<div class="max-w-2xl mx-auto bg-glass rounded-xl p-8 border border-primary/20 shadow-xl">
|
||
<div class="flex items-center mb-8">
|
||
<div class="bg-red-500/20 p-4 rounded-full mr-4">
|
||
<i class="fa fa-crosshairs text-red-400 text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold text-white">攻击测试用靶机</h3>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<div>
|
||
<p class="text-gray-400 mb-1">服务器地址</p>
|
||
<div class="flex">
|
||
<input type="text" value="mc.gvsds.com:47000" readonly class="flex-1 bg-darker border border-gray-700 rounded-l-lg p-3 text-white">
|
||
<button class="bg-primary hover:bg-secondary px-4 rounded-r-lg transition-colors duration-300">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="text-gray-400 mb-1">备用IP地址</p>
|
||
<div class="flex">
|
||
<input type="text" value="123.57.88.163:47000" readonly class="flex-1 bg-darker border border-gray-700 rounded-l-lg p-3 text-white">
|
||
<button class="bg-primary hover:bg-secondary px-4 rounded-r-lg transition-colors duration-300">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
|
||
<div class="bg-darker p-4 rounded-lg text-center">
|
||
<p class="text-gray-400 text-sm mb-1">版本</p>
|
||
<p class="text-white font-medium">1.21.5</p>
|
||
</div>
|
||
<div class="bg-darker p-4 rounded-lg text-center">
|
||
<p class="text-gray-400 text-sm mb-1">类型</p>
|
||
<p class="text-white font-medium">Fabric</p>
|
||
</div>
|
||
<div class="bg-darker p-4 rounded-lg text-center">
|
||
<p class="text-gray-400 text-sm mb-1">协议版本</p>
|
||
<p class="text-white font-medium">776 (可变)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-darker border-t border-primary/30 py-10">
|
||
<div class="container mx-auto px-4">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<div class="mb-6 md:mb-0">
|
||
<div class="flex items-center space-x-2">
|
||
<i class="fa fa-cogs text-accent text-xl"></i>
|
||
<h2 class="text-xl font-bold text-white">
|
||
枢机协律 <span class="text-accent">CreateE=mc²</span>
|
||
</h2>
|
||
</div>
|
||
<p class="text-gray-500 mt-2">纯生存Minecraft服务器 | 全版本可连接</p>
|
||
</div>
|
||
|
||
<div class="text-center md:text-right">
|
||
<p class="text-gray-500">服务器日期: 987</p>
|
||
<p class="text-gray-600 text-sm mt-2">© 2025 枢机协律服务器. 保留所有权利.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 回到顶部按钮 -->
|
||
<button id="backToTop" class="fixed bottom-8 right-8 bg-primary hover:bg-secondary w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg transition-all duration-300 opacity-0 invisible">
|
||
<i class="fa fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<!-- 大图查看弹窗 -->
|
||
<div class="image-modal" id="imageModal">
|
||
<div class="modal-content">
|
||
<button class="close-modal" id="closeModal">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
<img src="" alt="大图预览" class="modal-image" id="modalImage">
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 回到顶部按钮功能
|
||
const backToTopButton = document.getElementById('backToTop');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (window.pageYOffset > 300) {
|
||
backToTopButton.classList.remove('opacity-0', 'invisible');
|
||
backToTopButton.classList.add('opacity-100', 'visible');
|
||
} else {
|
||
backToTopButton.classList.remove('opacity-100', 'visible');
|
||
backToTopButton.classList.add('opacity-0', 'invisible');
|
||
}
|
||
});
|
||
|
||
backToTopButton.addEventListener('click', () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
|
||
// 复制功能
|
||
document.querySelectorAll('button:has(.fa-copy)').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const input = this.parentElement.querySelector('input');
|
||
input.select();
|
||
document.execCommand('copy');
|
||
|
||
// 显示复制成功提示
|
||
const originalText = this.innerHTML;
|
||
this.innerHTML = '<i class="fa fa-check"></i>';
|
||
setTimeout(() => {
|
||
this.innerHTML = originalText;
|
||
}, 2000);
|
||
});
|
||
});
|
||
|
||
// 大图查看功能
|
||
const imageModal = document.getElementById('imageModal');
|
||
const modalImage = document.getElementById('modalImage');
|
||
const closeModal = document.getElementById('closeModal');
|
||
const images = document.querySelectorAll('img[src^="/assets/mien/"]');
|
||
|
||
// 为所有图片添加点击事件
|
||
images.forEach(img => {
|
||
img.style.cursor = 'pointer'; // 鼠标悬停显示手型
|
||
img.addEventListener('click', () => {
|
||
// 将图片路径从/assets/mien替换为/assets/mien_notresize
|
||
const largeImageSrc = img.src.replace('/assets/mien/', '/assets/mien_notresize/');
|
||
modalImage.src = largeImageSrc;
|
||
modalImage.alt = img.alt;
|
||
imageModal.classList.add('active');
|
||
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
||
});
|
||
});
|
||
|
||
// 关闭弹窗
|
||
closeModal.addEventListener('click', () => {
|
||
imageModal.classList.remove('active');
|
||
document.body.style.overflow = ''; // 恢复背景滚动
|
||
});
|
||
|
||
// 点击弹窗外部关闭
|
||
imageModal.addEventListener('click', (e) => {
|
||
if (e.target === imageModal) {
|
||
imageModal.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
|
||
// 按ESC键关闭
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && imageModal.classList.contains('active')) {
|
||
imageModal.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |