add fullscreen
This commit is contained in:
parent
e2f4183d0b
commit
8d4470db21
@ -7,6 +7,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="dashboard-header">
|
<header class="dashboard-header">
|
||||||
|
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
|
||||||
<h1>发电玻璃智能管控平台地图总览</h1>
|
<h1>发电玻璃智能管控平台地图总览</h1>
|
||||||
<span class="side left">晴转多云 14℃</span>
|
<span class="side left">晴转多云 14℃</span>
|
||||||
<span class="side right">23:12|星期一|2023.12.13</span>
|
<span class="side right">23:12|星期一|2023.12.13</span>
|
||||||
@ -14,15 +15,38 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import screenfull from "screenfull";
|
||||||
|
import fullscreenIcon from "@/assets/images/homeindex/fullscreen.png";
|
||||||
|
import fullscreenExitIcon from "@/assets/images/homeindex/exit-fullscreen.png";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "DashboardHeader",
|
name: "DashboardHeader",
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
isFullscreen: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
btnStyle() {
|
||||||
|
return {
|
||||||
|
backgroundImage: `url(${
|
||||||
|
this.isFullscreen ? fullscreenExitIcon : fullscreenIcon
|
||||||
|
})`,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleFullscreen() {
|
||||||
|
screenfull.toggle();
|
||||||
|
this.isFullscreen = !this.isFullscreen;
|
||||||
|
// 矫正宽度
|
||||||
|
const el = document.querySelector(".dashboard-factory-all");
|
||||||
|
el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
|
||||||
|
el.style.left = this.isFullscreen ? "0" : "54px";
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {},
|
|
||||||
methods: {},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -34,6 +58,17 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-content: center;
|
place-content: center;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
width: 2vw;
|
||||||
|
height: 2vw;
|
||||||
|
top: 50%;
|
||||||
|
right: 1.18vw;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -48,7 +48,7 @@ import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
|
|||||||
import Container from "./dashboard/components/Container.vue";
|
import Container from "./dashboard/components/Container.vue";
|
||||||
import ChartContainer from "./dashboard/components/ChartContainer.vue";
|
import ChartContainer from "./dashboard/components/ChartContainer.vue";
|
||||||
import FtoChart from "./dashboard/charts/Fto.vue";
|
import FtoChart from "./dashboard/charts/Fto.vue";
|
||||||
import ChipInvestChart from './dashboard/charts/ChipInvest.vue';
|
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Index",
|
name: "Index",
|
||||||
@ -58,7 +58,7 @@ export default {
|
|||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
ChartContainer,
|
ChartContainer,
|
||||||
FtoChart,
|
FtoChart,
|
||||||
ChipInvestChart
|
ChipInvestChart,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -145,7 +145,7 @@ export default {
|
|||||||
left: 54px;
|
left: 54px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: calc(100vw - 54px);
|
width: calc(100vw - 54px);
|
||||||
z-index: 1000;
|
z-index: 1001;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user