computer/Maker-Home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新建项目

Browse Source
This commit is contained in:
柚子皮
2025-11-30 13:01:30 +08:00
parent c20338fa75
commit e224371ade
8 changed files with 587 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
index.html Normal file
View File

@@ -0,0 +1,417 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="public, max-age=31536000">
<title>创客中心导航页</title>
<link href="/css/font-awesome.min.css" rel="stylesheet">
<style>
:root {
/* 基础色值 */
--primary-pink: #ff9eb5;
--secondary-blue: #a8d1ff;
--accent-yellow: #fff494;
--accent-purple: #e0c3fc;
--text-dark: #5a4b60;
--text-light: #8b7d94;
--bg-white: #ffffff;
--bg-soft: #fff9fb;
/* 复用样式 */
--card-shadow: 0 8px 20px rgba(255, 158, 181, 0.1);
--card-shadow-hover: 0 12px 25px rgba(255, 158, 181, 0.15);
--radius-sm: 5px;
--radius-md: 24px; /* 卡片圆角同步放大 */
--radius-lg: 40px;
--radius-full: 50%;
/* 渐变预设 */
--gradient-pink: linear-gradient(135deg, #ff9eb5, #ffc1e9);
--gradient-blue: linear-gradient(135deg, #a8d1ff, #c3e8ff);
--gradient-yellow: linear-gradient(135deg, #fff494, #fff9c4);
--gradient-purple: linear-gradient(135deg, #e0c3fc, #f3e5f5);
}
/* 全局重置优化 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/* 字体渲染优化 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: var(--bg-soft);
color: var(--text-dark);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
overflow-x: hidden;
width: 100%;
min-width: 320px;
-webkit-overflow-scrolling: touch;
}
/* 导航卡片区域 */
.nav-section {
padding: 2rem 1rem 5rem;
background: var(--bg-white);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
margin-top: 2rem;
position: relative;
width: 100%;
box-sizing: border-box;
}
.nav-section::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 10px;
background: var(--accent-yellow);
border-radius: var(--radius-sm);
box-shadow: 0 2px 5px rgba(255, 244, 148, 0.3);
}
.section-heading {
font-size: clamp(1.5rem, 3vw, 1.8rem);
text-align: center;
margin-bottom: 3rem;
color: var(--text-dark);
}
/* 导航卡片网格 - 优化宽度和间距 */
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 增加最小宽度至280px */
gap: 2.5rem; /* 增加间距至2.5rem */
max-width: 1400px; /* 增加最大宽度 */
margin: 0 auto;
padding: 0 1.5rem; /* 增加左右内边距 */
width: 100%;
}
/* 导航卡片样式 - 增大宽度和内边距 */
.nav-card {
background: var(--bg-soft);
border-radius: var(--radius-md);
padding: 3rem 2.5rem; /* 增加内边距 */
text-align: center;
box-shadow: var(--card-shadow);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid white;
position: relative;
overflow: hidden;
min-width: 260px; /* 设置最小宽度 */
flex: 1; /* 允许卡片弹性增长 */
text-decoration: none;
display: flex; /* 使用flex布局优化内部对齐 */
flex-direction: column;
align-items: center;
justify-content: center;
/* 硬件加速 */
will-change: transform, box-shadow;
}
/* 卡片顶部渐变条 - 简化选择器 */
.nav-card:nth-child(4n+1)::before { background: var(--gradient-pink); }
.nav-card:nth-child(4n+2)::before { background: var(--gradient-blue); }
.nav-card:nth-child(4n+3)::before { background: var(--gradient-yellow); }
.nav-card:nth-child(4n)::before { background: var(--gradient-purple); }
.nav-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px; /* 渐变条高度从5px增至6px */
}
.nav-card:hover {
transform: translateY(-10px) scale(1.03); /* 悬浮放大效果增强 */
box-shadow: var(--card-shadow-hover);
}
.card-icon-wrapper {
position: relative;
display: inline-block;
margin-bottom: 1.8rem; /* 增加图标与文字间距 */
transition: transform 0.3s ease;
}
.icon-bg {
position: absolute;
width: 100px;
height: 100px;
border-radius: var(--radius-full);
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.2;
transition: all 0.3s ease;
}
/* 图标背景色 - 简化规则 */
.nav-card:nth-child(4n+1) .icon-bg { background: var(--primary-pink); }
.nav-card:nth-child(4n+2) .icon-bg { background: var(--secondary-blue); }
.nav-card:nth-child(4n+3) .icon-bg { background: var(--accent-yellow); }
.nav-card:nth-child(4n) .icon-bg { background: var(--accent-purple); }
.nav-icon {
font-size: 3.2rem; /* 增大图标 */
position: relative;
z-index: 1;
display: inline-block;
transition: transform 0.3s ease;
}
/* 图标颜色 - 简化规则 */
.nav-card:nth-child(4n+1) .nav-icon { color: var(--primary-pink); }
.nav-card:nth-child(4n+2) .nav-icon { color: var(--secondary-blue); }
.nav-card:nth-child(4n+3) .nav-icon { color: #ffc107; }
.nav-card:nth-child(4n) .nav-icon { color: #9c27b0; }
.nav-text {
font-size: 1.35rem; /* 增大卡片标题 */
color: var(--text-dark);
font-weight: 600;
margin-bottom: 1rem; /* 增加标题与描述间距 */
display: block;
}
.nav-card p {
font-size: 1rem; /* 增大描述文字 */
color: var(--text-light);
line-height: 1.6;
margin: 0;
}
/* 卡片hover效果合并 */
.nav-card:hover .card-icon-wrapper {
transform: scale(1.15); /* 图标放大比例增强 */
}
.nav-card:hover .icon-bg {
opacity: 0.2;
transform: translate(-50%, -50%) scale(7); /* 背景圆放大增强 */
}
/* 页脚 */
.footer {
padding: 2rem 1rem;
text-align: center;
background: var(--bg-white);
color: var(--text-light);
font-size: 0.9rem;
width: 100%;
box-sizing: border-box;
}
/* 动画效果 */
.fade-in {
animation: fadeIn 0.6s ease-in-out forwards;
opacity: 0;
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
from {
opacity: 0;
transform: translateY(10px);
}
}
/* 响应式优化 - 保持放大比例的同时适配移动端 */
@media (max-width: 1200px) {
.nav-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
}
@media (max-width: 768px) {
.nav-section {
padding: 2rem 1rem 3rem;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.nav-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
padding: 0 1rem;
}
.nav-card {
padding: 2rem 1.8rem;
min-width: 200px;
}
.nav-icon {
font-size: 2.8rem;
}
.nav-text {
font-size: 1.2rem;
}
.icon-bg {
width: 80px;
height: 80px;
}
}
@media (max-width: 480px) {
.nav-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.nav-card {
padding: 2rem 1.5rem;
min-width: unset;
}
}
</style>
</head>
<body>
<!-- 导航卡片区 -->
<div class="nav-section">
<h2 class="section-heading">常用链接</h2>
<div class="nav-grid">
<!-- 1. Git服务器 -->
<a href="https://git.maker.imxy.top" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.1s">
<div class="card-icon-wrapper">
<i class="fa fa-git-square nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">Git服务器</span>
<p>git.maker.imxy.top</p>
</a>
<!-- 2. 文档协作 -->
<a href="https://office.maker.imxy.top" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.2s">
<div class="card-icon-wrapper">
<i class="fa fa-file-text-o nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">文档协作</span>
<p>office.maker.imxy.top</p>
</a>
<!-- 3. 选拔赛报名 -->
<a href="https://battle.maker.imxy.top" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.3s">
<div class="card-icon-wrapper">
<i class="fa fa-trophy nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">选拔赛报名</span>
<p>battle.maker.imxy.top</p>
</a>
<!-- 4. 信息中心 -->
<a href="https://info.maker.imxy.top" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.4s">
<div class="card-icon-wrapper">
<i class="fa fa-bullhorn nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">信息中心</span>
<p>info.maker.imxy.top</p>
</a>
<!-- 5. 学校官网 -->
<a href="https://www.hnbemc.edu.cn" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.5s">
<div class="card-icon-wrapper">
<i class="fa fa-university nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">学校官网</span>
<p>www.hnbemc.edu.cn</p>
</a>
<!-- 6. 教务系统 -->
<a href="http://jwxt.hnbemc.cn:81/sso.jsp" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.6s">
<div class="card-icon-wrapper">
<i class="fa fa-graduation-cap nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">教务系统</span>
<p>jwxt.hnbemc.cn:81</p>
</a>
<!-- 7. 文件中心 -->
<a href="https://file.maker.imxy.top" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.7s">
<div class="card-icon-wrapper">
<i class="fa fa-folder-open nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">文件中心</span>
<p>file.maker.imxy.top</p>
</a>
<!--8. 专升本词汇 -->
<a href="/word/" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.8s">
<div class="card-icon-wrapper">
<i class="fa fa-book nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">专升本词汇</span>
<p>word</p>
</a>
<!--9. CET-4 词汇 -->
<a href="/common_vocabulary_for_cet-4/" rel="noopener noreferrer" class="nav-card fade-in" style="animation-delay: 0.9s">
<div class="card-icon-wrapper">
<i class="fa fa-language nav-icon" aria-hidden="true"></i>
<div class="icon-bg"></div>
</div>
<span class="nav-text">CET-4 核心词汇</span>
<p>common_vocabulary_for_cet-4</p>
</a>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<p>© 湖南生物机电职业技术学院二进制空间创客中心</p>
</div>
<!-- 简单的加载完成提示 -->
<script>
// 页面加载完成后执行
window.addEventListener('load', function() {
console.log('页面资源加载完成');
});
// 图片懒加载实现（当前页面无图片，可保留备用）
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = [].slice.call(document.querySelectorAll("img"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src || lazyImage.src;
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
</script>
</body>
</html>