128 lines
2.6 KiB
Vue
128 lines
2.6 KiB
Vue
|
<!--
|
||
|
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>
|