<template>
    <div class="p-header">
      <div class="relative flex items-center text-white mt-16px">
        <!-- <img alt="" class="w-100px" src="@/assets/imgs/login/logo.png" /> -->
      </div>
      <div class="title">雄安智慧交通</div>

      <div class="daybox">
        <slot name="pre"></slot>

        <UserInfo />
      </div>
    </div>
</template>

<script setup>
// import { UserInfo } from '@/layout/components/UserInfo'
// import dayjs from 'dayjs'
// const title = import.meta.env.VITE_APP_TITLE

defineProps({
  titlePre: {
    type: String,
    default: ""
  }
});
</script>

<style lang="scss" scoped>

.p-header {
  height: 80px;
  position: fixed;
  top: 0%;
  left: 0%;
  right: 0%;
  background-image: url("@/assets/imgs/header-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 84px;
  padding: 0 50px 0 69px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  font-family: AlimamaShuHeiTi;
  font-weight: bold;
  font-size: 36px;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #26c6c0 100%);
  background-clip: text;
  margin-top: 22px;
  flex: auto;
  text-align: center;
}

.title-pre {
  font-size: 20px;
}

.pre {
  flex: auto;
  margin-top: 20px;
  display: flex;
}

.daybox {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
  align-items: center;

  .date {
    font-family: Bebas;
    font-size: 12px;
    color: #c6d8e4;
  }

  .hour {
    font-family: Bebas;
    font-size: 18px;
    color: #cedce6;
    margin-right: 14px;
  }
}
</style>
