<template>
|
<div class="IndexHeader">
|
<div class="header" :class="{ showBox: isShow, disOpacity: !opacity }">
|
<!-- 左侧 -->
|
<div class="left">
|
<router-link to="/">
|
<img class="logo" src="/images/index/LOGO.png" alt="" />
|
</router-link>
|
<div class="title" @click="$router.push('/')">工业互联网平台</div>
|
<div class="label" @click="$router.push('/')">首页</div>
|
<div class="label">云服务</div>
|
<div class="label" @click="$router.push('/manageCenter')">管理中心</div>
|
<div class="label" @click="$router.push('/product')">应用商城</div>
|
</div>
|
|
<!-- 右侧 -->
|
<div class="right">
|
<el-input
|
placeholder="请输入关键词"
|
v-model="keyWord"
|
@focus="showInputBox(true)"
|
:class="{ Unlogin: !userInfo }"
|
>
|
<div class="iconList" slot="suffix">
|
<i class="search iconfont" v-if="!isShow"></i>
|
<i class="search iconfont" @click="search" v-if="isShow"></i>
|
<i class="del iconfont" v-if="isShow" @click="showInputBox(false)"></i>
|
</div>
|
</el-input>
|
|
<!-- 未登录情况 -->
|
<div class="headerLogin" v-if="!userInfo" @click="$router.push('/login')">
|
登录
|
</div>
|
<div class="register" v-if="!userInfo" @click="$router.push('/register')">
|
免费注册
|
</div>
|
|
<!-- 已登录情况 -->
|
<img
|
class="userImg"
|
src="/images/index/8.jpg"
|
alt=""
|
v-if="userInfo"
|
@mouseenter="showUserBox"
|
@mouseleave="hiddenUserBox"
|
style="border-radius: 50%"
|
/>
|
</div>
|
</div>
|
|
<!-- 用户下拉框 -->
|
<div class="userBox" v-if="userInfo && isShowUserBox" @mouseenter="showUserBox" @mouseleave="hiddenUserBox">
|
<div class="userName">{{ userInfo.username }}</div>
|
<ul>
|
<!-- <li class="money">
|
<div class="label">余额</div>
|
<div class="content">
|
<span class="button">充值</span>
|
<span class="number">￥0</span>
|
</div>
|
</li>
|
-->
|
<li class="personal">
|
<div class="label">
|
<router-link to="/personalCenter">个人中心</router-link>
|
</div>
|
|
<div class="content"><span class="iconfont"></span> 已实名认证</div>
|
</li>
|
|
<li>
|
<div class="label" @click="jump(0)">订单管理</div>
|
</li>
|
|
<!-- <li>
|
<div class="label">产品续费</div>
|
</li> -->
|
|
<!-- <li>
|
<div class="label">未读消息</div>
|
</li> -->
|
|
<li>
|
<div class="label" @click="jump(0, 1)">未支付订单</div>
|
</li>
|
|
<li>
|
<div class="label">
|
<router-link to="/manageCenter">管理中心</router-link>
|
</div>
|
</li>
|
</ul>
|
<div class="logOut" @click="logOut">退出登录</div>
|
</div>
|
|
<!-- 输入下拉框 -->
|
<div class="inputBox" :class="{ Unlogin: !userInfo }" v-if="isShowBox">
|
<div class="hotKey">
|
<div class="title">热门搜索</div>
|
<ul class="keyCard">
|
<li class="keyItem" @click="jumpToSearch(item)" v-for="(item, index) in hotKeyArr" :key="index">
|
{{ item }}
|
</li>
|
</ul>
|
</div>
|
|
<!-- <div class="historyKey">
|
<div class="title colorLight">历史搜索</div>
|
|
<ul class="keyCard">
|
<li
|
class="keyItem"
|
v-for="(item, index) in historyKeyArr"
|
:key="index"
|
>
|
{{ item }}
|
</li>
|
</ul>
|
</div> -->
|
</div>
|
|
<!-- 遮罩层 -->
|
<div class="mask" v-if="isShowBox"></div>
|
</div>
|
</template>
|
|
<script>
|
import { logout } from "@/api/login"
|
|
export default {
|
props: {
|
opacity: {
|
type: Boolean,
|
default: true
|
}
|
},
|
name: "Header",
|
created() {
|
//尝试从session中拿用户信息
|
this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
|
/* document.addEventListener("click", () => {
|
this.showUserBox = false;
|
}); */
|
},
|
data() {
|
return {
|
keyWord: "", //输入框内容
|
isShow: false, //显示下拉框
|
hotKeyArr: ["打电话", "离岗", "睡岗", "入侵", "离岗", "安全帽"], //热门关键词
|
historyKeyArr: ["云服务", "算法", "管理服务", "应用"], //历史关键词
|
isShowBox: false, //输入下拉框
|
userInfo: null, //用户信息
|
isShowUserBox: false, //用户信息弹层
|
UserTimer: null // 控制弹层的定时器
|
}
|
},
|
methods: {
|
// 控制输入框box
|
showInputBox(toggle) {
|
this.isShow = toggle
|
this.isShowBox = toggle
|
this.keyWord = ""
|
this.$emit("showInputBox", toggle)
|
},
|
|
//控制用户信息box
|
showUserBox() {
|
if (this.UserTimer) {
|
clearTimeout(this.UserTimer)
|
this.UserTimer = null
|
}
|
this.isShowUserBox = true
|
},
|
hiddenUserBox() {
|
const _this = this
|
this.UserTimer = setTimeout(() => {
|
_this.isShowUserBox = false
|
}, 200)
|
},
|
|
logOut() {
|
logout().then(() => {
|
sessionStorage.removeItem("loginedInfo")
|
sessionStorage.removeItem("expires_in")
|
sessionStorage.removeItem("userInfo")
|
this.$router.push({
|
path: "/login"
|
})
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "退出成功！",
|
duration: 2500,
|
offset: 57
|
})
|
})
|
},
|
|
jump(id, type) {
|
if (type) {
|
sessionStorage.setItem("type", type)
|
}
|
this.$router.push({
|
path: "/personalCenter",
|
query: {
|
id: id
|
}
|
})
|
},
|
|
search() {
|
this.$router.push({
|
path: "/product",
|
query: {
|
keyWord: this.keyWord
|
}
|
})
|
},
|
|
jumpToSearch(keyWord) {
|
this.$router.push({
|
path: "/product",
|
query: {
|
keyWord
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
width: 100%;
|
min-width: 1280px;
|
background-color: #1f2a3e;
|
color: #fff;
|
font-size: 14px;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.logo {
|
margin: 0 7px 0 20px;
|
cursor: pointer;
|
}
|
|
.title {
|
margin-right: 30px;
|
cursor: pointer;
|
}
|
|
.label {
|
margin-right: 20px;
|
cursor: pointer;
|
}
|
}
|
|
.right {
|
position: relative;
|
display: flex;
|
align-items: center;
|
|
.el-input ::v-deep {
|
input {
|
height: 62px;
|
width: 180px;
|
background-color: rgba(255, 255, 255, 0.5);
|
border: none;
|
border-radius: 0;
|
color: #fff;
|
|
&::-webkit-input-placeholder {
|
color: #fff;
|
}
|
}
|
|
.el-input__suffix {
|
padding-top: 23px;
|
padding-right: 23px;
|
}
|
|
.search {
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
|
.headerLogin {
|
flex-shrink: 0;
|
width: 62px;
|
height: 62px;
|
text-align: center;
|
line-height: 62px;
|
background-color: rgb(64, 97, 202);
|
cursor: pointer;
|
}
|
|
.register {
|
flex-shrink: 0;
|
width: 96px;
|
height: 62px;
|
text-align: center;
|
line-height: 62px;
|
background: #0065ff;
|
cursor: pointer;
|
}
|
|
.userImg {
|
height: 48px;
|
width: 48px;
|
margin: 0 20px;
|
}
|
}
|
|
&:hover,
|
&.showBox,
|
&.disOpacity {
|
background-color: #1f2a3e;
|
|
.left {
|
font-family: PingFang SC Regular;
|
font-size: 14px;
|
font-weight: normal;
|
line-height: 20px;
|
letter-spacing: 0px;
|
color: #ffffff;
|
.title {
|
// color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
.label {
|
// color: #3d3d3d;
|
&:hover {
|
color: #0065ff;
|
}
|
}
|
}
|
.right {
|
.el-input ::v-deep {
|
input {
|
background-color: rgba(245, 247, 250, 0.45);
|
color: #3d3d3d;
|
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
}
|
|
.search {
|
color: rgb(32, 119, 254);
|
}
|
}
|
|
.headerLogin {
|
background-color: #fff;
|
color: #3d3d3d;
|
}
|
}
|
}
|
|
&.showBox .right .el-input {
|
position: absolute;
|
z-index: 4;
|
top: -7px;
|
right: 88px;
|
width: 300px;
|
background-color: #fff;
|
|
&.Unlogin {
|
right: 158px;
|
}
|
|
::v-deep input {
|
width: 300px;
|
background-color: #fff;
|
}
|
|
.del {
|
color: rgb(32, 119, 254);
|
margin-left: 30px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.inputBox {
|
box-sizing: border-box;
|
position: absolute;
|
top: 62px;
|
right: 88px;
|
padding: 12px 20px 8px 20px;
|
width: 300px;
|
background-color: #fff;
|
border-top: 1px solid rgb(204, 204, 204);
|
z-index: 4;
|
|
&.Unlogin {
|
top: 52px;
|
right: 158px;
|
}
|
|
.hotKey,
|
.historyKey {
|
margin-top: 12px;
|
|
.title {
|
margin-bottom: 16px;
|
font-weight: 700;
|
font-size: 14px;
|
}
|
|
.keyCard {
|
display: flex;
|
flex-wrap: wrap;
|
|
.keyItem {
|
display: inline-block;
|
margin-right: 12px;
|
margin-bottom: 12px;
|
padding: 5px 12px;
|
color: #5c7399;
|
background-color: #e4e9f1;
|
font-size: 12px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
|
.mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #000000;
|
opacity: 0.2;
|
z-index: 3;
|
}
|
|
.userBox {
|
box-sizing: border-box;
|
position: absolute;
|
z-index: 10;
|
right: 20px;
|
top: 64px;
|
padding: 0 20px;
|
width: 240px;
|
height: 327px;
|
background-color: #fff;
|
box-shadow: 0px 4px 12px rgba(96, 100, 106, 0.12);
|
border-radius: 4px;
|
|
.userName {
|
margin: 20px 0;
|
font-weight: bold;
|
font-size: 18px;
|
}
|
|
ul {
|
height: 200px;
|
border-top: 1px solid #e9ebee;
|
border-bottom: 1px solid #e9ebee;
|
|
li {
|
display: flex;
|
justify-content: space-between;
|
margin: 20px 0;
|
font-size: 14px;
|
|
.label {
|
cursor: pointer;
|
&:hover {
|
color: #0065ff;
|
}
|
}
|
|
&.personal .content {
|
color: #36b24a;
|
}
|
|
&.money .content {
|
color: #666666;
|
|
.button {
|
display: inline-block;
|
margin-right: 10px;
|
width: 34px;
|
height: 24px;
|
text-align: center;
|
line-height: 24px;
|
font-size: 12px;
|
border: 1px solid #ff6a00;
|
color: #ff6a00;
|
}
|
}
|
}
|
}
|
|
.logOut {
|
margin-top: 20px;
|
font-size: 16px;
|
color: #3d3d3d;
|
cursor: pointer;
|
|
&:hover {
|
color: #0065ff;
|
}
|
}
|
}
|
</style>
|
