<script setup>
import { ref, onMounted } from 'vue'
import Bi from './components/bi.vue'
import dayjs from 'dayjs'

const date = ref('')

const fnGetTime = () => {
	const dateTime = dayjs().format('YYYY-MM-DD hh:mm:ss')

	date.value = dateTime
}

onMounted(() => {
	setInterval(() => { fnGetTime() }, 1000)
})
</script>

<template>
	<div class="bi_wrap">
		<div class="top">
			<div class="title">
				<span>哈尔滨市视频监控数智化BI</span>
			</div>
			<div class="time">
				{{ date }}
			</div>
		</div>
		<div class="main">
			<Bi></Bi>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.bi_wrap {
	width: 100vw;
	height: 100vh;
	background-color: #04265D;
	background-image: url(./assets/images/20230819112545.png);
	background-size: cover;
	background-position: center top;

	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

.top {
	background-image: url(./assets/images/top@2x.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;

	position: relative;

	height: 80px;
}

.time {
	color: #29B3E9;
	font-size: 12px;

	position: absolute;
	right: 9%;
	top: 70%;
	transform: translateY(-50%);
	letter-spacing: .1em;
}

.title {
	position: absolute;
	left: 50%;
	top: 68%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 14px;

	span {
		letter-spacing: .6em;
	}
}

.main {
	display: flex;
	height: calc(100vh - 80px);

	padding: 30px 20px 20px;
}
</style>
