jinghui
ec8bfda853
- buy.html/css/js：实时拉取授权系统当前在售商品 → 选商品 → 选支付方式 → 下单 - background.js：新增 getCardTypes / authCreateOrder / authQueryOrder 三个消息与实现 - 支付成功自动发卡并激活本机；新增 alarms 权限做后台订单轮询（关页仍完成），12 小时未完成自动停 - sidepanel.js：licBuy 从跳 https://auth.88531.cn 改为打开内置 buy.html（不改服务端） - manifest 1.9.0 → 1.10.0 + alarms 权限 - CHANGELOG/README 同步：新增条目、文件结构、内置购买页说明、Gitea 源
137 lines
3.6 KiB
CSS
137 lines
3.6 KiB
CSS
/* 当前商品选择页 —— B站评论助手（B站蓝 #00A1D6） */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: #f6f7f9;
|
||
color: #222;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.page { max-width: 720px; margin: 0 auto; padding: 28px 18px 40px; }
|
||
|
||
.head { text-align: center; margin-bottom: 26px; }
|
||
|
||
.logo {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
background: #00a1d6;
|
||
border-radius: 20px;
|
||
padding: 4px 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.head h1 { font-size: 26px; margin-bottom: 10px; }
|
||
.flow { font-size: 13px; color: #888; }
|
||
|
||
section {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
h2 {
|
||
font-size: 17px;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: #00a1d6;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
flex: none;
|
||
}
|
||
|
||
.package-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
|
||
|
||
.package {
|
||
border: 2px solid #eee;
|
||
border-radius: 10px;
|
||
padding: 16px 14px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.18s ease;
|
||
}
|
||
|
||
.package:hover { border-color: #a8ddf0; transform: translateY(-2px); }
|
||
.package.active { border-color: #00a1d6; background: #f2fbff; }
|
||
|
||
.pkg-name { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
|
||
.pkg-price { font-size: 24px; font-weight: 700; color: #00a1d6; margin-bottom: 6px; }
|
||
.pkg-dur { font-size: 12px; color: #999; margin-bottom: 12px; }
|
||
|
||
.pkg-btn {
|
||
width: 100%;
|
||
padding: 8px 0;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: #00a1d6;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: background 0.18s ease;
|
||
}
|
||
|
||
.pkg-btn:hover { background: #0089ba; }
|
||
.package.active .pkg-btn { background: #0089ba; }
|
||
|
||
.loading, .empty { grid-column: 1 / -1; text-align: center; color: #999; font-size: 13px; padding: 24px 0; }
|
||
|
||
.chosen { font-size: 13px; color: #666; margin-bottom: 14px; }
|
||
.chosen b { color: #00a1d6; }
|
||
|
||
.pay-methods { display: flex; gap: 14px; }
|
||
|
||
.pay-btn {
|
||
flex: 1;
|
||
padding: 14px 0;
|
||
border: 2px solid #eee;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
transition: all 0.18s ease;
|
||
}
|
||
|
||
.pay-btn.alipay { color: #1677ff; border-color: #bcd6ff; }
|
||
.pay-btn.wxpay { color: #09bb07; border-color: #b6e6b8; }
|
||
.pay-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
|
||
.pay-btn.alipay:hover { border-color: #1677ff; }
|
||
.pay-btn.wxpay:hover { border-color: #09bb07; }
|
||
|
||
.tip { margin-top: 12px; font-size: 12px; color: #999; }
|
||
|
||
.order-status {
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
padding: 14px;
|
||
border-radius: 8px;
|
||
background: #f6f7f9;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.order-status.pending { color: #b26a00; background: #fff8e6; }
|
||
.order-status.error { color: #c62828; background: #fdecea; }
|
||
.order-status.success { color: #1b5e20; background: #eef7ee; }
|
||
|
||
.ok-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
|
||
.ok-line { font-size: 13px; margin-bottom: 4px; }
|
||
.ok-line b { color: #1b5e20; }
|
||
.muted { color: #999; font-size: 12px; }
|
||
|
||
.foot { text-align: center; font-size: 12px; color: #999; line-height: 1.9; }
|
||
.foot a { color: #00a1d6; text-decoration: none; }
|
||
.foot a:hover { text-decoration: underline; }
|