BJ_Casino_Rank/src/components/BJ_Casino_Magnification.vue

<script setup lang="ts">
import { ref } from "vue";
import { BJ_Casino_Data } from "../script/BJ_Casino_Data";
import { BJ_Casino_Magnification } from "../script/BJ_Casino_Magnification";

const props = defineProps<{ BJ_Casino: BJ_Casino_Data }>()

let Title = ref("");
let RankData = ref([]);
const self = {
    Title: Title,
    RankData: RankData,
    BJ_Casino: props.BJ_Casino,
}
const Script = new BJ_Casino_Magnification(self);

</script>

<template>
    <h1>{{ Title }}</h1>
    <div class="d-flex justify-content-center">
        <table class="table table-striped table-info table-hover">
            <thead>
                <tr>
                    <th align="left">排名</th>
                    <th align="left">名稱</th>
                    <th align="left">倍率</th>
                    <th align="left">機台</th>
                    <th align="left">桌號</th>
                    <th align="left">日期</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="(item, index) in RankData" :key="index">
                    <td>
                        <font size="5"><b>{{ item[0] }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ item[2][1] }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ Math.floor(item[1]) }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ item[3][0] }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ item[3][1] }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ item[4] }}</b></font>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</template>