93 lines
1.6 KiB
Vue
93 lines
1.6 KiB
Vue
<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>
|