/* * ============================================================================= * 华南森孚贸易有限公司 - 图片资源样式文件 * ============================================================================= * 文件说明:专门管理全站所有图片资源的显示样式和背景图定义 * 命名规范:BEM 命名法(Block Element Modifier) * 单位策略:布局/间距/字体统一使用 px,确保精确控制 * 图片规范: * - 内容图片通过标签引入,显示样式由本文件控制 * - 装饰性图片(如 Logo、背景图)使用 CSS 背景图实现 * - 为不同类型的图片创建专门的 CSS 类,确保样式一致性 * * Logo 管理规范: * - 导航栏图形 Logo:通过 .logo-icon 类统一管理,使用 hn-logo-trans.png * - 网站 Favicon:需在每个 HTML 文件的 中引用 hn-logo-low.jpg * (注:Favicon 为 HTML 标准要求,无法通过 CSS 引入) * ============================================================================= */ /* ----------------------------------------------------------------------------- * 1. 通用图片容器样式 * 功能:定义产品卡片、案例展示等场景的图片容器基础样式 * -------------------------------------------------------------------------- */ /* 产品卡片图片容器统一样式 */ .card-image { width: 100%; /* 宽度:占满卡片 */ height: 160px; /* 高度:固定 200px */ background-size: cover; /* 背景尺寸:覆盖整个容器 */ background-position: center; /* 背景位置:居中 */ background-repeat: no-repeat; /* 不重复平铺 */ } /* 产品卡片图片容器 - 用于包裹产品图片 */ .product-card-image { width: 100%; /* 宽度:占满卡片容器 */ height: 180px; /* 高度:180px,提供足够的产品展示空间 */ background-size: cover; /* 背景尺寸:覆盖整个容器 */ background-position: center; /* 背景位置:居中 */ background-repeat: no-repeat; /* 不重复平铺 */ } /* ----------------------------------------------------------------------------- * 2. Logo 图片样式 - 导航栏图形 Logo * 功能:公司 Logo 图形元素的显示控制 * 规范:装饰性图片,使用 CSS 背景图实现 * 文件:使用 hn-logo-trans.png(透明背景 Logo) * 注意:Favicon(hn-logo-low.jpg)需在 HTML 中引用,无法通过 CSS 管理 * -------------------------------------------------------------------------- */ /* 图形 Logo 容器 - 导航栏左侧图标 */ .logo-icon { height: 40px; /* 高度:40px,与导航栏高度协调 */ width: 40px; /* 宽度:40px,正方形比例 */ background-image: url('/images/hn-logo_bg-trans.webp'); /* 背景图:透明 PNG Logo */ background-size: contain; /* 背景尺寸:完整显示,保持宽高比 */ background-repeat: no-repeat; /* 不重复平铺 */ background-position: center; /* 居中显示 */ flex-shrink: 0; /* Flex 布局中不收缩,防止变形 */ display: block; /* 块级显示,确保尺寸生效 */ } /* ----------------------------------------------------------------------------- * 3. 首页产品卡片背景图样式 * 功能:为首页产品展示区的不同产品分类定义背景图片 * 规范:遵循图片资源管理规范,装饰性图片使用 CSS 背景 * -------------------------------------------------------------------------- */ /* 工业润滑油卡片背景 */ .card-img-industrial { background-image: url('/images/card-img/unsplash_martin-martz_factory_29PaIGCEq10.webp'); } /* 车用润滑油卡片背景 */ .card-img-automotive { background-image: url('/images/card-img/p_huan-you_01.webp'); } /* 商用车润滑油卡片背景 */ .card-img-commercial { background-image: url('/images/card-img/unsplash_green-and-white-vintage-truck-arotxe540N4.webp'); } /* 特种润滑油卡片背景 */ .card-img-special { background-image: url('/images/card-img/unsplash_mina-rad_product-line_GiuvVfcNFzY.webp'); } /* ----------------------------------------------------------------------------- * 4. 工业润滑油分类卡片背景图 * 功能:为工业润滑油子分类定义专用背景图 * -------------------------------------------------------------------------- */ /* 液压油分类卡片背景 */ .card-img-hydraulic { background-image: url('/images/card-img/p_ye-ya_01.webp'); } /* 齿轮油分类卡片背景 */ .card-img-gear { background-image: url('/images/card-img/p_chi-lun-you_01.webp'); } /* 轴承油分类卡片背景 */ .card-img-bearing { background-image: url('/images/card-img/p_zhou-cheng_01.webp'); } /* 没找到想要的产品的卡片背景 */ .card-img-aviation { background-image: url('/images/card-img/help-desks.webp'); } /* 默认通用产品卡片背景 */ .card-img-product-default { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* ----------------------------------------------------------------------------- * 4.1 液压油系列产品背景图 * 功能:为液压油产品系列的不同类型定义专用背景图 * 规范:装饰性图片,使用 CSS 背景图实现,便于统一控制 * -------------------------------------------------------------------------- */ /* 美孚 DTE®20UT 长效液压油 */ .card-img-hydraulic-1 { background-image: url('/images/products/mobil_dte-25-ut.webp'); } /* 美孚 DTE® 10 超凡系列 */ .card-img-hydraulic-2 { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* 美孚力图 H(Nuto H) 系列 */ .card-img-hydraulic-3 { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* 美孚 SHC 系列 */ .card-img-hydraulic-4 { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* 液压油应用场景 - 工业 */ .card-img-hydraulic-5 { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* 液压油应用场景 - 移动设备 */ .card-img-hydraulic-6 { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* ----------------------------------------------------------------------------- * 4.5 幻灯片通用图片占位图 * 功能:为产品详情页幻灯片提供通用图片资源 * 说明:实际使用时应替换为真实的产品图片 * -------------------------------------------------------------------------- */ /* 工业应用场景图片 */ .application-industrial { background-image: url('/images/gallary/hnsf_warehouse_01.webp'); } /* 产品特性详情图片 */ .feature-detail { background-image: url('/images/gallary/hnsf_jianbei_01.webp'); } /* 18L 包装展示图片 */ .packaging-18L { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* 技术认证图片 */ .certification { background-image: url('/images/gallary/hnsf_guanghai_01.webp'); } /* 客户案例图片 */ .customer-case { background-image: url('/images/gallary/hnsf_warehouse_01.webp'); } /* ----------------------------------------------------------------------------- * 5. 车用润滑油分类卡片背景图 * 功能:为车用润滑油子分类定义专用背景图 * -------------------------------------------------------------------------- */ /* 发动机油分类卡片背景 */ .card-img-engine { background-image: url('/images/products/Engine+Oil'); } /* 变速箱油分类卡片背景 */ .card-img-transmission { background-image: url('/images/products/Transmission+Oil'); } /* 刹车油分类卡片背景 */ .card-img-brake { background-image: url('/images/products/Brake+Fluid'); } /* ----------------------------------------------------------------------------- * 6. 案例卡片背景图样式 * 功能:为案例资讯页面的合作案例卡片定义背景图片 * 规范:装饰性图片,使用 CSS 背景图实现,便于统一控制 * -------------------------------------------------------------------------- */ /* 新年贺图案例卡片背景 */ .case-img-newyear { background-image: url('/images/cases/hnsf_2026-new-year-banner_01.webp'); } /* 工厂案例卡片背景 */ .case-img-factory { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* 运输公司案例卡片背景 */ .case-img-transport { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* 矿山案例卡片背景 */ .case-img-mining { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* ----------------------------------------------------------------------------- * 7. Hero 区域背景图 * 功能:页面顶部 Hero 横幅区域的背景图管理 * 注:当前未使用背景图,使用纯色背景 * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * 8. 联系信息二维码样式 * 功能:微信公众号、小程序等二维码的背景图管理 * 规范:装饰性图片,使用 CSS 背景图实现,便于统一控制尺寸和显示效果 * -------------------------------------------------------------------------- */ /* 微信公众号二维码背景 */ .qr-wechat-official { background-image: url('/images/contact/qrcode_vx-plat_bg-white.webp'); } /* 微信小程序二维码背景 */ .qr-wechat-miniprogram { background-image: url('/images/contact/qrcode_vx-miniprog_bg-white.webp'); } /* ----------------------------------------------------------------------------- * 9. 公司风采图片样式 * 功能:为公司图片展示区域的照片定义统一的显示样式 * 规范:装饰性图片,使用 CSS 背景图实现,便于统一控制尺寸和显示效果 * 策略:提取公共样式到基类,减少代码冗余 * -------------------------------------------------------------------------- */ /* 公司外观照片 */ .company-photo-building-1 { /* 继承 .company-photo-img 的所有样式 */ background-image: url('/images/gallary/hnsf_jianbei_01.webp'); /* 背景图:公司大楼外观 */ } .company-photo-building-2 { background-image: url('/images/gallary/hnsf_guanghai_01.webp'); } /* 办公环境照片 */ .company-photo-office { /* 继承 .company-photo-img 的所有样式 */ background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); /* 背景图:现代化办公环境 */ } /* 团队合影照片 */ .company-photo-team { /* 继承 .company-photo-img 的所有样式 */ background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); /* 背景图:专业团队合影 */ } /* 仓储设施照片 */ .company-photo-warehouse-1 { /* 继承 .company-photo-img 的所有样式 */ background-image: url('/images/gallary/hnsf_warehouse_01.webp'); /* 背景图:仓储物流设施 */ } /* ----------------------------------------------------------------------------- * 10. 旗舰店照片样式 * 功能:为旗舰店展示区域的照片定义统一的显示样式 * 规范:装饰性图片,使用 CSS 背景图实现,便于统一控制尺寸和显示效果 * -------------------------------------------------------------------------- */ /* 旗舰店(预留) */ .store-flagship { background-image: url('/images/stores/store_flagship.jpg'); } /* ----------------------------------------------------------------------------- * 11. 联系页面门店照片样式 * 功能:为联系页面门店信息卡片中的照片定义统一的显示样式 * 规范:装饰性图片,使用 CSS 背景图实现,便于统一控制尺寸和显示效果 * -------------------------------------------------------------------------- */ /* 健北店照片 */ .store-photo-jianbei { background-image: url('/images/gallary/hnsf_jianbei_01.webp'); } /* 广海店照片 */ .store-photo-guanghai { background-image: url('/images/gallary/hnsf_guanghai_01.webp'); } /* 南丰店照片 */ .store-photo-nanfeng { background-image: url('/images/hn-senfu-logo_2_white-bg.webp'); } /* ----------------------------------------------------------------------------- * 美孚黑霸王™工程机械专用发动机油CH-4产品图 * -------------------------------------------------------------------------- */ .card-img-mobil-delvac-constr-ch4-15w-40-18l { background-image: url('/images/products/mobil_delvac-constr-ch4-15w-40_18l.webp'); }