Skip to content

K
kiaisoft_tuananh_nuxt
Commit 36bc553c authored by vietanh-0511's avatar vietanh-0511
Browse files
Options

home page header

parent 6f198a23
Show whitespace changes
Inline Side-by-side
Showing with 315 additions and 4 deletions
components/user/Header.vue 0 → 100644
View file @ 36bc553c
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
<!-- header top -->
<div class="header-top">
<v-container>
<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"
>
<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"
>
<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"
/>
<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"
>
<v-icon large>
mdi-heart-outline
</v-icon>
</v-btn>
<v-divider vertical inset />
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-icon large>
mdi-cart-outline
</v-icon>
<span>Cart:
<b>$:0.00</b>
</span>
</v-btn>
</v-col>
</v-container>
</div>
<!-- end header middle -->
<!-- header bottom -->
<div class="header-bottom">
<v-container>
<div class="navbar d-flex justify-space-between col-md-7">
<div>
<span>
Home
</span>
</div>
<div>
<span>
Categories
</span>
</div>
<div>
<span>
Products
</span>
</div>
<div>
<span>
Pages
</span>
</div>
<div>
<span>
Elements
</span>
</div>
<div>
<span>
Blogs
</span>
</div>
<div>
<span>
About
</span>
</div>
</div>
</v-container>
</div>
<!-- end header bottom -->
</div>
</template>
<script>
export default {
name: 'UserHeader'
}
</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;
}
.navbar span {
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
.navbar span:hover {
color: #26c;
}
</style>
layouts/none.vue deleted 100644 → 0
View file @ 6f198a23
<template>
<nuxt />
</template>
\ No newline at end of file
layouts/user.vue 0 → 100644
View file @ 36bc553c
<template>
<v-app>
<UserHeader />
<Nuxt />
</v-app>
</template>
<script>
import Header from '@/components/user/Header'
export default {
component: {
Header
},
created () {
this.changeColor()
},
methods: {
changeColor () {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
return true
}
}
}
</script>
<style>
</style>
pages/home-page/index.vue 0 → 100644
View file @ 36bc553c
<template>
<div>this is body</div>
</template>
<script>
export default {
layout: 'user'
}
</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