fix：修复对对碰次数卡显示文本不完整的问题
This commit is contained in:
tsui110
parent
ed67c4f7fa
commit
66f5c343d8
@ -63,26 +63,31 @@
|
||||
<template #footer>
|
||||
<view class="float-bar">
|
||||
<view class="float-bar-inner">
|
||||
<view class="float-price">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ (Number(detail.price_draw || 0) / 100).toFixed(2) }}</text>
|
||||
<text class="unit">/次</text>
|
||||
</view>
|
||||
|
||||
<!-- 次数卡余额 / 购买入口 -->
|
||||
<view v-if="gamePassRemaining > 0" class="game-pass-badge" @tap="onParticipate">
|
||||
<text class="badge-icon">🎮</text>
|
||||
<text class="badge-text" style="font-size: 24rpx; font-weight: bold; color: #10B981;">{{ gamePassRemaining }}</text>
|
||||
</view>
|
||||
<!-- 充值入口 -->
|
||||
<view class="game-pass-buy-btn" @tap="openPurchasePopup">
|
||||
<text>充值特惠</text>
|
||||
<!-- 左侧价格区域 -->
|
||||
<view class="float-left">
|
||||
<view class="float-price">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ (Number(detail.price_draw || 0) / 100).toFixed(2) }}</text>
|
||||
<text class="unit">/次</text>
|
||||
</view>
|
||||
|
||||
<!-- 次数卡徽章和充值按钮 -->
|
||||
<view class="float-badges">
|
||||
<view v-if="gamePassRemaining > 0" class="game-pass-badge" @tap="onParticipate">
|
||||
<text class="badge-icon">🎮</text>
|
||||
<text class="badge-text">{{ gamePassRemaining }}</text>
|
||||
</view>
|
||||
<view class="game-pass-buy-btn" @tap="openPurchasePopup">
|
||||
<text>充值特惠</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧操作按钮 -->
|
||||
<view v-if="hasResumeGame" class="action-btn secondary" @tap="onResumeGame">
|
||||
继续游戏
|
||||
</view>
|
||||
<view v-if="!hasResumeGame" class="action-btn primary" @tap="onParticipate">
|
||||
<view v-else class="action-btn primary" @tap="onParticipate">
|
||||
立即参与
|
||||
<view class="btn-shine"></view>
|
||||
</view>
|
||||
@ -1967,25 +1972,42 @@ onLoad((opts) => {
|
||||
.float-bar-inner {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(30rpx);
|
||||
padding: 24rpx 40rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.float-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.float-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.float-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: $text-main;
|
||||
font-weight: 800;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.float-price .currency { font-size: 26rpx; margin-right: 4rpx; color: $brand-primary; }
|
||||
.float-price .amount { font-size: 44rpx; font-weight: 900; font-family: 'DIN Alternate', sans-serif; color: $brand-primary; }
|
||||
.float-price .unit { font-size: 24rpx; color: $text-sub; margin-left: 4rpx; font-weight: 600; }
|
||||
.float-price .currency { font-size: 24rpx; margin-right: 2rpx; color: $brand-primary; }
|
||||
.float-price .amount { font-size: 36rpx; font-weight: 900; font-family: 'DIN Alternate', sans-serif; color: $brand-primary; }
|
||||
.float-price .unit { font-size: 20rpx; color: $text-sub; margin-left: 2rpx; font-weight: 600; }
|
||||
|
||||
.rewards-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; }
|
||||
.rewards-mask {
|
||||
@ -2142,11 +2164,11 @@ onLoad((opts) => {
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
.action-btn {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
padding: 0 56rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 30rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -2154,6 +2176,8 @@ onLoad((opts) => {
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.primary {
|
||||
background: $gradient-brand !important;
|
||||
@ -2534,23 +2558,23 @@ onLoad((opts) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
padding: 6rpx 16rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 30rpx;
|
||||
border: 1rpx solid rgba(16, 185, 129, 0.3);
|
||||
margin: 0 $spacing-sm;
|
||||
animation: pulse 2s infinite;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.badge-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-size: 24rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #10B981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@ -2559,13 +2583,14 @@ onLoad((opts) => {
|
||||
.game-pass-buy-btn {
|
||||
background: linear-gradient(90deg, #FF9F43, #FF6B00);
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
font-size: 20rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-right: 12rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4rpx 8rpx rgba(255, 107, 0, 0.2);
|
||||
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user