add Header

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "normalize.css": "^8.0.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/App.vue

@@ -10,4 +10,6 @@
 
 <script></script>
 
-<style lang="scss"></style>
+<style lang="scss">
+
+</style>

src/assets/styles/functions.scss

@@ -0,0 +1,10 @@
+// functions
+@import "variables";
+
+@function h($height) {
+	@return $height * ($actual_height / $design_height);
+}
+
+@function w($width) {
+	@return $width * ($actual_width / $design_width);
+}

src/assets/styles/variables.scss

@@ -0,0 +1,14 @@
+// variables 
+
+// $design_width: 4480px;
+$design_width: 8960px;
+$design_height: 2160px;
+$actual_width: 3840px;
+$actual_height: 1080px;
+
+$height: 1080px;
+$default_ratio: 0.875;
+
+
+// colors
+$main-color: #6bf2ff;

src/components/Header.vue

@@ -0,0 +1,66 @@
+<template>
+	<header class="header relative">
+		<div>
+			<span style="width: 50px; height: 50px; background: red"></span>
+			<h1>凯盛晶华玻璃院公司800t/d特种玻璃生产线大数据指挥中心</h1>
+		</div>
+		<span class="header--wing absolute company"></span>
+		<span class="header--wing absolute datetime"></span>
+	</header>
+</template>
+
+<script>
+export default {
+	name: "Header",
+};
+</script>
+
+<style scoped lang="scss">
+@import "../assets/styles/functions";
+@import "../assets/styles/variables";
+
+header {
+	background: url(../assets/header.png) center/cover no-repeat;
+	height: h(300px);
+	width: $actual_width;
+	display: grid;
+	place-items: center;
+
+	> div {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20px;
+
+		h1 {
+			margin-left: 20px;
+			font-size: 40px;
+			// line-height: 100px;
+			// background: #eee;
+			user-select: none;
+			letter-spacing: 8px;
+			font-weight: 500;
+			// color: #6bf2ff;
+			color: $main-color;
+			font-family: "微软雅黑", "MS YaHei", "Helvicate", sans-serif;
+		}
+	}
+}
+
+.header--wing {
+	left: 0;
+	bottom: 10px;
+	height: h(78px);
+}
+
+.company {
+	margin-left: w(1180px);
+	width: w(1460px);
+	background: url("../assets/company.png") center/cover no-repeat;
+}
+
+.datetime {
+	margin-left: w(6300px);
+	width: w(1407px);
+	background: url("../assets/date.png") center/cover no-repeat;
+}
+</style>

src/components/Main.vue

@@ -0,0 +1,27 @@
+<template>
+	<main>
+    main content
+  </main>
+</template>
+
+<script>
+export default {
+	name: "Main",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import '../assets/styles/functions';
+
+main {
+	height: 1px;
+	flex: 1;
+}
+</style>

src/main.js

@@ -3,6 +3,9 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import 'normalize.css'
+import './style.css'
+
 Vue.config.productionTip = false
 
 new Vue({

src/style.css

@@ -0,0 +1,9 @@
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+

src/views/HomeView.vue

@@ -1,10 +1,17 @@
 <template>
-	<div class="home-view">home view</div>
+	<div class="home-view">
+		<BigHeader />
+		<Main />
+	</div>
 </template>
 
 <script>
+import BigHeader from '../components/Header.vue'
+import Main from '../components/Main.vue'
+
 export default {
 	name: "HomeView",
+	components: { BigHeader, Main },
 	props: {},
 	data() {
 		return {};
@@ -15,4 +22,19 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+@import '../assets/styles/functions';
+
+.home-view {
+	// width: 100vw;
+	// height: 100vh;
+	height: $actual_height;
+	width: $actual_width;
+	overflow: hidden;
+	background: url(../assets/bg.png) center/cover no-repeat ;
+	color: white;
+	background-color: #ccc;
+	display: flex;
+	flex-direction: column;
+}
+</style>

yarn.lock

@@ -3844,6 +3844,11 @@ normalize-url@^6.0.1:
   resolved "https://registry.npmmirror.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmmirror.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"