milky/asd-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 网页端支付页响应式设计-紧凑布局+手机端适配

Browse Source
This commit is contained in:
milky0217
2026-06-02 13:13:55 +08:00
parent ebf2fcc383
commit 173bd25d74
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/handlers/payment.rs
View File

@@ -332,19 +332,19 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
/* ===== 会员区域 ===== */
.paid-section { display: none; }
.paid-banner { background: linear-gradient(135deg, #07c160, #06ad56); color: #fff; padding: 48px 24px; text-align: center; }
.paid-banner h2 { font-size: 24px; margin-bottom: 8px; }
.paid-banner p { font-size: 14px; opacity: 0.9; }
.paid-info { background: #fff; margin: -20px 16px 16px; border-radius: 16px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.paid-info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
.paid-banner { background: linear-gradient(135deg, #07c160, #06ad56); color: #fff; padding: 32px 20px 28px; text-align: center; }
.paid-banner h2 { font-size: 20px; margin-bottom: 4px; }
.paid-banner p { font-size: 13px; opacity: 0.85; }
.paid-info { background: #fff; margin: -16px 12px 0; border-radius: 14px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); position: relative; z-index: 1; }
.paid-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
.paid-info-row:last-child { border-bottom: none; }
.paid-info-label { color: #999; }
.paid-info-value { color: #333; font-weight: 500; }
.paid-badge { display: inline-block; background: #07c160; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
/* ===== 套餐区域 ===== */
.packages { display: none; max-width: 480px; margin: 0 auto; padding: 0 16px 80px; }
.packages-title { text-align: center; padding: 40px 0 24px; font-size: 20px; color: #333; }
.packages { display: none; max-width: 480px; margin: 0 auto; padding: 0 12px 60px; }
.packages-title { text-align: center; padding: 28px 0 20px; font-size: 18px; color: #333; }
.pkg-card { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 16px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; position: relative; }
.pkg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.pkg-card.selected { border-color: #07c160; background: #f0f7ff; }
@@ -365,6 +365,21 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
/* 错误提示 */
.error-msg { background: #fff2f0; color: #cf1322; border: 1px solid #ffccc7; border-radius: 8px; padding: 12px; margin-bottom: 16px; font-size: 14px; display: none; }
@media (max-width: 480px) {
.paid-banner { padding: 24px 16px 20px; }
.paid-banner h2 { font-size: 18px; }
.paid-info { margin: -14px 8px 0; padding: 16px; border-radius: 12px; }
.paid-info-row { font-size: 13px; padding: 8px 0; }
.packages-title { font-size: 16px; padding: 20px 0 16px; }
.pkg-card { padding: 16px; margin-bottom: 12px; }
.pkg-name { font-size: 16px; }
.pkg-price { font-size: 26px; }
.pkg-desc { font-size: 12px; }
.pkg-original { font-size: 13px; }
.pkg-feature { font-size: 12px; }
.btn-pay { padding: 14px; font-size: 16px; }
}
</style>
</head>
<body>