Skip to content

K
kiaisoft_tuananh_nuxt
Commit 4e0ffb37 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

Merge branch 'feature/home-page' into 'feature/deploy-to-aws' 

add feature home-page

See merge request !32
parents a6573e9a e021bbda
Show whitespace changes
Inline Side-by-side
Showing with 427 additions and 8 deletions
components/PageCarousels.vue
View file @ 4e0ffb37
......@@ -14,11 +14,7 @@
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ index +1 }}
</div>
</v-row>
/>
</v-carousel-item>
</v-carousel>
</template>
......
components/user/Header.vue
View file @ 4e0ffb37
<template>
<div>
<div class="header-all">
<!-- header top -->
<div class="header-top">
<v-container class="pa-0">
......@@ -290,6 +290,7 @@ export default {
}
this.updateWishlist()
this.updateCart()
window.addEventListener('scroll', this.handleScroll)
},
methods: {
closeDialog () {
......@@ -415,12 +416,29 @@ export default {
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>
<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 {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 12px;
......
pages/banners/index.vue
View file @ 4e0ffb37
......@@ -196,7 +196,7 @@
{{ index + 1 }}
</template>
<template #[`item.image`]="{ item }">
<v-img :src="item.image" width="200" />
<v-img :src="item.image" max-width="200" />
</template>
<template #[`item.status`]="{ item }">
<v-switch
......
pages/home-page/index.vue
View file @ 4e0ffb37
......@@ -2,6 +2,256 @@
<div>
<!-- Banners -->
<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>
</template>
......@@ -12,9 +262,162 @@ export default {
layout: 'user',
component: {
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>
<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>
pages/login.vue
View file @ 4e0ffb37
......@@ -10,6 +10,7 @@
required
@input="$v.email.$touch()"
@blur="$v.email.$touch()"
@keydown.enter="login"
/>
<v-text-field
v-model="password"
......@@ -22,6 +23,7 @@
@input="$v.password.$touch()"
@blur="$v.password.$touch()"
@click:append="showPassword = !showPassword"
@keydown.enter="login"
/>
<v-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