Skip to content

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

add feature home-page

parent a6573e9a
Show whitespace changes
Inline Side-by-side
Showing with 427 additions and 8 deletions
components/PageCarousels.vue
View file @ e021bbda
...@@ -14,11 +14,7 @@ ...@@ -14,11 +14,7 @@
class="fill-height" class="fill-height"
align="center" align="center"
justify="center" justify="center"
> />
<div class="text-h2">
{{ index +1 }}
</div>
</v-row>
</v-carousel-item> </v-carousel-item>
</v-carousel> </v-carousel>
</template> </template>
......
components/user/Header.vue
View file @ e021bbda
<template> <template>
<div> <div class="header-all">
<!-- header top --> <!-- header top -->
<div class="header-top"> <div class="header-top">
<v-container class="pa-0"> <v-container class="pa-0">
...@@ -290,6 +290,7 @@ export default { ...@@ -290,6 +290,7 @@ export default {
} }
this.updateWishlist() this.updateWishlist()
this.updateCart() this.updateCart()
window.addEventListener('scroll', this.handleScroll)
}, },
methods: { methods: {
closeDialog () { closeDialog () {
...@@ -415,12 +416,29 @@ export default { ...@@ -415,12 +416,29 @@ export default {
duration: 2000 duration: 2000
}) })
} }
},
handleScroll () {
const nav = document.querySelector('.header-middle')
const navv = document.querySelector('.header-all')
if (window.scrollY > navv.offsetTop) {
nav.classList.add('sticky')
} else {
nav.classList.remove('sticky')
}
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.header-middle.sticky {
position: fixed;
width: 100%;
background-color: #ffffff;
z-index: 100;
top: 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header-top { .header-top {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 12px; font-size: 12px;
......
pages/banners/index.vue
View file @ e021bbda
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
{{ index + 1 }} {{ index + 1 }}
</template> </template>
<template #[`item.image`]="{ item }"> <template #[`item.image`]="{ item }">
<v-img :src="item.image" width="200" /> <v-img :src="item.image" max-width="200" />
</template> </template>
<template #[`item.status`]="{ item }"> <template #[`item.status`]="{ item }">
<v-switch <v-switch
......
pages/home-page/index.vue
View file @ e021bbda
...@@ -2,6 +2,256 @@ ...@@ -2,6 +2,256 @@
<div> <div>
<!-- Banners --> <!-- Banners -->
<PageCarousels /> <PageCarousels />
<!-- categories -->
<v-container>
<div class="d-flex justify-center align-center mt-12">
<h2 class="sub-title mb-5">
Our Categories
</h2>
</div>
<v-row>
<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 no-padding"
max-width="280"
link
>
<div>
<v-img
:src="item.images"
height="250px"
cover
/>
</div>
<v-card-title class="d-flex justify-center card-category-title">
{{ item.name }}
</v-card-title>
</v-card>
</v-hover>
</v-col>
</v-row>
</v-container>
<v-container>
<div class="d-flex justify-center align-center mt-12">
<h2 class="sub-title">
Best Sellers
</h2>
</div>
<v-row class="pt-5 pb-5">
<v-col
v-for="(item, i) in products"
: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 no-padding"
max-width="280"
link
>
<div>
<v-img
:src="item.images"
height="250px"
cover
/>
</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-container>
<v-container>
<div class="d-flex justify-center align-center mt-12">
<h2 class="sub-title">
Our Featured
</h2>
</div>
<v-row class="grid-example pt-5 pb-5">
<v-col
v-for="(item, i) in features"
:key="i"
>
<!-- <v-carousel
hide-delimiters
:slides-per-page="4"
:center-mode="true"
>
<v-carousel-item v-for="item in items" :key="item.id"> -->
<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
/>
</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-carousel-item>
</v-carousel> -->
</v-col>
</v-row>
</v-container>
<v-container>
<div class="d-flex justify-center align-center mt-12">
<h2 class="sub-title">
Featured Articles
</h2>
</div>
<v-row>
<v-col
v-for="(item, i) in posts"
:key="i"
cols="4"
>
<v-card
:loading="loading"
class="mx-auto my-12 card-4"
max-width="374"
>
<template #loader="{ isActive }">
<v-progress-linear
:active="isActive"
color="deep-purple"
height="4"
indeterminate
/>
</template>
<v-img
cover
height="250"
:src="item.images"
class="card-img"
/>
<v-card-item class="card-4">
<v-card-title style="padding:5px">
{{ item.title }}
</v-card-title>
</v-card-item>
<v-card-text style="padding:5px">
<div>{{ item.content }}</div>
</v-card-text>
<v-divider class="mx-4 mb-1" />
<v-card-actions>
<v-btn
color="primary"
variant="text"
@click="reserve"
>
Read More
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</div> </div>
</template> </template>
...@@ -12,9 +262,162 @@ export default { ...@@ -12,9 +262,162 @@ export default {
layout: 'user', layout: 'user',
component: { component: {
PageCarousels PageCarousels
},
data: () => {
return {
items: [
{
images: 'https://d-themes.com/html/riode/images/categories/category1.jpg',
name: 'ForMens'
},
{
images: 'https://d-themes.com/html/riode/images/categories/category2.jpg',
name: 'Accessories'
},
{
images: 'https://d-themes.com/html/riode/images/categories/category3.jpg',
name: 'Fashionable Women'
},
{
images: 'https://d-themes.com/html/riode/images/categories/category4.jpg',
name: 'Comestic'
}
],
products: [
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product1.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product2.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product3.jpg',
name: 'Brunch this weekend?',
price: '50$'
},
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product4.jpg',
name: 'Brunch this weekend?',
price: '50$'
}
],
features: [
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product5.jpg',
name: 'Clock',
price: '50$'
},
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product6.jpg',
name: 'Cap',
price: '50$'
},
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product7.jpg',
name: 'Hat',
price: '50$'
},
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product8.jpg',
name: 'Hoodie',
price: '50$'
},
{
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product9.jpg',
name: 'Women bag',
price: '50$'
}
],
posts: [
{
images: 'https://d-themes.com/html/riode/images/blog/frame/1.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/2.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/3.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
}
]
}
} }
} }
</script> </script>
<style> <style scoped>
.v-card {
transition: opacity .4s ease-in-out;
}
.v-card:not(.on-hover) {
opacity: 0.9;
}
.v-card:hover .card-category-title {
background-color: #1b9bda;
color: #ffffff;
}
.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);
}
.no-padding {
padding: 0 !important;
}
.sub-title {
text-transform: capitalize;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.0125em;
color: #222;
}
.grid-example {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 5px;
}
.card-img:hover {
transform: scale(1.1);
transition: transform 0.2s ease-in-out;
}
.card-4 {
overflow: hidden;
}
</style> </style>
pages/login.vue
View file @ e021bbda
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
required required
@input="$v.email.$touch()" @input="$v.email.$touch()"
@blur="$v.email.$touch()" @blur="$v.email.$touch()"
@keydown.enter="login"
/> />
<v-text-field <v-text-field
v-model="password" v-model="password"
...@@ -22,6 +23,7 @@ ...@@ -22,6 +23,7 @@
@input="$v.password.$touch()" @input="$v.password.$touch()"
@blur="$v.password.$touch()" @blur="$v.password.$touch()"
@click:append="showPassword = !showPassword" @click:append="showPassword = !showPassword"
@keydown.enter="login"
/> />
<v-checkbox <v-checkbox
v-model="checkbox" v-model="checkbox"
......
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