update basic layout

src/components/layout/Header.vue

@@ -4,7 +4,7 @@
       <span class="header--logo">
         <!-- <img src="../../assets/logo.png" alt="logo"> -->
       </span>
-      <h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
+      <h1>宜兴三期生产线大数据指挥中心</h1>
     </div>
     <span class="header--wing absolute company"></span>
     <span class="header--wing absolute datetime">
@@ -68,8 +68,8 @@ export default {
 header {
   background: url(../../assets/header.png) center/contain no-repeat;
   background-size: 100%;
-  height: adjust(h(280px));
+  height: 141px;
-  width: adjust($actual_width);
+  width: 2672px;
   display: grid;
   place-items: center;
 
@@ -79,19 +79,19 @@ header {
     margin-bottom: adjust(10px);
 
     .header--logo {
-      width: adjust(102px);
+      width: 64px;
-      height: adjust(56px);
+      height: 94px;
       background: url(../../assets/logo.png) center/contain no-repeat;
     }
 
     h1 {
-      margin-left: adjust(20px);
+      margin-left: 36px;
-      font-size: adjust(35px);
+      font-size: 72px;
       // line-height: adjust(100px);
       // background: #eee;
       user-select: none;
-      letter-spacing: adjust(8px);
+      letter-spacing: 12px;
-      font-weight: 600;
+      font-weight: 400;
       // color: #6bf2ff;
       color: $main-color;
       font-family: "微软雅黑", sans-serif;

src/components/yx-dark/containers/rect.vue

@@ -0,0 +1,32 @@
+<!-- 
+    filename: rect.vue
+    author: liubin
+    date: 2023-09-08 10:02:48
+    description: 
+-->
+
+<template>
+  <div class="rect-container"></div>
+</template>
+
+<script>
+export default {
+  name: "RectContainer",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.rect-container {
+  background: rgba(45, 230, 196, 0.8);
+  padding: 0;
+  width: 624px;
+  height: 304px;
+}
+</style>

src/views/HomeView.vue

@@ -1,39 +1,141 @@
 <template>
-	<div class="home-view">
+  <!-- transform: 'scale(0.18182, 0.25)', -->
-		<BigHeader />
+  <!-- :style="{
-		<Main />
+			transform: 'scale(0.72727, 1)',
-	</div>
+			transformOrigin: 'top left',
+		}" -->
+  <div class="home-view" :style="styles">
+    <!-- <div class="bg-layer"></div> -->
+    <LeftSide />
+    <section class="center">
+      <header style="height: 1px"></header>
+      <!-- <BigHeader /> -->
+      <MainPanel style="height: 1px; flex: 1;" />
+      <!-- <Main /> -->
+    </section>
+    <RightSide />
+  </div>
 </template>
 
 <script>
-import BigHeader from '../components/layout/Header.vue'
+import BigHeader from "../components/layout/Header.vue";
-import Main from '../components/layout/Main.vue'
+import Main from "../components/layout/Main.vue";
+import LeftSide from "./LeftSide.vue";
+import RightSide from "./RightSide.vue";
+import MainPanel from "./MainPanel.vue";
 
 export default {
-	name: "HomeView",
+  name: "HomeView",
-	components: { BigHeader, Main },
+  components: { BigHeader, Main, LeftSide, RightSide, MainPanel },
-	props: {},
+  props: {},
-	data() {
+  data() {
-		return {};
+    return {
-	},
+      value: 20,
-	created() {},
+    };
-	mounted() {},
+  },
-	methods: {},
+  computed: {
+    styles() {
+      let v = (this.value / 100).toFixed(2);
+      return {
+        // transform: `scale(${(v * 24) / 33}, ${v})`,
+        transform: `scale(${v}, ${v})`,
+        transformOrigin: "top left",
+      };
+    },
+  },
+  mounted() {
+    const slider = document.createElement("div");
+    slider.id = "slider";
+    slider.classList.add("slider");
+    const ranger = document.createElement("input");
+    ranger.type = "range";
+    ranger.value = this.value;
+    ranger.addEventListener("input", this.handleSlide);
+    slider.appendChild(ranger);
+    document.body.appendChild(slider);
+
+    // this.$watch('value', val => {
+    // 	ranger.value = val
+    // })
+
+    document.addEventListener("keydown", (e) => {
+      if (e.shiftKey && e.key === "L") {
+        document.getElementById("slider").classList.toggle("show");
+      }
+    });
+    document.getElementById("slider").addEventListener("mouseleave", () => {
+      setTimeout(() => {
+        document.getElementById("slider").classList.remove("show");
+      }, 200);
+    });
+  },
+  methods: {
+    handleSlide(e) {
+      this.value = e.target.value;
+      window.scroll(0, 0);
+    },
+  },
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
-@import '../assets/styles/functions';
+@import "../assets/styles/functions";
 
 .home-view {
-	// width: 100vw;
+  height: 1080px;
-	// height: 100vh;
+  width: 8640px;
-	height: adjust($actual_height);
+  overflow: hidden;
-	width: adjust($actual_width);
+  // background: #C9CCE5;
-	overflow: hidden;
+  background: url(../assets/bg.png) center/cover no-repeat;
-	background: url(../assets/bg.png) center/cover no-repeat ;
+  color: white;
-	color: white;
+  display: flex;
-	display: flex;
+  position: relative;
-	flex-direction: column;
+}
+
+.bg-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #c9cce577;
+  // background: url(../assets/bg.png) center/cover no-repeat;
+}
+
+.center {
+  width: 6592px;
+  //   flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.slider {
+  height: 5vh;
+  width: 20vw;
+  border-radius: 88px;
+  box-shadow: 0 0 68px 8px rgba($color: #000000, $alpha: 0.3);
+  padding: 32px;
+  display: grid;
+  place-items: center;
+  background: #fff;
+  position: fixed;
+  // bottom: 64px;
+  bottom: 0;
+  opacity: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
+
+  input {
+    width: 100%;
+    transform: translateY(-7px);
+    color: #0b58ff;
+    background: #fcc;
+  }
+}
+
+.slider.show {
+  opacity: 1;
+  bottom: 64px;
 }
 </style>

src/views/LeftSide.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="left-side"></div>
+</template>
+
+<script>
+export default {
+	name: "LeftSide",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+// import
+
+.left-side {
+	background: #000;
+	height: 1080px;
+	width: 1024px;
+}
+</style>

src/views/MainPanel.vue

@@ -0,0 +1,124 @@
+<!-- 
+    filename: MainPanel.vue
+    author: liubin
+    date: 2023-09-08 10:00:10
+    description: 
+-->
+
+<template>
+  <div class="main-panel">
+    <RectContainer class="leftTop" />
+    <RectContainer class="leftMiddle" />
+    <RectContainer class="leftBottom" />
+
+    <RectContainer class="bottom-1" />
+    <RectContainer class="bottom-2" />
+    <RectContainer class="bottom-3" />
+    <RectContainer class="bottom-4" />
+    <RectContainer class="bottom-5" />
+    <RectContainer class="bottom-6" />
+    <RectContainer class="bottom-7" />
+    <RectContainer class="bottom-8" />
+
+    <RectContainer class="rightTop" />
+    <RectContainer class="rightMiddle" />
+    <RectContainer class="rightBottom" />
+
+    <div class="main-area" style="background: lightcoral;" />
+  </div>
+</template>
+
+<script>
+import RectContainer from "@/components/yx-dark/containers/rect.vue";
+
+export default {
+  name: "MainPanel",
+  components: { RectContainer },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.main-panel {
+  background: #cccc;
+  padding: 0 0 24px;
+  position: relative;
+  //   top: -28px; // 往上部偏移一点
+  display: grid;
+  gap: 32px;
+  place-content: end center;
+  grid-auto-columns: 624px;
+  grid-auto-rows: 304px;
+  grid-template-areas:
+    "leftTop    main      main      main        main       main       main      main        main        rightTop    "
+    "leftMiddle main      main      main        main       main       main      main        main        rightMiddle "
+    "leftBottom BottomOne BottomTwo BottomThree BottomFour BottomFive BottomSix BottomSeven BottomEight rightBottom ";
+}
+
+.main-area {
+  grid-area: main;
+}
+
+.leftTop {
+  grid-area: leftTop;
+  //   justify-self: end;
+}
+
+.leftMiddle {
+  grid-area: leftMiddle;
+}
+
+.leftBottom {
+  grid-area: leftBottom;
+  justify-self: end;
+}
+
+.rightTop {
+  grid-area: rightTop;
+}
+
+.rightMiddle {
+  grid-area: rightMiddle;
+}
+
+.rightBottom {
+  grid-area: rightBottom;
+}
+
+.bottom-1 {
+  grid-area: BottomOne;
+}
+
+.bottom-2 {
+  grid-area: BottomTwo;
+}
+
+.bottom-3 {
+  grid-area: BottomThree;
+}
+
+.bottom-4 {
+  grid-area: BottomFour;
+}
+
+.bottom-5 {
+  grid-area: BottomFive;
+}
+
+.bottom-6 {
+  grid-area: BottomSix;
+}
+
+.bottom-7 {
+  grid-area: BottomSeven;
+}
+
+.bottom-8 {
+  grid-area: BottomEight;
+}
+</style>

src/views/RightSide.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="right-side"></div>
+</template>
+
+<script>
+export default {
+  name: "RightSide",
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+// import
+
+.right-side {
+  background: #000;
+  height: 1080px;
+  width: 1024px;
+}
+</style>