refactor: 问路面板从路单区域移到顶部统计栏最右侧，不再遮挡路单
This commit is contained in:
li
parent
55f89ee6a0
commit
e453548f5c
@ -30,6 +30,27 @@
|
|||||||
<span class="badge black">{{ Lang[Type].game }}</span>
|
<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 || '0-0' }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 问路 -->
|
||||||
|
<div class="ask-panel-inline" v-if="[1,2].includes(tableData.game_id)">
|
||||||
|
<div class="ask-group" @click="askWay('banker')">
|
||||||
|
<span class="ask-label text-red">{{ Lang[Type].askbanker }}</span>
|
||||||
|
<span class="dot hollow red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
|
||||||
|
<span class="dot hollow blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
|
||||||
|
<span class="dot solid red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
|
||||||
|
<span class="dot solid blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
|
||||||
|
<span class="dot slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
|
||||||
|
<span class="dot slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
|
||||||
|
</div>
|
||||||
|
<div class="ask-group" @click="askWay('player')">
|
||||||
|
<span class="ask-label text-blue">{{ Lang[Type].askplayer }}</span>
|
||||||
|
<span class="dot hollow red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
|
||||||
|
<span class="dot hollow blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
|
||||||
|
<span class="dot solid red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
|
||||||
|
<span class="dot solid blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
|
||||||
|
<span class="dot slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
|
||||||
|
<span class="dot slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- NiuNiu/TC Stats -->
|
<!-- NiuNiu/TC Stats -->
|
||||||
<div class="left-stats" v-else-if="[4, 5].includes(tableData.game_id)">
|
<div class="left-stats" v-else-if="[4, 5].includes(tableData.game_id)">
|
||||||
@ -56,36 +77,6 @@
|
|||||||
<div class="road-box-container">
|
<div class="road-box-container">
|
||||||
<div class="road-box">
|
<div class="road-box">
|
||||||
<canvas class="canvas" ref="refItem"></canvas>
|
<canvas class="canvas" ref="refItem"></canvas>
|
||||||
|
|
||||||
<!-- Ask Way Overlay (Bottom Right) -->
|
|
||||||
<div class="ask-panel" v-if="[1,2].includes(tableData.game_id)">
|
|
||||||
<div class="ask-group banker" @click="askWay('banker')">
|
|
||||||
<div class="ask-title text-red">{{ Lang[Type].askbanker }}</div>
|
|
||||||
<div class="ask-icons">
|
|
||||||
<span class="dot hollow red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
|
|
||||||
<span class="dot hollow blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
|
|
||||||
|
|
||||||
<span class="dot solid red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
|
|
||||||
<span class="dot solid blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
|
|
||||||
|
|
||||||
<span class="dot slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
|
|
||||||
<span class="dot slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ask-group player" @click="askWay('player')">
|
|
||||||
<div class="ask-title text-blue">{{ Lang[Type].askplayer }}</div>
|
|
||||||
<div class="ask-icons">
|
|
||||||
<span class="dot hollow red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
|
|
||||||
<span class="dot hollow blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
|
|
||||||
|
|
||||||
<span class="dot solid red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
|
|
||||||
<span class="dot solid blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
|
|
||||||
|
|
||||||
<span class="dot slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
|
|
||||||
<span class="dot slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -272,72 +263,60 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Ask Panel - Integrated into grid (bottom 3 rows, far right) */
|
/* Ask Panel - Integrated into grid (bottom 3 rows, far right) */
|
||||||
.ask-panel {
|
.ask-panel-inline {
|
||||||
position: absolute;
|
margin-left: auto;
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 20%;
|
|
||||||
height: 33%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
background: rgba(255,255,255,0.92);
|
gap: 8px;
|
||||||
border-left: 1px solid #ddd;
|
align-items: center;
|
||||||
border-top: 1px solid #ddd;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
.ask-group {
|
.ask-group {
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&.banker {
|
.ask-label {
|
||||||
border-right: 1px solid #f5f5f5;
|
font-size: 10px;
|
||||||
}
|
|
||||||
|
|
||||||
.ask-title {
|
|
||||||
font-size: 11px !important;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
margin-right: 2px;
|
||||||
margin-bottom: 2px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ask-icons {
|
.dot {
|
||||||
display: flex;
|
display: inline-block;
|
||||||
gap: 4px;
|
&.solid {
|
||||||
align-items: center;
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
.dot {
|
border-radius: 50%;
|
||||||
display: inline-block;
|
&.red { background: #e40000; }
|
||||||
&.solid {
|
&.blue { background: #0056ee; }
|
||||||
width: 10px;
|
}
|
||||||
height: 10px;
|
&.hollow {
|
||||||
border-radius: 50%;
|
width: 7px;
|
||||||
&.red { background: #e40000; }
|
height: 7px;
|
||||||
&.blue { background: #0056ee; }
|
border-radius: 50%;
|
||||||
}
|
border: 1.5px solid;
|
||||||
&.hollow {
|
&.red { border-color: #e40000; }
|
||||||
width: 8px;
|
&.blue { border-color: #0056ee; }
|
||||||
height: 8px;
|
}
|
||||||
border-radius: 50%;
|
&.slash {
|
||||||
border: 1.5px solid;
|
width: 7px;
|
||||||
&.red { border-color: #e40000; }
|
height: 7px;
|
||||||
&.blue { border-color: #0056ee; }
|
position: relative;
|
||||||
}
|
&::before {
|
||||||
&.slash {
|
content: '';
|
||||||
width: 2px;
|
position: absolute;
|
||||||
height: 10px;
|
top: 0; left: 50%;
|
||||||
transform: rotate(-45deg);
|
width: 1.5px;
|
||||||
border-radius: 1px;
|
height: 100%;
|
||||||
&.red { background: #e40000; }
|
transform: rotate(45deg);
|
||||||
&.blue { background: #0056ee; }
|
|
||||||
}
|
}
|
||||||
|
&.red::before { background: #e40000; }
|
||||||
|
&.blue::before { background: #0056ee; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user