OpenPlatForm/components/index/head.vue

<template>
  <div class="index-head-box">
    <div class="flex-item">
      <!-- 首页标题logo -->
      <div class="list-item-box1">
        <div class="item-img">
          <img src="@/static/img/head-title.png" alt="" />
        </div>
        <!-- 搜索 -->
        <div class="item-input">
          <el-input
            v-model="searchValue"
            size="mini"
            placeholder="输入关键词搜索"
          ></el-input>
          <div class="item-button">
            <div class="primary-button">搜索</div>
          </div>
        </div>
        <!-- 注册登陆按钮 -->
        <div class="button-box">
          <div class="head-left-button">
            <div class="primary-button2" @click="onLogin">登陆</div>
          </div>
          <div class="head-right-button">
            <div class="primary-button" @click="onSign">注册</div>
          </div>
        </div>
      </div>

      <div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <div
            class="menu-block"
            v-for="(item, index) in menuData"
            :key="index"
          >
            <el-menu-item :index="item.mark" v-if="!item.slot">{{
              item.title
            }}</el-menu-item>

            <el-submenu :index="item.mark" v-else>
              <template slot="title">{{ item.title }}</template>
              <el-menu-item
                v-for="(list, i) in item.chlid"
                :key="i"
                :index="list.mark"
                >{{ list.title }} {{ i }}</el-menu-item
              >
            </el-submenu>
          </div>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "page-head",
  data() {
    return {
      searchValue: "",
      activeIndex: "",
      menuData: [
        {
          title: "方案解决",
          mark: "scheme",
          slot: true,
          chlid: [
            {
              title: "选项",
              mark: "scheme1",
              slot: false,
            },
            {
              title: "选项",
              mark: "scheme2",
              slot: false,
            },
            {
              title: "选项",
              mark: "scheme3",
              slot: false,
            },
          ],
        },
        {
          title: "应用市场",
          mark: "market",
          slot: false,
        },
        {
          title: "文档中心",
          mark: "document",
          slot: true,
          chlid: [
            {
              title: "选项",
              mark: "document1",
              slot: false,
            },
            {
              title: "选项",
              mark: "document2",
              slot: false,
            },
            {
              title: "选项",
              mark: "document3",
              slot: false,
            },
          ],
        },
        {
          title: "帮助支持",
          mark: "support",
          slot: true,
          chlid: [
            {
              title: "选项",
              mark: "support1",
              slot: false,
            },
            {
              title: "选项",
              mark: "support2",
              slot: false,
            },
            {
              title: "选项",
              mark: "support3",
              slot: false,
            },
          ],
        },
        {
          title: "开发者",
          mark: "developer",
          slot: false,
        },
        {
          title: "控制台",
          mark: "control",
          slot: false,
        },
      ],
    };
  },
  methods: {
    handleSelect: function () {},
    onLogin: function () {
      this.$router.push("/login");
    },
    onSign: function () {
      this.$router.push("/sign");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu-demo {
  display: flex;
}

.index-head-box {
  height: 136px;
  width: 100vw;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  padding: 24px 0 20px;
}
.flex-item {
  width: 1200px;
  height: 100%;
  display: flex;
  flex-flow: column; //垂直排列
  justify-content: space-between; //两端对齐
}

.list-item-box1 {
  display: flex;
}

.item-input {
  width: 350px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  background: #f7f8fa;
  margin: 0 auto;
  align-items: center;
  font-size: 14px;
}

.item-button {
  width: 70px;
  height: 100%;
}

.button-box {
  display: flex;
}

.head-left-button,
.head-right-button {
  width: 70px;
  height: 34px;
  display: flex;
}
.head-left-button {
  margin-right: 9px;
}
</style>