<template>
|
<div
|
class="panel-header"
|
:class="{ clickable: !!to }"
|
@click="handleClick"
|
>
|
<span class="panel-title">{{ title }}</span>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRouter } from 'vue-router'
|
|
const props = defineProps({
|
title: {
|
type: String,
|
required: true,
|
default: ''
|
},
|
to: {
|
type: String,
|
default: ''
|
}
|
})
|
|
const router = useRouter()
|
|
const handleClick = () => {
|
if (props.to) {
|
router.push(props.to)
|
}
|
}
|
</script>
|
|
<style scoped>
|
.panel-header {
|
background-image: url("@/assets/BI/kehuhetongback@2x.png");
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
}
|
|
.panel-title {
|
width: 100%;
|
font-weight: 500;
|
font-size: 16px;
|
color: #D9ECFF;
|
padding-left: 46px;
|
line-height: 36px;
|
}
|
|
.panel-header.clickable {
|
cursor: pointer;
|
}
|
|
.panel-header.clickable:hover .panel-title {
|
color: #43e8fc;
|
}
|
</style>
|
