/**
  头部按钮
*/
<script setup lang="ts">
</script>

<template>
  <div class="header-btn-container">
    <div class="outer-0">
      <div class="inner-0">
        <div class="inner-1">
          <slot name="icon" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url("../../assets/css/common.less");

// 初始化背景
.initbg(@suffix) {
  background: url('/images/@{suffix}') no-repeat center center;
  background-size: 100% 100%;
}

.header-btn-container {
  width: 7.5vw;
  height: 11.1vh;
  .outer-0 {
    width: 8.2vw;
    height: 11.1vh;
    .initbg("outer-0.png");
    .flex();
  }
  .inner-0 {
    width: 4.3vw;
    height: 7.7vh;
    .initbg("inner-0.png");
    .flex();
  }
  .inner-1 {
    width: 3vw;
    height: 5.3vh;
    .initbg("inner-1.png");
    .flex();
  }

  &:hover {
    cursor: pointer;
  }

}


</style>
