zblog系统VIP介绍页面，支持一键添加，完美适配

1. 设计风格：采用现代简约风格 ，包含 4 个会员等级（免费、基础 、高级
   、旗舰）
   ，高级会员标注 "最受欢迎" 标签，视觉层次分明
   。

2. 响应式布局：适配移动端、平板和 PC 端 ，在不同设备上显示效果良好。

3. 交互效果：卡片 hover 上浮动画 、平滑滚动
   、回到顶部按钮等
   ，提升用户体验 。

4. ZBlog 兼容：

• 复用主题的头部和底部文件（header.php、footer.php），保持网站风格统一
  。

• 支持 ZBlog 的模板变量（如$zbp->Config('system')->blogname） ，动态显示网站名称。

• 可直接作为独立页面模板（page/vip.htm）
  ，在 ZBlog 后台创建页面时选择该模板 。

5. 无插件依赖：纯 HTML+CSS+JS 实现，无需安装任何插件 ，保持网站轻量
   。

使用方法

1. 在 ZBlog 主题目录（template/你的主题名/）下创建page文件夹（如果没有）。

2. 在page文件夹中创建vip.htm文件，将上述代码复制粘贴进去 。

3. 登录 ZBlog 后台
   ，创建新页面，模板选择 "vip"（即vip.htm）
   。

4. 发布页面后 ，访问该页面即可看到 VIP 介绍效果。

自定义修改建议

1. 颜色修改：在tailwind.config的colors中修改各会员等级的颜色和主色调 。

2. 内容修改：

• 修改会员名称 、价格
  、有效期等信息
  。

• 编辑权益列表（添加 / 删除li元素
  ，修改benefit-check/benefit-uncheck类控制是否勾选）。

• 更新常见问题内容，使其符合你的网站服务 。

3. 样式调整：根据需要修改卡片大小、间距 、阴影效果等（在@layer utilities中调整相关类）。

4. 跳转链接：将 "立即开通" 按钮的href属性修改为你的会员购买页面或支付链接
   。