<template>
    <div class="gradient-1">
        <div class="headArea">
            <div class="haBody">
                <div class="haBody-1">
                    <h1>
                        <a href="" class="logo">
                            <img src="../logo1.png" alt="">
                        </a>
                    </h1>
                </div>
                <div class="haBody-2"></div>
                <div class="haBody-3"></div>
                <div class="haBody-4"></div>
            </div>
        </div>
    </div>
</template>

<script>

</script>

<style>
  .gradient-1 {
    width: 100%;
    height: 100vh;
    position: relative;
    background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
  }
  .headArea {
    height: 50px;
    width: 100%;
    background-color: white;
    display: flex;         /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;   /* 垂直居中 */
  }
  .haBody{
    display: flex;
    width: 75%;
    height: 100%;
    background-color: lightblue;
  }
  .haBody-1{
    display: flex;
    background-image: url();
    width: 100px;
    height: 50px;
    background-color: green;
  }
  .haBody-2{
    display: flex;
    width: 100px;
    height: 50px;
    background-color: blue;
  }
  .haBody-3{
    display: flex;
    width: 100px;
    height: 50px;
    background-color: red;
  }
  .haBody-4{
    display: flex;
    width: 100px;
    height: 50px;
    background-color: yellow;
  }
  .logo{
    text-decoration: none;

  }
</style>