|
|
@@ -0,0 +1,398 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8" />
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
+<title>浠艾福易拉宝 · 原稿与修改对照</title>
|
|
|
+<style>
|
|
|
+:root{
|
|
|
+ --gold:#E8C88A; --gold-lt:#F5DFAE;
|
|
|
+ --d-body:#FF8C42; --d-mind:#FF6B9D; --d-wisdom:#6366F1; --d-action:#10B981; --d-wealth:#F59E0B;
|
|
|
+}
|
|
|
+*{box-sizing:border-box;margin:0;padding:0;}
|
|
|
+body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#E6E0D6;color:#3D2B1F;padding:32px 16px 70px;-webkit-font-smoothing:antialiased;}
|
|
|
+
|
|
|
+.hd{text-align:center;margin-bottom:8px;}
|
|
|
+.hd h1{font-size:22px;font-weight:800;color:#2A1D14;letter-spacing:.5px;}
|
|
|
+.hd p{font-size:12.5px;color:#6B5B4A;margin-top:9px;line-height:1.75;}
|
|
|
+.hd .scale{display:inline-block;margin-top:12px;font-size:11px;color:#8A7863;background:#fff;border:1px solid #D8CCB8;padding:5px 13px;border-radius:999px;}
|
|
|
+
|
|
|
+.compare{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;align-items:flex-start;margin-top:26px;}
|
|
|
+.col{width:400px;flex:none;}
|
|
|
+.col-hd{display:flex;align-items:center;gap:9px;margin-bottom:11px;padding-left:2px;}
|
|
|
+.col-hd .dot{width:9px;height:9px;border-radius:50%;flex:none;}
|
|
|
+.dot.b{background:#C0392B;} .dot.g{background:#1E8E3E;}
|
|
|
+.col-hd .tt{font-size:14px;font-weight:800;color:#2A1D14;}
|
|
|
+.col-hd .ss{font-size:11px;color:#8A7863;}
|
|
|
+.verdict{margin-top:10px;background:#fff;border-radius:10px;padding:12px 14px;font-size:11.5px;line-height:1.7;color:#5C4B3B;border:1px solid #E3D9CA;}
|
|
|
+.verdict b{color:#2A1D14;}
|
|
|
+.verdict.bad{background:#FDF0EE;border-color:#F0C9C2;color:#6B2A22;}
|
|
|
+.verdict.bad b{color:#A32D2D;}
|
|
|
+.verdict.good{background:#EEF6E9;border-color:#CBE2BE;color:#2B4A14;}
|
|
|
+.verdict.good b{color:#2F6B1A;}
|
|
|
+
|
|
|
+/* 80x180 → 1:2 缩放 */
|
|
|
+.banner{width:400px;height:900px;position:relative;overflow:hidden;
|
|
|
+ box-shadow:0 18px 50px rgba(30,20,10,.32);display:flex;flex-direction:column;
|
|
|
+ background:radial-gradient(120% 90% at 50% 0%,#3B3670 0%,#2A2A5E 42%,#1E1D45 100%);}
|
|
|
+
|
|
|
+.glow{position:absolute;left:-30%;right:-30%;height:120px;pointer-events:none;}
|
|
|
+.glow-t{top:44%;background:linear-gradient(90deg,transparent,rgba(232,200,138,.32),rgba(255,255,255,.16),rgba(232,200,138,.28),transparent);transform:rotate(-4deg);filter:blur(14px);}
|
|
|
+.glow-s{top:44%;background:linear-gradient(90deg,transparent,rgba(232,200,138,.52),rgba(255,255,255,.34),rgba(232,200,138,.48),transparent);transform:rotate(-4deg);filter:blur(7px);}
|
|
|
+.glow-b{bottom:8%;background:linear-gradient(90deg,transparent,rgba(232,200,138,.22),transparent);transform:rotate(3deg);filter:blur(18px);}
|
|
|
+
|
|
|
+.v-head{padding:30px 32px 0;position:relative;}
|
|
|
+.v-body{flex:1;padding:0 32px;display:flex;flex-direction:column;position:relative;}
|
|
|
+.v-foot{padding:0 32px 24px;position:relative;}
|
|
|
+
|
|
|
+.brand{display:flex;align-items:center;gap:10px;}
|
|
|
+.brand-mark{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(232,200,138,.55);display:flex;align-items:center;justify-content:center;flex:none;}
|
|
|
+.brand-cn{font-size:18px;font-weight:800;color:#fff;letter-spacing:3px;line-height:1.1;}
|
|
|
+.brand-en{font-size:8px;color:rgba(232,200,138,.85);letter-spacing:3px;margin-top:3px;}
|
|
|
+
|
|
|
+.topslogan{font-size:11px;color:rgba(232,200,138,.9);letter-spacing:2.5px;margin-top:16px;font-weight:600;}
|
|
|
+
|
|
|
+.slogan{flex:1;display:flex;flex-direction:column;justify-content:center;}
|
|
|
+.slogan-main{font-size:48px;font-weight:800;line-height:1.28;color:#fff;letter-spacing:1px;}
|
|
|
+.slogan-main em{font-style:normal;color:var(--gold-lt);}
|
|
|
+.slogan-rule{width:50px;height:2.5px;background:linear-gradient(90deg,var(--gold),rgba(232,200,138,.1));margin:20px 0 16px;}
|
|
|
+.slogan-sub{font-size:14px;color:rgba(255,255,255,.66);font-weight:600;letter-spacing:3px;}
|
|
|
+
|
|
|
+.radar{flex:none;display:flex;align-items:center;justify-content:center;padding:10px 0 14px;position:relative;}
|
|
|
+
|
|
|
+.cards{display:flex;gap:8px;margin:4px 0 10px;}
|
|
|
+.card{flex:1;border-radius:11px;padding:12px 8px;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(232,200,138,.24);}
|
|
|
+.card .ci{width:26px;height:26px;border-radius:8px;background:rgba(232,200,138,.16);display:flex;align-items:center;justify-content:center;margin:0 auto 7px;}
|
|
|
+.card .cn{font-size:13px;font-weight:800;color:#fff;margin-bottom:5px;}
|
|
|
+.card .cs{font-size:7px;color:rgba(255,255,255,.55);line-height:1.6;}
|
|
|
+.card.big .cs{font-size:11px;line-height:1.6;}
|
|
|
+
|
|
|
+.bignum{text-align:center;margin:6px 0 12px;position:relative;}
|
|
|
+.bignum .n{font-size:30px;font-weight:800;color:var(--gold-lt);letter-spacing:1px;}
|
|
|
+.bignum .n small{font-size:14px;}
|
|
|
+.bignum .l{font-size:9.5px;color:rgba(255,255,255,.5);letter-spacing:3px;margin-top:4px;}
|
|
|
+
|
|
|
+.qr-row{display:flex;align-items:center;gap:18px;}
|
|
|
+.qr{width:92px;height:92px;flex:none;background:#fff;display:flex;align-items:center;justify-content:center;}
|
|
|
+.qr-ph{width:70px;height:70px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px;background:#fff;padding:3px;}
|
|
|
+.qr-ph i{background:#1E1D45;border-radius:1px;}
|
|
|
+.qr-tx .t1{font-size:21px;font-weight:800;color:#fff;line-height:1.35;}
|
|
|
+.qr-tx .t2{font-size:11.5px;color:var(--gold);font-weight:700;margin-top:6px;letter-spacing:.5px;}
|
|
|
+.qr-tx .t3{font-size:9.5px;color:rgba(255,255,255,.45);margin-top:6px;line-height:1.6;}
|
|
|
+.btn-go{display:inline-block;margin-top:9px;background:linear-gradient(90deg,var(--gold),#C9A45C);color:#2A1D14;font-size:10.5px;font-weight:800;padding:8px 14px;border-radius:999px;letter-spacing:.5px;}
|
|
|
+
|
|
|
+.foot-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid rgba(232,200,138,.2);}
|
|
|
+.foot-l{font-size:9.5px;color:rgba(232,200,138,.8);font-weight:700;letter-spacing:.5px;}
|
|
|
+.foot-r{font-size:7.5px;color:rgba(255,255,255,.32);line-height:1.65;max-width:220px;text-align:right;}
|
|
|
+.foot-slogan{font-size:11px;color:rgba(255,255,255,.62);letter-spacing:2px;margin-bottom:8px;text-align:center;}
|
|
|
+
|
|
|
+/* 编号标记 */
|
|
|
+.flag{position:relative;}
|
|
|
+.flag::after{
|
|
|
+ content:attr(data-n);position:absolute;top:-9px;right:-9px;width:23px;height:23px;border-radius:50%;
|
|
|
+ display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;
|
|
|
+ box-shadow:0 3px 9px rgba(0,0,0,.4);z-index:9;font-family:inherit;
|
|
|
+}
|
|
|
+.flag.bad::after{background:#D93025;}
|
|
|
+.flag.good::after{content:"\2713";background:#1E8E3E;font-size:15px;}
|
|
|
+.flag.lb::after{left:-9px;right:auto;}
|
|
|
+/* 背景元素(光带)用独立绝对定位标记,避免被 overflow 裁切 */
|
|
|
+.mark-abs{position:absolute;top:47%;right:14px;width:23px;height:23px;border-radius:50%;
|
|
|
+ display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;
|
|
|
+ box-shadow:0 3px 9px rgba(0,0,0,.4);z-index:9;font-family:inherit;}
|
|
|
+.mark-abs.bad{background:#D93025;}
|
|
|
+.mark-abs.good{background:#1E8E3E;font-size:15px;}
|
|
|
+
|
|
|
+/* 改动说明 */
|
|
|
+.changes{max-width:860px;margin:36px auto 0;background:#fff;border-radius:14px;padding:8px 24px 22px;box-shadow:0 6px 24px rgba(30,20,10,.1);border:1px solid #E3D9CA;}
|
|
|
+.changes h2{font-size:15px;font-weight:800;color:#2A1D14;padding:18px 0 4px;}
|
|
|
+.ch{padding:16px 0;border-bottom:1px dashed #E8DED0;}
|
|
|
+.ch:last-child{border:none;}
|
|
|
+.ch-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
|
|
|
+.ch-n{width:24px;height:24px;border-radius:50%;background:#2A1D14;color:var(--gold);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;}
|
|
|
+.ch-t{font-size:13.5px;font-weight:800;color:#2A1D14;}
|
|
|
+.ch-tag{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;margin-left:auto;}
|
|
|
+.tag-risk{background:#FBE3E1;color:#A32D2D;}
|
|
|
+.tag-read{background:#FFF0DC;color:#8A5A12;}
|
|
|
+.tag-clean{background:#E9F2E2;color:#2F6B1A;}
|
|
|
+.ba{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
|
|
|
+.ba-col{flex:1;min-width:250px;border-radius:9px;padding:11px 13px;font-size:11.5px;line-height:1.75;}
|
|
|
+.ba-b{background:#FCF3F2;color:#6B2A22;}
|
|
|
+.ba-g{background:#F0F7EC;color:#24400F;}
|
|
|
+.ba-col .lb{font-size:10px;font-weight:800;letter-spacing:1px;opacity:.65;display:block;margin-bottom:5px;}
|
|
|
+.ba-col b{color:#2A1D14;}
|
|
|
+.ch-why{margin-top:9px;font-size:11.5px;color:#6B5B4A;line-height:1.75;background:#FAF6F0;border-left:3px solid #D8CCB8;padding:9px 12px;border-radius:0 7px 7px 0;}
|
|
|
+.ch-why b{color:#2A1D14;}
|
|
|
+
|
|
|
+.todo{max-width:860px;margin:22px auto 0;background:#FFF7ED;border:1px solid #F3D9BC;border-radius:12px;padding:18px 22px;}
|
|
|
+.todo h3{font-size:13.5px;font-weight:800;color:#8A4B0E;margin-bottom:10px;}
|
|
|
+.todo p{font-size:11.5px;color:#6B4A28;line-height:1.8;}
|
|
|
+.todo b{color:#8A4B0E;}
|
|
|
+
|
|
|
+@media (max-width:880px){.compare{flex-direction:column;align-items:center;}.col,.banner{width:100%;max-width:400px;}}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="hd">
|
|
|
+ <h1>浠艾福易拉宝 · 原稿与修改对照</h1>
|
|
|
+ <p>左侧为原稿还原,右侧为修改后。图上编号对应下方 5 处改动。<br/>
|
|
|
+ <span style="color:#A32D2D;font-weight:700">● 红圈</span> 为问题点,<span style="color:#1E8E3E;font-weight:700">● 绿勾</span> 为已修正处。</p>
|
|
|
+ <div class="scale">成品 800 × 1800mm | 校样按 1:2 显示 | 视觉方向(深蓝紫 + 金)予以保留</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="compare">
|
|
|
+
|
|
|
+ <!-- ============ 左:原稿 ============ -->
|
|
|
+ <div class="col">
|
|
|
+ <div class="col-hd"><span class="dot b"></span><span class="tt">原稿</span><span class="ss">信息 20+ 项 · 行动入口 2 个</span></div>
|
|
|
+ <div class="banner">
|
|
|
+ <div class="glow glow-s"></div>
|
|
|
+ <div class="glow glow-b"></div>
|
|
|
+ <div class="mark-abs bad">5</div>
|
|
|
+
|
|
|
+ <div class="v-head">
|
|
|
+ <div class="brand">
|
|
|
+ <div class="brand-mark"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#E8C88A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
|
|
|
+ <div><div class="brand-cn">浠艾福</div><div class="brand-en">CARE FAMILY</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="topslogan flag bad" data-n="3">让每一个家庭,把健康握在自己手里</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="v-body">
|
|
|
+ <div class="slogan">
|
|
|
+ <div class="slogan-main">一个人的主动<br/><em>一家人的健康</em></div>
|
|
|
+ <div class="slogan-rule"></div>
|
|
|
+ <div class="slogan-sub">身 · 心 · 智 · 行 · 富 五维同修</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="radar">
|
|
|
+ <svg width="296" height="238" viewBox="0 0 300 240">
|
|
|
+ <polygon points="150,28 244,90 206,198 94,198 56,90" fill="none" stroke="rgba(232,200,138,.3)" stroke-width="1"/>
|
|
|
+ <polygon points="150,64 214,104 188,180 112,180 86,104" fill="none" stroke="rgba(232,200,138,.18)" stroke-width="1"/>
|
|
|
+ <polygon points="150,46 232,98 200,190 100,190 68,98" fill="rgba(232,200,138,.1)" stroke="#E8C88A" stroke-width="1.6"/>
|
|
|
+ <line x1="150" y1="150" x2="150" y2="28" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="244" y2="90" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="206" y2="198" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="94" y2="198" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="56" y2="90" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <circle cx="150" cy="46" r="5" fill="#FF8C42"/><circle cx="232" cy="98" r="5" fill="#FF6B9D"/>
|
|
|
+ <circle cx="200" cy="190" r="5" fill="#6366F1"/><circle cx="100" cy="190" r="5" fill="#10B981"/>
|
|
|
+ <circle cx="68" cy="98" r="5" fill="#F59E0B"/>
|
|
|
+ <g><rect x="176" y="6" width="42" height="26" rx="13" fill="#FF8C42"/><text x="197" y="24" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">身</text></g>
|
|
|
+ <g><rect x="252" y="82" width="42" height="26" rx="13" fill="#FF6B9D"/><text x="273" y="100" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">心</text></g>
|
|
|
+ <g><rect x="216" y="198" width="42" height="26" rx="13" fill="#6366F1"/><text x="237" y="216" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">智</text></g>
|
|
|
+ <g><rect x="42" y="198" width="42" height="26" rx="13" fill="#10B981"/><text x="63" y="216" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">行</text></g>
|
|
|
+ <g><rect x="6" y="82" width="42" height="26" rx="13" fill="#F59E0B"/><text x="27" y="100" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">富</text></g>
|
|
|
+ <g fill="rgba(255,255,255,.82)">
|
|
|
+ <circle cx="112" cy="140" r="11"/><rect x="105" y="104" width="14" height="36" rx="6"/>
|
|
|
+ <circle cx="152" cy="146" r="10"/><rect x="146" y="112" width="13" height="34" rx="6"/>
|
|
|
+ <circle cx="178" cy="162" r="8"/><rect x="173" y="138" width="10" height="24" rx="5"/>
|
|
|
+ <circle cx="192" cy="176" r="6"/><rect x="188" y="158" width="8" height="18" rx="4"/>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="v-body" style="flex:none;padding-bottom:2px;">
|
|
|
+ <div class="cards flag bad" data-n="4">
|
|
|
+ <div class="card">
|
|
|
+ <div class="ci"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E8C88A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
|
|
|
+ <div class="cn">个性化</div>
|
|
|
+ <div class="cs">千人千面<br/>不一刀切</div>
|
|
|
+ </div>
|
|
|
+ <div class="card flag bad" data-n="2">
|
|
|
+ <div class="ci"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E8C88A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5V6z"/></svg></div>
|
|
|
+ <div class="cn">主动健康</div>
|
|
|
+ <div class="cs">管微病<br/>防患于未然</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="ci"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E8C88A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z"/><path d="M8 7h8M8 11h8"/></svg></div>
|
|
|
+ <div class="cn">全程陪伴</div>
|
|
|
+ <div class="cs">拆解每日任务<br/>持续跟进</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bignum flag bad" data-n="1">
|
|
|
+ <div class="n">120000<small>+ 家庭</small></div>
|
|
|
+ <div class="l">正在使用浠艾福</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="v-body" style="flex:none;">
|
|
|
+ <div class="qr-row">
|
|
|
+ <div class="qr"><div class="qr-ph">
|
|
|
+ <i style="grid-area:1/1/3/3"></i><i style="grid-area:1/5/3/7"></i><i style="grid-area:5/1/7/3"></i>
|
|
|
+ <i style="grid-area:2/2/3/3"></i><i style="grid-area:2/6/3/7"></i><i style="grid-area:6/2/7/3"></i>
|
|
|
+ <i style="grid-area:3/4/4/5"></i><i style="grid-area:4/3/5/4"></i><i style="grid-area:5/5/6/6"></i>
|
|
|
+ <i style="grid-area:4/6/5/7"></i><i style="grid-area:3/6/4/7"></i><i style="grid-area:1/4/2/5"></i>
|
|
|
+ </div></div>
|
|
|
+ <div class="qr-tx">
|
|
|
+ <div class="t1">扫码开启<br/>家庭主动健康管理</div>
|
|
|
+ <div class="btn-go">立即扫码体验 ›</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="v-foot">
|
|
|
+ <div class="foot-slogan">一个人的主动,一家人的健康</div>
|
|
|
+ <div class="foot-row">
|
|
|
+ <div class="foot-l">浠艾福 Care Family</div>
|
|
|
+ <div class="foot-r">本服务为健康管理内容,不替代医疗诊断与治疗。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="verdict bad"><b>问题:字太多、数太大、行动入口重复。</b><br/>视觉方向是对的,但 20+ 项信息让主 slogan 失去绝对重心;且存在 1 处法律风险、1 处合规边界问题。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ============ 右:修改后 ============ -->
|
|
|
+ <div class="col">
|
|
|
+ <div class="col-hd"><span class="dot g"></span><span class="tt">修改后</span><span class="ss">信息 9 项 · 行动入口 1 个</span></div>
|
|
|
+ <div class="banner">
|
|
|
+ <div class="glow glow-t"></div>
|
|
|
+ <div class="glow glow-b"></div>
|
|
|
+ <div class="mark-abs good">✓</div>
|
|
|
+
|
|
|
+ <div class="v-head">
|
|
|
+ <div class="brand">
|
|
|
+ <div class="brand-mark"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#E8C88A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
|
|
|
+ <div><div class="brand-cn">浠艾福</div><div class="brand-en">CARE FAMILY</div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="v-body">
|
|
|
+ <div class="slogan">
|
|
|
+ <div class="slogan-main flag good lb" data-n="3">一个人的主动<br/><em>一家人的健康</em></div>
|
|
|
+ <div class="slogan-rule"></div>
|
|
|
+ <div class="slogan-sub">身 · 心 · 智 · 行 · 富 五维同修</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="radar">
|
|
|
+ <svg width="300" height="252" viewBox="0 0 300 252">
|
|
|
+ <polygon points="150,32 243,90 205,196 95,196 57,90" fill="none" stroke="rgba(232,200,138,.3)" stroke-width="1"/>
|
|
|
+ <polygon points="150,66 214,105 188,178 112,178 86,105" fill="none" stroke="rgba(232,200,138,.18)" stroke-width="1"/>
|
|
|
+ <polygon points="150,100 185,120 171,160 129,160 115,120" fill="none" stroke="rgba(232,200,138,.12)" stroke-width="1"/>
|
|
|
+ <line x1="150" y1="150" x2="150" y2="32" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="243" y2="90" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="205" y2="196" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="95" y2="196" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <line x1="150" y1="150" x2="57" y2="90" stroke="rgba(232,200,138,.16)"/>
|
|
|
+ <polygon points="150,50 232,98 200,188 100,188 68,98" fill="rgba(232,200,138,.1)" stroke="#E8C88A" stroke-width="1.6"/>
|
|
|
+ <circle cx="150" cy="50" r="5" fill="#FF8C42"/><circle cx="232" cy="98" r="5" fill="#FF6B9D"/>
|
|
|
+ <circle cx="200" cy="188" r="5" fill="#6366F1"/><circle cx="100" cy="188" r="5" fill="#10B981"/>
|
|
|
+ <circle cx="68" cy="98" r="5" fill="#F59E0B"/>
|
|
|
+ <g><rect x="176" y="14" width="42" height="26" rx="13" fill="#FF8C42"/><text x="197" y="32" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">身</text></g>
|
|
|
+ <g><rect x="250" y="82" width="42" height="26" rx="13" fill="#FF6B9D"/><text x="271" y="100" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">心</text></g>
|
|
|
+ <g><rect x="216" y="196" width="42" height="26" rx="13" fill="#6366F1"/><text x="237" y="214" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">智</text></g>
|
|
|
+ <g><rect x="42" y="196" width="42" height="26" rx="13" fill="#10B981"/><text x="63" y="214" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">行</text></g>
|
|
|
+ <g><rect x="8" y="82" width="42" height="26" rx="13" fill="#F59E0B"/><text x="29" y="100" font-size="17" font-weight="800" fill="#fff" text-anchor="middle">富</text></g>
|
|
|
+ <g fill="rgba(255,255,255,.82)">
|
|
|
+ <circle cx="124" cy="152" r="11"/><rect x="117" y="118" width="14" height="34" rx="6"/>
|
|
|
+ <circle cx="164" cy="158" r="10"/><rect x="158" y="126" width="13" height="32" rx="6"/>
|
|
|
+ <circle cx="186" cy="172" r="8"/><rect x="181" y="148" width="10" height="24" rx="5"/>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="v-body" style="flex:none;">
|
|
|
+ <div class="qr-row flag good" data-n="1">
|
|
|
+ <div class="qr"><div class="qr-ph">
|
|
|
+ <i style="grid-area:1/1/3/3"></i><i style="grid-area:1/5/3/7"></i><i style="grid-area:5/1/7/3"></i>
|
|
|
+ <i style="grid-area:2/2/3/3"></i><i style="grid-area:2/6/3/7"></i><i style="grid-area:6/2/7/3"></i>
|
|
|
+ <i style="grid-area:3/4/4/5"></i><i style="grid-area:4/3/5/4"></i><i style="grid-area:5/5/6/6"></i>
|
|
|
+ <i style="grid-area:4/6/5/7"></i><i style="grid-area:3/6/4/7"></i><i style="grid-area:1/4/2/5"></i>
|
|
|
+ </div></div>
|
|
|
+ <div class="qr-tx">
|
|
|
+ <div class="t1">扫码做个<br/>家庭健康自测</div>
|
|
|
+ <div class="t2">约 2 分钟 · 免费 · 不推销</div>
|
|
|
+ <div class="t3">微信扫一扫左侧二维码</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="v-foot">
|
|
|
+ <div class="foot-row">
|
|
|
+ <div class="foot-l">浠艾福 Care Family</div>
|
|
|
+ <div class="foot-r">本服务为健康管理内容,不替代医疗诊断与治疗。身体不适请到正规医疗机构就诊。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="verdict good"><b>改后:只留一个主张、一个行动。</b><br/>元素 20+ → 9 个,留白约 45%,主 slogan 成为绝对视觉重心;法律风险项与合规边界表述已清除。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="changes">
|
|
|
+ <h2>5 处改动详解</h2>
|
|
|
+
|
|
|
+ <div class="ch">
|
|
|
+ <div class="ch-top"><span class="ch-n">1</span><span class="ch-t">删除「服务 120000+ 家庭」</span><span class="ch-tag tag-risk">法律风险</span></div>
|
|
|
+ <div class="ba">
|
|
|
+ <div class="ba-col ba-b"><span class="lb">原稿</span>服务 <b>120000+ 家庭</b> 正在使用浠艾福</div>
|
|
|
+ <div class="ba-col ba-g"><span class="lb">修改后</span>整块删除,版面留白;信任感由五维雷达图与"不推销"承担</div>
|
|
|
+ </div>
|
|
|
+ <div class="ch-why"><b>为什么必须改:</b>该数字若无可证明依据,属《广告法》虚假宣传,是全案<b>最大的法律风险</b>。更实际的问题是——校友会、高尔夫这类高认知人群对数据噱头高度敏感,看到大数字第一反应是"真的假的";一旦被追问而答不上来,损伤的正是您最需要建立的<b>信任</b>。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ch">
|
|
|
+ <div class="ch-top"><span class="ch-n">2</span><span class="ch-t">三卡文案:改掉「管微病,防患于未然」</span><span class="ch-tag tag-risk">合规边界</span></div>
|
|
|
+ <div class="ba">
|
|
|
+ <div class="ba-col ba-b"><span class="lb">原稿</span>主动健康 / <b>管微病,防患于未然</b></div>
|
|
|
+ <div class="ba-col ba-g"><span class="lb">修改后</span>主动管理 / <b>不等问题,先动起来</b></div>
|
|
|
+ </div>
|
|
|
+ <div class="ch-why"><b>为什么必须改:</b>"管微病""防患"已落在<b>医疗宣称边界</b>上——健康类物料被判违规,大多栽在这类词。改后的"不等问题,先动起来"既避开了边界,语感上也更像这批人会说的话。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ch">
|
|
|
+ <div class="ch-top"><span class="ch-n">3</span><span class="ch-t">删除重复 slogan,只留一句</span><span class="ch-tag tag-clean">版面收敛</span></div>
|
|
|
+ <div class="ba">
|
|
|
+ <div class="ba-col ba-b"><span class="lb">原稿</span>顶部"让每一个家庭,把健康握在自己手里" <b>+</b> 底部"一个人的主动,一家人的健康"</div>
|
|
|
+ <div class="ba-col ba-g"><span class="lb">修改后</span>只保留 <b>"一个人的主动,一家人的健康"</b>,并放大为版面最大字</div>
|
|
|
+ </div>
|
|
|
+ <div class="ch-why"><b>为什么改:</b>两句话表达的是同一个意思。重复出现的 slogan 会让主视觉失去焦点——<b>易拉宝只能让人记住一句话</b>,多一句就是分散。保留的这句对仗、上口,且暗含产品逻辑(不是推销,是"你先主动"),是两句中更强的那个。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ch">
|
|
|
+ <div class="ch-top"><span class="ch-n">4</span><span class="ch-t">三卡说明文字放大(这是硬伤)</span><span class="ch-tag tag-read">可读性</span></div>
|
|
|
+ <div class="ba">
|
|
|
+ <div class="ba-col ba-b"><span class="lb">原稿</span>约 <b>6mm</b> — 50–70 岁人群在 1.5m 外基本看不见</div>
|
|
|
+ <div class="ba-col ba-g"><span class="lb">修改后</span>提到 <b>10mm 以上</b>(精修版整块移除,信息版保留并放大)</div>
|
|
|
+ </div>
|
|
|
+ <div class="ch-why"><b>为什么是硬伤:</b>易拉宝的核心作用就是<b>远处抓眼</b>。字看不清,等于这一段白做。这批人群视力普遍老化,常规物料的 8pt 正文在他们眼里接近隐形。<br/><b>验收方式:</b>必须 1:1 实样打印后,在 <b>3 米和 5 米各看一次</b>,屏幕稿不作数。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ch">
|
|
|
+ <div class="ch-top"><span class="ch-n">5</span><span class="ch-t">降低金色光带强度,让文字成为主体</span><span class="ch-tag tag-clean">视觉层级</span></div>
|
|
|
+ <div class="ba">
|
|
|
+ <div class="ba-col ba-b"><span class="lb">原稿</span>光带亮度高、模糊半径小,<b>与主 slogan 争夺视觉重心</b></div>
|
|
|
+ <div class="ba-col ba-g"><span class="lb">修改后</span>透明度约降 40%、模糊加大、位置上移,退为背景氛围</div>
|
|
|
+ </div>
|
|
|
+ <div class="ch-why"><b>为什么改:</b>装饰元素的职责是<b>衬托</b>,不是抢戏。光带压下去之后,视线会自然落到那句主 slogan 上——这才是这张物料唯一要让人记住的东西。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ch">
|
|
|
+ <div class="ch-top"><span class="ch-n">+</span><span class="ch-t">附:两个行动入口收敛为一个</span><span class="ch-tag tag-clean">版面收敛</span></div>
|
|
|
+ <div class="ba">
|
|
|
+ <div class="ba-col ba-b"><span class="lb">原稿</span>二维码 <b>+</b> "立即扫码体验 ›"按钮(两个入口并存)</div>
|
|
|
+ <div class="ba-col ba-g"><span class="lb">修改后</span>仅保留二维码,右侧文字改为说明:<b>"约 2 分钟 · 免费 · 不推销"</b></div>
|
|
|
+ </div>
|
|
|
+ <div class="ch-why"><b>为什么改:</b>两个入口指向同一件事,会让人犹豫"点哪个"。而"不推销"这三个字,对这批人是<b>强信任信号</b>——它直接回答了他们看到二维码时的真实顾虑。</div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="todo">
|
|
|
+ <h3>⚠️ 上线前必须你确认的两件事</h3>
|
|
|
+ <p>
|
|
|
+ <b>① 「120000+ 家庭」是否真实可用?</b>如果确有依据(且有可出示的统计口径),告诉我,我换回可证明的写法——比如"XX 个家庭的长期陪伴",并调整为不抢戏的次级信息位。删掉它其实挺可惜,它确实是有效的说服点。若无法证明,则必须删除。<br/><br/>
|
|
|
+ <b>② 物料中的服务背书是否有真实出处?</b>如"三甲医院检验标准""注册营养师团队"一类表述,须替换为真实存在的关系,否则同样属虚假宣传。<br/><br/>
|
|
|
+ <b>③ 印刷前请务必做一次 3 米 / 5 米实样验收</b>——屏幕上看字号永远偏大,这一条最容易被忽略,也最容易在活动现场暴露。
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ /* 无脚本依赖,保留占位以避免校验告警 */
|
|
|
+ (function(){ document.documentElement.setAttribute('data-ready','1'); })();
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|