update copilot header
This commit is contained in:
parent
b11474a8e4
commit
13285cc2d4
BIN
src/assets/images/copilot-bg.png
Normal file
BIN
src/assets/images/copilot-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.5 MiB |
BIN
src/assets/images/export-icon.png
Normal file
BIN
src/assets/images/export-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/full-icon.png
Normal file
BIN
src/assets/images/full-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
104
src/views/copilot/components/CopilotHeader.vue
Normal file
104
src/views/copilot/components/CopilotHeader.vue
Normal 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>
|
90
src/views/copilot/components/button.vue
Normal file
90
src/views/copilot/components/button.vue
Normal 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>
|
0
src/views/copilot/components/name.vue
Normal file
0
src/views/copilot/components/name.vue
Normal file
0
src/views/copilot/components/select.vue
Normal file
0
src/views/copilot/components/select.vue
Normal file
73
src/views/copilot/container.vue
Normal file
73
src/views/copilot/container.vue
Normal 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>
|
@ -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 {};
|
||||
|
@ -6,9 +6,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="copilot-container energy-copilot">
|
||||
能源驾驶舱
|
||||
</div>
|
||||
<div class="energy-copilot">能源驾驶舱</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -6,7 +6,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="copilot-container yield-copilot">产量驾驶舱</div>
|
||||
<div class="yield-copilot">产量驾驶舱</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
Loading…
Reference in New Issue
Block a user