og/GamePortrait
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 牛牛/三卡竖屏优化 - 定位牌显示、卡牌标签、下注金额缩放

Browse Source 
- 添加定位牌(nn_position)在视频左侧显示
- 卡牌区域添加庄家/闲1/闲2/闲3标签
- 优化下注金额显示，使用scale(0.5)避免翻倍文字溢出
- 调整poker-section高度(60→40px)和路单高度(100→130px)
- 修复overflow设置允许筹码和金额显示溢出

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
li 2026-01-22 16:56:57 +08:00
parent fc652c247a
commit 6e8a196ecf
3 changed files with 232 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/PlayTable/TableBullbull.vue
View File

@ -224,6 +224,7 @@ $text-red: #f56c6c;
flex: 1;
display: flex;
flex-direction: column;
overflow: visible; /* 允许金额显示溢出 */
}
}
@ -231,6 +232,7 @@ $text-red: #f56c6c;
flex: 1;
display: flex;
border-bottom: 1px solid $border-light;
overflow: visible; /* 允许金额显示溢出 */
&:last-child {
border-bottom: none;
@ -240,7 +242,8 @@ $text-red: #f56c6c;
flex: 1;
position: relative;
border-right: 1px solid $border-light;
overflow: visible; /* 允许金额显示溢出 */
&:last-child {
border-right: none;
}
@ -256,6 +259,7 @@ $text-red: #f56c6c;
cursor: pointer;
padding: 4px;
box-sizing: border-box;
overflow: visible; /* 允许金额显示溢出 */
&:active {
background: rgba(255, 255, 255, 0.1);
@ -290,23 +294,26 @@ $text-red: #f56c6c;
.money {
position: absolute;
bottom: 4px;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.6);
padding: 2px 8px;
border-radius: 10px;
transform: translateX(-50%) scale(0.5);
transform-origin: center bottom;
background: rgba(0,0,0,0.85);
padding: 2px 4px;
border-radius: 4px;
color: #ffd700;
font-size: 12px;
font-size: 9px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 2px;
z-index: 5;
gap: 1px;
z-index: 100;
pointer-events: none;
.coin-icon {
width: 10px;
height: 10px;
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: 50%;
background: #ffd700;
border: 1px solid #b8860b;

22
src/components/PlayWay.vue
View File

@ -31,15 +31,23 @@
<span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
</div>
</div>
<!-- NiuNiu Stats -->
<!-- NiuNiu/TC Stats -->
<div class="left-stats" v-else-if="[4, 5].includes(tableData.game_id)">
<div class="stat-item" v-for="(val, key) in tableData.count" :key="key">
<span class="badge black">{{ key }}</span>
<span class="val black">{{ val }}</span>
</div>
<div class="stat-item g-num">
<div class="stat-item">
<span class="badge red">{{ Lang[Type].player }}1</span>
<span class="val red">{{ tableData.player_1_count || 0 }}</span>
</div>
<div class="stat-item">
<span class="badge blue">{{ Lang[Type].player }}2</span>
<span class="val blue">{{ tableData.player_2_count || 0 }}</span>
</div>
<div class="stat-item">
<span class="badge green">{{ Lang[Type].player }}3</span>
<span class="val green">{{ tableData.player_3_count || 0 }}</span>
</div>
<div class="stat-item g-num">
<span class="badge black">{{ Lang[Type].game }}</span>
<span class="game-info">{{ tableData.number_tab_number || '0-0' }}</span>
<span class="game-info">{{ tableData.number_tab_number - 1 || 0 }}</span>
</div>
</div>
</div>

204
src/views/play.vue
View File

@ -89,7 +89,7 @@
</div>
<!-- Game Betting Area (Moved below Nav) -->
<div class="game-area-block">
<div class="game-area-block" :class="{ 'nn-mode': tableData && (tableData.game_id == 4 || tableData.game_id == 5) }">
<div class="game-area-content">
<template
v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
@ -156,13 +156,25 @@
<!-- 2. Chip Control Bar (Middle Section, Fixed Height) -->
<PlayChip class="bet-chip-bar"></PlayChip>
<!-- 3. Roadmap (Bottom Section, Fixed Height or Flex Basis) -->
<div class="roadmap-container" @click.stop="closeSwitchView(false)">
<!-- 3. Poker Cards for NN/TC (Separate section above roadmap) -->
<div
class="poker-section"
v-if="tableData && (tableData.game_id == 4 || tableData.game_id == 5) && tableData.is_scavenging == 1"
>
<Poker
class="pokerView nn-compact"
:thisData="tableData"
></Poker>
</div>
<!-- 4. Roadmap (Bottom Section, Fixed Height or Flex Basis) -->
<div class="roadmap-container" :class="{ 'nn-mode': tableData && (tableData.game_id == 4 || tableData.game_id == 5) }" @click.stop="closeSwitchView(false)">
<PlayWay :tableData="tableData"></PlayWay>
<!-- Poker for Baccarat/Dragon Tiger (overlay style) -->
<Poker
class="pokerView"
:thisData="tableData"
v-if="tableData && tableData.is_scavenging == 1"
v-if="tableData && tableData.is_scavenging == 1 && tableData.game_id != 4 && tableData.game_id != 5"
></Poker>
<ToningResult
v-if="showToningResult"
@ -1467,6 +1479,11 @@ $gold: #c5a059;
z-index: 10;
overflow: hidden;
/* NN/TC mode - same as other games */
&.nn-mode {
height: 200px;
}
/* Content wrapper that mimics old absolute positioning for internal components */
.game-area-content {
width: 100%;
@ -1504,7 +1521,179 @@ $gold: #c5a059;
border-top: 1px solid #333;
}
/* 3. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
/* 3. Poker Section for NN/TC - Compact horizontal layout */
.poker-section {
width: 100%;
height: 40px; /* 减小高度 */
flex-shrink: 0;
position: relative;
z-index: 20;
background: rgba(0, 0, 0, 0.85);
border-top: 1px solid #333;
overflow: hidden;
::v-deep .nn-compact {
/* Override default poker-box styles for compact mode */
.poker-box.nn {
position: relative !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-around !important;
padding: 2px 4px !important;
box-sizing: border-box !important;
background: transparent !important;
.list {
flex: 1 !important;
height: 100% !important;
min-width: 0 !important;
padding: 0 2px !important;
border-left: 1px solid #444 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
&:first-child {
border-left: none !important;
}
.title {
position: relative !important;
display: block !important;
font-size: 8px !important;
padding: 2px 3px !important;
border-radius: 2px !important;
white-space: nowrap !important;
margin-right: 2px !important;
flex-shrink: 0 !important;
/* 确保颜色样式正确应用 */
&.red {
background: #ff494b !important;
color: #fff !important;
}
&.blue {
background: #00a8ff !important;
color: #fff !important;
}
}
.role {
position: absolute !important;
width: auto !important;
left: 50% !important;
top: auto !important;
bottom: 2px !important;
transform: translateX(-50%) !important;
font-size: 10px !important;
padding: 1px 4px !important;
margin: 0 !important;
background: rgba(0, 0, 0, 0.7) !important;
border-radius: 2px !important;
color: #ffd700 !important;
}
.item {
width: 16px !important;
height: 22px !important;
margin: 0 -3px !important;
margin-top: 0 !important;
padding: 0 !important;
.card {
background-size: 100% 100% !important;
}
}
}
}
/* Position card (定位牌) - show on video area left side for NN/TC */
.nn_position {
display: flex !important;
position: fixed !important;
top: 15% !important; /* 在视频区域内 */
left: 8px !important;
transform: translateY(-50%) !important;
z-index: 2000 !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
padding: 0 !important;
strong {
font-size: 10px !important;
color: #fff !important;
margin-bottom: 4px !important;
padding: 0 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}
.item {
width: 36px !important;
height: 52px !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
.card {
display: block !important;
width: 100% !important;
height: 100% !important;
background-size: 100% 100% !important;
border-radius: 3px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
}
}
/* 三卡牛牛的定位牌在 poker-box 内部，需要额外选择器 */
.poker-box.nn .nn_position {
display: flex !important;
position: fixed !important;
top: 15% !important; /* 在视频区域内 */
left: 8px !important;
transform: translateY(-50%) !important;
z-index: 2000 !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
padding: 0 !important;
strong {
font-size: 10px !important;
color: #fff !important;
margin-bottom: 4px !important;
padding: 0 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}
.item {
width: 36px !important;
height: 52px !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
.card {
display: block !important;
width: 100% !important;
height: 100% !important;
background-size: 100% 100% !important;
border-radius: 3px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
}
}
}
}
/* 4. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
.roadmap-container {
width: 100%;
height: 160px;
@ -1514,6 +1703,11 @@ $gold: #c5a059;
z-index: 20;
overflow: hidden;
/* NN/TC mode - larger roadmap */
&.nn-mode {
height: 130px;
}
/* Deep overrides to ensure standard layout and white background support */
::v-deep .playway {
height: 100% !important;