<template>
  <div class="header flex aic jcc main-title-bg-img">
    <div class="count-down">
      系统将在 <span>{{ times }}</span> 秒后返回首页
    </div>
    <slot name="title" class="title">
      <div></div>
    </slot>
    <div class="right-box flex aic">
      <div
        class="back-one flex aic jcc pointer"
        @click="handleBack"
        v-onEvent="{
          eventName: '点击',
          eventCode: 'Click',
          businessCode: 'back',
          businessName: '返回',
          routers: $route,
        }"
      >
        <span class="back-text">返回</span>
      </div>
      <slot name="right"><div></div></slot>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["times"]),
  },
  created() {},
  methods: {
    handleBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  // padding: 0px 40px;
  margin-bottom: 10px;
  // background: var(--main-theme-color);
  // background: url("../assets/img/title_1.jpg") no-repeat center;
  background-size: 100% 100%;
  // background: var(--main-theme-color);
  box-shadow: 0px 2px 6px 6px #ccc;
  .count-down {
    position: absolute;
    left: 40px;
    // color: var(--main-h1-color);
    color: #fff;
    font-size: 24px;
    // span {
    //   color: var(--main-theme-color);
    // }
  }
  .right-box {
    position: absolute;
    right: 40px;
  }
  .back-text {
    font-size: 28px;
    color: #ffffff;
  }
  .title {
    font-size: 44px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }

  .back-one {
    width: 150px;
    height: 64px;
    border: 1px solid var(--main-h1-color);
    border-radius: 8px;
    cursor: pointer;
    .el-icon-arrow-left,
    .icon-home {
      font-size: 26px;
      color: var(--main-h1-color);
    }
    span {
      font-size: 28px;
      font-family: Microsoft YaHei;
      color: var(--main-h1-color);
    }
  }
}
</style>
