Skip to content

K
kiaisoft_tuananh_nuxt
Commit 2b0e5f8f authored by Le Dinh Trung's avatar Le Dinh Trung
Browse files
Options

Merge branch 'feature/homepage-header' into 'dev' 

Feature/homepage header

See merge request !22
parents d1b0d336 980e2789
Hide whitespace changes
Inline Side-by-side
Showing with 1306 additions and 80 deletions
components/BreadCrumb.vue 0 → 100644
View file @ 2b0e5f8f
<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 @ 2b0e5f8f
<!-- eslint-disable vue/no-parsing-error -->
<template> <template>
<v-footer dark padless> <v-footer class="mt-12 flex-wrap" min-height="350px" dark padless>
<v-card flat tile class="indigo lighten-1 white--text text-center"> <v-row class="d-flex justify-space-between align-center">
<v-card-text> <v-col
<v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon> cols="12"
<v-icon size="24px"> md="3"
{{ icon }} >
</v-icon> <v-img
</v-btn> width="153px"
</v-card-text> src="https://d-themes.com/html/riode/images/logo-footer.png"
/>
<v-card-text class="white--text pt-0"> </v-col>
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. <div class="flex-column">
Mauris cursus commodo interdum. Praesent ut risus eget metus luctus <h3>Subscribe to our Newsletter</h3>
accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a <h4>Get all the latest information, Sales and Offers.</h4>
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"
>
</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> </div>
</v-card> <v-col
cols="12"
md="4"
>
<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> </v-footer>
</template> </template>
<script> <script>
export default { export default {
name: 'FooterBar',
data: () => ({ 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> </script>
<style> <style></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>
components/LoginModal.vue 0 → 100644
View file @ 2b0e5f8f
<template>
<v-row
justify="center"
>
<v-dialog
v-model="dialog"
width="450px"
@click:outside="closeDialog"
>
<v-card-title class="justify-center">
<p class="font-weight-black" style="font-size: 35px">
LOGIN
</p>
</v-card-title>
<v-form ref="form" justify="center" class="formlogin">
<v-col cols="12" sm="6" md="12">
<v-text-field
v-model="email"
variant="underlined"
label="Email"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field
v-model="password"
variant="underlined"
label="Password"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12" justify-content: space-between>
<v-checkbox
label="Remember me"
/>
</v-col>
<div class="d-flex flex-column">
<v-btn
color="primary"
class="mt-4"
block
@click="login"
>
Login
</v-btn>
<v-btn
color="primary"
class="mt-4"
block
@click="$emit('close')"
>
Close
</v-btn>
</div>
</v-form>
<v-col cols="12" style="display:flex">
<v-divider sm="6" /> login with <v-divider sm="6" />
</v-col>
<v-col cols="12" style="text-align: center;">
<v-icon>
mdi-twitter
</v-icon>
<v-icon>
mdi-facebook
</v-icon>
<v-icon>
mdi-instagram
</v-icon>
</v-col>
</v-dialog>
</v-row>
</template>
<script>
export default {
name: 'LoginModal',
props: {
status: {
type: Boolean,
default: true
}
},
data: () => ({
email: '',
password: ''
}),
computed: {
dialog () {
return this.status
}
},
methods: {
async login () {
try {
const resp = await this.$axios.post('/login',
{
email: this.email,
password: this.password
})
localStorage.setItem('token', resp.data.data.bearer_token)
this.$auth.$storage.setUniversal('token', resp.data.data.bearer_token)
this.$auth.$storage.setUniversal('userName', resp.data.data.name)
this.$auth.$storage.setUniversal('loggedIn', 'true')
if (resp.status === 200) {
this.$toast.success('Successfully authenticated', {
duration: 2000
})
this.$router.push('home')
}
} catch (e) {
this.$toast.error('Username or Password not valid', {
duration: 2000
})
this.$router.push('/login')
}
},
closeDialog () {
this.$props.status = false
}
}
}
</script>
<style scoped>
.formlogin {
padding: 30px;
}
::v-deep .v-dialog{
background-color: #5ae2dc;
}
</style>
components/PageCarousels.vue 0 → 100644
View file @ 2b0e5f8f
<template>
<v-carousel
cycle
height="550"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
:src="img[i]"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
</div>
</v-row>
</v-carousel-item>
</v-carousel>
</template>
<script>
export default {
name: 'PageCarousels',
data () {
return {
img: [
'https://d-themes.com/html/riode/images/demos/demo1/slides/slide1.jpg',
'https://d-themes.com/html/riode/images/demos/demo1/slides/slide2.jpg'
],
slides: [
'First',
'Second'
]
}
}
}
</script>
<style>
.v-window__container {
margin-top: 20px;
}
</style>
components/RegisterModal.vue 0 → 100644
View file @ 2b0e5f8f
<template>
<v-row justify="center">
<v-dialog
v-model="dialog"
width="450px"
@click:outside="closeDialog"
>
<v-card-title class="justify-center">
<p class="font-weight-black" style="font-size: 35px">
REGISTER
</p>
</v-card-title>
<v-form ref="form" justify="center" class="formlogin">
<v-col cols="12" sm="6" md="12">
<v-text-field
v-model="name"
variant="underlined"
label="Name"
:rules="requiredRules"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field
v-model="email"
variant="underlined"
label="Email"
:rules="emailRules"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field
v-model="password"
variant="underlined"
label="Password"
type="password"
:rules="passwordRules"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field
v-model="password_confirmation"
variant="underlined"
label="Confirm your password"
type="password"
:rules="[passwordRules, passwordConfirmationRule]"
required
/>
</v-col>
<v-col cols="12" sm="6" md="12" justify-content: space-between>
<v-checkbox
v-model="checkbox"
label="I agree to the privacy policy"
/>
</v-col>
<div class="d-flex flex-column">
<v-btn
color="primary"
class="mt-4"
block
@click="signup"
>
Sign Up
</v-btn>
<v-btn
color="primary"
class="mt-4"
block
@click="$emit('close')"
>
Close
</v-btn>
</div>
</v-form>
<v-col cols="12" style="display:flex">
<v-divider sm="6" /> login with <v-divider sm="6" />
</v-col>
<v-col cols="12" style="text-align: center;">
<v-icon>
mdi-twitter
</v-icon>
<v-icon>
mdi-facebook
</v-icon>
<v-icon>
mdi-instagram
</v-icon>
</v-col>
</v-dialog>
</v-row>
</template>
<script>
export default {
name: 'SignupModal',
props: {
status: {
type: Boolean,
default: false
}
},
data: () => ({
name: '',
email: '',
password: '',
password_confirmation: '',
checkbox: '',
requiredRules: [
v => !!v || 'This field is required'
],
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid'
],
passwordRules: [
v => !!v || 'Password is required',
v => (v && v.length >= 6) || 'Password must be more than 6 characters',
v => (v && v.length <= 255) || 'Password must be less than 255 characters'
]
}),
computed: {
dialog () {
return this.status
},
passwordConfirmationRule () {
return () => (this.password === this.password_confirmation) || 'Password must match'
}
},
methods: {
async signup () {
try {
await this.$axios.post('/register', {
name: this.name,
email: this.email,
password: this.password,
password_confirmation: this.password_confirmation
}
).then((resp) => {
if (resp.data.status === 'success') {
this.$toast.success('Register successfully', {
duration: 2000
})
this.$router.push('login')
}
})
} catch (error) {
this.$toast.error(error.response.data.message, {
duration: 2000
})
}
},
closeDialog () {
this.$props.status = false
}
}
}
</script>
<style scoped>
.formlogin {
padding: 30px;
}
::v-deep .v-dialog{
background-color: #5ae2dc;
}
</style>
components/user/Header.vue 0 → 100644
View file @ 2b0e5f8f
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
<!-- header top -->
<div class="header-top">
<v-container class="pa-0">
<v-row no-gutters>
<v-col
cols="12"
sm="6"
>
<v-list-item-content>
<v-list-item-title>Hello message</v-list-item-title>
</v-list-item-content>
</v-col>
<v-col
cols="12"
sm="6"
class="d-flex"
>
<div class="text-center">
<v-menu
open-on-hover
offset-y
>
<template #activator="{ on, attrs }">
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<span>USD</span>
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list
dense
>
<v-list-item>
<v-btn plain>
USD
</v-btn>
</v-list-item>
<v-list-item>
<v-btn plain>
EUR
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</div>
<div class="text-center">
<v-menu
open-on-hover
offset-y
>
<template #activator="{ on, attrs }">
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<span>Eng</span>
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list
dense
>
<v-list-item>
<v-btn plain>
Eng
</v-btn>
</v-list-item>
<v-list-item>
<v-btn plain>
FRH
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</div>
<v-divider vertical />
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-map-marker-outline</v-icon>
<span>Contact</span>
</v-btn>
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-alert-circle-outline</v-icon>
<span>Need help</span>
</v-btn>
<v-btn
plain
v-bind="attrs"
v-on="on"
@click="openDialogLogin"
>
<v-icon>mdi-account-outline</v-icon>
<span>login</span>
</v-btn>
<v-icon>mdi-slash-forward</v-icon>
<v-btn
plain
v-bind="attrs"
v-on="on"
@click="openDialogSignUp"
>
<span>Signup</span>
</v-btn>
</v-col>
</v-row>
</v-container>
</div>
<!-- end header top -->
<!-- header middle -->
<div class="header-middle d-flex">
<v-container py-5 d-flex>
<v-col
cols="12"
md="3"
>
<v-img
width="153px"
src="https://d-themes.com/html/riode/images/logo.png"
/>
</v-col>
<v-col
cols="12"
md="5"
>
<v-form
ref="form"
class="d-flex"
>
<v-text-field
label="Search"
variant="outlined"
/>
<v-btn
icon
>
<v-icon>
mdi-magnify
</v-icon>
</v-btn>
</v-form>
</v-col>
<v-col
cols="12"
md="4"
class="d-flex"
>
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-icon large>
mdi-phone
</v-icon>
<span>Call us now:
<b>0123456789</b>
</span>
</v-btn>
<v-divider vertical inset />
<v-btn
plain
v-bind="attrs"
v-on="on"
@click.stop="drawer = true"
>
<v-icon large>
mdi-heart-outline
</v-icon>
</v-btn>
<v-divider vertical inset />
<v-btn
id="menu-activator"
plain
v-bind="attrs"
v-on="on"
>
<v-spacer />
<span>Cart:
<b>$:0.00</b>
</span>
<v-badge :content="15" floating>
<v-icon large>
mdi-cart-outline
</v-icon>
</v-badge>
<v-menu activator="#menu-activator" style="width: 300px">
<v-list dense three-line>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-avatar>
<v-img :src="item.prependAvatar" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="remove(index)">
<v-icon color="grey lighten-1">
mdi-close-circle-outline
</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<v-divider />
<div class="d-flex justify-space-between align-center ma-4">
<span>Subtotal: </span>
<span>139$ </span>
</div>
<v-divider />
<v-btn
size="x-large"
color="primary"
class="d-flex mt-4 align-center mx-auto"
>
GO TO CHECKOUT
</v-btn>
</v-menu>
</v-btn>
</v-col>
</v-container>
</div>
<!-- end header middle -->
<!-- header bottom -->
<div class="header-bottom">
<NavBar />
</div>
<!-- end header bottom -->
<!-- show modal -->
<LoginModal :status="activeLogin" @close="activeLogin=false" />
<SignupModal :status="activeRegister" @close="activeRegister=false" />
<!-- show drawer -->
<v-navigation-drawer
v-model="drawer"
absolute
right
width="350px"
temporary
>
<div class="d-flex justify-space-between drawer_header">
<b>WISHLIST</b>
<v-btn
plain
@click.stop="drawer = !drawer"
>
Close
<v-icon>
mdi-arrow-right-thin
</v-icon>
</v-btn>
</div>
<v-divider />
<v-list dense three-line>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-avatar>
<v-img :src="item.prependAvatar" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="remove(index)">
<v-icon color="grey lighten-1">
mdi-close-circle-outline
</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import LoginModal from '~/components/LoginModal.vue'
import SignupModal from '~/components/RegisterModal.vue'
import NavBar from '~/components/user/NavBar'
export default {
name: 'UserHeader',
components: {
LoginModal,
SignupModal,
NavBar
},
data: () => {
return {
activeLogin: false,
activeRegister: false,
drawer: false,
items: [
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
title: 'Brunch this weekend?',
subtitle: '<span class="text-primary">Ali Connors</span> &mdash; I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
title: 'Summer BBQ',
subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I\'m out of town this weekend.'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
title: 'Oui oui',
subtitle: '<span class="text-primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
title: 'Birthday gift',
subtitle: '<span class="text-primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
title: 'Recipe to try',
subtitle: '<span class="text-primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
}
]
}
},
methods: {
closeDialog () {
this.activeLogin = false
this.activeLogin = true
},
openDialogLogin () {
this.activeLogin = false
this.activeLogin = true
},
openDialogSignUp () {
this.activeLogin = false
this.activeLogin = true
},
remove (index) {
this.items.splice(index, 1)
console.log(this.items)
}
}
}
</script>
<style scoped>
.header-top{
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
b {
display: block;
}
.col-md {
align-items: center
}
.v-application .d-flex {
align-items: center;
}
.favorite-modal {
position: fixed;
}
.favorite-modal .modal_header {
padding: 20px 0px 20px 30px;
}
.modal_header > b {
font-weight: 700;
font-size: 16px;
}
.modal_header > button {
font-size: 12px;
}
.modal_header > i {
scale: 0.8;
}
.drawer_header{
padding: 20px 0 20px 30px;
}
.v-menu__content {
width: 300px;
top: 153px !important;
padding: 25px;
}
</style>
components/user/NavBar.vue 0 → 100644
View file @ 2b0e5f8f
<template>
<v-container>
<div class="navbar d-flex justify-space-between ">
<div class ="d-flex justify-space-between col-md-7">
<div>
<span>
Home
</span>
</div>
<div class="dropdown">
<span>
Products
</span>
<v-icon>mdi-chevron-down</v-icon>
<div class="dropdown-content elevation-10" :elevation="2">
<v-treeview
:active.sync="active"
rounded
dense
hoverable
activatable
:items="categories"
/>
</div>
</div>
<div>
<span>
Pages
</span>
</div>
<div>
<span>
Blogs
</span>
</div>
<div>
<span>
About
</span>
</div>
</div>
<div class="d-flex align-center ">
<v-icon>mdi-tag</v-icon>
<span class="mx-2">
Special offer!
</span>
<span class="mx-2">
Buy riode
</span>
</div>
</div>
</v-container>
</template>
<script>
export default {
name: 'NavBar',
data: () => ({
active: [],
open: [],
categories: []
}),
computed: {
selected () {
if (!this.active.length) { return undefined }
const id = this.active[0]
console.log(id)
return this.categories.find(category => category.id === id)
}
},
watch: {
selected () {
if (!this.active.length) { return undefined }
const id = this.active[0]
return id
}
},
created () {
this.$axios
.get('guest/categories/index')
.then((response) => {
this.categories = response.data.data
})
.catch(function (error) {
console.log(error)
})
},
methods: {
}
}
</script>
<style scoped>
.navbar span {
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
.navbar span:hover {
color: #26c;
}
.dropdown {
position: relative;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
background-color: #ffffff;
min-width: 350px;
/* margin-top: 20px; */
}
</style>
<style>
div .v-treeview-node__label {
cursor: pointer;
}
</style>
layouts/empty.vue
View file @ 2b0e5f8f
<template> <template>
<Nuxt /> <Nuxt />
</template> </template>
<script> <script>
......
layouts/none.vue deleted 100644 → 0
View file @ d1b0d336
<template>
<nuxt />
</template>
\ No newline at end of file
layouts/user.vue 0 → 100644
View file @ 2b0e5f8f
<template>
<v-app>
<UserHeader />
<Nuxt />
<FooterBar />
</v-app>
</template>
<script>
import Header from '@/components/user/Header'
import FooterBar from '@/components/FooterBar'
export default {
component: {
Header,
FooterBar
},
components: { FooterBar },
created () {
this.changeColor()
},
methods: {
changeColor () {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
return true
}
}
}
</script>
<style>
</style>
pages/about.vue
View file @ 2b0e5f8f
<template> <template>
<div> <div>
<div> <div>
<h1 style="text-align: center">ABOUT</h1> <h1 style="text-align: center">
</div> ABOUT
</h1>
</div>
</div> </div>
</template> </template>
\ No newline at end of file
pages/home-page/categories/index.vue 0 → 100644
View file @ 2b0e5f8f
<!-- eslint-disable vue/no-v-for-template-key -->
<!-- eslint-disable vue/html-end-tags -->
<!-- eslint-disable vue/no-unused-vars -->
<template>
<div>
<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 BreadCrumb from '@/components/BreadCrumb'
export default {
components: { BreadCrumb },
layout: 'user',
component: {
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 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>
pages/home-page/index.vue 0 → 100644
View file @ 2b0e5f8f
<template>
<div>
<!-- Banners -->
<PageCarousels />
</div>
</template>
<script>
import PageCarousels from '@/components/PageCarousels'
export default {
layout: 'user',
component: {
PageCarousels
}
}
</script>
<style>
</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