Skip to content

K
kiaisoft_tuananh_nuxt
Commit 2cf94e98 authored by vietanh-0511's avatar vietanh-0511
Browse files
Options

Merge branch 'feature/UI-vuetify' of... 

Merge branch 'feature/UI-vuetify' of https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt into feature/update-product-UI
parents 529568ba 51ae5777
Expand all Show whitespace changes
Inline Side-by-side
Showing with 399 additions and 673 deletions
components/DateDisplay.vue 0 → 100644
View file @ 2cf94e98
<template>
<span v-if="date">
{{ date.getMonth() + 1 }}/{{ date.getDate() }}/{{ date.getFullYear() }}
</span>
</template>
<script>
export default {
props: ['date']
}
</script>
<style>
</style>
components/Footer.vue → components/FooterBar.vue
View file @ 2cf94e98
...@@ -10,30 +10,44 @@ ...@@ -10,30 +10,44 @@
</v-card-text> </v-card-text>
<v-card-text class="white--text pt-0"> <v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui. Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices, accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
penatibus et magnis dis parturient montes, nascetur ridiculus mus. lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor
vel ut orci. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</v-card-text> </v-card-text>
<v-divider></v-divider> <v-divider />
<div class="footer-bottom"> <div class="footer-bottom">
<div class="footer-bottom-left"> <div class="footer-bottom-left">
<figure class="payment"> <figure class="payment">
<img src="~/assets/images/payment.png" alt="payment" width="159" height="29"> <img
src="~/assets/images/payment.png"
alt="payment"
width="159"
height="29"
>
</figure> </figure>
</div> </div>
<p class="copyright">Riode eCommerce © 2022. All Rights Reserved</p> <p class="copyright">
Riode eCommerce © 2022. All Rights Reserved
</p>
<div class="footer-bottom-right"> <div class="footer-bottom-right">
<div class="social-link"> <div class="social-link">
<v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon> <v-btn
v-for="icon in icons"
:key="icon"
class="mx-4 white--text"
icon
>
<v-icon size="24px"> <v-icon size="24px">
{{ icon }} {{ icon }}
</v-icon> </v-icon>
</v-btn> </v-btn>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,13 +58,8 @@ ...@@ -44,13 +58,8 @@
<script> <script>
export default { export default {
data: () => ({ data: () => ({
icons: [ icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram']
'mdi-facebook', })
'mdi-twitter',
'mdi-linkedin',
'mdi-instagram',
],
}),
} }
</script> </script>
...@@ -58,7 +67,6 @@ export default { ...@@ -58,7 +67,6 @@ export default {
.footer-bottom-left { .footer-bottom-left {
position: absolute; position: absolute;
left: 0; left: 0;
} }
.footer-bottom-right { .footer-bottom-right {
...@@ -67,12 +75,10 @@ export default { ...@@ -67,12 +75,10 @@ export default {
} }
.copyright { .copyright {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
</style> </style>
components/Shared/Header/Header.vue deleted 100644 → 0
View file @ 529568ba
<template>
<div>
<!-- header top -->
<div class="header-top">
<div class="header-left">
<span class="welcome-message">This is a wellcome message!</span>
</div>
<div class="header-right">
<div class="dropdown">
<span class="mr-1">USD</span>
<b-icon icon="chevron-down" font-scale=".7"></b-icon>
<ul class="dropdown-box">
<li><a href="#USD">USD</a></li>
<li><a href="#EUR">EUR</a></li>
</ul>
</div>
<!-- End DropDown Menu -->
<div class="dropdown ml-4">
<span class="mr-1">ENG</span>
<b-icon icon="chevron-down" font-scale=".7"></b-icon>
<ul class="dropdown-box">
<li>
<a href="#USD">ENG</a>
</li>
<li>
<a href="#EUR">FRH</a>
</li>
</ul>
</div>
<!-- End DropDown Menu -->
<v-divider class="mx-4" vertical></v-divider>
<a href="#" class="contact">
<b-icon icon="geo-alt"></b-icon>
Contact
</a>
<a href="#" class="help">
<b-icon icon="info-circle"></b-icon>
Need Help
</a>
<a @click="openModal" v-b-modal.modal-login class="login-toggle link-to-tab d-md-show">
<b-icon icon="person" font-scale="1.3"></b-icon>
Sign in
</a>
<span class="delimiter">/</span>
<a href="#register" class="register-toggle link-to-tab d-md-show ml-0">Register</a>
</div>
</div>
<!-- end header top -->
<!-- header middle -->
<div class="header-middle d-flex">
<div class="header-left my-4">
<a href="#" class="logo">
<img src="~/assets/images/logo.png" alt="" srcset="" width="160px" />
</a>
<div class="header-search">
<form action="" class="form-input">
<input type="text" name="search" placeholder="Search..." class="form-control" />
<button type="submit" value="btn" class="btn btn-search">
<b-icon icon="search"></b-icon>
</button>
</form>
</div>
</div>
<div class="header-right">
<a href="#" class="hotline d-flex">
<b-icon icon="telephone" font-scale="2"></b-icon>
<div class="icon-box-content ml-2">
<span class="icon-box-title">Call Us Now:</span>
<h6>0(800) 123-456</h6>
</div>
</a>
<div class="d-flex" style="height: 30px">
<v-divider class="mx-3" vertical></v-divider>
</div>
<div class="wishlist">
<a href="#">
<b-icon icon="heart" font-scale="2"></b-icon>
</a>
</div>
<div class="d-flex" style="height: 30px">
<v-divider class="mx-3" vertical></v-divider>
</div>
<div class="cart">
<a href="#" class="d-flex">
<div class="cart-label">
<span class="cart-name">Shopping Cart:</span>
<p class="cart-price">$0.00</p>
</div>
<div class="icon-bag ml-2">
<b-icon icon="bag" font-scale="2.5"> </b-icon>
<span class="cart-count">2</span>
</div>
</a>
</div>
</div>
</div>
<!-- end header middle -->
<div class="header-bottom d-flex">
<div class="header-left">
<NavigationBar />
</div>
<div class="header-right">
</div>
</div>
</div>
</template>
<script>
import NavigationBar from "@/components/Shared/Header/NavigationBar"
import LoginForm from "@/components/Shared/Header/LoginForm"
export default {
name: "Header",
components: {
NavigationBar,
LoginForm,
},
methods: {
openModal() {
this.$bvModal.show('modal-login')
}
}
};
</script>
<style>
:root {
--color: #26c;
}
body {
color: rgb(99, 99, 99);
font-size: 0.8rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.header {
height: auto;
}
.header-top {
height: 40px;
width: 100%;
display: flex;
border-bottom: rgba(0, 0, 0, 0.12) 1px solid;
justify-content: space-between;
align-items: center;
}
.header-left {
display: flex;
margin-left: 70px;
align-items: center;
}
.header-left a {
margin-right: 3rem;
display: flex;
}
.header-right {
display: flex;
margin-right: 70px;
align-items: center;
}
.header-right a {
color: inherit;
padding: 0 0.5rem;
align-items: center;
}
.dropdown span {
margin-bottom: 10px;
cursor: pointer;
}
.dropdown:hover span {
color: var(--color);
}
.dropdown-box {
display: none;
position: absolute;
list-style: none;
width: inherit;
padding: 0 5px;
background-color: rgb(255, 255, 255);
box-shadow: 0 5px 30px 2px rgb(0 0 0 / 20%);
}
.dropdown-box li {
margin: 5px 0px;
}
.dropdown-box a {
color: inherit;
padding: 0.4rem 0.2rem;
}
.dropdown:hover .dropdown-box {
display: block;
}
.header-search {
position: relative;
min-width: 500px;
margin: 0 3rem 0 1rem;
}
.header-search .form-input {
display: flex;
position: relative;
}
.header-search .form-input input.form-control {
border: 2px solid var(--color);
font-size: 1rem;
}
.btn-search {
position: absolute;
right: 0px;
}
.header-middle .header-right {
color: #222;
}
.header-right .icon-box-content span {
font-size: 0.7rem;
}
a {
text-decoration: none;
color: #222;
}
a:hover {
text-decoration: none;
color: var(--color);
}
.header-right .cart-label p {
font-weight: bold;
margin-bottom: 0;
}
.header-right .cart .icon-bag {
width: fit-content;
height: fit-content;
}
.cart-count {
position: absolute;
margin-left: -0.7rem;
width: 1rem;
height: 1rem;
font-size: 0.7rem;
line-height: 1.4;
text-align: center;
border-radius: 50%;
background-color: var(--color);
color: #fff;
z-index: 1;
}
.navbar {
padding: 1rem 0;
}
.navbar a {
font-size: 1rem;
font-weight: bold;
margin-bottom: 10px;
}
.category-children {
padding: 5px 10px;
min-width: 10rem;
}
.category-children .category-child a {
margin: 0;
font-size: 0.9rem;
font-weight: normal;
}
.dropdown:hover .category-item>a {
color: var(--color);
}
</style>
\ No newline at end of file
components/Shared/Header/LoginForm.vue deleted 100644 → 0
View file @ 529568ba
<template>
<b-modal id="modal-login" title="Create User" class="modal fade" v-if="showModal">
<p class="my-4">
<form>
<label>Name :</label>
<input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
<label>Email :</label>
<input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required />
<label>Password :</label>
<input type="password" class="form-control mb-2" placeholder="password" v-model="password" required />
</form>
</p>
<template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-login')"
class="btn btn-danger btn-sm m-1">Close</button>
<button @click="" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal>
</template>
<script>
export default {
name: 'LoginForm',
data() {
return {
}
},
methods: {
show() {
this.showModal = true
},
hide() {
this.showModal = false
}
}
}
</script>
\ No newline at end of file
components/Shared/Header/NavigationBar.vue deleted 100644 → 0
View file @ 529568ba
<template>
<div>
<div class="navbar d-flex">
<a class="" href="#">Home</a>
<div class="dropdown" v-for="(item, index) in categories" :key="index">
<div class="category-item" v-if="item.ordering == 1">
<a href="">{{ item.name }}</a>
<ul class="category-children dropdown-box" v-if="item.children.length > 0">
<li class="category-child" v-for="(children, index) in item.children" :key="index">
<a href="">{{ children.name }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'NavigationBar',
data() {
return {
categories: [],
}
},
mounted() {
this.getCategories()
},
methods: {
async getCategories() {
try {
const response = await axios.get(
'http://localhost:8000/api/categories'
)
console.log(response.data.data)
this.categories = response.data.data
} catch (error) {
console.error(error)
}
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
nuxt.config.js
View file @ 2cf94e98
...@@ -27,7 +27,10 @@ export default { ...@@ -27,7 +27,10 @@ export default {
], ],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['~/plugins/axios.js'], plugins: [
'~/plugins/axios.js',
'~/plugins/formatTime.js'
],
// Auto import components: https://go.nuxtjs.dev/config-components // Auto import components: https://go.nuxtjs.dev/config-components
components: true, components: true,
......
pages/categories/index.vue
View file @ 2cf94e98
This diff is collapsed.
pages/posts/index.vue
View file @ 2cf94e98
...@@ -83,6 +83,7 @@ ...@@ -83,6 +83,7 @@
small-chips small-chips
dense dense
accept="image/*" accept="image/*"
prepend-icon="mdi-camera"
@change="fileSelected" @change="fileSelected"
/> />
</v-col> </v-col>
...@@ -255,6 +256,7 @@ ...@@ -255,6 +256,7 @@
accept="image/*" accept="image/*"
small-chips small-chips
dense dense
prepend-icon="mdi-camera"
/> />
</v-col> </v-col>
</v-row> </v-row>
......
pages/products/index.vue
View file @ 2cf94e98
...@@ -72,7 +72,6 @@ ...@@ -72,7 +72,6 @@
label="File input" label="File input"
small-chips small-chips
dense dense
accept="image/*"
multiple multiple
/> />
</v-col> </v-col>
...@@ -330,6 +329,7 @@ ...@@ -330,6 +329,7 @@
multiple multiple
/> />
</v-col> </v-col>
<!-- <v-img v-if="typeof eImage === 'string'" :src="eImages" /> -->
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn
class="mx-2" class="mx-2"
...@@ -479,6 +479,7 @@ export default { ...@@ -479,6 +479,7 @@ export default {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: '',
dialog: false,
dialog1: false, dialog1: false,
dialog2: false, dialog2: false,
dialog3: false, dialog3: false,
......
pages/users/index.vue
View file @ 2cf94e98
This diff is collapsed.
plugins/formatTime.js 0 → 100644
View file @ 2cf94e98
import Vue from 'vue'
Vue.mixin({
methods: {
formatDate (date) {
const d = new Date(date)
let month = '' + (d.getMonth() + 1)
let day = '' + d.getDate()
const year = d.getFullYear()
if (month.length < 2) { month = '0' + month }
if (day.length < 2) { day = '0' + day }
return [year, month, day].join('-')
}
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment