<template>
  <div class="outside-header">
    <span class="pull-left">
      <img class="logo m-r" :src="logo" />
      <img class="m-r" :src="logo2" />
      <div class="inline-block left-title text-center sub-title">
        <div>国家能源集团科学技术研究院有限公司</div>
      </div>
    </span>
    <span class="screen-title" @click="operateScreen">
      {{ title }}
    </span>
    <span class="pull-right">
      <a class="m-r-lg tips" href="https://www.baidu.com/" target="_blank">系统使用手册下载</a>
      <a class="btn m-r" href="https://www.baidu.com/" target="_blank">登录入口</a>
    </span>
  </div>
</template>

<script>
import useHeader from './useHeader.js'
export default {
  setup() {
    const { operateScreen, logo, logo2, title } = useHeader()
    return {
      logo,
      logo2,
      title,
      operateScreen
    }
  }
}
</script>
<style lang="scss" scoped>
.m-r {
  margin-right: 15px;
}
.m-r-lg {
  margin-right: 35px;
}
.text-center {
  text-align: center;
}

.pull-left {
  text-align: left;
}
.inline-block {
  display: inline-block;
}

.pull-right {
  text-align: right;
}
.outside-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 73px;
  display: flex;
  & > span {
    flex: 1;
    padding: 10px;
  }

  .left-title {
    color: #fff;
    font-size: 18px;
    vertical-align: top;
  }
  .logo {
    margin: 0 0 0 20px;
    width: 54px;
  }
  .sub-title {
    font-size: 20px;
    line-height: 52px;
  }
  .screen-title {
    text-align: center;
    color: #fff;
    font-size: 28px;
    line-height: 42px;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
  }
  .btn {
    padding: 5px;
    width: 30px;
    height: 20px;
    font-size: 18px;
    color: #03a9f4;
    cursor: pointer;
    background: url('../images/card_bg.png');
  }
}
</style>
