agriculture-one-map/src/views/components/Header.vue

<template>
  <div class="header no-events">
    <div class="left">
      <div class="back yse-events" @click="goBack">
        <img src="@/assets/img/go_back.png" />
        <span>返回</span>
      </div>
    </div>
    <div class="center">
      <div class="title">{{title}}</div>
    </div>
    <div class="right">
        <slot name="right-slot"></slot>
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

let emit = defineEmits(["goBack"]);
let props = defineProps({
  title: {
    type: String,
    default:'飞鸟智慧果园管理平台'
  },
});

const store = useStore();
const state = store.state;
const router = useRouter();

onMounted(() => {
});

/**
 * 返回按钮的事件
 */
function goBack() {
//   emit("goBack");
//   router.go(1)
  // router.push('/home') 
  router.push('/warningHome') 
}

</script>


<style lang="scss" scoped>
.header {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .left {
    height: 100%;
    display: flex;
    width: 32%;
    align-items: flex-end;
    margin-top: 20px;
    .back {
      background: #042b37;
      border-radius: 5px;
      border: 1px solid #00fff0;
      color: #fff;
      width: 94px;
      height: 36px;
      font-weight: 500;
      font-size: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 24px;
      cursor: pointer;
      img{
        width: 19px;
        height: 19px;
        margin-right: 8px;
      }
    }
  }
  .center {
    width: 50%;
    text-align: center;
    .title {
      width: 100%;
      text-align: center;
      height: 50px;
      font-size: 36px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #5efcff;
      line-height: 50px;
      letter-spacing: 1px;
      background: linear-gradient(180deg, #5cf2ff 0%, #6cffd7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .right {
    height: 100%;
    width: 33%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    background-position: 0 100%;
    color: #fff;
    margin-top: 20px;
  }
}
</style>