OpenPlatForm/components/domain/header.vue

<template>
    <div class="management-head-box">
      <div class="management-head">
        <img src="@/static/img/head-title.png" alt="" />
        <span class="management-font" @click="onSkip('/domain/control/myApp')">控制台</span>
        <div class="input-box">
          <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>
        <div class="management-list">
          <span>服务支持</span>
          <span>应用中心</span>
          <span @click="onSkip('/domain/detail')">文档中心</span>
          <span @click="onSkip('/domain/seekApi')">API市场</span>
        </div>
        <div class="lingdang-box">
          <img src="@/static/img/lingdang.png" alt="" />
        </div>

        <div class="avatar">
          <img src="@/static/img/touxiang/5.png" alt="" />
        </div>

        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              Mickey<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item></el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>回到首页</el-dropdown-item>
              <el-dropdown-item>退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data(){
    return {
      searchValue:''
    }
  
  },  
  methods: {
      onSkip: function(path){
          this.$router.push(path)
      }
    },
}
</script>


<style lang="scss" scoped>
.management-head-box {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  .management-head {
    width: 1200px;
    height: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .management-font {
      min-width: 80px;
      box-sizing: border-box;
      color: #4f4f4f;
      font-size: 18px;
      height: 19px;
      line-height: 19px;
      margin-left: 12px;
      padding-left: 24px;
      border-left: 1px solid #dddddd;
      cursor: pointer;
    }
    .input-box {
      width: 225px;
      height: 34px;
      background: #f7f8fa;
      margin-left: 40px;
      overflow: hidden;
      border-radius: 6px;
      .item-input {
        width: 225px;
        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%;
        }
      }
    }

    .management-list {
      margin-left: auto;
      display: flex;
      color: #333333;
      font-size: 14px;
      span {
        margin: 0 15px;
        min-width: 56px;
        cursor: pointer;
      }
    }
    .lingdang-box {
      width: 20px;
      height: 20px;
      margin: 0 15px;
    }

    .avatar {
      min-width: 34px;
      min-height: 34px;
      max-width: 34px;
      max-height: 34px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .el-dropdown-link {
      color: #333333;
      font-size: 14px;
    }
  }
}
</style>