fix: 修改套餐位置

pages/package-order/package-order.vue

@@ -7,21 +7,28 @@
 		</view>
 
 		<view class="card package-card" v-for="item in packageList" :key="item.package_id">
-			<view class="package-header flex-row-sb">
+			<view class="package-header">
 				<view class="package-name">{{ item.package_name }}</view>
-			</view>
+				<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
-			<view>
+					{{ item.is_addon ? '加油包' : '正式套餐' }}
-				<view class="package-data">{{ formatData(item.data_allowance, item.data_unit) }}</view>
-				<view class="header-right">
-					<view class="validity-tag">有效期: {{ item.validity_days }} 天</view>
-					<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
-						{{ item.is_addon ? '加油包' : '正式套餐' }}
-					</view>
 				</view>
 			</view>
-			<view class="package-desc">{{ item.description }}</view>
+			<view class="package-main">
-			<view class="package-footer flex-row-sb">
+				<view class="data-block">
-				<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
+					<view class="data-label">套餐流量</view>
+					<view class="package-data">{{ formatData(item.data_allowance, item.data_unit) }}</view>
+				</view>
+				<view class="validity-box">
+					<view class="validity-value">{{ item.validity_days }}</view>
+					<view class="validity-label">天有效期</view>
+				</view>
+			</view>
+			<view class="package-desc" v-if="item.description">{{ item.description }}</view>
+			<view class="package-footer">
+				<view class="price-block">
+					<text class="price-symbol">¥</text>
+					<text class="package-price">{{ formatMoney(item.retail_price) }}</text>
+				</view>
 				<view class="btn">
 					<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
 				</view>
@@ -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);
-				}
+					line-height: 1.35;
-
+					flex: 1;
-				.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-data {
+			.package-main {
-				font-size: 48rpx;
+				display: flex;
-				font-weight: 700;
+				align-items: stretch;
-				color: var(--primary);
+				justify-content: space-between;
-				margin-bottom: var(--space-sm);
+				gap: 20rpx;
-				letter-spacing: -1rpx;
+				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 {
+				.price-block {
-					font-size: 40rpx;
+					display: flex;
-					font-weight: 700;
+					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;
 				}
 			}
 		}