v3-big-data-web/src/components/header.vue

<template>
   <div class="header">
        <img class="header_l" :src="rectangleLogo"/>
        <div class="header_c">实验室安全智慧化管控系统</div>
        <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
   </div>
</template>

<script>
import {} from "../api/http"
export default {
  name: 'heaDer',
  setup(){
    return {
      rectangleLogo:localStorage.getItem('rectangleLogo'),
    }
  },
  methods:{
    back(){
      this.$router.push('/home')
    },
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .header {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
        display: flex;
        justify-content: flex-start;

        .header_l {
            width:250px;
            height:55px;
            margin: 0 0 0 30px;
        }
        .header_c {
            width: 1180px;
            height: 152px;
            margin-left: 78px;
            background: url("~@/assets/image/index_icon2.png") no-repeat;
            background-size: 100% 100%;
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 30px;
            text-align: center;
            padding-top: 26px;
        }
        .header_r {
            cursor: pointer;
            margin-left: 264px;
            width: 82px;
            height: 32px;
            margin-top: 18px;
        }
    }
</style>