diff --git a/用户端APP/福利专区.html b/用户端APP/福利专区.html index 170a0fb..b1551bc 100644 --- a/用户端APP/福利专区.html +++ b/用户端APP/福利专区.html @@ -179,6 +179,217 @@ opacity: 0.7; } + /* 积分订单样式 */ + .points-orders-container { + background: white; + border-radius: 15px; + padding: 20px; + margin-bottom: 15px; + } + + .points-order-item { + background: #f8f9fa; + border-radius: 12px; + padding: 15px; + margin-bottom: 15px; + border: 1px solid #e9ecef; + } + + .points-order-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + padding-bottom: 10px; + border-bottom: 1px solid #e9ecef; + } + + .points-order-no { + font-size: 14px; + font-weight: bold; + color: #333; + } + + .points-order-status { + font-size: 12px; + padding: 4px 8px; + border-radius: 12px; + font-weight: 500; + } + + .points-order-status.completed { + background: #f6ffed; + color: #52c41a; + } + + .points-order-status.pending { + background: #fff7e6; + color: #fa8c16; + } + + .points-order-status.processing { + background: #e6f7ff; + color: #1890ff; + } + + .points-order-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + } + + .points-order-detail { + flex: 1; + } + + .points-order-time { + font-size: 12px; + color: #666; + margin-bottom: 5px; + } + + .points-order-fees { + font-size: 12px; + color: #666; + } + + .points-order-total { + text-align: right; + color: #ff6b35; + font-size: 16px; + font-weight: bold; + } + + .points-order-expand { + text-align: center; + margin-top: 10px; + } + + .expand-toggle { + background: none; + border: 1px solid #ff6b35; + color: #ff6b35; + padding: 5px 15px; + border-radius: 15px; + font-size: 12px; + cursor: pointer; + transition: all 0.3s; + } + + .expand-toggle:hover { + background: #ff6b35; + color: white; + } + + .points-order-stores { + display: none; + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid #e9ecef; + } + + .points-order-stores.expanded { + display: block; + } + + .points-store-item { + background: white; + border-radius: 8px; + padding: 12px; + margin-bottom: 10px; + border: 1px solid #e9ecef; + } + + .points-store-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + font-size: 13px; + font-weight: 500; + } + + .points-store-name { + color: #333; + } + + .points-product-list { + display: none; + } + + .points-product-list.expanded { + display: block; + } + + .points-product-item { + display: flex; + align-items: center; + padding: 8px 0; + border-bottom: 1px solid #f0f0f0; + } + + .points-product-item:last-child { + border-bottom: none; + } + + .points-product-image { + width: 40px; + height: 40px; + border-radius: 6px; + background: linear-gradient(135deg, #ff6b35, #f7931e); + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + margin-right: 10px; + flex-shrink: 0; + } + + .points-product-info { + flex: 1; + min-width: 0; + } + + .points-product-name { + font-size: 12px; + color: #333; + margin-bottom: 2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .points-product-specs { + font-size: 11px; + color: #666; + display: flex; + gap: 10px; + } + + .points-product-price { + text-align: right; + font-size: 12px; + color: #ff6b35; + font-weight: 500; + } + + .points-product-points { + font-size: 11px; + color: #666; + margin-top: 2px; + } + + .store-expand-btn { + background: none; + border: 1px solid #ddd; + color: #666; + padding: 2px 8px; + border-radius: 10px; + font-size: 11px; + cursor: pointer; + } + /* 积分专区样式 */ .points-section { background: white; @@ -795,6 +1006,7 @@