|
|
|
|
<template>
|
|
|
|
|
<div class="info-bar-header">
|
|
|
|
|
<div
|
|
|
|
|
class="info-bar-header-wrap layout-center flex flex-between flex-middle"
|
|
|
|
|
>
|
|
|
|
|
<div class="header-wrap__logo">马士兵严选欢迎你!</div>
|
|
|
|
|
<div class="header-wrap__content flex flex-middle">
|
|
|
|
|
<div class="header-wrap-content__login">
|
|
|
|
|
<div v-if="isLogin" class="wrap-content-login__text flex">
|
|
|
|
|
<span>请先</span>
|
|
|
|
|
<span class="content-login-text--light">登录/注册</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dropdown @visible-change="menuVisible = $event">
|
|
|
|
|
<div class="wrap-content-login__info flex flex-middle flex-center">
|
|
|
|
|
<span>你好,{{ userInfo.name }}</span>
|
|
|
|
|
<img class="content-login-info__logo" :src="menuIcon" />
|
|
|
|
|
</div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
|
|
|
|
|
<div class="menu-item__wrap flex flex-middle">
|
|
|
|
|
<img class="menu-item-wrap__avatar" />
|
|
|
|
|
<span>{{ userInfo.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="menu-item__line"></div>
|
|
|
|
|
<el-dropdown-item
|
|
|
|
|
class="flex flex-between flex-middle"
|
|
|
|
|
v-for="item in menuList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
>
|
|
|
|
|
<span> {{ item.label }}</span>
|
|
|
|
|
<img src="@/static/images/layout/icon-arrow.png" />
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
<template>
|
|
|
|
|
<div v-if="!menuVisible" class="header-wrap-content--line"></div>
|
|
|
|
|
<div class="header-wrap-content__common flex flex-middle">
|
|
|
|
|
<img src="@/static/images/layout/icon-message.png" />
|
|
|
|
|
<span>消息</span>
|
|
|
|
|
<div class="wrap-content-message__tip">33</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="header-wrap-content--line"></div>
|
|
|
|
|
<div class="header-wrap-content__common flex flex-middle">
|
|
|
|
|
<img src="@/static/images/layout/icon-order.png" />
|
|
|
|
|
<span>我的订单</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header-wrap-content--line"></div>
|
|
|
|
|
<div class="header-wrap-content__common flex flex-middle">
|
|
|
|
|
<img src="@/static/images/layout/icon-phone.png" />
|
|
|
|
|
<span>下载app</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
const MENU_VALUE = {
|
|
|
|
|
PERSONAL: 1,
|
|
|
|
|
ADDRESS: 2,
|
|
|
|
|
LOGON_OUT: 3,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isLogin: false,
|
|
|
|
|
userInfo: {
|
|
|
|
|
name: "仙女广",
|
|
|
|
|
},
|
|
|
|
|
menuVisible: false,
|
|
|
|
|
menuList: [
|
|
|
|
|
{
|
|
|
|
|
label: "个人中心",
|
|
|
|
|
value: MENU_VALUE.PERSONAL,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "收货地址",
|
|
|
|
|
value: MENU_VALUE.ADDRESS,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "退出登录",
|
|
|
|
|
value: MENU_VALUE.LOGON_OUT,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
menuIcon() {
|
|
|
|
|
return this.menuVisible
|
|
|
|
|
? require("@/static/images/layout/icon-up-light.png")
|
|
|
|
|
: require("@/static/images/layout/icon-up.png");
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onMenuClick() {},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.dropdown-menu-self {
|
|
|
|
|
width: 200px;
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
.popper__arrow {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.el-dropdown-menu__item:hover {
|
|
|
|
|
background: #f8f9fb;
|
|
|
|
|
color: #666666;
|
|
|
|
|
}
|
|
|
|
|
.el-dropdown-menu__item {
|
|
|
|
|
height: 42px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
img {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.menu-item__wrap {
|
|
|
|
|
padding: 16px 24px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
.menu-item-wrap__avatar {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
margin-right: 13px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.menu-item__line {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background: #eeeeee;
|
|
|
|
|
border-radius: 0px 0px 0px 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.info-bar-header {
|
|
|
|
|
height: 30px;
|
|
|
|
|
color: #999999;
|
|
|
|
|
background: #f1f1f1;
|
|
|
|
|
border-radius: 0px 0px 0px 0px;
|
|
|
|
|
.info-bar-header-wrap {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
.header-wrap__content {
|
|
|
|
|
.header-wrap-content__login {
|
|
|
|
|
.wrap-content-login__text {
|
|
|
|
|
.content-login-text--light {
|
|
|
|
|
margin-left: 6px;
|
|
|
|
|
color: #ff875b;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wrap-content-login__info:hover {
|
|
|
|
|
background: #ffffff !important;
|
|
|
|
|
color: #ff875b;
|
|
|
|
|
}
|
|
|
|
|
.wrap-content-login__info {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0 18px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.content-login-info__logo {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 4px;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wrap-content-message__tip {
|
|
|
|
|
min-width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
padding: 0 3px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #ff512b;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
.header-wrap-content--line {
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
background: #d8d8d8;
|
|
|
|
|
}
|
|
|
|
|
.header-wrap-content__common {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 0 18px;
|
|
|
|
|
img {
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|