<template>
  <div id="banner-wrap">
    <div class="banner-bg">
      <div class="banner-content">
        <h1 style="margin-top: -40px">
          <p>优品尚</p>
          <p style="font-size: 20px; margin-top: 10px">用户至上、品质优先、诚信经营</p>
          <p style="font-size: 12px">Customer First, Quality Priority, Integrity Operation​</p>
        </h1>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
#banner-wrap {
  position: relative;
  height: 500px;
  overflow: hidden;
  h1 {
    font-weight: normal;
    color: #fff;
  }

  .banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../../assets/banner.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(0.8);
  }

  .banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba($color: #02084e, $alpha: 0.4);

    h1 {
      color: white;
      font-size: 36px;
      text-align: center;
      z-index: 2;
    }
  }
}
</style>
