qn-web/src/components/header.vue

<template>
  <div class="home">
    <!-- 导航 -->
    <div class="nav">
      <div class="modelWidth max flex">
        <div style="flex: 1">
          <el-image
            style="height: 60px"
            :src="require('@/assets/img/blogo.png')"
            fit="contain"
          ></el-image>
        </div>
        <div class="menu">
          <div
            v-for="(item, index) in navList"
            :key="index"
            :class="activeIndex === index ? 'a active' : 'a noactive'"
          >
            <div @click="hanldeNav(index)">
              {{ item }}
              <img
                v-if="index == 1 || index == 2 || index == 3"
                style="width: 14px; height: 12px"
                src="@/assets/img/home/gengduo.png"
              />
            </div>

            <div :class="activeIndex === index ? 'line' : 'noline'"></div>
            <div class="transition-box">
              <div class="box">
                <div class="box-left">
                  <div
                    :class="showIndex == index ? 'silders' : 'silder'"
                    v-for="(item, index) in serve"
                    :key="index"
                    @mouseenter="handleServe(index)"
                  >
                    {{ item.name }}
                  </div>
                </div>
                <div class="box-right" v-show="showIndex == 0">
                  <div
                    class="platform"
                    v-for="(item, index) in platform"
                    :key="index"
                  >
                    <div class="top">{{ item.title }}</div>
                    <div class="bottom">{{ item.name }}</div>
                  </div>
                </div>
                <div class="box-right" v-show="showIndex == 1">
                  <div
                    class="platform"
                    v-for="(item, index) in platform1"
                    :key="index"
                  >
                    <div class="top">{{ item.title }}</div>
                    <div class="bottom">{{ item.name }}</div>
                  </div>
                </div>
                <div class="box-right" v-show="showIndex == 2">
                  <div
                    class="platform"
                    v-for="(item, index) in platform2"
                    :key="index"
                  >
                    <div class="top">{{ item.title }}</div>
                    <div class="bottom">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  // props: ["activeIndex"],
  data() {
    return {
      navList: ["首页", "产品与服务", "解决方案", "新闻中心", "关于我们"],
      serve: [
        {
          name: "数据服务",
          id: 1,
        },
        {
          name: "工业SAAS平台",
          id: 2,
        },
        {
          name: "硬件产品",
          id: 3,
        },
      ],
      platform: [
        {
          title: "大数据技术1",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术1",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术1",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术1",
          name: "大数据核验平台",
        },
      ],
      platform1: [
        {
          title: "大数据技术2",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术2",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术2",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术2",
          name: "大数据核验平台",
        },
      ],
      platform2: [
        {
          title: "大数据技术3",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术3",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术3",
          name: "大数据核验平台",
        },
        {
          title: "大数据技术3",
          name: "大数据核验平台",
        },
      ],
      activeIndex: 0,
      timer: null,
      showIndex: 0,
    };
  },
  created() {},
  methods: {
    //跳转导航
    hanldeNav(index) {
      this.activeIndex = index;
    },
    //产品服务
    handleServe(index) {
      this.showIndex = index;
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;

  .nav {
    width: 100%;
    height: 85px;
    background-color: #fff;

    .menu {
      height: 100%;
      display: flex;
      justify-content: space-around;

      flex: 7;
      cursor: pointer;
      .a {
        padding-top: 30px;

        &:nth-child(2):hover .transition-box {
          display: block;
        }
      }
      .noactive {
        color: #333333;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        position: relative;
      }
      .active {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #0252d9;
        position: relative;
      }
      .line {
        margin: 6px auto 0 auto;
        height: 3px;
        background-color: #2311e8;
        width: 30px;
      }
      .noline {
        margin: 6px auto 0 auto;
        height: 3px;
        width: 30px;
      }
      .transition-box {
        margin-top: 15px;
        width: 100%;
        height: 250px;
        display: none;
        border-radius: 4px;
        background-color: #fff;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 999;
        border-top: 1px solid #d1d1d1;
        .box {
          width: 80%;
          margin: 0 auto;
          height: 250px;
          display: flex;
          .box-left {
            width: 30%;
            border-right: 1px solid #d1d1d1;
            display: flex;
            font-size: 16px;
            flex-direction: column;
            align-items: center;
            padding-bottom: 50px;
            .silder {
              flex: 1;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #333;
              font-weight: bolder;
            }
            .silders {
              flex: 1;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #2d13c1;
              font-weight: bolder;
              border-right: 2px solid #2d13c1;
            }
          }
          .box-right {
            width: 70%;
            display: flex;

            padding: 30px;
            justify-content: center;
            flex-wrap: wrap;
            .platform {
              width: 25%;

              & > .bottom:hover {
                color: #2d13c1;
                font-weight: bolder;
              }
              .top {
                color: #333;
                font-size: 15px;
                font-weight: bolder;
              }
              .bottom {
                color: #666;
                font-size: 13px;
                padding-top: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>