menduner-uniapp/pagesB/headhunting/components/nav.vue

<template>
  <view class="main-top">
    <view class="main-top-nav">
      <view class="main-top-nav-logo" @tap="handleTo('/pagesB/headhunting/index')">
        <image
          src="https://minio.citupro.com/dev/menduner/poster.png"
          mode="aspectFill"
        />
        <view class="gun"></view>
        <text>中国</text>
      </view>
      <view class="main-top-nav-title">
        <uni-icons :type="show ? 'closeempty' : 'bars'" color="#FFF" size="30" @tap="handleShow"/>
      </view>
    </view>
    <view class="panel" :class="{active: show}">
      <uni-list>
        <uni-list-item class="panel-item" showArrow title="我们的服务" @tap="handleTo('/pagesB/headhunting/pages/service')" />
        <uni-list-item class="panel-item" showArrow title="候选人" @tap="handleClick('/pages/index/position')"/>
        <uni-list-item class="panel-item" showArrow title="联系我们" />
      </uni-list>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)


const handleShow = () => {
  show.value = !show.value
}

const handleClick = (path) => {
  uni.switchTab({ url: path })
}

const handleTo = (path) => {
  uni.navigateTo({ url: path })
}
</script>

<style lang="scss" scoped>
$rootColor: #00695c;
.main-top {
  position: sticky;
  top: 0;
  background: $rootColor;
  z-index: 999;
  &-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 120rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    &-logo {
      // width: 300rpx;
      height: 100%;
      display: flex;
      align-items: center;
      .gun {
        height: 75rpx;
        width: 6rpx;
        background: #fff;
        margin: 0 20rpx;
      }
      text {
        color: #fff;
        font-size: 32rpx;
        font-weight: 600;
      }
      image {
        width: 180rpx;
        height: 75rpx;
        // margin-bottom: 12rpx;
      }
    }

    &-title {
      height: 100%;
      display: flex;
      align-items: center;
      color: #fff;
    }
    
  }
}
.panel {
  overflow: hidden;
  height: 0;
  transition: all 0.3s;
  &.active {
    height: auto;
  }
  &-item {
    
  }
}
:deep(.uni-list-item) {
  background: #000 !important;
  background-color: #000 !important;
}

</style>