KoPKB/lelong-web-pembida
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add font, sort home ui

Browse Source
This commit is contained in:
Amir
2022-08-03 02:06:07 +08:00
parent 743b94f8cb
commit e0d7ba61a5
5 changed files with 174 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+23 -16
View File
@@ -1,18 +1,25 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title>Lelong | Ar-Rahn</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
</style>
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title>Lelong | Ar-Rahn</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/Master.vue
+4 -6
View File
@@ -1,5 +1,7 @@
<template>
<router-view></router-view>
<div id="style">
<router-view></router-view>
</div>
</template>
<script>
@@ -8,10 +10,6 @@ export default {};
<style scoped>
#style {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
font-family: "Inter", Helvetica, Arial, sans-serif;
}
</style>
src/components/base/BaseCard.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<style scoped>
div {
margin: 2rem auto;
margin: 1rem auto;
/* max-width: 40rem; */
padding: 1rem;
border-radius: 12px;
src/components/home/TheHome.vue
+120 -29
View File
@@ -3,16 +3,16 @@
<div class="container">
<div class="row">
<div class="col-md-8">
<h4>Lelongan Hari Ini: 30/06/2022</h4>
<base-card>
<div>
<h5>Lelongan Hari Ini</h5>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Cawangan</th>
<th scope="col">Masa Mula</th>
<th scope="col">Countdown</th>
</tr>
</thead>
<tbody>
@@ -33,20 +33,29 @@
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</base-card>
<h4 class="mt-4">Lelongan Seterusnya</h4>
<base-card>
<div>
<h5>Lelongan Seterusnya</h5>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Cawangan</th>
<th scope="col">Tarikh</th>
</tr>
</thead>
<tbody>
@@ -54,18 +63,31 @@
<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>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
</tbody>
</table>
@@ -74,23 +96,92 @@
</div>
<div class="col-md-4">
<div class="col">
<base-card>
<div>
<h5>Karat</h5>
<p>Mutu</p>
<p>Harga</p>
<h4 class="ps-3">Emas Semasa</h4>
<div class="grid-container">
<!-- <base-card>
<div>
<h5>22.0K</h5>
<p>999</p>
<p>RM261</p>
</div>
</base-card>
<base-card>
<div>
<h5>22.0K</h5>
<p>999</p>
<p>RM261</p>
</div>
</base-card> -->
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
</base-card>
<base-card>
<div>
<h5>Karat</h5>
<p>Mutu</p>
<p>Harga</p>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
</base-card>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
<div class="card">
<p>22.0K</p>
<p>999</p>
<p>RM261</p>
</div>
</div>
</div>
</div>
</div>
</div>
</the-template>
</template>
</template>
<style scoped>
.grid-container {
display: grid;
grid-template-columns: auto auto;
}
.card {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 20px;
margin: 10px;
width: 140px;
height: 130px;
}
</style>
src/components/layouts/TheHeader.vue
+26 -9
View File
@@ -16,27 +16,40 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link class="nav-link" v-bind:to="{name: 'home'}">Utama</router-link>
<router-link class="nav-link" v-bind:to="{ name: 'home' }"
>Utama</router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" v-bind:to="{name: 'list'}">Senarai</router-link>
<router-link class="nav-link" v-bind:to="{ name: 'list' }"
>Senarai</router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" v-bind:to="{name: 'cart'}">Troli</router-link>
<router-link class="nav-link" v-bind:to="{ name: 'cart' }"
>Troli</router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" v-bind:to="{name: 'bid-record'}">Rekod Bidaan</router-link>
<router-link class="nav-link" v-bind:to="{ name: 'bid-record' }"
>Rekod Bidaan</router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" v-bind:to="{name: 'result'}">Keputusan</router-link>
<router-link class="nav-link" v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" v-bind:to="{name: 'profile'}">Profil</router-link>
<router-link class="nav-link" v-bind:to="{ name: 'profile' }"
>Profil</router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" v-bind:to="{name: 'login'}">Log Keluar</router-link>
<router-link class="nav-link" v-bind:to="{ name: 'login' }"
>Log Keluar</router-link
>
</li>
</ul>
</div>
</div>
@@ -45,6 +58,10 @@
<style scoped>
.nav-link:hover {
color: blue;
color: blue !important;
}
router-link:hover {
color: blue;
}
</style>