update 完成header的重构

src/components/layout/Header.vue

@@ -70,33 +70,30 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
-  background: url(../../assets/header.png) center / 65% 100% no-repeat;
+  width: 100%;
-  // background-size: 100% 100%;
+  height: 628px;
-  // background-size: 13515px 634px;
+  background: url(../../assets/header.png) no-repeat;
-  // background-position: bottom;
-  height: adjust(h(580px));
-  width: adjust(w(21120px));
   display: grid;
   place-items: center;
-  // padding-bottom: adjust(2px);
 
   >div {
+    margin-bottom: 72px;
     display: flex;
     align-items: center;
-    margin-bottom: adjust(10px);
-    margin-left: adjust(64px);
 
     .header--logo {
-      width: adjust(128px);
+      width: 648px;
-      height: adjust(h(337px));
+      height: 337px;
+      margin-right: 96px;
       background: url(../../assets/logo.png) center/contain no-repeat;
     }
 
     h1 {
-      margin-left: adjust(20px);
+      font-size: 220px;
-      font-size: adjust(42px);
+      line-height: 330px;
+      margin: 0;
+      letter-spacing: 36px;
       user-select: none;
-      letter-spacing: adjust(6px);
       font-weight: 600;
       color: $main-color;
       font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
@@ -105,34 +102,24 @@ header {
 }
 
 .header--wing {
-  top: adjust(h(128px));
+  top: 138px;
   left: 0;
-  bottom: adjust(10px);
+  line-height: 130px;
-  height: adjust(h(130px));
+  font-size: 130px;
   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
 }
 
 .company {
-  margin-left: adjust(w(4035px));
+  left: 240px;
-  height: adjust(h(130px));
-  // font-weight: 600;
   text-align: center;
   color: lighten($main-color, 8);
-  font-size: adjust(h(90px));
-  letter-spacing: unset;
-  // background: red;
-  // width: adjust(w(1320px));
-  // background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
+  left: unset;
+  right: 160px;
   color: $main-color;
-  font-size: adjust(h(90px));
   text-align: center;
-  margin-left: adjust(w(15420px));
   color: lighten($main-color, 8);
-  height: adjust(h(130px));
-  // width: adjust(w(1764px));
-  // background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>

src/utils/slider.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="fixed-slider">
+		<h1>{{ value }}</h1>
+		<input type="range" :value="value" @input="$emit('change', +$event.target.value)">
+	</div>
+</template>
+
+<script>
+export default {
+	name: "FixedSlider",
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+	props: {
+		value: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			// value: 0
+		};
+	},
+};
+</script>
+
+<style scoped>
+.fixed-slider {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	height: 10vh;
+	width: 100vw;
+	background: #0002;
+	color: #fff;
+	z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100px 0;
+}
+</style>

src/views/HomeView.vue

@@ -1,37 +1,62 @@
 <template>
-	<div class="home-view">
+	<div>
-		<BigHeader />
+		<div class="home-view" :style="styles">
-		<Main />
+			<LeftSide />
+			<section class="center">
+				<BigHeader />
+				<Main />
+			</section>
+			<RightSide />
+		</div>
+		<Slider v-model="value" />
 	</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 Slider from "../utils/slider.vue";
 
 export default {
 	name: "HomeView",
-	components: { BigHeader, Main },
+	components: { BigHeader, Main, LeftSide, RightSide, Slider },
 	props: {},
 	data() {
-		return {};
+		return {
+			value: 40,
+		};
+	},
+	computed: {
+		styles() {
+			let v = (this.value / 100).toFixed(2);
+			return {
+				transform: `scale(${v})`,
+				transformOrigin: "top left",
+			};
+		},
 	},
-	created() {},
-	mounted() {},
-	methods: {},
 };
 </script>
 
 <style scoped lang="scss">
-@import '../assets/styles/functions';
+@import "../assets/styles/functions";
 
 .home-view {
-	height: adjust($actual_height);
+	height: 4320px;
-	width: adjust($actual_width);
+	width: 21120px;
+	// height: 300px;
+	// width: 600px;
 	overflow: hidden;
-	background: url(../assets/bg.png) center/cover no-repeat, #E0E3F6;
+	// background: url(../assets/bg.png) center/cover no-repeat, #e0e3f6;
 	color: white;
 	display: flex;
-	flex-direction: column;
+}
+
+.center {
+	width: 13515px;
+	height: 4320px;
+	background: #1bb8bb91;
 }
 </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: rgba(243, 54, 145, 0.166);
+	height: 4320px;
+	width: 3840px;
+}
+</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: rgba(30, 133, 244, 0.292);
+	height: 4320px;
+	width: 3840px;
+}
+</style>