98 lines
4.7 KiB
HTML
98 lines
4.7 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>{$info.title|default='网址分类'} - {$seo.title|default='网址导航'}</title>
|
|
<meta name="keywords" content="{$info.keywords | default='网址导航,分类'}">
|
|
<meta name="description" content="{$info.description | default='网址导航分类'}">
|
|
{notempty name="info"}<link rel="canonical" href="{$siteUrl|default=''}/haonav/category/{$info.id}.html">{/notempty}
|
|
<link rel="stylesheet" href="/static/haonav/css/nav.css">
|
|
<style>
|
|
.website-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
|
|
.website-item {
|
|
padding: 12px 15px; background: var(--nav-card); border-radius: 10px; display: flex; align-items: center; gap: 12px;
|
|
cursor: pointer; transition: all .3s; text-decoration: none; color: var(--nav-card-text); position: relative;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,.08);
|
|
}
|
|
.website-item:hover { background: var(--nav-primary); color: #fff; transform: translateY(-2px); }
|
|
.website-item:hover .website-item-info h3, .website-item:hover .website-item-info p { color: #fff; }
|
|
.website-item-icon { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--nav-tag-bg); font-size: 16px; overflow: hidden; flex-shrink: 0; }
|
|
.website-item-icon img { width: 100%; height: 100%; object-fit: cover; }
|
|
.website-item-info { min-width: 0; }
|
|
.website-item-info h3 { font-size: 15px; margin-bottom: 3px; transition: color .3s; }
|
|
.website-item-info p { font-size: 12px; color: var(--nav-muted); transition: color .3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.website-item .qr-btn { position: absolute; right: 10px; top: 8px; opacity: 0; cursor: pointer; font-size: 13px; color: var(--nav-muted); }
|
|
.website-item:hover .qr-btn { opacity: 1; color: #fff; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar">
|
|
<div class="navbar-content">
|
|
<a href="/haonav/index.html" class="logo">🚀 网址导航</a>
|
|
<form class="search-box" id="searchForm">
|
|
<select id="searchEngine">
|
|
<option value="baidu">百度</option>
|
|
<option value="bing">必应</option>
|
|
<option value="google">Google</option>
|
|
<option value="sogou">搜狗</option>
|
|
<option value="site" selected>站内</option>
|
|
</select>
|
|
<input type="text" id="searchInput" autocomplete="off" placeholder="搜索网站 / 关键词">
|
|
<button type="submit">🔍 搜索</button>
|
|
</form>
|
|
<div class="nav-actions">
|
|
<div class="nav-links">
|
|
<a href="/haonav/index.html">首页</a>
|
|
<a href="/haonav/rank.html">排行榜</a>
|
|
<a href="/haonav/submit.html">投稿</a>
|
|
</div>
|
|
<button class="icon-btn" id="themeToggle" title="切换暗黑模式">🌙</button>
|
|
<div class="user-area" id="userArea">
|
|
<button class="nav-btn" id="btnLogin">登录</button>
|
|
<button class="nav-btn nav-btn-primary" id="btnRegister">注册</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="section-title">
|
|
<h2>📋 {$info.title}</h2>
|
|
</div>
|
|
<div class="website-list">
|
|
{volist name="info.links" id="link"}
|
|
<a href="/haonav/site/{$link.id}.html" class="website-item">
|
|
<span class="website-item-icon"><img src="{$link.show_icon}" loading="lazy" alt="{$link.title}"></span>
|
|
<span class="website-item-info">
|
|
<h3>{$link.title}</h3>
|
|
<p>{$link.description|default='暂无描述'}</p>
|
|
</span>
|
|
<span class="qr-btn js-qr" data-url="{$link.url}" title="二维码">▦</span>
|
|
</a>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>© 2026 网址导航 - 让上网更简单</p>
|
|
</div>
|
|
|
|
<div class="qr-mask" id="qrMask">
|
|
<div class="qr-box">
|
|
<img id="qrImg" src="" alt="二维码">
|
|
<p id="qrText"></p>
|
|
<span class="close">关闭</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 登录 / 注册 弹层由全局组件 auth.js 自动注入 -->
|
|
|
|
<script src="/static/haonav/js/nav.js"></script>
|
|
<script src="/static/haonav/js/auth.js"></script>
|
|
</body>
|
|
|
|
</html>
|