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.
137 lines
3.1 KiB
137 lines
3.1 KiB
<template> |
|
<header> |
|
<div class="flex flex v-center between relative"> |
|
<nav class="flex"> |
|
<router-link :to="`/datav/subOneVideoInsp?departId=`+ deptId" v-slot="{ isActive }"> |
|
<span>视频督察</span> |
|
<img :src="isActive ? Img2 : Img1" alt=""/> |
|
</router-link> |
|
<router-link :to="`/datav/subOneSceneInsp?departId=`+deptId" v-slot="{ isActive }"> |
|
<span>监督管理</span> |
|
<img :src="isActive ? Img2 : Img1" alt=""/> |
|
</router-link> |
|
<router-link :to="`/datav/subOneCaseVerif?departId=`+ deptId" v-slot="{ isActive }"> |
|
<span>案件核查</span> |
|
<img :src="isActive ? Img2 : Img1" alt=""/> |
|
</router-link> |
|
|
|
</nav> |
|
<h1> |
|
<router-link :to="`/datav/subOneGlobal?departId=`+ deptId" > |
|
<span>{{ departName }}数字督察一体化平台</span> |
|
</router-link> |
|
</h1> |
|
<nav class="flex right"> |
|
<router-link :to="`/datav/subOneJwpy?departId=`+ deptId" v-slot="{ isActive }"> |
|
<span>民意感知</span> |
|
<img :src="isActive ? Img2 : Img1" alt=""/> |
|
</router-link> |
|
<router-link :to="`/datav/subOneMailVisits?departId=`+ deptId" v-slot="{ isActive }"> |
|
<span>信访投诉</span> |
|
<img :src="isActive ? Img2 : Img1" alt=""/> |
|
</router-link> |
|
<router-link :to="`/datav/subOneRightsComfort?departId=`+ deptId" v-slot="{ isActive }"> |
|
<span>维权抚慰</span> |
|
<img :src="isActive ? Img2 : Img1" alt=""/> |
|
</router-link> |
|
</nav> |
|
</div> |
|
</header> |
|
</template> |
|
<script setup> |
|
import Img1 from '/imgs/datav/base.png' |
|
import Img2 from '/imgs/datav/base_active.png' |
|
import useUserStore from "@/stores/modules/user"; |
|
const props =defineProps({ |
|
departId:{ |
|
default:null |
|
}, |
|
departName:{ |
|
type:String, |
|
default:'长沙公安' |
|
} |
|
}) |
|
|
|
const userStore = useUserStore(); |
|
|
|
let deptId = ref(); |
|
let departName = ref() |
|
watch(()=>props.departId,(newVal)=>{ |
|
console.log('new',newVal) |
|
if(newVal == null){ |
|
console.log(userStore.user) |
|
deptId.value= userStore.user.departId; |
|
departName.value =userStore.user.departName; |
|
}else{ |
|
|
|
deptId.value = newVal; |
|
departName.value = props.departName |
|
} |
|
},{deep:true,immediate:true}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
<style lang="scss" scoped> |
|
header { |
|
color: #fff; |
|
margin-bottom: 20px; |
|
position: relative; |
|
|
|
&::before { |
|
display: block; |
|
content: ""; |
|
position: absolute; |
|
width: 73.5%; |
|
height: 213px; |
|
top: 0; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
background-image: url("/imgs/datav/bg-1.png"); |
|
z-index: 0; |
|
} |
|
|
|
h1 { |
|
font-family: PangMenZhengDao; |
|
font-size: 48px; |
|
line-height: 1; |
|
letter-spacing: 2px; |
|
margin: 0; |
|
white-space: nowrap; |
|
} |
|
|
|
nav { |
|
a { |
|
color: inherit; |
|
text-decoration: none; |
|
text-align: center; |
|
font-size: 19px; |
|
} |
|
|
|
span { |
|
display: block; |
|
} |
|
|
|
img { |
|
display: block; |
|
margin-top: -12px; |
|
} |
|
|
|
&.right { |
|
img { |
|
transform: scaleX(-1); |
|
} |
|
} |
|
} |
|
} |
|
|
|
:deep() { |
|
a { |
|
color: inherit; |
|
text-decoration: none; |
|
} |
|
} |
|
</style>
|
|
|