diff --git a/pages/package-order/package-order.vue b/pages/package-order/package-order.vue index d01f9b9..4358052 100644 --- a/pages/package-order/package-order.vue +++ b/pages/package-order/package-order.vue @@ -18,27 +18,25 @@ 当前资产暂无适用的套餐 - - - {{ item.package_name }} - - 续费套餐 - {{ formatValidity(item.validity_days) }} + + + + {{ item.package_name }} + + + + {{ formatValidity(item.validity_days) }} + + + + {{ formatData(item.data_allowance, item.data_unit) }} + + + 高速流量 · 全国通用 · 不限速 - - - - 套餐流量 - {{ formatData(item.data_allowance, item.data_unit) }} - - - ¥ - {{ formatPackagePrice(item.retail_price) }} - - - - - 立即订购 + + ¥{{ formatPackagePrice(item.retail_price) }} + @@ -683,6 +681,150 @@ } } + /* Screenshot-aligned package list skin */ + .container { + gap: 18rpx; + padding: 20rpx 24rpx 48rpx; + background: #f8f9fb; + box-sizing: border-box; + } + + .container .package-tabs { + display: flex; + gap: 0; + padding: 0; + background: #f3f5f8; + border: 0; + border-radius: 22rpx; + box-shadow: none; + overflow: hidden; + } + + .container .package-tab { + flex: 1; + padding: 26rpx 0 24rpx; + border-radius: 22rpx; + color: #737985; + font-size: 30rpx; + font-weight: 500; + line-height: 1.2; + } + + .container .package-tab.active { + background: #fff; + box-shadow: 0 4rpx 14rpx rgba(31, 35, 41, 0.06); + color: #0a9f50; + font-weight: 600; + } + + .package-list { + display: flex; + flex-direction: column; + gap: 18rpx; + } + + .container .package-card { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24rpx; + min-height: 210rpx; + margin: 0; + padding: 30rpx 32rpx; + background: #fff; + border: 1rpx solid #f0f1f3; + border-radius: 20rpx; + box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.04); + box-sizing: border-box; + } + + .package-info { + min-width: 0; + flex: 1; + } + + .package-info .package-name { + color: #14161a; + font-size: 36rpx; + font-weight: 600; + line-height: 1.25; + word-break: break-all; + } + + .package-meta { + display: flex; + align-items: center; + gap: 16rpx; + margin-top: 22rpx; + } + + .package-meta-item { + display: inline-flex; + align-items: center; + gap: 10rpx; + min-width: 0; + padding: 10rpx 16rpx; + border-radius: 28rpx; + background: #eff8f3; + color: #15934f; + font-size: 24rpx; + line-height: 1.2; + white-space: nowrap; + } + + .package-meta-icon { + width: 32rpx; + height: 32rpx; + flex-shrink: 0; + } + + .package-description { + margin-top: 18rpx; + color: #7c838e; + font-size: 25rpx; + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .package-side { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: space-between; + align-self: stretch; + min-width: 190rpx; + padding: 4rpx 0; + box-sizing: border-box; + } + + .package-side .package-price { + color: #ed2524; + font-size: 44rpx; + font-weight: 600; + line-height: 1; + white-space: nowrap; + } + + .package-side .price-symbol { + margin-right: 4rpx; + font-size: 26rpx; + font-weight: 600; + vertical-align: 10rpx; + } + + .package-buy-button { + width: 184rpx; + height: 64rpx; + min-height: 64rpx; + padding: 0; + border-radius: 14rpx; + font-size: 28rpx; + line-height: 64rpx; + box-sizing: border-box; + } + .payment-popup { width: 600rpx; background: var(--bg-primary);