<script setup lang="ts">
import {
  Col as VanCol,
  Row as VanRow,
  Search as VanSearch,
} from 'vant/es'
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="top_nav_main">
    <VanRow gutter="54" align="center">
      <VanCol span="2">
        <img alt="default-user-profile" class="default_user_profile" src="../../assets/common/default-user-profile.png">
      </VanCol>
      <VanCol span="22">
        <VanSearch v-model="value" placeholder="请输入搜索关键词" />
      </VanCol>
    </VanRow>
  </div>
</template>

<style scoped lang="less">
.top_nav_main {
  padding-bottom: var(--base-interval-1);
}
.default_user_profile {
  border-radius: 50%;
  width: 33px;
  height: 33px;
  position: relative;
  top: 2px;
}
</style>
