You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.3 KiB
140 lines
3.3 KiB
<template>
|
|
<div class="header">
|
|
<div class="header_logo">
|
|
<img :src="logo" class="logo"/>
|
|
<div>长春黄金研究院有限公司</div>
|
|
</div>
|
|
<div class="header_time">
|
|
{{ currentTime }}
|
|
</div>
|
|
<div class="header_user">
|
|
<img :src="AvatarSvg" width="40px" height="40px"/>
|
|
<div class="user_name">Admin</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import logo from '@/assets/logo.svg'
|
|
import AvatarSvg from '@/assets/avatar.svg'
|
|
import { ref, onMounted } from 'vue'
|
|
import {eventBus} from '@/eventBus'
|
|
import { getFormattedDateTime } from '@/utils'
|
|
const menuId = ref(0)
|
|
const time = getFormattedDateTime()
|
|
const currentTime = ref(time)
|
|
onMounted(()=>{
|
|
//测试页面返回时，需要调整菜单
|
|
eventBus.on('menuId', (value:number)=>{
|
|
menuId.value = value
|
|
})
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@use "@/assets/style/mixin.scss" as *;
|
|
.header{
|
|
display: flex;
|
|
align-items: center;
|
|
background: #e9e9e9;
|
|
align-items: center;
|
|
height: var(--headerHeight);
|
|
.header_logo{
|
|
display: flex;
|
|
font-size: 36px;
|
|
align-items: center;
|
|
width: 700px;
|
|
color: #8799AB;
|
|
gap: 5px;
|
|
padding-left: 50px;
|
|
|
|
.logo{
|
|
height:85px;
|
|
width:85px;
|
|
}
|
|
}
|
|
|
|
.header_time{
|
|
width: 375px;
|
|
height: 80px;
|
|
font-size: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 54%;
|
|
background: white;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.header_ins{
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
width: 444px;
|
|
height: 80px;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.header_container{
|
|
margin-left: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
width: 500px;
|
|
height: 80px;
|
|
background: #FFFFFF;
|
|
.waste_status{
|
|
padding:5px 5px;
|
|
width: 75%;
|
|
}
|
|
|
|
.waste_detail{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
.header_user{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 5px;
|
|
margin-left: 30px;
|
|
|
|
}
|
|
|
|
.user_name{
|
|
font-size: 34px;
|
|
color: #393F46;
|
|
}
|
|
}
|
|
|
|
.circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: green;
|
|
border-radius: 50%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
:deep(.van-dropdown-menu__bar){
|
|
background-color: #1871F8;
|
|
border-radius: 5px;
|
|
height: 30px;
|
|
width: 90px;
|
|
.van-ellipsis{
|
|
color:white;
|
|
}
|
|
|
|
}
|
|
|
|
:deep(.van-dropdown-item__content){
|
|
width: 150px;
|
|
margin-left: 170px;
|
|
}
|
|
|
|
.text_size{
|
|
font-size:30px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
</style>
|