c19ebf267a
新增撤销功能： - 添加 undoChip 方法，支持撤销当前区域最后一次下注 - 在确认下注组件中新增橙色撤销按钮（箭头图标） - 所有游戏桌组件（百家乐/龙虎/牛牛/色碟/骰宝/轮盘）统一集成撤销功能 竖屏布局优化： - 修复下注盘样式优先级问题，确保平铺全屏显示（移除 left/right 偏移） - 路单区域改为横向布局：路单画布在左，统计信息在右，扑克牌区域独立显示 - 路单高度从 180px 增加到 250px，提升可视性 - 优化牛牛扑克牌布局为 2x2 网格，适配竖屏空间 UI 增强： - 添加红色边框高亮效果（脉冲动画），突出当前选中的下注区域 - 优化按钮布局和间距，提升触控体验 - 调整字体大小和内边距，适配竖屏显示密度 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1579 lines
45 KiB
Vue
1579 lines
45 KiB
Vue
<template>
|
|
<!-- 骰宝 -->
|
|
<div class="dice">
|
|
<div class="list first">
|
|
<!-- small -->
|
|
<div class="cols item small">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.small,
|
|
show: touch == 'small'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'small')"
|
|
:list="chipArray.small"
|
|
:win="winArray.includes('small')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big blue">{{ Lang[Type].small }}</span>
|
|
<span class="points blue">4-10</span>
|
|
<span>1:1</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.small || 0 }}</div>
|
|
</div>
|
|
<div class="cols">
|
|
<div class="ratio">1:10</div>
|
|
<!-- two_11 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_11,
|
|
show: touch == 'two_11'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_11')"
|
|
:list="chipArray.two_11"
|
|
:win="winArray.includes('two_11')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_1"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_11 || 0 }}</div>
|
|
</div>
|
|
<!-- two_22 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_22,
|
|
show: touch == 'two_22'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_22')"
|
|
:list="chipArray.two_22"
|
|
:win="winArray.includes('two_22')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_2"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_22 || 0 }}</div>
|
|
</div>
|
|
<!-- two_33 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_33,
|
|
show: touch == 'two_33'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_33')"
|
|
:list="chipArray.two_33"
|
|
:win="winArray.includes('two_33')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_3"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_33 || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cols">
|
|
<div class="ratio">{{ Lang[Type].wai_dice }}1:180</div>
|
|
<!-- three_111 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.three_111,
|
|
show: touch == 'three_111'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'three_111')"
|
|
:list="chipArray.three_111"
|
|
:win="winArray.includes('three_111')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_1"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.three_111 || 0 }}</div>
|
|
</div>
|
|
<!-- three_222 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.three_222,
|
|
show: touch == 'three_222'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'three_222')"
|
|
:list="chipArray.three_222"
|
|
:win="winArray.includes('three_222')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_2"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.three_222 || 0 }}</div>
|
|
</div>
|
|
<!-- three_333 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.three_333,
|
|
show: touch == 'three_333'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'three_333')"
|
|
:list="chipArray.three_333"
|
|
:win="winArray.includes('three_333')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_3"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.three_333 || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cols triplet">
|
|
<div class="ratio">{{ Lang[Type].all_dice }}1:30</div>
|
|
<!-- leopard -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.leopard,
|
|
show: touch == 'leopard'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'leopard')"
|
|
:list="chipArray.leopard"
|
|
:win="winArray.includes('leopard')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<div class="column">
|
|
<div class="flex">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_1"></span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_2"></span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_3"></span>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="flex">
|
|
<span class="span dice_4"></span>
|
|
<span class="span dice_4"></span>
|
|
<span class="span dice_4"></span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="span dice_5"></span>
|
|
<span class="span dice_5"></span>
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="span dice_6"></span>
|
|
<span class="span dice_6"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.leopard || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cols">
|
|
<div class="ratio">{{ Lang[Type].wai_dice }}1:180</div>
|
|
<!-- three_444 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.three_444,
|
|
show: touch == 'three_444'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'three_444')"
|
|
:list="chipArray.three_444"
|
|
:win="winArray.includes('three_444')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_4"></span>
|
|
<span class="span dice_4"></span>
|
|
<span class="span dice_4"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.three_444 || 0 }}</div>
|
|
</div>
|
|
<!-- three_555 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.three_555,
|
|
show: touch == 'three_555'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'three_555')"
|
|
:list="chipArray.three_555"
|
|
:win="winArray.includes('three_555')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_5"></span>
|
|
<span class="span dice_5"></span>
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.three_555 || 0 }}</div>
|
|
</div>
|
|
<!-- three_666 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.three_666,
|
|
show: touch == 'three_666'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'three_666')"
|
|
:list="chipArray.three_666"
|
|
:win="winArray.includes('three_666')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_6"></span>
|
|
<span class="span dice_6"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.three_666 || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cols">
|
|
<div class="ratio">1:10</div>
|
|
<!-- two_44 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_44,
|
|
show: touch == 'two_44'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_44')"
|
|
:list="chipArray.two_44"
|
|
:win="winArray.includes('two_44')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_4"></span>
|
|
<span class="span dice_4"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_44 || 0 }}</div>
|
|
</div>
|
|
<!-- two_55 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_55,
|
|
show: touch == 'two_55'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_55')"
|
|
:list="chipArray.two_55"
|
|
:win="winArray.includes('two_55')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_5"></span>
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_55 || 0 }}</div>
|
|
</div>
|
|
<!-- two_66 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_66,
|
|
show: touch == 'two_66'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_66')"
|
|
:list="chipArray.two_66"
|
|
:win="winArray.includes('two_66')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_6"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_66 || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cols item big">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.big,
|
|
show: touch == 'big'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'big')"
|
|
:list="chipArray.big"
|
|
:win="winArray.includes('big')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big red">{{ Lang[Type].big }}</span>
|
|
<span class="points red">11-17</span>
|
|
<span>1:1</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.big || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="list second">
|
|
<!-- number_4 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_4,
|
|
show: touch == 'number_4'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_4')"
|
|
:list="chipArray.number_4"
|
|
:win="winArray.includes('number_4')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">4</span>
|
|
<span>1:60</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_4 || 0 }}</div>
|
|
</div>
|
|
<!-- number_5 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_5,
|
|
show: touch == 'number_5'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_5')"
|
|
:list="chipArray.number_5"
|
|
:win="winArray.includes('number_5')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">5</span>
|
|
<span>1:30</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_5 || 0 }}</div>
|
|
</div>
|
|
<!-- number_6 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_6,
|
|
show: touch == 'number_6'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_6')"
|
|
:list="chipArray.number_6"
|
|
:win="winArray.includes('number_6')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">6</span>
|
|
<span>1:18</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_6 || 0 }}</div>
|
|
</div>
|
|
<!-- number_7 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_7,
|
|
show: touch == 'number_7'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_7')"
|
|
:list="chipArray.number_7"
|
|
:win="winArray.includes('number_7')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">7</span>
|
|
<span>1:12</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_7 || 0 }}</div>
|
|
</div>
|
|
<!-- number_8 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_8,
|
|
show: touch == 'number_8'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_8')"
|
|
:list="chipArray.number_8"
|
|
:win="winArray.includes('number_8')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">8</span>
|
|
<span>1:8</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_8 || 0 }}</div>
|
|
</div>
|
|
<!-- number_9 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_9,
|
|
show: touch == 'number_9'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_9')"
|
|
:list="chipArray.number_9"
|
|
:win="winArray.includes('number_9')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">9</span>
|
|
<span>1:6</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_9 || 0 }}</div>
|
|
</div>
|
|
<!-- number_10 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_10,
|
|
show: touch == 'number_10'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_10')"
|
|
:list="chipArray.number_10"
|
|
:win="winArray.includes('number_10')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">10</span>
|
|
<span>1:6</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_10 || 0 }}</div>
|
|
</div>
|
|
<!-- number_11 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_11,
|
|
show: touch == 'number_11'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_11')"
|
|
:list="chipArray.number_11"
|
|
:win="winArray.includes('number_11')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">11</span>
|
|
<span>1:6</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_11 || 0 }}</div>
|
|
</div>
|
|
<!-- number_12 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_12,
|
|
show: touch == 'number_12'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_12')"
|
|
:list="chipArray.number_12"
|
|
:win="winArray.includes('number_12')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">12</span>
|
|
<span>1:6</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_12 || 0 }}</div>
|
|
</div>
|
|
<!-- number_13 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_13,
|
|
show: touch == 'number_13'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_13')"
|
|
:list="chipArray.number_13"
|
|
:win="winArray.includes('number_13')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">13</span>
|
|
<span>1:8</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_13 || 0 }}</div>
|
|
</div>
|
|
<!-- number_14 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_14,
|
|
show: touch == 'number_14'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_14')"
|
|
:list="chipArray.number_14"
|
|
:win="winArray.includes('number_14')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">14</span>
|
|
<span>1:12</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_14 || 0 }}</div>
|
|
</div>
|
|
<!-- number_15 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_15,
|
|
show: touch == 'number_15'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_15')"
|
|
:list="chipArray.number_15"
|
|
:win="winArray.includes('number_15')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">15</span>
|
|
<span>1:18</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_15 || 0 }}</div>
|
|
</div>
|
|
<!-- number_16 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_16,
|
|
show: touch == 'number_16'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_16')"
|
|
:list="chipArray.number_16"
|
|
:win="winArray.includes('number_16')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">16</span>
|
|
<span>1:30</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_16 || 0 }}</div>
|
|
</div>
|
|
<!-- number_17 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.number_17,
|
|
show: touch == 'number_17'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'number_17')"
|
|
:list="chipArray.number_17"
|
|
:win="winArray.includes('number_17')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">17</span>
|
|
<span>1:60</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.number_17 || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="list third">
|
|
<!-- two_12 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_12,
|
|
show: touch == 'two_12'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_12')"
|
|
:list="chipArray.two_12"
|
|
:win="winArray.includes('two_12')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_2"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_12 || 0 }}</div>
|
|
</div>
|
|
<!-- two_13 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_13,
|
|
show: touch == 'two_13'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_13')"
|
|
:list="chipArray.two_13"
|
|
:win="winArray.includes('two_13')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_3"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_13 || 0 }}</div>
|
|
</div>
|
|
<!-- two_14 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_14,
|
|
show: touch == 'two_14'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_14')"
|
|
:list="chipArray.two_14"
|
|
:win="winArray.includes('two_14')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_4"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_14 || 0 }}</div>
|
|
</div>
|
|
<!-- two_15 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_15,
|
|
show: touch == 'two_15'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_15')"
|
|
:list="chipArray.two_15"
|
|
:win="winArray.includes('two_15')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_15 || 0 }}</div>
|
|
</div>
|
|
<!-- two_16 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_16,
|
|
show: touch == 'two_16'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_16')"
|
|
:list="chipArray.two_16"
|
|
:win="winArray.includes('two_16')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_16 || 0 }}</div>
|
|
</div>
|
|
<!-- two_23 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_23,
|
|
show: touch == 'two_23'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_23')"
|
|
:list="chipArray.two_23"
|
|
:win="winArray.includes('two_23')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_3"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_23 || 0 }}</div>
|
|
</div>
|
|
<!-- two_24 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_24,
|
|
show: touch == 'two_24'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_24')"
|
|
:list="chipArray.two_24"
|
|
:win="winArray.includes('two_24')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_4"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_24 || 0 }}</div>
|
|
</div>
|
|
<!-- two_25 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_25,
|
|
show: touch == 'two_25'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_25')"
|
|
:list="chipArray.two_25"
|
|
:win="winArray.includes('two_25')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_25 || 0 }}</div>
|
|
</div>
|
|
<!-- two_26 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_26,
|
|
show: touch == 'two_26'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_26')"
|
|
:list="chipArray.two_26"
|
|
:win="winArray.includes('two_26')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_2"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_26 || 0 }}</div>
|
|
</div>
|
|
<!-- two_34 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_34,
|
|
show: touch == 'two_34'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_34')"
|
|
:list="chipArray.two_34"
|
|
:win="winArray.includes('two_34')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_4"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_34 || 0 }}</div>
|
|
</div>
|
|
<!-- two_35 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_35,
|
|
show: touch == 'two_35'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_35')"
|
|
:list="chipArray.two_35"
|
|
:win="winArray.includes('two_35')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_35 || 0 }}</div>
|
|
</div>
|
|
<!-- two_36 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_36,
|
|
show: touch == 'two_36'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_36')"
|
|
:list="chipArray.two_36"
|
|
:win="winArray.includes('two_36')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_3"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_36 || 0 }}</div>
|
|
</div>
|
|
<!-- two_45 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_45,
|
|
show: touch == 'two_45'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_45')"
|
|
:list="chipArray.two_45"
|
|
:win="winArray.includes('two_45')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_4"></span>
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_45 || 0 }}</div>
|
|
</div>
|
|
<!-- two_46 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_46,
|
|
show: touch == 'two_46'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_46')"
|
|
:list="chipArray.two_46"
|
|
:win="winArray.includes('two_46')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_4"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_46 || 0 }}</div>
|
|
</div>
|
|
<!-- two_56 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.two_56,
|
|
show: touch == 'two_56'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'two_56')"
|
|
:list="chipArray.two_56"
|
|
:win="winArray.includes('two_56')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_5"></span>
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.two_56 || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="list fourth">1:5</div>
|
|
<div class="list fifth">
|
|
<!-- singular -->
|
|
<div class="cols item singular">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.singular,
|
|
show: touch == 'singular'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'singular')"
|
|
:list="chipArray.singular"
|
|
:win="winArray.includes('singular')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big blue">{{ Lang[Type].odd }}</span>
|
|
<span>1:1</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.singular || 0 }}</div>
|
|
</div>
|
|
<div class="cols center">
|
|
<div class="top">
|
|
<!-- living_1 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.living_1,
|
|
show: touch == 'living_1'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'living_1')"
|
|
:list="chipArray.living_1"
|
|
:win="winArray.includes('living_1')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_1"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.living_1 || 0 }}</div>
|
|
</div>
|
|
<!-- living_2 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.living_2,
|
|
show: touch == 'living_2'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'living_2')"
|
|
:list="chipArray.living_2"
|
|
:win="winArray.includes('living_2')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_2"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.living_2 || 0 }}</div>
|
|
</div>
|
|
<!-- living_3 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.living_3,
|
|
show: touch == 'living_3'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'living_3')"
|
|
:list="chipArray.living_3"
|
|
:win="winArray.includes('living_3')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_3"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.living_3 || 0 }}</div>
|
|
</div>
|
|
<!-- living_4 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.living_4,
|
|
show: touch == 'living_4'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'living_4')"
|
|
:list="chipArray.living_4"
|
|
:win="winArray.includes('living_4')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_4"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.living_4 || 0 }}</div>
|
|
</div>
|
|
<!-- living_5 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.living_5,
|
|
show: touch == 'living_5'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'living_5')"
|
|
:list="chipArray.living_5"
|
|
:win="winArray.includes('living_5')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_5"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.living_5 || 0 }}</div>
|
|
</div>
|
|
<!-- living_6 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.living_6,
|
|
show: touch == 'living_6'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'living_6')"
|
|
:list="chipArray.living_6"
|
|
:win="winArray.includes('living_6')"
|
|
></chipView>
|
|
<div class="dice-box">
|
|
<span class="span dice_6"></span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.living_6 || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<span>{{ Lang[Type].single_dice }} 1:1</span>
|
|
<span>{{ Lang[Type].double_dice }} 1:2</span>
|
|
<span>{{ Lang[Type].three_dice }} 1:3</span>
|
|
</div>
|
|
</div>
|
|
<!-- plural -->
|
|
<div class="cols item plural">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.plural,
|
|
show: touch == 'plural'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'plural')"
|
|
:list="chipArray.plural"
|
|
:win="winArray.includes('plural')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big red">{{ Lang[Type].even }}</span>
|
|
<span>1:1</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.plural || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from "vue"
|
|
import { useStore } from "vuex"
|
|
import confirmBet from "@/components/confirmBet.vue"
|
|
import chipView from "@/components/chipView.vue"
|
|
import { diceData } from "@/utils/common"
|
|
export default {
|
|
name: "TableDice",
|
|
components: { confirmBet, chipView },
|
|
props: {
|
|
touch: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
bet_amount_msg: {
|
|
type: Object,
|
|
default: () => ({
|
|
...diceData.amount
|
|
})
|
|
},
|
|
winArray: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
downChip: {
|
|
type: Object,
|
|
default: () => ({
|
|
...diceData.amount
|
|
})
|
|
},
|
|
chipArray: {
|
|
type: Object,
|
|
default: () => ({ ...diceData.array })
|
|
}
|
|
},
|
|
setup(prop, context) {
|
|
const store = useStore()
|
|
const Type = computed(() => store.state.config.$Type)
|
|
const Lang = computed(() => store.state.config.$lang)
|
|
const downBet = (e, type) => {
|
|
context.emit("downBet", e, type)
|
|
}
|
|
const confirmChip = () => {
|
|
context.emit("confirmChip")
|
|
}
|
|
const cancelChip = () => {
|
|
context.emit("cancelChip")
|
|
}
|
|
const undoChip = () => {
|
|
context.emit("undoChip")
|
|
}
|
|
return { Type, Lang, downBet, confirmChip, cancelChip, undoChip }
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.dice {
|
|
position: absolute;
|
|
top: 1.8rem;
|
|
left: 2.8rem;
|
|
right: 3.8rem;
|
|
bottom: 0.25rem;
|
|
border-radius: 10px;
|
|
border: 1px solid #898a91;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transform: rotateX(0deg);
|
|
.list {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
.item {
|
|
position: relative;
|
|
border-right: 1px solid #898a91;
|
|
font-size: 0.45rem;
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
&.unclick {
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 102%;
|
|
border-bottom: 1px solid #898a91;
|
|
top: 50%;
|
|
transform: rotate(14deg);
|
|
z-index: 6;
|
|
left: -2px;
|
|
}
|
|
&.max:after {
|
|
width: 104%;
|
|
transform: rotate(21deg);
|
|
}
|
|
&.min:after {
|
|
width: 104%;
|
|
transform: rotate(21deg);
|
|
}
|
|
.chip-view {
|
|
background: rgb(98 74 4 / 40%);
|
|
}
|
|
}
|
|
|
|
.chip-box {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
.text {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
line-height: 1;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
.big {
|
|
font-weight: bold;
|
|
padding-right: 0.24rem;
|
|
padding-left: 0.2rem;
|
|
}
|
|
}
|
|
.money {
|
|
position: absolute;
|
|
font-size: 0.24rem;
|
|
font-weight: normal;
|
|
left: -3px;
|
|
bottom: -3px;
|
|
transform: scale(0.5);
|
|
pointer-events: none;
|
|
color: #ddd;
|
|
vertical-align: bottom;
|
|
&::before {
|
|
display: inline-block;
|
|
content: "总";
|
|
background: rgba(255, 255, 255, 0.4);
|
|
font-size: 10px;
|
|
border-radius: 0.615rem;
|
|
width: 0.615rem;
|
|
height: 0.615rem;
|
|
text-align: center;
|
|
line-height: 0.615rem;
|
|
font-weight: normal;
|
|
margin-right: 0.06rem;
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.first {
|
|
height: 35%;
|
|
border-bottom: 1px solid #898a91;
|
|
.cols {
|
|
width: 12.5%;
|
|
box-sizing: border-box;
|
|
border-right: 1px solid #898a91;
|
|
position: relative;
|
|
color: #fff;
|
|
font-size: 0.35rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
&.small .chip-view {
|
|
border-top-left-radius: 10px;
|
|
}
|
|
&.big .chip-view {
|
|
border-top-right-radius: 10px;
|
|
}
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
.ratio {
|
|
line-height: 1;
|
|
padding: 0.13rem 0;
|
|
font-weight: 600;
|
|
font-size: 0.38rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
.item {
|
|
border-top: 1px solid #898a91;
|
|
border-right: none;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
.points {
|
|
line-height: 1;
|
|
padding: 0.2rem 0;
|
|
font-size: 0.4rem;
|
|
text-align: center;
|
|
}
|
|
.text {
|
|
flex-direction: column;
|
|
line-height: 1;
|
|
text-shadow: 1px 1px #050505;
|
|
pointer-events: none;
|
|
.big {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
.triplet {
|
|
width: 25%;
|
|
}
|
|
}
|
|
.second {
|
|
width: 100%;
|
|
height: 19%;
|
|
border-bottom: 1px solid #898a91;
|
|
display: flex;
|
|
.item {
|
|
flex: 1;
|
|
.text {
|
|
flex-direction: column;
|
|
line-height: 1;
|
|
text-shadow: 1px 1px #050505;
|
|
color: #fff;
|
|
font-size: 0.35rem;
|
|
font-weight: 600;
|
|
.big {
|
|
font-size: 0.55rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.third {
|
|
width: 100%;
|
|
height: 19%;
|
|
border-bottom: 1px solid #898a91;
|
|
display: flex;
|
|
.item {
|
|
flex: 1;
|
|
.dice-box {
|
|
flex-direction: column;
|
|
.span {
|
|
margin: 0.05rem 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.fourth {
|
|
height: 7%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.45rem;
|
|
color: #fff;
|
|
border-bottom: 1px solid #898a91;
|
|
pointer-events: none;
|
|
}
|
|
.fifth {
|
|
height: 20%;
|
|
color: #fff;
|
|
.center {
|
|
width: 75%;
|
|
border-right: 1px solid #898a91;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.top {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.item {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.bottom {
|
|
border-top: 1px solid #898a91;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
line-height: 1;
|
|
padding: 0.13rem 0;
|
|
font-weight: 600;
|
|
font-size: 0.4rem;
|
|
}
|
|
}
|
|
.singular {
|
|
width: 12.5%;
|
|
.chip-view {
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
}
|
|
.plural {
|
|
width: 12.5%;
|
|
.chip-view {
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
}
|
|
.text {
|
|
flex-direction: column;
|
|
line-height: 1;
|
|
text-shadow: 1px 1px #050505;
|
|
font-size: 0.35rem;
|
|
.big {
|
|
font-size: 0.8rem;
|
|
margin-bottom: 0.05rem;
|
|
}
|
|
}
|
|
}
|
|
.dice-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 1.5%;
|
|
.flex {
|
|
margin: 0.1rem 0;
|
|
}
|
|
}
|
|
.span {
|
|
width: 0.43rem;
|
|
height: 0.43rem;
|
|
margin: 0 1.5%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.dice_1 {
|
|
background-image: url("~@/assets/images/dice/dice_1.png");
|
|
}
|
|
.dice_2 {
|
|
background-image: url("~@/assets/images/dice/dice_2.png");
|
|
}
|
|
.dice_3 {
|
|
background-image: url("~@/assets/images/dice/dice_3.png");
|
|
}
|
|
.dice_4 {
|
|
background-image: url("~@/assets/images/dice/dice_4.png");
|
|
}
|
|
.dice_5 {
|
|
background-image: url("~@/assets/images/dice/dice_5.png");
|
|
}
|
|
.dice_6 {
|
|
background-image: url("~@/assets/images/dice/dice_6.png");
|
|
}
|
|
}
|
|
.blue {
|
|
color: #12a2e6;
|
|
}
|
|
.red {
|
|
color: #fe8365;
|
|
}
|
|
}
|
|
</style>
|