nankai-cms-website-gov/components/home/WebsiteNav.vue

<template>
  <div class="website-nav-wrap">
    <div class="title-wrap">
      <img src="/images/link.png" alt="">
      <h3>网站导航</h3>
    </div>
    <ul>
      <li
        v-for="(title, index) in navList"
        v-show="data[index] != null && data[index].length > 0"
        :key="title"
      >
        <PopUpSelect :title="title" :data="data[index]"/>
      </li>
    </ul>
  </div>
</template>

<script>
import PopUpSelect from '@/components/common/PopUpSelect.vue'

export default {
  name: 'WebsiteNav',
  components: { PopUpSelect },
  props: {
    data: {
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      navList: ['国家级链接', '市级链接', '友情链接', '其他链接']
    }
  }
}
</script>

<style scoped lang="scss">
.website-nav-wrap {
  margin: 0 auto;
  display: flex;
  // 标题
  .title-wrap {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 30px;
    h3 {
      margin: 0;
      padding-left: 8px;
      font-size: 16px;
    }
    img {
      width: 20px;
      padding-top: 2px;
    }
  }
  // 网站
  ul {
    display: flex;
    flex-grow: 1;
    gap: 20px;
    &>li {
      flex: 1;
      cursor: pointer;
      &:first-of-type {
        justify-content: flex-start;
        padding-left: 10px;
      }
      .el-tooltip__trigger:focus {
        outline: none;
      }
      .el-dropdown {
        width: 100%;
        .dropdown-link {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #1b1b1b;
          padding: 10px 20px;
        }
        .el-icon--right {
          padding-left: 100px;
          color: #aaa;
          font-size: 18px;
          line-height: 18px;
          margin-top: 2px;
        }
      }
    }
  }
}

:deep(.el-dropdown-menu__item) {
  min-width: 220px;
  a {
    color: #1b1b1b;
  }
}
</style>