/* ============================================================ h5-price 页面 UI 优化样式 包含：首页优化 + 计算器结果页优化 使用方式：在页面 中引入本 CSS 文件 ============================================================ */ /* ========== 首页优化 ========== */ /* 主按钮优化 */ #go, button#go { border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; min-height: 48px !important; padding: 0 24px !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important; transition: all 0.2s ease !important; } #go:hover, button#go:hover { box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important; transform: translateY(-1px) !important; } /* 输入框优化 - 去滚动条 */ #q, textarea#q { overflow: hidden !important; resize: none !important; min-height: 48px !important; font-size: 14px !important; border-radius: 12px !important; } /* chip 内边距优化 */ .chip { padding: 14px 12px 10px !important; } .chip-icon { width: 72px !important; height: 72px !important; overflow: visible !important; } .chip-icon img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } .chip-label { font-size: 13px !important; font-weight: 500 !important; } /* 卡片统一圆角 */ .card { border-radius: 16px !important; } /* 使用声明压缩 */ .card-notice p, .card-notice .content { font-size: 12px !important; line-height: 1.6 !important; opacity: 0.8 !important; } /* ========== 计算器结果页优化 ========== */ /* P0-1: 医疗机构层级选中态突出 */ .tier-cell { transition: all 0.2s ease; border-radius: 12px !important; } .tier-cell.active { background: #eff6ff !important; border-color: #2563eb !important; } .tier-cell.active .tier-label { color: #2563eb !important; font-weight: 600 !important; } /* P0-2: 费用明细加分隔线 */ .calc-row { border-bottom: 1px solid #f1f5f9 !important; padding-bottom: 16px !important; margin-bottom: 16px !important; } .calc-row:last-child { border-bottom: none !important; margin-bottom: 0 !important; } /* P0-3: 合计行加粗加背景 */ .calc-row-total { background: #f0f7ff !important; border-radius: 12px !important; padding: 16px 18px !important; margin-top: 8px !important; border-bottom: none !important; border-top: 2px solid #2563eb !important; } .calc-row-total .calc-row-name { font-size: 18px !important; font-weight: 700 !important; color: #1e3a5f !important; } .calc-row-total .calc-row-amt { font-size: 22px !important; font-weight: 700 !important; color: #2563eb !important; } /* P0-4: 复选框自定义样式 */ .calc-opt input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 22px !important; height: 22px !important; border: 2px solid #cbd5e1 !important; border-radius: 6px !important; cursor: pointer !important; position: relative !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .calc-opt input[type="checkbox"]:checked { background: #2563eb !important; border-color: #2563eb !important; } .calc-opt input[type="checkbox"]:checked::after { content: "" !important; position: absolute !important; left: 6px !important; top: 2px !important; width: 6px !important; height: 11px !important; border: solid white !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; } .calc-opt { border-radius: 12px !important; transition: all 0.2s ease !important; } .calc-opt:hover { background: #f8fafc !important; } /* P1-5: 下拉框样式优化 */ .calc-select { border-radius: 12px !important; border: 1px solid #cbd5e1 !important; background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232563EB' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center !important; padding: 10px 36px 10px 14px !important; font-size: 14px !important; color: #1e3a5f !important; cursor: pointer !important; transition: all 0.2s ease !important; } .calc-select:hover { border-color: #2563eb !important; } .calc-select:focus { outline: none !important; border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } /* P1-7: 分享按钮改填充 */ .share-btn { background: linear-gradient(135deg, #2563eb, #3b82f6) !important; color: white !important; border: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; padding: 14px 24px !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important; transition: all 0.2s ease !important; cursor: pointer !important; } .share-btn:hover { box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important; transform: translateY(-1px) !important; } /* P2-10: 备注框加左侧竖线 */ .calc-row-note { border-left: 3px solid #93c5fd !important; background: #f8fafc !important; padding: 10px 14px !important; border-radius: 0 8px 8px 0 !important; font-size: 12px !important; color: #64748b !important; line-height: 1.6 !important; margin-top: 8px !important; } /* P2-9: 层级说明文字 */ .calc-hint { display: block !important; text-align: center !important; margin-top: 10px !important; font-size: 12px !important; color: #94a3b8 !important; } /* 医保/自费标签样式 */ .insurance-tag { display: inline-block !important; padding: 2px 8px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; margin-left: 8px !important; vertical-align: middle !important; } .insurance-tag.jia { background: #ecfdf5 !important; color: #059669 !important; } .insurance-tag.yi { background: #fffbeb !important; color: #d97706 !important; } /* 总费用区间提示 */ .total-range-hint { display: block !important; text-align: center !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.85) !important; margin-top: 6px !important; } /* 回到顶部按钮 */ .back-to-top { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #2563eb !important; color: white !important; border: none !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important; cursor: pointer !important; display: none !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; z-index: 9999 !important; transition: all 0.2s ease !important; } .back-to-top:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5) !important; } .back-to-top.show { display: flex !important; } /* 三点说明图标间距 */ .three-points-item { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin-bottom: 8px !important; } .three-points-icon { flex-shrink: 0 !important; font-size: 16px !important; }