menduner/src/views/headhunting/components/nav.vue

<template>
  <div class="nav-box d-flex align-center">
    <div class="d-flex align-center justify-space-between" style="width: 1200px; max-width: 1200px; height: 45px; line-height: 45px; margin: 0 auto;">
      <div class="d-flex align-center">
        <div class="cursor-pointer" style="width: 120px; height: 50px" @click="emit('click', '/headhunting')">
          <v-img src="https://minio.citupro.com/dev/menduner/poster.png"  aspect-ratio="16/9" cover width="120" height="50"></v-img>
        </div>
        <div class="china cursor-pointer" @click="emit('click', '/headhunting')">中国</div>
      </div>
      <div class="d-flex align-center">
        <div v-for="(k, index) in navList" :key="index" class="list-item cursor-pointer font-size-15" :class="{'mr-5': index !== navList.length - 1}" @click="emit('click', k.path)">
          {{ k.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'headhunting-nav'})

const emit = defineEmits(['click'])
const navList = [
  { title: '我们的服务', path: '/headhunting/service' },
  { title: '我们的顾问', path: '' },
  { title: '候选人', path: '' }
]
</script>

<style scoped lang="scss">
.nav-box {
  height: 100px;
  color: #fff;
  font-weight: 700;
  background-color: #00695C;
}
.china {
  font-family: FFScalaSansWebBold, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  display: flex;
  vertical-align: middle;
  align-items: center;
  -webkit-box-align: center;
  margin-top: 10px;
  color: #fff;
  font-size: 24px;
  line-height: 24px;
  position: relative;
  top: 3px;
  text-decoration: none;
  &::before {
    content: '';
    background-color: #fff;
    display: inline-block;
    height: 45px;
    margin: 0 27px;
    width: 2px;
  }
}

.list-item:hover {
  opacity: .7;
}
</style>