jsasg
a68499255d
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
924 lines
29 KiB
HTML
924 lines
29 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>ORICO 移动硬盘</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: sans-serif
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.mobile-header-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 46px;
|
||
padding: 0 17px;
|
||
background: #fff;
|
||
position: relative;
|
||
z-index: 100;
|
||
}
|
||
|
||
.mobile-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-img,
|
||
.nav-search,
|
||
.nav-lang,
|
||
.nav-img1,
|
||
.nav-card {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-log {
|
||
width: 90px;
|
||
height: 22px;
|
||
margin-left: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-lang {
|
||
margin: 0 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 下拉菜单 */
|
||
.nav-dropdown-menu {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-top: 1px solid #eee;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
display: none;
|
||
position: absolute;
|
||
top: 46px;
|
||
left: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
.nav-dropdown-menu.show {
|
||
display: block;
|
||
}
|
||
|
||
/* 所有菜单项统一用 div */
|
||
.menu-item {
|
||
margin: 0 22px;
|
||
font-size: 15px;
|
||
color: #333;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.menu-item-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.menu-item-img {
|
||
width: 14px;
|
||
height: 14px;
|
||
display: block;
|
||
}
|
||
|
||
/* 有子菜单才显示箭头 */
|
||
.has-child .menu-item-img {
|
||
display: block;
|
||
}
|
||
|
||
/* 无子菜单隐藏箭头 */
|
||
.no-child .menu-item-img {
|
||
display: none;
|
||
}
|
||
|
||
/* 箭头旋转 */
|
||
.has-child.open .menu-item-img {
|
||
transform: rotate(180deg);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.nav-img1 {
|
||
display: none;
|
||
}
|
||
|
||
.sub-menu {
|
||
display: none;
|
||
}
|
||
|
||
.sub-menu.show {
|
||
display: block;
|
||
}
|
||
|
||
.sub-item {
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.sub-item:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.sub-item a {
|
||
color: #686A70;
|
||
display: block;
|
||
}
|
||
|
||
.sub-item:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.sub-item-card-img {
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 358 / 192;
|
||
}
|
||
|
||
.sub-item-card-title {
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.sub-item-card-name {
|
||
font-size: 14px;
|
||
color: #686A70;
|
||
margin-top: 4px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.no-padding {
|
||
padding: 0;
|
||
}
|
||
|
||
/* ====================== 弹窗样式（不遮盖头部） ====================== */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 46px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(100% - 46px);
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
z-index: 98;
|
||
}
|
||
|
||
.modal-overlay.show {
|
||
display: flex;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 90%;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 66px 24px 8px 24px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
text-align: center;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.modal-close {
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 24px;
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 写法2：使用 flex 布局实现一行2个 */
|
||
.modal-items-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.modal-item {
|
||
width: calc(50% - 16px);
|
||
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.modal-item-img {
|
||
width: clamp(48px, 17vw, 128px);
|
||
height: auto;
|
||
aspect-ratio: 64 / 64;
|
||
object-fit: contain;
|
||
display: block;
|
||
|
||
}
|
||
|
||
.modal-item-title {
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
}
|
||
|
||
.modal-item:hover {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 语言弹窗样式 - 列表布局 */
|
||
.lang-modal-content {
|
||
width: 90%;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 68px 24px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
text-align: center;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.lang-items-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.lang-item {
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.lang-item img {
|
||
width: 29px;
|
||
height: 20px;
|
||
margin-right: 16px;
|
||
display: block;
|
||
}
|
||
|
||
.lang-item:last-child {
|
||
border-bottom: none;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.lang-item:hover {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 搜索弹窗样式 */
|
||
.search-modal-content {
|
||
width: 90%;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 68px 24px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.search-input-box {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 30px;
|
||
padding-left: 24px;
|
||
padding-right: 13px;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.search-input-box input {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.search-input-box input::placeholder {
|
||
color: #aaa;
|
||
}
|
||
|
||
.search-input-box .search-clear-btn {
|
||
width: 14px;
|
||
height: 14px;
|
||
cursor: pointer;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.search-input-box .search-clear-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.search-input-box .search-submit-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-history {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.search-history-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.search-history-title {
|
||
font-size: 14px;
|
||
color: #888;
|
||
}
|
||
|
||
.search-history-clear {
|
||
font-size: 12px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-history-clear:hover {
|
||
color: #666;
|
||
}
|
||
|
||
.search-history-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-history-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-history-item:hover {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
.search-history-item span {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.search-history-item .delete-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
cursor: pointer;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.search-history-item .delete-icon:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.empty-history {
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
font-size: 14px;
|
||
color: #aaa;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="mobile-header-box">
|
||
<div class="mobile-header-left">
|
||
<img src="./img/nav.png" class="nav-img">
|
||
<img src="./img/x.png" class="nav-img1">
|
||
<a href="#" target="_self" style="display: flex; justify-content: center;">
|
||
<img src="./img/log.png" class="nav-log">
|
||
</a>
|
||
</div>
|
||
<div class="mobile-header-right">
|
||
<img src="./img/search.png" class="nav-search">
|
||
<img src="./img/lang.png" class="nav-lang">
|
||
<img src="./img/card.png" class="nav-card">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-dropdown-menu">
|
||
<!-- 产品列表 - 有子菜单 -->
|
||
<div class="menu-item has-child">
|
||
<div class="menu-item-box">
|
||
<span>产品列表</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
<div class="sub-menu">
|
||
<div class="sub-item"><a href="#" target="_self">数据存储</a></div>
|
||
<div class="sub-item"><a href="#" target="_self">生活家居</a></div>
|
||
<div class="sub-item"><a href="#" target="_self">3C配件</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 闪存 - 无子菜单 -->
|
||
<div class="menu-item no-child" data-link="/flash">
|
||
<div class="menu-item-box">
|
||
<span>闪存</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 电力 - 有子菜单 -->
|
||
<div class="menu-item has-child" data-link="">
|
||
<div class="menu-item-box">
|
||
<span>电力</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
<div class="sub-menu">
|
||
<div class="sub-item no-padding">
|
||
<a href="https://orico.cc" target="_self" class="sub-item-card">
|
||
<img src="./img/s.png" alt="" class="sub-item-card-img">
|
||
<div class="sub-item-card-title">软件下载</div>
|
||
<div class="sub-item-card-name">赛博云系统/微链接系统多平台客户端下载</div>
|
||
</a>
|
||
</div>
|
||
<div class="sub-item no-padding">
|
||
<a href="https://baidu.com" target="_self" class="sub-item-card">
|
||
<img src="./img/s.png" alt="" class="sub-item-card-img">
|
||
<div class="sub-item-card-title">软件下载</div>
|
||
<div class="sub-item-card-name">赛博云系统/微链接系统多平台客户端下载</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI PC - 无子菜单 -->
|
||
<div class="menu-item no-child" data-link="/ai-pc">
|
||
<div class="menu-item-box">
|
||
<span>AI PC</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NAS - 无子菜单 -->
|
||
<div class="menu-item no-child" data-link="/nas">
|
||
<div class="menu-item-box">
|
||
<span>NAS</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技术支持 - 无子菜单 -->
|
||
<div class="menu-item no-child" data-link="/support">
|
||
<div class="menu-item-box">
|
||
<span>技术支持</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关于我们 - 无子菜单 -->
|
||
<div class="menu-item no-child" data-link="/about">
|
||
<div class="menu-item-box">
|
||
<span>关于我们</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合作加盟 - 无子菜单 -->
|
||
<div class="menu-item no-child" data-link="/join">
|
||
<div class="menu-item-box">
|
||
<span>合作加盟</span>
|
||
<img src="./img/b.png" class="menu-item-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================== 购物车弹窗 ====================== -->
|
||
<div class="modal-overlay" id="cartModal">
|
||
<div class="modal-content">
|
||
<img src="./img/x.png" class="modal-close">
|
||
<div class="modal-items-list">
|
||
<a class="modal-item" href="#" target="_self">
|
||
<img src="./img/g.png" alt="" class="modal-item-img">
|
||
<div class="modal-item-title">京东自营旗舰店</div>
|
||
</a>
|
||
<a class="modal-item" href="#" target="_self">
|
||
<img src="./img/g.png" alt="" class="modal-item-img">
|
||
<div class="modal-item-title">天猫旗舰店</div>
|
||
</a>
|
||
<a class="modal-item" href="#" target="_self">
|
||
<img src="./img/g.png" alt="" class="modal-item-img">
|
||
<div class="modal-item-title">拼多多旗舰店</div>
|
||
</a>
|
||
<a class="modal-item" href="#" target="_self">
|
||
<img src="./img/g.png" alt="" class="modal-item-img">
|
||
<div class="modal-item-title">抖音店铺</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================== 语言弹窗 ====================== -->
|
||
<div class="modal-overlay" id="langModal">
|
||
<div class="lang-modal-content">
|
||
<img src="./img/x.png" class="modal-close">
|
||
<div class="lang-items-list">
|
||
<a class="lang-item" href="#" target="_self">
|
||
<img src="https://orico.com.cn/static/common/images/langs/CN.png" />
|
||
<div>China - Simplified Chinese</div>
|
||
</a>
|
||
<a class="lang-item" href="#" target="_self">
|
||
<img src="https://orico.com.cn/static/common/images/langs/CN.png" />
|
||
<div>USA - English</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================== 搜索弹窗 ====================== -->
|
||
<div class="modal-overlay" id="searchModal">
|
||
<div class="search-modal-content">
|
||
<img src="./img/x.png" class="modal-close">
|
||
<div class="search-input-box">
|
||
<input type="text" placeholder="请输入搜索关键词" id="searchInput">
|
||
<img src="./img/x.png" alt="清除" class="search-clear-btn" id="searchClearBtn" style="display: none;">
|
||
<span style="width: 1px; color:#d9d9d9;margin: 0 10px;">|</span>
|
||
<img src="./img/search.png" alt="搜索" class="search-submit-icon" id="searchSubmit">
|
||
</div>
|
||
<div class="search-history">
|
||
<div class="search-history-header">
|
||
<div class="search-history-title">搜索记录</div>
|
||
<div class="search-history-clear" id="clearAllHistory">清空</div>
|
||
</div>
|
||
<div class="search-history-list" id="searchHistoryList">
|
||
<!-- 搜索记录会动态显示在这里 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function ()
|
||
{
|
||
const navBtn = document.querySelector('.nav-img');
|
||
const navBtn1 = document.querySelector('.nav-img1');
|
||
const dropdownMenu = document.querySelector('.nav-dropdown-menu');
|
||
|
||
// 打开菜单
|
||
navBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 关闭所有弹窗
|
||
closeAllModals();
|
||
dropdownMenu.classList.add('show');
|
||
navBtn.style.display = 'none';
|
||
navBtn1.style.display = 'block';
|
||
});
|
||
|
||
// 关闭菜单
|
||
navBtn1.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
});
|
||
|
||
// 处理所有菜单项
|
||
document.querySelectorAll('.menu-item').forEach(function (item)
|
||
{
|
||
const isHasChild = item.classList.contains('has-child');
|
||
const subMenu = item.querySelector('.sub-menu');
|
||
const box = item.querySelector('.menu-item-box');
|
||
|
||
if (isHasChild && subMenu) {
|
||
box.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
subMenu.classList.toggle('show');
|
||
item.classList.toggle('open');
|
||
});
|
||
} else {
|
||
const link = item.getAttribute('data-link');
|
||
if (link) {
|
||
item.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
window.location.href = link;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
// 阻止子菜单链接冒泡
|
||
document.querySelectorAll('.sub-item').forEach(function (sub)
|
||
{
|
||
sub.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
});
|
||
});
|
||
|
||
dropdownMenu.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
});
|
||
|
||
navBtn1.style.display = 'none';
|
||
navBtn.style.display = 'block';
|
||
|
||
// 关闭所有弹窗的公共函数
|
||
function closeAllModals ()
|
||
{
|
||
cartModal.classList.remove('show');
|
||
langModal.classList.remove('show');
|
||
searchModal.classList.remove('show');
|
||
if (searchInput) {
|
||
searchInput.value = '';
|
||
if (searchClearBtn) searchClearBtn.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// ====================== 购物车弹窗交互 ======================
|
||
const cardBtn = document.querySelector('.nav-card');
|
||
const cartModal = document.getElementById('cartModal');
|
||
const cartModalClose = cartModal.querySelector('.modal-close');
|
||
|
||
cardBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 关闭下拉菜单和其他弹窗
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
closeAllModals();
|
||
cartModal.classList.add('show');
|
||
});
|
||
|
||
cartModalClose.addEventListener('click', function ()
|
||
{
|
||
cartModal.classList.remove('show');
|
||
});
|
||
|
||
cartModal.addEventListener('click', function (e)
|
||
{
|
||
if (e.target === cartModal) {
|
||
cartModal.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
// ====================== 语言弹窗交互 ======================
|
||
const langBtn = document.querySelector('.nav-lang');
|
||
const langModal = document.getElementById('langModal');
|
||
const langModalClose = langModal.querySelector('.modal-close');
|
||
|
||
langBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 关闭下拉菜单和其他弹窗
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
closeAllModals();
|
||
langModal.classList.add('show');
|
||
});
|
||
|
||
langModalClose.addEventListener('click', function ()
|
||
{
|
||
langModal.classList.remove('show');
|
||
});
|
||
|
||
langModal.addEventListener('click', function (e)
|
||
{
|
||
if (e.target === langModal) {
|
||
langModal.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll('.lang-item').forEach(function (item)
|
||
{
|
||
item.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
console.log('选择了语言:', this.innerText);
|
||
langModal.classList.remove('show');
|
||
});
|
||
});
|
||
|
||
// ====================== 搜索记录功能 ======================
|
||
// 获取搜索记录
|
||
function getSearchHistory ()
|
||
{
|
||
const history = localStorage.getItem('searchHistory');
|
||
return history ? JSON.parse(history) : [];
|
||
}
|
||
|
||
// 保存搜索记录
|
||
function saveSearchHistory (history)
|
||
{
|
||
localStorage.setItem('searchHistory', JSON.stringify(history));
|
||
}
|
||
|
||
// 添加搜索记录
|
||
function addSearchHistory (keyword)
|
||
{
|
||
if (!keyword || !keyword.trim()) return;
|
||
keyword = keyword.trim();
|
||
let history = getSearchHistory();
|
||
history = history.filter(item => item !== keyword);
|
||
history.unshift(keyword);
|
||
if (history.length > 10) {
|
||
history = history.slice(0, 10);
|
||
}
|
||
saveSearchHistory(history);
|
||
renderSearchHistory();
|
||
}
|
||
|
||
// 删除单条搜索记录
|
||
function deleteSearchHistoryItem (keyword)
|
||
{
|
||
let history = getSearchHistory();
|
||
history = history.filter(item => item !== keyword);
|
||
saveSearchHistory(history);
|
||
renderSearchHistory();
|
||
}
|
||
|
||
// 清空所有搜索记录
|
||
function clearAllSearchHistory ()
|
||
{
|
||
saveSearchHistory([]);
|
||
renderSearchHistory();
|
||
}
|
||
|
||
// 渲染搜索记录列表
|
||
function renderSearchHistory ()
|
||
{
|
||
const historyList = document.getElementById('searchHistoryList');
|
||
const history = getSearchHistory();
|
||
|
||
if (!historyList) return;
|
||
|
||
if (history.length === 0) {
|
||
historyList.innerHTML = '<div class="empty-history">暂无搜索记录</div>';
|
||
return;
|
||
}
|
||
|
||
historyList.innerHTML = '';
|
||
history.forEach(function (keyword)
|
||
{
|
||
const itemDiv = document.createElement('div');
|
||
itemDiv.className = 'search-history-item';
|
||
itemDiv.innerHTML = `
|
||
<span>${escapeHtml(keyword)}</span>
|
||
<img src="./img/x.png" class="delete-icon" data-keyword="${escapeHtml(keyword)}">
|
||
`;
|
||
itemDiv.addEventListener('click', function (e)
|
||
{
|
||
if (e.target.classList && e.target.classList.contains('delete-icon')) {
|
||
e.stopPropagation();
|
||
deleteSearchHistoryItem(keyword);
|
||
} else {
|
||
e.stopPropagation();
|
||
searchInput.value = keyword;
|
||
doSearch(keyword);
|
||
}
|
||
});
|
||
historyList.appendChild(itemDiv);
|
||
});
|
||
}
|
||
|
||
// 简单的防XSS
|
||
function escapeHtml (str)
|
||
{
|
||
return str.replace(/[&<>]/g, function (m)
|
||
{
|
||
if (m === '&') return '&';
|
||
if (m === '<') return '<';
|
||
if (m === '>') return '>';
|
||
return m;
|
||
});
|
||
}
|
||
|
||
// ====================== 搜索弹窗交互 ======================
|
||
const searchBtn = document.querySelector('.nav-search');
|
||
const searchModal = document.getElementById('searchModal');
|
||
const searchModalClose = searchModal.querySelector('.modal-close');
|
||
const searchInput = document.getElementById('searchInput');
|
||
const searchSubmit = document.getElementById('searchSubmit');
|
||
const searchClearBtn = document.getElementById('searchClearBtn');
|
||
const clearAllHistoryBtn = document.getElementById('clearAllHistory');
|
||
|
||
searchInput.addEventListener('input', function (e)
|
||
{
|
||
if (searchInput.value.length > 0) {
|
||
searchClearBtn.style.display = 'block';
|
||
} else {
|
||
searchClearBtn.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
searchClearBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
searchInput.focus();
|
||
});
|
||
|
||
if (clearAllHistoryBtn) {
|
||
clearAllHistoryBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
clearAllSearchHistory();
|
||
});
|
||
}
|
||
|
||
searchBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 关闭下拉菜单和其他弹窗
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
closeAllModals();
|
||
renderSearchHistory();
|
||
searchModal.classList.add('show');
|
||
setTimeout(() =>
|
||
{
|
||
searchInput.focus();
|
||
}, 100);
|
||
});
|
||
|
||
searchModalClose.addEventListener('click', function ()
|
||
{
|
||
searchModal.classList.remove('show');
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
});
|
||
|
||
searchModal.addEventListener('click', function (e)
|
||
{
|
||
if (e.target === searchModal) {
|
||
searchModal.classList.remove('show');
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 执行搜索
|
||
function doSearch (keyword)
|
||
{
|
||
if (keyword && keyword.trim()) {
|
||
const searchKeyword = keyword.trim();
|
||
console.log('搜索关键词:', searchKeyword);
|
||
addSearchHistory(searchKeyword);
|
||
alert('搜索: ' + searchKeyword);
|
||
searchModal.classList.remove('show');
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
} else {
|
||
alert('请输入搜索关键词');
|
||
}
|
||
}
|
||
|
||
searchSubmit.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
doSearch(searchInput.value);
|
||
});
|
||
|
||
searchInput.addEventListener('keypress', function (e)
|
||
{
|
||
if (e.key === 'Enter' || e.key === 'enter' || e.keyCode === 13) {
|
||
e.preventDefault();
|
||
doSearch(searchInput.value);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |