diff --git a/pages/package-order/package-order.vue b/pages/package-order/package-order.vue index 1dc1329..2705774 100644 --- a/pages/package-order/package-order.vue +++ b/pages/package-order/package-order.vue @@ -7,21 +7,28 @@ - + {{ item.package_name }} - - - {{ formatData(item.data_allowance, item.data_unit) }} - - 有效期: {{ item.validity_days }} 天 - - {{ item.is_addon ? '加油包' : '正式套餐' }} - + + {{ item.is_addon ? '加油包' : '正式套餐' }} - {{ item.description }} - - ¥{{ formatMoney(item.retail_price) }} + + + 套餐流量 + {{ formatData(item.data_allowance, item.data_unit) }} + + + {{ item.validity_days }} + 天有效期 + + + {{ item.description }} + + + ¥ + {{ formatMoney(item.retail_price) }} + 立即订购 @@ -406,56 +413,117 @@ .package-card { margin-bottom: var(--space-md); + padding: 32rpx; + border: 1rpx solid rgba(0, 122, 255, 0.08); + box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.06); .package-header { - margin-bottom: var(--space-sm); + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 20rpx; + margin-bottom: 28rpx; .package-name { font-size: 32rpx; - font-weight: 600; + font-weight: 700; color: var(--text-primary); - } - - .header-right { - display: flex; - align-items: center; - gap: 12rpx; - - .validity-tag { - font-size: 24rpx; - color: var(--text-secondary); - padding: 4rpx 12rpx; - background: var(--gray-100); - border-radius: 8rpx; - } + line-height: 1.35; + flex: 1; } } - .package-data { - font-size: 48rpx; - font-weight: 700; - color: var(--primary); - margin-bottom: var(--space-sm); - letter-spacing: -1rpx; + .package-main { + display: flex; + align-items: stretch; + justify-content: space-between; + gap: 20rpx; + padding: 26rpx; + margin-bottom: 22rpx; + background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 122, 255, 0.02) 100%); + border-radius: 24rpx; + + .data-block { + flex: 1; + + .data-label { + font-size: 24rpx; + color: var(--text-tertiary); + margin-bottom: 8rpx; + } + } + + .package-data { + font-size: 52rpx; + font-weight: 800; + color: var(--primary); + line-height: 1.1; + letter-spacing: -1rpx; + } + + .validity-box { + min-width: 132rpx; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 18rpx 16rpx; + background: rgba(255, 255, 255, 0.78); + border: 1rpx solid rgba(0, 122, 255, 0.08); + border-radius: 20rpx; + + .validity-value { + font-size: 34rpx; + font-weight: 800; + color: var(--text-primary); + line-height: 1; + } + + .validity-label { + font-size: 22rpx; + color: var(--text-tertiary); + margin-top: 8rpx; + } + } } .package-desc { font-size: 26rpx; color: var(--text-secondary); - margin-bottom: var(--space-md); + line-height: 1.55; + margin-bottom: 24rpx; } .package-footer { + display: flex; align-items: center; + justify-content: space-between; + gap: 24rpx; + padding-top: 24rpx; + border-top: 1rpx solid var(--border-light); - .package-price { - font-size: 40rpx; - font-weight: 700; + .price-block { + display: flex; + align-items: baseline; color: var(--warning); + white-space: nowrap; + + .price-symbol { + font-size: 26rpx; + font-weight: 700; + margin-right: 4rpx; + } + + .package-price { + font-size: 44rpx; + font-weight: 800; + letter-spacing: -1rpx; + } } .btn { flex-shrink: 0; + min-width: 180rpx; } } }