<!--
 * @Author: chris
 * @Date: 2025-08-25 11:54:16
 * @LastEditors: chris
 * @LastEditTime: 2025-08-26 17:49:29
-->
<script setup>
import { Decoration8, Decoration10 } from '@kjgl77/datav-vue3';

const title = ref('智慧果园平台')
</script>

<template>
  <div class="header-module">
    <decoration-10 :dur="1" class="dec-10-l"/>
    <decoration-8 :dur="1" class="dec-8-l" />
    <div class="title">{{ title }}</div>
    <decoration-8 :reverse="true" :dur="1" class="dec-8-r" />
    <decoration-10 :reverse="true" class="dec-10-r" />
  </div>
</template>

<style lang="scss" scoped>
$headerH: 50px;
.header-module {
  @apply flex items-start justify-center w-100%;
  height: $headerH;

  .title {
    @apply w-400px text-align-center font-size-28px m-b-[-4px] overflow-hidden;
    line-height: 70px;
  }

  .dec-10-l, .dec-10-r {
    @apply flex-1 h-4px m-t-[-1px];
  }

  .dec-8-l, .dec-8-r {
    @apply w-220px;
  }

  .dec-10-r {
    @apply transform-rotate-180deg;
  }
}
</style>
