37 lines
789 B
Vue
37 lines
789 B
Vue
<template>
|
|
<div class="toggle" @click="toggleClick">
|
|
<component :is="siderbarStore.getSiderBarStatus() ? 'Fold' : 'Expand'" class="icon"></component>
|
|
</div>
|
|
<span class="sys-name">科技创新项目管理平台</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useSiderBar} from '@/stores/siderbar.js'
|
|
const siderbarStore = useSiderBar()
|
|
const toggleClick = () => {
|
|
siderbarStore.setSiderBarStatus()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sys-name {
|
|
padding: 0 10px;
|
|
font-weight: bold;
|
|
}
|
|
.toggle{
|
|
line-height: 65px;
|
|
border-top-left-radius: 10px;
|
|
border-bottom-left-radius: 10px;
|
|
padding: 0 15px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: #79bbff;
|
|
}
|
|
}
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
transform: translateY(-2px);
|
|
}
|
|
</style> |