Skip to content

K
kiaisoft_tuananh_nuxt
Commit 3d7ed82f authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

add layout

parents f3a32305 9a5e6cec
Expand all Show whitespace changes
Inline Side-by-side
Showing with 877 additions and 167 deletions
assets/css/header.css 0 → 100644
View file @ 3d7ed82f
: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);
}
components/Footer.vue
View file @ 3d7ed82f
...@@ -27,9 +27,29 @@ ...@@ -27,9 +27,29 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text class="white--text"> <div class="footer-bottom">
{{ new Date().getFullYear() }} — <strong>Vuetify</strong> <div class="footer-bottom-left">
</v-card-text> <figure class="payment">
<img src="~/assets/images/payment.png" alt="payment" width="159" height="29"></img>
</figure>
</div>
<p class="copyright">Riode eCommerce © 2022. All Rights Reserved</p>
<div class="footer-bottom-right">
<div class="social-link">
<v-btn
v-for="icon in icons"
:key="icon"
class="mx-4 white--text"
icon
>
<v-icon size="24px">
{{ icon }}
</v-icon>
</v-btn>
</div>
</div>
</div>
</v-card> </v-card>
</v-footer> </v-footer>
</template> </template>
...@@ -46,3 +66,26 @@ ...@@ -46,3 +66,26 @@
}), }),
} }
</script> </script>
<style>
.footer-bottom-left {
position: absolute;
left: 0;
}
.footer-bottom-right {
position: absolute;
right: 0;
}
.copyright {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
</style>
\ No newline at end of file
components/Shared/Header/Header.vue 0 → 100644
View file @ 3d7ed82f
<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 href="#signin" 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">
<NavBar />
</div>
<div class="header-right">
</div>
</div>
</div>
</template>
<script>
import NavBar from "@/components/Shared/Header/NavBar";
export default {
name: "Header",
components: {
NavBar,
},
};
</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/NavBar.vue 0 → 100644
View file @ 3d7ed82f
<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: "NavBar",
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
layouts/default.vue
View file @ 3d7ed82f
<template> <template>
<div> <div>
<Nav /> <Header />
<nuxt /> <nuxt />
<Footer />
</div> </div>
</template> </template>
<script> <script>
import Nav from "@/components/Nav"; import Header from "@/components/Shared/Header/Header";
import NavBar from "@/components/Shared/Header/NavBar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
export default { export default {
components: { Nav }, components: {
components: { Footer }, Header,
Footer,
NavBar,
},
}; };
</script> </script>
layouts/empty.vue 0 → 100644
View file @ 3d7ed82f
<template>
<div>
<Nuxt />
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
\ No newline at end of file
nuxt.config.js
View file @ 3d7ed82f
...@@ -24,6 +24,7 @@ export default { ...@@ -24,6 +24,7 @@ export default {
// Global CSS: https://go.nuxtjs.dev/config-css // Global CSS: https://go.nuxtjs.dev/config-css
css: [ css: [
], ],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
...@@ -41,11 +42,16 @@ export default { ...@@ -41,11 +42,16 @@ export default {
// Modules: https://go.nuxtjs.dev/config-modules // Modules: https://go.nuxtjs.dev/config-modules
modules: [ modules: [
// https://go.nuxtjs.dev/bootstrap // https://go.nuxtjs.dev/bootstrap
'@nuxtjs/bootstrap-vue', 'bootstrap-vue/nuxt',
'@nuxtjs/axios', '@nuxtjs/axios',
'@nuxtjs/auth-next', '@nuxtjs/auth-next',
'@nuxtjs/toast', '@nuxtjs/toast',
], ],
bootstrapVue: {
icons: true
},
axios: { axios: {
baseURL: process.env.API_URL || ' http://127.0.0.1:8000/api/', baseURL: process.env.API_URL || ' http://127.0.0.1:8000/api/',
debug: process.env.DEBUG || false, debug: process.env.DEBUG || false,
......
package-lock.json
View file @ 3d7ed82f
This diff is collapsed.
pages/user/index.vue 0 → 100644
View file @ 3d7ed82f
<template>
<div>content</div>
</template>
<script>
export default {
layout: "default",
};
</script>
<style>
</style>
\ No newline at end of file
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