diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html index f4d5c5a3..32ea3353 100644 --- a/app/index/view/pc/public/header.html +++ b/app/index/view/pc/public/header.html @@ -8,40 +8,48 @@ body { overflow-x: hidden; - font-size: 16px; + } a { text-decoration: none; } - + .header { + position: fixed; + top:0; + z-index: 999; + width:100%; + background: #fff; + font-size: 16px; + } /* 导航外容器:1920px宽,居中 */ - .nav-outer { + .header-nav-outer { max-width: 1920px; position: relative; padding: 0 12.5em; overflow: visible; + background: #fff; } /* 顶部导航栏:内容区带左右边距,外框1920px */ - .nav-bar { + .header-nav-bar { width: 100%; max-width: 1520px; - height: 3.75em; + height: 4em; display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; } - .log { + .header-log { width: 6.9375em; height: 1.75em; margin-right: 9.125em; flex-shrink: 0; } - .nav-items { + .header-nav-items { display: flex; align-items: center; justify-content: space-between; @@ -52,7 +60,7 @@ margin-right: 5.125em; } - .nav-item { + .header-nav-item { height: 100%; display: flex; align-items: center; @@ -62,7 +70,7 @@ min-width: 0; } - .nav-title { + .header-nav-title { position: relative; height: 100%; font-size: 1em; @@ -74,7 +82,7 @@ } /* 导航项下划线 */ - .nav-title::after { + .header-nav-title::after { content: ''; position: absolute; bottom: 0; @@ -86,17 +94,17 @@ transition: transform 0.2s ease; } - .nav-title:hover::after, - .nav-title.active::after { + .header-nav-title:hover::after, + .header-nav-title.active::after { transform: scaleX(1); } - .nav-title.active { + .header-nav-title.active { color: #004bfa; } /* 右侧功能按钮 */ - .nav-actions { + .header-nav-actions { margin-left: auto; display: flex; align-items: center; @@ -106,42 +114,42 @@ } /* 搜索按钮容器 */ - .search-wrapper { + .header-search-wrapper { position: relative; display: inline-block; } /* 语言按钮容器 */ - .lang-wrapper { + .header-lang-wrapper { position: relative; display: inline-block; } /* 购买按钮容器 */ - .buy-wrapper { + .header-buy-wrapper { position: relative; display: inline-block; } - .nav-btn { + .header-nav-btn { cursor: pointer; display: flex; align-items: center; transition: color 0.2s; } - .nav-btn img { + .header-nav-btn img { width: 1.5em; max-width: 24px; max-height: 24px; height: 1.5em; } - .nav-btn:hover { + .header-nav-btn:hover { color: #004bfa; } - .buy-btn { + .header-buy-btn { background-color: #004bfa; color: #fff; padding: 0.375em 1.125em; @@ -156,84 +164,84 @@ /* 1920px 及以上 - 100% */ @media screen and (min-width: 1920px) { - body { + .header { font-size: 16px; } } /* 1680px - 1919px - 缩放至 93.75% */ @media screen and (max-width: 1919px) and (min-width: 1680px) { - body { + .header { font-size: 15px; } } /* 1600px - 1679px - 缩放至 90.625% */ @media screen and (max-width: 1679px) and (min-width: 1600px) { - body { + .header { font-size: 14.5px; } } /* 1520px - 1599px - 缩放至 87.5% */ @media screen and (max-width: 1599px) and (min-width: 1520px) { - body { + .header { font-size: 14px; } } /* 1440px - 1519px - 缩放至 84.375% */ @media screen and (max-width: 1519px) and (min-width: 1440px) { - body { + .header { font-size: 13.5px; } } /* 1360px - 1439px - 缩放至 81.25% */ @media screen and (max-width: 1439px) and (min-width: 1360px) { - body { + .header { font-size: 13px; } } /* 1280px - 1359px - 缩放至 78.125% */ @media screen and (max-width: 1359px) and (min-width: 1280px) { - body { + .header { font-size: 12.5px; } } /* 1200px - 1279px - 缩放至 75% */ @media screen and (max-width: 1279px) and (min-width: 1200px) { - body { + .header { font-size: 12px; } } /* 1140px - 1199px - 缩放至 75% (保持最小12px) */ @media screen and (max-width: 1199px) and (min-width: 1140px) { - body { + .header { font-size: 12px; } } /* 1080px - 1139px - 缩放至 75% (保持最小12px) */ @media screen and (max-width: 1139px) and (min-width: 1080px) { - body { + .header { font-size: 12px; } } /* 992px - 1079px - 缩放至 75% (保持最小12px) */ @media screen and (max-width: 1079px) and (min-width: 992px) { - body { + .header { font-size: 12px; } } /* 小于992px - 保持最小12px */ @media screen and (max-width: 991px) { - body { + .header { font-size: 12px; } } @@ -241,12 +249,12 @@ /* ========== 以下为原有样式,保持不变 ========== */ /* 原有的下拉框样式 */ - .dropdown { + .header-dropdown { box-sizing: border-box; max-width: 1920px; width: 100%; position: absolute; - top: 3.75em; + top: 4em; left: 0; right: 0; background-color: #fafafb; @@ -257,25 +265,25 @@ display: none; } - .nav-item:hover .dropdown { + .header-nav-item:hover .header-dropdown { display: block; } /* Tabs切换栏:居中,宽度100%(基于下拉框内容区) */ - .dropdown-tabs { + .header-dropdown-tabs { display: flex; justify-content: center; margin: 0 auto; - padding-bottom: 2em; + padding-bottom: 1.75em; padding-top: 1.75em; width: calc(100% - 2.5em); } - .tab-item:last-child { + .header-tab-item:last-child { margin-right: 0; } - .tab-item { + .header-tab-item { font-size: 1em; color: #1d1d1f; cursor: pointer; @@ -283,7 +291,7 @@ margin-right: 9.375em; } - .tab-item.active::after { + .header-tab-item.active::after { content: ''; position: absolute; bottom: -0.6875em; @@ -294,7 +302,7 @@ } /* 下拉框内容容器:宽度100%,左右留20px边距 */ - .dropdown-content { + .header-dropdown-content { width: 100%; min-width: 1080px; padding: 0 12.5em; @@ -305,122 +313,160 @@ } /* 左侧6个分类区块 */ - .dropdown-category { + .header-dropdown-category { display: flex; flex-wrap: wrap; flex-direction: column; flex: 1; } - .category-box { + .header-category-box { display: flex; justify-content: space-between; } /* 单个分类区块 */ - .category-block { + .header-category-block { flex: 1; box-sizing: border-box; } - .category-block:nth-child(5) { + .header-category-block:nth-child(5) { margin-bottom: 0; } - .category-block:nth-child(6) { + .header-category-block:nth-child(6) { margin-bottom: 0; } - .category-title { + .header-category-title { font-size: 1em; color: #1d1d1f; margin-bottom: 0.75em; font-weight: 900; } - .category-list { + .header-category-list { list-style: none; } - .category-item { + .header-category-item { font-size: 0.875em; color: #686a70; - margin-bottom: 0.5em; + margin-bottom: 0.71em; cursor: pointer; } - .category-item a { + .header-category-item a { color: #686a70; } - .category-item:last-child { + .header-category-item:last-child { margin: 0; } - .category-item a:hover { + .header-category-item a:hover { color: #0066ff; } /* 右侧产品展示区:自适应剩余宽度,无溢出 */ - .dropdown-products { + .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; + } - .product-card, - .product-card-1 { + + + .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; } - .product-card:hover { + .header-product-card:hover { transform: translateY(-2px) } - .product-card-1:hover { + .header-product-card-1:hover { transform: translateY(-2px) } - .product-card:nth-child(1) { + .header-product-card:nth-child(1) { margin-right: 1.5em; } - .product-card:nth-child(3) { + .header-product-card:nth-child(3) { margin-right: 1.5em; margin-top: 1.4375em; } - .product-card:nth-child(4) { + .header-product-card:nth-child(4) { margin-top: 1.4375em; } - .product-img { - width: 22.625em; - height: 12.25em; + /*.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; } - - .product-img img { - width: 22.625em; - height: 12.25em; + + .header-product-img img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; } - - .product-name { + .header-product-name { font-size: 1em; color: #1d1d1f; line-height: 1.5; } /* 修改 .dropdown-content1 的样式 - 卡片居中对齐 */ - .dropdown-content1 { + .header-dropdown-content1 { width: 100%; min-width: 1080px; padding: 3.4em 12.5em; @@ -432,7 +478,7 @@ } /* 修改 .product-card-1 的样式 - 设置宽度,确保一行最多4个 */ - .product-card-1 { + .header-product-card-1 { width: calc(25% - 1.40625em); background: #fff; border-radius: 0.5em; @@ -442,7 +488,7 @@ } /* 如果需要更好的兼容性,用 padding 技巧替代 aspect-ratio */ - .product-img-1 { + .header-product-img-1 { background-color: #f5f5f5; display: flex; align-items: center; @@ -456,18 +502,18 @@ } /* 图片样式 - 确保图片正确显示 */ - .product-img-1 img { + .header-product-img-1 img { position: absolute; top: 0; left: 0; - width: 100%; + width: 100%;header- height: 100%; object-fit: cover; display: block; } /* 内容区域自适应 */ - .product-title-1 { + .header-product-title-1 { font-weight: 900; font-size: 1em; color: #1d1d1f; @@ -477,7 +523,7 @@ word-break: break-word; } - .product-name-1 { + .header-product-name-1 { font-size: 1em; color: #686a70; text-align: left; @@ -488,16 +534,16 @@ } /* 隐藏非当前选中的Tabs内容 */ - .tab-content { + .header-tab-content { display: none; } - .tab-content.active { + .header-tab-content.active { display: flex; } /* ========== 搜索下拉框样式 ========== */ - .search-dropdown { + .header-search-dropdown { position: absolute; top: 100%; right: 0; @@ -512,11 +558,11 @@ animation: fadeIn 0.2s ease; } - .search-dropdown.show { + .header-search-dropdown.show { display: block; } - .search-input-wrapper { + .header-search-input-wrapper { display: flex; gap: 0.625em; border: 1px solid #e5e7eb; @@ -526,7 +572,7 @@ margin-bottom: 1em; } - .search-input { + .header-search-input { flex: 1; border: none; outline: none; @@ -535,11 +581,11 @@ color: #1d1d1f; } - .search-input::placeholder { + .header-search-input::placeholder { color: #9ca3af; } - .search-submit { + .header-search-submit { background: #004bfa; color: white; border: none; @@ -550,16 +596,16 @@ transition: background 0.2s; } - .search-submit:hover { + .header-search-submit:hover { background: #0039cc; } /* 搜索记录区域 */ - .search-history { + .header-search-history { margin-bottom: 1.25em; } - .history-title { + .header-history-title { font-size: 1em; color: #9ca3af; margin-bottom: 0.625em; @@ -568,7 +614,7 @@ align-items: center; } - .clear-history { + .header-clear-history { color: #004bfa; cursor: pointer; font-size: 14px; @@ -577,17 +623,17 @@ transition: background 0.2s; } - .clear-history:hover { + .header-clear-history:hover { background: #f0f7ff; } - .history-list { + .header-history-list { display: flex; flex-wrap: wrap; gap: 0.5em; } - .history-item { + .header-history-item { font-size: 0.8125em; color: #1d1d1f; cursor: pointer; @@ -600,34 +646,34 @@ gap: 0.25em; } - .history-item:hover { + .header-history-item:hover { background: #004bfa; color: white; } - .history-item .delete-icon { + .header-history-item .header-delete-icon { font-size: 0.875em; opacity: 0; transition: opacity 0.2s; } - .history-item:hover .delete-icon { + .header-history-item:hover .header-delete-icon { opacity: 1; } /* 热销产品区域 - 使用flex-wrap,一行最多3个,超过自动换行 */ - .hot-products { + .header-hot-products { border-top: 1px solid #f0f0f0; padding-top: 0.75em; } - .hot-title { + .header-hot-title { font-size: 1em; color: #9ca3af; margin-bottom: 0.75em; } - .hot-product-list { + .header-hot-product-list { display: flex; flex-wrap: wrap; gap: 1.5em; @@ -635,7 +681,7 @@ padding: 0; } - .hot-product-item { + .header-hot-product-item { flex: 0 0 calc(33.333% - 1em); min-width: 0; cursor: pointer; @@ -644,11 +690,11 @@ box-sizing: border-box; } - .hot-product-item:hover { + .header-hot-product-item:hover { transform: translateY(-2px); } - .hot-product-img { + .header-hot-product-img { width: 7.1875em; height: 7.1875em; max-width: 115px; @@ -662,18 +708,18 @@ overflow: hidden; } - .hot-product-img img { + .header-hot-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; } - .hot-product-img .emoji { + .header-hot-product-img .emoji { font-size: 2.5em; } - .hot-product-name { + .header-hot-product-name { font-size: 0.8125em; color: #1d1d1f; font-weight: 500; @@ -684,7 +730,7 @@ } /* 语言下拉框样式 */ - .lang-dropdown { + .header-lang-dropdown { position: absolute; top: 100%; right: 0; @@ -699,15 +745,16 @@ animation: fadeIn 0.2s ease; } - .lang-dropdown.show { + .header-lang-dropdown.show { display: block; } - .lang-item { + .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; @@ -716,27 +763,31 @@ gap: 0.625em; } - .lang-item:hover { + .header-lang-item:hover { background: #f3f4f6; color: #004bfa; } - .lang-item.active { + .header-lang-item.active { color: #004bfa; background: #f0f7ff; } - .lang-code { + .header-lang-code { font-weight: 500; min-width: 2.5em; + white-space:nowrap; } - .lang-name { + .header-lang-name { flex: 1; } - - .lang-dropdown-delete-icon, - .search-dropdown-delete-icon { + .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; @@ -746,7 +797,7 @@ } /* ========== 购买下拉框样式 ========== */ - .buy-dropdown { + .header-buy-dropdown { box-sizing: border-box; max-width: 1920px; width: 100%; @@ -762,12 +813,12 @@ padding: 3.5em 12.5em; } - .buy-dropdown.show { + .header-buy-dropdown.show { display: block; } /* 购买下拉框内容容器 - 居中显示,固定一行7个卡片 */ - .buy-dropdown-content { + .header-buy-dropdown-content { width: 100%; max-width: 1520px; margin: 0 auto; @@ -779,7 +830,7 @@ } /* 购买产品卡片:宽度96px,右边距动态计算 */ - .buy-product-card { + .header-buy-product-card { width: 96px; text-align: center; cursor: pointer; @@ -787,22 +838,22 @@ } - .buy-product-card:hover { + .header-buy-product-card:hover { transform: translateY(-2px) } /* 每行第7个卡片(一行最后一个)清除右边距 */ - .buy-product-card:nth-child(7n) { + .header-buy-product-card:nth-child(7n) { margin-right: 0; } - .buy-product-card a { + .header-buy-product-card a { text-decoration: none; display: block; } /* 图片容器:宽度100%,高度自适应,保持正方形比例 */ - .buy-product-img { + .header-buy-product-img { width: 100%; aspect-ratio: 1 / 1; background-color: #f5f5f5; @@ -815,7 +866,7 @@ } /* 图片样式:实现悬浮切换效果,完全填充容器 */ - .buy-product-img img { + .header-buy-product-img img { position: absolute; top: 0; left: 0; @@ -827,25 +878,25 @@ } /* 默认显示普通图,隐藏悬浮图 */ - .buy-product-img .default-img { + .header-buy-product-img .header-default-img { opacity: 1; } - .buy-product-img .hover-img { + .header-buy-product-img .header-hover-img { opacity: 0; } /* 鼠标悬停时:显示悬浮图,隐藏普通图 */ - .buy-product-card:hover .buy-product-img .default-img { + .header-buy-product-card:hover .header-buy-product-img .header-default-img { opacity: 0; } - .buy-product-card:hover .buy-product-img .hover-img { + .header-buy-product-card:hover .header-buy-product-img .header-hover-img { opacity: 1; } /* 产品标题样式:不加粗,字体大小16px,超出一行显示省略号 */ - .buy-product-title { + .header-buy-product-title { font-weight: normal; font-size: 1em; color: #1d1d1f; @@ -876,31 +927,31 @@ /* 1280px及以下屏幕,渐进式调整间距 */ @media screen and (max-width: 1280px) { - .log { + .header-log { margin-right: 2em; } - .nav-items { + .header-nav-items { margin-right: 1em; } - .nav-outer { + .header-nav-outer { padding: 0 12em; } - .dropdown-content { + .header-dropdown-content { padding: 0 12em; } - .dropdown-content1 { + .header-dropdown-content1 { padding: 0 12em; } - .buy-dropdown { + .header-buy-dropdown { padding: 3.5em 12em; } - .buy-dropdown-content { + .header-buy-dropdown-content { max-width: 1200px; row-gap: 100px; } @@ -908,23 +959,23 @@ /* 1152px及以下,进一步缩小 */ @media screen and (max-width: 1152px) { - .log { + .header-log { margin-right: 1em; } - .nav-outer { + .header-nav-outer { padding: 0 10em; } - .dropdown-content { + .header-dropdown-content { padding: 0 10em; } - .dropdown-content1 { + .header-dropdown-content1 { padding: 0 10em; } - .buy-dropdown { + .header-buy-dropdown { padding: 3.5em 10em; } @@ -936,68 +987,69 @@ /* 1080px及以下,最小间距 */ @media screen and (max-width: 1080px) { - .log { + .header-log { margin-right: 1em; } - .nav-outer { + .header-nav-outer { padding: 0 8em; } - .dropdown-content { + .header-dropdown-content { padding: 0 8em; } - .dropdown-content1 { + .header-dropdown-content1 { padding: 0 8em; } - .buy-dropdown { + .header-buy-dropdown { padding: 3.5em 8em; } - .buy-dropdown-content { + .header-buy-dropdown-content { max-width: 1000px; row-gap: 60px; } } +
-