yudao-init/src/views/copilot/components/CopilotHeader.vue

128 lines
2.6 KiB
Vue
Raw Normal View History

2024-04-18 17:01:10 +08:00
<!--
filename: CopilotHeader.vue
author: liubin
date: 2024-04-16 15:14:01
description:
-->
<template>
<div class="copilot-header">
<section class="menu">
<CopilotButton
v-for="i in ['产量', '效率', '能源']"
:key="i"
:label="i"
:active="i === active"
@click="() => $emit('update:active', i)"
/>
</section>
<section class="menu">
<CopilotButton
v-for="i in ['日', '周', '月', '年']"
:key="i"
:label="i"
:active="i === period"
@click="() => $emit('update:period', i)"
/>
<div class="btn-group">
<button type="button" class="export-btn" />
<button
type="button"
class="fullscreen-btn"
:class="[isFullscreen ? 'exit-fullscreen' : '']"
@click="toggleFullScreen"
/>
</div>
</section>
<div class="page-title">{{ active }}驾驶舱</div>
</div>
</template>
<script>
import CopilotButton from "./button.vue";
import screenfull from "screenfull";
export default {
name: "CopilotHeader",
components: { CopilotButton },
props: {
active: {
type: String,
},
period: {
type: String,
},
},
data() {
return {
isFullscreen: false,
};
},
computed: {},
methods: {
toggleFullScreen() {
this.isFullscreen = !this.isFullscreen;
screenfull.toggle(document.querySelector(".copilot-layout"));
// 矫正宽度
// const el = document.querySelector(".copilot-layout");
// el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
// el.style.left = this.isFullscreen ? "0" : "54px";
},
},
};
</script>
<style scoped>
@font-face {
font-family: 优设标题黑;
src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
}
.copilot-header {
display: flex;
gap: 12px;
align-items: center;
}
.copilot-header > section {
width: 24vw;
display: flex;
align-items: center;
gap: 8px;
}
.export-btn,
.fullscreen-btn {
width: 32px;
height: 32px;
margin-left: 24px;
cursor: pointer;
}
.export-btn {
background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
no-repeat;
}
.fullscreen-btn {
background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
no-repeat;
}
.exit-fullscreen {
background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
no-repeat;
}
.page-title {
flex: 1;
font-size: 54px;
line-height: 70px;
letter-spacing: 5px;
font-family: 优设标题黑;
color: #6db6ff;
text-align: right;
user-select: none;
}
</style>