Initial commit: GamePortrait 竖屏版 - 深色豪华主题

src/components/DiceResult.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="dice-result">
+    <template v-if="sendMode == 'openingDiceResult'">
+      <div class="dice" :class="[`dice_${result[0]}`]"></div>
+      <div class="dice" :class="[`dice_${result[1]}`]"></div>
+      <div class="dice" :class="[`dice_${result[2]}`]"></div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "diceResult",
+  props: {
+    result: {
+      type: Array,
+      default: () => [0, 0, 0]
+    },
+    sendMode: {
+      type: String,
+      default: ""
+    }
+  },
+  setup() {}
+}
+</script>
+<style lang="scss" scoped>
+.dice-result {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotateX(0deg);
+  .dice {
+    width: 1.5rem;
+    height: 1.5rem;
+    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");
+    }
+  }
+}
+</style>

src/components/GoodRoad.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="goodroad">
+    <div
+      class="list animate__animated animate__fadeIn"
+      v-for="(item, index) in list"
+      :key="index"
+      @click="goPath(item)"
+    >
+      <div class="left">
+        <div class="hd">
+          <div class="name">{{ item.table_name }}</div>
+          <div class="lable">{{ item.spec_type }}</div>
+          <div class="sate flex">
+            <span>
+              {{ getSendMode(item.sendMode) }}
+            </span>
+            <div class="result" v-html="getTextVal(item)"></div>
+          </div>
+        </div>
+        <van-progress
+          :percentage="
+            item.sendMode == 'startBetCountDown'
+              ? (item.count_down / item.wait_time) * 100
+              : 0
+          "
+          stroke-width="2.5"
+          :show-pivot="false"
+        />
+        <div class="bd">
+          <WayBox
+            :dutch="false"
+            wayType="bigway"
+            :data="item"
+            :index="index"
+            routerName="allway"
+          ></WayBox>
+          <div class="waybill-type">
+            <div class="top">{{ $lang[$Type].hit }}</div>
+            <div class="text">{{ item.waybill_type }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="right" v-if="false">
+        <div class="down-box">
+          <div class="banker"></div>
+          <div class="player"></div>
+        </div>
+      </div>
+    </div>
+    <van-empty
+      v-if="list.length == 0"
+      :description="$lang[$Type].no_good_way"
+    />
+  </div>
+</template>
+<script>
+import { mapState } from "vuex"
+import WayBox from "@/components/WayBox.vue"
+export default {
+  name: "GoodRoad",
+  data() {
+    return {}
+  },
+  components: { WayBox },
+  mounted() {},
+  computed: {
+    ...mapState({
+      $Type: (state) => state.config.$Type,
+      $lang: (state) => state.config.$lang,
+      font: (state) => state.config.fonstSize,
+      tabData: (state) => state.app.allTableData,
+      userInfo: (state) => state.app.userInfo,
+      list: (state) => {
+        const allTableData = state.app.allTableData
+        const goodRoadList = state.socket.goodRoadList
+        let list = []
+        if (goodRoadList.length > 0 && allTableData.length > 0) {
+          goodRoadList.forEach((good) => {
+            allTableData.forEach((v) => {
+              if (good.table_id == v.id) {
+                v.waybill_type = good.waybill_type
+                list.push(v)
+              }
+            })
+          })
+        }
+        return list
+      }
+    })
+  },
+  methods: {
+    getSendMode(sendMode) {
+      let text = ""
+      switch (sendMode) {
+        case "changeBoot":
+          text = this.$lang[this.$Type].changeBoot
+          break
+        case "resetBoot":
+          text = this.$lang[this.$Type].resetBoot
+          break
+        case "startBet":
+          text = this.$lang[this.$Type].startBet
+          break
+        case "startRobCountDown":
+          text = this.$lang[this.$Type].startRobCountDown
+          break
+        case "startBetCountDown":
+          text = this.$lang[this.$Type].startBetCountDown
+          break
+        case "endBet":
+          text = this.$lang[this.$Type].endBet
+          break
+        case "sendScanResult":
+          text = this.$lang[this.$Type].sendScanResult
+          break
+        case "openingBaccaratResult":
+        case "openingDtResult":
+        case "openingNnResult":
+        case "openingTcResult":
+          text = this.$lang[this.$Type].Insettlement
+
+          break
+        default:
+          text = ""
+      }
+      return text
+    },
+    getTextVal(data) {
+      let html = ""
+      if (data.sendMode == "startBetCountDown") {
+        html = `<span class="palyer">${data.count_down}</span>`
+      } else if (data.sendMode == "openingBaccaratResult") {
+        if (data.round.opening == 1) {
+          html = `<span class="banker">${this.$lang[this.$Type].banker}</span>`
+        } else if (data.round.opening == 2) {
+          html = `<span class="palyer">${this.$lang[this.$Type].player}</span>`
+        } else if (data.round.opening == 3) {
+          html = `<span class="tie">${this.$lang[this.$Type].tie}</span>`
+        }
+      } else if (data.sendMode == "openingDtResult") {
+        if (data.round.opening == 1) {
+          html = `<span class="banker">${this.$lang[this.$Type].dragon}</span>`
+        } else if (data.round.opening == 2) {
+          html = `<span class="palyer">${this.$lang[this.$Type].tiger}</span>`
+        } else if (data.round.opening == 3) {
+          html = `<span class="tie">${this.$lang[this.$Type].tie}</span>`
+        }
+      } else if (
+        data.sendMode == "openingNnResult" ||
+        data.sendMode == "openingTcResult"
+      ) {
+        let text = ""
+        if (
+          data.round.win_player_1 == 0 &&
+          data.round.win_player_2 == 0 &&
+          data.round.win_player_3 == 0
+        ) {
+          text = this.$lang[this.$Type].banker
+        } else {
+          if (data.round.win_player_1 == 1) {
+            text = text + this.$lang[this.$Type].player1
+          }
+          if (data.round.win_player_2 == 1) {
+            text = text + this.$lang[this.$Type].player2
+          }
+          if (data.round.win_player_3 == 1) {
+            text = text + this.$lang[this.$Type].player3
+          }
+        }
+        html = `<span class="tie">${text}</span>`
+      }
+      return html
+    },
+    goPath(item) {
+      this.$emit("close")
+      // console.log(this.$router)
+      this.$router.replace({ name: "play", query: { id: item.id } })
+    }
+  },
+
+  watch: {}
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$dark-bg: #0d0d0d;
+$dark-bg-secondary: #1a1a1a;
+$card-bg: #1e1e1e;
+$border-color: #333;
+$gold: #c5a059;
+$text-primary: #ffffff;
+$text-secondary: #888888;
+
+.goodroad {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 0.5rem;
+  box-sizing: border-box;
+  background: $dark-bg-secondary;
+  .list {
+    width: 100%;
+    font-size: 13px;
+    margin-top: 15px;
+    box-shadow: 0px 0px 4px 0.5px rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+    padding: 0 5px 5px 5px;
+    box-sizing: border-box;
+    display: flex;
+    background: $card-bg;
+    border: 1px solid $border-color;
+    &:last-child {
+      margin-bottom: 15px;
+    }
+    .left {
+      flex: 1;
+      color: $text-primary;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .hd {
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 0;
+        .name {
+          font-weight: 600;
+        }
+        .lable {
+          line-height: 1;
+          padding: 2px 4px;
+          font-weight: 600;
+          color: #000;
+          font-size: 10px;
+          border-radius: 2px;
+          background: linear-gradient(135deg, $gold 0%, #d4af37 100%);
+        }
+        .tip {
+          font-weight: bold;
+          background-image: linear-gradient(90deg, $gold 0%, #d4af37 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .sate {
+          align-items: center;
+          color: $text-secondary;
+        }
+        .result {
+          padding-left: 5px;
+          font-weight: 600;
+        }
+      }
+      .bd {
+        background: $card-bg;
+        display: flex;
+        width: 100%;
+        margin-top: 2px;
+        height: 3.5rem;
+        ::v-deep {
+          .way-box {
+            height: 3.5rem;
+            canvas {
+              height: 3.5rem;
+              flex: 1;
+            }
+          }
+        }
+      }
+      .waybill-type {
+        width: 22px;
+        border: 1px solid $gold;
+        background: $gold;
+        display: flex;
+        flex-direction: column;
+        max-height: 3.5rem;
+        overflow: hidden;
+        .top {
+          font-size: 12px;
+          word-break: keep-all;
+          white-space: nowrap;
+          transform: scale(0.7);
+          color: #000;
+        }
+        .text {
+          flex: 1;
+          background: $card-bg;
+          writing-mode: lr-tb;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          font-weight: 600;
+          color: $text-primary;
+        }
+      }
+    }
+    .right {
+      background: #1858b9;
+      width: calc(30% - 5px);
+      margin-left: 5px;
+      margin-top: 5px;
+      border-radius: 2px;
+    }
+  }
+}
+</style>

src/components/HallList.vue

@@ -0,0 +1,457 @@
+<template>
+	<div class="hall-list">
+		<div class="swiper">
+			<div class="swiper-item animate__animated animate__fadeIn" v-for="(item, index) in list" :key="index"
+				@click="goPlay(item)">
+				<div class="hd">
+					<div class="name">{{ item.table_name }}</div>
+					<div class="lable">{{ item.spec_type }}</div>
+					<div class="tip">{{ item.waybill_type }}</div>
+					<div class="sate flex">
+						<span>
+							{{ getSendMode(item.sendMode) }}
+						</span>
+						<div class="result" v-html="getTextVal(item)"></div>
+					</div>
+				</div>
+				<van-progress :percentage="
+            item.sendMode == 'startBetCountDown'
+              ? (item.count_down / item.wait_time) * 100
+              : 0
+          " stroke-width="2.5" :show-pivot="false" />
+				<div class="bd">
+					<WayBox :wayType="wayType" :data="item" :index="index" :routerName="routerName"></WayBox>
+				</div>
+				<div class="ft">
+					<div class="left">
+						<template v-if="routerName == 'toning'">
+							<span>{{ textType[routerName][0] }}</span>
+							<span class="num black">
+								{{ item.count.zero_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][1] }}</span>
+							<span class="num palyer">
+								{{ item.count.one_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][2] }}</span>
+							<span class="num tie">
+								{{ item.count.two_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][3] }}</span>
+							<span class="num yellow">
+								{{ item.count.three_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][4] }}</span>
+							<span class="num banker">
+								{{ item.count.four_count || 0 }}
+							</span>
+						</template>
+						<template v-else-if="routerName == 'dice'">
+							<span>{{ textType[routerName][0] }}</span>
+							<span class="num banker">
+								{{ item.bankerCount || item.count.big_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][1] }}</span>
+							<span class="num palyer">
+								{{ item.tieCount || item.count.small_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][2] }}</span>
+							<span class="num tie">
+								{{ item.playerCount || item.count.leopard_count || 0 }}
+							</span>
+						</template>
+						<template v-else-if="routerName == 'lp'">
+							<span>{{ textType[routerName][0] }}</span>
+							<span class="num banker">
+								{{ item.count.red_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][1] }}</span>
+							<span class="num black">
+								{{ item.count.black_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][2] }}</span>
+							<span class="num tie">
+								{{ item.count.zero_count || 0 }}
+							</span>
+						</template>
+
+						<template v-else>
+							<span>{{ textType[routerName][0] }}</span>
+							<span class="num banker">
+								{{ item.bankerCount || item.player_1_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][1] }}</span>
+							<span class="num tie">
+								{{ item.tieCount || item.player_2_count || 0 }}
+							</span>
+							<span>{{ textType[routerName][2] }}</span>
+							<span class="num palyer">
+								{{ item.playerCount || item.player_3_count || 0 }}
+							</span>
+						</template>
+					</div>
+					<div class="right">
+						{{ Lang[Type].limit }} ：{{ item.limit_money }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import {
+		computed
+	} from "vue"
+	import {
+		useRouter
+	} from "vue-router"
+	import {
+		useStore
+	} from "vuex"
+	import {
+		FreeMode,
+		Grid
+	} from "swiper"
+	import {
+		audioMp3
+	} from "@/assets/js/sound.js"
+	import WayBox from "@/components/WayBox.vue"
+	export default {
+		components: {
+			WayBox
+		},
+		setup() {
+			const store = useStore()
+			const router = useRouter()
+			const Type = computed(() => store.state.config.$Type)
+			const Lang = computed(() => store.state.config.$lang)
+			const wayType = computed(() => store.state.config.hallWayType)
+			const routerName = computed(() => router.currentRoute.value.name)
+			const list = computed(() => {
+				const allTableData = store.state.app.allTableData
+				const goodRoadList = store.state.socket.goodRoadList
+				let data = []
+				if (allTableData.length) {
+					switch (routerName.value) {
+						case "baccarat":
+							data = allTableData.filter((v) => v.game_id == 1)
+							break
+						case "longhu":
+							data = allTableData.filter((v) => v.game_id == 2)
+							break
+						case "nn":
+							data = allTableData.filter((v) => v.game_id == 4)
+							break
+						case "threecard":
+							data = allTableData.filter((v) => v.game_id == 5)
+							break
+						case "toning":
+							data = allTableData.filter((v) => v.game_id == 6)
+							break
+						case "dice":
+							data = allTableData.filter((v) => v.game_id == 7)
+							break
+						case "lp":
+							data = allTableData.filter((v) => v.game_id == 8)
+							// console.log(data)
+							break
+					}
+				}
+				// 赋值好路
+				data.forEach((v) => {
+					if (goodRoadList.length > 0) {
+						v.waybill_type = ""
+						goodRoadList.forEach((good) => {
+							if (good.table_id == v.id) {
+								v.waybill_type = good.waybill_type
+							}
+						})
+					} else {
+						v.waybill_type = ""
+					}
+				})
+				return data
+			})
+			const getSendMode = (sendMode) => {
+				let text = ""
+				switch (sendMode) {
+					case "changeBoot":
+						text = Lang.value[Type.value].changeBoot
+						break
+					case "resetBoot":
+						text = Lang.value[Type.value].resetBoot
+						break
+					case "startBet":
+						text = Lang.value[Type.value].startBet
+						break
+					case "startRobCountDown":
+						text = Lang.value[Type.value].startRobCountDown
+						break
+					case "startBetCountDown":
+						text = Lang.value[Type.value].startBetCountDown
+						break
+					case "endBet":
+						text = Lang.value[Type.value].endBet
+						break
+					case "sendScanResult":
+						text = Lang.value[Type.value].sendScanResult
+						break
+					case "openingBaccaratResult":
+					case "openingDtResult":
+					case "openingNnResult":
+					case "openingTcResult":
+					case "openingToningResult":
+						text = Lang.value[Type.value].Insettlement
+
+						break
+					default:
+						text = ""
+				}
+				return text
+			}
+			const getTextVal = (data) => {
+				let html = ""
+				if (data.sendMode == "startBetCountDown") {
+					html = `<span class="palyer">${data.count_down}</span>`
+				} else if (data.sendMode == "openingBaccaratResult") {
+					if (data.round.opening == 1) {
+						html = `<span class="banker">${Lang.value[Type.value].banker}</span>`
+					} else if (data.round.opening == 2) {
+						html = `<span class="palyer">${Lang.value[Type.value].player}</span>`
+					} else if (data.round.opening == 3) {
+						html = `<span class="tie">${Lang.value[Type.value].tie}</span>`
+					}
+				} else if (data.sendMode == "openingDtResult") {
+					if (data.round.opening == 1) {
+						html = `<span class="banker">${Lang.value[Type.value].dragon}</span>`
+					} else if (data.round.opening == 2) {
+						html = `<span class="palyer">${Lang.value[Type.value].tiger}</span>`
+					} else if (data.round.opening == 3) {
+						html = `<span class="tie">${Lang.value[Type.value].tie}</span>`
+					}
+				} else if (
+					data.sendMode == "openingNnResult" ||
+					data.sendMode == "openingTcResult"
+				) {
+					let text = ""
+					if (
+						data.round.win_player_1 == 0 &&
+						data.round.win_player_2 == 0 &&
+						data.round.win_player_3 == 0
+					) {
+						text = Lang.value[Type.value].banker
+					} else {
+						if (data.round.win_player_1 == 1) {
+							text = text + Lang.value[Type.value].player1
+						}
+						if (data.round.win_player_2 == 1) {
+							text = text + Lang.value[Type.value].player2
+						}
+						if (data.round.win_player_3 == 1) {
+							text = text + Lang.value[Type.value].player3
+						}
+					}
+					html = `<span class="tie">${text}</span>`
+				}
+				return html
+			}
+			const textType = computed(() => ({
+				baccarat: [
+					Lang.value[Type.value].banker,
+					Lang.value[Type.value].tie,
+					Lang.value[Type.value].player
+				],
+				longhu: [
+					Lang.value[Type.value].dragon,
+					Lang.value[Type.value].tie,
+					Lang.value[Type.value].tiger
+				],
+				nn: [
+					Lang.value[Type.value].player1,
+					Lang.value[Type.value].player2,
+					Lang.value[Type.value].player3
+				],
+				threecard: [
+					Lang.value[Type.value].player1,
+					Lang.value[Type.value].player2,
+					Lang.value[Type.value].player3
+				],
+				toning: [0, 1, 2, 3, 4],
+				dice: [
+					Lang.value[Type.value].big,
+					Lang.value[Type.value].small,
+					Lang.value[Type.value].wai
+				],
+				lp: [
+					Lang.value[Type.value].red,
+					Lang.value[Type.value].black,
+					Lang.value[Type.value].zero
+				]
+			}))
+			const goPlay = (item) => {
+				audioMp3(["check"]).Play()
+				store.commit("app/routerStack", router.currentRoute.value.name)
+				router.push({
+					path: "/play",
+					query: {
+						id: item.id
+					}
+				})
+			}
+			return {
+				Type,
+				Lang,
+				list,
+				textType,
+				wayType,
+				getSendMode,
+				getTextVal,
+				routerName,
+				modules: [FreeMode, Grid],
+				goPlay
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	/* 深色豪华主题 */
+	$dark-bg: #0d0d0d;
+	$card-bg: #1e1e1e;
+	$border-color: #333;
+	$gold: #c5a059;
+	$text-primary: #ffffff;
+	$text-secondary: #888888;
+	$banker-red: #e74c3c;
+	$player-blue: #3498db;
+	$tie-green: #27ae60;
+
+	.hall-list {
+		width: 100%;
+		height: calc(100% - 56px);
+		overflow-y: auto;
+		overflow-x: hidden;
+		position: relative;
+		z-index: 1;
+		background: $dark-bg;
+
+		.swiper {
+			width: 100%;
+			padding: 12px;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			padding-bottom: 70px;
+		}
+
+		.swiper-item {
+			width: 100%;
+			font-size: 13px;
+			margin-bottom: 12px;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+			border-radius: 10px;
+			padding: 0;
+			box-sizing: border-box;
+			color: $text-primary;
+			display: flex;
+			flex-direction: column;
+			background: $card-bg;
+			border: 1px solid $border-color;
+			overflow: hidden;
+
+			&:active {
+				background: #252525;
+			}
+
+			.hd {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 10px 12px;
+				border-bottom: 1px solid $border-color;
+
+				.name {
+					font-weight: 600;
+					font-size: 15px;
+					color: $text-primary;
+				}
+
+				.lable {
+					line-height: 1;
+					padding: 3px 8px;
+					font-weight: 700;
+					color: #000;
+					font-size: 10px;
+					border-radius: 4px;
+					background: linear-gradient(135deg, $gold 0%, #d4af37 100%);
+				}
+
+				.tip {
+					font-weight: bold;
+					background-image: linear-gradient(90deg, $gold 0%, #d4af37 100%);
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+				}
+
+				.sate {
+					align-items: center;
+					min-width: 80px;
+					justify-content: flex-end;
+					
+					span {
+						color: $text-secondary;
+					}
+				}
+
+				.result {
+					padding-left: 5px;
+					font-weight: 600;
+					
+					.banker { color: $banker-red; }
+					.palyer { color: $player-blue; }
+					.tie { color: $tie-green; }
+				}
+			}
+
+			.bd {
+				background: $card-bg;
+				display: flex;
+				width: 100%;
+				padding: 8px;
+				min-height: 100px;
+			}
+
+			.ft {
+				display: flex;
+				justify-content: space-between;
+				padding: 8px 12px;
+				font-size: 12px;
+				border-top: 1px solid $border-color;
+
+				.left {
+					font-weight: bold;
+					color: $text-secondary;
+
+					.black {
+						color: $text-primary;
+					}
+
+					.yellow {
+						color: $gold;
+					}
+					
+					.banker { color: $banker-red; }
+					.palyer { color: $player-blue; }
+					.tie { color: $tie-green; }
+
+					.num {
+						margin: 0 8px 0 4px;
+					}
+				}
+				
+				.right {
+					color: #666;
+				}
+			}
+		}
+	}
+</style>

src/components/HallNav.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="navbar">
+    <NavBar :clickable="false">
+      <template #left>
+        <img
+          class="icon"
+          @click="logout"
+          src="~@/assets/images/icon/back.png"
+          alt=""
+        />
+        <div class="user">
+          <div class="name">{{ userInfo.username }}</div>
+          <div class="money">{{ userInfo.money }}</div>
+        </div>
+      </template>
+      <template #title>{{ Lang[Type].game_hall }}</template>
+      <template #right>
+        <img
+          class="icon"
+          @click="toggleDrop"
+          src="~@/assets/images/icon/drop.png"
+          alt=""
+        />
+        <img
+          class="icon margin"
+          @click="toggleAplayer"
+          src="~@/assets/images/icon/music.png"
+          alt=""
+        />
+        <img
+          class="icon"
+          @click="showMenu"
+          src="~@/assets/images/icon/menu.png"
+          alt=""
+        />
+      </template>
+    </NavBar>
+    <div class="drop-view" v-show="showBnt">
+      <div
+        @click="checkType('bigway')"
+        class="btn animate__animated animated-delay01 animate__bounceIn bigway"
+        :class="[{ active: wayType == 'bigway' }, Type]"
+      ></div>
+      <div
+        @click="checkType('allway')"
+        class="btn animate__animated animated-delay03 animate__bounceIn allway"
+        :class="[{ active: wayType == 'allway' }, Type]"
+      ></div>
+      <div
+        @click="checkType('totle')"
+        class="btn animate__animated animated-delay04 animate__bounceIn totle"
+        :class="[{ active: wayType == 'totle' }, Type]"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted } from "vue"
+import { useStore } from "vuex"
+import { NavBar } from "vant"
+export default {
+  name: "HallNav",
+  components: { NavBar },
+  setup() {
+    const showBnt = ref(false)
+    const store = useStore()
+    const wayType = computed(() => store.state.config.hallWayType)
+    const userInfo = computed(() => store.state.app.userInfo)
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    const showMenu = () => {
+      store.commit("config/showMenu", true)
+    }
+    const toggleDrop = () => {
+      showBnt.value = !showBnt.value
+    }
+    const checkType = (type) => {
+      store.commit("config/updateHallWayType", type)
+      showBnt.value = false
+    }
+    const logout = () => {
+      const protocol = document.location.protocol
+      const hostname = document.location.hostname
+      const port = document.location.port
+      let url = ""
+      if (port) {
+        url = `${protocol}//${hostname}:${port}`
+      } else {
+        url = `${protocol}//${hostname}`
+      }
+      window.location.href = url
+    }
+    const toggleAplayer = () => {
+      store.commit("config/showAplayer")
+    }
+    onMounted(() => {
+      store.commit("app/updateGameId", 1)
+    })
+
+    return {
+      Type,
+      Lang,
+      showBnt,
+      wayType,
+      userInfo,
+      showMenu,
+      checkType,
+      toggleDrop,
+      toggleAplayer,
+      logout
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题 */
+$dark-bg: #1a1a1a;
+$gold: #c5a059;
+$text-primary: #ffffff;
+$border-color: #333;
+
+.navbar {
+  position: relative;
+  background: $dark-bg;
+  border-bottom: 1px solid $border-color;
+  
+  :deep(.van-nav-bar) {
+    background: $dark-bg;
+    
+    &::after {
+      display: none;
+    }
+    
+    .van-nav-bar__title {
+      color: $text-primary;
+      font-weight: 600;
+    }
+  }
+  
+  .icon {
+    width: 22px;
+    filter: brightness(0) invert(1);
+    &:active {
+      opacity: 0.6;
+    }
+    &.margin {
+      margin: 0 12px;
+    }
+  }
+  
+  .user {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin-left: 15px;
+    text-align: left;
+    
+    .name {
+      padding-left: 20px;
+      margin-top: 2px;
+      color: $text-primary;
+      background: url("~@/assets/images/icon/user.png") left center no-repeat;
+      background-size: 14px;
+      filter: brightness(0) invert(1);
+    }
+    
+    .money {
+      color: $gold;
+      padding-left: 20px;
+      margin-top: 4px;
+      font-weight: 700;
+      background: url("~@/assets/images/icon/money.png") left center no-repeat;
+      background-size: 14px;
+    }
+  }
+  
+  .drop-view {
+    position: absolute;
+    width: 100px;
+    right: 1.9rem;
+    top: 50px;
+    z-index: 99;
+    background: #252525;
+    border-radius: 8px;
+    padding: 5px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    
+    .btn {
+      width: 90px;
+      height: 34px;
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+      margin: 5px auto;
+
+      &.bigway {
+        background-image: url("~@/assets/images/cn_bigway_btn.png");
+        &.en,
+        &.kr,
+        &.yn {
+          background-image: url("~@/assets/images/en_bigway_btn.png");
+        }
+        &.tw {
+          background-image: url("~@/assets/images/tw_bigway_btn.png");
+        }
+      }
+      &.allway {
+        background-image: url("~@/assets/images/cn_allway_btn.png");
+        &.en,
+        &.kr,
+        &.yn {
+          background-image: url("~@/assets/images/en_allway_btn.png");
+        }
+        &.tw {
+          background-image: url("~@/assets/images/tw_allway_btn.png");
+        }
+      }
+      &.totle {
+        background-image: url("~@/assets/images/cn_totle_btn.png");
+        &.en,
+        &.kr,
+        &.yn {
+          background-image: url("~@/assets/images/en_totle_btn.png");
+        }
+        &.tw {
+          background-image: url("~@/assets/images/tw_totle_btn.png");
+        }
+      }
+      &.active {
+        &.bigway {
+          background-image: url("~@/assets/images/cn_bigway_active_btn.png");
+          &.en,
+          &.kr,
+          &.yn {
+            background-image: url("~@/assets/images/en_bigway_active_btn.png");
+          }
+          &.tw {
+            background-image: url("~@/assets/images/tw_bigway_active_btn.png");
+          }
+        }
+        &.allway {
+          background-image: url("~@/assets/images/cn_allway_active_btn.png");
+          &.en,
+          &.kr,
+          &.yn {
+            background-image: url("~@/assets/images/en_allway_active_btn.png");
+          }
+          &.tw {
+            background-image: url("~@/assets/images/tw_allway_active_btn.png");
+          }
+        }
+        &.totle {
+          background-image: url("~@/assets/images/cn_totle_active_btn.png");
+          &.en,
+          &.kr,
+          &.yn {
+            background-image: url("~@/assets/images/en_totle_active_btn.png");
+          }
+          &.tw {
+            background-image: url("~@/assets/images/tw_totle_active_btn.png");
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/OnLinePop.vue

@@ -0,0 +1,278 @@
+<template>
+  <Transition
+    name="custom-classes"
+    enter-active-class="animate__animated animate__zoomIn"
+    leave-active-class="animate__animated animate__zoomOut"
+  >
+    <div class="online-pop" v-if="showOnLine">
+      <div class="online-view">
+        <div class="title">
+          <small class="small">{{ Lang[Type].nearly_20 }}</small>
+          {{ Lang[Type].player_list }}
+          <van-icon class="close" name="cross" @click="closeOnLine" />
+        </div>
+        <div class="view">
+          <div class="list" v-for="(item, index) in list" :key="item">
+            <div class="ranking" :class="[Type]">
+              {{ index != 0 ? index + 1 : "" }}
+            </div>
+            <div class="head" :class="[`head_${item.head}`]">
+              <span class="frame" :class="[`frame_${item.frame}`]"></span>
+            </div>
+            <div class="box">
+              <div class="name">{{ item.name }}</div>
+              <div class="money">{{ item.money }}</div>
+            </div>
+            <div class="box">
+              <div class="item down">
+                <span class="lab">{{ Lang[Type].place_bet }}</span>
+                <span>{{ item.win }}</span>
+              </div>
+              <div class="item time">
+                <span class="lab">{{ Lang[Type].to_win }}</span>
+                <span>{{ item.time }}{{ Lang[Type].games }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+import { computed } from "vue"
+import { useStore } from "vuex"
+export default {
+  name: "OnLinePop",
+  props: {},
+  setup() {
+    const store = useStore()
+    const showOnLine = computed(() => store.state.config.showOnLine)
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    let list = []
+    const getRndInteger = (min, max) => {
+      return Math.floor(Math.random() * (max - min)) + min
+    }
+    const genUid = () => {
+      const length = 9
+      const soupLength = genUid.soup_.length
+      let id = []
+      for (let i = 0; i < length; i++) {
+        id[i] = genUid.soup_.charAt(Math.random() * soupLength)
+      }
+      return `EZ` + id.join("")
+    }
+    genUid.soup_ = "0123456789"
+
+    for (let i = 0; i < 20; i++) {
+      const time = getRndInteger(5, 20)
+      const money = getRndInteger(4000, 99999)
+      const drop = getRndInteger(1, 99) / 100
+      const item = {
+        name: genUid(),
+        head: getRndInteger(1, 7),
+        frame: getRndInteger(1, 5),
+        time: time,
+        win: parseInt(time * 3.14 * 800) + drop,
+        money: (money + drop + parseInt(time * 3.14 * 800)).toFixed(2)
+      }
+      list.push(item)
+    }
+    const compare = (key, desc) => {
+      //key:  用于排序的数组的key值
+      //desc： 布尔值，为true是升序排序，false是降序排序
+      return function (a, b) {
+        let value1 = a[key]
+        let value2 = b[key]
+        if (desc == true) {
+          // 升序排列
+          return value1 - value2
+        } else {
+          // 降序排列
+          return value2 - value1
+        }
+      }
+    }
+    list = list.sort(compare("money", false))
+    const closeOnLine = () => {
+      store.commit("config/showOnLine")
+    }
+    return { Type, Lang, list, showOnLine, closeOnLine }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.online-pop {
+  position: absolute;
+  transform: rotateX(0deg);
+  z-index: 36;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  .online-view {
+    width: 13.5rem;
+    border: 1px solid #ddd;
+    margin-top: 1.5rem;
+    border-radius: 0.5rem;
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    left: 50%;
+    margin-left: -6.75rem;
+    padding-bottom: 0rem;
+    font-size: 0.35rem;
+    .title {
+      font-size: 0.5rem;
+      font-weight: 600;
+      color: #333;
+      text-align: center;
+      width: 100%;
+      margin-top: 0.5rem;
+      margin-bottom: 0.52rem;
+      position: relative;
+      z-index: 2;
+      transform: rotateX(0deg);
+      .small {
+        position: absolute;
+        left: 0.4rem;
+        font-size: 0.36rem;
+        top: 0.1rem;
+      }
+      .close {
+        position: absolute;
+        right: 0.25rem;
+        top: -0.2rem;
+        font-size: 1rem;
+        color: #999;
+        z-index: 2;
+        &:active {
+          opacity: 0.6;
+        }
+      }
+    }
+    .view {
+      height: 7.3rem;
+      overflow-y: auto;
+    }
+    .list {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.3rem 0.4rem;
+      border-bottom: 1px solid #eee;
+      &:first-child .ranking {
+        background-image: url("~@/assets/images/cn_no_1.png");
+        &.en,
+        &.kr,
+        &.yn {
+          background-image: url("~@/assets/images/en_no_1.png");
+          padding-left: 2rem;
+        }
+        &.tw {
+          background-image: url("~@/assets/images/tw_no_1.png");
+        }
+      }
+      .ranking {
+        padding-left: 1.7rem;
+        background: url("~@/assets/images/cn_no_x.png") left center no-repeat;
+        background-size: 2rem auto;
+        height: 1rem;
+        line-height: 1rem;
+        font-size: 0.65rem;
+        font-weight: bold;
+        color: #e2900a;
+        -webkit-text-stroke: 1px #000;
+        text-stroke: 1px #000;
+        min-width: 1.1rem;
+        &.en,
+        &.kr,
+        &.yn {
+          background-image: url("~@/assets/images/en_no_x.png");
+          padding-left: 2rem;
+        }
+        &.tw {
+          background-image: url("~@/assets/images/tw_no_x.png");
+        }
+      }
+      .head {
+        width: 1.1rem;
+        height: 1.1rem;
+        background: url("~@/assets/images/user.png") no-repeat;
+        background-size: 1.1rem auto;
+        position: relative;
+        margin: 0.2rem;
+
+        @for $i from 1 through 7 {
+          &.head_#{$i} {
+            background-position: 0 -#{1.12 * $i}rem;
+          }
+        }
+        .frame {
+          width: 1.6rem;
+          height: 1.5rem;
+          position: absolute;
+          top: -0.21rem;
+          left: -0.25rem;
+          background: url("~@/assets/images/frame.png") no-repeat;
+          background-size: 1.6rem auto;
+          @for $i from 1 through 5 {
+            &.frame_#{$i} {
+              background-position: 0 -#{1.6 * $i}rem;
+            }
+          }
+        }
+      }
+      .box {
+        min-width: 3.2rem;
+        .name {
+          font-size: 0.38rem;
+          font-weight: 600;
+          color: #333;
+          line-height: 1;
+        }
+        .money {
+          border: 1px solid #eeefef;
+          color: #c56718;
+          border-radius: 0.5rem;
+          margin-top: 0.2rem;
+          padding: 0.1rem 0.1rem 0.1rem 0.7rem;
+          line-height: 1;
+          background: url("~@/assets/images/icon/money.png") no-repeat 0.13rem
+            center;
+          background-size: 0.4rem auto;
+        }
+      }
+      .down {
+        color: #c56718;
+        font-weight: bold;
+        .lab {
+          background: linear-gradient(#f0ab5b, #c56718);
+          color: #fff;
+          padding: 0.05rem 0.1rem;
+          line-height: 1;
+          border-radius: 0.05rem;
+          font-weight: normal;
+          margin-right: 0.1rem;
+        }
+      }
+      .time {
+        color: #338d5f;
+        font-weight: bold;
+        margin-top: 0.2rem;
+        .lab {
+          background: linear-gradient(#3caf81, #338d5f);
+          color: #fff;
+          padding: 0.05rem 0.1rem;
+          line-height: 1;
+          border-radius: 0.05rem;
+          font-weight: normal;
+          margin-right: 0.1rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/PlayChip.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="playchip">
+    <div
+      class="chip"
+      :class="[`chip_${item.key}`, { active: chooseChip.key == item.key }]"
+      v-for="item in chipArry"
+      :key="item.key"
+      @click="chooseFn(item)"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue"
+import { useStore } from "vuex"
+import { audioMp3 } from "@/assets/js/sound.js"
+export default {
+  name: "PlayChip",
+  components: {},
+  setup() {
+    const store = useStore()
+    const chipArry = computed(() =>
+      store.state.config.chipArry.filter((v) => v.show == true)
+    )
+    const chooseChip = computed(() => store.state.app.chooseChip)
+    const chooseFn = (item) => {
+      store.commit("app/updateChooseChip", item)
+      audioMp3(["check"]).Play()
+    }
+    return {
+      chipArry,
+      chooseChip,
+      chooseFn
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+.playchip {
+  width: 1.385rem;
+  position: absolute;
+  right: 0.52rem;
+  bottom: 0px;
+  z-index: 9;
+  transform: rotateX(0deg);
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 8px;
+  padding: 5px;
+}
+</style>

src/components/PlayTable/Index.vue

@@ -0,0 +1,738 @@
+<template>
+  <div
+    class="playtable"
+    :class="{
+      unclick: [
+        'endBet',
+        'startRob',
+        'startRobCountDown',
+        'toRob',
+        'sendScanResult'
+      ].includes(sendMode)
+    }"
+  >
+    <!-- 百家乐 -->
+    <TableBaccarat
+      v-if="game_id == 1"
+      class="view"
+      :bet_amount_msg="bet_amount_msg"
+      :winArray="winArray"
+      :downChip="downChip"
+      :chipArray="chipArray"
+      :touch="touch"
+      :baccarat_type="baccarat_type"
+      :can_bet_big_small="can_bet_big_small"
+      :can_bet_luck_six="can_bet_luck_six"
+      :tableData="tableData"
+      @downBet="downBet"
+      @confirmChip="confirmChip"
+      @cancelChip="cancelChip"
+    />
+    <!-- 龙虎 -->
+    <TableLonghu
+      v-if="game_id == 2"
+      class="view"
+      :bet_amount_msg="bet_amount_msg"
+      :winArray="winArray"
+      :downChip="downChip"
+      :chipArray="chipArray"
+      :touch="touch"
+      :tableData="tableData"
+      @downBet="downBet"
+      @confirmChip="confirmChip"
+      @cancelChip="cancelChip"
+    />
+    <!-- 牛牛 -->
+    <TableBullbull
+      v-if="game_id == 4 || game_id == 5"
+      class="view"
+      :bet_amount_msg="bet_amount_msg"
+      :winArray="winArray"
+      :downChip="downChip"
+      :chipArray="chipArray"
+      :touch="touch"
+      :game_id="game_id"
+      :tableData="tableData"
+      @downBet="downBet"
+      @confirmChip="confirmChip"
+      @cancelChip="cancelChip"
+    />
+    <!-- 色碟 -->
+    <TableToning
+      v-if="game_id == 6"
+      class="view"
+      :bet_amount_msg="bet_amount_msg"
+      :winArray="winArray"
+      :downChip="downChip"
+      :chipArray="chipArray"
+      :touch="touch"
+      :tableData="tableData"
+      @downBet="downBet"
+      @confirmChip="confirmChip"
+      @cancelChip="cancelChip"
+    />
+    <!-- 骰宝 -->
+    <TableDice
+      v-if="game_id == 7"
+      :bet_amount_msg="bet_amount_msg"
+      :winArray="winArray"
+      :downChip="downChip"
+      :chipArray="chipArray"
+      :touch="touch"
+      :tableData="tableData"
+      @downBet="downBet"
+      @confirmChip="confirmChip"
+      @cancelChip="cancelChip"
+    />
+    <!-- 轮盘 -->
+
+    <template v-if="game_id == 8">
+      <Transition
+        name="custom-classes"
+        enter-active-class="animate__animated animate__faster animate__fadeInLeft"
+        leave-active-class="animate__animated animate__faster animate__fadeOutLeft"
+      >
+        <TableRouletteFrench
+          v-if="rouletteType == 'french'"
+          :bet_amount_msg="bet_amount_msg"
+          :winArray="winArray"
+          :downChip="downChip"
+          :chipArray="chipArray"
+          :touch="touch"
+          :tableData="tableData"
+          @downBet="downBet"
+          @confirmChip="confirmChip"
+          @cancelChip="cancelChip"
+        />
+      </Transition>
+      <Transition
+        name="custom-classes"
+        enter-active-class="animate__animated animate__faster animate__fadeInRight"
+        leave-active-class="animate__animated animate__faster animate__fadeOutRight"
+      >
+        <TableRouletteEuropean
+          v-if="rouletteType == 'european'"
+          :bet_amount_msg="bet_amount_msg"
+          :winArray="winArray"
+          :downChip="downChip"
+          :chipArray="chipArray"
+          :touch="touch"
+          :tableData="tableData"
+          @downBet="downBet"
+          @confirmChip="confirmChip"
+          @cancelChip="cancelChip"
+        />
+      </Transition>
+    </template>
+  </div>
+</template>
+
+<script>
+import {
+  baccaratData,
+  nnData,
+  toningData,
+  diceData,
+  rouletteData
+} from "@/utils/common"
+import { ref, computed, reactive, watch, onUnmounted } from "vue"
+import { useStore } from "vuex"
+import { useRouter, useRoute } from "vue-router"
+import TableBaccarat from "./TableBaccarat.vue"
+import TableLonghu from "./TableLonghu.vue"
+import TableBullbull from "./TableBullbull.vue"
+import TableToning from "./TableToning.vue"
+import TableDice from "./TableDice.vue"
+import TableRouletteFrench from "./TableRouletteFrench.vue"
+import TableRouletteEuropean from "./TableRouletteEuropean.vue"
+import { showToast } from "vant"
+import { audioMp3 } from "@/assets/js/sound.js"
+export default {
+  name: "PlayTable",
+  components: {
+    TableBaccarat,
+    TableLonghu,
+    TableBullbull,
+    TableToning,
+    TableDice,
+    TableRouletteFrench,
+    TableRouletteEuropean
+  },
+  props: {
+    game_id: {
+      type: [String, Number],
+      default: 1
+    },
+    table_id: {
+      type: [String, Number],
+      default: null
+    },
+    number_tab_id: {
+      type: [String, Number],
+      default: null
+    },
+    sendMode: {
+      type: String,
+      default: ""
+    },
+    is_scavenging: {
+      type: [String, Number],
+      default: 0
+    },
+    winArray: {
+      type: Array,
+      default: () => []
+    },
+    bet_amount_msg: {
+      type: Object,
+      default: () => ({
+        // 百家乐&龙虎
+        ...baccaratData.amount,
+        // 牛牛
+        ...nnData.amount,
+        // 色碟
+        ...toningData.amount,
+        // 骰宝
+        ...diceData.amount,
+        // 轮盘
+        ...rouletteData.amount
+      })
+    },
+    can_bet_big_small: {
+      type: [String, Number],
+      default: 1
+    },
+    can_bet_luck_six: {
+      type: [String, Number],
+      default: 1
+    },
+    limit_money: {
+      type: [String, Number],
+      default: null
+    },
+    limit_money_pair: {
+      type: [String, Number],
+      default: null
+    },
+    limit_money_tie: {
+      type: [String, Number],
+      default: null
+    },
+    tableData: {
+      type: [Object],
+      default: () => {}
+    }
+  },
+  setup(props) {
+    let virtuallyTimer = null //虚假下注定循环时器
+    const store = useStore()
+    const route = useRoute()
+    const router = useRouter()
+    const touch = ref(null)
+    const openGameTimes = ref(0)
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    const online = computed(() => store.state.config.online)
+    const betInfo = computed(() => store.state.socket.betInfo)
+    const chooseChip = computed(() => store.state.app.chooseChip)
+    const chipArry = computed(() => store.state.config.chipArry)
+    const userInfo = computed(() => store.state.app.userInfo)
+    const showOtherChip = computed(() => store.state.config.showOtherChip)
+    const baccarat_type = computed(() => store.state.config.baccaratType)
+    const rouletteType = computed(() => store.state.config.roulette_type)
+    const breakOff = (data) => {
+      let new_data
+      try {
+        new_data = JSON.parse(JSON.stringify(data))
+      } catch (err) {
+        new_data = data
+        console.log(err)
+      }
+      return new_data
+    }
+    const downChip = reactive({
+      // 百家乐&龙虎
+      ...breakOff(baccaratData.amount),
+      // 牛牛
+      ...breakOff(nnData.amount),
+      // 色碟
+      ...breakOff(toningData.amount),
+      // 骰宝
+      ...breakOff(diceData.amount),
+      // 轮盘
+      ...breakOff(rouletteData.amount)
+    })
+    const sendChip = reactive({
+      // 百家乐&龙虎
+      ...breakOff(baccaratData.amount),
+      // 牛牛
+      ...breakOff(nnData.amount),
+      // 色碟
+      ...breakOff(toningData.amount),
+      // 骰宝
+      ...breakOff(diceData.amount),
+      // 轮盘
+      ...breakOff(rouletteData.amount)
+    })
+    const chipArray = reactive({
+      // 百家乐&龙虎
+      ...breakOff(baccaratData.array),
+      // 牛牛
+      ...breakOff(nnData.array),
+      // 色碟
+      ...breakOff(toningData.array),
+      // 骰宝
+      ...breakOff(diceData.array),
+      // 轮盘
+      ...breakOff(rouletteData.array)
+    })
+    // 随机数生成
+    const getRndInteger = (min, max) => {
+      return Math.floor(Math.random() * (max - min)) + min
+    }
+    const downBet = (e, type) => {
+      store.commit("app/standbyTime")
+      const { value: chip, key } = chooseChip.value
+      if (props.sendMode == "startBetCountDown") {
+        if (type == "luck_six_amount" && props.can_bet_luck_six != 1) {
+          showToast(Lang.value[Type.value].to_bet_fail_7)
+        } else if (
+          (type == "big_amount" || type == "small_amount") &&
+          props.can_bet_big_small != 1
+        ) {
+          showToast(Lang.value[Type.value].to_bet_fail_8)
+        } else {
+          touch.value = type
+          let chipVal = chip
+          // 轮盘法式四大特殊下注
+          if (type == "theThird") {
+            chipVal = chipVal * 6
+          } else if (type == "orphans") {
+            chipVal = chipVal * 5
+          } else if (type == "neighborsOfZero") {
+            chipVal = chipVal * 9
+          } else if (type == "zeroGame") {
+            chipVal = chipVal * 4
+          }
+          sendChip[type] = chipVal + (sendChip[type] || 0)
+          downChip[type] = chipVal + (downChip[type] || 0)
+          chipArray[type].push({
+            x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`,
+            y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`,
+            key: `chip_${key}`,
+            type: "self",
+            uid: userInfo.value.id,
+            value: chipVal
+          })
+          audioMp3(["push"]).Play()
+        }
+      }
+    }
+    const nameArray = [
+      // 百家乐&龙虎
+      ...baccaratData.key,
+      // 牛牛
+      ...nnData.key,
+      // 色碟
+      ...toningData.key,
+      // 骰宝
+      ...diceData.key,
+      // 轮盘
+      ...rouletteData.key
+    ]
+
+    // 取消下注
+    const cancelChip = () => {
+      nameArray.forEach((key) => {
+        chipArray[key] = chipArray[key].filter((v) => v.type != "self")
+        downChip[key] = 0
+        sendChip[key] = 0
+        const socketChipArray = chipArray[key].filter((v) => v.type == "socket")
+        if (socketChipArray.length > 0) {
+          socketChipArray.forEach((v) => {
+            downChip[key] = downChip[key] + v.value
+          })
+        }
+        touch.value = null
+      })
+    }
+
+    // 确认下注
+    const confirmChip = () => {
+      if (props.sendMode == "startBetCountDown") {
+        touch.value = null
+        const betName = nameArray.filter((key) => downChip[key] > 0)
+        const downBet = {}
+        if (betName.length > 0) {
+          betName.forEach((v) => {
+            downBet[v] = sendChip[v]
+          })
+        }
+        const sendData = {
+          mode: "toBet",
+          table_id: props.table_id,
+          number_tab_id: props.number_tab_id
+        }
+        // 是否免佣
+        if (props.game_id == 1) {
+          sendData.baccarat_type = baccarat_type.value
+        }
+        // 骰宝
+        if (props.game_id == 7) {
+          sendData.amount = downBet
+        }
+        // 轮盘
+        if (props.game_id == 8) {
+          sendData.roulette_type = rouletteType.value
+          sendData.amount = downBet
+        }
+        store.dispatch("socket/sendMsg", {
+          ...sendData,
+          ...downBet
+        })
+        nameArray.forEach((key) => {
+          sendChip[key] = 0
+        })
+      } else {
+        showToast(Lang.value[Type.value].msg_game_not_start)
+        cancelChip()
+        audioMp3(["alert"]).Play()
+      }
+    }
+    // 清空下注区筹码
+    const resetChip = (state) => {
+      let isHave = false
+      nameArray.forEach((key) => {
+        if (downChip[key] > 0) {
+          isHave = true
+        }
+        chipArray[key] = []
+        downChip[key] = 0
+        sendChip[key] = 0
+        touch.value = null
+      })
+      if (isHave && !state) {
+        audioMp3(["push"]).Play()
+      }
+    }
+    // 洗牌排序
+    const disorder = (arr) => {
+      let clonrArr = arr.concat(),
+        len = clonrArr.length,
+        index = null
+      for (let i = 0; i < len; i++) {
+        index = Math.floor(Math.random() * clonrArr.length)
+        ;[clonrArr[index], clonrArr[i]] = [clonrArr[i], clonrArr[index]]
+      }
+      // 返回结果
+      return clonrArr
+    }
+    // 虚拟下注
+    const virtuallyDownBet = () => {
+      let typeArray = []
+      if (props.game_id == 1) {
+        typeArray = [
+          "banker_amount",
+          "player_amount",
+          "tie_amount",
+          "banker_pair_amount",
+          "player_pair_amount"
+        ]
+        if (props.can_bet_luck_six == 1) {
+          typeArray = [...typeArray, "luck_six_amount"]
+        }
+        if (props.can_bet_big_small == 1) {
+          typeArray = [...typeArray, "big_amount", "small_amount"]
+        }
+      } else if (props.game_id == 2) {
+        typeArray = ["banker_amount", "player_amount", "tie_amount"]
+      } else if (props.game_id == 4 || props.game_id == 5) {
+        typeArray = [...nnData.key]
+      } else if (props.game_id == 6) {
+        typeArray = [...toningData.key]
+      } else if (props.game_id == 7) {
+        typeArray = [...diceData.key]
+      } else if (props.game_id == 8) {
+        typeArray = [...rouletteData.key]
+      }
+      const cut = getRndInteger(1, 9)
+      const virtuallyChipArry = disorder(chipArry.value.slice(0, cut))
+      typeArray = disorder(typeArray)
+      const people = getRndInteger(1, 8)
+      // 限红限制
+      // limit_money: "10-10000"
+      // limit_money_pair: "20-10000"
+      // limit_money_tie: "20-10000"
+      let normalLimit = 10000,
+        // pairLimit = 10000,
+        tieLimit = 10000
+      try {
+        if (props.limit_money) {
+          normalLimit = props.limit_money.split("-")[1]
+        }
+        if (props.limit_money_tie) {
+          tieLimit = props.limit_money_tie.split("-")[1]
+        }
+        // if (props.limit_money_pair) {
+        //   pairLimit = props.limit_money_pair.split("-")[1]
+        // }
+      } catch (err) {
+        console.log(err)
+      }
+      for (let i = people; i--; i > 0) {
+        let { value: chip, key } =
+          virtuallyChipArry[getRndInteger(0, virtuallyChipArry.length - 1)]
+        const type = typeArray[getRndInteger(0, typeArray.length)]
+
+        if (["banker_pair_amount", "player_pair_amount"].includes(type)) {
+          // 对子限红
+          if (chip > tieLimit * 0.5) {
+            chip = chipArry.value[0].chip
+            key = chipArry.value[0].key
+          }
+        } else if (["tie_amount"].includes(type)) {
+          // 和限红
+          if (chip > tieLimit * 0.5) {
+            chip = chipArry.value[0].chip
+            key = chipArry.value[0].key
+          }
+        } else if (
+          ["big_amount", "small_amount", "luck_six_amount"].includes(type)
+        ) {
+          if (chip > normalLimit * 0.3) {
+            chip = chipArry.value[0].chip
+            key = chipArry.value[0].key
+          }
+        } else {
+          // 其他限红
+          if (chip > normalLimit * 0.5) {
+            chip = chipArry.value[0].chip
+            key = chipArry.value[0].key
+          }
+        }
+
+        // console.log(type, chip, props)
+        chipArray[type].push({
+          x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`,
+          y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`,
+          key: `chip_${key}`,
+          type: "virtually",
+          uid: 0,
+          value: chip
+        })
+        const virtuallyData = {
+          table_id: props.table_id,
+          sendMode: "toBet",
+          betAmountMsg: { [type]: chip }
+        }
+        store.dispatch("socket/updateVirtually", virtuallyData)
+      }
+    }
+    // 离开销毁
+    onUnmounted(() => {
+      // console.log("离开页面", virtuallyTimer)
+      store.commit("socket/updateBetInfo", [])
+      clearInterval(virtuallyTimer)
+      virtuallyTimer = null
+      nameArray.forEach((key) => {
+        downChip[key] = 0
+      })
+    })
+    // 监听路由切换
+    watch(
+      () => [route.query],
+      () => {
+        openGameTimes.value = 0
+        resetChip()
+        clearInterval(virtuallyTimer)
+        virtuallyTimer = null
+      },
+      { immediate: true, deep: true }
+    )
+    // 过滤虚拟下注筹码
+    watch(
+      () => [showOtherChip.value],
+      ([val]) => {
+        if (val) {
+          nameArray.forEach((key) => {
+            chipArray[key] = chipArray[key].filter((v) => v.type != "virtually")
+            downChip[key] = 0
+            sendChip[key] = 0
+            const socketChipArray = chipArray[key].filter(
+              (v) => v.type == "socket"
+            )
+            if (socketChipArray.length > 0) {
+              socketChipArray.forEach((v) => {
+                downChip[key] = downChip[key] + v.value
+              })
+            }
+          })
+        }
+      },
+      { immediate: true, deep: true }
+    )
+    watch(
+      () => [props.sendMode],
+      ([mode]) => {
+        if (mode == "startBetCountDown") {
+          if (showOtherChip.value) {
+            if (virtuallyTimer == null) {
+              virtuallyTimer = setInterval(() => {
+                virtuallyDownBet()
+              }, 1000)
+            }
+          } else {
+            clearInterval(virtuallyTimer)
+          }
+        } else if (mode == "toBet") {
+          openGameTimes.value = 0
+          nameArray.forEach((key) => {
+            chipArray[key].forEach((v) => {
+              if (v.type == "self") {
+                v.type = "socket"
+              }
+            })
+          })
+        } else if (mode == "endBet") {
+          cancelChip()
+          clearInterval(virtuallyTimer)
+          virtuallyTimer = null
+        } else if (mode == "startBet") {
+          const outRoomTimes = store.state.config.outRoomTimes
+          // 记录开局次数 操过N次不下注退出房间
+          if (openGameTimes.value >= outRoomTimes) {
+            router.replace({ name: store.state.app.routerStack })
+          } else {
+            openGameTimes.value += 1
+          }
+        }
+      }
+    )
+    watch(
+      () => [online.value, betInfo.value],
+      ([onlineValue, betInfoValue]) => {
+        if (onlineValue) {
+          if (betInfoValue.length > 0) {
+            // console.log(betInfoValue)
+            betInfoValue.forEach((v) => {
+              if (v.table_id == props.table_id) {
+                nameArray.forEach((key) => {
+                  if (v.game_id == 6) {
+                    downChip[key] = parseInt(v.toning_amount[key] || 0)
+                  } else if (v.game_id == 7) {
+                    downChip[key] = parseInt(v.dice_amount[key] || 0)
+                  } else if (v.game_id == 8) {
+                    store.commit("config/rouletteLockTable", true)
+                    store.commit("config/switchRouletteType", v.roulette_type)
+                    downChip[key] = parseInt(v.roulette_amount[key] || 0)
+                  } else {
+                    downChip[key] = parseInt(v[key] || 0)
+                  }
+                })
+              }
+            })
+          }
+        }
+      },
+      { immediate: true, deep: true }
+    )
+    return {
+      Type,
+      Lang,
+      downChip,
+      touch,
+      chipArray,
+      baccarat_type,
+      rouletteType,
+      downBet,
+      resetChip,
+      cancelChip,
+      confirmChip
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$dark-bg: #0d0d0d;
+$card-bg: #1e1e1e;
+$border-color: #333;
+$gold: #c5a059;
+
+.playtable {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 8;
+  .view {
+    // width: 17.35rem;
+    height: 2.7rem;
+    position: absolute;
+    // bottom: 0.25rem;
+    // left: 50%;
+    // margin-left: -8.675rem;
+    left: 3rem;
+    right: 3rem;
+    bottom: 0.25rem;
+
+    border-radius: 10px;
+    transform: perspective(400px) rotateX(24deg);
+    border: 1px solid $border-color;
+    box-sizing: border-box;
+    background: rgba(30, 30, 30, 0.95);
+  }
+}
+.unclick {
+  ::v-deep {
+    .list .item .chip-view {
+      background: rgba(98, 74, 4, 0.4);
+    }
+    .dice {
+      .ratio {
+        background: rgba(98, 74, 4, 0.4);
+      }
+      .fourth {
+        background: rgba(98, 74, 4, 0.4);
+      }
+      .fifth .center .bottom {
+        background: rgba(98, 74, 4, 0.4);
+      }
+    }
+    .roulette {
+      .french {
+        .the_third,
+        .orphans,
+        .neighbors_of_zero,
+        .zero_game {
+          background: none !important;
+        }
+      }
+    }
+  }
+}
+::v-deep {
+  .banker {
+    color: #fe8365;
+  }
+  .palyer {
+    color: #12a2e6;
+  }
+  .bpair {
+    color: #fe8365;
+  }
+  .ppair {
+    color: #12a2e6;
+  }
+  .tie {
+    color: #75e7af;
+  }
+  .min {
+    border-top-left-radius: 10px;
+    color: #f3c866;
+  }
+  .max {
+    border-top-right-radius: 10px;
+    color: #f3c866;
+  }
+}
+</style>

src/components/PlayTable/TableBaccarat.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="baccarat">
+    <div class="list top">
+      <!-- 小 -->
+      <div class="item min" :class="{ unclick: can_bet_big_small != 1 }">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.small_amount,
+            show: touch == 'small_amount'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'small_amount')"
+          :list="chipArray.small_amount"
+          :win="winArray.includes('small')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].small }}</span>
+          <span>1:1.5</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.small_amount || 0 }}</div>
+      </div>
+      <!-- 闲对 -->
+      <div class="item ppair">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.player_pair_amount,
+            show: touch == 'player_pair_amount'
+          }"
+        ></confirmBet>
+
+        <chipView
+          @click="downBet($event, 'player_pair_amount')"
+          :list="chipArray.player_pair_amount"
+          :win="winArray.includes('player_pair')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].p_player }}</span>
+          <span>1:{{ tableData.price_pair }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.player_pair_amount }}</div>
+      </div>
+      <!-- 幸运6 -->
+      <div class="item luck" :class="{ unclick: can_bet_luck_six != 1 }">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.luck_six_amount,
+            show: touch == 'luck_six_amount'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'luck_six_amount')"
+          :list="chipArray.luck_six_amount"
+          :win="winArray.includes('luck_six')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].luckSix }} {{ Lang[Type].max }}</span>
+          <span>1:20</span>
+        </div>
+
+        <div class="money">{{ bet_amount_msg.luck_six_amount || 0 }}</div>
+      </div>
+      <!-- 庄对 -->
+      <div class="item bpair">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.banker_pair_amount,
+            show: touch == 'banker_pair_amount'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'banker_pair_amount')"
+          :list="chipArray.banker_pair_amount"
+          :win="winArray.includes('banker_pair')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].p_banker }}</span>
+          <span>1:{{ tableData.price_pair }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.banker_pair_amount }}</div>
+      </div>
+      <!-- 大 -->
+      <div class="item max" :class="{ unclick: can_bet_big_small != 1 }">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{ money: downChip.big_amount, show: touch == 'big_amount' }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'big_amount')"
+          :list="chipArray.big_amount"
+          :win="winArray.includes('big')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].big }}</span>
+          <span>1:0.5</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.big_amount || 0 }}</div>
+      </div>
+    </div>
+    <div class="list bottom">
+      <!-- 闲 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.player_amount,
+            show: touch == 'player_amount'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'player_amount')"
+          :list="chipArray.player_amount"
+          :win="winArray.includes('player')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].player }}</span>
+          <span>1:{{ tableData.price_player }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.player_amount }}</div>
+      </div>
+      <!-- 和 -->
+      <div class="item tie">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'tie_amount')"
+          :list="chipArray.tie_amount"
+          :win="winArray.includes('tie')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].tie }}</span>
+          <span>1:{{ tableData.price_tie_baccarat }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.tie_amount }}</div>
+      </div>
+      <!-- 庄 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.banker_amount,
+            show: touch == 'banker_amount'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'banker_amount')"
+          :list="chipArray.banker_amount"
+          :win="winArray.includes('banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].banker }}</span>
+          <span>
+            {{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
+          </span>
+        </div>
+        <div class="money">{{ bet_amount_msg.banker_amount }}</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 { baccaratData } from "@/utils/common"
+export default {
+  name: "TableBaccarat",
+  components: { confirmBet, chipView },
+  props: {
+    touch: {
+      type: String,
+      default: ""
+    },
+    can_bet_big_small: {
+      type: [String, Number],
+      default: 1
+    },
+    can_bet_luck_six: {
+      type: [String, Number],
+      default: 1
+    },
+    baccarat_type: {
+      type: [String, Number],
+      default: 0
+    },
+    bet_amount_msg: {
+      type: Object,
+      default: () => ({
+        ...baccaratData.amount
+      })
+    },
+    winArray: {
+      type: Array,
+      default: () => []
+    },
+    downChip: {
+      type: Object,
+      default: () => ({
+        ...baccaratData.amount
+      })
+    },
+    chipArray: {
+      type: Object,
+      default: () => ({ ...baccaratData.array })
+    },
+    tableData: {
+      type: [Object],
+      default: () => {}
+    }
+  },
+  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")
+    }
+    return { Type, Lang, downBet, confirmChip, cancelChip }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$dark-bg: #0d0d0d;
+$card-bg: #1e1e1e;
+$border-color: #444;
+$gold: #c5a059;
+$text-secondary: #888;
+
+.baccarat {
+  background: rgba(30, 30, 30, 0.95);
+  .list {
+    display: flex;
+    box-sizing: border-box;
+    &:first-child {
+      border-bottom: 1px solid $border-color;
+    }
+    &.top {
+      height: 50%;
+      .item {
+        flex: 1;
+        height: 100%;
+        &:nth-child(3) {
+          min-width: 4.86rem;
+        }
+        .text {
+          margin-top: -2px;
+          text-shadow: 1px 1px #050505;
+        }
+      }
+    }
+    &.bottom {
+      height: 50%;
+      .item {
+        width: 33.33%;
+        height: 100%;
+        .text {
+          font-size: 0.65rem;
+          text-shadow: 1px 1px #050505;
+        }
+      }
+    }
+    .item {
+      position: relative;
+      border-right: 1px solid $border-color;
+      font-size: 0.45rem;
+      &:last-child {
+        border: none;
+      }
+      &.unclick {
+        &:after {
+          content: "";
+          position: absolute;
+          width: 102%;
+          border-bottom: 1px solid $border-color;
+          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: rgba(98, 74, 4, 0.4);
+        }
+      }
+
+      .chip-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        &:active {
+          background: rgba(255, 255, 255, 0.15);
+        }
+      }
+      .text {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        line-height: 1;
+        z-index: 2;
+        pointer-events: none;
+        color: #fff;
+        .big {
+          font-weight: bold;
+          padding-right: 0.24rem;
+          padding-left: 0.2rem;
+        }
+      }
+      .money {
+        position: absolute;
+        left: 0px;
+        bottom: -2px;
+        font-size: 0.24rem;
+        font-weight: normal;
+        transform: scale(0.7);
+        color: $text-secondary;
+        vertical-align: bottom;
+        pointer-events: none;
+        &::before {
+          display: inline-block;
+          content: "总";
+          background: rgba(255, 255, 255, 0.2);
+          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);
+        }
+      }
+    }
+  }
+  .banker .chip-view {
+    border-bottom-right-radius: 10px;
+  }
+  .palyer .chip-view {
+    border-bottom-left-radius: 10px;
+  }
+  .max .chip-view {
+    border-top-right-radius: 10px;
+  }
+  .min .chip-view {
+    border-top-left-radius: 10px;
+  }
+  .luck .text {
+    text-shadow: none !important;
+    background-image: linear-gradient(
+      90deg,
+      #ffcc7d 0%,
+      #93dd96 20%,
+      #6078d4 50%,
+      #f7e96f 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+</style>

src/components/PlayTable/TableBullbull.vue

@@ -0,0 +1,526 @@
+<template>
+  <div class="nn">
+    <div class="list">
+      <!-- 闲1 -->
+      <span class="tab">{{ Lang[Type].player }}1</span>
+      <!-- 庄翻倍 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_1_banker_times,
+            show: touch == 'amount_player_1_banker_times',
+            times: true,
+            game_id: game_id
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_1_banker_times')"
+          :list="chipArray.amount_player_1_banker_times"
+          :win="winArray.includes('player_1_banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
+          </span>
+          <span>{{ Lang[Type].double }}</span>
+        </div>
+        <div class="money">
+          {{ bet_amount_msg.amount_player_1_banker_times }}
+        </div>
+      </div>
+      <!-- 庄平倍 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_1_banker,
+            show: touch == 'amount_player_1_banker'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_1_banker')"
+          :list="chipArray.amount_player_1_banker"
+          :win="winArray.includes('player_1_banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
+          </span>
+          <span>{{ Lang[Type].equal }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_1_banker }}</div>
+      </div>
+      <!-- 闲翻倍 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_1_times,
+            show: touch == 'amount_player_1_times',
+            times: true,
+            game_id: game_id
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_1_times')"
+          :list="chipArray.amount_player_1_times"
+          :win="winArray.includes('player_1')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
+          </span>
+          <span>{{ Lang[Type].double }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_1_times }}</div>
+      </div>
+      <!-- 闲平倍 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_1,
+            show: touch == 'amount_player_1'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_1')"
+          :list="chipArray.amount_player_1"
+          :win="winArray.includes('player_1')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
+          </span>
+          <span>{{ Lang[Type].equal }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_1 }}</div>
+      </div>
+    </div>
+    <!-- 闲2 -->
+    <div class="list">
+      <span class="tab">{{ Lang[Type].player }}2</span>
+      <!-- 庄翻倍 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_2_banker_times,
+            show: touch == 'amount_player_2_banker_times',
+            times: true,
+            game_id: game_id
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_2_banker_times')"
+          :list="chipArray.amount_player_2_banker_times"
+          :win="winArray.includes('player_2_banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
+          </span>
+          <span>{{ Lang[Type].double }}</span>
+        </div>
+        <div class="money">
+          {{ bet_amount_msg.amount_player_2_banker_times }}
+        </div>
+      </div>
+      <!-- 庄平倍 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_2_banker,
+            show: touch == 'amount_player_2_banker'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_2_banker')"
+          :list="chipArray.amount_player_2_banker"
+          :win="winArray.includes('player_2_banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
+          </span>
+          <span>{{ Lang[Type].equal }}</span>
+        </div>
+        <div class="money">
+          {{ bet_amount_msg.amount_player_2_banker }}
+        </div>
+      </div>
+      <!-- 闲翻倍 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_2_times,
+            show: touch == 'amount_player_2_times',
+            times: true,
+            game_id: game_id
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_2_times')"
+          :list="chipArray.amount_player_2_times"
+          :win="winArray.includes('player_2')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
+          </span>
+          <span>{{ Lang[Type].double }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_2_times }}</div>
+      </div>
+      <!-- 闲平倍 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_2,
+            show: touch == 'amount_player_2'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_2')"
+          :list="chipArray.amount_player_2"
+          :win="winArray.includes('player_2')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
+          </span>
+          <span>{{ Lang[Type].equal }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_2 }}</div>
+      </div>
+    </div>
+    <!-- 闲3 -->
+    <div class="list">
+      <span class="tab">{{ Lang[Type].player }}3</span>
+      <!-- 庄翻倍 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_3_banker_times,
+            show: touch == 'amount_player_3_banker_times',
+            times: true,
+            game_id: game_id
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_3_banker_times')"
+          :list="chipArray.amount_player_3_banker_times"
+          :win="winArray.includes('player_3_banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
+          </span>
+          <span>{{ Lang[Type].double }}</span>
+        </div>
+
+        <div class="money">
+          {{ bet_amount_msg.amount_player_3_banker_times }}
+        </div>
+      </div>
+      <!-- 庄平倍 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_3_banker,
+            show: touch == 'amount_player_3_banker'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_3_banker')"
+          :list="chipArray.amount_player_3_banker"
+          :win="winArray.includes('player_3_banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
+          </span>
+          <span>{{ Lang[Type].equal }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_3_banker }}</div>
+      </div>
+      <!-- 闲翻倍 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_3_times,
+            show: touch == 'amount_player_3_times',
+            times: true,
+            game_id: game_id
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_3_times')"
+          :list="chipArray.amount_player_3_times"
+          :win="winArray.includes('player_3')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
+          </span>
+          <span>{{ Lang[Type].double }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_3_times }}</div>
+      </div>
+      <!-- 闲平倍 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.amount_player_3,
+            show: touch == 'amount_player_3'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'amount_player_3')"
+          :list="chipArray.amount_player_3"
+          :win="winArray.includes('player_3')"
+        ></chipView>
+        <div class="text">
+          <span class="big">
+            {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
+          </span>
+          <span>{{ Lang[Type].equal }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.amount_player_3 }}</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 { nnData } from "@/utils/common"
+export default {
+  name: "TableBullbull",
+  components: { confirmBet, chipView },
+  props: {
+    game_id: {
+      type: [String, Number],
+      default: 1
+    },
+    touch: {
+      type: String,
+      default: ""
+    },
+    bet_amount_msg: {
+      type: Object,
+      default: () => ({
+        ...nnData.amount
+      })
+    },
+    winArray: {
+      type: Array,
+      default: () => []
+    },
+    downChip: {
+      type: Object,
+      default: () => ({
+        ...nnData.amount
+      })
+    },
+    chipArray: {
+      type: Object,
+      default: () => ({ ...nnData.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")
+    }
+    return { Type, Lang, downBet, confirmChip, cancelChip }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$border-color: #444;
+$text-secondary: #888;
+$gold: #c5a059;
+
+.nn {
+  display: flex;
+  background: rgba(30, 30, 30, 0.95);
+  .list {
+    width: 33.33%;
+    height: 100%;
+    flex-wrap: wrap;
+    border: none;
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    &:first-child {
+      .item:nth-of-type(1) {
+        .chip-view {
+          border-top-left-radius: 10px;
+        }
+      }
+      .item:nth-of-type(3) {
+        .chip-view {
+          border-bottom-left-radius: 10px;
+        }
+      }
+    }
+    &:last-child {
+      .item:nth-of-type(2) {
+        border-right: none;
+        .chip-view {
+          border-top-right-radius: 10px;
+        }
+      }
+      .item:nth-of-type(4) {
+        border-right: none;
+        .chip-view {
+          border-bottom-right-radius: 10px;
+        }
+      }
+    }
+    .tab {
+      position: absolute;
+      top: -2px;
+      color: #fff;
+      font-size: 0.42rem;
+      border: 1px solid $gold;
+      padding: 1px 0.18rem;
+      transform: scale(0.8) translateX(-50%);
+      left: 50%;
+      z-index: 2;
+      background: rgba(30, 30, 30, 0.9);
+      border-radius: 2px;
+      font-weight: 500;
+    }
+    .item {
+      position: relative;
+      width: 50%;
+      height: 50%;
+      box-sizing: border-box;
+      border-right: 1px solid $border-color;
+      border-radius: 0;
+      border-bottom: 1px solid $border-color;
+      font-size: 0.45rem;
+      &:nth-of-type(3),
+      &:nth-of-type(4) {
+        border-bottom: none;
+      }
+      &.unclick {
+        &:after {
+          content: "";
+          position: absolute;
+          width: 102%;
+          border-bottom: 1px solid $border-color;
+          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: rgba(98, 74, 4, 0.4);
+        }
+      }
+
+      .chip-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        &:active {
+          background: rgba(255, 255, 255, 0.15);
+        }
+      }
+      .text {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        line-height: 1;
+        z-index: 2;
+        pointer-events: none;
+        color: #fff;
+        .big {
+          font-weight: bold;
+          padding-right: 0.24rem;
+          padding-left: 0.2rem;
+        }
+      }
+      .money {
+        position: absolute;
+        left: 0px;
+        bottom: -2px;
+        font-size: 0.24rem;
+        font-weight: normal;
+        transform: scale(0.7);
+        color: $text-secondary;
+        vertical-align: bottom;
+        pointer-events: none;
+        &::before {
+          display: inline-block;
+          content: "总";
+          background: rgba(255, 255, 255, 0.2);
+          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);
+        }
+      }
+      .text {
+        font-size: 0.58rem;
+        text-shadow: 1px 1px #050505;
+        span {
+          padding-bottom: 0.2rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/PlayTable/TableLonghu.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="view longhu">
+    <div class="list">
+      <!-- 龙 -->
+      <div class="item banker">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.banker_amount,
+            show: touch == 'banker_amount'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'banker_amount')"
+          :list="chipArray.banker_amount"
+          :win="winArray.includes('banker')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].dragon }}</span>
+          <span>1:{{ tableData.price_dragon }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.banker_amount }}</div>
+      </div>
+      <!-- 和 -->
+      <div class="item tie">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'tie_amount')"
+          :list="chipArray.tie_amount"
+          :win="winArray.includes('tie')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].tie }}</span>
+          <span>1:{{ tableData.price_tie_dt }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.tie_amount }}</div>
+      </div>
+      <!-- 虎 -->
+      <div class="item palyer">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.player_amount,
+            show: touch == 'player_amount'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'player_amount')"
+          :list="chipArray.player_amount"
+          :win="winArray.includes('player')"
+        ></chipView>
+        <div class="text">
+          <span class="big">{{ Lang[Type].tiger }}</span>
+          <span>1:{{ tableData.price_tiger }}</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.player_amount }}</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 { baccaratData } from "@/utils/common"
+export default {
+  name: "TableLonghu",
+  components: { confirmBet, chipView },
+  props: {
+    touch: {
+      type: String,
+      default: ""
+    },
+    bet_amount_msg: {
+      type: Object,
+      default: () => ({
+        ...baccaratData.amount
+      })
+    },
+    winArray: {
+      type: Array,
+      default: () => []
+    },
+    downChip: {
+      type: Object,
+      default: () => ({
+        ...baccaratData.amount
+      })
+    },
+    chipArray: {
+      type: Object,
+      default: () => ({ ...baccaratData.array })
+    },
+    tableData: {
+      type: [Object],
+      default: () => {}
+    }
+  },
+  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")
+    }
+    return { Type, Lang, downBet, confirmChip, cancelChip }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$border-color: #444;
+$text-secondary: #888;
+
+.longhu {
+  background: rgba(30, 30, 30, 0.95);
+  .list {
+    height: 100%;
+    width: 100%;
+    border: none;
+    display: flex;
+    box-sizing: border-box;
+    .item {
+      position: relative;
+      border-right: 1px solid $border-color;
+      font-size: 0.45rem;
+      flex: 1;
+      &:first-child {
+        .chip-view {
+          border-top-left-radius: 10px;
+        }
+      }
+      &:last-child {
+        border: none;
+        .chip-view {
+          border-top-right-radius: 10px;
+        }
+      }
+      &.unclick {
+        &:after {
+          content: "";
+          position: absolute;
+          width: 102%;
+          border-bottom: 1px solid $border-color;
+          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: rgba(98, 74, 4, 0.4);
+        }
+      }
+
+      .chip-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        &:active {
+          background: rgba(255, 255, 255, 0.15);
+        }
+      }
+      .text {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        line-height: 1;
+        z-index: 2;
+        pointer-events: none;
+        font-size: 0.65rem;
+        text-shadow: 1px 1px #050505;
+        color: #fff;
+        .big {
+          font-weight: bold;
+          padding-right: 0.24rem;
+          padding-left: 0.2rem;
+        }
+      }
+      .money {
+        position: absolute;
+        left: 0px;
+        bottom: -2px;
+        font-size: 0.24rem;
+        font-weight: normal;
+        transform: scale(0.7);
+        color: $text-secondary;
+        vertical-align: bottom;
+        pointer-events: none;
+        &::before {
+          display: inline-block;
+          content: "总";
+          background: rgba(255, 255, 255, 0.2);
+          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);
+        }
+      }
+    }
+  }
+  .banker .chip-view {
+    border-bottom-left-radius: 10px;
+  }
+  .palyer .chip-view {
+    border-bottom-right-radius: 10px;
+  }
+}
+</style>

src/components/PlayTable/TableToning.vue

@@ -0,0 +1,423 @@
+<template>
+  <div class="toning">
+    <div class="list">
+      <!-- 0 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_zero,
+            show: touch == 'toning_zero'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_zero')"
+          :list="chipArray.toning_zero"
+          :win="winArray.includes('toning_zero')"
+        ></chipView>
+        <div class="round-box">
+          <span class="span"></span>
+          <span class="span"></span>
+          <span class="span"></span>
+          <span class="span">0</span>
+        </div>
+        <div class="proportion">
+          <span>1:12</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_zero }}</div>
+      </div>
+      <!-- 双 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_plural,
+            show: touch == 'toning_plural'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_plural')"
+          :list="chipArray.toning_plural"
+          :win="winArray.includes('toning_plural')"
+        ></chipView>
+        <div class="text banker">
+          <span class="big">{{ Lang[Type].even }}</span>
+          <span>1:0.96</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_plural }}</div>
+      </div>
+      <!-- 单 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_singular,
+            show: touch == 'toning_singular'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_singular')"
+          :list="chipArray.toning_singular"
+          :win="winArray.includes('toning_singular')"
+        ></chipView>
+        <div class="text palyer">
+          <span class="big">{{ Lang[Type].odd }}</span>
+          <span>1:0.96</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_singular }}</div>
+      </div>
+      <!-- 4 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_four,
+            show: touch == 'toning_four'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_four')"
+          :list="chipArray.toning_four"
+          :win="winArray.includes('toning_four')"
+        ></chipView>
+        <div class="round-box">
+          <span class="span red"></span>
+          <span class="span red"></span>
+          <span class="span red"></span>
+          <span class="span red">4</span>
+        </div>
+        <div class="proportion">
+          <span>1:12</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_four }}</div>
+      </div>
+    </div>
+    <div class="list">
+      <!-- 1 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_one,
+            show: touch == 'toning_one'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_one')"
+          :list="chipArray.toning_one"
+          :win="winArray.includes('toning_one')"
+        ></chipView>
+        <div class="round-box">
+          <span class="span"></span>
+          <span class="span"></span>
+          <span class="span"></span>
+          <span class="span red">1</span>
+        </div>
+        <div class="proportion">
+          <span>1:2.6</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_one }}</div>
+      </div>
+      <!-- 小 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_small,
+            show: touch == 'toning_small'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_small')"
+          :list="chipArray.toning_small"
+          :win="winArray.includes('toning_small')"
+        ></chipView>
+        <div class="text palyer">
+          <span class="big">{{ Lang[Type].small }}</span>
+          <span>1:0.96</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_small }}</div>
+      </div>
+      <!-- 大 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_big,
+            show: touch == 'toning_big'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_big')"
+          :list="chipArray.toning_big"
+          :win="winArray.includes('toning_big')"
+        ></chipView>
+        <div class="text banker">
+          <span class="big">{{ Lang[Type].big }}</span>
+          <span>1:0.96</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_big }}</div>
+      </div>
+      <!-- 3 -->
+      <div class="item">
+        <confirmBet
+          @confirm="confirmChip"
+          @cancel="cancelChip"
+          :data="{
+            money: downChip.toning_three,
+            show: touch == 'toning_three'
+          }"
+        ></confirmBet>
+        <chipView
+          @click="downBet($event, 'toning_three')"
+          :list="chipArray.toning_three"
+          :win="winArray.includes('toning_three')"
+        ></chipView>
+        <div class="round-box">
+          <span class="span red"></span>
+          <span class="span red"></span>
+          <span class="span red"></span>
+          <span class="span">3</span>
+        </div>
+        <div class="proportion">
+          <span>1:2.6</span>
+        </div>
+        <div class="money">{{ bet_amount_msg.toning_three }}</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 { toningData } from "@/utils/common"
+export default {
+  name: "TableToning",
+  components: { confirmBet, chipView },
+  props: {
+    touch: {
+      type: String,
+      default: ""
+    },
+    bet_amount_msg: {
+      type: Object,
+      default: () => ({
+        ...toningData.amount
+      })
+    },
+    winArray: {
+      type: Array,
+      default: () => []
+    },
+    downChip: {
+      type: Object,
+      default: () => ({
+        ...toningData.amount
+      })
+    },
+    chipArray: {
+      type: Object,
+      default: () => ({ ...toningData.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")
+    }
+    return { Type, Lang, downBet, confirmChip, cancelChip }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$border-color: #444;
+$text-secondary: #888;
+
+.toning {
+  background: rgba(30, 30, 30, 0.95);
+  .list {
+    height: 50%;
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    &:first-child {
+      border-bottom: 1px solid $border-color;
+      .item:nth-of-type(1) {
+        .chip-view {
+          border-top-left-radius: 10px;
+        }
+      }
+      .item:nth-of-type(4) {
+        .chip-view {
+          border-top-right-radius: 10px;
+        }
+      }
+    }
+    &:last-child {
+      .item:nth-of-type(1) {
+        .chip-view {
+          border-bottom-left-radius: 10px;
+        }
+      }
+      .item:nth-of-type(4) {
+        .chip-view {
+          border-bottom-right-radius: 10px;
+        }
+      }
+    }
+    .item {
+      flex: 1;
+      max-width: 25%;
+      position: relative;
+      border-right: 1px solid $border-color;
+      font-size: 0.45rem;
+      &:last-child {
+        border: none;
+      }
+      &.unclick {
+        &:after {
+          content: "";
+          position: absolute;
+          width: 102%;
+          border-bottom: 1px solid $border-color;
+          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: rgba(98, 74, 4, 0.4);
+        }
+      }
+
+      .chip-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        &:active {
+          background: rgba(255, 255, 255, 0.15);
+        }
+      }
+      .text {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        line-height: 1;
+        z-index: 2;
+        pointer-events: none;
+        font-size: 0.5rem;
+        text-shadow: 1px 1px #050505;
+        color: #fff;
+        .big {
+          font-weight: bold;
+          padding-right: 0.24rem;
+          padding-left: 0.2rem;
+          font-size: 0.58rem;
+        }
+      }
+      .money {
+        position: absolute;
+        left: 0px;
+        bottom: -2px;
+        font-size: 0.24rem;
+        font-weight: normal;
+        transform: scale(0.7);
+        color: $text-secondary;
+        vertical-align: bottom;
+        pointer-events: none;
+        &::before {
+          display: inline-block;
+          content: "总";
+          background: rgba(255, 255, 255, 0.2);
+          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);
+        }
+      }
+      .round-box,
+      .proportion {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.4rem;
+        color: #aaa;
+        .span {
+          width: 0.65rem;
+          height: 0.65rem;
+          border-radius: 0.7rem;
+          background: #aaa;
+          margin: 0.1rem;
+          text-align: center;
+          line-height: 0.7rem;
+          font-size: 0.48rem;
+          font-weight: 600;
+          color: #222;
+          &.red {
+            background: #fe8365;
+          }
+        }
+      }
+    }
+  }
+}
+.banker {
+  color: #fe8365;
+}
+.palyer {
+  color: #12a2e6;
+}
+.bpair {
+  color: #fe8365;
+}
+.ppair {
+  color: #12a2e6;
+}
+.tie {
+  color: #75e7af;
+}
+.min {
+  border-top-left-radius: 10px;
+  color: #f3c866;
+}
+.max {
+  border-top-right-radius: 10px;
+  color: #f3c866;
+}
+</style>

src/components/PlayTypePop.vue

@@ -0,0 +1,207 @@
+<template>
+  <Transition
+    name="custom-classes"
+    enter-active-class="animate__animated animate__zoomIn"
+    leave-active-class="animate__animated animate__zoomOut"
+  >
+    <div class="play-type-pop" v-if="showBaccaratPlayType">
+      <div class="play-type-view">
+        <div class="title">
+          {{ Lang[Type].switch_play }}
+          <van-icon class="close" name="cross" @click="closeBaccaratPlayType" />
+        </div>
+        <div class="list" :class="[Type]">
+          <div
+            class="item classics"
+            :class="{ active: baccaratPlayType == 'classics' }"
+            @click="chooseType('classics')"
+          ></div>
+        </div>
+        <div class="list" :class="[Type]">
+          <div
+            class="item long"
+            :class="{ active: baccaratPlayType == 'long' }"
+            @click="chooseType('long')"
+          ></div>
+          <div
+            class="item pairs"
+            :class="{ active: baccaratPlayType == 'pairs' }"
+            @click="chooseType('pairs')"
+          ></div>
+          <div
+            class="item super"
+            :class="{ active: baccaratPlayType == 'super' }"
+            @click="chooseType('super')"
+          ></div>
+        </div>
+        <div class="list" :class="[Type]">
+          <div
+            class="item tiger"
+            :class="{ active: baccaratPlayType == 'tiger' }"
+            @click="chooseType('tiger')"
+          ></div>
+          <div
+            class="item sky"
+            :class="{ active: baccaratPlayType == 'sky' }"
+            @click="chooseType('sky')"
+          ></div>
+          <div
+            class="item longhu"
+            :class="{ active: baccaratPlayType == 'longhu' }"
+            @click="chooseType('longhu')"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+import { showToast } from "vant"
+import { computed } from "vue"
+import { useStore } from "vuex"
+export default {
+  name: "PlayTypePop",
+  props: {},
+  setup() {
+    const store = useStore()
+    const baccaratPlayType = computed(() => store.state.config.baccaratPlayType)
+    const showBaccaratPlayType = computed(
+      () => store.state.config.showBaccaratPlayType
+    )
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    const closeBaccaratPlayType = () => {
+      store.commit("config/showBaccaratPlayType")
+    }
+    const chooseType = (type) => {
+      if (type == "classics") {
+        store.commit("config/updateBaccaratPlayType", type)
+      } else {
+        showToast(Lang.value[Type.value].not_open)
+      }
+    }
+    return {
+      Type,
+      Lang,
+      baccaratPlayType,
+      showBaccaratPlayType,
+      chooseType,
+      closeBaccaratPlayType
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.play-type-pop {
+  position: absolute;
+  transform: rotateX(0deg);
+  z-index: 36;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  // background: rgba(0, 0, 0, 0.5);
+  .play-type-view {
+    width: 18rem;
+    border: 1px solid #ddd;
+    margin-top: 1.5rem;
+    border-radius: 0.5rem;
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    left: 50%;
+    margin-left: -9rem;
+    padding-bottom: 0.2rem;
+    .title {
+      font-size: 0.65rem;
+      font-weight: 600;
+      color: #333;
+      text-align: center;
+      width: 100%;
+      margin-top: 0.5rem;
+      margin-bottom: 0.52rem;
+      position: relative;
+      .close {
+        position: absolute;
+        right: 0.25rem;
+        top: -0.2rem;
+        font-size: 1rem;
+        color: #999;
+        &:active {
+          opacity: 0.6;
+        }
+      }
+    }
+    .list {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &.en,
+      &.kr,
+      &.yn {
+        .item {
+          background-image: url("~@/assets/images/en_play_type_sprite.png") !important;
+        }
+      }
+      &.tw {
+        .item {
+          background-image: url("~@/assets/images/tw_play_type_sprite.png") !important;
+        }
+      }
+      .item {
+        width: 5rem;
+        height: 2.12rem;
+        background: url("~@/assets/images/cn_play_type_sprite.png") no-repeat;
+        background-size: 15.2rem;
+        margin: 0.2rem 0.3rem;
+        &:active {
+          opacity: 0.6;
+        }
+        &.classics {
+          background-position: 0 0;
+          &.active {
+            background-position: -5.08rem 0;
+          }
+        }
+        &.long {
+          background-position: 0 -2.2rem;
+          &.active {
+            background-position: -5.08rem -2.2rem;
+          }
+        }
+        &.pairs {
+          background-position: -5.088rem -6.6rem;
+          &.active {
+            background-position: -10.18rem -6.6rem;
+          }
+        }
+        &.super {
+          background-position: -10.16rem -2.2rem;
+          &.active {
+            background-position: 0 -4.4rem;
+          }
+        }
+        &.tiger {
+          background-position: -5.08rem -4.4rem;
+          &.active {
+            background-position: -10.17rem -4.4rem;
+          }
+        }
+        &.sky {
+          background-position: 0 -8.8rem;
+          &.active {
+            background-position: 0 -6.6rem;
+          }
+        }
+        &.longhu {
+          background-position: -5.09rem -8.815rem;
+          &.active {
+            background-position: -10.17rem -8.815rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/PlayWay.vue

@@ -0,0 +1,501 @@
+<template>
+  <div class="playway">
+    <div class="canvas-box">
+      <canvas class="canvas" ref="refItem"></canvas>
+      <div
+        class="switch-btn"
+        @click="switchBigWay"
+        v-if="tableData.game_id == 6"
+      >
+        {{ Lang[Type].zhupan }}
+      </div>
+    </div>
+    <div
+      class="btn-box"
+      v-if="tableData.game_id == 1 || tableData.game_id == 2"
+    >
+      <div class="left">
+        <div class="item">
+          <span class="lab">
+            {{ tableData.game_id == 1 ? Lang[Type].banker : Lang[Type].dragon }}
+          </span>
+          <span class="num banker">{{ tableData.bankerCount || 0 }}</span>
+        </div>
+        <div class="item" v-if="tableData.game_id == 1">
+          <span class="lab">{{ Lang[Type].p_banker }}</span>
+          <span class="num banker">{{ tableData.banker_pair_Count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">
+            {{ tableData.game_id == 1 ? Lang[Type].player : Lang[Type].tiger }}
+          </span>
+          <span class="num palyer">{{ tableData.playerCount || 0 }}</span>
+        </div>
+        <div class="item" v-if="tableData.game_id == 1">
+          <span class="lab">{{ Lang[Type].p_player }}</span>
+          <span class="num palyer">{{ tableData.player_pair_Count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].tie }}</span>
+          <span class="num tie">{{ tableData.tieCount || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].game }}</span>
+          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
+        </div>
+      </div>
+      <div class="right">
+        <div class="banker ask" @click="askWay('banker')">
+          <span class="text">
+            {{
+              tableData.game_id == 1
+                ? Lang[Type].askbanker
+                : Lang[Type].askdragon
+            }}
+          </span>
+          <ul class="btn">
+            <li
+              class="li circle"
+              :class="autoaskData.BbigEyeRoadcolor"
+              v-show="autoaskData.BbigEyeRoadisshow"
+            ></li>
+            <li
+              class="li round"
+              :class="autoaskData.Bpathwaycolor"
+              v-show="autoaskData.Bpathwayisshow"
+            ></li>
+            <li
+              class="li line"
+              :class="autoaskData.Broachcolor"
+              v-show="autoaskData.Broachisshow"
+            ></li>
+          </ul>
+        </div>
+        <div class="palyer ask" @click="askWay('palyer')">
+          <span class="text">
+            {{
+              tableData.game_id == 1
+                ? Lang[Type].askplayer
+                : Lang[Type].asktiger
+            }}
+          </span>
+          <ul class="btn">
+            <li
+              class="li circle"
+              :class="autoaskData.PbigEyeRoadcolor"
+              v-show="autoaskData.PbigEyeRoadisshow"
+            ></li>
+            <li
+              class="li round"
+              :class="autoaskData.Ppathwaycolor"
+              v-show="autoaskData.Ppathwayisshow"
+            ></li>
+            <li
+              class="li line"
+              :class="autoaskData.Proachcolor"
+              v-show="autoaskData.Proachisshow"
+            ></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div
+      class="totle-box"
+      style="width: 2.6rem"
+      v-if="tableData.game_id == 4 || tableData.game_id == 5"
+    >
+      <div class="list" style="max-width: 100%">
+        <div class="item">
+          <span class="lab">{{ Lang[Type].player }}1</span>
+          <span class="num banker">{{ tableData.player_1_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].player }}2</span>
+          <span class="num palyer">{{ tableData.player_2_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].player }}3</span>
+          <span class="num tie">{{ tableData.player_3_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].game }}</span>
+          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="totle-box" v-if="tableData.game_id == 6">
+      <div class="list">
+        <div class="item">
+          <span class="lab">0</span>
+          <span class="num black">{{ tableData.count.zero_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">1</span>
+          <span class="num palyer">{{ tableData.count.one_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">2</span>
+          <span class="num tie">{{ tableData.count.two_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">3</span>
+          <span class="num yellow">{{ tableData.count.three_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">4</span>
+          <span class="num banker">{{ tableData.count.four_count || 0 }}</span>
+        </div>
+      </div>
+      <div class="list">
+        <div class="item">
+          <span class="lab">{{ Lang[Type].odd }}</span>
+          <span class="num palyer">
+            {{ tableData.count.singular_count || 0 }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].even }}</span>
+          <span class="num banker">
+            {{ tableData.count.plural_count || 0 }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].big }}</span>
+          <span class="num banker">{{ tableData.count.big_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].small }}</span>
+          <span class="num palyer">{{ tableData.count.small_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].game }}</span>
+          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="totle-box" v-if="tableData.game_id == 7">
+      <div class="list">
+        <div class="item">
+          <span class="lab">{{ Lang[Type].big }}</span>
+          <span class="num banker">{{ tableData.count.big_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].small }}</span>
+          <span class="num palyer">{{ tableData.count.small_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].wai_dice }}</span>
+          <span class="num tie">{{ tableData.count.leopard_count || 0 }}</span>
+        </div>
+      </div>
+      <div class="list">
+        <div class="item">
+          <span class="lab">{{ Lang[Type].even }}</span>
+          <span class="num banker">
+            {{ tableData.count.plural_count || 0 }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].odd }}</span>
+          <span class="num palyer">
+            {{ tableData.count.singular_count || 0 }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].game }}</span>
+          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="totle-box" v-if="tableData.game_id == 8">
+      <div class="list">
+        <div class="item">
+          <span class="lab">{{ Lang[Type].red }}</span>
+          <span class="num banker">{{ tableData.count.red_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].big }}</span>
+          <span class="num banker">{{ tableData.count.high_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].odd }}</span>
+          <span class="num palyer">{{ tableData.count.odd_count || 0 }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].zero }}</span>
+          <span class="num tie">{{ tableData.count.zero_count || 0 }}</span>
+        </div>
+      </div>
+      <div class="list">
+        <div class="item">
+          <span class="lab">{{ Lang[Type].black }}</span>
+          <span class="num black">
+            {{ tableData.count.black_count || 0 }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].small }}</span>
+          <span class="num palyer">
+            {{ tableData.count.low_count || 0 }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].even }}</span>
+          <span class="num banker">
+            {{ tableData.count.even_count || 0 }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].game }}</span>
+          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch, nextTick, computed } from "vue"
+import { useStore } from "vuex"
+import { waybillAsk, waybillConfig, autoask } from "@/assets/js/waybill.js"
+export default {
+  name: "PlayWay",
+  components: {},
+  props: {
+    tableData: {
+      type: Object,
+      default: () => ({
+        ludan: {},
+        game_id: 1
+      })
+    }
+  },
+  setup(props) {
+    const refItem = ref(null)
+    const autoaskData = ref({})
+    const store = useStore()
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    const toningShowBigWay = computed(() => store.state.config.toningShowBigWay)
+    const timeStamp = computed(() => store.state.config.timeStamp)
+    const askWay = (type) => {
+      const data = props.tableData
+      waybillAsk(refItem.value, type, data, data.game_id)
+    }
+    const switchBigWay = () => {
+      store.commit("config/toningShowBigWay")
+    }
+    watch(
+      () => [
+        props.tableData.ludan,
+        timeStamp.value,
+        Type.value,
+        toningShowBigWay.value
+      ],
+      () => {
+        nextTick(() => {
+          waybillConfig(refItem.value, props.tableData, props.tableData.game_id)
+          autoaskData.value = autoask(props.tableData)
+        })
+      },
+      { immediate: true, deep: true }
+    )
+    return {
+      Type,
+      Lang,
+      refItem,
+      autoaskData,
+      askWay,
+      switchBigWay
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$dark-bg: #0d0d0d;
+$card-bg: #1e1e1e;
+$border-color: #444;
+$text-secondary: #888;
+$gold: #c5a059;
+
+.playway {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  background: $card-bg;
+  .canvas-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .switch-btn {
+      position: absolute;
+      bottom: 0;
+      left: 32%;
+      font-size: 0.2rem;
+      background: rgba(197, 160, 89, 0.8);
+      color: #000;
+      padding: 0.05rem 0.1rem 0 0.1rem;
+      border-top-left-radius: 0.1rem;
+      border-top-right-radius: 0.1rem;
+      &:active {
+        opacity: 0.4;
+      }
+    }
+  }
+  .btn-box {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    font-size: 0.4rem;
+    font-weight: 600;
+    background: $card-bg;
+    .left {
+      display: flex;
+      flex-wrap: wrap;
+      width: 3.169rem;
+      line-height: 1;
+      color: $text-secondary;
+      border-left: 1px solid $border-color;
+      min-width: 90px;
+      max-width: 180px;
+      .item {
+        min-width: 45%;
+        display: flex;
+        align-items: center;
+        .lab {
+          padding: 0 0.153rem;
+        }
+      }
+    }
+    .right {
+      border-left: 1px solid $border-color;
+      text-align: center;
+      font-size: 0.369rem;
+      display: flex;
+      flex-direction: column;
+      justify-items: center;
+      min-width: 55px;
+      max-width: 100px;
+      flex: 1;
+      .ask {
+        height: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 0 0.2rem;
+        color: #fff;
+        .btn {
+          height: 0.55rem;
+          border-radius: 0.55rem;
+          background: linear-gradient(
+            180deg,
+            rgba(60, 60, 60, 1) 0%,
+            rgba(40, 40, 40, 1) 35%,
+            rgba(30, 30, 30, 1) 100%
+          );
+          box-shadow: 0px 0px 1px 0.5px rgba(197, 160, 89, 0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 2px;
+          padding: 0 0.1rem;
+          min-width: 90%;
+          &:active {
+            opacity: 0.5;
+          }
+          .li {
+            width: 0.369rem;
+            min-width: 0.369rem;
+            height: 0.369rem;
+
+            &.circle {
+              border-radius: 0.369rem;
+              box-sizing: border-box;
+              border: 3px solid #444;
+              &.red {
+                border-color: #d14458;
+              }
+              &.blue {
+                border-color: #3779d7;
+              }
+            }
+            &.line {
+              position: relative;
+              &:after {
+                content: "";
+                position: absolute;
+                top: 5%;
+                width: 3px;
+                height: 90%;
+                border-radius: 3px;
+                transform: skewX(-30deg);
+              }
+              &.red:after {
+                background: #d14458;
+              }
+              &.blue:after {
+                background: #3779d7;
+              }
+            }
+            &.round {
+              border-radius: 12px;
+              margin-left: 5px;
+              &.red {
+                background: #d14458;
+              }
+              &.blue {
+                background: #3779d7;
+              }
+            }
+          }
+        }
+        &.banker {
+          border-bottom: 1px solid $border-color;
+        }
+      }
+    }
+  }
+  .totle-box {
+    display: flex;
+    width: 5.2rem;
+    height: 100%;
+    border-left: 1px solid $border-color;
+    background: $card-bg;
+    .list {
+      flex: 1;
+      font-size: 0.38rem;
+      font-weight: 600;
+      padding: 0.15rem 0.25rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+      box-sizing: border-box;
+      &:first-child {
+        max-width: 42%;
+      }
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: 1;
+        color: $text-secondary;
+        .black {
+          color: #aaa;
+        }
+        .yellow {
+          color: #ffc107;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Record.vue

@@ -0,0 +1,882 @@
+<template>
+  <div class="record">
+    <div class="nav">
+      <div class="select-view">
+        <div
+          class="select-box left"
+          :class="{
+            on:
+              type == 1 ||
+              type == 2 ||
+              type == 4 ||
+              type == 5 ||
+              type == 6 ||
+              type == 7 ||
+              type == 8
+          }"
+        >
+          <span class="text" @click="gameType()">{{ typetext }}</span>
+          <i class="icon"></i>
+          <ul class="animate__animated animate__fadeIn" v-if="showGameType">
+            <li
+              class="btn"
+              :class="{ active: type == 1 }"
+              @click="choseType('1', $lang[$Type].Baccarat)"
+            >
+              {{ $lang[$Type].Baccarat }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 2 }"
+              @click="choseType('2', $lang[$Type].DragonTiger)"
+            >
+              {{ $lang[$Type].DragonTiger }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 4 }"
+              @click="choseType('4', $lang[$Type].NN)"
+            >
+              {{ $lang[$Type].NN }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 5 }"
+              @click="choseType('5', $lang[$Type].ThreeCard)"
+            >
+              {{ $lang[$Type].ThreeCard }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 6 }"
+              @click="choseType('6', $lang[$Type].Toning)"
+            >
+              {{ $lang[$Type].Toning }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 7 }"
+              @click="choseType('7', $lang[$Type].Dice)"
+            >
+              {{ $lang[$Type].Dice }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 8 }"
+              @click="choseType('8', $lang[$Type].roulette)"
+            >
+              {{ $lang[$Type].roulette }}
+            </li>
+          </ul>
+        </div>
+        <div
+          class="select-box right"
+          :class="{ on: type == 10 || type == 11 || type == 12 }"
+        >
+          <span class="text" @click="capitalType()">{{ capitaltext }}</span>
+          <i class="icon"></i>
+          <ul class="animate__animated animate__fadeIn" v-if="showCapitalType">
+            <li
+              class="btn"
+              :class="{ active: type == 10 }"
+              @click="choseType('10', $lang[$Type].Upperrecord)"
+            >
+              {{ $lang[$Type].Upperrecord }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 11 }"
+              @click="choseType('11', $lang[$Type].Subrecord)"
+            >
+              {{ $lang[$Type].Subrecord }}
+            </li>
+            <li
+              class="btn"
+              :class="{ active: type == 12 }"
+              @click="choseType('12', $lang[$Type].Rewardrecord)"
+            >
+              {{ $lang[$Type].Rewardrecord }}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="time">
+        <span
+          class="item btn"
+          @click="choseTime(1)"
+          :class="{ active: time_interval == 1 }"
+        >
+          {{ $lang[$Type].Today }}
+        </span>
+        <span
+          class="item btn"
+          @click="choseTime(2)"
+          :class="{ active: time_interval == 2 }"
+        >
+          {{ $lang[$Type].Yesterday }}
+        </span>
+        <span
+          class="item btn"
+          @click="choseTime(3)"
+          :class="{ active: time_interval == 3 }"
+        >
+          {{ $lang[$Type].Week }}
+        </span>
+      </div>
+    </div>
+    <section class="view" @click="offSelect()">
+      <div
+        class="list-box"
+        v-if="
+          type == 1 ||
+          type == 2 ||
+          type == 4 ||
+          type == 5 ||
+          type == 6 ||
+          type == 7 ||
+          type == 8
+        "
+      >
+        <table class="hd">
+          <tr>
+            <td>{{ $lang[$Type].Notenumber }}</td>
+            <td>{{ $lang[$Type].Type }}</td>
+            <td>{{ $lang[$Type].Result }}</td>
+            <td>{{ $lang[$Type].Play }}</td>
+            <td>{{ $lang[$Type].Date }}</td>
+            <td>{{ $lang[$Type].Beforebalance }}</td>
+            <td>{{ $lang[$Type].bet_amount }}</td>
+            <td>{{ $lang[$Type].note_win_lose }}</td>
+          </tr>
+        </table>
+        <div class="bd">
+          <table>
+            <tr v-for="(item, index) in tableData" :key="index">
+              <td>{{ item.game_num }}</td>
+              <td>{{ item.table_name }}</td>
+              <td>{{ item.card_result }}</td>
+              <td>
+                <span
+                  v-if="item.number_is_rob == 1"
+                  @click="
+                    Details(item.number_tab_id, item.table_name, item.win_total)
+                  "
+                  class="btn"
+                >
+                  {{ item.user_bet }}
+                </span>
+                <span v-else>{{ item.user_bet }}</span>
+              </td>
+
+              <td>{{ item.create_time }}</td>
+              <td>{{ item.money_before_bet }}</td>
+              <td>{{ item.amount }}</td>
+              <td>{{ item.win_total }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+      <div v-if="type == 10 || type == 11" class="list-box">
+        <table class="hd fadeIn animated0">
+          <tr>
+            <td>{{ $lang[$Type].Notenumber }}</td>
+            <td>{{ $lang[$Type].Type }}</td>
+            <td>{{ $lang[$Type].Date }}</td>
+            <td>{{ $lang[$Type].Beforebalance }}</td>
+            <td>{{ $lang[$Type].bet_amount }}</td>
+            <td>{{ $lang[$Type].Transaction }}</td>
+          </tr>
+        </table>
+        <div class="bd">
+          <table>
+            <tr v-for="item in tableData" :key="item.id">
+              <td>{{ item.id }}</td>
+              <td>{{ item.mode }}</td>
+              <td>{{ item.create_time }}</td>
+              <td>{{ item.old_money }}</td>
+              <td>{{ item.new_money }}</td>
+              <td>{{ item.amount }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div v-if="type == 12" class="list-box">
+        <table class="hd fadeIn animated0">
+          <tr>
+            <td>{{ $lang[$Type].Number }}</td>
+            <td>{{ $lang[$Type].Rewardamount }}</td>
+            <td>{{ $lang[$Type].RewardTab }}</td>
+            <td>{{ $lang[$Type].Date }}</td>
+          </tr>
+        </table>
+        <table class="bd">
+          <tr v-for="item in tableData" :key="item.id">
+            <td>{{ item.id }}</td>
+            <td>{{ item.money }}</td>
+            <td>{{ item.table_name }}</td>
+            <td>{{ item.create_time }}</td>
+          </tr>
+        </table>
+      </div>
+      <div class="ft fadeIn animated0">
+        <span v-if="$Type == 'cn'" class="num">共 {{ num }} 条</span>
+        <span v-if="$Type == 'cn'" class="pagenum">共{{ pagenum }}页</span>
+        <span class="pages" v-if="pagenum != 0 && $Type == 'cn'">
+          第{{ page }}页
+        </span>
+
+        <span v-if="$Type == 'tw'" class="num">共 {{ num }} 條</span>
+        <span v-if="$Type == 'tw'" class="pagenum">共{{ pagenum }}頁</span>
+        <span class="pages" v-if="pagenum != 0 && $Type == 'tw'">
+          第{{ page }}頁
+        </span>
+
+        <span v-if="$Type == 'en'" class="num">Total of {{ num }}</span>
+        <span v-if="$Type == 'en'" class="pagenum">
+          Total {{ pagenum }} pages
+        </span>
+        <span class="pages" v-if="pagenum != 0 && $Type == 'en'">
+          Page {{ page }}
+        </span>
+
+        <span class="btn" @click="prevPage" v-if="pagenum > 1 && page != 1">
+          {{ $lang[$Type].Previous }}
+        </span>
+        <span
+          class="btn"
+          @click="nextPage"
+          v-if="pagenum > 1 && pagenum != page"
+        >
+          {{ $lang[$Type].Next }}
+        </span>
+        <span
+          class="alldown"
+          v-if="type == 1 || type == 2 || type == 4 || type == 5"
+        >
+          {{ $lang[$Type].Totalbet }} {{ alldown }}
+        </span>
+        <span
+          class="allwin"
+          v-if="type == 1 || type == 2 || type == 4 || type == 5"
+        >
+          {{ $lang[$Type].TotalWin }} {{ returnFloat(allwin) }}
+        </span>
+        <span class="allwin" v-if="type == 10">
+          {{ $lang[$Type].Upperscore }} {{ recharge_amount }}
+        </span>
+        <span class="allwin" v-if="type == 11">
+          {{ $lang[$Type].Subordinate }} {{ recharge_amount }}
+        </span>
+        <span class="allwin" v-if="type == 12">
+          {{ $lang[$Type].Pagerewarded }} {{ recharge_amount }}
+        </span>
+      </div>
+    </section>
+    <section class="rob-view view" v-if="showRob">
+      <div class="list-box">
+        <div class="title">
+          <small class="btn" @click="backRecord()">
+            {{ $lang[$Type].Back }}
+          </small>
+          {{ robTitle }}
+        </div>
+        <table class="hd">
+          <tr>
+            <td>{{ $lang[$Type].UserName }}</td>
+            <td>{{ $lang[$Type].Type }}</td>
+            <td>{{ $lang[$Type].ThisResults }}</td>
+            <td>{{ $lang[$Type].Betamount }}</td>
+            <td>{{ $lang[$Type].msg_win_lose }}</td>
+            <td>{{ $lang[$Type].Date }}</td>
+          </tr>
+        </table>
+        <div class="bd">
+          <table>
+            <tr v-for="(item, index) in robData" :key="index">
+              <td>{{ item.username }}</td>
+              <!-- <td>{{item.table_name}}</td> -->
+              <td>{{ item.user_bet }}</td>
+              <td>{{ item.card_result }}</td>
+              <td>{{ item.amount }}</td>
+              <td>{{ item.win_total }}</td>
+              <td>{{ item.create_time }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div class="ft fadeIn animated0">
+        <span v-if="$Type == 'cn'" class="num">共 {{ num }} 条</span>
+        <span v-if="$Type == 'cn'" class="pagenum">共{{ pagenum }}页</span>
+        <span class="pages" v-if="pagenum != 0 && $Type == 'cn'">
+          第{{ page }}页
+        </span>
+
+        <span v-if="$Type == 'tw'" class="num">共 {{ num }} 條</span>
+        <span v-if="$Type == 'tw'" class="pagenum">共{{ pagenum }}頁</span>
+        <span class="pages" v-if="pagenum != 0 && $Type == 'tw'">
+          第{{ page }}頁
+        </span>
+
+        <span v-if="$Type == 'en'" class="num">Total of {{ num }}</span>
+        <span v-if="$Type == 'en'" class="pagenum">
+          Total {{ pagenum }} pages
+        </span>
+        <span class="pages" v-if="pagenum != 0 && $Type == 'en'">
+          Page {{ page }}
+        </span>
+
+        <span
+          class="btn"
+          @click="robprevPage"
+          v-if="robpagenum > 1 && robpage != 1"
+        >
+          {{ $lang[$Type].Previous }}
+        </span>
+        <span
+          class="btn"
+          @click="robnextPage"
+          v-if="robpagenum > 1 && robpagenum != page"
+        >
+          {{ $lang[$Type].Next }}
+        </span>
+        <span class="alldown">
+          {{ $lang[$Type].Totalbet }} {{ roballdown }}
+        </span>
+        <span class="allwin">{{ $lang[$Type].TotalWin }} {{ roballwin }}</span>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex"
+import { showToast, showLoadingToast, closeToast } from "vant"
+import { getUserBets, getRobBet, tipRecord, rechargeRecord } from "@/utils/api"
+export default {
+  name: "RecordView",
+  data() {
+    return {
+      frist: true,
+      showGameType: false,
+      showCapitalType: false,
+      num: 0,
+      pagenum: 0,
+      page: 1,
+      alldown: 0,
+      allwin: 0,
+      recharge_amount: 0,
+      time_interval: 1,
+      tableData: [],
+
+      type: 1,
+      // typetext:this.$lang[this.$Type].Baccarat||'',
+      // capitaltext:this.$lang[this.$Type].Fundrecord||'',
+      typetext: "",
+      capitaltext: "",
+
+      showRob: false,
+      robTitle: "",
+      robData: [],
+      robnum: 0,
+      robpagenum: 0,
+      roballdown: 0,
+      roballwin: 0,
+      robpage: 1,
+
+      rob_number_tab_id: 0,
+      rob_title: "",
+      rob_win_total: 0
+    }
+  },
+  methods: {
+    returnFloat(num) {
+      let value = Math.round(parseFloat(num) * 100) / 100
+      let xsd = value.toString().split(".")
+      if (xsd.length == 1) {
+        value = value.toString() + ".00"
+        return value
+      }
+      if (xsd.length > 1) {
+        if (xsd[1].length < 2) {
+          value = value.toString() + "0"
+        }
+        return value
+      }
+    },
+    gameType() {
+      this.showGameType = !this.showGameType
+      this.showCapitalType = false
+    },
+    capitalType() {
+      this.showCapitalType = !this.showCapitalType
+      this.showGameType = false
+    },
+    offSelect() {
+      if (this.showGameType) {
+        this.showGameType = false
+      }
+      if (this.showCapitalType) {
+        this.showCapitalType = false
+      }
+    },
+    choseTime(type) {
+      this.time_interval = type
+      this.page = 1
+      this.getData(this.type)
+    },
+    choseType(type, text) {
+      this.page = 1
+      if (type <= 7) {
+        this.typetext = text
+        this.capitaltext = this.$lang[this.$Type].Betrecord
+        this.showGameType = false
+        this.getData(type)
+      } else {
+        if (this.userInfo.is_sw != 1) {
+          this.capitaltext = text
+          this.typetext = this.$lang[this.$Type].Gamerecord
+          this.showCapitalType = false
+          this.getData(type)
+        } else {
+          showToast(this.$lang[this.$Type].Not_power)
+        }
+      }
+    },
+    getData(type) {
+      this.type = type
+      if (this.type != 10 && this.type != 11 && this.type != 12) {
+        // 游戏记录
+        const params = {
+          user_id: this.userInfo.id,
+          api_token: this.userInfo.api_token,
+          game_id: this.type,
+          page: this.page,
+          time_interval: this.time_interval
+        }
+        showLoadingToast({
+          message: "加载中...",
+          forbidClick: true
+        })
+        getUserBets(params)
+          .then((response) => {
+            if (response.Success == 1) {
+              const data = response.Data
+              this.tableData = data.bet_info
+              this.num = data.bet_num
+              this.pagenum = data.page_num
+              this.alldown = data.bet_list_amount
+              this.allwin = data.bet_list_wintotal
+            } else {
+              console.log(response)
+            }
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+          .finally(() => {
+            closeToast()
+          })
+      } else if (this.type == 12) {
+        // 打赏记录
+        const params = {
+          user_id: this.userInfo.id,
+          api_token: this.userInfo.api_token,
+          page: this.page,
+          time_interval: this.time_interval
+        }
+        tipRecord(params)
+          .then((response) => {
+            if (response.Success == 1) {
+              const data = response.Data
+              this.tableData = data.tip
+              this.num = data.tip_num
+              this.pagenum = data.page_num
+              this.recharge_amount = data.tip_amount
+              // console.log(data)
+            } else {
+              // console.log(data)
+            }
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      } else {
+        // 上下分记录
+        let mode = 1
+        if (this.type == 10) {
+          mode = 1
+        } else if (this.type == 11) {
+          mode = 2
+        }
+        const params = {
+          user_id: this.userInfo.id,
+          api_token: this.userInfo.api_token,
+          page: this.page,
+          mode: mode,
+          time_interval: this.time_interval
+        }
+        rechargeRecord(params)
+          .then((response) => {
+            if (response.Success == 1) {
+              const data = response.Data
+              this.tableData = data.recharge
+              this.num = data.recharge_num
+              this.pagenum = data.page_num
+              this.recharge_amount = data.recharge_amount
+            } else {
+              // console.log(data)
+            }
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      }
+    },
+    // 查看庄详情
+    Details(number_tab_id, title, win_total) {
+      this.rob_number_tab_id = number_tab_id
+      this.rob_title = title
+      this.rob_win_total = win_total
+
+      const params = {
+        user_id: this.userInfo.id,
+        api_token: this.userInfo.api_token,
+        game_id: this.type,
+        page: this.robpage,
+        number_tab_id: number_tab_id
+      }
+      if (win_total != 0) {
+        getRobBet(params)
+          .then((response) => {
+            if (response.Success == 1) {
+              const data = response.Data
+              // console.log(data)
+              this.showRob = true
+              this.robTitle = title
+              this.robData = data.bet_info
+              this.robnum = data.bet_num
+              this.robpagenum = data.page_num
+              this.roballdown = data.bet_list_amount
+              this.roballwin = data.bet_list_wintotal
+            } else {
+              // console.log(data)
+            }
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      } else {
+        showToast(this.$lang[this.$Type].Not_bet)
+      }
+    },
+    backRecord() {
+      this.showRob = false
+    },
+
+    prevPage() {
+      this.page = this.page - 1
+      this.getData(this.type)
+    },
+    nextPage() {
+      this.page = this.page + 1
+      this.getData(this.type)
+    },
+
+    robprevPage() {
+      this.robpage = this.robpage - 1
+      this.Details(this.rob_number_tab_id, this.rob_title, this.rob_win_total)
+    },
+    robnextPage() {
+      this.robpage = this.robpage + 1
+      this.Details(this.rob_number_tab_id, this.rob_title, this.rob_win_total)
+    },
+
+    goback() {
+      this.$router.go(-1)
+    }
+  },
+  computed: {
+    ...mapState({
+      $Type: (state) => state.config.$Type,
+      $lang: (state) => state.config.$lang,
+      userInfo: (state) => state.app.userInfo
+    })
+  },
+  watch: {
+    userInfo: {
+      handler: function (newData) {
+        if (newData.api_token) {
+          this.getData(1)
+          this.typetext = this.$lang[this.$Type].Baccarat
+          this.capitaltext = this.$lang[this.$Type].Fundrecord
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.record {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  input {
+    border: none;
+  }
+}
+.record .nav {
+  color: #ddd;
+  width: 100%;
+  padding: 0.2rem 0.15rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 90;
+}
+.record .select-view {
+  display: flex;
+  border-radius: 100rem;
+  box-shadow: 0 0 2px #cba552;
+  margin-left: 0.2rem;
+}
+.record .nav .select-box {
+  background: #2b2e31;
+  width: 2.8rem;
+  text-align: center;
+  position: relative;
+  z-index: 888;
+  transform: rotateX(0deg);
+}
+.record .nav .select-box.on {
+  color: #000;
+  background-color: #baa277;
+  background-image: linear-gradient(
+    180deg,
+    #baa277 0%,
+    #f0d199 50%,
+    #8b5e25 100%
+  );
+}
+
+.record .nav .select-box.left {
+  border-top-left-radius: 100rem;
+  border-bottom-left-radius: 100rem;
+}
+.record .nav .select-box.right {
+  border-bottom-right-radius: 100rem;
+  border-top-right-radius: 100rem;
+}
+
+.record .select-box .text {
+  background: none;
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-size: 0.4rem;
+  padding: 0.2rem 0;
+  padding-right: 0.6rem;
+  font-weight: bold;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+
+.record .select-box .icon {
+  position: absolute;
+  top: 50%;
+  right: 0.2rem;
+  margin-top: -0.1rem;
+  width: 0;
+  height: 0;
+  border-left: 0.15rem solid transparent;
+  border-right: 0.15rem solid transparent;
+  border-top: 0.2rem solid #fff;
+}
+
+.record .select-box.on .icon {
+  border-top-color: #000;
+}
+
+.record .nav ul {
+  position: absolute;
+  width: 100%;
+  background: #000;
+  z-index: 99;
+  left: 0;
+  border-radius: 2px;
+  box-shadow: 0 0 3px #060606;
+  top: 0.9rem;
+  transform: rotateX(0deg);
+}
+.record .nav li {
+  font-size: 0.4rem;
+  font-weight: bold;
+  display: block;
+  text-align: center;
+  padding: 0.2rem 0;
+  color: #fff;
+  box-sizing: border-box;
+  transition: 0.3s all;
+}
+.record .nav .btn.active {
+  color: #efcd69;
+  border: 1px solid #efcd69;
+}
+.record .nav .time {
+  margin-right: 2rem;
+  display: flex;
+  align-items: center;
+}
+.record .nav .time .item {
+  font-size: 0.4rem;
+  padding: 0.2rem 0.4rem;
+  font-weight: bold;
+  border-radius: 100rem;
+  background-color: #4385cd;
+  background-image: linear-gradient(
+    180deg,
+    #4385cd 0%,
+    #3b7bbe 50%,
+    #1b4e7d 100%
+  );
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+
+.record .nav .time .item:nth-of-type(2) {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}
+
+.record .nav .time .item.active {
+  background-color: #baa277;
+  background-image: linear-gradient(
+    180deg,
+    #baa277 0%,
+    #f0d199 50%,
+    #8b5e25 100%
+  );
+  color: #000;
+}
+
+.record .view {
+  height: calc(100% - 2.4rem);
+  width: 100%;
+  position: relative;
+  overflow-y: auto;
+}
+.record .view .hd {
+  font-size: 0.38rem;
+  color: #edcf99;
+}
+
+.record .view table {
+  color: #d8cfa9;
+  font-weight: 500;
+  table-layout: fixed;
+  width: 100%;
+  text-align: center;
+  border-collapse: collapse;
+}
+.record .view .bd tr:first-child td {
+  border-top: none;
+}
+
+.record .view .bd tr:nth-child(odd) {
+  color: #d1cfcc;
+  background: #6d5e4a;
+  font-size: 0.35rem;
+}
+
+.record .view table td {
+  padding: 0.05rem 0.2rem;
+  height: 32px;
+  font-size: 0.35rem;
+  color: #d1cfcc;
+  text-align: left;
+  font-weight: normal;
+}
+.record .view table td .btn {
+  background: #f44336;
+  color: #fff;
+  border-radius: 2px;
+  padding: 2px;
+  display: block;
+  font-size: 12px;
+}
+
+.record .view .list-box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.record .view .bd {
+  max-height: 100%;
+  overflow-y: auto;
+}
+.record .view .bd table {
+  margin-bottom: 2rem;
+}
+
+.record .view .ft {
+  background: #2b2e31;
+  color: #edcf99;
+  position: fixed;
+  width: 100%;
+  text-align: center;
+  line-height: 0.8rem;
+  height: 0.8rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: table;
+  // border-bottom-right-radius: 10px;
+  // border-bottom-left-radius: 10px;
+  overflow: hidden;
+}
+
+.record .view .ft span {
+  display: table-cell;
+  background: #2b2e31;
+  font-size: 0.35rem;
+}
+
+.record .rob-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 10px;
+  z-index: 9;
+  /* background: url(../common/images/landscape/record_bg.jpg) repeat-x; */
+  -webkit-background-size: auto 100%;
+  background-size: auto 100%;
+}
+.record .rob-view .title {
+  text-align: center;
+  background: #252729;
+  color: #edcf99;
+  // border-top-right-radius: 10px;
+  // border-top-left-radius: 10px;
+  border-bottom: 1px solid #453312;
+  line-height: 1.2rem;
+  font-size: 0.45rem;
+  font-weight: bold;
+  position: relative;
+}
+.record .rob-view .title .btn {
+  position: absolute;
+  left: 0.2rem;
+  top: 0;
+  padding-left: 0.45rem;
+  /* background: url(../common/images/icon/goback_icon.png) left 0.35rem no-repeat; */
+  -webkit-background-size: 0.3rem;
+  background-size: 0.3rem;
+}
+</style>

src/components/RouletteResult.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="roulette-result">
+    <template v-if="sendMode == 'openingRouletteResult' && result">
+      <div class="left">
+        <div>{{ result.sbText }}</div>
+        <div>{{ result.spText }}</div>
+      </div>
+      <div class="center" :class="[result.color]">{{ result.num }}</div>
+      <div class="right">
+        <div>{{ result.dozenText }}</div>
+        <div>{{ result.columnText }}</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue"
+import { useStore } from "vuex"
+export default {
+  name: "RouletteResult",
+  props: {
+    resultInfo: {
+      type: [Object, String],
+      default: () => ({})
+    },
+    sendMode: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const store = useStore()
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    const result = computed(() => {
+      const resultInfo = props.resultInfo
+      console.log(resultInfo)
+      let data = {}
+      if (resultInfo && resultInfo.number_tab_id) {
+        const isBlack = [
+          "2",
+          "4",
+          "6",
+          "8",
+          "10",
+          "11",
+          "13",
+          "15",
+          "17",
+          "20",
+          "22",
+          "24",
+          "26",
+          "28",
+          "29",
+          "31",
+          "33",
+          "35"
+        ].includes(resultInfo.result)
+        data.num = resultInfo.result
+        data.color =
+          resultInfo.result == 0 ? "green" : isBlack ? "black" : "red"
+        if (resultInfo.result_parse && resultInfo.result_parse.length > 0) {
+          resultInfo.result_parse.forEach((v) => {
+            if (v == "low") {
+              data.sbText = Lang.value[Type.value].small
+            } else if (v == "even") {
+              data.spText = Lang.value[Type.value].even
+            } else if (v == "odd") {
+              data.spText = Lang.value[Type.value].odd
+            } else if (v == "high") {
+              data.sbText = Lang.value[Type.value].big
+            } else if (v == "column_1") {
+              data.columnText = Lang.value[Type.value].first_column
+            } else if (v == "column_2") {
+              data.columnText = Lang.value[Type.value].second_column
+            } else if (v == "column_3") {
+              data.columnText = Lang.value[Type.value].third_column
+            } else if (v == "dozen_1") {
+              data.dozenText = Lang.value[Type.value].first_dozen
+            } else if (v == "dozen_2") {
+              data.dozenText = Lang.value[Type.value].second_dozen
+            } else if (v == "dozen_3") {
+              data.dozenText = Lang.value[Type.value].third_dozen
+            }
+          })
+        }
+      }
+      return data
+    })
+    return {
+      result
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.roulette-result {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotateX(0deg);
+  color: #fff;
+  font-size: 0.55rem;
+  line-height: 1.5;
+  .center {
+    width: 1.5rem;
+    height: 1.7rem;
+    line-height: 1.7rem;
+    background: #000;
+    text-align: center;
+    font-size: 0.78rem;
+    font-weight: 500;
+    margin: 0 0.8rem;
+    border-radius: 5px;
+    &.red {
+      background: #f65857;
+    }
+    &.black {
+      background: #333333;
+    }
+    &.green {
+      background: #5cb645;
+    }
+  }
+}
+</style>

src/components/RushVillage.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="village">
+    <!-- 抢庄 -->
+    <div
+      class="rob-box bounceIn animated"
+      v-if="countDown && countDown > 0 && thisData.rob_time - 3 >= countDown"
+    >
+      <div class="countDown">
+        <span class="time" v-html="countDown"></span>
+        <div class="bg"></div>
+      </div>
+      <div
+        v-if="thisData.rob_banker_id == 0"
+        class="btn"
+        @click="sendRob(true)"
+        :style="`background-image:url(${require('../assets/images/nn/' +
+          $lang[$Type].rob_button)})`"
+      ></div>
+      <div
+        v-if="thisData.rob_banker_id != 0"
+        class="btn unclick"
+        @click="sendRob(false)"
+        :style="`background-image:url(${require('../assets/images/nn/' +
+          $lang[$Type].unrob_button)})`"
+      ></div>
+    </div>
+    <!-- 抢庄成功 -->
+    <div
+      v-if="successRob"
+      class="success-rob fadeInDown animated"
+      :style="`background-image:url( ${require('../assets/images/nn/' +
+        $lang[$Type].rob_result)})`"
+    >
+      <div class="name">{{ thisData.rob_banker_username }}</div>
+    </div>
+    <div
+      class="mask"
+      v-if="countDown && countDown > 0 && thisData.rob_time - 3 >= countDown"
+    ></div>
+    <div
+      class="rob-result"
+      v-if="
+        countDown == 0 && rob_banker_username != '' && thisData.rob_status == 2
+      "
+    >
+      <i
+        :style="`background-image:url(${require('../assets/images/nn/' +
+          $lang[$Type].rob_banker)})`"
+      ></i>
+      {{ rob_banker_username }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex"
+import { showToast } from "vant"
+// showSuccessToast, showFailToast
+export default {
+  data() {
+    return {
+      countDown: 0,
+      rob_banker_username: "",
+      successRob: false
+    }
+  },
+  methods: {
+    sendRob(state) {
+      if (state == true) {
+        var toRobData = {
+          connect: "client",
+          mode: "toRob",
+          table_id: this.thisData.id,
+          number_tab_id: this.thisData.number_tab_id
+        }
+        this.$store.dispatch("socket/sendMsg", {
+          ...toRobData
+        })
+      } else {
+        if (this.$Type == "cn") {
+          showToast("庄已被 " + this.thisData.rob_banker_username + " 抢了！")
+        } else if (this.$Type == "tw") {
+          showToast("莊已被 " + this.thisData.rob_banker_username + " 搶了！")
+        } else if (this.$Type == "en") {
+          showToast(
+            "Zhuang has been robbed by " +
+              this.thisData.rob_banker_username +
+              "！"
+          )
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      $Type: (state) => state.config.$Type,
+      $lang: (state) => state.config.$lang,
+      userInfo: (state) => state.app.userInfo
+    })
+  },
+  watch: {
+    thisData: {
+      handler: function (newData) {
+        // console.log(newData)
+        if (newData.game_id) {
+          // 更新抢庄时间
+          if (newData.sendMode == "startRobCountDown") {
+            this.countDown = newData.rob_count_down
+          } else if (
+            newData.sendMode != "toRobResult" &&
+            newData.sendMode != "toRob"
+          ) {
+            this.countDown = 0
+          }
+
+          // 判断是否系统抢庄
+          if (this.countDown == 0) {
+            if (newData.rob_banker_username) {
+              this.rob_banker_username = newData.rob_banker_username
+            } else {
+              this.rob_banker_username = this.$lang[this.$Type].system
+            }
+          }
+          // 判断抢庄提示
+          if (
+            newData.rob_banker_id == this.userInfo.uid &&
+            newData.rob_status == 1
+          ) {
+            this.successRob = true
+            setTimeout(() => {
+              this.successRob = false
+              newData.rob_status = 2
+            }, 5000)
+          } else {
+            this.successRob = false
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  props: {
+    thisData: Object
+  }
+}
+</script>
+<style scoped>
+.village .mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 3;
+  pointer-events: none;
+  z-index: 90;
+}
+.village .rob-box {
+  width: 4.5rem;
+  height: 6.6rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-top: -3.3rem;
+  margin-left: -2.25rem;
+  z-index: 99;
+}
+.village .rob-box .countDown {
+  width: 4rem;
+  height: 4rem;
+  position: relative;
+  margin: 0 auto 0.6rem auto;
+}
+.village .rob-box .countDown .time {
+  font-size: 1.4rem;
+  display: block;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  line-height: 4rem;
+  font-weight: bold;
+  background-color: #96813b;
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(#96813b),
+    color-stop(50%, #f8eabc),
+    to(#98833d)
+  );
+  background-image: linear-gradient(
+    180deg,
+    #96813b 0%,
+    #f8eabc 50%,
+    #98833d 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.village .rob-box .countDown .bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: url("~@/assets/images/nn/rob_rotate.png") no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  animation: rotate 12000ms linear infinite;
+}
+.village .rob-box .btn {
+  width: 4.2rem;
+  height: 1.2rem;
+  margin: 0 auto;
+  background: url("~@/assets/images/nn/rob_button.png");
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.village .rob-box .btn:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: url("~@/assets/images/nn/rob_button.png");
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  animation: cirZoom infinite linear 2s 0.5s;
+  z-index: -1;
+}
+
+.village .rob-box .btn.unclick {
+  background-image: url("~@/assets/images/nn/unrob_button.png");
+}
+
+.village .rob-box .btn.unclick:after {
+  display: none;
+}
+
+.village .success-rob {
+  position: absolute;
+  width: 9rem;
+  height: 5rem;
+  left: 50%;
+  top: 50%;
+  margin-left: -4.5rem;
+  margin-top: -2rem;
+  z-index: 99;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+.village .success-rob:after {
+  content: "";
+  width: 4.5rem;
+  height: 4.4rem;
+  position: absolute;
+  left: 50%;
+  margin-left: -2.25rem;
+  top: -1.9rem;
+  background: url("~@/assets/images/nn/rob_logo.gif") center center no-repeat;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+}
+.village .success-rob .name {
+  color: #fff;
+  position: absolute;
+  bottom: 0.5rem;
+  left: 50%;
+  width: 8rem;
+  margin-left: -4rem;
+  text-align: center;
+  line-height: 1rem;
+  background: url("~@/assets/images/nn/rob_name_bg.png") center center no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+
+.village .rob-result {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  text-align: center;
+  min-width: 1.2rem;
+  color: #f8eabc;
+  font-size: 0.35rem;
+  font-weight: 500;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  padding-left: 0.75rem;
+  padding-right: 0.35rem;
+  margin-top: -0.8rem;
+  margin-left: -1.2rem;
+  background: url("~@/assets/images/nn/rob_banker_bg.png");
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  -webkit-animation-name: robZoom;
+  animation-name: robZoom;
+  -webkit-animation-duration: 4s;
+  animation-duration: 4s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  z-index: 9999;
+}
+.village .rob-result i {
+  content: "";
+  position: absolute;
+  width: 0.9rem;
+  height: 0.9rem;
+  left: -0.3rem;
+  top: 50%;
+  margin-top: -0.48rem;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+@keyframes robZoom {
+  0% {
+    transform: translate(0, 0) scale(0, 0);
+  }
+  50% {
+    transform: translate(-5.8rem, -1.8rem) scale(1.2, 1.2);
+  }
+  100% {
+    transform: translate(-2.8rem, -4.95rem) scale(1, 1);
+  }
+}
+</style>

src/components/SwitchTab.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="switchtab">
+    <ul class="nav">
+      <li :class="{ active: game_id == 1 }" @click="choseType(1)">
+        {{ $lang[$Type].Baccarat }}
+      </li>
+      <li :class="{ active: game_id == 2 }" @click="choseType(2)">
+        {{ $lang[$Type].DragonTiger }}
+      </li>
+      <li :class="{ active: game_id == 4 }" @click="choseType(4)">
+        {{ $lang[$Type].NN }}
+      </li>
+      <li :class="{ active: game_id == 5 }" @click="choseType(5)">
+        {{ $lang[$Type].ThreeCard }}
+      </li>
+    </ul>
+    <div class="swiper-box swiper-container">
+      <ul class="swiper-wrapper">
+        <li
+          class="swiper-slide list animated"
+          :class="{ active: item.id == tab_id }"
+          v-for="item in gameData"
+          :key="item.id"
+          @click="toPlay(item.id)"
+        >
+          <div class="hd">
+            <h4 class="title">{{ item.table_name }}</h4>
+            <span class="state" v-if="item.countDown == 0 && $Type != 'en'">
+              {{ $lang[$Type].Insettlement }}
+            </span>
+            <span class="state" v-if="item.countDown > 0 && $Type != 'en'">
+              {{ $lang[$Type].Countdown }}
+            </span>
+            <span class="state" v-if="item.countDown == 0 && $Type == 'en'">
+              End
+            </span>
+            <span class="state" v-if="item.countDown > 0 && $Type == 'en'">
+              Start
+            </span>
+            <span class="countdown" :class="{ active: item.countDown > 0 }">
+              {{ item.countDown }}
+            </span>
+          </div>
+          <div class="canvas">
+            <canvas :ref="'canvas' + item.id"></canvas>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex"
+import { WaybillbigRoad, NNcanvas } from "@/assets/js/waybill.js"
+import { closeToast } from "vant"
+export default {
+  name: "SwitchTab",
+  data() {
+    return {
+      game_id: null,
+      tab_id: null,
+      gameData: [],
+      routeName: ""
+    }
+  },
+  created() {
+    this.game_id = this.tabInfo.gameId
+    this.tab_id = this.tabInfo.tabId
+  },
+  methods: {
+    gameGrouping(data) {
+      var game_id = this.game_id,
+        listData = [],
+        that = this
+      if (this.$route.name == "playtel") {
+        if (data.length && data.length > 0) {
+          data.forEach((v) => {
+            if (v.bet_type == 2 || v.bet_type == 3) {
+              listData.push(v)
+              that.$nextTick(() => {
+                that.resizeCanvas(v)
+              })
+            }
+          })
+          that.gameData = listData
+          that.num = listData.length
+        }
+      } else {
+        if (data.length && data.length > 0) {
+          data.forEach((v) => {
+            if (game_id == v.game_id) {
+              if (v.bet_type == 1 || v.bet_type == 3) {
+                listData.push(v)
+                that.$nextTick(() => {
+                  that.resizeCanvas(v)
+                })
+              }
+            }
+          })
+
+          that.gameData = listData
+        }
+      }
+    },
+    resizeCanvas(data) {
+      var getPixelRatio = (context) => {
+        var backingStore =
+          context.backingStorePixelRatio ||
+          context.webkitBackingStorePixelRatio ||
+          context.mozBackingStorePixelRatio ||
+          context.msBackingStorePixelRatio ||
+          context.oBackingStorePixelRatio ||
+          context.backingStorePixelRatio ||
+          1
+        return (window.devicePixelRatio || 1) / backingStore
+      }
+
+      var canvas = this.$refs["canvas" + data.id],
+        ctb = canvas[0].getContext("2d"),
+        dpr = getPixelRatio(ctb),
+        width = canvas[0].clientWidth,
+        height = 2.8 * this.font
+
+      if (data.game_id == 1 || data.game_id == 2) {
+        var rows = 6,
+          unit = parseInt(height / rows) * dpr,
+          cols = parseInt(width / (unit / dpr)),
+          path = false,
+          ask = false,
+          askroad = false
+
+        canvas[0].setAttribute("width", unit * cols)
+        canvas[0].setAttribute("height", unit * rows)
+        if (data.ludan && data.ludan.waybill) {
+          path = data.ludan.waybill.bigRoad
+        }
+        WaybillbigRoad(ctb, unit, rows, cols, path, data.game_id, ask, askroad)
+      } else if (data.game_id == 4 || data.game_id == 5) {
+        const rows = 4,
+          unit_y = (height / rows) * dpr,
+          unit_x = unit_y * 1.05,
+          cols = parseInt(width / (unit_x / dpr))
+        let path = false
+        canvas[0].setAttribute("width", unit_x * cols)
+        canvas[0].setAttribute("height", unit_y * rows)
+        if (data.ludan && data.ludan.waybill) {
+          path = data.ludan.waybill
+        }
+        NNcanvas(data.game_id, ctb, unit_x, unit_y, rows, cols, path)
+      }
+    },
+    toPlay(table_id) {
+      closeToast()
+      if (this.routeName != "playtel") {
+        this.$router.push({ name: "play", query: { id: table_id } })
+      } else {
+        this.$router.push({ name: "playtel", query: { id: table_id } })
+      }
+    },
+    choseType(game_id) {
+      this.game_id = game_id
+      this.gameGrouping(this.tabData)
+    }
+  },
+  computed: {
+    ...mapState({
+      $Type: (state) => state.config.$Type,
+      $lang: (state) => state.config.$lang,
+      font: (state) => state.config.fonstSize,
+      tabData: (state) => state.app.allTableData,
+      userInfo: (state) => state.app.userInfo
+    })
+  },
+  watch: {
+    tabInfo: {
+      handler(data) {
+        this.game_id = data.gameId
+        this.tab_id = data.tabId
+        this.routeName = this.$route.name
+      },
+      deep: true,
+      immediate: true
+    },
+    tabData: {
+      handler(newData) {
+        if (newData != undefined) {
+          this.gameGrouping(newData)
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  props: {
+    tabInfo: Object
+  }
+}
+</script>
+<style lang="scss" scoped>
+.switchtab {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  font-size: 0.38rem;
+}
+.switchtab .nav {
+  position: absolute;
+  height: 0.95rem;
+  background: rgba(0, 0, 0, 0.8);
+  top: -0.95rem;
+  line-height: 1rem;
+  border-top-left-radius: 0.7rem;
+  border-top-right-radius: 0.7rem;
+  overflow: hidden;
+}
+.switchtab .nav li {
+  float: left;
+  width: 2.5rem;
+  text-align: center;
+  font-size: 0.45rem;
+  color: #fff;
+}
+.switchtab .nav li.active {
+  background: url("~@/assets/images/list_btn_bg.png");
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  color: #000;
+  font-weight: bold;
+}
+.switchtab .swiper-box {
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.switchtab .swiper-box .list {
+  background: rgba(0, 0, 0, 0);
+  padding: 0.1rem;
+  box-sizing: border-box;
+  color: #fff;
+  width: 5.7rem;
+  height: 3.68rem;
+  box-shadow: 0px 0px 0px 1px #654f0e;
+  overflow: hidden;
+  margin-top: 0.07rem;
+}
+.switchtab .swiper-box .list:active {
+  opacity: 0.8;
+}
+.switchtab .swiper-box .list.active {
+  box-shadow: 0px 0px 0px 1px #00a51c;
+}
+.switchtab .swiper-box .hd {
+  display: flex;
+  width: 100%;
+  padding-bottom: 0.1rem;
+  line-height: 0.6rem;
+  align-items: center;
+  justify-content: space-between;
+}
+.switchtab .swiper-box span {
+  float: left;
+  text-align: center;
+  color: #fce9b1;
+}
+
+.switchtab .swiper-box .title {
+  font-size: 0.38rem;
+  font-weight: normal;
+  float: left;
+  width: 2.3rem;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 0.6rem;
+  color: #fce9b1;
+  margin: 0;
+}
+.switchtab .swiper-box .state {
+  width: 1.6rem;
+}
+.switchtab .swiper-box .countdown {
+  width: 0.75rem;
+  background: url("~@/assets/images/countdown_bg.png") no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  color: #000;
+  padding-left: 0.75rem;
+  font-size: 0.38rem;
+  position: relative;
+  float: right;
+}
+.switchtab .swiper-box .countdown.active {
+  background-image: url("~@/assets/images/countdown_active_bg.png");
+}
+.switchtab .swiper-box .countdown:after {
+  content: "";
+  position: absolute;
+  width: 0.45rem;
+  height: 0.45rem;
+  background: url("~@/assets/images/icon/time_icon.png");
+  left: 0.3rem;
+  top: 50%;
+  margin-top: -0.225rem;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+}
+.switchtab .swiper-box .canvas {
+  width: 5.5rem;
+  height: 2.8rem;
+}
+.switchtab .swiper-box canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #fff;
+}
+</style>

src/components/SwitchTab2.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="switchtab">
+    <div class="nav">
+      <div
+        class="li good"
+        :class="{ active: active == 0 }"
+        @click="chooseType(0)"
+      >
+        {{ Lang[Type].good_road_tip }}
+      </div>
+      <div
+        class="li switch"
+        :class="{ active: active == 1 }"
+        @click="chooseType(1)"
+      >
+        {{ Lang[Type].switch_table }}
+      </div>
+    </div>
+    <div class="content">
+      <GoodRoad v-if="active == 0" @close="close"></GoodRoad>
+      <TableList
+        v-if="active == 1"
+        @close="close"
+        :tabInfo="tabInfo"
+      ></TableList>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex"
+import GoodRoad from "@/components/GoodRoad.vue"
+import TableList from "@/components/TableList.vue"
+export default {
+  name: "SwitchTab",
+  props: {
+    tabInfo: Object,
+    default: () => ({
+      game_id: 1,
+      table_id: null
+    })
+  },
+  data() {
+    return {
+      active: 0
+    }
+  },
+  components: { GoodRoad, TableList },
+  created() {},
+  methods: {
+    chooseType(active) {
+      this.active = active
+    },
+    close() {
+      this.$emit("showSwitchtab", false)
+    }
+  },
+  computed: {
+    ...mapState({
+      Lang: (state) => state.config.$lang,
+      Type: (state) => state.config.$Type,
+      font: (state) => state.config.fonstSize,
+      tabData: (state) => state.app.allTableData,
+      userInfo: (state) => state.app.userInfo
+    })
+  },
+  watch: {}
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$dark-bg: #0d0d0d;
+$dark-bg-secondary: #1a1a1a;
+$card-bg: #1e1e1e;
+$border-color: #333;
+$gold: #c5a059;
+$text-primary: #ffffff;
+$text-secondary: #888888;
+
+.switchtab {
+  width: 100%;
+  height: 100%;
+  background: $dark-bg-secondary;
+  transform: rotateX(0deg);
+  .nav {
+    height: 1.32rem;
+    line-height: 1.32rem;
+    display: flex;
+    align-items: center;
+    font-size: 0.44rem;
+    background: linear-gradient(
+      to bottom,
+      $dark-bg 0%,
+      $dark-bg 50%,
+      $dark-bg-secondary 50%,
+      $dark-bg-secondary 100%
+    );
+    .li {
+      width: 50%;
+      height: 100%;
+      text-align: center;
+      font-weight: 600;
+      background: $dark-bg;
+      overflow: hidden;
+      color: $text-secondary;
+      &.good {
+        border-bottom-right-radius: 0.3rem;
+        &.active {
+          background: $dark-bg-secondary;
+          border-top-right-radius: 0.3rem;
+          border-bottom-right-radius: 0;
+          color: $gold;
+        }
+      }
+      &.switch {
+        border-bottom-left-radius: 0.3rem;
+        &.active {
+          border-top-left-radius: 0.3rem;
+          background: $dark-bg-secondary;
+          color: $gold;
+        }
+      }
+    }
+  }
+  .content {
+    height: calc(100% - 1.3rem);
+    width: 100%;
+    overflow: hidden;
+    background: $dark-bg-secondary;
+  }
+}
+</style>

src/components/Tabbar.vue

@@ -0,0 +1,228 @@
+<template>
+	<div class="tabbar">
+		<van-tabbar v-model="active">
+			<van-tabbar-item @click="changeEvnt(item)" :name="tabbar.name" v-for="(item, index) in tabbar" :key="index"
+				:to="item.to">
+				<template #icon="props">
+					<img :src="
+              props.active
+                ? tabbar[index].icon.active
+                : tabbar[index].icon.inactive
+            " />
+				</template>
+			</van-tabbar-item>
+		</van-tabbar>
+	</div>
+</template>
+
+<script>
+	import {
+		ref,
+		onMounted,
+		computed,
+		watch
+	} from "vue"
+	import {
+		useRouter
+	} from "vue-router"
+	import {
+		useStore
+	} from "vuex"
+	import {
+		Tabbar,
+		TabbarItem,
+		showDialog
+	} from "vant"
+	export default {
+		name: "TabBar",
+		components: {
+			"van-tabbar": Tabbar,
+			"van-tabbar-item": TabbarItem
+		},
+		setup() {
+			const router = useRouter()
+			const store = useStore()
+			const Type = computed(() => store.state.config.$Type)
+			const Lang = computed(() => store.state.config.$lang)
+			const active = ref(0)
+			const tabbar = ref([])
+			watch(
+				() => [Type.value],
+				([language]) => {
+					const prefix =
+						language == "kr" ||
+						language == "yn" ||
+						language == "tl" ||
+						language == "in" ?
+						"en" :
+						language
+					tabbar.value = [{
+							// text: "百家乐",
+							name: "hall",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_classics_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_classics.png`)
+							},
+							to: "/baccarat"
+						},
+						{
+							// text: "龙虎",
+							name: "lh",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_lh_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_lh.png`)
+							},
+							to: "/longhu"
+						},
+						{
+							// text: "牛牛",
+							name: "nn",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_nn_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_nn.png`)
+							},
+							to: "/nn"
+						},
+						{
+							// text: "色碟",
+							name: "toning",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_sd_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_sd.png`)
+							},
+							to: "/toning"
+						},
+						{
+							// text: "骰宝",
+							name: "dice",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_sb_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_sb.png`)
+							},
+							to: "/dice"
+						},
+						{
+							// text: "炸金花",
+							name: "threecard",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_sbnn_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_sbnn.png`)
+							},
+							to: "/threecard"
+						},
+						{
+							// text: "轮盘",
+							name: "lp",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_lp_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_lp.png`)
+							},
+							//to: "/lp"
+						},
+
+
+						{
+							// text: "多台",
+							name: "multiple",
+							icon: {
+								active: require(`../assets/images/tabbar/${prefix}_multiple_active.png`),
+								inactive: require(`../assets/images/tabbar/${prefix}_multiple.png`)
+							}
+							// to: "/multiple"
+						}
+					]
+				}, {
+					immediate: true,
+					deep: true
+				}
+			)
+
+			const changeEvnt = (data) => {
+				//if (!["hall", "lh", "nn", "toning", "dice", "lp"].includes(data.name)) {
+				//if (!["hall", "lh", "nn", "toning", "dice"].includes(data.name)) {
+				if (!["hall", "lh", "nn", "toning", "dice", "threecard"].includes(data.name)) {
+					showDialog({
+						title: Lang.value[Type.value].tips,
+						message: Lang.value[Type.value].msg_waiting_development,
+						confirmButtonText: Lang.value[Type.value].Confirm
+					}).then(() => {
+						active.value = 0
+					})
+				}
+			}
+
+			onMounted(() => {
+				const routerName = router.currentRoute.value.name
+				active.value =
+					routerName == "nn" ?
+					2 :
+					routerName == "longhu" ?
+					1 :
+					routerName == "toning" ?
+					3 :
+					routerName == "dice" ?
+					4 :
+					routerName == "threecard" ?
+					5 :
+					routerName == "lp" ?
+					6 :
+					0
+			})
+			return {
+				tabbar,
+				active,
+				changeEvnt
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	/* 深色豪华主题 - 游戏分类 Tabbar */
+	$dark-bg: #1a1a1a;
+	$gold: #c5a059;
+	$border-color: #333;
+	
+	.tabbar {
+		position: absolute;
+		width: 100%;
+		left: 0;
+		bottom: 0;
+		z-index: 25;
+		background: $dark-bg;
+		border-top: 1px solid $border-color;
+	}
+
+	.van-tabbar--fixed {
+		position: static;
+		width: 100%;
+		height: 56px;
+	}
+
+	.van-tabbar {
+		background: $dark-bg !important;
+		height: 56px;
+		overflow-x: auto;
+		overflow-y: hidden;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		-webkit-overflow-scrolling: touch;
+		
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.van-tabbar-item {
+		flex: 0 0 auto;
+		min-width: 70px;
+		width: 12.5%; /* 8个图标 */
+		
+		&--active {
+			background: transparent !important;
+		}
+	}
+
+	.van-tabbar-item__icon img {
+		height: 28px;
+	}
+</style>

src/components/TableInfoPop.vue

@@ -0,0 +1,199 @@
+<template>
+  <Transition
+    name="custom-classes"
+    enter-active-class="animate__animated animate__faster animate__fadeInLeft"
+    leave-active-class="animate__animated animate__faster animate__fadeOutLeft"
+  >
+    <div class="table-info-pop" v-if="tableData && showTableInfo">
+      <div class="title">{{ Lang[Type].table_info }}</div>
+      <div class="list flex flex-pack-between">
+        <div class="item">
+          <span class="lab">{{ Lang[Type].table }}：</span>
+          <span>{{ tableData.table_name }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].boot }}：</span>
+          <span>{{ tableData.boot_num }}</span>
+        </div>
+        <div class="item">
+          <span class="lab">{{ Lang[Type].games }}：</span>
+          <span>{{ tableData.number_tab_number }}</span>
+        </div>
+      </div>
+      <div class="list">
+        <div class="item">
+          <span>{{ Lang[Type].dealer }}：</span>
+          <span>Address</span>
+        </div>
+      </div>
+      <div class="title">{{ Lang[Type].game_information }}</div>
+      <div class="table">
+        <div class="top list">
+          <span>{{ Lang[Type].play_type }}</span>
+          <span>{{ Lang[Type].odds }}</span>
+          <span>{{ Lang[Type].limit }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 1">
+          <span>{{ Lang[Type].banker }}</span>
+          <span>
+            {{ tableData.price_banker }}/1({{ Lang[Type].is_commission }})
+          </span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 1">
+          <span>{{ Lang[Type].player }}</span>
+          <span>{{ tableData.price_player }}</span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 2">
+          <span>{{ Lang[Type].dragon }}</span>
+          <span>{{ tableData.price_dragon }}</span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 2">
+          <span>{{ Lang[Type].tiger }}</span>
+          <span>{{ tableData.price_tiger }}</span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+        <div
+          class="list"
+          v-if="tableData.game_id == 1 || tableData.game_id == 2"
+        >
+          <span>{{ Lang[Type].tie }}</span>
+          <span>
+            {{
+              tableData.game_id == 1
+                ? tableData.price_tie_baccarat
+                : tableData.price_tie_dt
+            }}
+          </span>
+          <span>{{ tableData.limit_money_tie }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 1">
+          <span>{{ Lang[Type].p_banker }}</span>
+          <span>{{ tableData.price_pair }}</span>
+          <span>{{ tableData.limit_money_pair }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 1">
+          <span>{{ Lang[Type].p_player }}</span>
+          <span>{{ tableData.price_pair }}</span>
+          <span>{{ tableData.limit_money_pair }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 1">
+          <span>{{ Lang[Type].big }}</span>
+          <span>0.5</span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 1">
+          <span>{{ Lang[Type].small }}</span>
+          <span>1.5</span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+        <div class="list" v-if="tableData.game_id == 1">
+          <span>{{ Lang[Type].luckSix }}</span>
+          <span>12~20</span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+        <div
+          class="list"
+          v-if="
+            tableData.game_id == 4 ||
+            tableData.game_id == 5 ||
+            tableData.game_id == 6 ||
+            tableData.game_id == 7
+          "
+        >
+          <span>{{ Lang[Type].limit }}</span>
+          <span>1</span>
+          <span>{{ tableData.limit_money }}</span>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+import { computed } from "vue"
+import { useStore } from "vuex"
+export default {
+  name: "TableInfoPop",
+  props: {
+    tableData: {
+      type: [Object, String],
+      default: () => {}
+    }
+  },
+  setup(props) {
+    const store = useStore()
+    const showTableInfo = computed(() => store.state.config.showTableInfo)
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    console.log(props)
+    return {
+      Type,
+      Lang,
+      showTableInfo
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.table-info-pop {
+  position: absolute;
+  transform: rotateX(0deg);
+  z-index: 9999;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 9rem;
+  background: #fff;
+  font-size: 0.4rem;
+  color: #555;
+  overflow-y: auto;
+  .title {
+    font-weight: 600;
+    color: #2fa8fc;
+    line-height: 1;
+    margin-top: 0.6rem;
+    margin-bottom: 0.4rem;
+    border-left: 3px solid #2fa8fc;
+    padding-left: 5px;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .list {
+    font-size: 0.38rem;
+    padding-bottom: 0.2rem;
+    padding-left: 0.5rem;
+    padding-right: 0.8rem;
+  }
+  .table {
+    .top {
+      background: #e4eaed;
+      padding: 0.1rem 0.3rem;
+      box-sizing: border-box;
+      margin-bottom: 0.2rem;
+      margin-left: 0.2rem;
+      margin-right: 0.2rem;
+      span:last-child {
+        text-align: center !important;
+      }
+    }
+    .list {
+      display: flex;
+      justify-content: space-between;
+      span:first-child {
+        width: 1rem;
+      }
+      span:nth-child(2) {
+        text-align: center;
+        min-width: 3rem;
+      }
+      span:last-child {
+        width: 2.2rem;
+        text-align: right;
+      }
+    }
+  }
+}
+</style>

src/components/TableList.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="tableList">
+    <div class="tabs">
+      <span class="li" :class="{ active: game_id == 1 }" @click="game_id = 1">
+        {{ $lang[$Type].Baccarat }}
+      </span>
+      <span class="li" :class="{ active: game_id == 2 }" @click="game_id = 2">
+        {{ $lang[$Type].DragonTiger }}
+      </span>
+      <span class="li" :class="{ active: game_id == 4 }" @click="game_id = 4">
+        {{ $lang[$Type].NN }}
+      </span>
+
+      <span class="li" :class="{ active: game_id == 5 }" @click="game_id = 5">
+        {{ $lang[$Type].ThreeCard }}
+      </span>
+
+      <span class="li" :class="{ active: game_id == 6 }" @click="game_id = 6">
+        {{ $lang[$Type].Toning }}
+      </span>
+      <span class="li" :class="{ active: game_id == 7 }" @click="game_id = 7">
+        {{ $lang[$Type].Dice }}
+      </span>
+      <!--
+      <span class="li" :class="{ active: game_id == 8 }" @click="game_id = 8">
+        {{ $lang[$Type].roulette }}
+      </span>
+	  -->
+    </div>
+    <div class="view">
+      <div
+        class="list animate__animated animate__fadeIn"
+        v-for="(item, index) in tabData"
+        :key="index"
+        @click="goPath(item)"
+      >
+        <div class="left">
+          <div class="hd">
+            <div class="name">{{ item.table_name }}</div>
+            <div class="lable">{{ item.spec_type }}</div>
+            <div class="sate flex">
+              <span>
+                {{ getSendMode(item.sendMode) }}
+              </span>
+              <div class="result" v-html="getTextVal(item)"></div>
+            </div>
+          </div>
+          <van-progress
+            :percentage="
+              item.sendMode == 'startBetCountDown'
+                ? (item.count_down / item.wait_time) * 100
+                : 0
+            "
+            stroke-width="2.5"
+            :show-pivot="false"
+          />
+          <div class="bd">
+            <WayBox
+              wayType="allway"
+              :data="item"
+              :index="index"
+              routerName="allway"
+            ></WayBox>
+          </div>
+        </div>
+      </div>
+      <van-empty
+        v-if="tabData.length == 0"
+        :description="$lang[$Type].no_data"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex"
+import WayBox from "@/components/WayBox.vue"
+export default {
+  props: {
+    tabInfo: Object,
+    default: {
+      game_id: 1,
+      table_id: null
+    }
+  },
+  name: "TableList",
+  data() {
+    return {
+      game_id: 1
+    }
+  },
+  components: { WayBox },
+  mounted() {
+    setTimeout(() => {
+      this.game_id = this.tabInfo.game_id
+    }, 100)
+  },
+  computed: {
+    ...mapState({
+      $Type: (state) => state.config.$Type,
+      $lang: (state) => state.config.$lang,
+      font: (state) => state.config.fonstSize,
+      userInfo: (state) => state.app.userInfo
+    }),
+    tabData() {
+      let data = []
+      const list = this.$store.state.app.allTableData
+      if (list.length > 0) {
+        data = list.filter((v) => v.game_id == this.game_id)
+      }
+      return data
+    }
+  },
+  methods: {
+    getSendMode(sendMode) {
+      let text = ""
+      switch (sendMode) {
+        case "changeBoot":
+          text = this.$lang[this.$Type].changeBoot
+          break
+        case "resetBoot":
+          text = this.$lang[this.$Type].resetBoot
+          break
+        case "startBet":
+          text = this.$lang[this.$Type].startBet
+          break
+        case "startRobCountDown":
+          text = this.$lang[this.$Type].startRobCountDown
+          break
+        case "startBetCountDown":
+          text = this.$lang[this.$Type].startBetCountDown
+          break
+        case "endBet":
+          text = this.$lang[this.$Type].endBet
+          break
+        case "sendScanResult":
+          text = this.$lang[this.$Type].sendScanResult
+          break
+        case "openingBaccaratResult":
+        case "openingDtResult":
+        case "openingNnResult":
+        case "openingTcResult":
+          text = this.$lang[this.$Type].Insettlement
+
+          break
+        default:
+          text = ""
+      }
+      return text
+    },
+    getTextVal(data) {
+      let html = ""
+      if (data.sendMode == "startBetCountDown") {
+        html = `<span class="palyer">${data.count_down}</span>`
+      } else if (data.sendMode == "openingBaccaratResult") {
+        if (data.round.opening == 1) {
+          html = `<span class="banker">${this.$lang[this.$Type].banker}</span>`
+        } else if (data.round.opening == 2) {
+          html = `<span class="palyer">${this.$lang[this.$Type].player}</span>`
+        } else if (data.round.opening == 3) {
+          html = `<span class="tie">${this.$lang[this.$Type].tie}</span>`
+        }
+      } else if (data.sendMode == "openingDtResult") {
+        if (data.round.opening == 1) {
+          html = `<span class="banker">${this.$lang[this.$Type].dragon}</span>`
+        } else if (data.round.opening == 2) {
+          html = `<span class="palyer">${this.$lang[this.$Type].tiger}</span>`
+        } else if (data.round.opening == 3) {
+          html = `<span class="tie">${this.$lang[this.$Type].tie}</span>`
+        }
+      } else if (
+        data.sendMode == "openingNnResult" ||
+        data.sendMode == "openingTcResult"
+      ) {
+        let text = ""
+        if (
+          data.round.win_player_1 == 0 &&
+          data.round.win_player_2 == 0 &&
+          data.round.win_player_3 == 0
+        ) {
+          text = this.$lang[this.$Type].banker
+        } else {
+          if (data.round.win_player_1 == 1) {
+            text = text + this.$lang[this.$Type].player1
+          }
+          if (data.round.win_player_2 == 1) {
+            text = text + this.$lang[this.$Type].player2
+          }
+          if (data.round.win_player_3 == 1) {
+            text = text + this.$lang[this.$Type].player3
+          }
+        }
+        html = `<span class="tie">${text}</span>`
+      }
+      return html
+    },
+    goPath(item) {
+      this.$emit("close")
+      this.$router.replace({ name: "play", query: { id: item.id } })
+    }
+  },
+
+  watch: {}
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$dark-bg: #0d0d0d;
+$dark-bg-secondary: #1a1a1a;
+$card-bg: #1e1e1e;
+$border-color: #333;
+$gold: #c5a059;
+$text-primary: #ffffff;
+$text-secondary: #888888;
+
+.tableList {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: $dark-bg-secondary;
+  .tabs {
+    display: flex;
+    font-size: 0.45rem;
+    font-weight: 600;
+    align-items: center;
+    justify-content: space-between;
+    color: $text-secondary;
+    padding: 0 0.5rem;
+    padding-bottom: 2px;
+    .li {
+      padding: 0.2rem 0;
+      &.active {
+        color: $gold;
+        border-bottom: 2px solid $gold;
+      }
+    }
+  }
+  .view {
+    overflow-y: auto;
+    height: calc(100% - 1rem);
+    padding: 0 0.5rem;
+  }
+  .list {
+    width: 100%;
+    font-size: 13px;
+    margin-top: 15px;
+    box-shadow: 0px 0px 4px 0.5px rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+    padding: 0 10px 10px 10px;
+    box-sizing: border-box;
+    color: $text-primary;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: $card-bg;
+    border: 1px solid $border-color;
+    &:last-child {
+      margin-bottom: 20px;
+    }
+    .hd {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px 0;
+      .name {
+        font-weight: 600;
+      }
+      .lable {
+        line-height: 1;
+        padding: 2px 4px;
+        font-weight: 600;
+        color: #000;
+        font-size: 10px;
+        border-radius: 2px;
+        background: linear-gradient(135deg, $gold 0%, #d4af37 100%);
+      }
+      .tip {
+        font-weight: bold;
+        background-image: linear-gradient(90deg, $gold 0%, #d4af37 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .sate {
+        align-items: center;
+        color: $text-secondary;
+      }
+      .result {
+        padding-left: 5px;
+        font-weight: 600;
+      }
+    }
+    .bd {
+      background: $card-bg;
+      display: flex;
+      width: 100%;
+      margin-top: 2px;
+      height: 4.2rem;
+    }
+    .ft {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px 0;
+      font-size: 12px;
+      .left {
+        font-weight: bold;
+        color: $text-secondary;
+        .num {
+          margin: 0 10px 0 4px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/ToningResult.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="toning-result">
+    <template v-if="sendMode == 'openingToningResult'">
+      <div class="text">
+        {{
+          result == 1 || result == 3
+            ? Lang[Type].odd
+            : result == 0 || result == 2 || result == 4
+            ? Lang[Type].even
+            : ""
+        }}
+      </div>
+      <span class="round" :class="{ red: result == 3 || result == 4 }"></span>
+      <span class="round" :class="{ red: result == 3 || result == 4 }"></span>
+      <span
+        class="round"
+        :class="{ red: result == 2 || result == 3 || result == 4 }"
+      ></span>
+      <span
+        class="round"
+        :class="[
+          { red: result == 1 || result == 2 || result == 4 },
+          { black: result == 0 || result == 3 }
+        ]"
+      >
+        {{ result }}
+      </span>
+      <div class="text">
+        {{
+          result == 0 || result == 1
+            ? Lang[Type].small
+            : result == 3 || result == 4
+            ? Lang[Type].big
+            : ""
+        }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex"
+export default {
+  name: "toningResult",
+  props: {
+    result: {
+      type: Number,
+      default: null
+    },
+    sendMode: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    ...mapState({
+      Lang: (state) => state.config.$lang,
+      Type: (state) => state.config.$Type
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+.toning-result {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotateX(0deg);
+  .text {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0.2rem;
+    color: #ddd;
+  }
+  .round {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 1rem;
+    background: #ddd;
+    margin: 0 0.3rem;
+    line-height: 1rem;
+    text-align: center;
+    font-size: 0.55rem;
+    font-weight: 600;
+    color: #fff;
+    &.black {
+      color: #222;
+    }
+    &.red {
+      background: #fe8365;
+    }
+  }
+}
+</style>

src/components/WayBox.vue

@@ -0,0 +1,757 @@
+<template>
+  <div class="way-box">
+    <template v-if="wayType != 'totle'">
+      <!-- <div class="dutch" v-if="wayType == 'bigway' && dutch">
+        <img class="pic" src="~@/assets/images/lady.png" alt="" />
+      </div> -->
+      <div class="way">
+        <canvas class="canvas" ref="refItem"></canvas>
+      </div>
+    </template>
+    <template v-else>
+      <div class="flex flex-1 flex-v">
+        <div class="totle">
+          <div class="lable">{{ Lang[Type].totalGame }}</div>
+          <div class="box">
+            <span v-if="data.game_id == 1" class="name">
+              {{ Lang[Type].p_banker }}：
+            </span>
+            <span v-if="data.game_id == 1" class="num">
+              {{ data.banker_pair_Count || 0 }}
+            </span>
+            <span v-if="data.game_id == 1" class="name">
+              {{ Lang[Type].p_player }}：
+            </span>
+            <span v-if="data.game_id == 1" class="num">
+              {{ data.player_pair_Count || 0 }}
+            </span>
+            <span class="name">{{ Lang[Type].game }}：</span>
+            <span class="num">{{ data.number_tab_number - 1 || 0 }}</span>
+          </div>
+        </div>
+        <div class="progress" v-if="data.game_id == 1 || data.game_id == 2">
+          <div class="item banker" :style="{ width: `${probability.banker}%` }">
+            <div class="box">
+              <span class="type">
+                <template v-if="data.game_id == 1">
+                  {{ Type == "cn" ? "庄" : Type == "tw" ? "莊" : "B" }}
+                </template>
+                <template v-if="data.game_id == 2">
+                  {{ Type == "cn" ? "龙" : Type == "tw" ? "龍" : "D" }}
+                </template>
+              </span>
+              <span class="num">{{ data.bankerCount }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.bankerNum }}%</span>
+            </div>
+          </div>
+          <div class="item palyer" :style="{ width: `${probability.palyer}%` }">
+            <div class="box">
+              <span class="type">
+                <template v-if="data.game_id == 1">
+                  {{ Type == "cn" ? "闲" : Type == "tw" ? "閒" : "P" }}
+                </template>
+                <template v-if="data.game_id == 2">
+                  {{ Type == "cn" ? "虎" : Type == "tw" ? "虎" : "T" }}
+                </template>
+              </span>
+              <span class="num">{{ data.playerCount }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.palyerNum }}%</span>
+            </div>
+          </div>
+          <div class="item tie" :style="{ width: `${probability.tie}%` }">
+            <div class="box">
+              <span class="type">
+                {{ Type == "cn" ? "和" : Type == "tw" ? "和" : "T" }}
+              </span>
+              <span class="num">{{ data.tieCount }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.tieNum }}%</span>
+            </div>
+          </div>
+        </div>
+        <!-- ==牛牛== -->
+        <div class="progress" v-if="data.game_id == 4 || data.game_id == 5">
+          <div
+            class="item banker"
+            :style="{ width: `${probability.player1}%` }"
+          >
+            <div class="box">
+              <span class="type">
+                {{ Type == "cn" ? "闲1" : Type == "tw" ? "閒1" : "P1" }}
+              </span>
+              <span class="num">{{ data.player_1_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.player1Num }}%</span>
+            </div>
+          </div>
+          <div
+            class="item palyer"
+            :style="{ width: `${probability.player2}%` }"
+          >
+            <div class="box">
+              <span class="type">
+                {{ Type == "cn" ? "闲2" : Type == "tw" ? "閒2" : "P2" }}
+              </span>
+              <span class="num">{{ data.player_2_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.player2Num }}%</span>
+            </div>
+          </div>
+          <div class="item tie" :style="{ width: `${probability.player3}%` }">
+            <div class="box">
+              <span class="type">
+                {{ Type == "cn" ? "闲3" : Type == "tw" ? "閒3" : "P3" }}
+              </span>
+              <span class="num">{{ data.player_3_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.player3Num }}%</span>
+            </div>
+          </div>
+        </div>
+        <!-- 色碟 -->
+        <div class="progress" v-if="data.game_id == 6">
+          <!-- 0 -->
+          <div
+            class="item black"
+            :style="{ width: `${probability.zero_count}%` }"
+          >
+            <div class="box">
+              <span class="type">0</span>
+              <span class="num">{{ data.count.zero_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.zeroNum }}%</span>
+            </div>
+          </div>
+          <!-- 1 -->
+          <div
+            class="item palyer toning"
+            :style="{ width: `${probability.one_count}%` }"
+          >
+            <div class="box">
+              <span class="type">1</span>
+              <span class="num">{{ data.count.one_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.oneNum }}%</span>
+            </div>
+          </div>
+          <!-- 2 -->
+          <div class="item tie" :style="{ width: `${probability.two_count}%` }">
+            <div class="box">
+              <span class="type">2</span>
+              <span class="num">{{ data.count.two_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.twoNum }}%</span>
+            </div>
+          </div>
+          <!-- 3 -->
+          <div
+            class="item yellow"
+            :style="{ width: `${probability.three_count}%` }"
+          >
+            <div class="box">
+              <span class="type">3</span>
+              <span class="num">{{ data.count.three_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.threeNum }}%</span>
+            </div>
+          </div>
+          <!-- 4 -->
+          <div
+            class="item banker"
+            :style="{ width: `${probability.four_count}%` }"
+          >
+            <div class="box">
+              <span class="type">4</span>
+              <span class="num">{{ data.count.four_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.fourNum }}%</span>
+            </div>
+          </div>
+        </div>
+        <!-- 骰宝 -->
+        <div class="progress" v-if="data.game_id == 7">
+          <div
+            class="item banker"
+            :style="{ width: `${probability.big_count}%` }"
+          >
+            <div class="box">
+              <span class="type">{{ Lang[Type].big }}</span>
+              <span class="num">{{ data.count.big_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.bigNum }}%</span>
+            </div>
+          </div>
+          <div
+            class="item palyer"
+            :style="{ width: `${probability.small_count}%` }"
+          >
+            <div class="box">
+              <span class="type">{{ Lang[Type].small }}</span>
+              <span class="num">{{ data.count.small_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.smallNum }}%</span>
+            </div>
+          </div>
+          <div
+            class="item tie"
+            :style="{ width: `${probability.leopard_count}%` }"
+          >
+            <div class="box">
+              <span class="type">{{ Lang[Type].wai }}</span>
+              <span class="num">{{ data.count.leopard_count }}</span>
+            </div>
+            <div class="bar">
+              <span>{{ probability.leopardNum }}%</span>
+            </div>
+          </div>
+        </div>
+        <!-- 轮盘 -->
+        <div class="progress" v-if="data.game_id == 8"></div>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import { ref, watch, nextTick, computed } from "vue"
+import { useStore } from "vuex"
+import {
+  Waybill,
+  WaybillbigRoad,
+  NNcanvas,
+  ToningWaybill,
+  DiceWaybill,
+  RouletteWaybill
+} from "@/assets/js/waybill.js"
+export default {
+  components: {},
+  props: {
+    dutch: {
+      type: Boolean,
+      default: true
+    },
+    wayType: {
+      type: String,
+      default: "allway"
+    },
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    routerName: {
+      type: String,
+      default: "allway"
+    }
+  },
+  setup(props) {
+    const store = useStore()
+    const refItem = ref(null)
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    const timeStamp = computed(() => store.state.config.timeStamp)
+    const probability = computed(() => {
+      const tabData = props.data
+      const totle = tabData.number_tab_number - 1
+      // console.log(tabData)
+      let data = {}
+      if (tabData.game_id == 1 || tabData.game_id == 2) {
+        data.banker = totle ? parseInt((tabData.bankerCount / totle) * 100) : 0
+        data.tie = totle ? parseInt((tabData.tieCount / totle) * 100) : 0
+        data.palyer = totle ? parseInt((tabData.playerCount / totle) * 100) : 0
+        data.bankerNum = data.banker
+        data.tieNum = data.tie
+        data.palyerNum = data.palyer
+      } else if (tabData.game_id == 4 || tabData.game_id == 5) {
+        data.player1 = totle
+          ? parseInt((tabData.player_1_count / totle) * 100)
+          : 0
+        data.player2 = totle
+          ? parseInt((tabData.player_2_count / totle) * 100)
+          : 0
+        data.player3 = totle
+          ? parseInt((tabData.player_3_count / totle) * 100)
+          : 0
+        data.player1Num = data.player1
+        data.player2Num = data.player2
+        data.player3Num = data.player3
+      } else if (tabData.game_id == 6) {
+        try {
+          data.zero_count = totle
+            ? parseInt((tabData.count.zero_count / totle) * 100)
+            : 0
+          data.one_count = totle
+            ? parseInt((tabData.count.one_count / totle) * 100)
+            : 0
+          data.two_count = totle
+            ? parseInt((tabData.count.two_count / totle) * 100)
+            : 0
+          data.three_count = totle
+            ? parseInt((tabData.count.three_count / totle) * 100)
+            : 0
+          data.four_count = totle
+            ? parseInt((tabData.count.four_count / totle) * 100)
+            : 0
+          data.zeroNum = data.zero_count
+          data.oneNum = data.one_count
+          data.twoNum = data.two_count
+          data.threeNum = data.three_count
+          data.fourNum = data.four_count
+        } catch (err) {
+          console.log(err)
+        }
+      } else if (tabData.game_id == 7) {
+        try {
+          data.big_count = totle
+            ? parseInt((tabData.count.big_count / totle) * 100)
+            : 0
+          data.leopard_count = totle
+            ? parseInt((tabData.count.leopard_count / totle) * 100)
+            : 0
+          data.small_count = totle
+            ? parseInt((tabData.count.small_count / totle) * 100)
+            : 0
+          data.bigNum = data.big_count
+          data.leopardNum = data.leopard_count
+          data.smallNum = data.small_count
+        } catch (err) {
+          console.log(err)
+        }
+      }
+      if (data.player1 == 0 && data.player2 == 0 && data.player3 == 0) {
+        data.player1 = 33
+        data.player2 = 33
+        data.player3 = 33
+      }
+      if (data.banker == 0 && data.tie == 0 && data.palyer == 0) {
+        data.banker = 33
+        data.tie = 33
+        data.palyer = 33
+      }
+      if (
+        data.big_count == 0 &&
+        data.leopard_count == 0 &&
+        data.small_count == 0
+      ) {
+        data.big_count = 33
+        data.leopard_count = 33
+        data.small_count = 33
+      }
+      if (
+        data.zero_count == 0 &&
+        data.one_count == 0 &&
+        data.two_count == 0 &&
+        data.four_count == 0
+      ) {
+        data.zero_count = 20
+        data.one_count = 20
+        data.two_count = 20
+        data.three_count = 20
+        data.four_count = 20
+      }
+      return data
+    })
+
+    watch(
+      () => [props.data.ludan, props.wayType, timeStamp.value, Type.value],
+      ([data, type]) => {
+        const waybill = data?.waybill || {
+          showRoad: [],
+          bigRoad: [],
+          bigEyeRoad: [],
+          pathway: [],
+          roach: [],
+          sanxingRoad: [],
+          bigRoadBS: [],
+          bigRoadSP: []
+        }
+        const {
+          showRoad = [],
+          bigRoad = [],
+          bigEyeRoad = [],
+          pathway = [],
+          roach = [],
+          sanxingRoad = [],
+          bigRoadBS = [],
+          bigRoadSP = []
+        } = waybill
+
+        let Ludan = []
+        if (props.data.game_id == 4 || props.data.game_id == 5) {
+          Ludan = data || { waybill: [] }
+        } else {
+          Ludan = {
+            showRoad,
+            bigRoad,
+            bigEyeRoad,
+            pathway,
+            roach,
+            sanxingRoad,
+            bigRoadBS,
+            bigRoadSP
+          }
+        }
+        nextTick(() => {
+          switch (type) {
+            case "bigway":
+            case "allway":
+              resizeCanvas(
+                {
+                  game_id: props.data.game_id,
+                  ludan: Ludan
+                },
+                refItem.value,
+                type
+              )
+              break
+            case "totle":
+              break
+          }
+        })
+      },
+      { immediate: true, deep: true }
+    )
+    // 路单配置
+    const resizeCanvas = (data, canvas, type) => {
+      const getPixelRatio = (context) => {
+        const backingStore =
+          context.backingStorePixelRatio ||
+          context.webkitBackingStorePixelRatio ||
+          context.mozBackingStorePixelRatio ||
+          context.msBackingStorePixelRatio ||
+          context.oBackingStorePixelRatio ||
+          context.backingStorePixelRatio ||
+          1
+        return (window.devicePixelRatio || 1) / backingStore
+      }
+      const ctb = canvas.getContext("2d"),
+        dpr = getPixelRatio(ctb),
+        height = canvas.clientHeight,
+        width = canvas.clientWidth
+
+      let rows, cols, unit, path
+      if (data.game_id == 1 || data.game_id == 2) {
+        rows = 6
+        unit = parseInt(height / rows) * dpr
+        cols = parseInt(width / (unit / dpr))
+
+        if (cols % 2 != 0) {
+          cols = cols - 1
+        }
+
+        path = false
+        var ask = false,
+          askroad = false
+
+        canvas.setAttribute("width", unit * cols)
+        canvas.setAttribute("height", unit * rows)
+        if (type == "bigway") {
+          path = data.ludan?.bigRoad || []
+          WaybillbigRoad(
+            ctb,
+            unit,
+            rows,
+            cols,
+            path,
+            data.game_id,
+            ask,
+            askroad
+          )
+        } else {
+          path = data.ludan
+          Waybill(ctb, unit, rows, cols, path, data.game_id, ask, askroad)
+        }
+      } else if (data.game_id == 4 || data.game_id == 5) {
+        rows = 4
+        const unit_y = (height / rows) * dpr,
+          unit_x = unit_y * 1.05
+        cols = parseInt(width / (unit_x / dpr))
+        path = false
+        canvas.setAttribute("width", unit_x * cols)
+        canvas.setAttribute("height", unit_y * rows)
+        if (data.ludan.waybill) {
+          path = data.ludan.waybill
+        }
+        NNcanvas(data.game_id, ctb, unit_x, unit_y, rows, cols, path)
+      } else if (data.game_id == 6) {
+        rows = 6
+        unit = parseInt(height / rows) * dpr
+        cols = parseInt(width / (unit / dpr))
+        if (cols % 2 != 0) {
+          cols = cols - 1
+        }
+        path = false
+        canvas.setAttribute("width", unit * cols)
+        canvas.setAttribute("height", unit * rows)
+        path = data.ludan
+        let billnumber = 2,
+          showBigWay = false
+        if (type == "bigway") {
+          billnumber = 1
+          showBigWay = true
+        }
+        path = data.ludan
+        ToningWaybill(
+          ctb,
+          unit,
+          rows,
+          cols,
+          path,
+          data.game_id,
+          billnumber,
+          showBigWay
+        )
+      } else if (data.game_id == 7) {
+        rows = 6
+        const unit = (height / rows) * dpr,
+          cols = parseInt(width / (unit / dpr))
+        path = false
+        canvas.setAttribute("width", unit * cols)
+        canvas.setAttribute("height", unit * rows)
+        if (data.ludan) {
+          path = data.ludan
+        }
+        DiceWaybill(ctb, unit, rows, cols, path)
+      } else if (data.game_id == 8) {
+        rows = 6
+        const unit = (height / rows) * dpr,
+          cols = parseInt(width / (unit / dpr))
+        path = false
+        canvas.setAttribute("width", unit * cols)
+        canvas.setAttribute("height", unit * rows)
+        if (data.ludan) {
+          path = data.ludan
+        }
+        RouletteWaybill(ctb, unit, rows, cols, path)
+      }
+    }
+    return {
+      Type,
+      Lang,
+      probability,
+      refItem
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.way-box {
+  background: #fff;
+  display: flex;
+  width: 100%;
+  height: 4.2rem;
+  .dutch {
+    width: 3.32rem;
+    height: 4.2rem;
+    background: url("~@/assets/images/dutch_bg.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 4px;
+    .pic {
+      width: 96%;
+    }
+  }
+  .way {
+    flex: 1;
+  }
+  canvas {
+    width: 100%;
+    height: 4.2rem;
+    display: block;
+    // border: 1px solid #deded9;
+    box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.1);
+  }
+  .totle {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 0;
+    .lable {
+      color: #66696d;
+      font-weight: bold;
+      position: relative;
+      padding-left: 6px;
+      font-size: 12px;
+
+      &::before {
+        content: "";
+        border-left: 3px solid #66696d;
+        height: 10px;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -5px;
+        border-radius: 2px;
+      }
+    }
+    .box {
+      display: flex;
+      align-items: center;
+      .name {
+        padding-left: 10px;
+        color: #a9abad;
+      }
+      .num {
+        color: #8e9092;
+      }
+    }
+  }
+  .progress {
+    width: 100%;
+    flex: 1;
+    background: #f5f7fa;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    padding: 0 5px;
+    .item {
+      min-width: 40px;
+      .box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        .type {
+          border-radius: 20px;
+          width: 20px;
+          height: 20px;
+          font-size: 10px;
+          line-height: 20px;
+          overflow: hidden;
+          &::after {
+            display: none;
+          }
+          &::before {
+            display: none;
+          }
+        }
+        .num {
+          padding-left: 8px;
+          font-size: 12px;
+          line-height: 1;
+        }
+      }
+      .bar {
+        border-radius: 20px;
+        margin-top: 10px;
+        position: relative;
+        span {
+          position: relative;
+          z-index: 10;
+        }
+      }
+      &.banker {
+        .type,
+        .bar {
+          background: linear-gradient(180deg, #f75848 0%, #f0473c 100%);
+          color: #fff;
+        }
+      }
+      &.palyer {
+        .type,
+        .bar {
+          background: linear-gradient(180deg, #3e9cfb 0%, #348df7 100%);
+          color: #fff;
+        }
+        .bar {
+          &::before {
+            content: "";
+            position: absolute;
+            height: 100%;
+            left: -10px;
+            width: 20px;
+            background: url("~@/assets/images/red_blue.png") no-repeat;
+            background-size: 100% 100%;
+            z-index: 9;
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            height: 100%;
+            right: -10px;
+            width: 20px;
+            background: url("~@/assets/images/blue_green.png") no-repeat;
+            background-size: 100% 100%;
+            z-index: 9;
+          }
+        }
+        &.toning {
+          .bar::before {
+            display: none;
+          }
+        }
+      }
+      &.tie {
+        .type,
+        .bar {
+          background: linear-gradient(180deg, #6cbc54 0%, #4aae34 100%);
+          color: #fff;
+        }
+      }
+      &.yellow {
+        .type,
+        .bar {
+          background: linear-gradient(180deg, #ffc53b 0%, #ffb120 100%);
+          color: #fff;
+        }
+        .bar {
+          &::before {
+            content: "";
+            position: absolute;
+            height: 100%;
+            left: -10px;
+            width: 20px;
+            background: url("~@/assets/images/blue_yellow.png") no-repeat;
+            background-size: 100% 100%;
+            z-index: 9;
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            height: 100%;
+            right: -10px;
+            width: 20px;
+            background: url("~@/assets/images/yellow_red.png") no-repeat;
+            background-size: 100% 100%;
+            z-index: 9;
+          }
+        }
+      }
+      &.black {
+        .type,
+        .bar {
+          background: linear-gradient(180deg, #626262 0%, #525252 100%);
+          color: #fff;
+          &::after {
+            content: "";
+            position: absolute;
+            height: 100%;
+            right: -10px;
+            width: 20px;
+            background: url("~@/assets/images/black_blue.png") no-repeat;
+            background-size: 100% 100%;
+            z-index: 9;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/aPlayer.vue

@@ -0,0 +1,181 @@
+<template>
+  <div id="aPlayer"></div>
+</template>
+<script>
+/* eslint-disable */
+import APlayer from "aplayer"
+import { nextTick, onMounted, computed, watch } from "vue"
+import { getAppMusic } from "@/utils/api"
+import { useStore } from "vuex"
+export default {
+  name: "confirmBet",
+  components: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => ({
+        show: false
+      })
+    }
+  },
+  setup() {
+    const store = useStore()
+    const musicVolume = computed(() => store.state.config.musicVolume)
+    const volume = computed(() => store.state.config.volume)
+    let player = null
+    onMounted(() => {
+      nextTick(() => {
+        // const list = [
+        //   {
+        //     name: "We Can’t Stop", //歌名
+        //     artist: "Miley Cyrus - Berlin Tag Und Nacht Vol.4", //歌手
+        //     url: require("../assets/mp3/2023520.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/2023520.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Peter Pan Was Right", //歌名
+        //     artist: "Anson Seabra - Peter Pan Was Right", //歌手
+        //     url: require("../assets/mp3/4138042894.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/4138042894.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Shape of You", //歌名
+        //     artist: "Ed Sheeran - Shape of You", //歌手
+        //     url: require("../assets/mp3/3197545262.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/3197545262.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Unstoppable", //歌名
+        //     artist: "Sia - This Is Acting (Deluxe Version)", //歌手
+        //     url: require("../assets/mp3/6005971CUY6.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/6005971CUY6.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Bones", //歌名
+        //     artist: "Imagine Dragons - Bones", //歌手
+        //     url: require("../assets/mp3/680637476.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/680637476.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Someone Like You", //歌名
+        //     artist: "Adele - 21 (Explicit)", //歌手
+        //     url: require("../assets/mp3/2591806824.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/2591806824.webp"), //音乐封面地址
+        //     lrc: ""
+        //   }
+        // ]
+
+        // 音乐文件
+        getAppMusic("/music.json")
+          .then((res) => {
+            if (res.list && res.list.length > 0) {
+              init(res.list)
+            } else {
+              console.warn("音乐列表文件不存在")
+            }
+          })
+          .catch((err) => {
+            console.log(err)
+          })
+      })
+    })
+    const init = (list) => {
+      player = new APlayer({
+        container: document.getElementById("aPlayer"),
+        mini: false,
+        audio: list,
+        listFolded: false,
+        listMaxHeight: "8rem"
+      })
+      store.commit("app/musicPlayer", player)
+      player.on("play", function () {
+        if (musicVolume.value == false) {
+          store.commit("config/setValue", {
+            name: "musicVolume",
+            type: true
+          })
+        }
+      })
+      player.on("pause", function () {
+        if (musicVolume.value == true) {
+          // console.log("pause")
+          store.commit("config/setValue", {
+            name: "musicVolume",
+            type: false
+          })
+        }
+      })
+      player.pause()
+      player.play()
+    }
+    watch(
+      () => [musicVolume.value],
+      ([type]) => {
+        if (player) {
+          nextTick(() => {
+            if (type) {
+              player.volume(volume.value.music / 100, true)
+              player.play()
+            } else {
+              player.volume(volume.value.music / 100, false)
+              player.pause()
+            }
+          })
+        }
+      },
+      { deep: true }
+    )
+    watch(
+      () => [volume.value.music],
+      ([value]) => {
+        if (player) {
+          nextTick(() => {
+            player.volume(value / 100, true)
+          })
+        }
+      },
+      { immediate: true, deep: true }
+    )
+  }
+}
+</script>
+<style lang="scss">
+@import "APlayer/dist/APlayer.min";
+.aplayer {
+  transform: rotateX(0deg);
+}
+.aplayer .aplayer-icon {
+  width: 22px;
+  height: 22px;
+  margin: 0 4px;
+}
+.aplayer-controller {
+  align-items: center;
+}
+.aplayer.aplayer-arrow .aplayer-icon-loop,
+.aplayer.aplayer-arrow .aplayer-icon-order {
+  display: inline-block;
+}
+.aplayer .aplayer-icon-volume-down {
+  display: none;
+}
+.aplayer .aplayer-info .aplayer-music {
+  line-height: 20px;
+  display: flex;
+  margin-bottom: 10px;
+  width: calc(100% - 40px);
+  span:last-child {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .aplayer-title {
+    padding-right: 10px;
+  }
+}
+</style>

src/components/chipView.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="chip-view" :class="{ win }">
+    <transition-group
+      class="chip-box"
+      tag="ul"
+      enter-from-class="chip-enter-from"
+      leave-to-class="chip-leave-to"
+    >
+      <li
+        class="box"
+        v-for="(item, index) in list"
+        :key="`${item.key}_${index}`"
+        :style="{
+          top: item.y,
+          left: item.x
+        }"
+      >
+        <i class="chip" :class="[item.key, item.type]"></i>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "chipView",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    win: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup() {}
+}
+</script>
+<style lang="scss" scoped>
+.chip-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  &:active {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  &.win {
+    background-color: rgba(255, 235, 59, 0.25);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-name: breathe;
+    -webkit-animation-duration: 0.5s;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-direction: alternate;
+  }
+  .chip-box {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    .box {
+      width: 0.69 * 1.35rem;
+      height: 0.55 * 1.35rem;
+      position: absolute;
+      transition: 0.5s all;
+    }
+    .chip {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}
+// /* 进场的瞬间与离场的效果添加 */
+.chip-enter-from {
+  opacity: 0;
+  transform: translateX(-1000px) scale(2);
+}
+.chip-leave-to {
+  opacity: 0;
+  transform: translateX(-1000px) scale(1);
+}
+</style>

src/components/confirmBet.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="touch-view" :class="{ pointer: !data.show }">
+    <div class="btn-box" v-if="data.show">
+      <span class="cancel btn" @click.stop="cancel"></span>
+      <span class="confirm btn" @click.stop="confirm"></span>
+    </div>
+    <div
+      class="num"
+      :style="{ marginTop: data.show ? `0` : `1rem` }"
+      v-show="data.money > 0"
+    >
+      {{ data.money }}
+      {{
+        data.times
+          ? `${Lang[Type].withhold}${data.money * (data.game_id == 4 ? 4 : 19)}`
+          : ""
+      }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue"
+import { useStore } from "vuex"
+export default {
+  name: "confirmBet",
+  components: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => ({
+        money: 0,
+        show: false,
+        times: false,
+        game_id: 4
+      })
+    }
+  },
+  setup(props, { emit }) {
+    const store = useStore()
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    // 确认下注
+    const confirm = () => {
+      emit("confirm")
+    }
+    // 取消下注
+    const cancel = () => {
+      emit("cancel")
+    }
+    return {
+      Type,
+      Lang,
+      confirm,
+      cancel,
+      props
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$gold: #c5a059;
+
+.pointer {
+  pointer-events: none;
+}
+.touch-view {
+  position: absolute;
+  width: 2 * 1.35rem;
+  z-index: 99;
+  left: 50%;
+  bottom: 80%;
+  transform: translateX(-50%);
+  text-align: center;
+  height: 1rem;
+  .num {
+    background: rgba(197, 160, 89, 0.9);
+    border-radius: 1rem;
+    color: #000;
+    font-size: 0.4rem;
+    padding: 0.02rem 0.05rem;
+    border: 1px solid $gold;
+    pointer-events: none;
+    font-weight: 600;
+  }
+  .btn-box {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0.05rem;
+    .btn {
+      width: 0.95 * 1.35rem;
+      height: 0.95 * 1.35rem;
+      background: url("~@/assets/images/sprite_btn.png");
+      background-size: 2.2 * 1.35rem auto;
+      &.cancel {
+        background-position: -0.07 * 1.35rem -0.04 * 1.35rem;
+        &:active {
+          background-position: -1.18 * 1.35rem -0.04 * 1.35rem;
+        }
+      }
+      &.confirm {
+        margin-left: 0.1rem;
+        background-position: -0.05 * 1.35rem -1.14 * 1.35rem;
+        &:active {
+          background-position: -1.17 * 1.35rem -1.13 * 1.35rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/floatBtn.vue

@@ -0,0 +1,166 @@
+<template>
+  <div
+    class="floatBtn portrait"
+    @click="back"
+    :class="[{ moveBtn: longClick }]"
+    @touchstart="touchstart($event)"
+    @touchmove="touchMove($event)"
+    @touchend="touchEnd($event)"
+  >
+    <span v-if="Type && Lang && Lang[Type]">{{ Lang[Type].Back }}</span>
+  </div>
+</template>
+<script>
+import store from "@/store"
+export default {
+  data() {
+    return {
+      timeOutEvent: 0,
+      longClick: 0,
+      // 手指原始位置
+      oldMousePos: {},
+      // 元素原始位置
+      oldNodePos: {},
+      btnType: "right"
+    }
+  },
+  computed: {
+    Lang() {
+      return store.state.config.$lang
+    },
+    Type() {
+      return store.state.config.$Type
+    }
+  },
+  methods: {
+    touchstart(ev) {
+      // 定时器控制长按时间，超过500毫秒开始进行拖拽
+      this.timeOutEvent = setTimeout(() => {
+        this.longClick = 1
+      }, 500)
+      const selectDom = ev.currentTarget
+      const { pageX, pageY } = ev.touches[0] // 手指位置
+      const { offsetLeft, offsetTop } = selectDom // 元素位置
+      // 手指原始位置
+      this.oldMousePos = {
+        x: pageX,
+        y: pageY
+      }
+      // 元素原始位置
+      this.oldNodePos = {
+        x: offsetLeft,
+        y: offsetTop
+      }
+      selectDom.style.left = `${offsetLeft}px`
+      selectDom.style.top = `${offsetTop}px`
+    },
+    touchMove(ev) {
+      // 未达到500毫秒就移动则不触发长按，清空定时器
+      clearTimeout(this.timeOutEvent)
+      if (this.longClick === 1) {
+        const selectDom = ev.currentTarget
+        // x轴偏移量
+        const lefts = this.oldMousePos.x - this.oldNodePos.x
+        // y轴偏移量
+        const tops = this.oldMousePos.y - this.oldNodePos.y
+        const { pageX, pageY } = ev.touches[0] // 手指位置
+        selectDom.style.left = `${pageX - lefts}px`
+        selectDom.style.top = `${pageY - tops}px`
+      }
+    },
+    touchEnd(ev) {
+      // 清空定时器
+      clearTimeout(this.timeOutEvent)
+      if (this.longClick === 1) {
+        this.longClick = 0
+        const selectDom = ev.currentTarget
+        const { clientWidth, clientHeight } = document.documentElement
+        const { offsetLeft, offsetTop } = selectDom
+        if (offsetTop < -10) {
+          selectDom.style.top = "-10px"
+        } else if (offsetTop + 30 > clientHeight) {
+          selectDom.style.top = `${clientHeight - 30}px`
+        }
+
+        if (offsetLeft < -10) {
+          selectDom.style.left = "-10px"
+        } else if (offsetLeft + 30 > clientWidth) {
+          selectDom.style.left = `${clientWidth - 30}px`
+        }
+      }
+    },
+    back() {
+      // showConfirmDialog({
+      //   title: "提示",
+      //   message: "您确认要退出游戏？"
+      // })
+      //   .then(() => {
+      const protocol = document.location.protocol
+      const hostname = document.location.hostname
+      const port = document.location.port
+      let url = ""
+      if (port) {
+        url = `${protocol}//${hostname}:${port}`
+      } else {
+        url = `${protocol}//${hostname}`
+      }
+      window.location.href = url
+      // })
+      // .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin notSelect {
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+@mixin not-touch {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.floatBtn {
+  @include notSelect;
+  @include not-touch();
+  position: fixed;
+  overflow: hidden;
+  width: 40px;
+  left: 67%;
+  top: 4px;
+  color: #e0933a;
+  font-size: 12px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: rotateX(0deg);
+  z-index: 999;
+  border-radius: 50px;
+  font-weight: bold;
+  opacity: 0.8;
+  box-shadow: 0px 0px 4px 0.5px rgba(236, 197, 197, 0.5);
+  &:active {
+    box-shadow: 0px 0px 4px 0.5px rgba(236, 197, 197, 0.8);
+  }
+  &.moveBtn {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.8);
+    box-shadow: 0px 0px 4px 0.5px rgba(224, 147, 58, 0.7);
+  }
+  span {
+    white-space: nowrap;
+  }
+}
+</style>

src/components/setCamera.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="setcamera">
+    <h3 class="title">{{ Lang[Type].set_video }}</h3>
+    <div class="list">
+      <div class="lable">{{ Lang[Type].definition }}</div>
+      <div class="box">
+        <span
+          class="btn"
+          :class="{ active: info.definition == 1 }"
+          @click="updateVideo('definition', 1)"
+        >
+          {{ Lang[Type].HD }}
+        </span>
+        <span
+          class="btn"
+          :class="{ active: info.definition == 2 }"
+          @click="updateVideo('definition', 2)"
+        >
+          {{ Lang[Type].SD }}
+        </span>
+      </div>
+    </div>
+    <div class="list">
+      <div class="lable">{{ Lang[Type].line }}</div>
+      <div class="box">
+        <span
+          class="btn"
+          :class="{ active: info.line == 1 }"
+          @click="updateVideo('line', 1)"
+        >
+          {{ Lang[Type].line }}1
+        </span>
+        <span
+          class="btn"
+          :class="{ active: info.line == 2 }"
+          @click="updateVideo('line', 2)"
+        >
+          {{ Lang[Type].line }}2
+        </span>
+      </div>
+    </div>
+    <div class="list flex flex-align-center">
+      <div class="text">
+        {{ Lang[Type].video }}
+        {{ switchVideo ? Lang[Type].ON : Lang[Type].OFF }}
+      </div>
+      <van-switch v-model="switchVideo" @change="switchVideoFn" size="0.7rem" />
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex"
+export default {
+  name: "SwitchTab",
+  data() {
+    return {
+      switchVideo: true
+    }
+  },
+  created() {},
+  methods: {
+    switchVideoFn(type) {
+      this.$store.commit("config/switchVideo", type)
+    },
+    updateVideo(type, choose) {
+      this.$store.commit("config/updateVideo", { type, choose })
+    }
+  },
+  computed: {
+    ...mapState({
+      Lang: (state) => state.config.$lang,
+      Type: (state) => state.config.$Type,
+      userInfo: (state) => state.app.userInfo,
+      video: (state) => state.config.switchVideo,
+      info: (state) => state.config.video
+    })
+  },
+  watch: {
+    video: {
+      handler(state) {
+        if (state == true) {
+          this.switchVideo = true
+        } else {
+          this.switchVideo = false
+        }
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题配色 */
+$dark-bg: #0d0d0d;
+$dark-bg-secondary: #1a1a1a;
+$card-bg: #1e1e1e;
+$border-color: #333;
+$gold: #c5a059;
+$text-primary: #ffffff;
+$text-secondary: #888888;
+
+.setcamera {
+  width: 100%;
+  height: 100%;
+  background: $dark-bg-secondary;
+  overflow: hidden;
+  transform: rotateX(0deg);
+  .title {
+    margin: 0.6rem auto;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-align: center;
+    color: $gold;
+  }
+  .list {
+    padding: 0 0.5rem;
+    font-size: 0.55rem;
+    margin-top: 1rem;
+    color: $text-primary;
+    .lable {
+      padding-bottom: 0.4rem;
+    }
+    .text {
+      padding-right: 1rem;
+    }
+    .box {
+      display: flex;
+      width: 100%;
+      .btn {
+        color: $text-secondary;
+        border: 1px solid $border-color;
+        font-size: 0.45rem;
+        margin-right: 0.5rem;
+        width: 36%;
+        text-align: center;
+        padding: 0.25rem 0;
+        line-height: 1;
+        border-radius: 0.1rem;
+        background: $card-bg;
+        &.active {
+          color: $gold;
+          border-color: $gold;
+        }
+      }
+    }
+  }
+}
+</style>