veterans_company/src/components/header.vue

<template>
  <div id="header">
    <div class="inner">
      <div class="header-left">
        <a class="link" href="#">进入退役军人教育培训服务门户网站</a>
      </div>
      <div class="header-right">
        <ul>
          <!-- <li><a class="link" href="#">消息</a></li>
          <li><span>|</span></li> -->
          <!-- <li><a class="link" href="#">收藏夹</a></li>
          <li><span>|</span></li> -->
          <li>
            <a class="link" href="#">
              王二<i class="name-icon el-icon-caret-bottom"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    msg: String,
  },
  created() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#header {
  background-color: #3d5d4c;
  .inner {
    // width: 1200px;
    padding-left: 57px;
    padding-right: 47px;
    height: 66px;
    line-height: 66px;
    margin: 0 auto;
    font-size: 14px;
    cursor: default;
    .link {
      color: #fff;
      .name-icon {
        margin-left: 14px;
      }
    }
    .header-left {
      float: left;
    }
    .header-right {
      float: right;
      ul {
        float: left;
        li {
          position: relative;
          float: left;
          span {
            padding: 0 10px;
            color: #fff;
            opacity: 0.4;
          }
        }
      }
    }
  }
}
</style>