Skip to content

概率的朋友 #2

Open
Open
概率的朋友#2
@wuree84-svg

Description

@wuree84-svg
wuree84-svg
opened on May 14, 2026
<title>Qmacd 社区 · 《概率的朋友》读书会 | 散户学习生态系统</title> <script src="https://cdn.tailwindcss.com"></script> <style> /* 全局滚动平滑 & 基础字体 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #efe7dd; font-family: system-ui, -apple-system, 'Segoe UI', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif; overflow-x: hidden; } /* 自定义动画 keyframes (补充原生) */ @Keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0px); } } @Keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0px); } } @Keyframes candleMove { 0% { transform: translateY(0px); } 50% { transform: translateY(-7px); } 100% { transform: translateY(0px); } } @Keyframes lineFlow { 0% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 0; } } @Keyframes pulse { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } 100% { opacity: 0.5; transform: scale(1); } } /* 自定义滚动条，保持干净 */ .slidesContainer::-webkit-scrollbar { height: 8px; } .slidesContainer::-webkit-scrollbar-track { background: #ddd2c4; border-radius: 10px; } .slidesContainer::-webkit-scrollbar-thumb { background: #b49f8a; border-radius: 10px; } /* 卡片内部动画持续 */ .slide { animation: fadeIn 0.8s ease; } .line { animation: slideIn 0.7s ease forwards; opacity: 0; animation-fill-mode: forwards; } .kline-group g { animation: candleMove 2.4s ease-in-out infinite; } .ma-line { stroke-dasharray: 240; animation: lineFlow 4s linear infinite; } .pulse-dot { animation: pulse 2s infinite; } /* 保留所有svg内部动画 */ .candle-animate { animation: candleMove 2.4s ease-in-out infinite; } .line-flow { stroke-dasharray: 240; animation: lineFlow 4s linear infinite; } </style> 
    <!-- 幻灯片 0: 你上一次在股市里遇到问题 -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-[0_12px_40px_rgba(0,0,0,0.08)] flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-[1.25] text-[#222] tracking-[-1px]">你上一次在股市里遇到问题</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">你去哪里找答案？</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">搜索引擎？</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">股票群？</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">还是大V视频？</div>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 1: 结果通常是什么？ -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">结果通常是什么？</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">广告很多。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">观点很乱。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">不知道谁靠谱。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">最后还是带着疑问做决定。</div>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 2: 散户最缺的 -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">散户最缺的</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">不是知识。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">而是一个</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">可以信任的学习环境。</div>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 3: 《概率的朋友》读书会 + chart -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">《概率的朋友》读书会</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">就是这样一个地方。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">同一套方法框架。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">真实市场里的实践。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">一起学习，一起验证。</div>
        </div>
        <!-- 图表区域 -->
        <div class="chartWrap mt-8 bg-white/55 rounded-3xl p-5 border border-black/5">
            <svg viewBox="0 0 360 220" class="w-full h-[220px]">
                <polyline class="ma-line" points="10,180 40,172 70,165 100,150 130,142 160,130 190,118 220,110 250,96 280,84 320,70" fill="none" stroke="#5b8def" stroke-width="4" stroke-linecap="round" />
                <polyline class="ma-line" points="10,190 40,186 70,180 100,174 130,168 160,160 190,152 220,145 250,138 280,130 320,122" fill="none" stroke="#e2a26a" stroke-width="4" stroke-linecap="round" />
                <!-- K线组 -->
                <g class="candle-animate">
                    <line x1="28" y1="148" x2="28" y2="196" stroke="#d96b5f" stroke-width="2" />
                    <rect x="20" y="161" width="16" height="26" rx="2" fill="#d96b5f" />
                </g>
                <g class="candle-animate" style="animation-delay: 0.15s">
                    <line x1="58" y1="158" x2="58" y2="206" stroke="#3f9b72" stroke-width="2" />
                    <rect x="50" y="168" width="16" height="26" rx="2" fill="#3f9b72" />
                </g>
                <g class="candle-animate" style="animation-delay: 0.3s">
                    <line x1="88" y1="140" x2="88" y2="192" stroke="#d96b5f" stroke-width="2" />
                    <rect x="80" y="152" width="16" height="26" rx="2" fill="#d96b5f" />
                </g>
                <g class="candle-animate" style="animation-delay: 0.45s">
                    <line x1="118" y1="120" x2="118" y2="168" stroke="#d96b5f" stroke-width="2" />
                    <rect x="110" y="132" width="16" height="26" rx="2" fill="#d96b5f" />
                </g>
                <g class="candle-animate" style="animation-delay: 0.6s">
                    <line x1="148" y1="140" x2="148" y2="188" stroke="#3f9b72" stroke-width="2" />
                    <rect x="140" y="152" width="16" height="26" rx="2" fill="#3f9b72" />
                </g>
                <g class="candle-animate" style="animation-delay: 0.75s">
                    <line x1="178" y1="108" x2="178" y2="158" stroke="#d96b5f" stroke-width="2" />
                    <rect x="170" y="120" width="16" height="26" rx="2" fill="#d96b5f" />
                </g>
                <g class="candle-animate" style="animation-delay: 0.9s">
                    <line x1="208" y1="96" x2="208" y2="142" stroke="#d96b5f" stroke-width="2" />
                    <rect x="200" y="108" width="16" height="26" rx="2" fill="#d96b5f" />
                </g>
            </svg>
            <div class="flex gap-6 mt-2 text-sm text-gray-600">
                <div class="flex items-center gap-2"><div class="w-5 h-[3px] bg-blue-400 rounded-full"></div> MA5</div>
                <div class="flex items-center gap-2"><div class="w-5 h-[3px] bg-orange-300 rounded-full"></div> MA20</div>
            </div>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 4: 学习路线 + roadmap -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">学习路线</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">9天学习地图</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">从量化思维基础</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">到弹论 / CDVA / 带鱼系统</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">结构化推进</div>
        </div>
        <div class="chartWrap mt-8 bg-white/55 rounded-3xl p-5 border border-black/5">
            <svg viewBox="0 0 360 220" class="w-full h-[220px]">
                <polyline class="ma-line" points="10,180 50,155 100,140 150,115 200,100 250,80 300,65" fill="none" stroke="#5b8def" stroke-width="3.5" stroke-dasharray="8 4"/>
                <polyline points="10,190 50,170 100,158 150,140 200,125 250,108 300,95" fill="none" stroke="#e2a26a" stroke-width="3" stroke-dasharray="5 3"/>
                <!-- roadmap 脉冲点 -->
                <circle cx="70" cy="158" r="10" fill="#d96b5f" class="pulse-dot" />
                <circle cx="160" cy="118" r="10" fill="#5b8def" class="pulse-dot" style="animation-delay: 0.4s" />
                <circle cx="260" cy="82" r="10" fill="#3f9b72" class="pulse-dot" style="animation-delay: 0.8s" />
                <!-- 小标记文字 -->
                <text x="45" y="190" fill="#b45f4a" font-size="12" font-weight="bold">量化思维</text>
                <text x="135" y="150" fill="#4a6fa5" font-size="12" font-weight="bold">弹论/CDVA</text>
                <text x="235" y="112" fill="#2f7d5c" font-size="12" font-weight="bold">带鱼系统</text>
            </svg>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 5: qmacd.com论坛 + codeChart -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">qmacd.com论坛</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">现成代码模板</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">真实历史回测数据</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">学员案例分享</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">桥博士定期答疑</div>
        </div>
        <div class="chartWrap mt-8 bg-white/55 rounded-3xl p-5 border border-black/5">
            <svg viewBox="0 0 360 220" class="w-full h-[220px]">
                <polyline class="ma-line" points="20,180 60,155 120,130 180,120 240,100 310,75" fill="none" stroke="#5b8def" stroke-width="3.5"/>
                <rect x="40" y="130" width="130" height="50" rx="12" fill="rgba(91,141,239,0.2)" stroke="#5b8def" stroke-width="1.5"/>
                <text x="58" y="160" fill="#2c5cb0" font-size="16" font-weight="bold">📁 代码模板库</text>
                <rect x="210" y="80" width="120" height="45" rx="10" fill="rgba(233,152,106,0.2)" stroke="#e2986a"/>
                <text x="225" y="107" fill="#b45a2e" font-size="14">回测数据集</text>
                <circle cx="310" cy="75" r="6" fill="#3f9b72" class="pulse-dot"/>
            </svg>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 6: 为什么读书会有效？ -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">为什么读书会有效？</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">因为学习效率最高的方式</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">不是听课。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">不是看书。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">而是讨论、输出、应用。</div>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 7: 打卡机制 + flowChart -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">打卡机制</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">每天学完写下来。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">分享出去。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">别人提出不同理解。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">知识才真正变成你的。</div>
        </div>
        <div class="chartWrap mt-8 bg-white/55 rounded-3xl p-5 border border-black/5">
            <svg viewBox="0 0 360 200" class="w-full h-[200px]">
                <circle cx="70" cy="70" r="24" fill="#d96b5f" opacity="0.85" class="pulse-dot"/>
                <text x="55" y="76" fill="white" font-size="14" font-weight="bold">学</text>
                <line x1="94" y1="70" x2="140" y2="70" stroke="#5b8def" stroke-width="3" stroke-dasharray="5 3"/>
                <circle cx="170" cy="70" r="24" fill="#5b8def" opacity="0.85" class="pulse-dot" style="animation-delay: 0.3s"/>
                <text x="155" y="76" fill="white" font-size="14">写</text>
                <line x1="194" y1="70" x2="240" y2="70" stroke="#5b8def" stroke-width="3" stroke-dasharray="5 3"/>
                <circle cx="270" cy="70" r="24" fill="#e2a26a" opacity="0.85" class="pulse-dot" style="animation-delay: 0.6s"/>
                <text x="255" y="76" fill="white" font-size="13">分享</text>
                <path d="M270,94 L270,150 Q270,160 260,160 L100,160 Q90,160 90,150 L90,94" fill="none" stroke="#3f9b72" stroke-width="3" stroke-dasharray="6 4"/>
                <circle cx="90" cy="130" r="16" fill="#3f9b72" opacity="0.9"/>
                <text x="80" y="135" fill="white" font-size="12">讨论</text>
            </svg>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 8: 一个人学习 vs 一群人学习 + compareChart -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">一个人学习 vs 一群人学习</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">差的不只是效率。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">而是市场变化时，</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">有没有地方</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">可以一起讨论。</div>
        </div>
        <div class="chartWrap mt-8 bg-white/55 rounded-3xl p-5 border border-black/5">
            <svg viewBox="0 0 360 200" class="w-full h-[200px]">
                <rect x="20" y="100" width="100" height="60" rx="12" fill="rgba(63,155,114,0.2)" stroke="#3f9b72" stroke-width="2"/>
                <text x="45" y="138" fill="#2a6e4f" font-size="18" font-weight="bold">😞 一个人</text>
                <rect x="220" y="40" width="120" height="80" rx="12" fill="rgba(217,107,95,0.2)" stroke="#d96b5f" stroke-width="2"/>
                <text x="240" y="88" fill="#b14a3e" font-size="18" font-weight="bold">👥 一群人</text>
                <!-- 上升箭头 -->
                <path d="M280,120 L280,35" stroke="#d96b5f" stroke-width="4" marker-end="url(#arrow)"/>
                <defs><marker id="arrow" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#d96b5f"/></marker></defs>
            </svg>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>

    <!-- 幻灯片 9: 真正重要的是 + finalChart -->
    <div class="slide snap-center w-[430px] h-[760px] bg-[#f8f3ec] rounded-[34px] p-[40px_34px] relative shadow-xl flex-shrink-0 flex flex-col">
        <div class="logo absolute top-7 right-8 text-2xl font-bold text-[#222]">Qmacd</div>
        <div class="title mt-12 text-[40px] font-bold leading-tight text-[#222] tracking-[-1px]">真正重要的是</div>
        <div class="mt-10 flex flex-col gap-4">
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0s;">当市场最难的时候。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.1s;">你不是一个人。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.2s;">你知道去哪里找答案。</div>
            <div class="line text-[22px] text-[#444] leading-relaxed" style="animation-delay: 0.3s;">这就是差距。</div>
        </div>
        <div class="chartWrap mt-8 bg-white/55 rounded-3xl p-5 border border-black/5">
            <svg viewBox="0 0 360 180" class="w-full h-[180px]">
                <polyline points="30,150 80,130 130,110 180,90 230,70 280,50 330,30" fill="none" stroke="#f5b042" stroke-width="5" stroke-linecap="round" class="line-flow" />
                <circle cx="280" cy="50" r="12" fill="#d96b5f" class="pulse-dot" />
                <text x="260" y="40" fill="#222" font-weight="bold" font-size="14">社区力量</text>
                <text x="80" y="158" fill="#555" font-size="13">孤立无援</text>
                <text x="260" y="130" fill="#2f7d5c" font-size="13">共同成长→</text>
            </svg>
        </div>
        <div class="footer absolute right-6 bottom-5 text-[13px] text-[#8b837d]">乔烨《概率的朋友》</div>
    </div>
</div>
<script> // 平滑滚动交互增强（根据鼠标滚轮横向滚动） const container = document.querySelector('.slidesContainer'); if(container) { container.addEventListener('wheel', (e) => { if(e.deltaY !== 0) { e.preventDefault(); container.scrollLeft += e.deltaY; } }, { passive: false }); } // 使每个卡片在可视区时加强体验（纯视觉辅助，不做额外大改动） </script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions