Skip to content

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

update header css

parent 2b0e5f8f
Show whitespace changes
Inline Side-by-side
Showing with 276 additions and 227 deletions
components/user/Header.vue
View file @ b084ca7e
......@@ -5,118 +5,71 @@
<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 cols="12" sm="8" class="header-top-left">
<span>Hello message</span>
</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-col cols="12" sm="4" class="header-top-right">
<div class="dropdown">
<span> USD </span>
<v-icon small>
mdi-chevron-down
</v-icon>
<div class="dropdown-content">
<div
v-for="(item, i) in currency"
:key="i"
class="dropdown-item"
>
<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>
<span>
{{ item.text }}
</span>
</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
</div>
</div>
<div class="dropdown">
<span> ENG </span>
<v-icon small>
mdi-chevron-down
</v-icon>
<div class="dropdown-content">
<div
v-for="(item, i) in languages"
:key="i"
class="dropdown-item"
>
<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>
<span>
{{ item.text }}
</span>
</div>
</div>
</div>
<v-divider vertical />
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-map-marker-outline</v-icon>
<div class="header-info">
<v-icon small>
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>
</div>
<div class="header-info">
<v-icon small>
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"
>
</div>
<div class="authentication">
<div class="header-info" @click="openDialogLogin">
<v-icon small>
mdi-account-outline
</v-icon>
<span>Login</span>
</div>
<v-icon small>
mdi-slash-forward
</v-icon>
<div class="header-info" @click="openDialogSignUp">
<span>Signup</span>
</v-btn>
</div>
</div>
</v-col>
</v-row>
</v-container>
......@@ -125,94 +78,69 @@
<!-- header middle -->
<div class="header-middle d-flex">
<v-container py-5 d-flex>
<v-col
cols="12"
md="3"
>
<v-container class="header-middle-content" py-7>
<v-col cols="12" md="8" class="header-middle-left padding-0">
<div class="logo">
<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"
>
</div>
<v-form class="d-flex form-search">
<v-text-field
outlined
dense
hide-details="auto"
label="Search"
variant="outlined"
class="search-input"
/>
<v-btn
icon
>
<v-icon>
mdi-magnify
</v-icon>
</v-btn>
<span class="icon">
<v-icon> mdi-magnify </v-icon>
</span>
</v-form>
</v-col>
<v-col
cols="12"
md="4"
class="d-flex"
>
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-col cols="12" md="4" class="header-middle-right padding-0">
<div class="hotline d-flex">
<v-icon large>
mdi-phone
mdi-phone-outline
</v-icon>
<span>Call us now:
<b>0123456789</b>
</span>
</v-btn>
<div class="contact">
<span>Call us now:</span>
<b>0(800) 123-456</b>
</div>
</div>
<v-divider vertical inset />
<v-btn
plain
v-bind="attrs"
v-on="on"
@click.stop="drawer = true"
>
<div class="wish-list" v-bind="attrs" v-on="on" @click.stop="drawer = true">
<v-icon large>
mdi-heart-outline
</v-icon>
</v-btn>
</div>
<v-divider vertical inset />
<v-btn
id="menu-activator"
plain
v-bind="attrs"
v-on="on"
>
<v-spacer />
<span>Cart:
<div id="menu-activator" class="cart" plain v-bind="attrs" v-on="on">
<span>Shopping cart:
<b>$:0.00</b>
</span>
<v-badge :content="15" floating>
<v-badge
:content="1"
floating
bordered
overlap
>
<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 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-subtitle>
{{ item.subtitle }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
......@@ -238,7 +166,7 @@
GO TO CHECKOUT
</v-btn>
</v-menu>
</v-btn>
</div>
</v-col>
</v-container>
</div>
......@@ -250,8 +178,8 @@
<!-- end header bottom -->
<!-- show modal -->
<LoginModal :status="activeLogin" @close="activeLogin=false" />
<SignupModal :status="activeRegister" @close="activeRegister=false" />
<LoginModal :status="activeLogin" @close="activeLogin = false" />
<SignupModal :status="activeRegister" @close="activeRegister = false" />
<!-- show drawer -->
<v-navigation-drawer
v-model="drawer"
......@@ -262,25 +190,16 @@
>
<div class="d-flex justify-space-between drawer_header">
<b>WISHLIST</b>
<v-btn
plain
@click.stop="drawer = !drawer"
>
<v-btn plain @click.stop="drawer = !drawer">
Close
<v-icon>
mdi-arrow-right-thin
</v-icon>
<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 v-for="item in items" :key="item.title" link>
<v-list-item-avatar>
<v-img :src="item.prependAvatar" />
</v-list-item-avatar>
......@@ -319,31 +238,44 @@ export default {
activeLogin: false,
activeRegister: 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: [
{
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?'
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.'
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?'
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?'
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.'
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 {
this.activeLogin = true
},
openDialogSignUp () {
this.activeLogin = false
this.activeLogin = true
this.activeRegister = false
this.activeRegister = true
},
remove (index) {
this.items.splice(index, 1)
......@@ -370,40 +302,155 @@ export default {
</script>
<style scoped>
.header-top{
.header-top {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
b {
font-size: 12px;
color: rgba(0, 0, 0, 0.8);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.header-top-left {
display: flex;
align-items: center;
}
.header-top-right {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.dropdown {
display: flex;
cursor: pointer;
position: relative;
}
.dropdown > span {
line-height: 2rem;
}
.dropdown-content {
display: none;
position: absolute;
top: 30px;
background: white;
box-shadow: 2px 2px 15px 3px rgba(1, 1, 1, 0.3);
}
.dropdown-item {
margin: 5px 7px;
}
.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;
}
.col-md {
align-items: center
}
.v-application .d-flex {
}
.header-info {
display: flex;
align-items: center;
}
.favorite-modal {
}
.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 {
}
.favorite-modal .modal_header {
padding: 20px 0px 20px 30px;
}
.modal_header > b {
}
.modal_header > b {
font-weight: 700;
font-size: 16px;
}
.modal_header > button {
}
.modal_header > button {
font-size: 12px;
}
.modal_header > i {
}
.modal_header > i {
scale: 0.8;
}
.drawer_header{
}
.drawer_header {
padding: 20px 0 20px 30px;
}
.v-menu__content {
}
.v-menu__content {
width: 300px;
top: 153px !important;
padding: 25px;
}
}
</style>
layouts/user.vue
View file @ b084ca7e
......@@ -29,5 +29,7 @@ export default {
</script>
<style>
body{
font-family: monospace;
}
</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