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

fix: icons和布局
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 55s
Details

Browse Source
This commit is contained in:
luo
2026-07-29 16:26:32 +08:00
parent 6c3cf15165
commit 2166241cdb
5 changed files with 49 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/RenewalPaymentPopup.vue
View File

@@ -20,9 +20,9 @@
@tap="selectPaymentMethod(method.value)"
>
<view class="method-left">
<view v-if="method.value === 'alipay'" class="method-icon method-badge method-badge-alipay">支</view>
<image v-if="method.value === 'alipay'" class="method-icon" src="/static/支付宝支付.png" mode="aspectFit"></image>
<image v-else-if="method.value === 'wallet'" class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
<view v-else class="method-icon method-badge">微</view>
<image v-else-if="method.value === 'wechat'" class="method-icon" src="/static/微信支付.png" mode="aspectFit"></image>
<text class="method-name">{{ method.label }}</text>
</view>
<view class="method-radio" :class="{ checked: paymentMethod === method.value }"></view>

4
pages/my-wallet/my-wallet.vue
View File

@@ -158,8 +158,8 @@
<view v-for="method in paymentMethodOptions" :key="method.value" class="method-item"
:class="{ active: rechargePaymentMethod === method.value }" @tap="selectRechargePaymentMethod(method.value)">
<view class="method-left">
<view v-if="method.value === 'alipay'" class="method-icon method-badge method-badge-alipay">支</view>
<view v-else-if="method.value === 'wechat'" class="method-icon method-badge">微</view>
<image v-if="method.value === 'alipay'" class="method-icon" src="/static/支付宝支付.png" mode="aspectFit"></image>
<image v-else-if="method.value === 'wechat'" class="method-icon" src="/static/微信支付.png" mode="aspectFit"></image>
<image v-else class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
<text class="method-name">{{ method.label }}</text>
</view>

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

@@ -62,9 +62,9 @@
<view v-for="method in paymentMethodOptions" :key="method.value" class="method-item"
:class="{ active: paymentMethod === method.value }" @tap="selectPaymentMethod(method.value)">
<view class="method-left">
<view v-if="method.value === 'alipay'" class="method-icon method-badge method-badge-alipay">支</view>
<image v-if="method.value === 'alipay'" class="method-icon" src="/static/支付宝支付.png" mode="aspectFit"></image>
<image v-else-if="method.value === 'wallet'" class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
<view v-else class="method-icon method-badge">微</view>
<image v-else-if="method.value === 'wechat'" class="method-icon" src="/static/微信支付.png" mode="aspectFit"></image>
<text class="method-name">{{ method.label }}<template v-if="method.value === 'wallet'">（¥{{ formatMoney(walletBalance) }}）</template></text>
</view>
<view class="method-radio" :class="{ checked: paymentMethod === method.value }"></view>
@@ -476,6 +476,9 @@
<style lang="scss" scoped>
.container {
gap: 16rpx;
padding: 24rpx 20rpx 40rpx;
.empty-state {
display: flex;
flex-direction: column;
@@ -506,69 +509,76 @@
}
.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);
margin-bottom: 0;
padding: 28rpx;
border: 1rpx solid var(--gray-200);
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.03);
.package-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20rpx;
margin-bottom: 28rpx;
gap: 16rpx;
margin-bottom: 24rpx;
.package-name {
font-size: 32rpx;
font-weight: 700;
font-size: 30rpx;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
line-height: 1.4;
flex: 1;
}
.tag-apple {
flex-shrink: 0;
padding: 6rpx 12rpx;
background: var(--gray-100);
color: var(--gray-700);
border: none;
}
}
.package-main {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 20rpx;
padding: 26rpx;
gap: 24rpx;
padding: 0 0 24rpx;
margin-bottom: 22rpx;
background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 122, 255, 0.02) 100%);
border-radius: 24rpx;
border-bottom: 1rpx solid var(--gray-100);
.data-block {
flex: 1;
padding-right: 24rpx;
.data-label {
font-size: 24rpx;
font-size: 23rpx;
color: var(--text-tertiary);
margin-bottom: 8rpx;
margin-bottom: 10rpx;
}
}
.package-data {
font-size: 52rpx;
font-weight: 800;
color: var(--primary);
font-size: 48rpx;
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
letter-spacing: -1rpx;
}
.validity-box {
min-width: 132rpx;
min-width: 116rpx;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
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;
padding: 0 0 0 24rpx;
border-left: 1rpx solid var(--gray-200);
.validity-value {
font-size: 34rpx;
font-weight: 800;
font-size: 32rpx;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
@@ -582,10 +592,10 @@
}
.package-desc {
font-size: 26rpx;
font-size: 24rpx;
color: var(--text-secondary);
line-height: 1.55;
margin-bottom: 24rpx;
line-height: 1.5;
margin-bottom: 22rpx;
}
.package-footer {
@@ -593,13 +603,12 @@
align-items: center;
justify-content: space-between;
gap: 24rpx;
padding-top: 24rpx;
border-top: 1rpx solid var(--border-light);
padding-top: 0;
.price-block {
display: flex;
align-items: baseline;
color: var(--warning);
color: var(--text-primary);
white-space: nowrap;
.price-symbol {
@@ -609,8 +618,8 @@
}
.package-price {
font-size: 44rpx;
font-weight: 800;
font-size: 40rpx;
font-weight: 700;
letter-spacing: -1rpx;
}
}

BIN
static/微信支付.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/支付宝支付.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB