diff --git a/pages/package-order/package-order.vue b/pages/package-order/package-order.vue index 7439591..cf1072c 100644 --- a/pages/package-order/package-order.vue +++ b/pages/package-order/package-order.vue @@ -9,18 +9,20 @@ {{ item.package_name }} - - {{ item.is_addon ? '加油包' : '正式套餐' }} + + {{ item.validity_days }}天 + + {{ item.is_addon ? '加油包' : '正式套餐' }} + - ¥{{ formatMoney(item.retail_price) }} + {{ formatData(item.data_allowance, item.data_unit) }} {{ item.description }} - - 流量: {{ formatData(item.data_allowance, item.data_unit) }} - 有效: {{ item.validity_days }}天 - - - 立即订购 + + ¥{{ formatMoney(item.retail_price) }} + + 立即订购 + @@ -35,6 +37,17 @@ {{ currentPackage?.package_name }} ¥{{ formatMoney(currentPackage?.retail_price) }} + + + 套餐流量 + {{ formatData(currentPackage?.data_allowance, currentPackage?.data_unit) }} + + + + 有效期 + {{ currentPackage?.validity_days }}天 + + @@ -49,10 +62,7 @@ - - 账户余额 - 余额: ¥{{ formatMoney(walletBalance) }} - + 账户余额(¥{{ formatMoney(walletBalance) }}) @@ -331,25 +341,42 @@ .package-header { margin-bottom: var(--space-sm); .package-name { font-size: 32rpx; font-weight: 600; 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; + } + } } - .package-price { - font-size: 40rpx; - font-weight: bold; - color: var(--warning); + .package-data { + font-size: 48rpx; + font-weight: 700; + color: var(--primary); margin-bottom: var(--space-sm); + letter-spacing: -1rpx; } .package-desc { font-size: 26rpx; color: var(--text-secondary); - margin-bottom: var(--space-sm); - } - .package-info { - display: flex; - gap: var(--space-lg); margin-bottom: var(--space-md); - .info-item { font-size: 24rpx; color: var(--text-tertiary); } } - .btn { margin-top: var(--space-sm); } + .package-footer { + align-items: center; + .package-price { + font-size: 32rpx; + font-weight: 600; + color: var(--warning); + } + .btn { + flex-shrink: 0; + } + } } } @@ -385,22 +412,58 @@ } .package-summary { - padding: 40rpx 30rpx; - background: rgba(0, 122, 255, 0.03); + padding: 40rpx 30rpx 30rpx; + background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(0, 122, 255, 0.02) 100%); border-bottom: 1rpx solid var(--border-light); text-align: center; .summary-name { - font-size: 28rpx; - font-weight: 500; + font-size: 32rpx; + font-weight: 700; color: var(--text-primary); - margin-bottom: 16rpx; + margin-bottom: 20rpx; + line-height: 1.4; } .summary-price { - font-size: 48rpx; + font-size: 56rpx; font-weight: 700; color: var(--primary); + margin-bottom: 24rpx; + letter-spacing: -1rpx; + } + + .summary-details { + display: flex; + align-items: center; + justify-content: center; + gap: 24rpx; + padding-top: 20rpx; + border-top: 1rpx solid rgba(0, 122, 255, 0.1); + + .detail-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8rpx; + + .detail-label { + font-size: 22rpx; + color: var(--text-tertiary); + } + + .detail-value { + font-size: 26rpx; + font-weight: 600; + color: var(--text-primary); + } + } + + .detail-divider { + width: 1rpx; + height: 40rpx; + background: var(--border-light); + } } } @@ -433,14 +496,8 @@ gap: 20rpx; .method-icon { - width: 48rpx; - height: 48rpx; - } - - .method-info { - display: flex; - flex-direction: column; - gap: 8rpx; + width: 64rpx; + height: 64rpx; } .method-name { @@ -448,11 +505,6 @@ font-weight: 500; color: var(--text-primary); } - - .wallet-balance { - font-size: 22rpx; - color: var(--text-tertiary); - } } .method-radio {