You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
205 lines
9.8 KiB
205 lines
9.8 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="google-site-verification" content="VTDXX0ynO2pR8Q27XRQFRY4tY_Q76Dt5TIYkvlaw_CI" />
|
|
<title><?php bloginfo('name'); ?></title>
|
|
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
|
|
<?php wp_head(); ?>
|
|
|
|
<!-- 引入字体与图标 -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Liu+Jian+Mao+Cao:wght@400;700&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
|
|
|
|
<!-- 引入 Swiper 与 AOS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
|
<!-- Tailwind & Config -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#10b981",
|
|
"primary-dark": "#047857",
|
|
"primary-light": "#d1fae5",
|
|
"accent": "#f97316",
|
|
"accent-light": "#ffedd5",
|
|
"surface": "#ffffff",
|
|
"background": "#f8fafc",
|
|
"slate-text": "#334155",
|
|
"slate-heading": "#0f172a"
|
|
},
|
|
fontFamily: {
|
|
"display": ['PingFang SC', "Montserrat", 'Microsoft YaHei',"sans-serif"],
|
|
"sans": [ 'PingFang SC', "Montserrat", 'Microsoft YaHei', "sans-serif"],
|
|
},
|
|
boxShadow: {
|
|
'soft': '0 20px 40px -15px rgba(0,0,0,0.05)',
|
|
'float': '0 30px 60px -20px rgba(16, 185, 129, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.05)',
|
|
},
|
|
keyframes: {
|
|
textShimmer: { '0%': { backgroundPosition: '0% 50%' }, '100%': { backgroundPosition: '100% 50%' } },
|
|
scroll: { '0%': { transform: 'translateX(0)' }, '100%': { transform: 'translateX(-50%)' } },
|
|
scrollLeft: { '0%': { transform: 'translateX(0)' }, '100%': { transform: 'translateX(-50%)' } },
|
|
scrollRight: { '0%': { transform: 'translateX(-50%)' }, '100%': { transform: 'translateX(0)' } },
|
|
flowMove: {
|
|
'0%': { transform: 'translateX(-100%)' },
|
|
'100%': { transform: 'translateX(600%)' }
|
|
}
|
|
},
|
|
animation: {
|
|
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
|
|
'scroll-fast': 'scroll 35s linear infinite',
|
|
'scroll-slow': 'scroll 50s linear infinite',
|
|
'scroll-reverse': 'scroll-reverse 45s linear infinite',
|
|
'scroll-left': 'scrollLeft 40s linear infinite',
|
|
'scroll-right': 'scrollRight 45s linear infinite',
|
|
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
|
|
@layer utilities {
|
|
/* 隐藏滚动条 */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
[data-aos] {
|
|
transition-property: all !important;
|
|
}
|
|
|
|
|
|
}
|
|
@layer base {
|
|
/* ==========================================
|
|
1. Firefox 浏览器的滚动条支持 (极简模式)
|
|
========================================== */
|
|
html {
|
|
scrollbar-width: thin; /* 细滚动条 */
|
|
/* 滑块颜色(半透明灰) | 轨道颜色(全透明) */
|
|
scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
|
|
}
|
|
|
|
/* ==========================================
|
|
2. WebKit 浏览器 (Chrome, Edge, Safari) 悬浮感设计
|
|
========================================== */
|
|
/* 整体宽度缩小，显得更精致 */
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 6px;
|
|
}
|
|
|
|
/* 轨道 (Track) - 设置为全透明，彻底消除突兀的边界感 */
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* 滑块 (Thumb) - 默认状态 */
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(148, 163, 184, 0.4); /* Slate-400 加 40% 透明度，低调且不刺眼 */
|
|
border-radius: 8px; /* 圆润的胶囊形 */
|
|
}
|
|
|
|
/* 滑块悬停状态 (Hover) - 鼠标放上去时，平滑过渡到您的主题绿 */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(16, 185, 129, 0.8); /* Primary Color (#10b981) 带有轻微透明度 */
|
|
}
|
|
|
|
/* 滑块按下/拖动状态 (Active) - 颜色加深 */
|
|
::-webkit-scrollbar-thumb:active {
|
|
background: rgba(5, 150, 105, 1); /* Darker Green (#059669) 实色 */
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body <?php body_class('no-js'); ?>>
|
|
<nav class="main-nav">
|
|
<div class="nav-container">
|
|
<div class="nav-logo flex">
|
|
<a href="<?php echo home_url(); ?>">
|
|
<?php
|
|
$logo = get_theme_option('site_logo');
|
|
if ($logo): ?>
|
|
<img src="<?php echo esc_url($logo); ?>" alt="<?php bloginfo('name'); ?>">
|
|
<?php else: ?>
|
|
<img src="<?php bloginfo('template_url'); ?>/assets/images/logo-1.svg" alt="logo">
|
|
<?php endif; ?>
|
|
</a>
|
|
<a href="https://nenghui.com" class="ml-[2rem] text-[#295ca8] cursor-pointer relative group">
|
|
国际版
|
|
<div class="absolute bottom-0 left-0 w-0 h-[2px] bg-[#295ca8] transition-all duration-300 group-hover:w-full"></"></div>
|
|
</a>
|
|
</div>
|
|
<button class="menu-toggle" aria-label="菜单">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
<div class="nav-right">
|
|
<div class="nav-menu">
|
|
<?php
|
|
wp_nav_menu(array(
|
|
'theme_location' => 'primary-menu',
|
|
'container' => false,
|
|
'menu_class' => 'menu-items',
|
|
'walker' => new Custom_Walker_Nav_Menu(),
|
|
'fallback_cb' => function() {
|
|
echo '<ul class="menu-items"><li><a href="' . admin_url('nav-menus.php') . '">添加菜单</a></li></ul>';
|
|
}
|
|
));
|
|
?>
|
|
</div>
|
|
|
|
<!-- 搜索按钮 -->
|
|
<div class="nav-search">
|
|
<button class="search-toggle" aria-label="搜索" id="searchToggle">
|
|
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 搜索框弹出层 -->
|
|
<div class="search-overlay" id="searchOverlay">
|
|
<div class="search-container">
|
|
<div class="search-box">
|
|
<form role="search" method="get" action="<?php echo home_url('/'); ?>" class="search-form">
|
|
<div class="search-input-wrapper">
|
|
<svg class="search-input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
<input type="search" name="s" placeholder="搜索内容..." class="search-input" id="searchInput" autocomplete="off">
|
|
<button type="button" class="search-close" id="searchClose" aria-label="关闭搜索">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button type="submit" class="search-submit">搜索</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|