console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>益益乳业 — 新鲜,是一种日常</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
--green:#00704A;
--green-deep:#1E3932;
--green-dark:#142A24;
--cream:#F7F5EF;
--cream2:#EFEBE0;
--ink:#1A1A17;
--gray:#6B6A61;
--line:#DDD8CC;
--white:#fff;
}
html{scroll-behavior:smooth}
body{
font-family:"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
background:var(--cream);color:var(--ink);font-weight:400;line-height:1.7;
-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.w{max-width:1240px;margin:0 auto;padding:0 28px}
/* 通知条 */
.topbar{background:var(--green-deep);color:#D6E8DF;text-align:center;font-size:12px;letter-spacing:.08em;padding:11px 16px}
/* 导航 */
header{position:sticky;top:0;z-index:100;background:rgba(247,245,239,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transition:.3s}
.nav{display:flex;align-items:center;height:80px;gap:18px}
.logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:.06em;color:var(--green-deep)}
.logo i{width:30px;height:30px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:13px;font-style:normal;font-weight:700}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{font-size:13.5px;color:#3D3D36;padding:10px 15px;border-radius:999px;transition:.3s;font-weight:500}
.menu a:hover{background:var(--cream2);color:var(--green-deep)}
.nav-cta{display:flex;gap:10px;margin-left:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 30px;border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.02em;border:none;cursor:pointer;transition:.35s;font-family:inherit;white-space:nowrap}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--green-deep);border:1.5px solid var(--green-deep)}
.btn-ghost:hover{background:var(--green-deep);color:#fff}
.btn-white{background:#fff;color:var(--green-deep)}
.btn-white:hover{background:var(--cream2)}
/* Hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#2E5C4A,#7BA58F)}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:slowZoom 22s ease-in-out infinite alternate}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,42,36,.35) 0%,rgba(20,42,36,.5) 45%,rgba(20,42,36,.94) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:70px}
.hero-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 18px;font-size:11.5px;letter-spacing:.18em;margin-bottom:30px;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:#8FD4B4;display:block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
h1{font-size:clamp(44px,7.4vw,102px);font-weight:700;line-height:1.02;letter-spacing:-.03em;max-width:900px}
h1 span{color:#A8DCC4}
.hero-sub{margin-top:28px;max-width:480px;font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.82);font-weight:400}
.hero-actions{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:64px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.18em;color:rgba(255,255,255,.6)}
.scroll-hint{display:flex;align-items:center;gap:10px}
.scroll-hint i{width:1px;height:34px;background:rgba(255,255,255,.6);display:block;animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* 印章 */
.seal{position:absolute;right:6%;bottom:110px;width:118px;height:118px;z-index:3;display:none}
.seal svg{width:100%;height:100%;animation:spin 26s linear infinite}
.seal text{fill:rgba(255,255,255,.75);font-size:8.4px;letter-spacing:.24em;font-family:inherit}
.seal .core{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.16em;color:#fff;text-align:center;line-height:1.4}
@keyframes spin{to{transform:rotate(360deg)}}
/* 承诺条 */
.promise{background:var(--cream2);border-bottom:1px solid var(--line)}
.promise .w{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.promise div{background:var(--cream2);padding:26px 22px;text-align:center}
.promise b{display:block;font-size:14px;font-weight:700;color:var(--green-deep);margin-bottom:4px;letter-spacing:.02em}
.promise span{font-size:12px;color:var(--gray);letter-spacing:.06em}
/* 通用 */
section{padding:110px 0}
.label{font-size:11.5px;letter-spacing:.34em;color:var(--green);font-weight:700;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.label::before{content:"";width:30px;height:1px;background:var(--green)}
h2{font-size:clamp(30px,4.2vw,54px);font-weight:700;line-height:1.14;letter-spacing:-.025em;color:var(--green-deep)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px;flex-wrap:wrap}
.sec-head .more{font-size:13px;font-weight:600;color:var(--green-deep);border-bottom:1.5px solid var(--green-deep);padding-bottom:3px;transition:.3s;white-space:nowrap}
.sec-head .more:hover{color:var(--green);border-color:var(--green)}
/* 产品 */
.products{background:var(--cream)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.prod{background:var(--white);border-radius:20px;overflow:hidden;transition:.45s cubic-bezier(.2,.7,.2,1);cursor:pointer}
.prod:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(20,42,36,.14)}
.prod-img{position:relative;aspect-ratio:4/4.6;overflow:hidden;background:linear-gradient(135deg,#2E5C4A,#7BA58F)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.prod:hover .prod-img img{transform:scale(1.07)}
.prod-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--green-deep);font-size:11px;font-weight:700;letter-spacing:.1em;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.prod-body{padding:22px 22px 24px}
.prod-body h3{font-size:17px;font-weight:700;color:var(--green-deep);margin-bottom:7px}
.prod-body p{font-size:13px;color:var(--gray);min-height:38px;line-height:1.7}
.prod-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.prod-foot span:first-child{font-size:14px;font-weight:700;color:var(--green)}
.prod-foot .arr{font-size:17px;color:var(--green-deep);transition:.3s}
.prod:hover .arr{transform:translateX(5px)}
/* 溯源 */
.trace{background:var(--green-deep);color:#E5EFE9;position:relative;overflow:hidden}
.trace .label{color:#8FD4B4}
.trace .label::before{background:#8FD4B4}
.trace h2{color:#fff}
.trace-body{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;margin-top:20px}
.trace-photo{border-radius:24px;overflow:hidden;aspect-ratio:5/6;background:linear-gradient(135deg,#2E5C4A,#7BA58F);position:relative}
.trace-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.trace-photo:hover img{transform:scale(1.05)}
.trace-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,42,36,.55));pointer-events:none}
.trace-list{display:flex;flex-direction:column}
.trace-item{padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:54px 1fr;gap:22px;transition:.3s}
.trace-item:first-child{padding-top:0}
.trace-item:last-child{border-bottom:none}
.trace-item .num{font-size:12px;letter-spacing:.2em;color:#8FD4B4;font-weight:700;padding-top:4px}
.trace-item h4{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px}
.trace-item p{font-size:13.5px;color:rgba(229,239,233,.72);line-height:1.8}
/* 数据 */
.stats{background:var(--green-dark);color:#fff;padding:70px 0}
.stats .w{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}
.stats div{background:var(--green-dark);padding:20px 16px;text-align:center}
.stats b{display:block;font-size:clamp(32px,4.4vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:10px;color:#fff}
.stats span{font-size:11.5px;letter-spacing:.2em;color:rgba(255,255,255,.55);text-transform:uppercase}
/* 评价 */
.reviews{background:var(--cream)}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.rev{background:var(--white);border-radius:20px;padding:36px 32px;transition:.4s;position:relative}
.rev:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(20,42,36,.1)}
.rev .q{font-family:Georgia,serif;font-size:70px;line-height:.7;color:var(--cream2);font-weight:700;margin-bottom:6px}
.rev p{font-size:15.5px;line-height:1.85;color:var(--green-deep);font-weight:500;margin-bottom:26px;min-height:86px}
.rev .who{display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--line)}
.rev .av{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex:0 0 auto}
.rev .who b{display:block;font-size:13.5px;color:var(--green-deep);font-weight:700}
.rev .who span{font-size:12px;color:var(--gray)}
/* 表单 */
.biz{background:var(--white)}
.form-wrap{max-width:880px;margin:0 auto}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 54px;margin-top:20px}
.field{display:flex;flex-direction:column;padding:18px 0;border-bottom:1.5px solid var(--line);transition:.3s}
.field:focus-within{border-color:var(--green)}
.field.full{grid-column:1/-1}
.field label{font-size:10.5px;letter-spacing:.24em;color:var(--gray);text-transform:uppercase;margin-bottom:8px;font-weight:600}
.field input,.field select,.field textarea{border:none;background:transparent;font-size:15px;font-family:inherit;font-weight:500;color:var(--green-deep);outline:none;padding:4px 0}
.field input::placeholder,.field textarea::placeholder{color:#B7B4A8;font-weight:400}
.field select{cursor:pointer;-webkit-appearance:none}
.field textarea{resize:vertical;min-height:54px;line-height:1.7}
.form-submit{margin-top:48px;width:100%}
.form-tip{margin-top:18px;font-size:12px;color:var(--gray);text-align:center}
.toast{display:none;margin-top:20px;padding:16px 20px;border-radius:12px;font-size:14px;font-weight:600;text-align:center}
.toast.on{display:block;animation:up .4s ease}
.toast.ok{background:#E6F2EC;color:#1E5A44}
.toast.err{background:#FBF1DF;color:#8A6A2A}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 配送查询 */
.checker{background:var(--cream2)}
.check-inner{max-width:840px;margin:0 auto;text-align:center}
.check-inner .label{justify-content:center}
.check-inner .label::before{display:none}
.check-inner .label::after{content:"";width:30px;height:1px;background:var(--green)}
.cform{margin-top:48px;display:flex;gap:0;flex-wrap:wrap;background:#fff;border-radius:999px;padding:8px;box-shadow:0 10px 30px rgba(20,42,36,.08)}
.cform input,.cform select{flex:1;min-width:160px;border:none;background:transparent;padding:14px 20px;font-size:14.5px;font-family:inherit;font-weight:500;color:var(--green-deep);outline:none}
.cform input::placeholder{color:#B7B4A8;font-weight:400}
.cform select{cursor:pointer;-webkit-appearance:none}
.cform button{border-radius:999px;padding:14px 36px}
.cres{margin-top:28px;font-size:14.5px;line-height:1.9;display:none;padding:20px;border-radius:16px}
.cres.on{display:block;animation:up .45s ease}
.cres.ok{background:#E6F2EC;color:#1E5A44}
.cres.no{background:#FBF1DF;color:#8A6A2A}
.cres b{font-weight:700}
.careas{margin-top:26px;font-size:11.5px;letter-spacing:.14em;color:var(--gray)}
.careas span{display:inline-block;margin:4px 6px;padding:5px 12px;background:#fff;border-radius:999px;border:1px solid var(--line)}
/* FAQ */
.faq{background:var(--cream)}
.faq-list{max-width:920px;margin:0 auto}
details{border-bottom:1px solid var(--line);transition:.3s}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:30px 0;display:flex;justify-content:space-between;align-items:center;gap:22px;font-size:16.5px;font-weight:600;color:var(--green-deep);transition:.3s}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;font-weight:300;color:var(--green);transition:.4s;line-height:1;flex:0 0 auto}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 32px;font-size:14px;line-height:1.95;color:var(--gray);max-width:760px}
/* 页脚 */
footer{background:var(--green-deep);color:#A9C4B8;padding:90px 0 36px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:50px}
.fbrand{display:flex;align-items:center;gap:10px;color:#fff;font-size:17px;font-weight:700;letter-spacing:.06em;margin-bottom:20px}
.fbrand i{width:30px;height:30px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:13px;font-style:normal}
footer p{font-size:13px;line-height:2;color:#8FAEA0}
footer h5{color:#fff;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:20px;font-weight:700}
footer ul{list-style:none;display:flex;flex-direction:column;gap:12px}
footer ul a{font-size:13px;color:#8FAEA0;transition:.3s}
footer ul a:hover{color:#fff}
.fbottom{margin-top:70px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.08em;color:#6E8A7E}
/* 移动底栏 */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(247,245,239,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:11px 16px;gap:10px}
.mbar a{flex:1;text-align:center;font-size:13px;font-weight:600;padding:14px 0;border-radius:999px}
.mbar .m1{border:1.5px solid var(--green-deep);color:var(--green-deep)}
.mbar .m2{background:var(--green);color:#fff}
/* 滚动动画 */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
/* 响应式 */
@media(min-width:1000px){.seal{display:block}}
@media(max-width:1024px){
.trace-body{grid-template-columns:1fr;gap:44px}
.fgrid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:820px){
.menu{display:none}
.nav{height:68px}
.nav-cta{margin-left:auto}
.nav-cta .btn-ghost{display:none}
.hero{min-height:86vh}
.hero-inner{padding-bottom:50px}
section{padding:72px 0}
.promise .w{grid-template-columns:1fr}
.promise div{padding:18px 22px;text-align:left;display:flex;align-items:center;gap:12px}
.promise b{margin-bottom:0}
.stats .w{grid-template-columns:1fr 1fr}
.fgrid{grid-template-columns:1fr}
.mbar{display:flex}
body{padding-bottom:72px}
.sec-head{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:560px){
.w{padding:0 20px}
h1{font-size:clamp(40px,11vw,64px)}
.grid{grid-template-columns:1fr}
.prod-img{aspect-ratio:4/3.4}
.cform{border-radius:24px;flex-direction:column;padding:16px;gap:0}
.cform input,.cform select{border-bottom:1px solid var(--line);padding:14px 6px}
.cform button{margin-top:12px}
.fgrid{gap:0}
}
</style>
</head>
<body>
<div class="topbar">淮南主城区鲜奶配送到家 · 新客首单立减 · 企业团购/加盟合作致电 400-XXX-XXXX</div>
<header>
<div class="w nav">
<a href="#top" class="logo"><i>益</i>益益乳业</a>
<nav class="menu">
<a href="#products">产品</a>
<a href="#trace">溯源</a>
<a href="#checker">配送范围</a>
<a href="#reviews">评价</a>
<a href="#biz">合作</a>
<a href="#faq">常见问题</a>
</nav>
<div class="nav-cta">
<a href="#checker" class="btn btn-ghost">查配送</a>
<a href="#checker" class="btn btn-green">立即订奶</a>
</div>
</div>
</header>
<!-- HERO -->
<section class="hero" id="top">
<div class="hero-bg">
<img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?auto=format&fit=crop&w=1600&q=80" alt="新鲜牛奶" onerror="this.style.display='none'">
</div>
<div class="w hero-inner">
<div class="hero-badge"><i></i>EST. 1998 · HUAINAN</div>
<h1>新鲜,<br>是一种<span>日常</span>。</h1>
<p class="hero-sub">淮南人身边的鲜奶专家。本地牧场,全程冷链,每日送达——让每一口都恰到好处。</p>
<div class="hero-actions">
<a href="#products" class="btn btn-white">探索产品</a>
<a href="#checker" class="btn btn-ghost" style="color:#fff;border-color:rgba(255,255,255,.6)">查询配送范围</a>
</div>
<div class="hero-meta">
<span>FRESH MILK · LOCAL DAIRY · DAILY DELIVERY</span>
<div class="scroll-hint"><i></i><span>SCROLL</span></div>
</div>
</div>
<div class="seal">
<svg viewBox="0 0 120 120">
<defs><path id="cp" d="M 60,60 m -44,0 a 44,44 0 1,1 88,0 a 44,44 0 1,1 -88,0"/></defs>
<text><textPath href="#cp">FRESH DAILY · HUAINAN · SINCE 1998 · 益益乳业 ·</textPath></text>
</svg>
<div class="core">新鲜<br>每日</div>
</div>
</section>
<!-- 承诺条 -->
<div class="promise">
<div class="w">
<div><b>本地牧场</b><span>缩短运输,锁住新鲜</span></div>
<div><b>全程冷链</b><span>低温配送,温度可溯</span></div>
<div><b>每日送达</b><span>主城区定时配送上门</span></div>
</div>
</div>
<!-- 产品 -->
<section class="products" id="products">
<div class="w">
<div class="sec-head rv">
<div>
<div class="label">Products</div>
<h2>选择你的日常。</h2>
</div>
<a href="#checker" class="more">查看全部产品 →</a>
</div>
<div class="grid">
<article class="prod rv">
<div class="prod-img">
<img src="https://images.unsplash.com/photo-1563636619-e9143da7973b?auto=format&fit=crop&w=700&q=80" alt="每日鲜牛奶" loading="lazy" onerror="this.style.display='none'">
<span class="prod-tag">01 / 经典</span>
</div>
<div class="prod-body">
<h3>每日鲜牛奶</h3>
<p>每日新鲜,适合全家日常饮用,营养好吸收。</p>
<div class="prod-foot"><span>¥ 4.5 起</span><span class="arr">→</span></div>
</div>
</article>
<article class="prod rv">
<div class="prod-img">
<img src="https://images.unsplash.com/photo-1488477181946-6428a0291777?auto=format&fit=crop&w=700&q=80" alt="常温酸奶" loading="lazy" onerror="this.style.display='none'">
<span class="prod-tag">02 / 醇厚</span>
</div>
<div class="prod-body">
<h3>常温酸奶</h3>
<p>口感醇厚,助消化,早餐与加餐都合适。</p>
<div class="prod-foot"><span>¥ 5.0 起</span><span class="arr">→</span></div>
</div>
</article>
<article class="prod rv">
<div class="prod-img">
<img src="https://images.unsplash.com/photo-1571212515416-fef01fc43637?auto=format&fit=crop&w=700&q=80" alt="儿童成长奶" loading="lazy" onerror="this.style.display='none'">
<span class="prod-tag">03 / 成长</span>
</div>
<div class="prod-body">
<h3>儿童成长奶</h3>
<p>专为成长设计,营养配比更贴合孩子需求。</p>
<div class="prod-foot"><span>¥ 6.0 起</span><span class="arr">→</span></div>
</div>
</article>
<article class="prod rv">
<div class="prod-img">
<img src="https://images.unsplash.com/photo-1500595046743-cd271d694d30?auto=format&fit=crop&w=700&q=80" alt="家庭套餐" loading="lazy" onerror="this.style.display='none'">
<span class="prod-tag">04 / 家庭</span>
</div>
<div class="prod-body">
<h3>家庭套餐</h3>
<p>一周 / 一月配送,省心更划算,随时可调周期。</p>
<div class="prod-foot"><span>¥ 128 起 / 月</span><span class="arr">→</span></div>
</div>
</article>
<article class="prod rv">
<div class="prod-img">
<img src="https://images.unsplash.com/photo-1516467508483-a7212febe31a?auto=format&fit=crop&w=700&q=80" alt="企业团购" loading="lazy" onerror="this.style.display='none'">
<span class="prod-tag">05 / 企业</span>
</div>
<div class="prod-body">
<h3>企业团购</h3>
<p>员工福利、学校订奶,专人对接,开票无忧。</p>
<div class="prod-foot"><span>按需报价</span><span class="arr">→</span></div>
</div>
</article>
</div>
</div>
</section>
<!-- 溯源 -->
<section class="trace" id="trace">
<div class="w">
<div class="sec-head rv">
<div>
<div class="label">Traceability</div>
<h2>从牧场到餐桌,<br>每一步都看得见。</h2>
</div>
</div>
<div class="trace-body">
<div class="trace-photo rv">
<img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?auto=format&fit=crop&w=900&q=80" alt="新鲜牛奶" loading="lazy" onerror="this.style.display='none'">
</div>
<div class="trace-list rv">
<div class="trace-item">
<div class="num">01</div>
<div><h4>本地牧场</h4><p>奶源来自本地合作牧场,缩短运输时间,锁住新鲜。</p></div>
</div>
<div class="trace-item">
<div class="num">02</div>
<div><h4>生产流程</h4><p>标准化生产车间,全流程质量把控,批次可追溯。</p></div>
</div>
<div class="trace-item">
<div class="num">03</div>
<div><h4>冷链配送</h4><p>全程低温冷链,配送员按线路定时送达。</p></div>
</div>
<div class="trace-item">
<div class="num">04</div>
<div><h4>批次检测</h4><p>每批次检测留档,品质有据可依。</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- 数据 -->
<div class="stats">
<div class="w">
<div><b>5000+</b><span>服务家庭</span></div>
<div><b>30+</b><span>配送点位</span></div>
<div><b>4.9</b><span>满意度</span></div>
<div><b>5区</b><span>主城覆盖</span></div>
</div>
</div>
<!-- 配送查询 -->
<section class="checker" id="checker">
<div class="w">
<div class="check-inner">
<div class="rv">
<div class="label">Delivery Area</div>
<h2>查查你家能不能送。</h2>
</div>
<div class="cform rv">
<input type="text" id="ai" placeholder="输入小区名称,如:阳光花园">
<select id="ds">
<option value="">所在区域</option>
<option value="田家庵区">田家庵区</option>
<option value="大通区">大通区</option>
<option value="谢家集区">谢家集区</option>
<option value="八公山区">八公山区</option>
<option value="潘集区">潘集区</option>
</select>
<button class="btn btn-green" id="cb">查询</button>
</div>
<div class="cres" id="rs"></div>
<div class="careas rv">
<span>田家庵区</span><span>大通区</span><span>谢家集区</span><span>八公山区</span><span>潘集区</span>
</div>
</div>
</div>
</section>
<!-- 评价 -->
<section class="reviews" id="reviews">
<div class="w">
<div class="sec-head rv">
<div>
<div class="label">Reviews</div>
<h2>他们这样说。</h2>
</div>
</div>
<div class="rev-grid">
<div class="rev rv">
<div class="q">"</div>
<p>每天早上门口就有鲜奶,孩子上学前直接喝,省了去超市的时间。</p>
<div class="who"><div class="av">王</div><div><b>王女士</b><span>田家庵区 · 宝妈</span></div></div>
</div>
<div class="rev rv">
<div class="q">"</div>
<p>订了一个月套餐,配送很准时,临时改周期客服也能帮忙调整。</p>
<div class="who"><div class="av">李</div><div><b>李先生</b><span>大通区 · 上班族</span></div></div>
</div>
<div class="rev rv">
<div class="q">"</div>
<p>公司员工福利订奶,专人对接,开票也方便,同事反馈都不错。</p>
<div class="who"><div class="av">张</div><div><b>张经理</b><span>谢家集区 · 企业客户</span></div></div>
</div>
</div>
</div>
</section>
<!-- 合作表单 -->
<section class="biz" id="biz">
<div class="w">
<div class="sec-head rv">
<div>
<div class="label">Partnership</div>
<h2>加盟 · 团购 · 学校订奶。</h2>
</div>
</div>
<div class="form-wrap rv">
<form id="bf">
<div class="fgrid">
<div class="field"><label>姓名</label><input type="text" id="n" placeholder="您的姓名" required></div>
<div class="field"><label>联系电话</label><input type="tel" id="ph" placeholder="手机号" required></div>
<div class="field"><label>所在区域</label><select id="ar"><option value="">请选择</option><option>田家庵区</option><option>大通区</option><option>谢家集区</option><option>八公山区</option><option>潘集区</option><option>其他</option></select></div>
<div class="field"><label>合作类型</label><select id="ty"><option value="">请选择</option><option>加盟合作</option><option>企业团购</option><option>学校订奶</option><option>经销商咨询</option></select></div>
<div class="field full"><label>备注</label><textarea id="nt" placeholder="简单描述您的需求,例如:公司 50 人团购、想开社区配送点等"></textarea></div>
</div>
<button type="submit" class="btn btn-green form-submit">提交咨询</button>
<div class="form-tip">提交即表示同意我们通过电话或微信与您联系,信息仅用于业务沟通。</div>
<div class="toast" id="ts"></div>
</form>
</div>
</div>
</section>
<!-- FAQ -->
<section class="faq" id="faq">
<div class="w">
<div class="sec-head rv">
<div>
<div class="label">FAQ</div>
<h2>常见问题。</h2>
</div>
</div>
<div class="faq-list rv">
<details open><summary>配送范围有哪些区域?</summary><p>目前覆盖淮南主城区:田家庵区、大通区、谢家集区、八公山区、潘集区。部分小区可送达,建议在上方输入小区名查询,或致电客服确认。</p></details>
<details><summary>多久送一次?</summary><p>支持每日配送、隔日配送、工作日配送等多种周期,下单时可根据家庭饮用习惯选择,后续也可联系客服调整。</p></details>
<details><summary>可以退订或暂停吗?</summary><p>可以。套餐支持暂停与退订,建议提前 1 天联系客服,已配送部分按实际结算。</p></details>
<details><summary>能开发票吗?</summary><p>可以开具正规发票,企业团购支持对公结算,下单时备注或联系客服提供开票信息即可。</p></details>
<details><summary>如何联系客服?</summary><p>可拨打 400-XXX-XXXX,或添加页面底部微信客服。服务时间:每日 8:00–20:00。</p></details>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="w">
<div class="fgrid">
<div>
<div class="fbrand"><i>益</i>益益乳业</div>
<p>淮南人身边的鲜奶专家。<br>本地牧场 · 全程冷链 · 每日送达。</p>
</div>
<div>
<h5>Products</h5>
<ul><li><a href="#products">鲜奶产品</a></li><li><a href="#checker">订奶到家</a></li><li><a href="#checker">配送范围</a></li><li><a href="#biz">企业团购</a></li></ul>
</div>
<div>
<h5>About</h5>
<ul><li><a href="#trace">品质溯源</a></li><li><a href="#reviews">客户评价</a></li><li><a href="#biz">加盟合作</a></li><li><a href="#faq">常见问题</a></li></ul>
</div>
<div>
<h5>Contact</h5>
<p>服务热线:400-XXX-XXXX<br>服务时间:每日 8:00–20:00<br>地址:安徽省淮南市XX区XX路XX号</p>
</div>
</div>
<div class="fbottom">
<span>© 2025 益益乳业 · 设计演示页面</span>
<span>隐私政策 · 服务条款 · 皖ICP备XXXXXXXX号</span>
</div>
</div>
</footer>
<div class="mbar">
<a href="tel:4000000000" class="m1">电话咨询</a>
<a href="#checker" class="m2">立即订奶</a>
</div>
<script>
/* 配送查询 */
const cov=['田家庵','大通','谢家集','八公山','潘集','洞山','泉山','龙湖','阳光','朝阳','国庆','舜耕','淮河','山南','新区','新村','花园','小区','广场','家园'];
const rs=document.getElementById('rs'),ai=document.getElementById('ai'),ds=document.getElementById('ds');
function chk(){
const k=ai.value.trim(),d=ds.value;
if(!k&&!d){rs.className='cres on no';rs.innerHTML='请先输入小区名称或选择所在区域。';return}
const t=k+d,ok=cov.some(c=>t.includes(c));
if(ok){rs.className='cres on ok';rs.innerHTML='<b>已覆盖。</b><br>'+(k?'「'+k+'」':d)+' 可安排鲜奶配送,请致电客服或点击立即订奶。'}
else{rs.className='cres on no';rs.innerHTML='<b>暂未覆盖。</b><br>「'+(k||d)+'」暂不在当前配送范围,致电 400-XXX-XXXX,覆盖后第一时间通知您。'}
}
document.getElementById('cb').onclick=chk;
ai.onkeydown=e=>{if(e.key==='Enter')chk()};
ds.onchange=()=>{if(ai.value.trim()||ds.value)chk()};
/* 表单 */
document.getElementById('bf').onsubmit=function(e){
e.preventDefault();
const p=document.getElementById('ph').value.trim(),t=document.getElementById('ts');
if(!/^1[3-9]\d{9}$/.test(p)){
t.className='toast on err';t.textContent='请输入正确的 11 位手机号。';return;
}
t.className='toast on ok';t.textContent='提交成功,我们将在 1 个工作日内联系您。';
this.reset();
};
/* 滚动显现 */
const io=new IntersectionObserver(es=>{
es.forEach((en,i)=>{
if(en.isIntersecting){setTimeout(()=>en.target.classList.add('in'),i*70);io.unobserve(en.target)}
})
},{threshold:.12});
document.querySelectorAll('.rv').forEach(el=>io.observe(el));
</script>
</body>
</html>