jack/digital-psychology
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

付费墙: blur+opacity加强遮盖, confirm改自定义支付弹窗

Browse Source
This commit is contained in:
jackyu66git
2026-07-14 13:27:43 +08:00
parent 060b36208c
commit e6ad46fe87
2 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jiema.html
+37 -5
View File
@@ -49,7 +49,7 @@ body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
/* 付费墙 */
.lock{position:relative;margin-top:14px;border-radius:14px;overflow:hidden;
border:1px solid #f2e6d0;}
.lock .blur{filter:blur(5px);pointer-events:none;user-select:none;
.lock .blur{filter:blur(10px);opacity:0.35;pointer-events:none;user-select:none;
padding:16px;font-size:13px;line-height:1.9;color:#666;}
.lock .cover{position:absolute;inset:0;background:linear-gradient(180deg,
rgba(255,255,255,.4),rgba(255,255,255,.92));display:flex;flex-direction:column;
@@ -97,6 +97,23 @@ body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
.modal canvas{width:100%;border-radius:10px;}
.modal .m-tip{font-size:12px;color:var(--sub);margin:10px 0;}
.modal .m-close{color:var(--pri);font-size:14px;cursor:pointer;}
/* 支付弹窗 */
.pay-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;
align-items:center;justify-content:center;z-index:100;padding:20px;}
.pay-modal.on{display:flex;}
.pay-modal .pm-box{background:#fff;border-radius:20px;padding:28px 24px 22px;
max-width:300px;width:100%;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.15);}
.pay-modal .pm-icon{font-size:36px;margin-bottom:10px;}
.pay-modal .pm-title{font-size:18px;font-weight:700;color:#333;margin-bottom:4px;}
.pay-modal .pm-desc{font-size:13px;color:var(--sub);margin-bottom:6px;line-height:1.6;}
.pay-modal .pm-price{font-size:28px;font-weight:800;color:var(--pri);margin:8px 0;}
.pay-modal .pm-price small{font-size:14px;font-weight:400;color:var(--sub);}
.pay-modal .pm-features{font-size:12px;color:#888;margin:10px 0 14px;line-height:1.9;}
.pay-modal .pm-btn{display:block;width:100%;background:var(--pri);color:#fff;border:none;
padding:12px;border-radius:24px;font-size:15px;font-weight:700;cursor:pointer;
box-shadow:0 4px 14px rgba(229,77,66,.35);margin-bottom:8px;}
.pay-modal .pm-cancel{font-size:12px;color:#aaa;cursor:pointer;background:none;border:none;}
</style>
</head>
<body>
@@ -122,6 +139,19 @@ body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
</div>
</div>
<!-- 支付弹窗 -->
<div class="pay-modal" id="payModal">
<div class="pm-box">
<div class="pm-icon">🔮</div>
<div class="pm-title">解锁完整深度报告</div>
<div class="pm-desc">一次解锁，永久查看所有解读</div>
<div class="pm-price">¥39.9</div>
<div class="pm-features">✨ 天赋优势深度解读<br>✨ 人生课题方向指引<br>✨ 12组联合码全解析<br>✨ 五行体质完整方案</div>
<button class="pm-btn" onclick="doUnlock()">立即解锁 →</button>
<button class="pm-cancel" onclick="document.getElementById('payModal').classList.remove('on')">暂不需要</button>
</div>
</div>
<script src="common.js"></script>
<script>
/* ---------- 工具 ---------- */
@@ -273,10 +303,12 @@ function render(){
/* ---------- 付费墙 ---------- */
function unlock(){
if(confirm('【模拟支付】\n\n解锁完整深度报告 ¥39.9\n\n确认支付？')){
localStorage.setItem('jiema_paid','1');
document.querySelectorAll('.lock').forEach(function(el){el.classList.add('unlocked');});
}
document.getElementById('payModal').classList.add('on');
}
function doUnlock(){
localStorage.setItem('jiema_paid','1');
document.querySelectorAll('.lock').forEach(function(el){el.classList.add('unlocked');});
document.getElementById('payModal').classList.remove('on');
}
/* ---------- 契合度（免费仅分数，深度引导付费/双人报告） ---------- */