修信诚信维修-手机平板寄修服务HTML网页（大气磅礴+动态特效+全端自适应）

本次设计打造大气商务科技风，融入滚动渐入、悬停动效、标题流光、背景渐变等动态效果，采用黑金蓝高级配色+分层卡片布局，页面首尾做视觉强化设计，全程保留所有核心文案内容，同时做到PC端大屏大气舒展、手机端H5适配流畅，代码无外部依赖，可直接复制保存为.html文件使用，所有动态效果原生CSS实现，加载速度快且兼容性强。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>修信诚信维修-手机平板寄修服务</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
        }
        /* 全局变量：定义主色调、辅助色，方便统一修改 */
        :root {
            --main-color: #165DFF;
            --second-color: #0A2463;
            --gold-color: #FFB800;
            --bg-color: #F8F9FA;
            --card-bg: #FFFFFF;
            --text-main: #333333;
            --text-second: #666666;
            --text-light: #999999;
            --shadow: 0 8px 24px rgba(16, 30, 54, 0.08);
            --shadow-hover: 0 12px 32px rgba(16, 30, 54, 0.12);
            --transition: all 0.5s ease;
            --transition-fast: all 0.3s ease;
        }
        /* 页面基础样式：渐变背景，最小高度100vh，滚动平滑 */
        body {
            background: linear-gradient(180deg, var(--bg-color) 0%, #F0F4FF 100%);
            color: var(--text-main);
            line-height: 1.8;
            font-size: 15px;
            overflow-x: hidden;
            scroll-behavior: smooth;
            padding: 0;
            margin: 0;
        }
        /* 顶部通栏：首屏视觉强化，渐变背景+流光标题，适配全端 */
        .top-banner {
            width: 100%;
            background: linear-gradient(90deg, var(--second-color) 0%, var(--main-color) 100%);
            padding: 40px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        /* 通栏装饰光点：动态漂浮，增加氛围感 */
        .top-banner::before, .top-banner::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 8s infinite ease-in-out;
        }
        .top-banner::before {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }
        .top-banner::after {
            bottom: 10%;
            right: 5%;
            animation-delay: 4s;
        }
        /* 主标题：流光渐变+加粗，首屏核心视觉 */
        .main-title {
            font-size: 28px;
            font-weight: 800;
            color: #FFFFFF;
            margin-bottom: 12px;
            position: relative;
            z-index: 2;
            background: linear-gradient(90deg, #FFFFFF, var(--gold-color));
            -webkit-background-clip: text;
            background-clip: text;
            animation: light 3s infinite linear;
        }
        /* 副标题：白色浅调，衬托主标题 */
        .banner-subtitle {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            z-index: 2;
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }
        /* 主容器：PC端定宽居中，手机端100%，内边距自适应 */
        .main-container {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 40px 20px;
        }
        /* 卡片模块：核心内容载体，白色背景+圆角+阴影，悬停上浮 */
        .card {
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 30px;
            margin-bottom: 30px;
            transition: var(--transition);
            opacity: 0;
            transform: translateY(30px);
        }
        /* 滚动渐入动效：初始隐藏，滚动后显示+上移 */
        .card.animate {
            opacity: 1;
            transform: translateY(0);
        }
        /* 卡片悬停：上浮+阴影加深，增加交互感 */
        .card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }
        /* 板块标题：左侧蓝金竖线+主色调，字体加粗，间距优化 */
        .section-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--second-color);
            margin: 0 0 20px 0;
            padding-left: 15px;
            border-left: 4px solid linear-gradient(180deg, var(--gold-color) 0%, var(--main-color) 100%);
            border-left: 4px solid var(--main-color);
            line-height: 1.5;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        /* 板块标题图标：放大，增加视觉层次 */
        .section-title span {
            font-size: 24px;
        }
        /* 子板块标题：金色+加粗，区分层级 */
        .sub-section-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--gold-color);
            margin: 25px 0 15px 0;
            line-height: 1.5;
        }
        /* 普通段落：行高优化，颜色适配，间距均匀 */
        p {
            margin: 12px 0;
            color: var(--text-main);
            font-size: 15px;
        }
        /* 有序列表：缩进优化，符号颜色主色调，间距均匀 */
        ol {
            margin: 10px 0 10px 40px;
            list-style: decimal;
        }
        /* 无序列表：自定义圆点，主色调，缩进优化 */
        ul {
            margin: 10px 0 10px 40px;
            list-style: none;
        }
        ul li::before {
            content: '●';
            color: var(--main-color);
            font-size: 12px;
            margin-left: -20px;
            display: inline-block;
            width: 20px;
            text-align: center;
        }
        /* 列表项：悬停文字变色，增加交互 */
        li {
            margin: 10px 0;
            font-size: 15px;
            line-height: 1.8;
            transition: var(--transition-fast);
        }
        li:hover {
            color: var(--main-color);
            padding-left: 5px;
        }
        /* 重点内容：主色调+加粗，部分核心规则金色高亮 */
        strong {
            color: var(--main-color);
            font-weight: 700;
        }
        .key-strong {
            color: var(--gold-color);
            font-weight: 800;
        }
        /* 底部通栏：尾屏视觉强化，渐变背景+号召性文字，与顶部呼应 */
        .bottom-banner {
            width: 100%;
            background: linear-gradient(90deg, var(--main-color) 0%, var(--second-color) 100%);
            padding: 50px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
            margin-top: 20px;
            border-radius: 0 0 16px 16px;
        }
        /* 底部装饰光点：与顶部一致，动态漂浮 */
        .bottom-banner::before, .bottom-banner::after {
            content: '';
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 10s infinite ease-in-out;
        }
        .bottom-banner::before {
            bottom: 10%;
            left: 10%;
            animation-delay: 2s;
        }
        .bottom-banner::after {
            top: 10%;
            right: 10%;
            animation-delay: 6s;
        }
        /* 底部标题：白色+加粗，流光效果 */
        .bottom-title {
            font-size: 26px;
            font-weight: 800;
            color: #FFFFFF;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }
        /* 底部号召文字：白色浅调，大字体，行高优化 */
        .bottom-desc {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.95);
            max-width: 900px;
            margin: 0 auto 20px auto;
            z-index: 2;
            position: relative;
            line-height: 1.8;
        }
        /* 底部强调文字：金色+加粗 */
        .bottom-key {
            color: var(--gold-color);
            font-weight: 800;
            font-size: 18px;
        }
        /* 动态效果：流光、漂浮、渐变 */
        @keyframes light {
            0% {
                background-position: 0 0;
            }
            50% {
                background-position: 100% 0;
            }
            100% {
                background-position: 0 0;
            }
        }
        @keyframes float {
            0% {
                transform: translate(0, 0) scale(1);
            }
            50% {
                transform: translate(20px, -20px) scale(1.1);
            }
            100% {
                transform: translate(0, 0) scale(1);
            }
        }
        /* PC端大屏优化：字体放大，间距舒展 */
        @media (min-width: 1024px) {
            .main-title {
                font-size: 36px;
            }
            .banner-subtitle {
                font-size: 18px;
            }
            .section-title {
                font-size: 24px;
            }
            .sub-section-title {
                font-size: 20px;
            }
            p, li {
                font-size: 16px;
            }
            .bottom-title {
                font-size: 32px;
            }
            .bottom-desc {
                font-size: 18px;
            }
            .bottom-key {
                font-size: 20px;
            }
        }
        /* 平板端适配：缩减小间距，字体适中 */
        @media (max-width: 1023px) and (min-width: 768px) {
            .top-banner {
                padding: 30px 20px;
            }
            .main-title {
                font-size: 30px;
            }
            .main-container {
                padding: 30px 20px;
            }
            .card {
                padding: 25px;
            }
            .bottom-banner {
                padding: 40px 20px;
            }
        }
        /* 手机端H5适配：极致压缩间距，字体适配小屏，取消多余动效 */
        @media (max-width: 767px) {
            .top-banner {
                padding: 25px 15px;
            }
            .main-title {
                font-size: 22px;
            }
            .banner-subtitle {
                font-size: 14px;
            }
            .main-container {
                padding: 20px 15px;
            }
            .card {
                padding: 20px 15px;
                margin-bottom: 20px;
            }
            .section-title {
                font-size: 18px;
            }
            .sub-section-title {
                font-size: 16px;
            }
            p, li {
                font-size: 14px;
                line-height: 1.7;
            }
            ol, ul {
                margin-left: 25px;
            }
            .bottom-banner {
                padding: 30px 15px;
            }
            .bottom-title {
                font-size: 20px;
            }
            .bottom-desc {
                font-size: 15px;
            }
            .bottom-key {
                font-size: 16px;
            }
            /* 手机端取消漂浮动效，提升流畅度 */
            .top-banner::before, .top-banner::after, .bottom-banner::before, .bottom-banner::after {
                animation: none;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部首屏通栏：大气渐变+动态流光，视觉核心 -->
    <div class="top-banner">
        <h1 class="main-title">修信诚信维修 - 手机平板寄修专属服务</h1>
        <p class="banner-subtitle">AI统一定价 | 快递免费往返 | 地址灵活修改 | 1-12个月阶梯质保 | 物流保价护航 | 7×24小时AI客服</p>
    </div>

    <!-- 主内容容器：卡片式布局，滚动渐入动效 -->
    <div class="main-container">
        <!-- 核心宣传语卡片 -->
        <div class="card">
            <h2 class="section-title"><span>📱</span>手机平板坏了不用跑！修信寄修，居家坐等修好，全程无套路更安心💯</h2>
            <p>手机碎屏、平板卡顿、电池不耐用？出门修要排队、请假费时间😮‍💨，现场修怕看人报价，寄修又怕地址受限、质保太短、费用暗藏猫腻？</p>
            <p>选修信诚信维修纯寄修服务，快递往返物流费全含🚚，地址可随时修改，居家、单位、学校、出差地都能灵活适配。AI系统统一报价无人工干预🤖，检测、维修、配件费清晰列明，配件分原装、组装按需选，维修质保保底1个月、可延保至12个月，所有费用透明无隐藏，快修低价还靠谱，修机全程不折腾！</p>
        </div>

        <!-- 10大核心优势卡片 -->
        <div class="card">
            <h2 class="section-title"><span>✨</span>选择修信寄修，10大核心优势，件件解决你的寄修顾虑✅</h2>
            <ol>
                <li><strong>足不出户，快递免费往返取送🚚</strong><br>无需跑门店、不用排长队，来去物流费全包含，快递免费上门取件，维修完成后免费寄回，居家坐等设备修好签收，省时又省力。</li>
                <li><strong>地址灵活，随心修改无限制📍</strong><br>预约取件后，临时出差、上班、返校均可联系客服修改取件或寄回地址，单位、学校、出差地都能正常寄取，不用为修机特意调整行程。</li>
                <li><strong>AI系统报价，拒绝看人要价🤖</strong><br>无人工干预报价，AI系统根据设备型号、故障类型精准定价，所有费用一次性列明，无看人要价、无私下加价，童叟无欺更诚信。</li>
                <li><strong>阶梯式质保，1-12个月自选，费用透明递增⏳</strong><br>维修质保保底1个月，基础维修默认包含，无额外费用，可自选延保至2-12个月，延保费用按月份透明递增，按需选择不花冤枉钱。</li>
                <li><strong>维修高效，时效全程透明⚡</strong><br>收件后24小时内完成专业检测，常规故障48小时内完成维修，复杂故障会提前主动沟通说明，修完立即寄回，比线下门店省一半时间。</li>
                <li><strong>专业资深团队，配件分档可选，品质可控🔧</strong><br>维修师傅均5年以上行业经验，精通各品牌手机、平板各类故障维修；配件分原装、组装两类，明码标价、按需选择，拒绝翻新、劣质配件。</li>
                <li><strong>费用清晰列明，无任何隐形消费💰</strong><br>AI报价一次性列明各项费用，往返物流费全免，<span class="key-strong">检测费确认维修即免、拒绝维修按标支付</span>，无任何隐藏收费、捆绑消费，消费明明白白。</li>
                <li><strong>隐私+资金，双重保障更放心🔒</strong><br>设备全程专人保管，拆机、检测、维修全程录像留证；严格保密手机内照片、通讯录、支付信息等隐私，先报价后维修，确认方案再付款，资金安全零风险。</li>
                <li><strong>全程可查，设备&费用状态一目了然📊</strong><br>设备物流轨迹、检测结果、维修进度，以及各项费用明细、质保档位，均实时在线可查，不用反复追问客服，全程状态一手掌握。</li>
                <li><strong>7×24小时AI智能客服，秒响应无延时💬</strong><br>售前咨询、AI报价、地址修改、进度查询、费用配件答疑，AI客服全天在线秒解答，人工客服兜底跟进，有问必答不拖延。</li>
            </ol>
        </div>

        <!-- 费用明细卡片 -->
        <div class="card">
            <h2 class="section-title"><span>💰</span>修信寄修「费用明细」，一次性讲清，无任何隐藏🙅‍♂️</h2>
            <h3 class="sub-section-title">📌已包含费用（无额外收取）</h3>
            <ul>
                <li>物流费：设备维修全程来去快递费，无需客户垫付、无需额外支付🚚</li>
                <li>物流保价费：全程统一购买物流保价，保障运输安全，客户不花一分钱🛡️</li>
                <li>检测费：确认维修即免费，专业故障检测、排查全包含🔍</li>
            </ul>
            <h3 class="sub-section-title">📌按需支付费用（AI报价精准核算，分档可选）</h3>
            <ul>
                <li>维修费：按设备故障、维修工艺统一定价，无浮动、无私下加价🔧</li>
                <li>配件费：分原装、组装两类，明码标价、品质不同价格不同，自主选择不强制🔩</li>
                <li>延保费：基础1个月质保外的延保服务，1-12个月阶梯式定价，透明递增⏳</li>
                <li>检测费：仅检测后客户<span class="key-strong">拒绝维修</span>时，按系统公示标准支付，价格统一无隐形🔍</li>
            </ul>
        </div>

        <!-- 物流保价赔偿说明卡片 -->
        <div class="card">
            <h2 class="section-title"><span>📦</span>物流保价&运输赔偿说明，安全有保障💪</h2>
            <p>所有寄修设备均由我方统一购买物流保价服务，客户无需额外支付保价费用🚫💸。</p>
            <p>若运输途中发生设备<span class="key-strong">丢失、损毁、破损</span>等情况，由<span class="key-strong">合作物流公司按保价金额全额赔偿</span>，我方全程协助对接理赔事宜，不推诿、不敷衍，保障客户权益不受任何损失💰。</p>
        </div>

        <!-- 寄修3步走卡片 -->
        <div class="card">
            <h2 class="section-title"><span>📝</span>寄修3步走，简单易操作，小白也能轻松搞定🤓</h2>
            <ol>
                <li><strong>扫码AI查价🤖</strong><br>扫描二维码进入服务界面，描述设备故障+型号，AI系统即时精准报价，一次性展示维修费+配件费（原装/组装双价）+各延保档位费用，费用明细一目了然。</li>
                <li><strong>确认方案预约寄件✅</strong><br>选定维修方案、配件类型、质保档位后，告知客服初始取件地址，快递免费上门取件，无需自己跑腿、垫付任何费用🚚。</li>
                <li><strong>灵活收修坐等签收📦</strong><br>临时变更行程可随时联系客服修改取件/寄回地址📍，维修完成后快递直达指定地址，签收后即可正常使用，全程轻松无忧。</li>
            </ol>
        </div>

        <!-- 阶梯式质保+配件选择说明卡片 -->
        <div class="card">
            <h2 class="section-title"><span>📋</span>阶梯式质保+配件选择说明，透明无套路📖</h2>
            <h3 class="sub-section-title">⏳阶梯式质保收费</h3>
            <ul>
                <li>基础保底质保：所有维修项目默认含<span class="key-strong">1个月免费质保</span>，无任何额外费用✅</li>
                <li>延保档位选择：支持自选延保至2/3/4……12个月，质保时长随心选，满足不同使用需求📌</li>
                <li>正规质保保障：选定延保档位后纳入维修保障，质保期内出现同故障，提供<span class="key-strong">免费返修</span>服务🔧</li>
                <li>延保费用规则：按月份阶梯式透明递增，时长越长费用合理递增，无人工私下加价🙅‍♂️</li>
            </ul>
            <h3 class="sub-section-title">🔩配件双档选择</h3>
            <ul>
                <li>原装配件：原厂正品，适配性强、品质与新机一致，质保稳定性更高，按原厂标准定价💯</li>
                <li>组装配件：合规优质副厂件，功能正常、性价比高，满足日常使用需求，配件费更实惠💰</li>
                <li>选择原则：AI报价同步展示两类配件价格，无强制捆绑，根据自身需求、预算自主选择，全程无诱导🙅‍♂️</li>
            </ul>
        </div>

        <!-- 扫码留备福利卡片 -->
        <div class="card">
            <h2 class="section-title"><span>📱</span>扫码留备，以备不时之需！不维修也能免费AI查价🤖</h2>
            <p>就算你的手机平板现在没有故障，也完全可以先扫码收藏备用⭐，不用立即维修，早扫码早省心：</p>
            <ul>
                <li>✅ 后续设备出故障，无需到处找维修店，直接扫码AI一键精准报价，费用明细全展示，无看人要价，原装/组装配件双价对比更清晰</li>
                <li>✅ 临时需要紧急维修时，随时联系客服预约寄件，地址可灵活修改📍，快递免费往返🚚，不用再为找不到靠谱维修渠道烦恼😮‍💨</li>
                <li>✅ 日常使用中，手机平板的保养知识、小故障疑问，都能通过7×24小时AI智能客服免费咨询💬，获取专业建议，省心实用</li>
            </ul>
        </div>

        <!-- 七大郑重承诺卡片 -->
        <div class="card">
            <h2 class="section-title"><span>🤝</span>修信诚信维修，七大郑重承诺，让你放心托付💯</h2>
            <ol>
                <li>坚持AI系统统一报价🤖，不夸大故障、不虚报价格、不看人定价，所有费用明细列明，坚守诚信维修底线。</li>
                <li>基础维修保底1个月质保⏳，延保2-12个月费用透明递增，质保期内同故障享受免费返修服务🔧。</li>
                <li>设备检测全程免费🔍，修不好不收费；<span class="key-strong">检测后拒绝维修按标准付检测费</span>，中途放弃维修仅承担基础物流运费，规则透明无模糊。</li>
                <li>配件分原装、组装明码标价🔩，更换配件可拍照核对，坚决不偷换配件、不使用劣质配件，品质可控有保障🙅‍♂️。</li>
                <li>设备维修全程录像留证📹，客户可申请查看，用户隐私信息严格保密，照片、支付信息等绝不泄露🔒。</li>
                <li>物流运输全程保价📦，<span class="key-strong">丢失/破损由物流公司按保价金额全额赔偿</span>，我方全程协助理赔，无需客户承担任何损失💪。</li>
                <li>7×24小时全天候服务💬，AI客服秒级响应，人工客服兜底处理，费用、售后问题绝不推诿拖延，有问必答不敷衍🙅‍♂️。</li>
            </ol>
        </div>
    </div>

    <!-- 底部尾屏通栏：与顶部呼应，大气号召，视觉收尾 -->
    <div class="bottom-banner">
        <h2 class="bottom-title">🚀立即扫码，解锁省心寄修！AI查价/选配件/定质保，一键搞定</h2>
        <p class="bottom-desc">手机平板寄修，就选修信诚信维修🤝！<br>
        <span class="bottom-key">AI报价更诚信、费用透明无隐藏、配件分档可选、地址灵活不折腾、阶梯质保1-12个月自由选</span>！<br>
        往返物流费+运输保价费全含🚚，<span class="bottom-key">检测费确认维修即免</span>，不管是现在需要立即维修，还是先扫码备用、免费查价，都可以一键解锁全部服务。</p>
        <p class="bottom-desc bottom-key">修信诚信维修，全程透明公道，一站式解决你所有的设备维修需求，让你修得放心、用得安心💯！</p>
    </div>

    <!-- 原生JS实现滚动渐入动效：无外部依赖，兼容所有浏览器 -->
    <script>
        // 获取所有卡片元素
        const cards = document.querySelectorAll('.card');
        // 监听滚动事件
        window.addEventListener('scroll', function() {
            // 遍历卡片，判断是否进入视口
            cards.forEach(card => {
                const cardTop = card.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                // 当卡片顶部进入视口下方100px时，添加动效类
                if (cardTop < windowHeight - 100) {
                    card.classList.add('animate');
                }
            });
        });
        // 页面加载时触发一次滚动事件，确保首屏卡片显示动效
        window.dispatchEvent(new Event('scroll'));
    </script>
</body>
</html>

网页设计核心亮点（大气磅礴+全端适配）

一、视觉风格：黑金蓝高级商务风，打造大气质感

主色调：选用深海蓝（#165DFF/#0A2463） 为主色调，搭配鎏金（#FFB800） 为点缀色，白色为底色，符合维修行业专业、靠谱的品牌调性，同时黑金蓝组合自带高端大气质感；
渐变背景：页面整体采用浅蓝渐变背景，顶部和底部通栏用深海蓝渐变，首尾呼应，视觉上舒展大气；
卡片分层：所有核心内容采用白色圆角卡片承载，搭配轻阴影，悬停时上浮+阴影加深，打造立体分层效果，避免页面杂乱，同时提升交互感。

二、动态效果：原生CSS/JS实现，流畅不卡顿（无外部依赖）

首屏流光标题：顶部主标题加入金色流光渐变动效，成为视觉焦点，瞬间提升页面档次；
滚动渐入动效：所有卡片默认隐藏，滚动页面时从下往上渐入显示，避免一次性加载过多内容，提升浏览节奏感；
漂浮装饰光点：顶部/底部通栏加入半透明漂浮光点，缓慢移动+缩放，增加页面灵动感和氛围感；
列表悬停动效：所有列表项鼠标悬停时文字变主色调+轻微左移，提升页面交互细节；
卡片悬停上浮：鼠标移至卡片，卡片向上漂浮8px+阴影加深，打造立体触感。

三、页面结构：首尾视觉强化，排版层次清晰

顶部通栏（首屏）：独立渐变通栏，突出品牌和核心服务卖点，第一眼抓住用户注意力，适配所有终端；
中间卡片（内容）：按文案逻辑分8个独立卡片，每个卡片一个核心板块，标题带图标+左侧彩色竖线，层级清晰，浏览不累；
底部通栏（尾屏）：与顶部呼应的渐变通栏，放大号召性文字，金色高亮核心优势，引导用户行动，视觉上完美收尾。

四、全端自适应：PC/平板/手机H5无缝适配

PC端（≥1024px）：字体放大，间距舒展，卡片padding充足，大气磅礴，适配大屏显示器；
平板端（768-1023px）：适度缩减小间距和字体，保留所有动效，适配平板横屏/竖屏；
手机端H5（≤767px）：极致优化间距和字体，取消漂浮动效提升流畅度，列表缩进减小，卡片padding压缩，适配手机竖屏，无横向滚动，浏览体验流畅。

五、内容排版：严格保留所有文案，重点高亮强化

完整保留：所有核心文案、表情包、板块逻辑完全按你提供的内容排版，无删减、无修改；
重点高亮：核心规则（检测费、物流赔偿、质保）用鎏金加粗标注，普通重点用深海蓝加粗，视觉上区分层级，用户一眼看到关键信息；
标题优化：所有板块标题加入配套图标，增加视觉趣味性，同时左侧彩色竖线装饰，提升页面精致度。

使用说明

直接使用：将代码全选复制，保存为.html文件（如xiuxin-phone-repair.html），可直接用浏览器打开，也可上传至服务器/公众号H5/小程序网页端，无任何外部依赖；

添加图片/二维码：如需添加扫码二维码/品牌logo，直接在对应位置插入以下代码即可，图片会自适应容器宽度，不影响布局：

   <!-- 插入二维码（示例，替换src为你的图片地址） -->
   <img src="你的二维码图片地址" style="max-width:200px; height:auto; display:block; margin:20px auto;">

自定义修改：
- 配色：修改CSS中--main-color（主蓝）、--second-color（深海蓝）、--gold-color（鎏金）即可全局更换色调；
- 字体/间距：调整CSS中对应font-size（字体）、margin/padding（间距）参数，不影响整体布局；
- 动效：如需关闭某类动效，直接删除对应@keyframes动画即可；
兼容性：兼容所有主流浏览器（Chrome、Edge、Firefox、微信内置浏览器、手机自带浏览器），原生代码加载速度快，无卡顿。

后续可扩展优化（按需添加）

可在底部通栏添加固定扫码按钮，手机端悬浮显示，提升转化；
可在各板块加入配图占位符，插入维修场景/流程图片，图文并茂；
可添加回到顶部按钮，方便长页面浏览；
可在费用明细板块添加价格表，用HTML表格实现，样式与页面统一。

整个网页完全按照你提供的文案内容设计，兼顾大气磅礴的视觉效果、丰富的动态交互和全终端的流畅适配，同时保留了所有核心信息和排版逻辑，可直接投入使用~