header搜索框样式错乱调整
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s

This commit is contained in:
2026-04-08 13:54:02 +08:00
parent eb015c552f
commit 184e81737e
7 changed files with 45 additions and 23 deletions

View File

@@ -9,7 +9,7 @@
<!-- banner-->
<div class="oidx-banner">
{notempty name="focus_images"}
<div class="swiper-container bannerswiper">
<div class="swiper-container bannerswiper" style="background: #fff;">
<div class="swiper-wrapper">
{volist name="focus_images" id="fi"}
<div class="swiper-slide">

View File

@@ -324,8 +324,14 @@
height: 14px;
cursor: pointer;
opacity: 0.6;
}
.search-clear-box {
padding-right: 10px;
}
/* .search-clear-btn {
border-right: 1px solid #eee;
} */
.search-input-box .search-clear-btn:hover {
opacity: 1;
}
@@ -334,8 +340,13 @@
width: 18px;
height: 18px;
cursor: pointer;
box-sizing: border-box;
}
.search-submit-box {
border-left: 1px solid #d9d9d9;
padding-left:10px;
max-height: 18px;
}
.search-history {
margin-top: 20px;
}
@@ -407,6 +418,10 @@
font-size: 14px;
color: #aaa;
}
.mobile-header-right {
display: flex;
align-items: center;
}
</style>
<header>
<div class="mobile-header-box">
@@ -514,9 +529,14 @@
<img src="__IMAGES__/header/x.png" class="modal-close">
<div class="search-input-box">
<input type="text" placeholder="{:lang_i18n('请输入搜索关键词')}" id="searchInput">
<img src="__IMAGES__/header/x.png" alt="{:lang_i18n('清除')}" class="search-clear-btn" id="searchClearBtn" style="display: none;">
<span style="width: 1px; color:#d9d9d9;margin: 0 10px;">|</span>
<img src="__IMAGES__/header/search.png" alt="{:lang_i18n('搜索')}" class="search-submit-icon" id="searchSubmit">
<div class="search-clear-box">
<img src="__IMAGES__/header/x.png" alt="{:lang_i18n('清除')}" class="search-clear-btn" id="searchClearBtn" style="display: none;">
</div>
<!-- <span style="width: 1px; color:#d9d9d9;margin: 0 10px;">|</span> -->
<div class="search-submit-box">
<img src="__IMAGES__/header/search.png" alt="{:lang_i18n('搜索')}" class="search-submit-icon" id="searchSubmit">
</div>
</div>
<div class="search-history">
<div class="search-history-header">
@@ -844,16 +864,16 @@
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('请输入搜索关键词');
}
}
if (searchKeyword) {
addSearchHistory(searchKeyword);
window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(searchKeyword);
searchModal.classList.remove('show');
searchInput.value = '';
searchClearBtn.style.display = 'none';
}
}
}12
searchSubmit.addEventListener('click', function (e)
{
e.stopPropagation();
@@ -862,6 +882,7 @@
searchInput.addEventListener('keypress', function (e)
{
console.log(e,'========e=============')
if (e.key === 'Enter' || e.key === 'enter' || e.keyCode === 13) {
e.preventDefault();
doSearch(searchInput.value);

View File

@@ -31,15 +31,13 @@
<link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
{/block}
{block name="header"}
<!-- 重置header头为空 -->
{/block}
{block name="main"}
<a class="header" href="/">
<!-- <a class="header" href="/">
<div class="header-img">
<img src="__IMAGES__/logo.png" alt="">
</div>
</a>
</a> -->
<!-- 轮播核心容器 -->
<div class="swiper-container auto-swiper-container" >
{notempty name="data.focus_image"}