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

feat: 牛牛牌面区改为2×2网格布局+路单加大+页面可滚动

Browse Source 
- poker-section 从40px扩大到120px，牌面改为2×2网格（上行庄家+闲一，下行闲二+闲三）
- 单张牌从16×22px放大到30×42px，点数清晰可辨
- 路单区nn-mode从130px扩大到180px
- .view容器开启overflow-y:auto，内容超出屏幕可下滑
- 视频区flex自适应+min-height:200px保底
This commit is contained in:
li 2026-02-11 23:59:21 +08:00
parent db55b8d20c
commit 025289c43d
2 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/style/portrait.scss
View File

@ -362,11 +362,10 @@ $tie-green: #27ae60;
/* 视频区域容器 - 最大化显示完整视频 */
.video {
flex: 1;
flex: 1 1 auto;
position: relative;
width: 100%;
min-height: 360px;
max-height: 50vh;
min-height: 200px;
background: #000;
order: 1;
overflow: hidden;

58
src/views/play.vue
View File

@ -1374,11 +1374,13 @@ $gold: #c5a059;
width: 100%;
height: 100%; /* Full height, Nav is now inside */
position: relative;
overflow: hidden;
overflow-y: auto;
overflow-x: hidden;
/* 1. Video Container (Top) - Flex Grow */
.video-container {
flex: 1; /* Grow to fill available space */
flex: 1 1 auto; /* 自适应但不被过度压缩 */
min-height: 200px;
position: relative;
width: 100%;
background: #000;
@ -1551,10 +1553,10 @@ $gold: #c5a059;
border-top: 1px solid #333;
}
/* 3. Poker Section for NN/TC - Compact horizontal layout */
/* 3. Poker Section for NN/TC - 2x2 Grid layout */
.poker-section {
width: 100%;
height: 40px; /* 减小高度 */
height: 120px; /* 2行布局：上行庄家+闲一，下行闲二+闲三 */
flex-shrink: 0;
position: relative;
z-index: 20;
@ -1563,45 +1565,49 @@ $gold: #c5a059;
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;
flex-wrap: wrap !important;
padding: 4px !important;
box-sizing: border-box !important;
background: transparent !important;
.list {
flex: 1 !important;
height: 100% !important;
width: 50% !important;
height: 50% !important;
flex: none !important;
min-width: 0 !important;
padding: 0 2px !important;
border-left: 1px solid #444 !important;
padding: 2px 6px !important;
border-bottom: 1px solid #333 !important;
border-left: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
box-sizing: border-box !important;
&:first-child {
border-left: none !important;
/* 右列加左边框 */
&:nth-child(2n) {
border-left: 1px solid #444 !important;
}
/* 下行去掉底边框 */
&:nth-child(n+3) {
border-bottom: none !important;
}
.title {
position: relative !important;
display: block !important;
font-size: 8px !important;
padding: 2px 3px !important;
font-size: 11px !important;
padding: 2px 5px !important;
border-radius: 2px !important;
white-space: nowrap !important;
margin-right: 2px !important;
margin-right: 4px !important;
flex-shrink: 0 !important;
/* 确保颜色样式正确应用 */
&.red {
background: #ff494b !important;
color: #fff !important;
@ -1617,10 +1623,10 @@ $gold: #c5a059;
width: auto !important;
left: 50% !important;
top: auto !important;
bottom: 2px !important;
bottom: 1px !important;
transform: translateX(-50%) !important;
font-size: 10px !important;
padding: 1px 4px !important;
font-size: 11px !important;
padding: 1px 6px !important;
margin: 0 !important;
background: rgba(0, 0, 0, 0.7) !important;
border-radius: 2px !important;
@ -1628,9 +1634,9 @@ $gold: #c5a059;
}
.item {
width: 16px !important;
height: 22px !important;
margin: 0 -3px !important;
width: 30px !important;
height: 42px !important;
margin: 0 -2px !important;
margin-top: 0 !important;
padding: 0 !important;
@ -1736,7 +1742,7 @@ $gold: #c5a059;
/* NN/TC mode - larger roadmap */
&.nn-mode {
height: 130px;
height: 180px;
}
/* Deep overrides to ensure standard layout and white background support */