[mod] Style
This commit is contained in:
parent
8c025a073f
commit
02522af78c
@ -1,37 +1,64 @@
|
|||||||
.main {
|
.main {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
}
|
}
|
||||||
table {
|
|
||||||
border-spacing: 0;
|
.table {
|
||||||
width: 100%;
|
table-layout: fixed;
|
||||||
}
|
/* width: 100%; */
|
||||||
tr {
|
margin-bottom: 1rem;
|
||||||
text-align: center;
|
color: #888;
|
||||||
}
|
vertical-align: top;
|
||||||
th {
|
border-color: rgba(0, 0, 0, .05);
|
||||||
padding: 10px;
|
}
|
||||||
}
|
|
||||||
table tbody tr:nth-child(odd){
|
td {
|
||||||
background-color: #eee
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
table thead {
|
|
||||||
background-color: blue;
|
table {
|
||||||
color: white;
|
caption-side: bottom;
|
||||||
}
|
border-collapse: collapse;
|
||||||
table thead th:first-child {
|
}
|
||||||
border-radius: 5px 0 0 0;
|
|
||||||
border: 1px solid blue;
|
.table>tbody {
|
||||||
}
|
vertical-align: inherit;
|
||||||
table thead th:last-child {
|
}
|
||||||
border-radius: 0 5px 0 0;
|
|
||||||
border-right: 1px solid blue;
|
.table-info {
|
||||||
}
|
--bs-table-bg: #6cc3d5;
|
||||||
table tbody tr:last-child td:first-child {
|
--bs-table-striped-bg: #73c6d7;
|
||||||
border-radius: 0 0 0 5px;
|
--bs-table-striped-color: #fff;
|
||||||
}
|
--bs-table-active-bg: #7bc9d9;
|
||||||
|
--bs-table-active-color: #fff;
|
||||||
table tbody tr:last-child td:last-child {
|
--bs-table-hover-bg: #77c8d8;
|
||||||
border-radius: 0 0 5px 0;
|
--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;
|
||||||
|
}
|
@ -3,6 +3,7 @@ import { ref } from "vue";
|
|||||||
import '../assets/style.css';
|
import '../assets/style.css';
|
||||||
import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank";
|
import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank";
|
||||||
|
|
||||||
|
let Title = ref("BJ_Casino_Rank");
|
||||||
let div_Main = ref(null);
|
let div_Main = ref(null);
|
||||||
const self = {
|
const self = {
|
||||||
div_Main: div_Main
|
div_Main: div_Main
|
||||||
@ -11,5 +12,6 @@ const Script = new BJ_Casino_Rank(self);
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<h1>{{ Title }}</h1>
|
||||||
<div ref="div_Main"></div>
|
<div ref="div_Main"></div>
|
||||||
</template>
|
</template>
|
@ -123,7 +123,7 @@ export class BJ_Casino_Rank {
|
|||||||
let div_Main = this._client.div_Main;
|
let div_Main = this._client.div_Main;
|
||||||
let div_main_s = "";
|
let div_main_s = "";
|
||||||
div_main_s += `
|
div_main_s += `
|
||||||
<table>
|
<table class="table table-striped table-info table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
`;
|
`;
|
||||||
div_main_s += `<th>排名</th>`;
|
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 += `<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++) {
|
for (let i = 0; i < rankdata.length; i++) {
|
||||||
const data = rankdata[i];
|
const data = rankdata[i];
|
||||||
const rank = data[0];
|
const rank = data[0];
|
||||||
@ -140,18 +140,16 @@ export class BJ_Casino_Rank {
|
|||||||
const slot = data[3][0];
|
const slot = data[3][0];
|
||||||
const table = data[3][1];
|
const table = data[3][1];
|
||||||
div_main_s += `
|
div_main_s += `
|
||||||
<tbody>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><font size="5"><b>${rank}</b></font></td>
|
<td><font size="5"><b>${rank}</b></font></td>
|
||||||
<td><font size="5"><b>${name}</b></font></td>
|
<td align="left"><font size="5"><b>${name}</b></font></td>
|
||||||
<td><font size="5"><b>${magnification}</b></font></td>
|
<td align="left"><font size="5"><b>${magnification}</b></font></td>
|
||||||
<td><font size="5"><b>${slot}</b></font></td>
|
<td align="left"><font size="5"><b>${slot}</b></font></td>
|
||||||
<td><font size="5"><b>${table}</b></font></td>
|
<td align="left"><font size="5"><b>${table}</b></font></td>
|
||||||
<tr>
|
</tr>
|
||||||
</tbody>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
div_main_s += `</table>`;
|
div_main_s += `</tbody></table>`;
|
||||||
div_Main.value.innerHTML = div_main_s;
|
div_Main.value.innerHTML = div_main_s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user