Skip to content

K
kiaisoft_tuananh_nuxt
Commit b084ca7e authored by vieanh's avatar vieanh
Browse files
Options

update header css

parent 2b0e5f8f
Hide whitespace changes
Inline Side-by-side
Showing with 276 additions and 227 deletions
components/user/Header.vue
View file @ b084ca7e
...@@ -5,118 +5,71 @@ ...@@ -5,118 +5,71 @@
<div class="header-top"> <div class="header-top">
<v-container class="pa-0"> <v-container class="pa-0">
<v-row no-gutters> <v-row no-gutters>
<v-col <v-col cols="12" sm="8" class="header-top-left">
cols="12" <span>Hello message</span>
sm="6"
>
<v-list-item-content>
<v-list-item-title>Hello message</v-list-item-title>
</v-list-item-content>
</v-col> </v-col>
<v-col <v-col cols="12" sm="4" class="header-top-right">
cols="12" <div class="dropdown">
sm="6" <span> USD </span>
class="d-flex" <v-icon small>
> mdi-chevron-down
<div class="text-center"> </v-icon>
<v-menu <div class="dropdown-content">
open-on-hover <div
offset-y v-for="(item, i) in currency"
> :key="i"
<template #activator="{ on, attrs }"> class="dropdown-item"
<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> <span>
<v-btn plain> {{ item.text }}
USD </span>
</v-btn> </div>
</v-list-item> </div>
<v-list-item>
<v-btn plain>
EUR
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</div> </div>
<div class="text-center"> <div class="dropdown">
<v-menu <span> ENG </span>
open-on-hover <v-icon small>
offset-y mdi-chevron-down
> </v-icon>
<template #activator="{ on, attrs }"> <div class="dropdown-content">
<v-btn <div
plain v-for="(item, i) in languages"
v-bind="attrs" :key="i"
v-on="on" class="dropdown-item"
>
<span>Eng</span>
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list
dense
> >
<v-list-item> <span>
<v-btn plain> {{ item.text }}
Eng </span>
</v-btn> </div>
</v-list-item> </div>
<v-list-item>
<v-btn plain>
FRH
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</div> </div>
<v-divider vertical /> <v-divider vertical />
<v-btn <div class="header-info">
plain <v-icon small>
v-bind="attrs" mdi-map-marker-outline
v-on="on" </v-icon>
>
<v-icon>mdi-map-marker-outline</v-icon>
<span>Contact</span> <span>Contact</span>
</v-btn> </div>
<v-btn <div class="header-info">
plain <v-icon small>
v-bind="attrs" mdi-alert-circle-outline
v-on="on" </v-icon>
>
<v-icon>mdi-alert-circle-outline</v-icon>
<span>Need help</span> <span>Need help</span>
</v-btn> </div>
<v-btn <div class="authentication">
plain <div class="header-info" @click="openDialogLogin">
v-bind="attrs" <v-icon small>
v-on="on" mdi-account-outline
@click="openDialogLogin" </v-icon>
> <span>Login</span>
<v-icon>mdi-account-outline</v-icon> </div>
<span>login</span> <v-icon small>
</v-btn> mdi-slash-forward
<v-icon>mdi-slash-forward</v-icon> </v-icon>
<v-btn <div class="header-info" @click="openDialogSignUp">
plain <span>Signup</span>
v-bind="attrs" </div>
v-on="on" </div>
@click="openDialogSignUp"
>
<span>Signup</span>
</v-btn>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -125,94 +78,69 @@ ...@@ -125,94 +78,69 @@
<!-- header middle --> <!-- header middle -->
<div class="header-middle d-flex"> <div class="header-middle d-flex">
<v-container py-5 d-flex> <v-container class="header-middle-content" py-7>
<v-col <v-col cols="12" md="8" class="header-middle-left padding-0">
cols="12" <div class="logo">
md="3" <v-img
> width="153px"
<v-img src="https://d-themes.com/html/riode/images/logo.png"
width="153px" />
src="https://d-themes.com/html/riode/images/logo.png" </div>
/> <v-form class="d-flex form-search">
</v-col>
<v-col
cols="12"
md="5"
>
<v-form
ref="form"
class="d-flex"
>
<v-text-field <v-text-field
outlined
dense
hide-details="auto"
label="Search" label="Search"
variant="outlined" class="search-input"
/> />
<v-btn <span class="icon">
icon <v-icon> mdi-magnify </v-icon>
> </span>
<v-icon>
mdi-magnify
</v-icon>
</v-btn>
</v-form> </v-form>
</v-col> </v-col>
<v-col <v-col cols="12" md="4" class="header-middle-right padding-0">
cols="12" <div class="hotline d-flex">
md="4"
class="d-flex"
>
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-icon large> <v-icon large>
mdi-phone mdi-phone-outline
</v-icon> </v-icon>
<span>Call us now: <div class="contact">
<b>0123456789</b> <span>Call us now:</span>
</span> <b>0(800) 123-456</b>
</v-btn> </div>
</div>
<v-divider vertical inset /> <v-divider vertical inset />
<v-btn <div class="wish-list" v-bind="attrs" v-on="on" @click.stop="drawer = true">
plain
v-bind="attrs"
v-on="on"
@click.stop="drawer = true"
>
<v-icon large> <v-icon large>
mdi-heart-outline mdi-heart-outline
</v-icon> </v-icon>
</v-btn> </div>
<v-divider vertical inset /> <v-divider vertical inset />
<v-btn <div id="menu-activator" class="cart" plain v-bind="attrs" v-on="on">
id="menu-activator" <span>Shopping cart:
plain
v-bind="attrs"
v-on="on"
>
<v-spacer />
<span>Cart:
<b>$:0.00</b> <b>$:0.00</b>
</span> </span>
<v-badge :content="15" floating> <v-badge
:content="1"
floating
bordered
overlap
>
<v-icon large> <v-icon large>
mdi-cart-outline mdi-cart-outline
</v-icon> </v-icon>
</v-badge> </v-badge>
<v-menu activator="#menu-activator" style="width: 300px"> <v-menu activator="#menu-activator" style="width: 300px">
<v-list dense three-line> <v-list dense three-line>
<v-list-item <v-list-item v-for="item in items" :key="item.title" link>
v-for="item in items"
:key="item.title"
link
>
<v-list-item-avatar> <v-list-item-avatar>
<v-img :src="item.prependAvatar" /> <v-img :src="item.prependAvatar" />
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title> <v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle> <v-list-item-subtitle>
{{ item.subtitle }}
</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
...@@ -233,12 +161,12 @@ ...@@ -233,12 +161,12 @@
<v-btn <v-btn
size="x-large" size="x-large"
color="primary" color="primary"
class="d-flex mt-4 align-center mx-auto" class="d-flex mt-4 align-center mx-auto"
> >
GO TO CHECKOUT GO TO CHECKOUT
</v-btn> </v-btn>
</v-menu> </v-menu>
</v-btn> </div>
</v-col> </v-col>
</v-container> </v-container>
</div> </div>
...@@ -250,8 +178,8 @@ ...@@ -250,8 +178,8 @@
<!-- end header bottom --> <!-- end header bottom -->
<!-- show modal --> <!-- show modal -->
<LoginModal :status="activeLogin" @close="activeLogin=false" /> <LoginModal :status="activeLogin" @close="activeLogin = false" />
<SignupModal :status="activeRegister" @close="activeRegister=false" /> <SignupModal :status="activeRegister" @close="activeRegister = false" />
<!-- show drawer --> <!-- show drawer -->
<v-navigation-drawer <v-navigation-drawer
v-model="drawer" v-model="drawer"
...@@ -262,25 +190,16 @@ ...@@ -262,25 +190,16 @@
> >
<div class="d-flex justify-space-between drawer_header"> <div class="d-flex justify-space-between drawer_header">
<b>WISHLIST</b> <b>WISHLIST</b>
<v-btn <v-btn plain @click.stop="drawer = !drawer">
plain
@click.stop="drawer = !drawer"
>
Close Close
<v-icon> <v-icon> mdi-arrow-right-thin </v-icon>
mdi-arrow-right-thin
</v-icon>
</v-btn> </v-btn>
</div> </div>
<v-divider /> <v-divider />
<v-list dense three-line> <v-list dense three-line>
<v-list-item <v-list-item v-for="item in items" :key="item.title" link>
v-for="item in items"
:key="item.title"
link
>
<v-list-item-avatar> <v-list-item-avatar>
<v-img :src="item.prependAvatar" /> <v-img :src="item.prependAvatar" />
</v-list-item-avatar> </v-list-item-avatar>
...@@ -319,31 +238,44 @@ export default { ...@@ -319,31 +238,44 @@ export default {
activeLogin: false, activeLogin: false,
activeRegister: false, activeRegister: false,
drawer: false, drawer: false,
currency: [
{ text: 'USD', icon: 'mdi-clock' },
{ text: 'EUR', icon: 'mdi-account' }
],
languages: [
{ text: 'ENG', icon: 'mdi-clock' },
{ text: 'FRH', icon: 'mdi-account' }
],
items: [ items: [
{ {
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg', prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
title: 'Brunch this weekend?', 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?' 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', prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
title: 'Summer BBQ', 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.' 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', prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
title: 'Oui oui', title: 'Oui oui',
subtitle: '<span class="text-primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?' 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', prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
title: 'Birthday gift', title: 'Birthday gift',
subtitle: '<span class="text-primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?' 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', prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
title: 'Recipe to try', title: 'Recipe to try',
subtitle: '<span class="text-primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.' subtitle:
'<span class="text-primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
} }
] ]
} }
...@@ -358,8 +290,8 @@ export default { ...@@ -358,8 +290,8 @@ export default {
this.activeLogin = true this.activeLogin = true
}, },
openDialogSignUp () { openDialogSignUp () {
this.activeLogin = false this.activeRegister = false
this.activeLogin = true this.activeRegister = true
}, },
remove (index) { remove (index) {
this.items.splice(index, 1) this.items.splice(index, 1)
...@@ -370,40 +302,155 @@ export default { ...@@ -370,40 +302,155 @@ export default {
</script> </script>
<style scoped> <style scoped>
.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;
b { color: rgba(0, 0, 0, 0.8);
display: block; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
} }
.col-md { .header-top-left {
align-items: center display: flex;
} align-items: center;
.v-application .d-flex { }
align-items: center; .header-top-right {
} display: flex;
.favorite-modal { align-items: center;
position: fixed; justify-content: space-between;
} z-index: 10;
.favorite-modal .modal_header { }
padding: 20px 0px 20px 30px; .dropdown {
} display: flex;
.modal_header > b { cursor: pointer;
font-weight: 700; position: relative;
font-size: 16px; }
} .dropdown > span {
.modal_header > button { line-height: 2rem;
font-size: 12px; }
} .dropdown-content {
.modal_header > i { display: none;
scale: 0.8; position: absolute;
} top: 30px;
.drawer_header{ background: white;
padding: 20px 0 20px 30px; box-shadow: 2px 2px 15px 3px rgba(1, 1, 1, 0.3);
} }
.v-menu__content { .dropdown-item {
width: 300px; margin: 5px 7px;
top: 153px !important; }
padding: 25px; .v-divider--vertical {
} min-height: 70%;
max-height: 70%;
margin: 5px -1px;
}
.header-info {
cursor: pointer;
}
span:hover {
color: #2266cc;
cursor: pointer;
}
.dropdown:hover .dropdown-content {
display: block;
}
.header-info {
display: flex;
align-items: center;
}
.header-info:hover .span.v-icon{
color: #2266cc;
}
.authentication {
display: flex;
}
.v-icon.v-icon {
margin: 0 3px;
}
.header-middle-content {
display: flex;
padding-left: 0;
padding-right: 0;
font-size: 12px;
color: #000000;
}
.header-middle-left {
display: flex;
align-items: center;
padding-right: 0;
padding-left: 0;
justify-content: space-between;
}
.padding-0 {
padding: 0 !important;
}
.logo {
display: flex;
align-items: center;
}
.form-search {
width: 100%;
position: relative;
margin: 0 auto;
margin: 0 5vw;
}
.search-input {
width: inherit;
position: absolute;
}
span.icon {
position: absolute;
right: 5px;
cursor: pointer;
}
span.icon:hover .v-icon.v-icon{
color: #2266cc;
}
.header-middle-right {
display: flex;
justify-content: space-between;
}
b {
display: block;
font-size: 14px;
}
.hotline {
cursor: pointer;
}
.hotline:hover {
color: #2266cc;
}
.wish-list {
cursor: pointer;
}
.wish-list:hover .v-icon.v-icon {
color: #2266cc;
}
.cart {
display: flex;
}
.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> </style>
layouts/user.vue
View file @ b084ca7e
...@@ -29,5 +29,7 @@ export default { ...@@ -29,5 +29,7 @@ export default {
</script> </script>
<style> <style>
body{
font-family: monospace;
}
</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