<template>
  <div class="content">
    <!-- 天气区域 -->
    <div class="weather">
      <img class="weather_img" src="@/assets/images/sun.png" />
      晴 5℃
    </div>
    <!-- 顶部标题区域 -->
    <div class="title">家庭书房智能教育</div>
    <!-- 时间区域 -->
    <div class="time">
      <div class="time_date">{{ currentDate }}</div>
      <div>{{ currentTime }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentTime } from '@/utils/getTime.js'

// 当前日期星期
const currentDate = ref('')
// 当前时分秒
const currentTime = ref('')

onMounted(() => {
  getTimeData()
})

const getTimeData = () => {
  currentDate.value = getCurrentTime().currentDate
  currentTime.value = getCurrentTime().currentTime
  setInterval(() => {
    currentDate.value = getCurrentTime().currentDate
    currentTime.value = getCurrentTime().currentTime
  }, 1000)
}
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  height: 140px;
  color: #fff;
  background-image: url(@/assets/images/book-header-bg.png);
  background-size: 100% 100%;

  .weather {
    position: absolute;
    top: 55px;
    left: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;

    .weather_img {
      margin-right: 10px;
      width: 30px;
      height: 30px;
    }
  }

  .title {
    position: absolute;
    top: 48px;
    left: 808px;
    font-size: 38px;
    font-weight: bold;
  }

  .time {
    position: absolute;
    top: 65px;
    right: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;

    .time_date {
      margin: 0 15px 0 75px;
    }
  }
}
</style>
