悦享会员中心 HTML 单页源码

这是一个面向会员制电商、订阅服务或品牌私域运营的会员中心单页模板。整体采用深色蓝紫渐变作为背景，配合半透明毛玻璃卡片，把「余额积分、成长值、优惠券、最近订单、快捷入口」等高频模块整合在同一屏内，信息层级清晰，视觉上也更有高级感和沉浸感。

页面在设计上使用了大圆角卡片、细腻的阴影过渡和微渐变高亮，让数据卡片在深色背景中显得通透不沉闷。响应式布局在手机端会自动把两列模块改为单列堆叠，保证移动端会员也能顺畅查看自己的权益与订单状态。

非常适合需要快速搭建会员后台原型、展示 VIP 权益体系，或为客户演示会员系统视觉方案的设计师与开发者。只需修改里面的文字、颜色和数字，就能直接落地成自己的会员中心页面。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悦享会员 · 个人会员中心</title>
<style>
:root{
  --bg:#0f0c29; --bg2:#241b4e; --bg3:#3a1c71;
  --glass:rgba(255,255,255,.08); --line:rgba(255,255,255,.14);
  --txt:#eef0ff; --sub:#a9a7d6; --acc:#7c5cff; --acc2:#21d4fd;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--txt);
  background:radial-gradient(1200px 600px at 80% -10%,var(--bg3),transparent),
             radial-gradient(900px 500px at -10% 110%,var(--acc),transparent),
             linear-gradient(160deg,var(--bg),var(--bg2));
  min-height:100vh;padding:28px 16px}
.wrap{max-width:980px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.brand{font-size:22px;font-weight:800;letter-spacing:1px}
.brand span{background:linear-gradient(90deg,var(--acc2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;border:2px solid var(--line)}
.hero{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:26px;
  backdrop-filter:blur(14px);display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.hero .who h1{font-size:24px;margin-bottom:6px}
.hero .who p{color:var(--sub);font-size:14px}
.tier{margin-left:auto;text-align:right}
.tier .badge{display:inline-block;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;
  background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0b0820}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:18px;backdrop-filter:blur(10px)}
.card .k{color:var(--sub);font-size:13px;margin-bottom:8px}
.card .v{font-size:26px;font-weight:800}
.card .v small{font-size:13px;color:var(--sub);font-weight:500}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:22px;backdrop-filter:blur(10px)}
.panel h3{font-size:16px;margin-bottom:14px}
.nav{display:flex;flex-direction:column;gap:6px}
.nav a{color:var(--txt);text-decoration:none;padding:11px 14px;border-radius:12px;font-size:14px;
  display:flex;justify-content:space-between;transition:.2s}
.nav a:hover{background:rgba(124,92,255,.22)}
.nav a .dot{color:var(--sub);font-size:12px}
.list{list-style:none}
.list li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.list li:last-child{border-bottom:none}
.list .st{font-size:12px;color:var(--acc2)}
.btn{display:inline-block;margin-top:6px;padding:10px 18px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0b0820;font-weight:700;font-size:14px}
@media(max-width:760px){.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.tier{margin-left:0}}
</style>
</head>
<body>
<div class="wrap">
  <div class="top">
    <div class="brand">悦享<span>会员</span></div>
    <div class="avatar">林</div>
  </div>

  <div class="hero">
    <div class="who">
      <h1>晚上好，林晚star ✨</h1>
      <p>这是你的专属会员中心，权益、订单与成长一目了然。</p>
    </div>
    <div class="tier">
      <span class="badge">钻石会员 · DIAMOND</span>
      <p style="color:var(--sub);font-size:12px;margin-top:8px">有效期至 2027-03-01</p>
    </div>
  </div>

  <div class="cards">
    <div class="card"><div class="k">可用积分</div><div class="v">12,480</div></div>
    <div class="card"><div class="k">成长值</div><div class="v">8,920<small> / 10000</small></div></div>
    <div class="card"><div class="k">优惠券</div><div class="v">5<small> 张</small></div></div>
    <div class="card"><div class="k">待收货</div><div class="v">2<small> 单</small></div></div>
  </div>

  <div class="grid2">
    <div class="panel">
      <h3>最近订单</h3>
      <ul class="list">
        <li><span>悦享礼盒 · 春日限定</span><span class="st">已签收</span></li>
        <li><span>会员专享课 · 咖啡品鉴</span><span class="st">待开课</span></li>
        <li><span>联名周边 · 帆布包</span><span class="st">运输中</span></li>
        <li><span>生日惊喜券</span><span class="st">已到账</span></li>
      </ul>
      <button class="btn">查看全部订单</button>
    </div>
    <div class="panel">
      <h3>快捷中心</h3>
      <nav class="nav">
        <a href="#">我的权益 <span class="dot">12 项 ›</span></a>
        <a href="#">积分商城 <span class="dot">去兑换 ›</span></a>
        <a href="#">专属客服 <span class="dot">在线 ›</span></a>
        <a href="#">账户设置 <span class="dot">›</span></a>
      </nav>
    </div>
  </div>
</div>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1933.html