<script lang="ts" setup>
import Search from '@vicons/carbon/Search'

</script>

<template>
  <header>
    <nav class="container">
      <div class="start">
        <svg fill="currentColor" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M158.165333 499.498667A42.496 42.496 0 0 0 170.666667 469.333333V256a42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 0 0-85.333333C142.762667 128 85.333333 185.429333 85.333333 256v195.669333l-30.165333 30.165334a42.666667 42.666667 0 0 0 0 60.330666l30.165333 30.165334V768c0 70.570667 57.429333 128 128 128a42.666667 42.666667 0 0 0 0-85.333333 42.666667 42.666667 0 0 1-42.666666-42.666667v-213.333333a42.496 42.496 0 0 0-12.501334-30.165334L145.664 512l12.501333-12.501333zM978.090667 495.658667a42.709333 42.709333 0 0 0-9.258667-13.824L938.666667 451.669333V256c0-70.570667-57.429333-128-128-128a42.666667 42.666667 0 1 0 0 85.333333 42.666667 42.666667 0 0 1 42.666666 42.666667v213.333333a42.581333 42.581333 0 0 0 12.501334 30.165334l12.501333 12.501333-12.501333 12.501333A42.496 42.496 0 0 0 853.333333 554.666667v213.333333a42.666667 42.666667 0 0 1-42.666666 42.666667 42.666667 42.666667 0 1 0 0 85.333333c70.570667 0 128-57.429333 128-128v-195.669333l30.165333-30.165334a42.709333 42.709333 0 0 0 9.258667-46.506666zM669.738667 225.450667a42.752 42.752 0 0 0-69.546667 14.762666l-255.829333 512a42.624 42.624 0 0 0 23.893333 55.424 42.922667 42.922667 0 0 0 55.552-23.765333l255.786667-512a42.538667 42.538667 0 0 0-9.813334-46.421333z">
          </path>
        </svg>
        <span>Backset</span>
      </div>
      <div class="middle">
        <div class="search">
          <a-input-search :style="{ width: '320px' }" placeholder="搜索" />
        </div>
      </div>
      <div class="end">
        <span>注册</span>
        <span>登录</span>
      </div>
    </nav>
  </header>
</template>

<style lang="less" scoped>
header {
  height: 60px;
  background: #24292f;
  color: #d7d7d7;

  nav {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    height: 100%;

    .start {
      display: flex;
      align-items: center;
      cursor: pointer;

      svg {
        width: 28px;
      }

      span {
        padding-left: 10px;
        font-size: 20px;
        font-family: 'bs';
      }
    }

    .middle {
      text-align: right;
      .arco-input-search{
        border: 0;
      }
    }

    .end {
      text-align: right;

      span {
        cursor: pointer;
        margin-left: 30px;

        &:hover {
          color: #fff;
        }
      }
    }
  }
}
</style>