jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

refactor: mobile header
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
Details

Browse Source
This commit is contained in:
jsasg
2026-04-08 11:20:54 +08:00
parent 2c3e309d2a
commit 685cd53b1a
3 changed files with 792 additions and 848 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/index/lang/en-us/mobile.php
View File

@@ -6,6 +6,9 @@ return [
'产品列表' => 'Products',
'搜索' => 'Search',
'搜索历史' => 'Search History',
'请输入搜索关键词' => 'Please enter a search keyword',
'搜索记录' => 'Search History',
'清空' => 'Clear',
'请择地区' => 'SELECT A REGION',
'产品' => 'Product',
'联系方式' => 'Contact',

179
app/index/view/mobile/public/header.html
View File

@@ -1,10 +1,3 @@
<!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;
@@ -411,21 +404,19 @@
color: #aaa;
}
</style>
</head>
<body>
<header>
<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">
<img src="__IMAGES__/header/nav.png" class="nav-img">
<img src="__IMAGES__/header/x.png" class="nav-img1">
<a href="#" target="_self" style="display: flex; justify-content: center;">
<img src="./img/log.png" class="nav-log">
<img src="__IMAGES__/logo.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">
<img src="__IMAGES__/header/search.png" class="nav-search">
<img src="__IMAGES__/header/lang.png" class="nav-lang">
<img src="__IMAGES__/header/card.png" class="nav-card">
</div>
</div>
@@ -433,127 +424,80 @@
<!-- 产品列表 - 有子菜单 -->
<div class="menu-item has-child">
<div class="menu-item-box">
<span>产品列表</span>
<img src="./img/b.png" class="menu-item-img">
<span>{:lang_i18n('产品列表')}</span>
<img src="__IMAGES__/header/b.png" class="menu-item-img">
</div>
{if condition="!empty($header_categorys)"}
<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>
{volist name="header_categorys" id="vo" key="idx"}
<div class="sub-item"><a href="#" target="_self">{$vo.name}</a></div>
{/volist}
</div>
{/if}
</div>
<!-- 闪存 - 无子菜单 -->
<div class="menu-item no-child" data-link="/flash">
{if condition="!empty($header_navigation)"}
{volist name="header_navigation" id="nav"}
{empty name='nav.children'}
<div class="menu-item no-child" data-link="{$nav.link}">
{else/}
<div class="menu-item has-child" data-link="{$nav.link}">
{/empty}
<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">
<span>{$nav.name}</span>
<img src="__IMAGES__/header/b.png" class="menu-item-img">
</div>
{if condition="!empty($nav.children)"}
<div class="sub-menu">
{volist name="nav.children" id="child"}
<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 href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}" class="sub-item-card">
<img src="{$child.image}" alt="" class="sub-item-card-img">
<div class="sub-item-card-title">{$child.name}</div>
<div class="sub-item-card-name">{$child.desc}</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">
{/volist}
</div>
{/if}
</div>
{/volist}
{/if}
</div>
<!-- ====================== 购物车弹窗 ====================== -->
<div class="modal-overlay" id="cartModal">
<div class="modal-content">
<img src="./img/x.png" class="modal-close">
<img src="__IMAGES__/header/x.png" class="modal-close">
{if condition="!empty($header_mall_entrance)"}
<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>
{volist name="header_mall_entrance" id="ma"}
{if condition="!empty($ma.link) && empty($ma.hover_image)"}
<a class="modal-item" href="{$ma.link}" target="_self">
<img src="{$ma.image}" alt="" class="modal-item-img">
<div class="modal-item-title">{$ma.name}</div>
</a>
{else/}
<!--悬浮图-->
<!--<img src="{$ma.hover_image}" alt="" class="modal-item-img">-->
{/if}
{/volist}
</div>
{/if}
</div>
</div>
<!-- ====================== 语言弹窗 ====================== -->
<div class="modal-overlay" id="langModal">
<div class="lang-modal-content">
<img src="./img/x.png" class="modal-close">
<img src="__IMAGES__/header/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>
{volist name="header_languages" id="la"}
<a class="lang-item" href="{$la.lang_url}" target="_self">
<img src="{$la.lang_icon}" />
<div>{$la.country_en_name} - {$la.lang_en_name}</div>
</a>
{/volist}
</div>
</div>
</div>
@@ -561,17 +505,17 @@
<!-- ====================== 搜索弹窗 ====================== -->
<div class="modal-overlay" id="searchModal">
<div class="search-modal-content">
<img src="./img/x.png" class="modal-close">
<img src="__IMAGES__/header/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;">
<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="./img/search.png" alt="搜索" class="search-submit-icon" id="searchSubmit">
<img src="__IMAGES__/header/search.png" alt="{:lang_i18n('搜索')}" 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 class="search-history-title">{:lang_i18n('搜索记录')}</div>
<div class="search-history-clear" id="clearAllHistory">{:lang_i18n('清空')}</div>
</div>
<div class="search-history-list" id="searchHistoryList">
<!-- 搜索记录会动态显示在这里 -->
@@ -579,7 +523,7 @@
</div>
</div>
</div>
</header>
<script>
document.addEventListener('DOMContentLoaded', function ()
{
@@ -793,7 +737,7 @@
itemDiv.className = 'search-history-item';
itemDiv.innerHTML = `
<span>${escapeHtml(keyword)}</span>
<img src="./img/x.png" class="delete-icon" data-keyword="${escapeHtml(keyword)}">
<img src="__IMAGES__/header/x.png" class="delete-icon" data-keyword="${escapeHtml(keyword)}">
`;
itemDiv.addEventListener('click', function (e)
{
@@ -919,6 +863,3 @@
});
});
</script>
</body>
</html>

BIN
public/static/index/mobile/images/header/log.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB