minnan-tv/src/components/parts/Header.vue

<script setup lang="ts">
import { useRouter } from 'vue-router';
import Clock from '../small/Clock.vue';

const emit = defineEmits(['back']);

const props = defineProps({
  showBack: {
    type: Boolean,
    default: false,
  },
  absolute: {
    type: Boolean,
    default: false,
  },
  customBack: {
    type: Boolean,
    default: false,
  }
});

const router = useRouter();

function handleBack() {
  if (props.customBack) {
    emit('back');
  } else {
    router.back();
  }
}
</script>

<template>
  <header :class="{ 'absolute': absolute }">
    <div class="logo">
      <div v-if="showBack" class="back main-any-button" role="button" tabindex="0" @click="handleBack()">
        <img src="@/assets/images/IconBack.png" >
        返回上一级
      </div>

      <img class="logo-img" src="@/assets/images/Logo.png" alt="">
      <img class="title-img" src="@/assets/images/TitleText.png" alt="">
    </div>
    <div class="extra">
      <Clock format="YYYY年MM月dd日 HH:mm" :flush-time="1000 * 30" />
    </div>
  </header>
</template>

<style lang="scss" scoped>
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(360deg, 
    var(--color-header1) 0%, 
    var(--color-header2) 80%, 
    var(--color-header3) 100%
  );
  padding: 1.5% 5%;

  &.absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  .back {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-right: 30px;

    img {
      margin-right: 10px;
      width: 50px;
    }
  }

  .logo {
    display: flex;
    flex-direction: row;
    align-items: center;

    .logo-img {
      width: 40px;
    }
    .title-img {
      width: 120px;
      margin-left: 15px;
    }
  }
  .extra {
    color: var(--color-text-light);
    font-size: 0.8rem;
  }

}

</style>