From 62db7e8cb2c02a4e72051e593661c6dd18b8545b Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Thu, 9 Apr 2026 10:38:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=A6=BBcss=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index/view/mobile/product/classify.html | 192 +--- app/index/view/mobile/public/header.html | 426 +------ app/index/view/pc/public/header.html | 1019 +---------------- public/static/index/mobile/css/category.css | 190 +++ public/static/index/mobile/css/new_header.css | 424 +++++++ public/static/index/pc/css/header.css | 1016 ++++++++++++++++ 6 files changed, 1633 insertions(+), 1634 deletions(-) create mode 100644 public/static/index/mobile/css/category.css create mode 100644 public/static/index/mobile/css/new_header.css create mode 100644 public/static/index/pc/css/header.css diff --git a/app/index/view/mobile/product/classify.html b/app/index/view/mobile/product/classify.html index 7518f180..3d1f50e5 100644 --- a/app/index/view/mobile/product/classify.html +++ b/app/index/view/mobile/product/classify.html @@ -1,7 +1,7 @@ {extend name="public/base" /} {block name="style"} - + - {/block} diff --git a/app/index/view/mobile/public/header.html b/app/index/view/mobile/public/header.html index 22b10417..a29e4f7a 100644 --- a/app/index/view/mobile/public/header.html +++ b/app/index/view/mobile/public/header.html @@ -1,428 +1,4 @@ - +
diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html index a1d3ba86..3ef927f5 100644 --- a/app/index/view/pc/public/header.html +++ b/app/index/view/pc/public/header.html @@ -1,1021 +1,4 @@ - +
diff --git a/public/static/index/mobile/css/category.css b/public/static/index/mobile/css/category.css new file mode 100644 index 00000000..45253b1d --- /dev/null +++ b/public/static/index/mobile/css/category.css @@ -0,0 +1,190 @@ + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; + font-size: inherit !important; + /* font-size:100% !important; */ + } + + body { + background: #f5f5f5; + font-size: inherit !important; + /* font-size:100% !important; */ + height: 100vh; + overflow: hidden + + } + + .top-box { + width: 100%; + box-sizing: border-box; + padding: 20px 22px; + background: #fff; + margin-top: 46px; + } + + .top-bar { + display: flex; + align-items: center; + height: 0.82rem; + background: #F1F2F5; + justify-content: space-between; + border-radius: 0.2rem; + padding: 0 16px; + } + + .back { + width: 14px; + height: 14px; + color: #333; + cursor: pointer; + display: flex; + align-items: center; + } + + .title { + font-size: 0.32rem !important; + font-weight: 500; + } + + /* 主体布局 */ + .main { + display: flex; + height: calc(100% - 46px) + } + + /* 左侧菜单 */ + .sidebar { + width: 114px; + background: #FAFAFA; + overflow-y: auto; + box-sizing: border-box; + } + + .sidebar li { + list-style: none; + padding: 24px 16px; + text-align: center; + font-size: 0.28rem !important; + color: #686A70; + cursor: pointer; + } + + .sidebar li.active { + color: #004BFA; + background: #fff; + } + + /* 右侧内容 */ + .right-content { + flex: 1; + overflow-y: auto; + padding-left: 12px; + background: #fff; + margin-bottom: 80px; + + } + + .sec-header { + display: flex; + justify-content: space-between; + align-items: center; + + padding-top: 24px; + padding-right: 17px; + padding-bottom: 12px; + + } + + .sec-title { + font-size: 0.28rem !important; + color: #686A70; + font-weight: 500 + } + + .sec-arrow { + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + color: #666; + font-size: 20px; + cursor: pointer; + } + + /* 横向滚动容器 */ + .scroll-box { + display: flex; + gap: 10px; + overflow-x: auto; + scroll-behavior: smooth; + + scrollbar-width: none; + } + + .scroll-box::-webkit-scrollbar { + display: none + } + + .right-card { + flex-shrink: 0; + background: #FAFAFA; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0, 0, 0, .05); + display: flex; + flex-direction: column; + align-items: center; + padding-top: 8px; + } + + .card-img { + width: 1.52rem; + background: #f1f1f1; + display: flex; + align-items: center; + justify-content: center; + color: #999; + } + + .card-img img { + width: 100%; + } + + .card-info { + padding: 8px; + text-align: center + } + + .card-name { + font-size: 0.2rem !important; + width: 1.52rem; + height: auto; + color: #1D1D1F; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .card-model { + font-size: 0.16rem !important; + color: #686A70; + margin-top: 4px + } + + /* 内容区块默认隐藏 */ + .tab-pane { + display: none + } + + /* 激活时显示 */ + .tab-pane.active { + display: block; + + } + diff --git a/public/static/index/mobile/css/new_header.css b/public/static/index/mobile/css/new_header.css new file mode 100644 index 00000000..3a7d6192 --- /dev/null +++ b/public/static/index/mobile/css/new_header.css @@ -0,0 +1,424 @@ + + * { + 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; */ + position: fixed; + top:0; + left:0; + z-index: 100; + width: 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: fixed; + 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-clear-box { + padding-right: 10px; + } + /* .search-clear-btn { + border-right: 1px solid #eee; + } */ + .search-input-box .search-clear-btn:hover { + opacity: 1; + } + + .search-input-box .search-submit-icon { + 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; + } + + .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; + } + .mobile-header-right { + display: flex; + align-items: center; + } diff --git a/public/static/index/pc/css/header.css b/public/static/index/pc/css/header.css new file mode 100644 index 00000000..5c407a0e --- /dev/null +++ b/public/static/index/pc/css/header.css @@ -0,0 +1,1016 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: '微软雅黑', sans-serif; +} + +body { + overflow-x: hidden; + +} + +a { + text-decoration: none; +} +.header { + position: fixed; + top:0; + z-index: 999; + width:100%; + background: #fff; + font-size: 16px; +} +/* 导航外容器：1920px宽，居中 */ +.header-nav-outer { + max-width: 1920px; + position: relative; + padding: 0 12.5em; + overflow: visible; + height: 64px; + background: #fff; + display: flex; + align-items: center; +} + +/* 顶部导航栏：内容区带左右边距，外框1920px */ +.header-nav-bar { + width: 100%; + max-width: 1520px; + height: 4em; + display: flex; + align-items: center; + flex-wrap: nowrap; + justify-content: space-between; +} + +.header-log { + width: 6.9375em; + height: 1.75em; + margin-right: 9.125em; + flex-shrink: 0; +} + +.header-nav-items { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + flex-wrap: nowrap; + flex: 1; + min-width: 0; + margin-right: 5.125em; +} + +.header-nav-item { + height: 100%; + display: flex; + align-items: center; + cursor: pointer; + color: #1d1d1f; + flex-shrink: 1; + min-width: 0; +} + +.header-nav-title { + position: relative; + height: 100%; + font-size: 1em; + display: flex; + align-items: center; + flex-wrap: nowrap; + white-space: nowrap; + padding: 0 0.3em; +} + +/* 导航项下划线 */ +.header-nav-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 0.125em; + background-color: #004bfa; + transform: scaleX(0); + transition: transform 0.2s ease; +} + +.header-nav-title:hover::after, +.header-nav-title.active::after { + transform: scaleX(1); +} + +.header-nav-title.active { + color: #004bfa; +} + +/* 右侧功能按钮 */ +.header-nav-actions { + margin-left: auto; + display: flex; + align-items: center; + gap: 2em; + position: relative; + flex-shrink: 0; +} + +/* 搜索按钮容器 */ +.header-search-wrapper { + position: relative; + display: inline-block; +} + +/* 语言按钮容器 */ +.header-lang-wrapper { + position: relative; + display: inline-block; +} + +/* 购买按钮容器 */ +.header-buy-wrapper { + position: relative; + display: inline-block; +} + +.header-nav-btn { + cursor: pointer; + display: flex; + align-items: center; + transition: color 0.2s; +} + +.header-nav-btn img { + width: 1.5em; + max-width: 24px; + max-height: 24px; + height: 1.5em; +} + +.header-nav-btn:hover { + color: #004bfa; +} + +.header-buy-btn { + background-color: #004bfa; + color: #fff; + padding: 0.375em 1.125em; + border-radius: 0.25em; + border: none; + cursor: pointer; + font-size: 1em; + white-space: nowrap; +} + +/* ========== 响应式设计 - 整体缩放，保持比例 ========== */ + +/* 1920px 及以上 - 100% */ +@media screen and (min-width: 1920px) { + .header { + font-size: 16px; + } +} + +/* 1680px - 1919px - 缩放至 93.75% */ +@media screen and (max-width: 1919px) and (min-width: 1680px) { + .header { + font-size: 15px; + } +} + +/* 1600px - 1679px - 缩放至 90.625% */ +@media screen and (max-width: 1679px) and (min-width: 1600px) { + .header { + font-size: 14.5px; + } +} + +/* 1520px - 1599px - 缩放至 87.5% */ +@media screen and (max-width: 1599px) and (min-width: 1520px) { + .header { + font-size: 14px; + } +} + +/* 1440px - 1519px - 缩放至 84.375% */ +@media screen and (max-width: 1519px) and (min-width: 1440px) { + .header { + font-size: 13.5px; + } +} + +/* 1360px - 1439px - 缩放至 81.25% */ +@media screen and (max-width: 1439px) and (min-width: 1360px) { + .header { + font-size: 13px; + } +} + +/* 1280px - 1359px - 缩放至 78.125% */ +@media screen and (max-width: 1359px) and (min-width: 1280px) { + .header { + font-size: 12.5px; + } +} + +/* 1200px - 1279px - 缩放至 75% */ +@media screen and (max-width: 1279px) and (min-width: 1200px) { + .header { + font-size: 12px; + } +} + +/* 1140px - 1199px - 缩放至 75% (保持最小12px) */ +@media screen and (max-width: 1199px) and (min-width: 1140px) { + .header { + font-size: 12px; + } +} + +/* 1080px - 1139px - 缩放至 75% (保持最小12px) */ +@media screen and (max-width: 1139px) and (min-width: 1080px) { + .header { + font-size: 12px; + } +} + +/* 992px - 1079px - 缩放至 75% (保持最小12px) */ +@media screen and (max-width: 1079px) and (min-width: 992px) { + .header { + font-size: 12px; + } +} + +/* 小于992px - 保持最小12px */ +@media screen and (max-width: 991px) { + .header { + font-size: 12px; + } +} + +/* ========== 以下为原有样式，保持不变 ========== */ + +/* 原有的下拉框样式 */ +.header-dropdown { + box-sizing: border-box; + max-width: 1920px; + width: 100%; + position: absolute; + top: 4em; + left: 0; + right: 0; + background-color: #fafafb; + z-index: 999; + border-top: none; + overflow: hidden; + padding-bottom: 2.375em; + display: none; +} + +.header-nav-item:hover .header-dropdown { + display: block; +} + +/* Tabs切换栏：居中，宽度100%（基于下拉框内容区） */ +.header-dropdown-tabs { + display: flex; + justify-content: center; + margin: 0 auto; + padding-bottom: 1.75em; + padding-top: 1.75em; + width: calc(100% - 2.5em); +} + +.header-tab-item:last-child { + margin-right: 0; +} + +.header-tab-item { + font-size: 1em; + color: #1d1d1f; + cursor: pointer; + position: relative; + margin-right: 9.375em; +} + +.header-tab-item.active::after { + content: ''; + position: absolute; + bottom: -0.6875em; + left: 0; + width: 100%; + height: 0.125em; + background-color: #004bfa; +} + +/* 下拉框内容容器：宽度100%，左右留20px边距 */ +.header-dropdown-content { + width: 100%; + min-width: 1080px; + padding: 0 12.5em; + display: flex; + justify-content: space-between; + box-sizing: border-box; + align-items: flex-start; +} + +/* 左侧6个分类区块 */ +.header-dropdown-category { + display: flex; + flex-wrap: wrap; + flex-direction: column; + flex: 1; +} + +.header-category-box { + display: flex; + justify-content: space-between; +} + +/* 单个分类区块 */ +.header-category-block { + flex: 1; + box-sizing: border-box; +} + +.header-category-block:nth-child(5) { + margin-bottom: 0; +} + +.header-category-block:nth-child(6) { + margin-bottom: 0; +} + +.header-category-title { + font-size: 1em; + color: #1d1d1f; + margin-bottom: 0.75em; + font-weight: 900; +} + +.header-category-list { + list-style: none; +} + +.header-category-item { + font-size: 0.875em; + color: #686a70; + margin-bottom: 0.71em; + cursor: pointer; +} + +.header-category-item a { + color: #686a70; +} + +.header-category-item:last-child { + margin: 0; +} + +.header-category-item a:hover { + color: #0066ff; +} + +/* 右侧产品展示区：自适应剩余宽度，无溢出 */ +.header-dropdown-products { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + max-width: 46.75em; +} + + +.header-dropdown-products { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + flex: 1; + min-width: 0; + gap: 1.5em 0; +} + + + +.header-product-card { + text-align: center; + width: calc(50% - 0.75em); + max-width: 22.625em; + flex-shrink: 1; + min-width: 260px; + transition: transform 0.2s ease; +} + + +.header-product-card-1 { + text-align: center; + width: 100%; + max-width: 22.625em; + +} + +.header-product-card:hover { + transform: translateY(-2px) +} + +.header-product-card-1:hover { + transform: translateY(-2px) +} + +.header-product-card:nth-child(1) { + margin-right: 1.5em; +} + +.header-product-card:nth-child(3) { + margin-right: 1.5em; + margin-top: 1.4375em; +} + +.header-product-card:nth-child(4) { + margin-top: 1.4375em; +} + +/*.header-product-img {*/ +/* width: 22.625em;*/ +/* height: 12.25em;*/ +/* background-color: #f5f5f5;*/ +/* display: flex;*/ +/* align-items: center;*/ +/* justify-content: center;*/ +/* color: #999;*/ +/*}*/ + +/*.header-product-img img {*/ +/* width: 22.625em;*/ +/* height: 12.25em;*/ +/*}*/ +.header-product-img { + width: 100%; + aspect-ratio: 22.625 / 12.25; + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + color: #999; + overflow: hidden; + border-radius: 0.5em; +} + +.header-product-img img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.header-product-name { + font-size: 1em; + color: #1d1d1f; + line-height: 1.5; +} + +/* 修改 .dropdown-content1 的样式 - 卡片居中对齐 */ +.header-dropdown-content1 { + width: 100%; + min-width: 1080px; + padding: 3.4em 12.5em; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 3.4em 1.875em; + box-sizing: border-box; +} + +/* 修改 .product-card-1 的样式 - 设置宽度，确保一行最多4个 */ +.header-product-card-1 { + width: calc(25% - 1.40625em); + background: #fff; + border-radius: 0.5em; + max-width: 362px; + flex-shrink: 0; + +} + +/* 如果需要更好的兼容性，用 padding 技巧替代 aspect-ratio */ +.header-product-img-1 { + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + color: #999; + width: 100%; + position: relative; + padding-bottom: 53%; + height: 0; + overflow: hidden; +} + +/* 图片样式 - 确保图片正确显示 */ +.header-product-img-1 img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* 内容区域自适应 */ +.header-product-title-1 { + font-weight: 900; + font-size: 1em; + color: #1d1d1f; + text-align: left; + margin-top: 1.125em; + padding: 0 0.5em; + word-break: break-word; +} + +.header-product-name-1 { + font-size: 1em; + color: #686a70; + text-align: left; + margin-top: 0.25em; + margin-bottom: 1.0625em; + padding: 0 0.5em; + word-break: break-word; +} + +/* 隐藏非当前选中的Tabs内容 */ +.header-tab-content { + display: none; +} + +.header-tab-content.active { + display: flex; +} + +/* ========== 搜索下拉框样式 ========== */ +.header-search-dropdown { + position: absolute; + top: 100%; + right: 0; + margin-top: 0.75em; + background: #ffffff; + border-radius: 0.75em; + box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12); + width: 26em; + padding: 1.5em; + z-index: 1000; + display: none; + animation: fadeIn 0.2s ease; +} + +.header-search-dropdown.show { + display: block; +} + +.header-search-input-wrapper { + display: flex; + gap: 0.625em; + border: 1px solid #e5e7eb; + border-radius: 2em; + padding: 0.5em 1em; + background: #f9fafb; + margin-bottom: 1em; +} + +.header-search-input { + flex: 1; + border: none; + outline: none; + background: transparent; + font-size: 0.875em; + color: #1d1d1f; +} + +.header-search-input::placeholder { + color: #9ca3af; +} + +.header-search-submit { + background: #004bfa; + color: white; + border: none; + padding: 0.375em 1em; + border-radius: 1.5em; + cursor: pointer; + font-size: 0.8125em; + transition: background 0.2s; +} + +.header-search-submit:hover { + background: #0039cc; +} + +/* 搜索记录区域 */ +.header-search-history { + margin-bottom: 1.25em; +} + +.header-history-title { + font-size: 1em; + color: #9ca3af; + margin-bottom: 0.625em; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-clear-history { + color: #004bfa; + cursor: pointer; + font-size: 14px; + padding: 0.2em 0.5em; + border-radius: 0.25em; + transition: background 0.2s; +} + +.header-clear-history:hover { + background: #f0f7ff; +} + +.header-history-list { + display: flex; + flex-wrap: wrap; + gap: 0.5em; +} + +.header-history-item { + font-size: 0.8125em; + color: #1d1d1f; + cursor: pointer; + padding: 0.25em 0.625em; + background: #f3f4f6; + border-radius: 1em; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 0.25em; +} + +.header-history-item:hover { + background: #004bfa; + color: white; +} + +.header-history-item .header-delete-icon { + font-size: 0.875em; + opacity: 0; + transition: opacity 0.2s; +} + +.header-history-item:hover .header-delete-icon { + opacity: 1; +} + +/* 热销产品区域 - 使用flex-wrap，一行最多3个，超过自动换行 */ +.header-hot-products { + border-top: 1px solid #f0f0f0; + padding-top: 0.75em; +} + +.header-hot-title { + font-size: 1em; + color: #9ca3af; + margin-bottom: 0.75em; +} + +.header-hot-product-list { + display: flex; + flex-wrap: wrap; + gap: 1.5em; + margin: 0; + padding: 0; +} + +.header-hot-product-item { + flex: 0 0 calc(33.333% - 1em); + min-width: 0; + cursor: pointer; + text-align: center; + transition: transform 0.2s; + box-sizing: border-box; +} + +.header-hot-product-item:hover { + transform: translateY(-2px); +} + +.header-hot-product-img { + width: 7.1875em; + height: 7.1875em; + max-width: 115px; + max-height: 115px; + background: linear-gradient(135deg, #f5f7fc 0%, #eef2f8 100%); + border-radius: 0.5em; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 0.5em auto; + overflow: hidden; +} + +.header-hot-product-img img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.header-hot-product-img .emoji { + font-size: 2.5em; +} + +.header-hot-product-name { + font-size: 0.8125em; + color: #1d1d1f; + font-weight: 500; + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 语言下拉框样式 */ +.header-lang-dropdown { + position: absolute; + top: 100%; + right: 0; + margin-top: 0.75em; + background: #ffffff; + border-radius: 0.75em; + box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12); + min-width: 12em; + padding: 1.5em 0; + z-index: 1000; + display: none; + animation: fadeIn 0.2s ease; +} + +.header-lang-dropdown.show { + display: block; +} + +.header-lang-item { + display: block; + padding: 0.75em 1.25em; + cursor: pointer; + transition: background 0.2s; + width: 100%; + font-size: 0.875em; + color: #1d1d1f; + text-decoration: none; + display: flex; + align-items: center; + gap: 0.625em; +} + +.header-lang-item:hover { + background: #f3f4f6; + color: #004bfa; +} + +.header-lang-item.active { + color: #004bfa; + background: #f0f7ff; +} + +.header-lang-code { + font-weight: 500; + min-width: 2.5em; + white-space:nowrap; +} + +.header-lang-name { + flex: 1; +} +.header-lang-name-en { + flex: 1; + min-width: 126px; +} +.header-lang-dropdown-delete-icon, +.header-search-dropdown-delete-icon { + font-size: 12px; + position: absolute; + top: 10px; + right: 14px; + cursor: pointer; + +} + +/* ========== 购买下拉框样式 ========== */ +.header-buy-dropdown { + box-sizing: border-box; + max-width: 1920px; + width: 100%; + position: absolute; + top: 3.75em; + left: 0; + right: 0; + background-color: #fafafb; + z-index: 999; + border-top: none; + overflow: visible; + display: none; + padding: 3.5em 12.5em; +} + +.header-buy-dropdown.show { + display: block; +} + +/* 购买下拉框内容容器 - 居中显示，固定一行7个卡片 */ +.header-buy-dropdown-content { + width: 100%; + max-width: 1520px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: center; + box-sizing: border-box; + row-gap: 121px; +} + +/* 购买产品卡片：宽度96px，右边距动态计算 */ +.header-buy-product-card { + width: 96px; + text-align: center; + cursor: pointer; + margin-right: calc((100% - (96px * 7)) / 6); + +} + +.header-buy-product-card:hover { + transform: translateY(-2px) +} + +/* 每行第7个卡片（一行最后一个）清除右边距 */ +.header-buy-product-card:nth-child(7n) { + margin-right: 0; +} + +.header-buy-product-card a { + text-decoration: none; + display: block; +} + +/* 图片容器：宽度100%，高度自适应，保持正方形比例 */ +.header-buy-product-img { + width: 100%; + aspect-ratio: 1 / 1; + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: 0.5em; + position: relative; +} + +/* 图片样式：实现悬浮切换效果，完全填充容器 */ +.header-buy-product-img img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: opacity 0.2s ease; +} + +/* 默认显示普通图，隐藏悬浮图 */ +.header-buy-product-img .header-default-img { + opacity: 1; +} + +.header-buy-product-img .header-hover-img { + opacity: 0; +} + +/* 鼠标悬停时：显示悬浮图，隐藏普通图 */ +.header-buy-product-card:hover .header-buy-product-img .header-default-img { + opacity: 0; +} + +.header-buy-product-card:hover .header-buy-product-img .header-hover-img { + opacity: 1; +} + +/* 产品标题样式：不加粗，字体大小16px，超出一行显示省略号 */ +.header-buy-product-title { + font-weight: normal; + font-size: 1em; + color: #1d1d1f; + text-align: center; + margin-top: 0.75em; + word-break: break-word; + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + white-space: normal; +} + +/* 动画 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-0.5em); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 1280px及以下屏幕，渐进式调整间距 */ +@media screen and (max-width: 1280px) { + .header-log { + margin-right: 2em; + } + + .header-nav-items { + margin-right: 1em; + } + + .header-nav-outer { + padding: 0 12em; + } + + .header-dropdown-content { + padding: 0 12em; + } + + .header-dropdown-content1 { + padding: 0 12em; + } + + .header-buy-dropdown { + padding: 3.5em 12em; + } + + .header-buy-dropdown-content { + max-width: 1200px; + row-gap: 100px; + } +} + +/* 1152px及以下，进一步缩小 */ +@media screen and (max-width: 1152px) { + .header-log { + margin-right: 1em; + } + + .header-nav-outer { + padding: 0 10em; + } + + .header-dropdown-content { + padding: 0 10em; + } + + .header-dropdown-content1 { + padding: 0 10em; + } + + .header-buy-dropdown { + padding: 3.5em 10em; + } + + .buy-dropdown-content { + max-width: 1080px; + row-gap: 80px; + } +} + +/* 1080px及以下，最小间距 */ +@media screen and (max-width: 1080px) { + .header-log { + margin-right: 1em; + } + + .header-nav-outer { + padding: 0 8em; + } + + .header-dropdown-content { + padding: 0 8em; + } + + .header-dropdown-content1 { + padding: 0 8em; + } + + .header-buy-dropdown { + padding: 3.5em 8em; + } + + .header-buy-dropdown-content { + max-width: 1000px; + row-gap: 60px; + } +} \ No newline at end of file