luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改套餐位置
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 52s
Details

Browse Source
This commit is contained in:
sexygoat
2026-05-28 14:26:49 +08:00
parent 83c32279eb
commit c265dacafd
1 changed files with 106 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
pages/package-order/package-order.vue
View File

@@ -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>
<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 class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
{{ item.is_addon ? '加油包' : '正式套餐' }}
</view>
</view>
<view class="package-desc">{{ item.description }}</view>
<view class="package-footer flex-row-sb">
<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
<view class="package-main">
<view class="data-block">
<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);
}
.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;
}
}
}