Skip to content

K
kiaisoft_tuananh_nuxt
Commit 980e2789 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

add layouts shop

parent f646c89a
Show whitespace changes
Inline Side-by-side
Showing with 357 additions and 82 deletions
components/BreadCrumb.vue 0 → 100644
View file @ 980e2789
<template>
<div class=" page-header dark-section">
<h3 class="page-subtitle">
categories
</h3>
<h2 class="page-title">
BREADCRUMB
</h2>
<ul class="breadcrumb">
<v-breadcrumbs :items="items">
<template #divider>
<v-icon>mdi-chevron-right</v-icon>
</template>
</v-breadcrumbs>
</ul>
</div>
</template>
<script>
export default {
name: 'BreadCrumb',
props: {
status: {
type: Boolean,
default: true
}
},
data: () => ({
email: '',
password: '',
items: [
{
text: 'Home',
disabled: false,
href: '/home'
},
{
text: 'Element',
disabled: false,
href: '/'
},
{
text: 'Post',
disabled: false,
href: '/posts'
}
]
}),
computed: {
dialog () {
return this.status
}
}
}
</script>
<style scope>
.page-header {
background-image: url(https://d-themes.com/html/riode/images/shop/page-header-back.jpg);
background-color: #3C63A4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 250px;
padding: 3em 1em;
background-color: #C8C3BF;
background-position: center;
background-size: cover;
text-align: center;
color: #222;
width: 100vw;
margin-top: 10px;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
color: #666;
font-family: Poppins,sans-serif;
font-size: 1.4rem;
}
.v-application a {
color: #fff !important;
}
.page-title {
margin-bottom: 0;
text-transform: uppercase;
font-size: 4rem;
line-height: 1.125;
color: #222;
color: #fff;
}
.page-subtitle {
margin-bottom: 0.5rem;
text-transform: uppercase;
font-size: 2rem;
line-height: 1.2;
color: #fff;
}
</style>
components/FooterBar.vue
View file @ 980e2789
<!-- eslint-disable vue/no-parsing-error -->
<template>
<v-footer dark padless>
<v-card flat tile class="indigo lighten-1 white--text text-center">
<v-card-text>
<v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
<v-icon size="24px">
{{ icon }}
</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
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-divider />
<div class="footer-bottom">
<div class="footer-bottom-left">
<figure class="payment">
<img
src="~/assets/images/payment.png"
alt="payment"
width="159"
height="29"
<v-footer class="mt-12 flex-wrap" min-height="350px" dark padless>
<v-row class="d-flex justify-space-between align-center">
<v-col
cols="12"
md="3"
>
</figure>
<v-img
width="153px"
src="https://d-themes.com/html/riode/images/logo-footer.png"
/>
</v-col>
<div class="flex-column">
<h3>Subscribe to our Newsletter</h3>
<h4>Get all the latest information, Sales and Offers.</h4>
</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-col
cols="12"
md="4"
>
<v-icon size="24px">
{{ icon }}
</v-icon>
</v-btn>
</div>
</div>
</div>
</v-card>
<v-text-field label="email address here ..."></v-text-field>
</v-col>
<v-btn color="primary">SUBSCRIBE</v-btn>
</v-row>
<v-divider></v-divider>
</v-footer>
</template>
<script>
export default {
name: 'FooterBar',
data: () => ({
icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram']
icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram'],
img: 'https://d-themes.com/html/riode/images/logo-footer.png'
})
}
</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>
<style></style>
layouts/user.vue
View file @ 980e2789
......@@ -2,16 +2,20 @@
<v-app>
<UserHeader />
<Nuxt />
<FooterBar />
</v-app>
</template>
<script>
import Header from '@/components/user/Header'
import FooterBar from '@/components/FooterBar'
export default {
component: {
Header
Header,
FooterBar
},
components: { FooterBar },
created () {
this.changeColor()
},
......
pages/about.vue
View file @ 980e2789
<template>
<div>
<div>
<h1 style="text-align: center">ABOUT</h1>
<h1 style="text-align: center">
ABOUT
</h1>
</div>
</div>
</template>
pages/home-page/categories/index.vue
View file @ 980e2789
<!-- eslint-disable vue/no-v-for-template-key -->
<!-- eslint-disable vue/html-end-tags -->
<!-- eslint-disable vue/no-unused-vars -->
<template>
<div>
<!-- Banners -->
<PageCarousels />
<BreadCrumb />
<v-container class="pa-0">
<v-row class="d-flex align-center pl-2 mt-2">
<v-col>
<v-hover v-slot="{ hover }">
<v-btn outlined :style="{ 'background-color': hover ? '#1976d2' : '#f5f5f5','color':hover ? '#f5f5f5' : 'black' }">
FILTER
</v-btn>
</v-hover>
</v-col>
</v-row>
<v-row class="pt-5 pb-5">
<v-col
v-for="(item, i) in items"
:key="i"
cols="12"
md="3"
>
<v-hover
v-slot="{ hover }"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover }"
>
<v-card
:elevation="hover ? 16 : 2"
:class="{ 'on-hover': hover }"
class="mx-auto pa-2 ma-3"
max-width="280"
link
>
<div>
<v-img
:src="item.images"
height="250px"
cover
/>
<!-- <v-card-actions v-if="hover" class="d-flex align-center justify-center" style="position: absolute">
<v-btn
v-for="(icon, index) in icons"
:key="index"
:class="{ 'show-btns': hover }"
icon
>
<v-icon
:class="{ 'show-btns': hover }"
>
{{ icon }}
</v-icon>
</v-btn>
</v-card-actions> -->
</div>
<v-card-title class="d-flex justify-center">
{{ item.name }}
</v-card-title>
<v-card-subtitle class="d-flex justify-center">
{{ item.price }}
</v-card-subtitle>
<v-card-actions class="d-flex justify-center">
<v-btn
:class="{ 'show-btns': hover }"
icon
>
<v-icon
:class="{ 'show-btns': hover }"
>
mdi-cart
</v-icon>
</v-btn>
<v-btn
:class="{ 'show-btns': hover }"
icon
>
<v-icon
:class="{ 'show-btns': hover }"
>
mdi-heart
</v-icon>
</v-btn>
<v-btn
:class="{ 'show-btns': hover }"
icon
>
<v-icon
:class="{ 'show-btns': hover }"
>
mdi-magnify
</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-hover>
</v-col>
</v-row>
<v-divider />
<v-row class="d-flex align-center justify-space-between pl-2 mt-2">
<div class="text-center">
<v-pagination
v-model="page"
:length="4"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
/>
</div>
</v-row>
</v-container>
</div>
</template>
<script>
import PageCarousels from '@/components/PageCarousels'
import BreadCrumb from '@/components/BreadCrumb'
export default {
components: { BreadCrumb },
layout: 'user',
component: {
PageCarousels
BreadCrumb
},
data: () => {
return {
items: [
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
name: 'Brunch this weekend?',
price: '50$'
}
],
icons: ['mdi-cart', 'mdi-heart', 'mdi-magnify'],
products: [],
page: 1
}
},
created () {
this.getProductByCategoryId()
},
methods: {
async getProductByCategoryId () {
const resp = await this.$axios.get('/guest/categories/products-by-category-id/1', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.products = response.data.data[0].products))
.catch(function (error) {
console.log(error)
})
console.log(resp[0].products)
console.log(this.products[0])
}
}
}
</script>
<style>
<style lang="scss" scoped>
.v-card {
transition: opacity .4s ease-in-out;
}
.v-card:not(.on-hover) {
opacity: 0.9;
}
.show-btns {
color: #1976d2 !important;
}
.mdi-fast-forward::before {
content: "\F0211";
}
.mdi:before, .mdi-set {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::before, ::after {
text-decoration: inherit;
vertical-align: inherit;
}
*, ::before, ::after {
background-repeat: no-repeat;
box-sizing: inherit;
}
.v-btn--icon.v-size--default .v-icon, .v-btn--fab.v-size--default .v-icon {
height: 24px;
font-size: 24px;
width: 24px;
}
.v-btn > .v-btn__content .v-icon {
color: rgba(255, 255, 255, 1);
}
</style>
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