<template>
|
<div class="header">
|
<header>
|
<div class="hd-left">
|
<div class="logoDiv">
|
<img class="logo" src="../../../assets/images/logo3.png">
|
</div>
|
<div class="logo-title">
|
<span class="title-txt">数字化活动申报平台</span>
|
<span class="sub-title">Digital activity declaration platform</span>
|
</div>
|
<div class="top-menus">
|
<img class="btn-icon" v-if="currentMenuCode=='activityInitiate5'" src="../../../assets/images/header/btn-icon1.png">
|
<img class="btn-icon" v-if="currentMenuCode=='activityInitiate2'" src="../../../assets/images/header/btn-icon2.png">
|
<img class="btn-icon" v-if="currentMenuCode=='activityInitiate3'" src="../../../assets/images/header/btn-icon3.png">
|
<img class="btn-icon" v-if="currentMenuCode=='activityInitiate4'" src="../../../assets/images/header/btn-icon4.png">
|
<span class="btn-bg">{{ currentMenuName }}</span>
|
</div>
|
</div>
|
<div class="hd-right">
|
<div class="top-btn" >
|
{{ newdate }}
|
</div>
|
</div>
|
</header>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import moment from 'moment'
|
import { useRoute } from 'vue-router'
|
const route = useRoute()
|
import { getAssetsImages } from '@/utils/common'
|
let btnIcon3 = getAssetsImages('/header/btn-icon3.png') // logo地址
|
let btnIcon2 = getAssetsImages('/header/btn-icon2.png') // logo地址
|
let btnIcon4 = getAssetsImages('/header/btn-icon4.png') // logo地址
|
let btnIcon1 = getAssetsImages('/header/btn-icon1.png') // logo地址
|
|
const actMenu:any=[
|
{
|
"id": "e08d5991-17b5-42fe-9bf0-ffa0e6f585f2",
|
"parentId": "f622d309-0800-4c34-bb2b-561e3f6544f0",
|
"code": "activityInitiate",
|
"name": "活动发起",
|
"type": "MENU",
|
"icon": '',
|
"url": "/activityConfiguration/activityInitiation",
|
"description": "",
|
"sort": 1,
|
"children": null
|
},
|
{
|
"id": "7db888aa-3faa-45cb-bd4a-656bccad4500",
|
"parentId": "f622d309-0800-4c34-bb2b-561e3f6544f0",
|
"code": "activityInitiate2",
|
"name": "活动申报",
|
"type": "MENU",
|
"icon":btnIcon2,
|
"url": "/activityConfiguration/activityDeclaration",
|
"description": "",
|
"sort": 2,
|
"children": null
|
},
|
{
|
"id": "25f1ccae-9029-4a5c-a5c9-1e116225246f",
|
"parentId": "f622d309-0800-4c34-bb2b-561e3f6544f0",
|
"code": "activityInitiate3",
|
"name": "活动审批",
|
"type": "MENU",
|
"icon": btnIcon3,
|
"url": "/activityConfiguration/activityApproval",
|
"description": "",
|
"sort": 3,
|
"children": null
|
},
|
{
|
"id": "1471031e-bee8-438b-904d-9576d1d2f6b4",
|
"parentId": "f622d309-0800-4c34-bb2b-561e3f6544f0",
|
"code": "activityInitiate4",
|
"name": "专家评审",
|
"type": "MENU",
|
"icon": btnIcon4,
|
"url": "/activityConfiguration/expertReview",
|
"description": "",
|
"sort": 4,
|
"children": null
|
},
|
{
|
"id": "5ac38cc1-b330-413a-89c1-4d983406e5a0",
|
"parentId": "f622d309-0800-4c34-bb2b-561e3f6544f0",
|
"code": "activityInitiate5",
|
"name": "活动跟踪",
|
"type": "MENU",
|
"icon": btnIcon1,
|
"url": "/activityConfiguration/activityTrace",
|
"description": "",
|
"sort": 5,
|
"children": null
|
},
|
{
|
"id": "d3515ee3-ab65-4c93-b617-b076835d03fd",
|
"parentId": "f622d309-0800-4c34-bb2b-561e3f6544f0",
|
"code": "activityInitiate6",
|
"name": "申报人管理",
|
"type": "MENU",
|
"icon": "",
|
"url": "/activityConfiguration/informantManage",
|
"description": "",
|
"sort": 6,
|
"children": null
|
}
|
]
|
const currentMenuName=ref()
|
const currentMenuIcon=ref()
|
const currentMenuCode=ref()
|
const newdate = ref<string>('')
|
const timerEnterDate = ref<any>(null)
|
const setTime = () => {
|
//设置定时器
|
timerEnterDate.value = setInterval(() => {
|
newdate.value = moment().format('YYYY-MM-DD HH:mm:ss')
|
}, 1000)
|
}
|
const clearTime = () => {
|
//清除定时器
|
if (timerEnterDate.value) {
|
clearInterval(timerEnterDate.value)
|
}
|
timerEnterDate.value = null
|
}
|
const showMenu=()=>{
|
for(let i=0;i<actMenu.length;i++){
|
if(actMenu[i].code==currentMenuCode.value){
|
currentMenuName.value=actMenu[i].name
|
currentMenuIcon.value=actMenu[i].icon
|
console.log('88',currentMenuIcon.value, currentMenuName.value)
|
break;
|
}
|
}
|
}
|
onMounted(() => {
|
currentMenuCode.value=route.query.actcode
|
setTime()
|
showMenu()
|
})
|
onUnmounted(() => {
|
clearTime()
|
})
|
</script>
|
<style lang="scss" scoped>
|
header{
|
width: 100%;
|
height: 80px;
|
display: flex;
|
justify-content: center;
|
justify-content: space-between;
|
background-image: url('../../../assets/images/header/header-bg1.png');
|
background-size: cover;
|
.hd-left{
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
.logoDiv{
|
width: 180px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
margin-left: 30px;
|
}
|
.logo-title{
|
width: 350px;
|
margin-left: 30px;
|
display: flex;
|
flex-direction: column;
|
text-align: left;
|
color: #fff;
|
position: relative;
|
margin-top: 20px;
|
.title-txt{
|
font-size: 24px;
|
line-height: 25px;
|
}
|
.sub-title {
|
font-size: 14px;
|
line-height: 14px;
|
color: #e6edf5;
|
letter-spacing: -.5px;
|
}
|
&:before {
|
content: '';
|
width: 1px;
|
height: 40px;
|
background: #d9eafc;
|
left: -12px;
|
position: absolute;
|
}
|
}
|
.top-menus{
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
margin-top: 20px;
|
margin-bottom: 10px;
|
width:190px;
|
background-image: url('../../../assets/images/header/btn-bg1.png');
|
background-size: contain;
|
background-repeat: no-repeat;
|
.btn-icon{
|
width: 60px;
|
height: 60px;
|
margin-left: -20px;
|
margin-top: -10px;
|
}
|
.btn-bg{
|
font-size: 20px;
|
color: #fff;
|
font-weight: 600;
|
margin-top: 10px;
|
padding-right: 25px;
|
}
|
.top-menu{
|
padding: 0px 20px;
|
font-size: 24px;
|
color: #fff;
|
cursor: pointer;
|
user-select: none;
|
:hover{
|
border: 0px solid transparent;
|
}
|
.el-dropdown-link{
|
font-size: 24px;
|
margin-top: 4px;
|
color: #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.el-icon-menu--right{
|
padding-left: 3px;
|
}
|
}
|
}
|
}
|
}
|
.hd-right{
|
width: 500px;
|
display: flex;
|
flex-direction: row;
|
justify-content: right;
|
margin-right: 20px;
|
.top-btn{
|
font-size: 20px;
|
color: #fff;
|
margin-top: 25px;
|
display: block;
|
height: 35px;
|
padding: 3px 10px;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
.top-btn-menu{
|
user-select: none;
|
margin-left: 40%;
|
margin-top: 3.6vh;
|
}
|
}
|
|
}
|
</style>
|
|
