153 lines
4.3 KiB
Vue
153 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="header">
|
|
<div class="left">
|
|
<!-- 目录和搜索 -->
|
|
<!-- <el-icon color="white"><OfficeBuilding /></el-icon>
|
|
<div class="icon" @click="about" style="margin-left: 4px;">关于</div>
|
|
<el-icon color="white"><Guide /></el-icon>
|
|
<div class="icon" @click="pickingDetails" style="margin-left: 4px;">领料详情</div> -->
|
|
<div class="leftBox">
|
|
<div
|
|
class="titleOne"
|
|
@click="toggleDropdown"
|
|
@mousemove="changeBackgroundColorMove1()"
|
|
@mouseleave="changeBackgroundColorLeave1()"
|
|
:style="backgroundColor1"
|
|
>
|
|
目录<el-icon style="padding-left: 5px;"><ArrowRight /></el-icon>
|
|
</div>
|
|
<div class="dropdown" v-if="showDropdown">
|
|
<div
|
|
class="titleTwo"
|
|
@click="about()"
|
|
@mousemove="changeBackgroundColorMove2()"
|
|
@mouseleave="changeBackgroundColorLeave2()"
|
|
:style="backgroundColor2"
|
|
>
|
|
关于
|
|
</div>
|
|
<div
|
|
class="titleThree"
|
|
@click="pickingDetails()"
|
|
@mousemove="changeBackgroundColorMove3()"
|
|
@mouseleave="changeBackgroundColorLeave3()"
|
|
:style="backgroundColor3"
|
|
>
|
|
物料申请
|
|
</div>
|
|
<div
|
|
class="titleFour"
|
|
@click="finishedProduct()"
|
|
@mousemove="changeBackgroundColorMove4()"
|
|
@mouseleave="changeBackgroundColorLeave4()"
|
|
:style="backgroundColor4"
|
|
>
|
|
成品入库
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="position: fixed; top: 6%; left: 50%; transform: translate(-50%, -50%);">
|
|
<img src="../assets/logo.png" style="width: 80px; height: 80px;" />
|
|
</div>
|
|
<div class="right" v-if="!this.token">
|
|
<!-- 注册和登录 -->
|
|
<el-icon color="white"><Coin /></el-icon>
|
|
<div class="icon" @click="register">注册</div>
|
|
<el-icon color="white"><Check /></el-icon>
|
|
<div class="icon" @click="login">登录</div>
|
|
</div>
|
|
<div class="right" v-if="this.token">
|
|
<!-- 注册和登录 -->
|
|
<el-icon color="white"><User /></el-icon>
|
|
<div class="icon">{{this.name}}</div>
|
|
<el-icon color="white"><RemoveFilled /></el-icon>
|
|
<div class="icon" @click="logout">退出登录</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
clickNum:0,
|
|
showDropdown: false,
|
|
backgroundColor1:'',
|
|
backgroundColor2:'',
|
|
backgroundColor3:'',
|
|
backgroundColor4:'',
|
|
token:false,
|
|
name:''
|
|
};
|
|
},
|
|
methods: {
|
|
changeBackgroundColorMove1(){
|
|
this.backgroundColor1 = 'background-color: black;'
|
|
},
|
|
changeBackgroundColorLeave1(){
|
|
this.backgroundColor1 = ''
|
|
},
|
|
changeBackgroundColorMove2(){
|
|
this.backgroundColor2 = 'background-color:black;'
|
|
},
|
|
changeBackgroundColorLeave2(){
|
|
this.backgroundColor2 = ''
|
|
},
|
|
changeBackgroundColorMove3(){
|
|
this.backgroundColor3 = 'background-color: black;'
|
|
},
|
|
changeBackgroundColorLeave3(){
|
|
this.backgroundColor3 = ''
|
|
},
|
|
changeBackgroundColorMove4(){
|
|
this.backgroundColor4 = 'background-color: black;'
|
|
},
|
|
changeBackgroundColorLeave4(){
|
|
this.backgroundColor4 = ''
|
|
},
|
|
toggleDropdown() {
|
|
this.showDropdown = !this.showDropdown;
|
|
this.clickNum++
|
|
},
|
|
//路由方法
|
|
pickingDetails() {
|
|
this.$router.push({ name: "pickingDetails" });
|
|
},
|
|
login() {
|
|
this.$router.push({ name: "login" });
|
|
},
|
|
register() {
|
|
this.$router.push({ name: "register" });
|
|
},
|
|
about() {
|
|
this.$router.push({ name: "about" });
|
|
},
|
|
finishedProduct(){
|
|
this.$router.push({ name: "finishedProduct" });
|
|
}
|
|
,logout(){
|
|
// 清除本地存储中的用户信息
|
|
localStorage.removeItem('contact');
|
|
|
|
// 重置状态
|
|
this.token = false;
|
|
this.name = null;
|
|
}
|
|
},
|
|
//初始加载
|
|
mounted(){
|
|
if(localStorage.getItem('contact') != null){
|
|
this.token=true
|
|
this.name = localStorage.getItem('contact');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "../assets/css/header.css";
|
|
</style>
|