iot-front-ui/src/components/home/HomeHeader.vue

<script>
import logoPng from '@/assets/images/logo.png'
export default {
  props: {
    //collapse: Boolean,
    isLogin: Boolean,
  },
  //emits: ['update:collapse'],
  //setup(props, context) {
  //  const methods = {
  //    toggleCollapse() {
  //      const val = !props.collapse
  //      context.emit('update:collapse', val)
  //    },
  //  }
  //  return methods
  //},
  data() {
    return {
      logoPng,
      hasMsg: false,
    }
  },
  mounted() {
  },
  methods: {

  },
}
</script>

<template>
  <div class="header">
    <div v-show="isLogin" class="fold">
      <a-icon type="unordered-list" class="icon" />
    </div>
    <div class="systemInfo">
      <a-avatar class="logo" shape="square" :src="logoPng" />
      <div class="title">
        智慧运营管理中心
      </div>
    </div>

    <div v-show="isLogin" class="project">
      <a-select class="project-select" default-value="1">
        <template #suffixIcon>
          <a-icon type="caret-down" style="color: white" />
        </template>

        <a-select-option value="1">
          主语国际3号楼
        </a-select-option>
        <a-select-option value="2">
          测试
        </a-select-option>
      </a-select>
    </div>

    <div class="header-btn">
      <a-icon type="desktop" class="icon" />
      <a-icon type="mobile" class="icon" />
      <span v-show="isLogin">
        <a-icon type="question-circle" class="icon" />
        <a-icon v-if="!hasMsg" type="bell" class="icon" />
        <a-badge v-if="hasMsg" dot :offset="[-15, 15]">
          <a-icon type="bell" class="icon" />
        </a-badge>
      </span>
    </div>

    <div v-show="isLogin" class="userInfo">
      <a-avatar class="user-avatar" icon="user" />
      <a-button class="usernameBtn" type="link" style="color: white;font-size: 18px">
        <a-icon type="user"></a-icon>
        <span style="display: inline-block;margin-left: 8px">admin</span>
      </a-button>
      <!--<div class="userDetail">-->
        <!--<div class="username">-->
        <!--  <a-button class="usernameBtn" type="link" style="color: white;font-size: 18px">-->
        <!--    <div style="padding: 0 5px 0 0">-->
        <!--      <a-icon type="user"></a-icon>-->
        <!--      <span style="display: inline-block;margin-left: 8px">admin</span>-->
        <!--    </div>-->
        <!--  </a-button>-->
        <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  display: flex;
  width: 100%;
  height: 60px;
  padding-left: 2px;
  border-bottom: 1px solid @primary-color;
  background: url("@/assets/images/header-bg.png");
  > div {
    display: inline-flex;
  }
  .fold {
    margin: auto 2px;
  }
  .systemInfo {
    vertical-align: top;
    color: white;
    font-weight: bolder;
    letter-spacing: 4px;
    margin-left: 12px;
    .logo {
      vertical-align: top;
      margin-right: 10px;
      margin-top: 15px;
    }
    .title {
      display: inline-block;
      vertical-align: top;
      margin-left: 10px;
      line-height: 60px;
      font-size: 22px;
      letter-spacing: 6px;
    }
  }
  .project {
    vertical-align: top;
    margin-top: 15px;
    margin-left: 15px;
    .project-select {
      width: 180px;
    }
  }

  .userInfo {
    height: 60px;
    padding: 0 15px;
    .user-avatar {
      margin-top: 15px;
      margin-right: 3px;
      color: #f56a00;
      background-color: #fde3cf;
    }
    .usernameBtn {
      margin-top: 15px !important;
      border-radius: 15px;
    }
    .usernameBtn:hover {
      background-color: #3c9cd3;
    }
  }
  .header-btn {
    .icon {
      font-size: 20px;
      line-height: 18px;
      text-align: center;
      padding-top: 13px;
    }
    margin-left: auto;
  }

}
.icon {
  font-size: 24px;
  color: white;
  padding: 10px 12px;
  margin: 7px 2px;
  cursor: pointer;
  border-radius: 8px;
}
.icon:hover {
  background-color: #186399;
}
/deep/ .ant-select-selection {
  background-color: #2f8cc8;
  border: 1px solid #2f8cc8;
  border-radius: 12px;
  padding: 0px 12px;
  color: white;
}
</style>