update home

src/views/dashboard/components/Header.vue

@@ -0,0 +1,102 @@
+<!-- 
+    filename: Header.vue
+    author: liubin
+    date: 2024-04-09 09:04:12
+    description: 
+-->
+
+<template>
+  <header class="dashboard-header">
+    <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
+    <h1>发电玻璃智能管控平台地图总览</h1>
+    <span class="side left">晴转多云 14℃</span>
+    <span class="side right">23:12|星期一|2023.12.13</span>
+  </header>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import fullscreenIcon from "@/assets/images/homeindex/fullscreen.png";
+import fullscreenExitIcon from "@/assets/images/homeindex/exit-fullscreen.png";
+
+export default {
+  name: "DashboardHeader",
+  components: {},
+  props: {},
+  data() {
+    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";
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.dashboard-header {
+  height: 8vh;
+  background: url(../../../assets/images/homeindex/header-bg.png) no-repeat 0 0 /
+    100% 100%;
+  position: relative;
+  display: grid;
+  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 {
+  //   font-size: 32px;
+  font-size: 1.65vw;
+  //   line-height: 45px;
+  line-height: 1.25;
+  letter-spacing: 0.32vw;
+  user-select: none;
+  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
+}
+
+.side {
+  position: absolute;
+  font-size: 1.18vw;
+  // line-height: 24px;
+  line-height: 1.277vw;
+  letter-spacing: 2px;
+  color: #69b4ff;
+}
+
+.left {
+  left: 22vw;
+  top: 4.9vh;
+}
+
+.right {
+  right: 15vw;
+  top: 4.9vh;
+}
+</style>