145 lines
4.0 KiB
Vue
145 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="header">
|
|
<div class="left">
|
|
<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 setup>
|
|
import {ref,reactive, onMounted} from 'vue'
|
|
import router from "../router";
|
|
|
|
const clickNum = ref(0)
|
|
let showDropdown = ref(false)
|
|
const backgroundColor1 = ref('')
|
|
const backgroundColor2 = ref('')
|
|
const backgroundColor3 = ref('')
|
|
const backgroundColor4 = ref('')
|
|
const token = ref(false)
|
|
const name = ref('')
|
|
|
|
function changeBackgroundColorMove1(){
|
|
backgroundColor1.value = 'background-color: black;'
|
|
}
|
|
function changeBackgroundColorLeave1(){
|
|
backgroundColor1.value = ''
|
|
}
|
|
function changeBackgroundColorMove2(){
|
|
backgroundColor2.value = 'background-color:black;'
|
|
}
|
|
function changeBackgroundColorLeave2(){
|
|
backgroundColor2.value = ''
|
|
}
|
|
function changeBackgroundColorMove3(){
|
|
backgroundColor3.value = 'background-color: black;'
|
|
}
|
|
function changeBackgroundColorLeave3(){
|
|
backgroundColor3.value = ''
|
|
}
|
|
function changeBackgroundColorMove4(){
|
|
backgroundColor4.value = 'background-color: black;'
|
|
}
|
|
function changeBackgroundColorLeave4(){
|
|
backgroundColor4.value = ''
|
|
}
|
|
function toggleDropdown() {
|
|
console.log("showDropdown:",showDropdown.value)
|
|
showDropdown.value = !showDropdown.value
|
|
clickNum.value++
|
|
|
|
}
|
|
//路由方法
|
|
function pickingDetails(){
|
|
router.push({name:'pickingDetails'})
|
|
}
|
|
function login(){
|
|
router.push({name:'login'})
|
|
}
|
|
function register(){
|
|
router.push({name:"register"})
|
|
}
|
|
function about(){
|
|
router.push({name:'about'})
|
|
}
|
|
function finishedProduct(){
|
|
router.push({name:'finishedProduct'})
|
|
}
|
|
|
|
function logout(){
|
|
localStorage.removeItem('contact');
|
|
token.value = false
|
|
name = null
|
|
}
|
|
|
|
|
|
onMounted(()=>{
|
|
if(localStorage.getItem('contact') != null){
|
|
token.value=true
|
|
name.value = localStorage.getItem('contact');
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "../assets/css/header.css";
|
|
</style>
|