mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
update path url
This commit is contained in:
kamoa457
parent
e076eb8611
commit
18efc9a7d9
@ -12,7 +12,7 @@
|
||||
href="./assets/img/apple-icon.png"
|
||||
/>
|
||||
<link rel="icon" type="image/png" href="./src/assets/img/favicon.png" />
|
||||
<title>Vue Material Kit 2 by Creative Tim</title>
|
||||
<title>โปรแกรมทะเบียนบ้านพัก</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
||||
@ -26,6 +26,9 @@ import ElTypography from "../layouts/sections/elements/typography/TypographyView
|
||||
import RoomView from "../views/Restroom/RoomView.vue"
|
||||
import DetailRoom from "../views/Restroom/DetailRoomPage.vue"
|
||||
import UpdateRoom from "../views/Restroom/UpdateRoom.vue"
|
||||
import UserlistView from "../views/Users/UserlistView.vue"
|
||||
import RoomLayoutView from "../views/RoomLayout/RoomLayoutView.vue"
|
||||
import UtilitiesRoom from "../views/UtilitiesRoom/UtilitieView.vue"
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
@ -40,9 +43,19 @@ const router = createRouter({
|
||||
component: RoomView,
|
||||
},
|
||||
{
|
||||
path: "/room",
|
||||
name: "room",
|
||||
component: RoomView,
|
||||
path: "/users",
|
||||
name: "users",
|
||||
component: UserlistView,
|
||||
},
|
||||
{
|
||||
path: "/layout",
|
||||
name: "layout",
|
||||
component: RoomLayoutView,
|
||||
},
|
||||
{
|
||||
path: "/utilities",
|
||||
name: "utilities",
|
||||
component: UtilitiesRoom,
|
||||
},
|
||||
{
|
||||
path: '/room/detail/:id',
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">ทะเบียน</h5>
|
||||
<img src="../../../assets/img/register.png" alt="title" loading="lazy" class="w-70" />
|
||||
<!-- <RouterLink class="dropdown-item border-radius-md"> -->
|
||||
<RouterLink :to="{ name: 'users' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ทะเบียน</a>
|
||||
<!-- </RouterLink> -->
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -21,7 +21,6 @@
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">สถานะห้องพัก</h5>
|
||||
<img src="../../../assets/img/status.png" alt="title" loading="lazy" class="w-70" />
|
||||
<!-- :to="{ name: 'room' }" -->
|
||||
<RouterLink :to="{ name: 'room' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">สถานะห้องพัก</a>
|
||||
</RouterLink>
|
||||
@ -33,7 +32,9 @@
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">ผังห้องพัก</h5>
|
||||
<img src="../../../assets/img/layout.png" alt="title" loading="lazy" class="w-70" />
|
||||
<a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
|
||||
<RouterLink :to="{ name: 'layout' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,7 +43,9 @@
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">ค่าสาธารณุปโภค</h5>
|
||||
<img src="../../../assets/img/utilities.png" alt="title" loading="lazy" class="w-70" />
|
||||
<a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
|
||||
<RouterLink :to="{ name: 'utilities' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -107,93 +107,23 @@ const landingColumns = [
|
||||
<!-- d-flex justify-content-between -->
|
||||
<h4>รายละเอียดห้อง</h4>
|
||||
<div class="row pt-4">
|
||||
<div class="col-8">
|
||||
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a
|
||||
role="button"
|
||||
class="nav-link ps-2 d-flex cursor-pointer align-items-center"
|
||||
id="dropdownMenuPages"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="material-icons opacity-6 me-2 text-md">home</i>
|
||||
ตึก
|
||||
</a>
|
||||
<div
|
||||
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
|
||||
aria-labelledby="dropdownMenuPages"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-12 px-4 py-2">
|
||||
<div class="row">
|
||||
<div class="position-relative">
|
||||
<p
|
||||
class="dropdown-item border-radius-md"
|
||||
v-for="(item, index) in listRoom"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item?.title }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3" style="max-width: 540px">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="../../assets/img/team-4.jpg" class="img-fluid rounded-start" alt="..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-100"
|
||||
icon="search"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<div v-for="(item, index) in NoRoom" :key="index">
|
||||
<p class="text-start mt-4">
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
data-bs-toggle="collapse"
|
||||
href="#collapseExample"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseExample"
|
||||
>
|
||||
{{ item?.title }}
|
||||
</a>
|
||||
</p>
|
||||
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||
<div>
|
||||
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
||||
<div
|
||||
class="card mb-2"
|
||||
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }"
|
||||
:style="{ width: `110px` }"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div
|
||||
style="
|
||||
text-align: right;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
"
|
||||
>
|
||||
<a href="#" class="card-link"
|
||||
><span class="material-icons" style="color: #fff">
|
||||
edit
|
||||
</span></a
|
||||
>
|
||||
</div>
|
||||
<p class="card-title">{{ item?.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">รายละเอียดเจ้าของห้อง</h5>
|
||||
<p class="card-text">
|
||||
ชือ : มานะ
|
||||
</p>
|
||||
<p class="card-text">
|
||||
นามสกุล : ถือดี
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
184
src/views/RoomLayout/RoomLayoutView.vue
Normal file
184
src/views/RoomLayout/RoomLayoutView.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<script>
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
{ title: "ตึก 3" },
|
||||
{ title: "ตึก 4" },
|
||||
{ title: "ตึก 5" },
|
||||
{ title: "ตึก 6" },
|
||||
{ title: "ตึก 7" },
|
||||
];
|
||||
|
||||
const NoRoom = [
|
||||
{ title: "ชั้น 1" },
|
||||
{ title: "ชั้น 2" },
|
||||
{ title: "ชั้น 3" },
|
||||
{ title: "ชั้น 4" },
|
||||
{ title: "ชั้น 5" },
|
||||
{ title: "ชั้น 6" },
|
||||
{ title: "ชั้น 7" },
|
||||
];
|
||||
|
||||
const landingColumns = [
|
||||
{
|
||||
title: "ห้อง 1",
|
||||
dataIndex: "1",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 2",
|
||||
dataIndex: "2",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 3",
|
||||
dataIndex: "3",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 4",
|
||||
dataIndex: "4",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 5",
|
||||
dataIndex: "5",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 6",
|
||||
dataIndex: "6",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 7",
|
||||
dataIndex: "7",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 8",
|
||||
dataIndex: "8",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 9",
|
||||
dataIndex: "9",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 10",
|
||||
dataIndex: "10",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 11",
|
||||
dataIndex: "11",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 12",
|
||||
dataIndex: "12",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 13",
|
||||
dataIndex: "13",
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: { name: "Vue.js", language: "JavaScript" },
|
||||
options: [
|
||||
{ label: "Vue.js", value: "JavaScript" },
|
||||
{ label: "Rails", value: "Ruby" },
|
||||
{ label: "Sinatra", value: "Ruby" },
|
||||
{ label: "Laravel", value: "PHP" },
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
selectedColor: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectedColor: function (newValue) {
|
||||
// this.updateColor(newValue)
|
||||
console.log(newValue);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changedLabel(event) {
|
||||
console.log(event);
|
||||
// this.selected = event;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ลำดับ</th>
|
||||
<th scope="col">ชื่อ</th>
|
||||
<th scope="col">สกุล</th>
|
||||
<th scope="col">เพศ</th>
|
||||
<th scope="col">ยศ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
184
src/views/Users/UserlistView.vue
Normal file
184
src/views/Users/UserlistView.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<script>
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
{ title: "ตึก 3" },
|
||||
{ title: "ตึก 4" },
|
||||
{ title: "ตึก 5" },
|
||||
{ title: "ตึก 6" },
|
||||
{ title: "ตึก 7" },
|
||||
];
|
||||
|
||||
const NoRoom = [
|
||||
{ title: "ชั้น 1" },
|
||||
{ title: "ชั้น 2" },
|
||||
{ title: "ชั้น 3" },
|
||||
{ title: "ชั้น 4" },
|
||||
{ title: "ชั้น 5" },
|
||||
{ title: "ชั้น 6" },
|
||||
{ title: "ชั้น 7" },
|
||||
];
|
||||
|
||||
const landingColumns = [
|
||||
{
|
||||
title: "ห้อง 1",
|
||||
dataIndex: "1",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 2",
|
||||
dataIndex: "2",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 3",
|
||||
dataIndex: "3",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 4",
|
||||
dataIndex: "4",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 5",
|
||||
dataIndex: "5",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 6",
|
||||
dataIndex: "6",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 7",
|
||||
dataIndex: "7",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 8",
|
||||
dataIndex: "8",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 9",
|
||||
dataIndex: "9",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 10",
|
||||
dataIndex: "10",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 11",
|
||||
dataIndex: "11",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 12",
|
||||
dataIndex: "12",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 13",
|
||||
dataIndex: "13",
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: { name: "Vue.js", language: "JavaScript" },
|
||||
options: [
|
||||
{ label: "Vue.js", value: "JavaScript" },
|
||||
{ label: "Rails", value: "Ruby" },
|
||||
{ label: "Sinatra", value: "Ruby" },
|
||||
{ label: "Laravel", value: "PHP" },
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
selectedColor: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectedColor: function (newValue) {
|
||||
// this.updateColor(newValue)
|
||||
console.log(newValue);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changedLabel(event) {
|
||||
console.log(event);
|
||||
// this.selected = event;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ลำดับ</th>
|
||||
<th scope="col">ชื่อ</th>
|
||||
<th scope="col">สกุล</th>
|
||||
<th scope="col">เพศ</th>
|
||||
<th scope="col">ยศ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
184
src/views/UtilitiesRoom/UtilitieView.vue
Normal file
184
src/views/UtilitiesRoom/UtilitieView.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<script>
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
{ title: "ตึก 3" },
|
||||
{ title: "ตึก 4" },
|
||||
{ title: "ตึก 5" },
|
||||
{ title: "ตึก 6" },
|
||||
{ title: "ตึก 7" },
|
||||
];
|
||||
|
||||
const NoRoom = [
|
||||
{ title: "ชั้น 1" },
|
||||
{ title: "ชั้น 2" },
|
||||
{ title: "ชั้น 3" },
|
||||
{ title: "ชั้น 4" },
|
||||
{ title: "ชั้น 5" },
|
||||
{ title: "ชั้น 6" },
|
||||
{ title: "ชั้น 7" },
|
||||
];
|
||||
|
||||
const landingColumns = [
|
||||
{
|
||||
title: "ห้อง 1",
|
||||
dataIndex: "1",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 2",
|
||||
dataIndex: "2",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 3",
|
||||
dataIndex: "3",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 4",
|
||||
dataIndex: "4",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 5",
|
||||
dataIndex: "5",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 6",
|
||||
dataIndex: "6",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 7",
|
||||
dataIndex: "7",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 8",
|
||||
dataIndex: "8",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 9",
|
||||
dataIndex: "9",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 10",
|
||||
dataIndex: "10",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 11",
|
||||
dataIndex: "11",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 12",
|
||||
dataIndex: "12",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 13",
|
||||
dataIndex: "13",
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: { name: "Vue.js", language: "JavaScript" },
|
||||
options: [
|
||||
{ label: "Vue.js", value: "JavaScript" },
|
||||
{ label: "Rails", value: "Ruby" },
|
||||
{ label: "Sinatra", value: "Ruby" },
|
||||
{ label: "Laravel", value: "PHP" },
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
selectedColor: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectedColor: function (newValue) {
|
||||
// this.updateColor(newValue)
|
||||
console.log(newValue);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changedLabel(event) {
|
||||
console.log(event);
|
||||
// this.selected = event;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ลำดับ</th>
|
||||
<th scope="col">ชื่อ</th>
|
||||
<th scope="col">สกุล</th>
|
||||
<th scope="col">เพศ</th>
|
||||
<th scope="col">ยศ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user