From 02522af78c5da34e3945882ed8841e8e6ca76f25 Mon Sep 17 00:00:00 2001
From: JianMiau <bir840124@gmail.com>
Date: Sun, 10 Apr 2022 01:14:23 +0800
Subject: [PATCH] [mod] Style

---
 src/assets/style.css              | 95 ++++++++++++++++++++-----------
 src/components/BJ_Casino_Rank.vue |  2 +
 src/script/BJ_Casino_Rank.ts      | 18 +++---
 3 files changed, 71 insertions(+), 44 deletions(-)

diff --git a/src/assets/style.css b/src/assets/style.css
index a5687ee..c236a58 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -1,37 +1,64 @@
 .main {
     width: 80%;
     margin: 20px auto;
-  }
-  table {
-    border-spacing: 0;
-    width: 100%;
-  }
-  tr {
-    text-align: center;
-  }
-  th {
-    padding: 10px;
-  }
-  table tbody tr:nth-child(odd){
-    background-color: #eee
-  }
-  table thead {
-    background-color: blue;
-    color: white;
-  }
-  table thead th:first-child {
-    border-radius: 5px 0 0 0;
-    border: 1px solid blue;
-  }
-  table thead th:last-child {
-    border-radius: 0 5px 0 0;
-    border-right: 1px solid blue;
-  }
-  table tbody tr:last-child td:first-child {
-    border-radius: 0 0 0 5px;
-  }
-  
-  table tbody tr:last-child td:last-child {
-    border-radius: 0 0 5px 0;
-  }
-  
\ No newline at end of file
+}
+
+.table {
+    table-layout: fixed;
+    /* width: 100%; */
+    margin-bottom: 1rem;
+    color: #888;
+    vertical-align: top;
+    border-color: rgba(0, 0, 0, .05);
+}
+
+td {
+    white-space: nowrap;
+}
+
+table {
+    caption-side: bottom;
+    border-collapse: collapse;
+}
+
+.table>tbody {
+    vertical-align: inherit;
+}
+
+.table-info {
+    --bs-table-bg: #6cc3d5;
+    --bs-table-striped-bg: #73c6d7;
+    --bs-table-striped-color: #fff;
+    --bs-table-active-bg: #7bc9d9;
+    --bs-table-active-color: #fff;
+    --bs-table-hover-bg: #77c8d8;
+    --bs-table-hover-color: #fff;
+    color: #fff;
+    border-color: #7bc9d9;
+}
+
+.table>:not(caption)>*>* {
+    padding: .5rem .5rem;
+    background-color: var(--bs-table-bg);
+    border-bottom-width: 1px;
+    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}
+
+tbody,
+td,
+tfoot,
+th,
+thead,
+tr {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+}
+
+.table>thead {
+    vertical-align: bottom;
+}
+
+.table>:not(:first-child) {
+    border-top: 2px solid currentColor;
+}
\ No newline at end of file
diff --git a/src/components/BJ_Casino_Rank.vue b/src/components/BJ_Casino_Rank.vue
index baa07e5..fbf3e85 100644
--- a/src/components/BJ_Casino_Rank.vue
+++ b/src/components/BJ_Casino_Rank.vue
@@ -3,6 +3,7 @@ import { ref } from "vue";
 import '../assets/style.css';
 import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank";
 
+let Title = ref("BJ_Casino_Rank");
 let div_Main = ref(null);
 const self = {
     div_Main: div_Main
@@ -11,5 +12,6 @@ const Script = new BJ_Casino_Rank(self);
 </script>
 
 <template>
+    <h1>{{ Title }}</h1>
     <div ref="div_Main"></div>
 </template>
\ No newline at end of file
diff --git a/src/script/BJ_Casino_Rank.ts b/src/script/BJ_Casino_Rank.ts
index 714b050..d7fedef 100644
--- a/src/script/BJ_Casino_Rank.ts
+++ b/src/script/BJ_Casino_Rank.ts
@@ -123,7 +123,7 @@ export class BJ_Casino_Rank {
         let div_Main = this._client.div_Main;
         let div_main_s = "";
         div_main_s += `
-        <table>
+        <table class="table table-striped table-info table-hover">
         <thead>
         `;
         div_main_s += `<th>排名</th>`;
@@ -131,7 +131,7 @@ export class BJ_Casino_Rank {
         div_main_s += `<th>倍率</th>`;
         div_main_s += `<th>機台</th>`;
         div_main_s += `<th>桌號</th>`;
-        div_main_s += `</thead>`;
+        div_main_s += `</thead><tbody>`;
         for (let i = 0; i < rankdata.length; i++) {
             const data = rankdata[i];
             const rank = data[0];
@@ -140,18 +140,16 @@ export class BJ_Casino_Rank {
             const slot = data[3][0];
             const table = data[3][1];
             div_main_s += `
-                    <tbody>
                     <tr>
                     <td><font size="5"><b>${rank}</b></font></td>
-                    <td><font size="5"><b>${name}</b></font></td>
-                    <td><font size="5"><b>${magnification}</b></font></td>
-                    <td><font size="5"><b>${slot}</b></font></td>
-                    <td><font size="5"><b>${table}</b></font></td>
-                    <tr>
-                    </tbody>
+                    <td align="left"><font size="5"><b>${name}</b></font></td>
+                    <td align="left"><font size="5"><b>${magnification}</b></font></td>
+                    <td align="left"><font size="5"><b>${slot}</b></font></td>
+                    <td align="left"><font size="5"><b>${table}</b></font></td>
+                    </tr>
                     `;
         }
-        div_main_s += `</table>`;
+        div_main_s += `</tbody></table>`;
         div_Main.value.innerHTML = div_main_s;
     }