<template>
  <header class="page-header">
    <div class="header-bg">
      <h1 class="title">安全保通服务</h1>
      <button class="app-button">应用</button>
    </div>
  </header>
</template>

<script setup>
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

.page-header {
  height: vh(137);
  background: url(../assets/img/header-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-bg {
  background-image: url(../assets/img/header-title-bg.png);
  width: 100%;
  height: vh(107);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.title {
  color: rgba(255, 255, 255, 1);
  font-size: fs(51);
  letter-spacing: vw(2.32);
  font-family: FZLTDHJW--GB1-0, sans-serif;
  white-space: nowrap;
  margin: 0;
  text-align: center;
}

.app-button {
  position: absolute;
  right: vw(40);
  top: 50%;
  transform: translateY(-50%);
  width: vw(165);
  height: vh(44);
  background: url(../assets/img/header-btn-app-bg.png) no-repeat;
  background-size: 100% 100%;
  color: rgba(255, 255, 255, 1);
  font-size: fs(16);
  font-family: SourceHanSansCN-Regular, sans-serif;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.8;
  }
}
</style>
