注册时间2024-11-22
最后登录2026-5-13
在线时间1445 小时
UID1
买家信用
卖家信用
实力殿堂·绝代收藏家
|
交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！
您需要 登录 才可以下载或查看，没有账号？立即注册
×
逛网站的时候发现一个站的会员卡片还是不错的，不过他是没有手机端的，我这边适配了一下手机端，我觉得还是比较好看的，就一个简单的跳转，如果有技术自行跳转子比的modal的会员，喜欢的自行部署吧！
代码部署
直接将下面的代码丢到：WP后台–>>外观–>>小工具–>>自定义HTML即可！
- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
- <style>
- .member-card-container{max-width:100%;margin:0 auto;padding:10px}.member-st{width:100%;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(to right,#e0f2fe,#bae6fd);border:1px solid rgba(2,132,199,0.1);box-shadow:0 10px 25px -5px rgba(2,132,199,0.1),0 8px 10px -6px rgba(2,132,199,0.1)}.corner-decoration{position:absolute;width:60px;height:60px;background-color:rgba(255,255,255,0.2);z-index:5}.top-left{top:0;left:0;border-radius:0 0 60px 0}.top-right{top:0;right:0;border-radius:0 0 0 60px}.bottom-left{bottom:0;left:0;border-radius:0 60px 0 0}.bottom-right{bottom:0;right:0;border-radius:60px 0 0 0}.member-bgbox{position:absolute;inset:0;background-image:radial-gradient(rgba(2,132,199,0.06) 1px,transparent 1px);background-size:20px 20px;opacity:0.3}.decor-icon{position:absolute;color:rgba(2,132,199,0.2)}.icon-user{top:16px;left:16px;font-size:40px}.icon-diamond{bottom:16px;right:16px;font-size:40px}.icon-rocket{top:50%;left:50%;transform:translate(-50%,-50%);font-size:56px}.member-content{position:relative;z-index:10;padding:36px 24px 24px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px}@media (min-width:768px){.member-content{flex-direction:row}}.member-iconbox{font-size:48px;color:#0284c7}.member-title{flex-grow:1;text-align:center}@media (min-width:768px){.member-title{text-align:left}}.titbadge{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:bold;color:#0f172a;text-shadow:0 2px 4px rgba(0,0,0,0.1);margin-bottom:16px}.member-descsp{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;color:rgba(15,23,42,0.8)}@media (min-width:768px){.member-descsp{justify-content:flex-start}}.benefit-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.5);border-radius:20px;backdrop-filter:blur(4px)}.benefit-icon{color:#0284c7}.member-btnbox{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}@media (min-width:768px){.member-btnbox{align-items:flex-end;width:auto}}.member-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#0284c7;color:white;border-radius:24px;font-weight:500;text-decoration:none;box-shadow:0 4px 6px -1px rgba(2,132,199,0.2);width:100%;justify-content:center}@media (min-width:768px){.member-btn{width:auto}}
- </style>
- <div class="member-card-container">
- <div class="member-st">
- <div class="corner-decoration top-left"></div>
- <div class="corner-decoration top-right"></div>
- <div class="corner-decoration bottom-left"></div>
- <div class="corner-decoration bottom-right"></div>
- <div class="member-bgbox"></div>
- <i class="fa fa-user-circle decor-icon icon-user"></i>
- <i class="fa fa-diamond decor-icon icon-diamond"></i>
- <i class="fa fa-rocket decor-icon icon-rocket"></i>
- <div class="member-content">
- <div class="member-iconbox">
- <i class="fa fa-diamond"></i>
- </div>
- <div class="member-title">
- <div class="member-descsp">
- <div class="benefit-item">
- <i class="fa fa-lock benefit-icon"></i>
- <span>专享内容</span>
- </div>
- <div class="benefit-item">
- <i class="fa fa-bolt benefit-icon"></i>
- <span>优先支持</span>
- </div>
- <div class="benefit-item">
- <i class="fa fa-tag benefit-icon"></i>
- <span>会员折扣</span>
- </div>
- </div>
- </div>
- <div class="member-btnbox">
- <a href="/" class="member-btn">
- <span class="btn-text" id="member-action">续费/升级</span>
- <i class="fa fa-arrow-right"></i>
- </a>
- </div>
- </div>
- </div>
- </div>
【小飞侠提醒您：搜索时输入t1597代号，方便好记直达本帖！】 |
|
1
窥视卡
雷达卡
wu
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
顶顶卡
狗头保命
侦查卡
