智慧农业平台header制作

src/views/Main/MainView.vue

@@ -1,10 +1,12 @@
 <script setup>
 	import JtHeader from './components/header.vue';
 	import modifyModule from './components/modifyPassword.vue';
+	import ZhHeader from "./components/ZhHeader.vue"
 </script>
 <template>
 	<!-- 顶栏容器 -->
 	<!-- <JtHeader @handleSelect="handleSelect" /> -->
+	<ZhHeader></ZhHeader>
 
 	<!-- 控制路由页面是否缓存 -->
 	<router-view v-slot="{ Component }">

src/views/Main/components/ZhHeader.vue

@@ -0,0 +1,36 @@
+<template>
+  <!--标题logo-->
+  <div class="header">
+    <div class="YztTitle">
+    </div>
+	<div></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ZhHeader"
+}
+</script>
+
+<style lang="scss" scoped>
+$fullsize: calc(100% - 0px);
+.header {
+  width: $fullsize;
+  height: $fullsize;
+  background: url(src/assets/images/logo2.png) no-repeat;
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  z-index: 999;
+}
+.YztTitle{
+  left:10%;
+  top:4%;
+  width: 246rem;
+  height: 54rem;
+  background: url(src/assets/images/yztTitie.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+}
+</style>