/* ======================================== 📱 Orient Express 移动端优化样式 使用方法：在 base.html 的 中添加： 这个文件只在移动端生效，不会影响桌面端 ======================================== */ /* ======================================== 🎨 移动端设计系统变量 ======================================== */ @media (max-width: 768px) { :root { /* 温暖的主色调 */ --oe-primary: #C45C3E; --oe-primary-dark: #A84832; --oe-primary-light: #E67D5C; /* 强调色 */ --oe-accent: #D4A853; --oe-accent-light: #E8C878; /* 背景色 */ --oe-bg-cream: #FAF7F2; --oe-bg-warm: #F5EDE3; --oe-bg-card: #FFFFFF; /* 文字色 */ --oe-text-dark: #2C2520; --oe-text-body: #5C534D; --oe-text-muted: #9A928A; --oe-text-light: #C5BDB5; /* 边框 */ --oe-border: rgba(44, 37, 32, 0.08); --oe-border-strong: rgba(44, 37, 32, 0.15); /* 阴影 */ --oe-shadow-card: 0 2px 12px rgba(44, 37, 32, 0.06), 0 0 0 1px var(--oe-border); /* 圆角 */ --oe-radius-sm: 10px; --oe-radius-md: 14px; --oe-radius-lg: 20px; --oe-radius-xl: 28px; } } /* ======================================== 📱 移动端导航栏（从base.html迁移） ======================================== */ @media (max-width: 768px) { .navbar { background: var(--oe-bg-card) !important; border-bottom: 1px solid var(--oe-border) !important; position: relative !important; z-index: 100 !important; /* navbar高于内容，但低于下拉菜单 */ } .navbar-content { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-rows: auto auto !important; padding: 12px 16px !important; align-items: center !important; gap: 10px !important; max-width: 100% !important; box-sizing: border-box !important; } /* 第一行第一列：Logo */ .navbar-brand { grid-column: 1 !important; grid-row: 1 !important; } .navbar-brand a { flex-direction: row !important; gap: 6px !important; align-items: center !important; } .navbar-brand img { height: 36px !important; width: 36px !important; border-radius: 8px !important; flex-shrink: 0 !important; } .brand-text { writing-mode: horizontal-tb !important; font-size: 12px !important; font-weight: 500 !important; max-width: 120px !important; color: var(--oe-text-dark) !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* 第一行第三列：语言切换和登录按钮 */ .navbar-actions { grid-column: 3 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; gap: 8px !important; justify-self: end !important; } /* 第二行：搜索框占满整行 */ .navbar-search { grid-column: 1 / -1 !important; grid-row: 2 !important; display: block !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .search-input-wrapper { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .search-input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: var(--oe-bg-warm) !important; border: 1.5px solid transparent !important; border-radius: var(--oe-radius-lg) !important; padding: 14px 16px 14px 48px !important; font-size: 16px !important; } .search-input:focus { background: var(--oe-bg-card) !important; border-color: var(--oe-primary) !important; box-shadow: 0 0 0 4px rgba(196, 92, 62, 0.1) !important; } .search-icon { left: 18px !important; color: var(--oe-text-muted) !important; } /* 语言切换器 - 更紧凑 */ .language-switcher { background: var(--oe-bg-warm) !important; border-radius: 6px !important; padding: 2px !important; display: flex !important; gap: 0 !important; } .lang-btn { padding: 4px 6px !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 4px !important; min-width: 24px !important; text-align: center !important; } .lang-btn.active { background: var(--oe-bg-card) !important; color: var(--oe-text-dark) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; } /* 用户菜单按钮 */ .unified-menu-btn { width: 40px !important; height: 40px !important; } .unified-avatar { width: 40px !important; height: 40px !important; border-radius: 10px !important; } /* 用户下拉菜单 - 确保完整显示 */ .unified-dropdown { position: fixed !important; top: 70px !important; left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; max-height: calc(100vh - 100px) !important; overflow-y: auto !important; z-index: 999999 !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important; } /* 下拉菜单内容区 */ .unified-dropdown .dropdown-content { padding: 16px !important; } /* 用户信息区域 */ .unified-dropdown .user-info-section { padding: 16px !important; border-radius: 12px !important; } /* 登录按钮 - 更紧凑 */ .btn-login.elegant { padding: 6px 10px !important; font-size: 12px !important; border-radius: 8px !important; background: linear-gradient(135deg, var(--oe-primary) 0%, var(--oe-primary-dark) 100%) !important; box-shadow: 0 2px 6px rgba(196, 92, 62, 0.3) !important; } /* 隐藏登录按钮的图标，只显示文字 */ .btn-login.elegant svg { display: none !important; } /* 主内容区 */ .main-content { padding-top: 0 !important; position: relative !important; z-index: 1 !important; /* 低z-index确保下拉菜单在上面 */ } .index-container { margin-top: 0 !important; padding: 0 !important; position: relative !important; z-index: 1 !important; } .products-area { padding: 0 !important; margin: 0 !important; width: 100% !important; position: relative !important; z-index: 1 !important; } } /* ======================================== 📱 移动端页面背景 ======================================== */ @media (max-width: 768px) { /* 🔧 防止页面横向溢出 */ html, body { max-width: 100vw !important; overflow-x: hidden !important; } body { background: var(--oe-bg-cream) !important; } .main-content { padding: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; } .container { padding: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; } .index-container { max-width: 100vw !important; overflow-x: hidden !important; } } /* ======================================== 🏷️ 移动端促销标签栏重设计 ======================================== */ @media (max-width: 768px) { /* 显示移动端促销标签 */ .mobile-promo-tabs { display: block !important; background: var(--oe-bg-card) !important; border-bottom: 1px solid var(--oe-border) !important; padding: 8px 0 12px !important; margin: 0 !important; /* 🔧 移除负margin防止溢出 */ max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; position: relative !important; z-index: 10 !important; /* 低z-index确保下拉菜单在上面 */ } .promo-tabs-scroll { display: flex !important; gap: 8px !important; padding: 0 16px !important; overflow-x: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .promo-tabs-scroll::-webkit-scrollbar { display: none !important; } .promo-tab { display: flex !important; align-items: center !important; gap: 6px !important; padding: 10px 16px !important; background: var(--oe-bg-warm) !important; border-radius: var(--oe-radius-xl) !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; text-decoration: none !important; white-space: nowrap !important; } .promo-tab .tab-icon { font-size: 16px !important; } .promo-tab .tab-text { font-size: 14px !important; font-weight: 600 !important; color: var(--oe-text-body) !important; } .promo-tab.active { background: var(--oe-text-dark) !important; } .promo-tab.active .tab-text { color: white !important; } /* 隐藏左侧促销侧边栏（桌面端的） */ .promotions-sidebar-wrapper { display: none !important; } } /* ======================================== 🛒 移动端商品网格重设计 ======================================== */ @media (max-width: 768px) { .products-area { padding: 4px 2px !important; /* 最小边距 */ margin-left: 0 !important; position: relative !important; z-index: 1 !important; /* 低z-index确保下拉菜单在上面 */ } .products-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* 固定2列 */ gap: 4px !important; /* 最小间距 */ padding: 0 !important; /* 移除左右边距 */ position: relative !important; z-index: 1 !important; } } /* ======================================== 🎴 移动端商品卡片重设计 ======================================== */ @media (max-width: 768px) { .product-card { background: var(--oe-bg-card) !important; border-radius: var(--oe-radius-lg) !important; overflow: hidden !important; box-shadow: var(--oe-shadow-card) !important; border: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; flex-direction: column !important; position: relative !important; z-index: 1 !important; /* 低z-index确保下拉菜单在上面 */ } .product-card:hover { transform: none !important; box-shadow: var(--oe-shadow-card) !important; } .product-card:active { transform: scale(0.98) !important; } /* 促销商品边框 */ .product-card.has-promotion { border: 2px solid var(--oe-accent) !important; } /* 商品图片区域 - 白色背景 */ .product-image { background: #FFFFFF !important; border-radius: 0 !important; } .product-image img { padding: 12px !important; transition: transform 0.4s ease !important; background: #FFFFFF !important; } .product-card:active .product-image img { transform: scale(1.05) !important; } /* 促销徽章 */ .promotion-badge { top: 8px !important; left: 8px !important; padding: 5px 10px !important; background: linear-gradient(135deg, var(--oe-primary) 0%, var(--oe-primary-dark) 100%) !important; border-radius: 8px !important; font-size: 11px !important; box-shadow: 0 2px 8px rgba(196, 92, 62, 0.35) !important; } .promotion-badge.hot { background: linear-gradient(135deg, #E84855 0%, #D63447 100%) !important; animation: mobile-pulse-hot 2s ease-in-out infinite !important; } .promotion-badge.flash { background: linear-gradient(135deg, var(--oe-accent) 0%, var(--oe-accent-light) 100%) !important; } @keyframes mobile-pulse-hot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } /* 收藏按钮 */ .favorite-btn { top: 8px !important; right: 8px !important; width: 34px !important; height: 34px !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px) !important; border-radius: 50% !important; } .favorite-btn svg { width: 18px !important; height: 18px !important; color: var(--oe-text-muted) !important; } .favorite-btn.active svg { color: #E84855 !important; fill: #E84855 !important; } .favorite-btn:active { transform: scale(1.1) !important; } /* 商品信息区 */ .product-info { padding: 12px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } .product-name { font-size: 13px !important; font-weight: 600 !important; color: var(--oe-text-dark) !important; line-height: 1.35 !important; min-height: 35px !important; margin-bottom: 6px !important; } .product-barcode { font-size: 10px !important; color: var(--oe-text-light) !important; background: transparent !important; padding: 0 !important; margin-bottom: 10px !important; } } /* ======================================== 💰 移动端价格区域重设计 ======================================== */ @media (max-width: 768px) { .product-pricing { padding: 10px 12px !important; background: var(--oe-bg-warm) !important; border-radius: var(--oe-radius-md) !important; border: none !important; margin: auto 0 0 0 !important; } /* 价格数字 */ .price-value, .promotion-price { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: var(--oe-text-dark) !important; letter-spacing: -0.5px !important; } .price-value::before, .promotion-price::before { font-size: 14px !important; color: var(--oe-text-muted) !important; } /* 促销价格 */ .price-with-promotion .promotion-price { color: var(--oe-primary) !important; } /* 原价 */ .original-price { font-size: 13px !important; color: var(--oe-text-muted) !important; } /* 节省金额标签 */ .savings-badge { display: inline-flex !important; align-items: center !important; gap: 3px !important; padding: 4px 8px !important; background: rgba(232, 72, 85, 0.1) !important; color: #E84855 !important; border-radius: 6px !important; font-size: 10px !important; font-weight: 700 !important; margin-top: 6px !important; border: none !important; } } /* ======================================== 🛒 移动端购物车操作区重设计 ======================================== */ @media (max-width: 768px) { .cart-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px !important; border-top: 1px solid var(--oe-border) !important; background: transparent !important; gap: 4px !important; } /* 数量选择器 - 更紧凑 */ .quantity-selector { display: flex !important; align-items: center !important; gap: 0 !important; background: var(--oe-bg-warm) !important; border-radius: 6px !important; padding: 2px !important; flex: 1 !important; /* 填充剩余空间 */ } .qty-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--oe-bg-card) !important; border: 1px solid var(--oe-border-strong) !important; border-radius: 5px !important; color: var(--oe-text-body) !important; font-size: 16px !important; font-weight: 500 !important; padding: 0 !important; } .qty-btn:active { background: var(--oe-primary) !important; border-color: var(--oe-primary) !important; color: white !important; } .qty-input { width: 100% !important; min-width: 20px !important; flex: 1 !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; color: var(--oe-text-dark) !important; background: transparent !important; border: none !important; -moz-appearance: textfield !important; } .qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* 加入购物车按钮 - 只显示图标 */ .add-to-cart-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; padding: 0 !important; background: linear-gradient(135deg, var(--oe-primary) 0%, var(--oe-primary-dark) 100%) !important; color: white !important; border: none !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(196, 92, 62, 0.3) !important; flex-shrink: 0 !important; } /* 隐藏按钮文字 */ .add-to-cart-btn span, .add-to-cart-btn .btn-text { display: none !important; } .add-to-cart-btn:active { transform: scale(0.95) !important; box-shadow: 0 2px 8px rgba(196, 92, 62, 0.4) !important; } .add-to-cart-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } } /* ======================================== 📄 移动端分页器重设计 ======================================== */ @media (max-width: 768px) { .pagination { flex-direction: column !important; gap: 12px !important; padding: 24px 16px 32px !important; } .pagination-info { font-size: 13px !important; color: var(--oe-text-muted) !important; } .pagination-controls { gap: 6px !important; } .pagination-btn, .pagination-number { min-width: 40px !important; height: 40px !important; padding: 0 14px !important; background: var(--oe-bg-card) !important; border: 1px solid var(--oe-border-strong) !important; border-radius: var(--oe-radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--oe-text-body) !important; } .pagination-number.active { background: var(--oe-text-dark) !important; border-color: var(--oe-text-dark) !important; color: white !important; } } /* ======================================== 🛒 移动端浮动购物车按钮重设计 使用更高优先级确保显示 ======================================== */ @media (max-width: 768px) { /* 确保浮动购物车显示 - 高优先级选择器 */ button.floating-cart-btn, .floating-cart-btn, #floatingCart { display: flex !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; bottom: 24px !important; right: 16px !important; width: 60px !important; height: 60px !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #2C2520 0%, #1a1512 100%) !important; border: none !important; border-radius: 50% !important; box-shadow: 0 4px 20px rgba(44, 37, 32, 0.4) !important; cursor: pointer !important; z-index: 99999 !important; /* 超高z-index */ transition: all 0.3s ease !important; pointer-events: auto !important; } button.floating-cart-btn:active, .floating-cart-btn:active, #floatingCart:active { transform: scale(0.92) !important; } button.floating-cart-btn svg, .floating-cart-btn svg, #floatingCart svg { width: 26px !important; height: 26px !important; color: white !important; display: block !important; } .floating-cart-btn .cart-badge, #floatingCart .cart-badge, #cartBadge { position: absolute !important; top: -4px !important; right: -4px !important; min-width: 22px !important; height: 22px !important; padding: 0 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #C45C3E !important; color: white !important; border-radius: 11px !important; font-family: 'DM Sans', -apple-system, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(196, 92, 62, 0.4) !important; } } /* ======================================== 📱 移动端购物车面板优化 ======================================== */ @media (max-width: 768px) { .cart-panel-content { width: 100% !important; max-width: 100vw !important; border-radius: 20px 20px 0 0 !important; } .cart-header-top { padding: 16px 20px !important; } .cart-title { font-size: 18px !important; font-weight: 700 !important; color: var(--oe-text-dark) !important; } .cart-summary-fixed { background: white !important; padding: 14px 20px 16px !important; border-bottom: 2px solid var(--oe-border) !important; } .summary-label { color: var(--oe-text-dark) !important; font-size: 16px !important; font-weight: 600 !important; } .summary-value { color: var(--oe-primary) !important; font-size: 32px !important; font-weight: 700 !important; } /* 购物车商品卡片 */ .cart-item-card { background: white !important; border-radius: 12px !important; padding: 14px !important; margin-bottom: 10px !important; box-shadow: 0 2px 8px rgba(44, 37, 32, 0.04) !important; border: 1px solid var(--oe-border) !important; } .cart-item-name { font-size: 15px !important; font-weight: 600 !important; color: var(--oe-text-dark) !important; } .cart-item-price, .cart-item-total-price { color: var(--oe-text-dark) !important; font-size: 18px !important; font-weight: 700 !important; } /* 底部按钮 */ .cart-footer { padding: 16px 20px 24px !important; gap: 10px !important; } .btn-cart-action { border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; } .btn-clear { background: var(--oe-bg-warm) !important; color: var(--oe-text-dark) !important; } .btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important; box-shadow: 0 3px 12px rgba(37, 211, 102, 0.3) !important; } } /* ======================================== ✨ 移动端动画效果 ======================================== */ @media (max-width: 768px) { @keyframes mobileCardFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .product-card { animation: mobileCardFadeIn 0.4s ease both; } .product-card:nth-child(1) { animation-delay: 0.05s; } .product-card:nth-child(2) { animation-delay: 0.1s; } .product-card:nth-child(3) { animation-delay: 0.15s; } .product-card:nth-child(4) { animation-delay: 0.2s; } .product-card:nth-child(5) { animation-delay: 0.25s; } .product-card:nth-child(6) { animation-delay: 0.3s; } .product-card:nth-child(7) { animation-delay: 0.35s; } .product-card:nth-child(8) { animation-delay: 0.4s; } } /* ======================================== 🔧 移动端搜索结果提示 ======================================== */ @media (max-width: 768px) { .search-results-banner { margin: 0 !important; padding: 10px 12px !important; background: var(--oe-bg-card) !important; border-bottom: 1px solid var(--oe-border) !important; border-radius: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .search-results-info { font-size: 13px !important; color: var(--oe-text-body) !important; flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .clear-search { padding: 5px 10px !important; background: var(--oe-bg-warm) !important; border-radius: 6px !important; font-size: 12px !important; color: var(--oe-text-dark) !important; flex-shrink: 0 !important; white-space: nowrap !important; } } /* ======================================== 📱 平板适配 (480px - 768px) 保持2列，只优化字体大小 ======================================== */ @media (min-width: 480px) and (max-width: 768px) { .product-name { font-size: 14px !important; min-height: 38px !important; } .price-value, .promotion-price { font-size: 20px !important; } }