WonderableAI/shaguabijia-app-server
10
0
Fork 0
Code Issues Pull Requests 8 Actions Packages Projects Releases Wiki Activity

feat(cps): 淘宝落地页改用设计图主视觉 + 复制按钮上提至 75% 屏高

Browse Source 
- banner/card 手画区域整体换成设计图 /media/taobao_landing.jpg(~240KB jpg)
- 复制淘口令按钮从底部固定上提到 top:75vh, 上方留白
- 图入库(data/media 白名单, 同 dl.html 先例), 同域 /media serve
- 淘口令注入 / 复制 / toast 逻辑不变

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
marco
2026-06-17 20:53:34 +08:00
parent 3a40f617bd
commit 7368a1ca8a
3 changed files with 6 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -30,6 +30,7 @@ data/*
!data/media/
data/media/*
!data/media/dl.html
!data/media/taobao_landing.jpg
secrets/*
!secrets/.gitkeep
app/api/v1/cps_redirect.py
+5 -38
View File
@@ -60,7 +60,7 @@ def cps_copy(code: str, request: Request, db: Session = Depends(get_db)) -> dict
def _taobao_landing_html(token: str) -> str:
"""淘宝落地页 H5(红色喜庆,两步引导,底部复制淘口令按钮)。token 安全嵌入 JS。"""
"""淘宝落地页 H5(主视觉为设计图 /media/taobao_landing.jpg,复制淘口令按钮在 75% 屏高)。token 安全嵌入 JS。"""
return _TAOBAO_HTML.replace("__TOKEN_JS__", json.dumps(token))
@@ -72,27 +72,9 @@ _TAOBAO_HTML = """<!DOCTYPE html>
<title>淘宝闪购 · 天天领红包</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,"PingFang SC",sans-serif;background:#fff0ef;color:#333;padding-bottom:120px}
.banner{background:linear-gradient(180deg,#ff4d4f,#ff7a45);color:#fff;padding:26px 20px 62px;text-align:center;border-radius:0 0 26px 26px}
.tag{display:inline-block;background:#fff;color:#ff4d4f;font-weight:700;font-size:15px;padding:4px 16px;border-radius:14px;margin-bottom:14px}
.banner h1{font-size:30px;font-weight:800;line-height:1.25;letter-spacing:1px}
.banner .pill{display:inline-block;margin-top:14px;background:#ffd54a;color:#a52800;font-weight:700;font-size:14px;padding:6px 18px;border-radius:16px}
.card{background:#fff;margin:-42px 16px 0;border-radius:18px;padding:22px 18px;box-shadow:0 8px 24px rgba(255,77,79,.12)}
.card .title{text-align:center;color:#ff4d4f;font-weight:800;font-size:18px;background:linear-gradient(90deg,#fff,#ffe1e1,#fff);padding:9px;border-radius:18px;margin-bottom:16px}
.step{display:flex;align-items:center;margin:14px 4px;font-size:15px}
.step .num{flex:none;width:22px;height:22px;border-radius:50%;background:#222;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-right:10px}
.step b{color:#ff4d4f}
.redbao{background:linear-gradient(135deg,#ff5b5b,#ff3b3b);border-radius:14px;margin-top:16px;padding:16px}
.redbao .rb-head{text-align:center;color:#fff;font-size:18px;font-weight:800;margin-bottom:2px}
.redbao .rb-sub{text-align:center;color:#fff;font-size:12px;opacity:.85;margin-bottom:10px}
.coupon{background:#fff;color:#ff3b3b;border-radius:10px;padding:11px 14px;display:flex;align-items:center;margin-top:10px}
.coupon .amt{font-size:24px;font-weight:800;flex:none;width:92px}
.coupon .amt small{font-size:11px;display:block;color:#999;font-weight:400}
.coupon .desc{flex:1}
.coupon .desc .c-t{font-weight:700;font-size:15px;color:#333}
.coupon .desc .c-s{font-size:11px;color:#999}
.coupon .go{flex:none;background:#ff3b3b;color:#fff;font-size:13px;padding:6px 14px;border-radius:14px}
.btn-wrap{position:fixed;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(180deg,rgba(255,240,239,0),#fff0ef 45%)}
body{font-family:-apple-system,"PingFang SC",sans-serif;background:#fff0ef;color:#333;min-height:100vh}
.hero{display:block;width:100%}
.btn-wrap{position:fixed;left:0;right:0;top:75vh;padding:0 20px}
.btn{display:block;width:100%;background:linear-gradient(90deg,#ff5b5b,#ff3b3b);color:#fff;font-size:19px;font-weight:800;text-align:center;padding:16px;border:none;border-radius:30px;box-shadow:0 6px 16px rgba(255,59,59,.4)}
.btn:active{transform:scale(.98)}
.toast{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);background:rgba(0,0,0,.82);color:#fff;padding:12px 22px;border-radius:10px;font-size:15px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:99;white-space:nowrap}
@@ -100,22 +82,7 @@ body{font-family:-apple-system,"PingFang SC",sans-serif;background:#fff0ef;color
</style>
</head>
<body>
<div class="banner">
<div class="tag">淘宝闪购</div>
<h1>天天来闪购<br>下单抽免单</h1>
<div class="pill">最高 15-15 红包 · 天天可领</div>
</div>
<div class="card">
<div class="title">最高 15-15 红包 天天可领!</div>
<div class="step"><span class="num">1</span><div>第一步:点击下方按钮 <b>复制淘口令</b></div></div>
<div class="step"><span class="num">2</span><div>第二步:打开 <b>淘宝 App</b>,自动弹出领取红包</div></div>
<div class="redbao">
<div class="rb-head">外卖红包 · 今日已到账</div>
<div class="rb-sub">明天继续来领哦</div>
<div class="coupon"><div class="amt">¥15<small>满15可用</small></div><div class="desc"><div class="c-t">外卖红包</div><div class="c-s">仅限于美食外卖</div></div><div class="go">去使用</div></div>
<div class="coupon"><div class="amt">¥7<small>满9可用</small></div><div class="desc"><div class="c-t">外卖红包</div><div class="c-s">仅限于美食外卖</div></div><div class="go">去使用</div></div>
</div>
</div>
<img class="hero" src="/media/taobao_landing.jpg" alt="淘宝闪购 天天领红包">
<div class="btn-wrap"><button class="btn" onclick="copyToken()">复制口令去淘宝领红包</button></div>
<div class="toast" id="toast"></div>
<script>
data/media/taobao_landing.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB