update copilot header

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-04-16 16:25:09 +08:00
parent b11474a8e4
commit 13285cc2d4
11 changed files with 270 additions and 8 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,104 @@
<!--
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" />
</div>
</section>
<div class="page-title">{{ active }}驾驶舱</div>
</div>
</template>
<script>
import CopilotButton from "./button.vue";
export default {
name: "CopilotHeader",
components: { CopilotButton },
props: {
active: {
type: String,
},
period: {
type: String,
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</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;
}
.page-title {
flex: 1;
font-size: 54px;
line-height: 70px;
letter-spacing: 5px;
font-family: 优设标题黑;
color: #6db6ff;
text-align: right;
user-select: none;
}
</style>

View File

@ -0,0 +1,90 @@
<!--
filename: button.vue
author: liubin
date: 2024-04-16 15:02:34
description:
-->
<template>
<button
class="copilot-btn"
:class="[active ? 'active' : '']"
@click="$emit('click', label)"
>
{{ label }}
</button>
</template>
<script>
export default {
name: "CopilotButton",
props: {
label: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
},
};
</script>
<style>
button {
appearance: none;
outline: none;
border: none;
background: none;
}
</style>
<style scoped>
.copilot-btn {
flex: 1;
position: relative;
background: #006acd40;
backdrop-filter: blur(3px);
text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 22px;
letter-spacing: 10px;
cursor: pointer;
}
.copilot-btn.active {
background: linear-gradient(
to top,
#159aff99,
#159aff44,
#006acd40
) !important;
}
.copilot-btn::before,
.copilot-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: transparent;
border-top-color: #007be4;
}
.copilot-btn::before {
left: 0;
border-left-color: #007be4;
}
.copilot-btn::after {
right: 0;
border-right-color: #007be4;
}
</style>

View File

View File

View File

@ -0,0 +1,73 @@
<!--
filename: container.vue
author: liubin
date: 2024-04-16 14:51:25
description:
-->
<template>
<div class="copilot-container">
<CopilotHeaderVue
:active="page"
:period="period"
@update:active="page = $event"
@update:period="period = $event"
/>
<YieldCopilot v-if="page == '产量'" :period="period" />
<EnergyCopilot v-if="page == '能源'" :period="period" />
<EfficiencyCopilot v-if="page == '效率'" :period="period" />
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
</div>
</template>
<script>
import CopilotHeaderVue from "./components/CopilotHeader.vue";
import YieldCopilot from "./yield/index.vue";
import EnergyCopilot from "./energy/index.vue";
import EfficiencyCopilot from "./efficiency/index.vue";
export default {
name: "CopilotContainer",
components: {
CopilotHeaderVue,
YieldCopilot,
EnergyCopilot,
EfficiencyCopilot,
},
data() {
return {
page: "产量",
period: "日",
};
},
};
</script>
<style>
.copilot-container {
padding: 16px;
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
position: absolute;
height: calc(100% + 38px);
left: -16px;
top: -8px;
width: calc(100% + 30px);
z-index: 1001;
color: #fff;
}
.copilot-footer {
position: absolute;
bottom: 20px;
height: 20px;
width: 100%;
color: rgb(80, 80, 80);
user-select: none;
font-size: 14px;
letter-spacing: 1px;
display: grid;
place-content: center;
}
</style>

View File

@ -6,15 +6,12 @@
-->
<template>
<div class="copilot-container efficiency-copilot">
效率驾驶舱
</div>
<div class="efficiency-copilot">效率驾驶舱</div>
</template>
<script>
export default {
name: "EfficiencyCopilot",
components: {},
props: {},
data() {
return {};

View File

@ -6,9 +6,7 @@
-->
<template>
<div class="copilot-container energy-copilot">
能源驾驶舱
</div>
<div class="energy-copilot">能源驾驶舱</div>
</template>
<script>

View File

@ -6,7 +6,7 @@
-->
<template>
<div class="copilot-container yield-copilot">产量驾驶舱</div>
<div class="yield-copilot">产量驾驶舱</div>
</template>
<script>