---
import Layout from '../../../layouts/Layout.astro';
---

<Layout title="平台操作指南">
    <header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md shadow-sm">
        <div class="container mx-auto flex items-center p-4 h-16 gap-3">
            <img src="/intro/miniapp-manual/img/logo.png" alt="Logo" class="h-5 w-auto flex-shrink-0">
            <div class="w-px h-5 bg-gray-200"></div>
            <span class="text-xs text-gray-500 font-semibold leading-tight">致力于打造全国领先的安全风险数智平台</span>
        </div>
    </header>

    <main class="container mx-auto pt-16">
        
        <section class="p-4">
            <div class="bg-white p-5 rounded-2xl shadow-lg text-center">
                <i class="fa fa-paper-plane-o text-primary text-4xl mb-3"></i>
                <h1 class="text-2xl font-bold text-dark">企安智控小程序快速入门</h1>
                <p class="text-sm text-gray-500 mt-1">快速上手，掌握小程序核心用法</p>
            </div>
        </section>

        <div class="px-4 pb-4 space-y-5">
            
            <div>
                <div class="space-y-4">
                    <div class="bg-white p-5 rounded-2xl shadow-lg">
                        <h3 class="text-lg font-bold text-dark mb-3">第一步：关注服务号</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            在微信中识别下方服务号二维码，或搜索"源享品企安智控"，点击关注我们的官方服务号。
                        </p>
                        <div class="space-y-4">
                            <div>
                                <img src="/intro/miniapp-manual/img/wx-official-account.jpg" alt="关注服务号二维码" class="w-2/3 mx-auto rounded-lg border border-gray-100">
                                <p class="text-xs text-center text-gray-400 mt-2">源享品企安智控服务号</p>
                            </div>
                            <div>
                                <img src="/intro/miniapp-manual/img/wx-follow-screenshot.jpg" alt="关注服务号的截图" class="w-2/3 mx-auto rounded-lg border border-gray-100">
                                 <p class="text-xs text-center text-gray-400 mt-2">点击"关注服务号"</p>
                            </div>
                        </div>
                    </div>
                    <div class="ktbg-white p-5 rounded-2xl shadow-lg">
                        <h3 class="text-lg font-bold text-dark mb-3">第二步：进入小程序</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            进入服务号对话界面，点击右下角的菜单栏，选择""系统登录-小程序登录"，即可拉起企安智控小程序登录页。
                        </ktdiv>
                        <img src="/intro/miniapp-manual/img/manual-enter-miniapp.jpg" alt="从服务号菜单进入小程序" class="w-full rounded-lg border border-gray-100 bg-slate-100">
                    </div>
                    <div class="bg-white p-5 rounded-2xl shadow-lg">
                        <h3 class="text-lg font-bold text-dark mb-3">第三步：登录系统</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            首次进入小程序，需由企业管理员通过后台授权用户，并将获得一串初始密码。账户名即为您的手机号，输入并完成验证登录操作，请登录后按指引修改初始密码。
                        </p>
                        <img src="/intro/miniapp-manual/img/wx-miniapp-login.jpg" alt="小程序登录页" class="w-full rounded-lg border border-gray-100 bg-slate-100">
                    </div>
                    <div class="bg-white p-5 rounded-2xl shadow-lg">
                        <h3 class="text-lg font-bold text-dark mb-3">平台主页面</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            成功登录后，您将看到平台主界面，这里汇总了您的待办任务及各项功能入口，快来上手试试吧！
                        </p>
                        <img src="/intro/miniapp-manual/img/wx-miniapp-home.jpg" alt="小程序登录后主界面" class="w-full rounded-lg border border-gray-100 bg-slate-100">
                    </div>
                    </div>
            </div>
    </main>

    <footer class="text-center text-xs text-gray-400 py-6 px-4 space-y-1">
        <p>&copy; 2025 浙江贝凡网络科技. All Rights Reserved.</p>
        <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600">
                浙ICP备2025170226号-4
            </a>
        </p>
        <p>
            <a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" rel="noreferrer" target="_blank" class="inline-flex items-center justify-center gap-1 hover:text-gray-600 transition-colors">
                <img src="/intro/miniapp-manual/img/beian.png" alt="备案图标" class="w-4 h-4"> 
                <span>浙公网安备33011002018371号</span>
            </a>
        </p>
    </footer>
</Layout>